src/features/cameras/components/CameraGrid.tsx

@@ -1,8 +1,9 @@
 import { useState } from "react";
 
-import VideoFeedGridPainter from "./VideoFeedGridPainter";
-import CameraSettings from "./CameraSettings";
+import VideoFeedGridPainter from "./Video/VideoFeedGridPainter";
+import CameraSettings from "./CameraSettings/CameraSettings";
 import type { Region } from "../../../types/types";
+import PlatePatch from "./PlatePatch/PlatePatch";
 
 const CameraGrid = () => {
   const [regions, setRegions] = useState<Region[]>([
@@ -17,7 +18,7 @@ const CameraGrid = () => {
     setRegions((prev) => prev.map((r, i) => (i === index ? { ...r, brushColour: newColour } : r)));
   };
   return (
-    <div className="grid grid-cols-1 md:grid-cols-2">
+    <div className="grid grid-cols-1 md:grid-cols-5 grid-rows-2">
       <VideoFeedGridPainter regions={regions} selectedRegionIndex={selectedRegionIndex} isErasing={isErasing} />
       <CameraSettings
         regions={regions}
@@ -27,6 +28,7 @@ const CameraGrid = () => {
         isErasing={isErasing}
         onSelectErasing={setErasing}
       />
+      <PlatePatch />
     </div>
   );
 };

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

@@ -1,8 +1,9 @@
-import Card from "../../../ui/Card";
+import Card from "../../../../ui/Card";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import "react-tabs/style/react-tabs.css";
 import RegionSelector from "./RegionSelector";
-import type { Region } from "../../../types/types";
+import type { Region } from "../../../../types/types";
+import { useState } from "react";
 
 type CameraSettingsProps = {
   regions: Region[];
@@ -21,12 +22,19 @@ const CameraSettings = ({
   isErasing,
   onSelectErasing,
 }: CameraSettingsProps) => {
+  const [tabIndex, setTabIndex] = useState(0);
   return (
-    <Card className="p-4 min-h-screen w-[80%] place-self-end">
-      <Tabs selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm">
+    <Card className="p-4 max-h-screen col-span-3">
+      <Tabs
+        selectedTabClassName="bg-gray-300 text-gray-900 font-semibold border-none rounded-sm mb-1"
+        className="react-tabs"
+        onSelect={(index) => setTabIndex(index)}
+      >
         <TabList>
           <Tab>Target Detection</Tab>
           <Tab>Camera 1</Tab>
+          <Tab>Camera 2</Tab>
+          <Tab>Camera 3</Tab>
         </TabList>
         <TabPanel>
           <RegionSelector
@@ -39,7 +47,13 @@ const CameraSettings = ({
           />
         </TabPanel>
         <TabPanel>
-          <div>Camera details</div>
+          <div>Camera details {tabIndex}</div>
+        </TabPanel>
+        <TabPanel>
+          <div>Camera details {tabIndex}</div>
+        </TabPanel>
+        <TabPanel>
+          <div>Camera details {tabIndex}</div>
         </TabPanel>
       </Tabs>
     </Card>

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

@@ -1,5 +1,5 @@
 import ColourPicker from "./ColourPicker";
-import type { Region } from "../../../types/types";
+import type { Region } from "../../../../types/types";
 
 type RegionSelectorProps = {
   regions: Region[];

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

@@ -0,0 +1,7 @@
+import Card from "../../../../ui/Card";
+
+const PlatePatch = () => {
+  return <Card>PlatePatch</Card>;
+};
+
+export default PlatePatch;

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

@@ -1,9 +1,9 @@
-import { useRef, type RefObject } from "react";
+import { useEffect, useRef, useState, type RefObject } from "react";
 import { Stage, Layer, Image, Shape } from "react-konva";
 import type { KonvaEventObject } from "konva/lib/Node";
-import { useCreateVideoSnapshot } from "../hooks/useGetvideoSnapshots";
-import Card from "../../../ui/Card";
-import type { Region } from "../../../types/types";
+import { useCreateVideoSnapshot } from "../../hooks/useGetvideoSnapshots";
+import type { Region } from "../../../../types/types";
+import Card from "../../../../ui/Card";
 
 const rows = 40;
 const cols = 40;
@@ -21,7 +21,8 @@ type PaintedCell = {
 };
 
 const VideoFeedGridPainter = ({ regions, selectedRegionIndex, isErasing }: VideoFeedGridPainterProps) => {
-  const { latestBitmapRef } = useCreateVideoSnapshot();
+  const { latestBitmapRef, isloading } = useCreateVideoSnapshot();
+  const [stageSize, setStageSize] = useState({ width: 740, height: 460 });
   const isDrawingRef = useRef(false);
   const paintedCellsRef = useRef<Map<string, PaintedCell>>(new Map());
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -35,6 +36,8 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, isErasing }: Video
     return image;
   };
 
+  const image = draw(latestBitmapRef);
+
   const paintCell = (x: number, y: number) => {
     const col = Math.floor(x / (size + gap));
     const row = Math.floor(y / (size + gap));
@@ -83,18 +86,39 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, isErasing }: Video
     isDrawingRef.current = false;
   };
 
+  useEffect(() => {
+    const handleResize = () => {
+      const width = window.innerWidth;
+
+      const aspectRatio = 740 / 460;
+      const newWidth = width * 0.36;
+      const newHeight = newWidth / aspectRatio;
+      setStageSize({ width: newWidth, height: newHeight });
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  if (image === null || isloading)
+    return (
+      <Card className="row-span-1 col-span-2 rounded-lg p-4 w-full">
+        <span className="text-slate-500">Loading Video feed…</span>
+      </Card>
+    );
   return (
-    <Card className="w-187.5 place-self-start">
+    <div className="row-span-1 col-span-2 rounded-lg">
       <Stage
-        width={740}
-        height={460}
+        width={stageSize.width}
+        height={stageSize.height}
         onMouseDown={handleStageMouseDown}
         onMouseMove={handleStageMouseMove}
         onMouseUp={handleStageMouseUp}
         onMouseLeave={handleStageMouseUp}
       >
         <Layer>
-          <Image image={draw(latestBitmapRef)} width={740} height={460} />
+          <Image image={image} width={stageSize.width} height={stageSize.height} classname={"rounded-lg"} />
         </Layer>
 
         <Layer ref={paintLayerRef} opacity={0.6}>
@@ -117,10 +141,12 @@ const VideoFeedGridPainter = ({ regions, selectedRegionIndex, isErasing }: Video
 
               ctx.fillStrokeShape(shape);
             }}
+            width={stageSize.width}
+            height={stageSize.height}
           />
         </Layer>
       </Stage>
-    </Card>
+    </div>
   );
 };
 

src/features/cameras/hooks/useGetvideoSnapshots.ts

@@ -6,6 +6,7 @@ export const useCreateVideoSnapshot = () => {
   const { videoQuery } = useGetVideoFeed();
 
   const snapShot = videoQuery?.data;
+  const isloading = videoQuery.isPending;
 
   useEffect(() => {
     async function createBitmap() {
@@ -22,5 +23,5 @@ export const useCreateVideoSnapshot = () => {
     createBitmap();
   }, [snapShot]);
 
-  return { latestBitmapRef };
+  return { latestBitmapRef, isloading };
 };