feat(repairs): street-car entry button + sheet on car select
Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
@@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user