Commit of Current Status

app/page.tsx

@@ -1,65 +1,114 @@
-import Image from "next/image";
+'use client';
+
+import { useEffect, useState } from 'react';
+import { fetchVehicles, getUpdates, fetchGroups, Vehicle, FirmwareUpdate, VehicleGroup } from '@/lib/api';
+import { VehicleList } from '@/components/VehicleList';
+import { UpdateManager } from '@/components/UpdateManager';
+import { FirmwareList } from '@/components/FirmwareList';
+import { GroupManager } from '@/components/GroupManager';
+import { Activity, ShieldCheck, Truck } from 'lucide-react';
 
 export default function Home() {
+  const [vehicles, setVehicles] = useState<Vehicle[]>([]);
+  const [updates, setUpdates] = useState<FirmwareUpdate[]>([]);
+  const [groups, setGroups] = useState<VehicleGroup[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const loadData = async () => {
+    try {
+      const [v, u, g] = await Promise.all([fetchVehicles(), getUpdates(), fetchGroups()]);
+      setVehicles(v);
+      setUpdates(u);
+      setGroups(g);
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadData();
+    const interval = setInterval(loadData, 3000); // Poll every 3s
+    return () => clearInterval(interval);
+  }, []);
+
+  const onlineCount = vehicles.filter(v => v.status === 'Online').length;
+  const updatingCount = vehicles.filter(v => v.status === 'Updating').length;
+
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
+    <main className="min-h-screen bg-black text-zinc-100 selection:bg-indigo-500/30">
+      <div className="max-w-7xl mx-auto px-6 py-10 space-y-8">
+        {/* Header */}
+        <header className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+          <div>
+            <h1 className="text-3xl font-bold bg-gradient-to-r from-indigo-400 to-purple-400 bg-clip-text text-transparent">
+              OTA Fleet Commander
+            </h1>
+            <p className="text-zinc-500 mt-1">Manage firmware updates for your vehicle fleet</p>
+          </div>
+          <div className="flex items-center gap-4">
+            <div className="flex items-center gap-2 bg-zinc-900 px-4 py-2 rounded-lg border border-zinc-800">
+              <span className="relative flex h-3 w-3">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+                <span className="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
+              </span>
+              <span className="text-sm font-medium text-emerald-400">System Active</span>
+            </div>
+          </div>
+        </header>
+
+        {/* Stats */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="bg-zinc-900/50 border border-zinc-800 p-4 rounded-xl flex items-center gap-4">
+            <div className="p-3 rounded-lg bg-indigo-500/10 text-indigo-400">
+              <Truck className="w-6 h-6" />
+            </div>
+            <div>
+              <p className="text-zinc-500 text-sm">Total Vehicles</p>
+              <p className="text-2xl font-bold">{vehicles.length}</p>
+            </div>
+          </div>
+          <div className="bg-zinc-900/50 border border-zinc-800 p-4 rounded-xl flex items-center gap-4">
+            <div className="p-3 rounded-lg bg-emerald-500/10 text-emerald-400">
+              <Activity className="w-6 h-6" />
+            </div>
+            <div>
+              <p className="text-zinc-500 text-sm">Online Status</p>
+              <p className="text-2xl font-bold">{onlineCount} <span className="text-sm text-zinc-500 font-normal">/ {vehicles.length}</span></p>
+            </div>
+          </div>
+          <div className="bg-zinc-900/50 border border-zinc-800 p-4 rounded-xl flex items-center gap-4">
+            <div className="p-3 rounded-lg bg-amber-500/10 text-amber-400">
+              <ShieldCheck className="w-6 h-6" />
+            </div>
+            <div>
+              <p className="text-zinc-500 text-sm">Current Version</p>
+              {/* Naive logic: most common version or just listing */}
+              <p className="text-lg font-bold truncate max-w-[150px]">
+                {updates[0]?.version || 'v1.0.0'}
+              </p>
+            </div>
+          </div>
         </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
+
+        {/* Main Content */}
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          <div className="lg:col-span-2 space-y-8">
+            <VehicleList vehicles={vehicles} />
+            <UpdateManager
+              updates={updates}
+              vehicles={vehicles}
+              groups={groups}
+              onUpdateDeployed={loadData}
             />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
+          </div>
+          <div className="space-y-8">
+            <GroupManager groups={groups} vehicles={vehicles} onGroupChanged={loadData} />
+            <FirmwareList updates={updates} />
+          </div>
         </div>
-      </main>
-    </div>
+      </div>
+    </main>
   );
 }