frontend/src/features/dashboard/components/VehicleRosterCard.tsx

@@ -0,0 +1,103 @@
+/**
+ * @ai-summary Vehicle roster card component for dashboard fleet grid
+ * Displays vehicle image, health status, attention items, and odometer
+ */
+
+import React from 'react';
+import { clsx } from 'clsx';
+import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
+import { VehicleImage } from '../../vehicles/components/VehicleImage';
+import { getVehicleLabel } from '../../../core/utils/vehicleDisplay';
+import { VehicleRosterData, AttentionItem } from '../types';
+
+interface VehicleRosterCardProps {
+  data: VehicleRosterData;
+  onClick: (vehicleId: string) => void;
+}
+
+const getHealthBadgeClass = (health: VehicleRosterData['health']): string => {
+  switch (health) {
+    case 'green':
+      return 'bg-emerald-500';
+    case 'yellow':
+      return 'bg-amber-500';
+    case 'red':
+      return 'bg-red-500';
+  }
+};
+
+const getAttentionItemClass = (urgency: AttentionItem['urgency']): string => {
+  switch (urgency) {
+    case 'overdue':
+      return 'text-red-600 dark:text-red-400';
+    case 'due-soon':
+      return 'text-amber-600 dark:text-amber-400';
+    case 'upcoming':
+      return 'text-slate-500 dark:text-titanio';
+  }
+};
+
+const formatAttentionStatus = (item: AttentionItem): string => {
+  if (item.urgency === 'overdue') {
+    return 'OVERDUE';
+  }
+  return `${item.daysUntilDue} days`;
+};
+
+export const VehicleRosterCard: React.FC<VehicleRosterCardProps> = ({
+  data,
+  onClick,
+}) => {
+  const { vehicle, health, attentionItems } = data;
+  const displayedItems = attentionItems.slice(0, 3);
+
+  return (
+    <GlassCard onClick={() => onClick(vehicle.id)}>
+      {/* Top row: Image, Label, Health Badge */}
+      <div className="flex items-center gap-3 mb-3">
+        {/* Vehicle image container - clips the built-in mb-2 margin */}
+        <div className="w-12 h-12 rounded-lg overflow-hidden flex-shrink-0">
+          <VehicleImage vehicle={vehicle} height={48} borderRadius={2} />
+        </div>
+
+        {/* Vehicle label */}
+        <div className="flex-1 min-w-0">
+          <div className="text-base font-semibold text-slate-800 dark:text-avus truncate">
+            {getVehicleLabel(vehicle)}
+          </div>
+        </div>
+
+        {/* Health badge */}
+        <div
+          className={clsx(
+            'w-3 h-3 rounded-full flex-shrink-0',
+            getHealthBadgeClass(health)
+          )}
+        />
+      </div>
+
+      {/* Attention items */}
+      <div className="mb-3 space-y-1">
+        {displayedItems.length === 0 ? (
+          <div className="text-sm text-emerald-600 dark:text-emerald-400">
+            All clear
+          </div>
+        ) : (
+          displayedItems.map((item, index) => (
+            <div
+              key={index}
+              className={clsx('text-sm', getAttentionItemClass(item.urgency))}
+            >
+              {item.label} - {formatAttentionStatus(item)}
+            </div>
+          ))
+        )}
+      </div>
+
+      {/* Odometer */}
+      <div className="text-sm text-slate-500 dark:text-titanio">
+        {vehicle.odometerReading.toLocaleString()} mi
+      </div>
+    </GlassCard>
+  );
+};