feat(admin/machines): redesign overview as cards grid with status dot and metrics; add machine detail page (/admin/machines/[id]) reusing existing detail panel

src/components/admin/machines/admin-machine-details.client.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import { useMemo } from "react"
+import { useQuery } from "convex/react"
+import { api } from "@/convex/_generated/api"
+import { MachineDetails, type MachinesQueryItem } from "@/components/admin/machines/admin-machines-overview"
+import { Card, CardContent } from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton"
+
+export function AdminMachineDetailsClient({ tenantId, machineId }: { tenantId: string; machineId: string }) {
+  const list = (useQuery(api.machines.listByTenant, { tenantId, includeMetadata: true }) ?? []) as MachinesQueryItem[]
+  const machine = useMemo(() => list.find((m) => m.id === machineId) ?? null, [list, machineId])
+
+  if (!list) {
+    return (
+      <Card>
+        <CardContent className="space-y-3 p-6">
+          <Skeleton className="h-6 w-64" />
+          <Skeleton className="h-4 w-80" />
+          <Skeleton className="h-48 w-full" />
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return <MachineDetails machine={machine} />
+}
+