From 98806d1e9278c04b7f71918612122279e49aad80 Mon Sep 17 00:00:00 2001
From: vladtechno <vladtechno@gmail.com>
Date: Wed, 20 May 2026 15:17:15 +1000
Subject: [PATCH] =?UTF-8?q?vehicle=20list:=20=D1=86=D0=B2=D0=B5=D1=82?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=B9=20=D1=87=D0=B8=D0=BF=20=D1=81=D1=82=D0=B0?=
 =?UTF-8?q?=D1=82=D1=83=D1=81=D0=B0=20(=D0=9D=D0=B0=20=D0=BB=D0=B8=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B8=20/=20=D0=94=D0=A2=D0=9F=20/=20=D0=A0=D0=B5=D0=BC?=
 =?UTF-8?q?=D0=BE=D0=BD=D1=82=20/=20=D0=91=D1=80=D0=BE=D0=BD=D1=8C)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

VehicleSummary.status (cars_v2.element_status) рендерится как цветной
pill справа от гос.номера. Палитра по семантике:
  emerald — На линии (норма)
  amber   — Ремонтируется / Ждет ремонта
  red     — ДТП
  blue    — Бронь / Выкуп / На продаже / Подготовка на продажу / Ждет
            доставки до офиса (admin-операции)
  muted   — Простой и неизвестные статусы

Чип появляется в Home (списке машин) и в шапке VehicleCard. Backend
сторона — PremiumCRM 92d4317.
---
 mechanic-pwa/frontend/src/api/vehicles.ts     |  4 ++
 mechanic-pwa/frontend/src/pages/Home.tsx      | 37 ++++++++++++++++++-
 .../frontend/src/pages/VehicleCard.tsx        | 24 +++++++++++-
 3 files changed, 63 insertions(+), 2 deletions(-)

diff --git a/mechanic-pwa/frontend/src/api/vehicles.ts b/mechanic-pwa/frontend/src/api/vehicles.ts
index 86555c5..fb3a838 100644
--- a/mechanic-pwa/frontend/src/api/vehicles.ts
+++ b/mechanic-pwa/frontend/src/api/vehicles.ts
@@ -8,6 +8,10 @@ export interface VehicleSummary {
   model?: string | null;
   year?: number | null;
   last_inspection_at?: string | null;
+  /** Текущий статус машины из 1C Element (cars_v2.element_status):
+      'На линии' / 'Простой' / 'Ремонтируется' / 'Ждет ремонта' / 'ДТП' /
+      'Бронь' / 'Выкуп' / 'На продаже' / etc. NULL если не задан. */
+  status?: string | null;
 }
 
 export interface VehicleDetail extends VehicleSummary {
diff --git a/mechanic-pwa/frontend/src/pages/Home.tsx b/mechanic-pwa/frontend/src/pages/Home.tsx
index f6be092..b063b58 100644
--- a/mechanic-pwa/frontend/src/pages/Home.tsx
+++ b/mechanic-pwa/frontend/src/pages/Home.tsx
@@ -10,6 +10,38 @@ const ACTION_TITLES: Record<string, string> = {
   repair: "Ремонт",
 };
 
+// Группа цветов по семантике статуса. Палитра подсчитана из Tailwind с
+// прозрачностью, чтобы чип не перебивал гос.номер. Tone:
+//   ok      — на линии (зелёный)
+//   idle    — простой (серый)
+//   repair  — в ремонте / ждёт ремонта (янтарный)
+//   alert   — ДТП (красный)
+//   admin   — выкуп / на продаже / бронь / подготовка к продаже / ждёт доставки
+//   sold    — продана (не отображается — отфильтрована из выдачи)
+const STATUS_TONE: Record<string, string> = {
+  "На линии": "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300",
+  "Простой": "bg-muted text-muted-foreground",
+  "Ремонтируется": "bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300",
+  "Ждет ремонта": "bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300",
+  "ДТП": "bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300",
+  "Бронь": "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
+  "Выкуп": "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
+  "На продаже": "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
+  "Подготовка на продажу": "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
+  "Ждет доставки до офиса": "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
+};
+
+function StatusChip({ status }: { status: string }) {
+  const tone =
+    STATUS_TONE[status] ??
+    "bg-muted text-muted-foreground";
+  return (
+    <span className={`inline-flex items-center text-xs font-medium px-2 py-0.5 rounded-full ${tone}`}>
+      {status}
+    </span>
+  );
+}
+
 export default function Home() {
   const [q, setQ] = useState("");
   const [searchParams] = useSearchParams();
@@ -63,7 +95,10 @@ export default function Home() {
                   navigate(`/vehicles/${v.id}${action ? `?action=${action}` : ""}`)
                 }
               >
-                <div className="font-semibold text-lg">{v.license_plate}</div>
+                <div className="flex items-center gap-2 flex-wrap">
+                  <div className="font-semibold text-lg">{v.license_plate}</div>
+                  {v.status && <StatusChip status={v.status} />}
+                </div>
                 <div className="text-sm text-muted-foreground">
                   {[v.make, v.model, v.year].filter(Boolean).join(" ") || "—"}
                 </div>
diff --git a/mechanic-pwa/frontend/src/pages/VehicleCard.tsx b/mechanic-pwa/frontend/src/pages/VehicleCard.tsx
index 1fa87b5..f7d195a 100644
--- a/mechanic-pwa/frontend/src/pages/VehicleCard.tsx
+++ b/mechanic-pwa/frontend/src/pages/VehicleCard.tsx
@@ -110,7 +110,29 @@ export default function VehicleCard() {
       </button>
 
       <Card className="p-4">
-        <div className="text-xl font-semibold">{v.license_plate}</div>
+        <div className="flex items-center gap-2 flex-wrap">
+          <div className="text-xl font-semibold">{v.license_plate}</div>
+          {v.status && (
+            <span
+              className={`inline-flex items-center text-xs font-medium px-2 py-0.5 rounded-full ${
+                {
+                  "На линии": "bg-emerald-100 text-emerald-800 dark:bg-emerald-900/40 dark:text-emerald-300",
+                  "Простой": "bg-muted text-muted-foreground",
+                  "Ремонтируется": "bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300",
+                  "Ждет ремонта": "bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300",
+                  "ДТП": "bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300",
+                  "Бронь": "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
+                  "Выкуп": "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
+                  "На продаже": "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
+                  "Подготовка на продажу": "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
+                  "Ждет доставки до офиса": "bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
+                }[v.status] ?? "bg-muted text-muted-foreground"
+              }`}
+            >
+              {v.status}
+            </span>
+          )}
+        </div>
         <div className="text-sm text-muted-foreground">
           {[v.make, v.model, v.year].filter(Boolean).join(" ") || "—"}
         </div>