104 lines
3.0 KiB
TypeScript
104 lines
3.0 KiB
TypeScript
/**
|
|
* @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>
|
|
);
|
|
};
|