Refactored routing components for better organization and maintainability

src/features/cameras/hooks/useGetVideoFeed.ts

@@ -1,7 +1,8 @@
 import { useQuery } from "@tanstack/react-query";
 import { CAMBASE } from "../../../utils/config";
+import type { CameraID } from "../../../app/config/cameraConfig";
 
-const targetDectionFeed = async (cameraFeedID: "A" | "B" | "C" | null) => {
+const targetDectionFeed = async (cameraFeedID: CameraID | null) => {
   const response = await fetch(`${CAMBASE}/TargetDetectionColour${cameraFeedID}-preview`, {
     signal: AbortSignal.timeout(300000),
     cache: "no-store",
@@ -12,7 +13,7 @@ const targetDectionFeed = async (cameraFeedID: "A" | "B" | "C" | null) => {
   return response.blob();
 };
 
-const getVideoFeed = async (cameraFeedID: "A" | "B" | "C" | null) => {
+const getVideoFeed = async (cameraFeedID: CameraID | null) => {
   const response = await fetch(`${CAMBASE}/Camera${cameraFeedID}-preview`, {
     signal: AbortSignal.timeout(300000),
     cache: "no-store",
@@ -23,7 +24,7 @@ const getVideoFeed = async (cameraFeedID: "A" | "B" | "C" | null) => {
   return response.blob();
 };
 
-export const useGetVideoFeed = (cameraFeedID: "A" | "B" | "C" | null, mode: string) => {
+export const useGetVideoFeed = (cameraFeedID: CameraID | null, mode: string) => {
   const targetDetectionQuery = useQuery({
     queryKey: ["getfeed", cameraFeedID],
     queryFn: () => targetDectionFeed(cameraFeedID),

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

@@ -1,7 +1,8 @@
 import { useState } from "react";
 import type { SystemHealthStatus } from "../../../../types/types";
-import { capitalize } from "../../../../utils/utils";
+
 import SystemHealthModal from "../systemHealth/systemHealthModal/SystemHealthModal";
+import Badge from "../../../../ui/Badge";
 
 type CameraStatusGridItemProps = {
   title: string;
@@ -15,6 +16,10 @@ const CameraStatusGridItem = ({ title, statusCategory }: CameraStatusGridItemPro
     return status.tags.every((tag) => allowedTags.includes(tag));
   });
 
+  const downItems = statusCategory?.filter((status) => {
+    return status.tags.some((tag) => tag !== "RUNNING" && tag !== "VIDEO-PLAYING");
+  });
+
   const handleClick = () => {
     setIsOpen(false);
   };
@@ -24,8 +29,21 @@ const CameraStatusGridItem = ({ title, statusCategory }: CameraStatusGridItemPro
         className="flex flex-col border border-gray-600 p-4 rounded-lg mr-4 hover:bg-[#233241] hover:cursor-pointer m-2 h-70"
         onClick={() => setIsOpen(true)}
       >
-        <h3 className="text-lg flex flex-row items-center">{capitalize(title)}</h3>
+        <p className="text-sm text-slate-300">
-        <p className="text-sm text-slate-300">{isAllGood ? "Click to view module status" : "Some systems down"}</p>
+          {isAllGood ? (
+            "Click to view module status"
+          ) : (
+            <>
+              <ul>
+                {downItems.map((item) => (
+                  <li key={item.id} className="flex justify-between mb-2">
+                    <span>{item.id}</span> <Badge text={item.tags[0]} />
+                  </li>
+                ))}
+              </ul>
+            </>
+          )}
+        </p>
       </div>
       <SystemHealthModal
         isSystemHealthModalOpen={isOpen}

src/routes/cameras.tsx

@@ -6,9 +6,5 @@ export const Route = createFileRoute("/cameras")({
 });
 
 function RouteComponent() {
-  return (
+  return <CameraGrid />;
-    <div>
-      <CameraGrid />
-    </div>
-  );
 }

src/routes/output.tsx

@@ -6,9 +6,5 @@ export const Route = createFileRoute("/output")({
 });
 
 function RouteComponent() {
-  return (
+  return <OutputForms />;
-    <div>
-      <OutputForms />
-    </div>
-  );
 }

src/routes/settings.tsx

@@ -6,9 +6,5 @@ export const Route = createFileRoute("/settings")({
 });
 
 function RouteComponent() {
-  return (
+  return <Settings />;
-    <div>
-      <Settings />
-    </div>
-  );
 }