diff --git a/src/components/vehicle-unit-type-cell.tsx b/src/components/vehicle-unit-type-cell.tsx new file mode 100644 index 0000000..9b09c06 --- /dev/null +++ b/src/components/vehicle-unit-type-cell.tsx @@ -0,0 +1,70 @@ +// src/components/vehicle-unit-type-cell.tsx +"use client"; + +import * as React from "react"; +import { Badge } from "@/components/ui/badge"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import type { UnitType } from "@/lib/pb-types"; +import { cn } from "@/lib/utils"; + +const LABELS: Record = { + fuel: "Fleet (L)", + plant: "Plant (h)", +}; + +// Tailwind can't dynamically build classnames from a runtime key (the JIT +// scanner doesn't see them), so we enumerate the tone classes for each type +// explicitly. Keep this map in sync with LABELS above. +const TONE: Record = { + fuel: "border-[#F2B165]/40 bg-[#F2B165]/15 text-[#E08A3C]", + plant: "border-border bg-muted text-muted-foreground", +}; + +/** + * Read-only badge. Renders the user-facing label for a vehicle's unit_type. + * Keeps the cell narrow on both desktop and mobile. + */ +export function UnitTypePill({ value }: { value: UnitType }) { + return ( + + {LABELS[value]} + + ); +} + +/** + * Inline-edit cell. Renders a Radix onChange(v as UnitType)}> + + + + + {LABELS.fuel} + {LABELS.plant} + + + ); +}