From 7e6817b3ffe41fc0a400a36f1f6cf82a1aa25956 Mon Sep 17 00:00:00 2001
From: vladtechno <vladtechno@gmail.com>
Date: Fri, 5 Jun 2026 14:11:03 +0300
Subject: [PATCH] feat(repairs): street-car entry button + sheet on car select

Co-Authored-By: claude-flow <ruv@ruv.net>
---
 .../src/pages/repairs/CarSelectPage.tsx       | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/mechanic-pwa/frontend/src/pages/repairs/CarSelectPage.tsx b/mechanic-pwa/frontend/src/pages/repairs/CarSelectPage.tsx
index 17b3e96..c369415 100644
--- a/mechanic-pwa/frontend/src/pages/repairs/CarSelectPage.tsx
+++ b/mechanic-pwa/frontend/src/pages/repairs/CarSelectPage.tsx
@@ -18,6 +18,15 @@ export default function CarSelectPage() {
   const [cars, setCars] = useState<CarBrief[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [extOpen, setExtOpen] = useState(false);
+  const [extPlate, setExtPlate] = useState("");
+  const [extMake, setExtMake] = useState("");
+
+  const continueExternal = () => {
+    const plate = extPlate.trim();
+    if (!plate) return;
+    navigate("/repairs/new-external", { state: { plate, make: extMake.trim() || null } });
+  };
 
   useEffect(() => {
     let cancelled = false;
@@ -62,6 +71,13 @@ export default function CarSelectPage() {
         </div>
       </header>
       <main className="flex-1 container max-w-2xl py-3">
+        <button
+          type="button"
+          onClick={() => setExtOpen(true)}
+          className="w-full mb-3 flex items-center justify-center gap-1 rounded-md border border-dashed bg-card hover:bg-accent/40 transition-colors p-3 text-sm font-medium text-muted-foreground"
+        >
+          + Машина не из парка
+        </button>
         {error && (
           <div className="rounded-md border border-destructive bg-destructive/10 p-3 text-sm">
             {error}
@@ -96,6 +112,41 @@ export default function CarSelectPage() {
           </ul>
         )}
       </main>
+      {extOpen && (
+        <div className="fixed inset-0 z-50 bg-background/95 flex flex-col">
+          <header className="border-b p-3 flex items-center gap-2">
+            <Button variant="ghost" size="sm" onClick={() => setExtOpen(false)}>
+              Отмена
+            </Button>
+            <h2 className="text-base font-semibold">Машина с улицы</h2>
+          </header>
+          <main className="flex-1 container max-w-2xl py-4 space-y-4">
+            <div>
+              <label className="text-sm font-medium">Госномер *</label>
+              <Input
+                autoFocus
+                value={extPlate}
+                onChange={(e) => setExtPlate(e.target.value)}
+                placeholder="Х999ХХ199"
+                className="mt-1"
+                onKeyDown={(e) => e.key === "Enter" && continueExternal()}
+              />
+            </div>
+            <div>
+              <label className="text-sm font-medium">Марка и модель (необязательно)</label>
+              <Input
+                value={extMake}
+                onChange={(e) => setExtMake(e.target.value)}
+                placeholder="Toyota Camry"
+                className="mt-1"
+              />
+            </div>
+            <Button className="w-full" disabled={!extPlate.trim()} onClick={continueExternal}>
+              Продолжить →
+            </Button>
+          </main>
+        </div>
+      )}
     </div>
   );
 }