fixing issue with lastScan data not being passed to component

app/components/location/scan-details.tsx

@@ -1,31 +1,16 @@
-import type { ReactNode } from "react";
+import type { SerializeFrom } from "@remix-run/node";
 import { Button } from "~/components/shared/button";
+import type { parseScanData } from "~/modules/scan/utils.server";
 import { ShelfMap } from "./map";
 import { MapPlaceholder } from "./map-placeholder";
 import { HelpIcon } from "../icons/library";
 import { InfoTooltip } from "../shared/info-tooltip";
 
-export interface lastScanType {
-  lastScan?: {
-    coordinates: string;
-    dateTime: ReactNode;
-    ua: {
-      device: {
-        model: string;
-        vendor: string;
-      };
-      browser: {
-        name: string;
-      };
-      os: {
-        name: string;
-      };
-    };
-    manuallyGenerated: boolean;
-  };
-}
-
-export function ScanDetails({ lastScan }: lastScanType) {
+export function ScanDetails({
+  lastScan,
+}: {
+  lastScan?: SerializeFrom<ReturnType<typeof parseScanData>> | null;
+}) {
   let latitude, longitude;
 
   const hasLocation = lastScan?.coordinates !== "Unknown location";

app/routes/_layout+/assets.$assetId.overview.tsx

@@ -230,7 +230,8 @@ export async function action({ context, request, params }: ActionFunctionArgs) {
 }
 
 export default function AssetOverview() {
-  const { asset, locale, timeZone, qrObj } = useLoaderData<typeof loader>();
+  const { asset, locale, timeZone, qrObj, lastScan } =
+    useLoaderData<typeof loader>();
   const booking = asset?.bookings?.length ? asset?.bookings[0] : undefined;
 
   const customFieldsValues =
@@ -464,8 +465,7 @@ export default function AssetOverview() {
           />
 
           {asset && <AssetQR qrObj={qrObj} asset={asset} />}
-          {/* @TODO: Figure our the issue with type definition of `lastScan` */}
-          {!isSelfService ? <ScanDetails /> : null}
+          {!isSelfService ? <ScanDetails lastScan={lastScan} /> : null}
         </div>
       </div>
       <ContextualSidebar />