Refactor camera feed handling to support dynamic camera IDs and improve context management

src/features/dashboard/components/DashboardGrid.tsx

@@ -3,6 +3,7 @@ import { useGetSystemHealth } from "../hooks/useGetSystemHealth";
 import CameraStatus from "./cameraStatus/CameraStatus";
 import SystemHealthCard from "./systemHealth/SystemHealthCard";
 import SystemStatusCard from "./systemStatus/SystemStatusCard";
+import { CAMERA_IDS } from "../../../app/config/cameraConfig";
 
 const DashboardGrid = () => {
   const { query } = useGetSystemHealth();
@@ -26,30 +27,35 @@ const DashboardGrid = () => {
       channelA: [],
       channelB: [],
       channelC: [],
+      // todo: check if more cameras will be added later
       default: [],
     },
   );
 
-  const categoryA = statusCategories?.channelA ?? [];
-  const categoryB = statusCategories?.channelB ?? [];
-  const categoryC = statusCategories?.channelC ?? [];
-
   return (
     <div className="grid grid-cols-1 md:grid-rows-2 md:grid-cols-2 gap-4">
-      <SystemStatusCard />
-      <SystemHealthCard
-        startTime={startTime}
-        uptime={uptime}
-        statuses={statuses}
-        isLoading={isLoading}
-        isError={isError}
-        dateUpdatedAt={dateUpdatedAt}
-        refetch={refetch}
-      />
-      <div className="grid grid-cols-1 md:col-span-2 md:grid-cols-3 gap-x-4">
-        <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 className="grid grid-cols-1 md:grid-rows-0 md:grid-cols-2 gap-4 md:col-span-2">
+        <SystemStatusCard />
+        <SystemHealthCard
+          startTime={startTime}
+          uptime={uptime}
+          statuses={statuses}
+          isLoading={isLoading}
+          isError={isError}
+          dateUpdatedAt={dateUpdatedAt}
+          refetch={refetch}
+        />
+      </div>
+
+      <div className="grid grid-cols-1 md:col-span-2 md:grid-cols-[repeat(3,1fr)] gap-x-4">
+        {CAMERA_IDS.map((cameraID) => (
+          <CameraStatus
+            key={cameraID}
+            title={`Camera ${cameraID}`}
+            category={statusCategories?.[`channel${cameraID}`] ?? []}
+            isError={isError}
+          />
+        ))}
       </div>
     </div>
   );

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

@@ -25,7 +25,7 @@ const SystemHealthCard = ({
   refetch,
 }: SystemOverviewProps) => {
   return (
-    <Card className="p-4">
+    <Card className="p-4 ">
       <CardHeader title="System Health" refetch={refetch} icon={faArrowsRotate} />
       <SystemHealth
         startTime={startTime}

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

@@ -29,7 +29,7 @@ const SystemStatusCard = () => {
     );
   }
   return (
-    <Card className="p-4">
+    <Card className="p-4 ">
       <CardHeader title="System Status" />
       {stats ? (
         <div className="grid grid-cols-2 grid-rows-2 gap-4 col-span-2">