feat(repairs): street-car entry button + sheet on car select

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
2026-06-05 14:11:03 +03:00
co-authored by claude-flow
parent 3d875642f8
commit 7e6817b3ff
@@ -18,6 +18,15 @@ export default function CarSelectPage() {
const [cars, setCars] = useState<CarBrief[]>([]); const [cars, setCars] = useState<CarBrief[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null); 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(() => { useEffect(() => {
let cancelled = false; let cancelled = false;
@@ -62,6 +71,13 @@ export default function CarSelectPage() {
</div> </div>
</header> </header>
<main className="flex-1 container max-w-2xl py-3"> <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 && ( {error && (
<div className="rounded-md border border-destructive bg-destructive/10 p-3 text-sm"> <div className="rounded-md border border-destructive bg-destructive/10 p-3 text-sm">
{error} {error}
@@ -96,6 +112,41 @@ export default function CarSelectPage() {
</ul> </ul>
)} )}
</main> </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> </div>
); );
} }