79 lines
4.2 KiB
TypeScript
79 lines
4.2 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { Vehicle } from '@/lib/api';
|
||
|
|
import { Car, Clock, Signal, Layers } from 'lucide-react';
|
||
|
|
import { clsx } from 'clsx';
|
||
|
|
|
||
|
|
interface VehicleListProps {
|
||
|
|
vehicles: Vehicle[];
|
||
|
|
}
|
||
|
|
|
||
|
|
export function VehicleList({ vehicles }: VehicleListProps) {
|
||
|
|
return (
|
||
|
|
<div className="bg-zinc-900/50 backdrop-blur-md border border-zinc-800 rounded-xl p-6 shadow-xl">
|
||
|
|
<h2 className="text-xl font-semibold text-white mb-4 flex items-center gap-2">
|
||
|
|
<Car className="w-5 h-5 text-indigo-400" />
|
||
|
|
Fleet Overview
|
||
|
|
</h2>
|
||
|
|
<div className="overflow-x-auto">
|
||
|
|
<table className="w-full text-left">
|
||
|
|
<thead>
|
||
|
|
<tr className="border-b border-zinc-800 text-zinc-400 text-sm">
|
||
|
|
<th className="pb-3 pl-2">VIN</th>
|
||
|
|
<th className="pb-3">Group</th>
|
||
|
|
<th className="pb-3">Status</th>
|
||
|
|
<th className="pb-3">Version</th>
|
||
|
|
<th className="pb-3">Last Heartbeat</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody className="divide-y divide-zinc-800/50">
|
||
|
|
{vehicles.map((vehicle) => {
|
||
|
|
// Calculate status: Offline if no heartbeat for 5s
|
||
|
|
const displayStatus = getVehicleDisplayStatus(vehicle);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<tr key={vehicle.vin} className="text-zinc-300 hover:bg-zinc-800/30 transition-colors">
|
||
|
|
<td className="py-3 pl-2 font-mono text-sm">{vehicle.vin}</td>
|
||
|
|
<td className="py-3">
|
||
|
|
<span className="inline-flex items-center gap-1 text-xs px-2 py-1 rounded-full bg-zinc-800 text-zinc-400">
|
||
|
|
<Layers className="w-3 h-3" />
|
||
|
|
{vehicle.group?.name || 'Unassigned'}
|
||
|
|
</span>
|
||
|
|
</td>
|
||
|
|
<td className="py-3">
|
||
|
|
<span className={clsx(
|
||
|
|
"inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium",
|
||
|
|
displayStatus === 'Online' && "bg-emerald-500/10 text-emerald-400 border border-emerald-500/20",
|
||
|
|
displayStatus === 'Offline' && "bg-red-500/10 text-red-400 border border-red-500/20",
|
||
|
|
displayStatus === 'Updating' && "bg-amber-500/10 text-amber-400 border border-amber-500/20 animate-pulse"
|
||
|
|
)}>
|
||
|
|
<Signal className="w-3 h-3" />
|
||
|
|
{displayStatus}
|
||
|
|
</span>
|
||
|
|
</td>
|
||
|
|
<td className="py-3">
|
||
|
|
<span className="font-mono text-zinc-400 bg-zinc-900 px-2 py-1 rounded border border-zinc-800">
|
||
|
|
v{vehicle.currentVersion}
|
||
|
|
</span>
|
||
|
|
</td>
|
||
|
|
<td className="py-3 text-sm text-zinc-500 flex items-center gap-1.5">
|
||
|
|
<Clock className="w-3 h-3" />
|
||
|
|
{new Date(vehicle.lastHeartbeat).toLocaleTimeString()}
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
{vehicles.length === 0 && (
|
||
|
|
<tr>
|
||
|
|
<td colSpan={5} className="text-center py-8 text-zinc-500">
|
||
|
|
No vehicles registered yet.
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
)}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|