addind dashboard features will come back to finish

src/features/dashboard/components/CameraStatus.tsx

@@ -0,0 +1,19 @@
+import Card from "../../../ui/Card";
+import CardHeader from "../../../ui/CardHeader";
+
+type CameraStatusProps = {
+  title: string;
+  status?: string;
+  description: string;
+};
+
+const CameraStatus = ({ title, status, description }: CameraStatusProps) => {
+  return (
+    <Card className="p-4 w-[40%]">
+      <CardHeader title={title} status={status} />
+      <p className=" text-gray-500">{description}</p>
+    </Card>
+  );
+};
+
+export default CameraStatus;

src/features/dashboard/components/DashboardGrid.tsx

@@ -1,9 +1,12 @@
+import CameraStatus from "./CameraStatus";
 import SystemStatusCard from "./SystemStatusCard";
 
 const DashboardGrid = () => {
   return (
-    <div>
+    <div className="grid grid-rows-2">
       <SystemStatusCard />
+      <CameraStatus title="Camera 1" status={"bg-red-500"} description={"Camera not responding"} />
+      <CameraStatus title="Camera 2" status={"bg-gray-500"} description={"Camera Offline"} />
     </div>
   );
 };

src/features/dashboard/components/SystemStatusCard.tsx

@@ -11,7 +11,7 @@ const SystemStatusCard = () => {
       {stats ? (
         <>
           <div>UTC: {stats["system-clock-utc"]}</div>
-          <span>Local: {stats["system-clock-local"]}</span>
+          <div>Local: {stats["system-clock-local"]}</div>
           <span>CPU: {stats["memory-cpu-status"]}</span>
           <span>Threads: {stats["thread-count"]}</span>
         </>