BayIQ-UI/src/features/cameras/components/PlatePatch/SightingEntryTable.tsx

import { useCameraFeedContext } from "../../../../app/context/CameraFeedContext";
import type { DecodeReading } from "../../../../types/types";
import { useSightingEntryAndExit } from "../../hooks/useSightingEntryAndExit";

const SightingEntryTable = () => {
  const { state } = useCameraFeedContext();
  const cameraFeedID = state.cameraFeedID;
  const { entryQuery } = useSightingEntryAndExit(cameraFeedID);

  const isLoading = entryQuery?.isFetching;
  const readings = entryQuery?.data?.decodes;

  if (isLoading) return <span className="text-slate-500">Loading Sighting data…</span>;
  return (
    <div className="border border-gray-600 rounded-lg  m-2">
      <div className="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" key={reading?.id}>
                <td className="px-4 py-3 font-mono font-semibold text-blue-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>
    </div>
  );
};

export default SightingEntryTable;