src/features/dashboard/components/CameraStatus.tsx

@@ -9,7 +9,7 @@ type CameraStatusProps = {
 
 const CameraStatus = ({ title, status, description }: CameraStatusProps) => {
   return (
-    <Card className="p-4 w-[40%]">
+    <Card className="p-4">
       <CardHeader title={title} status={status} />
       <p className=" text-gray-500">{description}</p>
     </Card>

src/features/dashboard/components/DashboardGrid.tsx

@@ -7,8 +7,11 @@ const DashboardGrid = () => {
     <div className="grid grid-cols-1 md:grid-rows-2 md:grid-cols-2">
       <SystemStatusCard />
       <SystemOverview />
-      <CameraStatus title="Camera 1" status={"bg-red-500"} description={"Camera not responding"} />
-      <CameraStatus title="Camera 2" status={"bg-gray-500"} description={"Camera Offline"} />
+      <div className="grid grid-cols-1 md:col-span-2 md:grid-cols-3">
+        <CameraStatus title="Camera 1" status={"bg-red-500"} description={"Camera not responding"} />
+        <CameraStatus title="Camera 2" status={"bg-gray-500"} description={"Camera Offline"} />
+        <CameraStatus title="Camera 3" status={"bg-gray-500"} description={"Camera Offline"} />
+      </div>
     </div>
   );
 };

src/features/dashboard/components/StatusItems/StatusItemCPU.tsx

@@ -8,7 +8,7 @@ type StatusItemProps = {
 
 const StatusItemCPU = ({ statusInfoItem, description }: StatusItemProps) => {
   return (
-    <div className="p-3 border border-gray-700 rounded-lg">
+    <div className="p-3 border border-gray-700 rounded-lg hover:bg-[#233241]">
       <div className="flex flex-row gap-2 items-center">
         <span className="font-bold text-xl bg-slate-700 p-1 px-2 rounded-md">
           <FontAwesomeIcon icon={faHardDrive} />

src/features/dashboard/components/StatusItems/StatusItemLocal.tsx

@@ -15,7 +15,7 @@ const StatusItemLocal = ({ statusInfoItem, description }: StatusItemProps) => {
   };
 
   return (
-    <div className="p-3 border border-gray-700 rounded-lg">
+    <div className="p-3 border border-gray-700 rounded-lg hover:bg-[#233241]">
       <div className="flex flex-row gap-2 items-center">
         <span className="font-bold text-xl bg-slate-700 p-1 px-2 rounded-md">
           <FontAwesomeIcon icon={faClock} />

src/features/dashboard/components/StatusItems/StatusItemThreads.tsx

@@ -8,7 +8,7 @@ type StatusItemProps = {
 
 const StatusItemThreads = ({ statusInfoItem, description }: StatusItemProps) => {
   return (
-    <div className="p-3 border border-gray-700 rounded-lg">
+    <div className="p-3 border border-gray-700 rounded-lg hover:bg-[#233241]">
       <div className="flex flex-row gap-2 items-center">
         <span className="font-bold text-xl bg-slate-700 p-1 px-2 rounded-md">
           <FontAwesomeIcon icon={faMicrochip} />

src/features/dashboard/components/StatusItems/StatusItemUTC.tsx

@@ -15,7 +15,7 @@ const StatusItemUTC = ({ statusInfoItem, description }: StatusItemProps) => {
   };
 
   return (
-    <div className="p-3 border border-gray-700 rounded-lg">
+    <div className="p-3 border border-gray-700 rounded-lg hover:bg-[#233241]">
       <div className="flex flex-row gap-2 items-center">
         <span className="font-bold text-xl bg-slate-700 p-1 px-2 rounded-md">
           <FontAwesomeIcon icon={faClock} />

src/features/dashboard/components/SystemHealth.tsx

@@ -0,0 +1,34 @@
+import type { SystemHealthStatus } from "../../../types/types";
+import Badge from "../../../ui/Badge";
+import { useGetSystemHealth } from "../hooks/useGetSystemHealth";
+
+const SystemHealth = () => {
+  const { query } = useGetSystemHealth();
+
+  const startTime = query?.data?.StartTimeHumane;
+  const uptime = query?.data?.UptimeHumane;
+  const statuses = query?.data?.Status;
+
+  return (
+    <div className="h-100 md:h-70">
+      <div className="p-2 border-b border-gray-600 grid grid-cols-2 justify-between">
+        <div>
+          <h3 className="text-lg">Start Time</h3> <span className="text-slate-300">{startTime}</span>
+        </div>
+        <div>
+          <h3 className="text-lg">Up Time</h3> <span className="text-slate-300">{uptime}</span>
+        </div>
+      </div>
+
+      <div>
+        {statuses?.map((status: SystemHealthStatus) => (
+          <div className="border border-gray-700 p-4 rounded-md m-2 flex justify-between">
+            <span>{status.id}</span> <Badge text={status.tags[0]} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default SystemHealth;

src/features/dashboard/components/SystemOverview.tsx

@@ -1,10 +1,12 @@
 import Card from "../../../ui/Card";
 import CardHeader from "../../../ui/CardHeader";
+import SystemHealth from "./SystemHealth";
 
 const SystemOverview = () => {
   return (
     <Card className="p-4">
-      <CardHeader title="System Overview" />
+      <CardHeader title="System Health" />
+      <SystemHealth />
     </Card>
   );
 };

src/routes/baywatch.tsx

@@ -9,7 +9,6 @@ export const Route = createFileRoute("/baywatch")({
 function RouteComponent() {
   return (
     <div>
-      <h2 className="text-xl font-semibold">Cameras</h2>
       <CameraGrid />
       <Toaster />
     </div>

src/routes/index.tsx

@@ -8,7 +8,6 @@ export const Route = createFileRoute("/")({
 function HomePage() {
   return (
     <div>
-      <h2 className="text-xl font-semibold"> Dashboard</h2>
       <DashboardGrid />
     </div>
   );

src/types/types.ts

@@ -16,3 +16,8 @@ export type Region = {
   name: string;
   brushColour: string;
 };
+
+export type SystemHealthStatus = {
+  id: string;
+  tags: string[];
+};

src/ui/Badge.tsx

@@ -0,0 +1,24 @@
+import type { Icon, IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { capitalize } from "../utils/utils";
+
+type BadgeProps = {
+  icon?: Icon | IconDefinition;
+  text: string;
+};
+
+const Badge = ({ icon, text }: BadgeProps) => {
+  const lowerCaseWord = text.toLowerCase();
+  return (
+    <span
+      className={`text-sm font-medium inline-flex items-center px-2 py-0.5 rounded-md me-2 
+        border-2 space-x-2
+         ${text.toLowerCase() === "running" ? "bg-green-800 text-green-300 border-green-900" : "bg-red-800 text-red-300 border-red-900"} `}
+    >
+      {icon && <FontAwesomeIcon icon={icon} />}
+      <span>{capitalize(lowerCaseWord)}</span>
+    </span>
+  );
+};
+
+export default Badge;

src/utils/utils.ts

@@ -0,0 +1,3 @@
+export function capitalize(s?: string) {
+  return s ? s.charAt(0).toUpperCase() + s.slice(1) : "";
+}