- organised file structure for dashboard

src/features/dashboard/components/DashboardGrid.tsx

@@ -1,8 +1,8 @@
 import type { SystemHealthStatus } from "../../../types/types";
 import { useGetSystemHealth } from "../hooks/useGetSystemHealth";
-import CameraStatus from "./CameraStatus";
+import CameraStatus from "./cameraStatus/CameraStatus";
-import SystemOverview from "./SystemOverview";
+import SystemHealthCard from "./systemHealth/SystemHealthCard";
-import SystemStatusCard from "./SystemStatusCard";
+import SystemStatusCard from "./systemStatus/SystemStatusCard";
 
 const DashboardGrid = () => {
   const { query } = useGetSystemHealth();
@@ -37,7 +37,7 @@ const DashboardGrid = () => {
   return (
     <div className="grid grid-cols-1 md:grid-rows-2 md:grid-cols-2">
       <SystemStatusCard />
-      <SystemOverview
+      <SystemHealthCard
         startTime={startTime}
         uptime={uptime}
         statuses={statuses}

src/features/dashboard/components/cameraStatus/CameraStatus.tsx

@@ -1,7 +1,7 @@
-import type { SystemHealthStatus } from "../../../types/types";
+import type { SystemHealthStatus } from "../../../../types/types";
-import Card from "../../../ui/Card";
+import Card from "../../../../ui/Card";
-import StatusIndicators from "../../../ui/StatusIndicators";
+import StatusIndicators from "../../../../ui/StatusIndicators";
-import { capitalize } from "../../../utils/utils";
+import { capitalize } from "../../../../utils/utils";
 import CameraStatusGridItem from "./CameraStatusGridItem";
 
 type CameraStatusProps = {

src/features/dashboard/components/cameraStatus/CameraStatusGridItem.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
-import type { SystemHealthStatus } from "../../../types/types";
+import type { SystemHealthStatus } from "../../../../types/types";
-import { capitalize } from "../../../utils/utils";
+import { capitalize } from "../../../../utils/utils";
-import SystemHealthModal from "./systemHealthModal/SystemHealthModal";
+import SystemHealthModal from "../systemHealth/systemHealthModal/SystemHealthModal";
 
 type CameraStatusGridItemProps = {
   title: string;

src/features/dashboard/components/statusGridItem/StatusGridItem.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import type { SystemHealthStatus } from "../../../../types/types";
 import StatusIndicators from "../../../../ui/StatusIndicators";
 import { capitalize } from "../../../../utils/utils";
-import SystemHealthModal from "../systemHealthModal/SystemHealthModal";
+import SystemHealthModal from "../systemHealth/systemHealthModal/SystemHealthModal";
 
 type StatusGridItemProps = {
   title: string;

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

@@ -1,5 +1,5 @@
-import type { SystemHealthStatus } from "../../../types/types";
+import type { SystemHealthStatus } from "../../../../types/types";
-import StatusGridItem from "./statusGridItem/StatusGridItem";
+import StatusGridItem from "../statusGridItem/StatusGridItem";
 
 type SystemHealthProps = {
   startTime: string;

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

@@ -1,9 +1,9 @@
 import { faArrowsRotate } from "@fortawesome/free-solid-svg-icons";
-import Card from "../../../ui/Card";
+import Card from "../../../../ui/Card";
-import CardHeader from "../../../ui/CardHeader";
+import CardHeader from "../../../../ui/CardHeader";
 
 import SystemHealth from "./SystemHealth";
-import type { SystemHealthStatus } from "../../../types/types";
+import type { SystemHealthStatus } from "../../../../types/types";
 
 type SystemOverviewProps = {
   startTime: string;
@@ -15,7 +15,7 @@ type SystemOverviewProps = {
   refetch: () => void;
 };
 
-const SystemOverview = ({
+const SystemHealthCard = ({
   startTime,
   uptime,
   statuses,
@@ -39,4 +39,4 @@ const SystemOverview = ({
   );
 };
 
-export default SystemOverview;
+export default SystemHealthCard;

src/features/dashboard/components/systemHealth/systemHealthModal/SystemHealthModal.tsx

@@ -1,8 +1,8 @@
-import type { SystemHealthStatus } from "../../../../types/types";
+import type { SystemHealthStatus } from "../../../../../types/types";
-import Badge from "../../../../ui/Badge";
+import Badge from "../../../../../ui/Badge";
-import ModalComponent from "../../../../ui/ModalComponent";
+import ModalComponent from "../../../../../ui/ModalComponent";
-import StatusIndicators from "../../../../ui/StatusIndicators";
+import StatusIndicators from "../../../../../ui/StatusIndicators";
-import { capitalize } from "../../../../utils/utils";
+import { capitalize } from "../../../../../utils/utils";
 
 type SystemHealthModalProps = {
   isSystemHealthModalOpen: boolean;

src/features/dashboard/components/systemStatus/SystemStatusCard.tsx

@@ -1,6 +1,6 @@
-import { useInfoSocket } from "../../../app/context/WebSocketContext";
+import { useInfoSocket } from "../../../../app/context/WebSocketContext";
-import Card from "../../../ui/Card";
+import Card from "../../../../ui/Card";
-import CardHeader from "../../../ui/CardHeader";
+import CardHeader from "../../../../ui/CardHeader";
 import StatusItemCPU from "./StatusItems/StatusItemCPU";
 import StatusItemLocal from "./StatusItems/StatusItemLocal";
 import StatusItemThreads from "./StatusItems/StatusItemThreads";

src/routes/index.tsx

@@ -6,9 +6,5 @@ export const Route = createFileRoute("/")({
 });
 
 function HomePage() {
-  return (
+  return <DashboardGrid />;
-    <div>
-      <DashboardGrid />
-    </div>
-  );
 }