feat(components): add shared UnitTypePill and UnitTypeSelect

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<UnitType, string> = {
+  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<UnitType, string> = {
+  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 (
+    <Badge variant="outline" className={cn("font-medium", TONE[value])}>
+      {LABELS[value]}
+    </Badge>
+  );
+}
+
+/**
+ * Inline-edit cell. Renders a Radix <Select> limited to the two canonical
+ * enum values. Empty string is intentionally not an option — the user only
+ * ever sets "fuel" or "plant", and PB defaults to "fuel" on create.
+ *
+ * `value` is the current effective value (dirty override if any, else the
+ * original). `onChange` is invoked with the user's pick.
+ */
+export function UnitTypeSelect({
+  value,
+  onChange,
+}: {
+  value: UnitType;
+  onChange: (next: UnitType) => void;
+}) {
+  return (
+    <Select value={value} onValueChange={(v) => onChange(v as UnitType)}>
+      <SelectTrigger
+        className="h-7 min-w-[110px] border-input bg-card text-xs focus:ring-[#F2B165]"
+        aria-label="Vehicle unit type"
+      >
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="fuel">{LABELS.fuel}</SelectItem>
+        <SelectItem value="plant">{LABELS.plant}</SelectItem>
+      </SelectContent>
+    </Select>
+  );
+}