[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","689b4597e8f08191b8c3f714b58e439f","versionInt","title","Asset Tracker Dashboard (light Theme)","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport { motion } from \"framer-motion\";\nimport {\n Bell,\n ChevronDown,\n Clock,\n HardDrive,\n MapPin,\n Power,\n Search,\n Settings,\n ShieldAlert,\n User,\n Wrench\n} from \"lucide-react\";\n\n// shadcn/ui components\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Input } from \"@/components/ui/input\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { ScrollArea } from \"@/components/ui/scroll-area\";\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger\n} from \"@/components/ui/dropdown-menu\";\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectTrigger,\n SelectValue\n} from \"@/components/ui/select\";\n\n// ------------------------------------------------------------\n// Mock Data\n// ------------------------------------------------------------\n\ntype AssetCategory = \"Vehicle\" | \"IT\" | \"Facility\" | \"Tool\" | \"Sensor\";\n\ninterface Asset {\n id: string;\n name: string;\n category: AssetCategory;\n status: \"Active\" | \"Idle\" | \"Maintenance\" | \"Offline\";\n location: string;\n updatedAt: string; // ISO string\n}\n\ninterface TimelineEvent {\n id: string;\n assetId: string;\n timestamp: string; // ISO\n type: \"location\" | \"status\" | \"maintenance\" | \"power\" | \"security\";\n description: string;\n}\n\nconst ASSETS: Asset[] = [\n {\n id: \"AST-1001\",\n name: \"Forklift A2\",\n category: \"Vehicle\",\n status: \"Active\",\n location: \"Dock 3\",\n updatedAt: new Date(Date.now() - 1000 * 60 * 4).toISOString()\n },\n {\n id: \"AST-2045\",\n name: \"Server-DB01\",\n category: \"IT\",\n status: \"Maintenance\",\n location: \"DC-1 Cage B\",\n updatedAt: new Date(Date.now() - 1000 * 60 * 43).toISOString()\n },\n {\n id: \"AST-3120\",\n name: \"Building Sensor 7\",\n category: \"Sensor\",\n status: \"Idle\",\n location: \"HQ East Wing\",\n updatedAt: new Date(Date.now() - 1000 * 60 * 120).toISOString()\n },\n {\n id: \"AST-7740\",\n name: \"Torque Wrench XL\",\n category: \"Tool\",\n status: \"Active\",\n location: \"Bay 9\",\n updatedAt: new Date(Date.now() - 1000 * 60 * 360).toISOString()\n },\n {\n id: \"AST-9902\",\n name: \"Main Generator\",\n category: \"Facility\",\n status: \"Offline\",\n location: \"Plant West\",\n updatedAt: new Date(Date.now() - 1000 * 60 * 15).toISOString()\n }\n];\n\nconst TIMELINE: TimelineEvent[] = [\n {\n id: \"E-1\",\n assetId: \"AST-9902\",\n timestamp: new Date(Date.now() - 1000 * 60 * 5).toISOString(),\n type: \"power\",\n description: \"Generator switched to backup mode.\"\n },\n {\n id: \"E-2\",\n assetId: \"AST-2045\",\n timestamp: new Date(Date.now() - 1000 * 60 * 30).toISOString(),\n type: \"maintenance\",\n description: \"DB01 scheduled patch cycle started.\"\n },\n {\n id: \"E-3\",\n assetId: \"AST-1001\",\n timestamp: new Date(Date.now() - 1000 * 60 * 50).toISOString(),\n type: \"location\",\n description: \"Forklift A2 moved from Dock 1 to Dock 3.\"\n },\n {\n id: \"E-4\",\n assetId: \"AST-3120\",\n timestamp: new Date(Date.now() - 1000 * 60 * 110).toISOString(),\n type: \"status\",\n description: \"Sensor 7 status changed from Active to Idle.\"\n },\n {\n id: \"E-5\",\n assetId: \"AST-9902\",\n timestamp: new Date(Date.now() - 1000 * 60 * 140).toISOString(),\n type: \"security\",\n description: \"Unauthorized door open near Plant West.\"\n }\n];\n\nconst ALERTS = [\n {\n id: \"AL-1\",\n severity: \"critical\" as const,\n title: \"Generator offline\",\n message: \"Main Generator at Plant West is offline. Maintenance required.\",\n assetId: \"AST-9902\",\n },\n {\n id: \"AL-2\",\n severity: \"warning\" as const,\n title: \"Patch window\",\n message: \"Server-DB01 is in maintenance mode for scheduled patching.\",\n assetId: \"AST-2045\",\n },\n];\n\n// ------------------------------------------------------------\n// Helpers\n// ------------------------------------------------------------\n\nfunction timeAgo(iso: string) {\n const diff = Date.now() - new Date(iso).getTime();\n const m = Math.floor(diff / 60000);\n if (m < 1) return \"just now\";\n if (m < 60) return `${m}m ago`;\n const h = Math.floor(m / 60);\n if (h < 24) return `${h}h ago`;\n const d = Math.floor(h / 24);\n return `${d}d ago`;\n}\n\nfunction EventIcon({ type }: { type: TimelineEvent[\"type\"] }) {\n const props = { className: \"h-4 w-4\" } as const;\n switch (type) {\n case \"location\":\n return ;\n case \"status\":\n return ;\n case \"maintenance\":\n return ;\n case \"power\":\n return ;\n case \"security\":\n return ;\n default:\n return ;\n }\n}\n\nfunction StatusBadge({ status }: { status: Asset[\"status\"] }) {\n const base = \"rounded-full px-2.5 py-1 text-xs font-medium\";\n const map: Record = {\n Active: `${base} bg-emerald-50 text-emerald-700 border border-emerald-200`,\n Idle: `${base} bg-slate-50 text-slate-700 border border-slate-200`,\n Maintenance: `${base} bg-amber-50 text-amber-700 border border-amber-200`,\n Offline: `${base} bg-rose-50 text-rose-700 border border-rose-200`,\n };\n return {status};\n}\n\n// ------------------------------------------------------------\n// Main Component\n// ------------------------------------------------------------\n\nexport default function AssetTrackerDashboard() {\n const [query, setQuery] = useState(\"\");\n const [category, setCategory] = useState(\"all\");\n\n const filteredAssets = useMemo(() => {\n const q = query.trim().toLowerCase();\n return ASSETS.filter((a) => {\n const matchQ =\n !q ||\n a.id.toLowerCase().includes(q) ||\n a.name.toLowerCase().includes(q) ||\n a.category.toLowerCase().includes(q);\n const matchC = category === \"all\" || a.category === (category as AssetCategory);\n return matchQ && matchC;\n });\n }, [query, category]);\n\n const filteredTimeline = useMemo(() => {\n const assets = new Set(filteredAssets.map((a) => a.id));\n return TIMELINE.filter((e) => assets.has(e.assetId)).sort(\n (a, b) => +new Date(b.timestamp) - +new Date(a.timestamp)\n );\n }, [filteredAssets]);\n\n return (\n

\n {/* Top Nav */}\n

\n AT\n

\n AuroraTrack\n \n

\n\n

\n \n \n \n \n \n \n My Account\n \n \n Profile\n \n \n Settings\n \n \n Sign out\n \n \n

\n\n {/* Content */}\n

\n {/* Search + Alerts */}\n

\n \n \n Quick Search\n \n \n

\n \n setQuery(e.target.value)}\n placeholder=\"Search by ID, name, or category…\"\n className=\"border-0 focus-visible:ring-0 p-0 h-7 text-sm\"\n />\n

\n \n

\n \n \n\n \n \n Critical Alerts\n \n \n

\n {ALERTS.map((a) => (\n \n

\n {a.severity === \"critical\" ? (\n \n ) : (\n \n )}\n

\n {a.title}\n \n {a.assetId}\n \n

{a.message}

\n \n ))}\n

\n \n \n

\n\n

\n {/* Timeline */}\n \n \n User History Timeline\n \n \n \n

\n \n \n \n
\n
\n \n {asset.id}\n \n {asset.name}\n \n
\n
\n {timeAgo(e.timestamp)}\n
\n
\n
{e.description}
\n {idx < filteredTimeline.length - 1 && (\n \n )}\n

\n \n \n \n\n {/* Right Pane: Recent Activity / Assets */}\n

\n \n Recent Activity\n \n

\n {TIMELINE.slice(0, 6).map((e) => {\n const asset = ASSETS.find((a) => a.id === e.assetId)!;\n return (\n \n );\n })}\n

\n \n \n\n \n Assets Snapshot\n \n

\n {filteredAssets.map((a) => (\n

\n {a.name}\n {a.category}\n

{a.location} · updated {timeAgo(a.updatedAt)}

\n \n

\n ))}\n

\n \n \n

\n\n \n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","10628012470147774111","traceTime",1776423661245]