- improved statuses acress dashboard and child cards

Reviewed-on: #12

src/features/cameras/components/CameraGrid.tsx

@@ -9,7 +9,7 @@ const CameraGrid = () => {
   const [tabIndex, setTabIndex] = useState(0);
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-5 md:grid-rows-5 max-h-screen">
+    <div className="flex flex-col gap-4 p-4 md:grid md:grid-cols-5 md:grid-rows-5 md:max-h-screen md:gap-0 md:p-0">
       <VideoFeedGridPainter />
       <CameraSettings tabIndex={tabIndex} setTabIndex={setTabIndex} />
       <PlatePatch />

src/features/cameras/components/CameraSettings/CameraSettings.tsx

@@ -10,7 +10,7 @@ type CameraSettingsProps = {
 
 const CameraSettings = ({ tabIndex, setTabIndex }: CameraSettingsProps) => {
   return (
-    <Card className="p-4 col-span-2 row-span-5 col-start-3 md:col-span-3 md:row-span-5 overflow-auto">
+    <Card className="p-4 w-full overflow-auto md:col-span-2 md:row-span-5 md:col-start-4 md:row-start-1">
       <Tabs
         selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
         className="react-tabs"

src/features/cameras/components/CameraSettings/RegionSelector.tsx

@@ -19,14 +19,6 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
     dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID: cameraFeedID, mode: e.target.value } });
   };
 
-  const handleAddRegionClick = () => {
-    const regionName = `Region ${regions.length + 1}`;
-    dispatch({
-      type: "ADD_NEW_REGION",
-      payload: { cameraFeedID: cameraFeedID, regionName: regionName, brushColour: "#ffffff" },
-    });
-  };
-
   const handleResetRegion = () => {
     dispatch({
       type: "RESET_PAINTED_CELLS",
@@ -34,13 +26,6 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
     });
   };
 
-  const handleRemoveClick = () => {
-    dispatch({
-      type: "REMOVE_REGION",
-      payload: { cameraFeedID: cameraFeedID, regionName: regions[selectedRegionIndex].name },
-    });
-  };
-
   const handleModeChange = (newMode: string) => {
     dispatch({ type: "CHANGE_MODE", payload: { cameraFeedID: cameraFeedID, mode: newMode } });
   };
@@ -177,14 +162,6 @@ const RegionSelector = ({ regions, selectedRegionIndex, mode, cameraFeedID }: Re
             );
           })}
         </>
-        <div className=" mx-auto flex flex-row gap-4  mt-4">
-          <button className="border border-blue-900 bg-blue-700 px-4 py-1 rounded-md" onClick={handleAddRegionClick}>
-            Add Region
-          </button>
-          <button className="border border-red-900 bg-red-700 px-4 py-1 rounded-md" onClick={handleRemoveClick}>
-            Remove Region
-          </button>
-        </div>
       </div>
 
       <div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2 h-50">

src/features/cameras/components/PlatePatch/SightingPatch.tsx

@@ -6,7 +6,7 @@ import SightingExitTable from "./SightingExitTable";
 
 const PlatePatch = () => {
   return (
-    <Card className="md:row-start-4 md:col-span-2 p-4 h-[190%]">
+    <Card className="p-4 w-full md:w-[95%] md:row-start-4 md:col-span-3 md:h-[190%]">
       <CardHeader title="Entry / Exit" />
       <Tabs>
         <TabList>

src/features/cameras/components/Video/VideoFeedGridPainter.tsx

@@ -93,7 +93,7 @@ const VideoFeedGridPainter = () => {
       const width = window.innerWidth;
 
       const aspectRatio = BACKEND_WIDTH / BACKEND_HEIGHT;
-      const newWidth = width * 0.39;
+      const newWidth = width * 0.55;
       const newHeight = newWidth / aspectRatio;
       setStageSize({ width: newWidth, height: newHeight });
     };
@@ -107,7 +107,7 @@ const VideoFeedGridPainter = () => {
   if (image === null || isloading) return <span className="text-slate-500">Loading Video feed…</span>;
   return (
     <div
-      className={`mt-4.5 row-span-1 col-span-2 ${mode === "painter" ? "hover:cursor-crosshair" : ""} ${
+      className={`w-full md:row-span-3 md:col-span-3 ${mode === "painter" ? "hover:cursor-crosshair" : ""} ${
         mode === "eraser" ? "hover:cursor-pointer" : ""
       }`}
     >

src/features/dashboard/components/DashboardGrid.tsx

@@ -47,9 +47,9 @@ const DashboardGrid = () => {
         refetch={refetch}
       />
       <div className="grid grid-cols-1 md:col-span-2 md:grid-cols-3">
-        <CameraStatus title="Camera A" category={categoryA} />
-        <CameraStatus title="Camera B" category={categoryB} />
-        <CameraStatus title="Camera C" category={categoryC} />
+        <CameraStatus title="Camera A" category={categoryA} isError={isError} />
+        <CameraStatus title="Camera B" category={categoryB} isError={isError} />
+        <CameraStatus title="Camera C" category={categoryC} isError={isError} />
       </div>
     </div>
   );

src/features/dashboard/components/cameraStatus/CameraStatus.tsx

@@ -7,10 +7,11 @@ import CameraStatusGridItem from "./CameraStatusGridItem";
 type CameraStatusProps = {
   title: string;
   category: SystemHealthStatus[];
+  isError?: boolean;
 };
 
-const CameraStatus = ({ title, category }: CameraStatusProps) => {
-  const isAllGood = category?.every((status) => status.tags.includes("RUNNING"));
+const CameraStatus = ({ title, category, isError }: CameraStatusProps) => {
+  const isAllGood = category && category.length > 0 && category.every((status) => status.tags.includes("RUNNING"));
   // check if some are down
   // check if all are down
   //check if offline
@@ -18,10 +19,22 @@ const CameraStatus = ({ title, category }: CameraStatusProps) => {
     <Card className="p-4">
       <div className="border-b border-gray-600">
         <h3 className="text-lg flex flex-row items-center">
-          {isAllGood ? <StatusIndicators status={"bg-green-500"} /> : <StatusIndicators status={"bg-amber-500"} />}
+          {isError ? (
+            <StatusIndicators status={"bg-red-500"} />
+          ) : isAllGood ? (
+            <StatusIndicators status={"bg-green-500"} />
+          ) : (
+            <StatusIndicators status={"bg-amber-500"} />
+          )}
           {capitalize(title)}
         </h3>
-        <p className="text-sm text-slate-300">{isAllGood ? "All systems running" : "Some systems down"}</p>
+        {isError ? (
+          <p className="text-sm text-red-500">Error loading camera health.</p>
+        ) : isAllGood ? (
+          <p className="text-sm text-green-500">All systems running</p>
+        ) : (
+          <p className="text-sm text-amber-500">Some systems down</p>
+        )}
       </div>
       {category && category?.length <= 0 ? (
         <p className=" text-gray-500">Loading Camera health...</p>

src/features/dashboard/components/statusGridItem/StatusGridItem.tsx

@@ -11,7 +11,8 @@ type StatusGridItemProps = {
 
 const StatusGridItem = ({ title, statusCategory }: StatusGridItemProps) => {
   const [isOpen, setIsOpen] = useState(false);
-  const isAllGood = statusCategory.every((status) => status.tags.includes("RUNNING"));
+  const isAllGood =
+    statusCategory && statusCategory.length > 0 && statusCategory.every((status) => status.tags.includes("RUNNING"));
 
   const handleClick = () => {
     setIsOpen(false);

src/features/dashboard/components/systemHealth/SystemHealth.tsx

@@ -38,7 +38,7 @@ const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpd
     return <span className="text-slate-500">Loading system health…</span>;
   }
   return (
-    <div className="h-100 md:h-75 overflow-y-auto flex flex-col gap-4">
+    <div className="relative h-100 md:h-75 overflow-y-auto flex flex-col gap-4">
       <div className="p-2 border-b border-gray-600 grid grid-cols-2 justify-between">
         <div className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241]">
           <h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span>
@@ -50,8 +50,8 @@ const SystemHealth = ({ startTime, uptime, statuses, isLoading, isError, dateUpd
       <div className="overflow-auto gap-4">
         <StatusGridItem title={"Modules"} statusCategory={categoryDefault} />
       </div>
-      <div className="border-t border-gray-500">
-        <small className="italic text-gray-400">{`Last refeshed ${updatedDate}`}</small>
+      <div className="absolute bottom-0 left-0 border-t border-gray-500 w-full">
+        <small className="italic text-gray-400 ">{`Last refeshed ${updatedDate}`}</small>
       </div>
     </div>
   );

src/features/dashboard/components/systemStatus/SystemStatusCard.tsx

@@ -13,12 +13,21 @@ const SystemStatusCard = () => {
   const { storeQuery } = useGetStore();
 
   const reads = storeQuery?.data;
-  const isReadsLoading = storeQuery.isFetching;
+  const isReadsLoading = storeQuery?.isFetching;
+  const isError = storeQuery?.isError || !storeQuery?.data;
 
   useEffect(() => {
     storeQuery.refetch();
   }, [reads]);
 
+  if (isError) {
+    return (
+      <Card className="p-4">
+        <CardHeader title="System Status" />
+        <span className="text-red-500">Error loading system status.</span>
+      </Card>
+    );
+  }
   return (
     <Card className="p-4">
       <CardHeader title="System Status" />

src/features/dashboard/hooks/useGetSystemHealth.ts

@@ -11,6 +11,7 @@ export const useGetSystemHealth = () => {
   const query = useQuery({
     queryKey: ["fetchSystemData"],
     queryFn: fetchData,
+    refetchInterval: 300000,
   });
   return { query };
 };

src/ui/ModalComponent.tsx

@@ -11,7 +11,7 @@ const ModalComponent = ({ isModalOpen, children, close }: ModalComponentProps) =
     <Modal
       isOpen={isModalOpen}
       onRequestClose={close}
-      className="bg-[#1e2a38] p-6 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[40%] z-100 overflow-y-auto border border-gray-600"
+      className="bg-[#1e2a38] p-6 rounded-lg shadow-lg w-[95%] mt-[2%] md:w-[40%] z-100 overflow-y-auto border border-gray-600 max-h-[90%]"
       overlayClassName="fixed inset-0 bg-[#1e2a38]/70 flex justify-center items-start z-100"
     >
       {children}