- organised file structure for dashboard

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

@@ -0,0 +1,42 @@
+import { faArrowsRotate } from "@fortawesome/free-solid-svg-icons";
+import Card from "../../../../ui/Card";
+import CardHeader from "../../../../ui/CardHeader";
+
+import SystemHealth from "./SystemHealth";
+import type { SystemHealthStatus } from "../../../../types/types";
+
+type SystemOverviewProps = {
+  startTime: string;
+  uptime: string;
+  statuses: SystemHealthStatus[];
+  isLoading: boolean;
+  isError: boolean;
+  dateUpdatedAt: number;
+  refetch: () => void;
+};
+
+const SystemHealthCard = ({
+  startTime,
+  uptime,
+  statuses,
+  isLoading,
+  isError,
+  dateUpdatedAt,
+  refetch,
+}: SystemOverviewProps) => {
+  return (
+    <Card className="p-4">
+      <CardHeader title="System Health" refetch={refetch} icon={faArrowsRotate} />
+      <SystemHealth
+        startTime={startTime}
+        uptime={uptime}
+        statuses={statuses}
+        isLoading={isLoading}
+        isError={isError}
+        dateUpdatedAt={dateUpdatedAt}
+      />
+    </Card>
+  );
+};
+
+export default SystemHealthCard;