97 lines
4.3 KiB
TypeScript
97 lines
4.3 KiB
TypeScript
import { useState } from "react";
|
|
import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
|
|
import type { DecodeReading } from "../../../../types/types";
|
|
import { useSightingEntryAndExit } from "../../hooks/useSightingEntryAndExit";
|
|
import PlatePatchModal from "./platePatchModal/PlatePatchModal";
|
|
|
|
const SightingExitTable = () => {
|
|
const [isPlatePatchModalOpen, setIsPlatePatchModalOpen] = useState(false);
|
|
const [currentPatch, setCurrentPatch] = useState<DecodeReading | null>(null);
|
|
const { state } = useCameraFeedContext();
|
|
const cameraFeedID = state.cameraFeedID;
|
|
const { exitQuery } = useSightingEntryAndExit(cameraFeedID);
|
|
|
|
const isLoading = exitQuery?.isFetching;
|
|
const readings = exitQuery?.data?.decodes;
|
|
|
|
const handleRowClick = (reading: DecodeReading) => {
|
|
setCurrentPatch(reading);
|
|
setIsPlatePatchModalOpen(true);
|
|
};
|
|
|
|
if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
|
|
return (
|
|
<>
|
|
<div className="border border-gray-600 rounded-lg m-2">
|
|
{/* Desktop Table */}
|
|
<div className="hidden md:block overflow-y-auto">
|
|
<table className="w-full text-left text-sm">
|
|
<thead className="bg-gray-700/50 text-gray-200 sticky top-0">
|
|
<tr>
|
|
<th className="px-4 py-3 font-semibold">VRM</th>
|
|
<th className="px-4 py-3 font-semibold">Bay ID</th>
|
|
<th className="px-4 py-3 font-semibold text-center">Seen Count</th>
|
|
<th className="px-4 py-3 font-semibold">First Seen</th>
|
|
<th className="px-4 py-3 font-semibold">Last Seen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-700">
|
|
{readings?.map((reading: DecodeReading) => (
|
|
<tr
|
|
className="hover:bg-gray-800/30 transition-colors hover:cursor-pointer"
|
|
key={reading?.id}
|
|
onClick={() => handleRowClick(reading)}
|
|
>
|
|
<td className="px-4 py-3 font-mono font-semibold text-red-400 text-lg">{reading?.vrm}</td>
|
|
<td className="px-4 py-3 text-gray-300">{reading?.laneID}</td>
|
|
<td className="px-4 py-3 text-center text-gray-300">{reading?.seenCount}</td>
|
|
<td className="px-4 py-3 text-gray-400 text-md">{reading?.firstSeenTimeHumane}</td>
|
|
<td className="px-4 py-3 text-gray-400 text-md">{reading?.lastSeenTimeHumane}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Mobile Cards */}
|
|
<div className="md:hidden overflow-y-auto space-y-3 p-3">
|
|
{readings?.map((reading: DecodeReading) => (
|
|
<div
|
|
key={reading?.id}
|
|
className="bg-gray-800/30 rounded-lg p-4 space-y-2 border border-gray-700 hover:border-gray-600 transition-colors"
|
|
onClick={() => handleRowClick(reading)}
|
|
>
|
|
<div className="flex justify-between items-start">
|
|
<span className="font-mono font-semibold text-red-400 text-xl">{reading?.vrm}</span>
|
|
<span className="text-gray-400 text-sm">Bay {reading?.laneID}</span>
|
|
</div>
|
|
<div className="flex justify-between text-sm">
|
|
<span className="text-gray-400">Seen Count:</span>
|
|
<span className="text-gray-300 font-semibold">{reading?.seenCount}</span>
|
|
</div>
|
|
<div className="pt-2 border-t border-gray-700 space-y-1 text-xs">
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-500">First Seen:</span>
|
|
<span className="text-gray-400">{reading?.firstSeenTimeHumane}</span>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<span className="text-gray-500">Last Seen:</span>
|
|
<span className="text-gray-400">{reading?.lastSeenTimeHumane}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<PlatePatchModal
|
|
isPlatePatchModalOpen={isPlatePatchModalOpen}
|
|
handleClose={() => setIsPlatePatchModalOpen(false)}
|
|
currentPatch={currentPatch}
|
|
direction={"exit"}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SightingExitTable;
|