- improved Dashboard ui

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;