Job cards screen: drop the open-jobs list, add vehicle search fallback

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
David 2026-10-22 12:58:31 +02:00
parent c269cd00b4
commit 96b55ea5b4

View file

@ -1,7 +1,7 @@
'use client';
import { useEffect, useRef, useState } from 'react';
import { useRouter } from 'next/navigation';
import { AlertTriangle, CheckCircle2, Play, Square, Wrench, X } from 'lucide-react';
import { AlertTriangle, CheckCircle2, Play, Square, X } from 'lucide-react';
import { BadgeCamera } from './BadgeCamera';
import { SearchPicker } from './SearchPicker';
import { clockTime } from '@/lib/clock-display';
@ -90,16 +90,11 @@ export function JobScanner({ assets, mechanics, open }: { assets: Asset[]; mecha
{!asset ? <>
<div className="mt-4"><BadgeCamera onDecode={onDecode} paused={busy} hint="Scan the vehicle QR to start or finish a job"/></div>
{unknownScan && <p role="alert" className="plant-clock-warning mt-3">That QR is not a vehicle in the plant register ({unknownScan}).</p>}
<div className="plant-clock-panel mt-5 p-4 sm:p-5">
<h2 className="text-base font-semibold flex items-center gap-2"><Wrench size={16}/>Jobs open now</h2>
{open.length === 0 ? <p className="text-sm text-text-muted mt-3">No jobs running. Scan a vehicle to start one.</p>
: <ul className="divide-y divide-border mt-2">{open.map(j => {
const a = assetById(j.asset);
return <li key={j.id}><button type="button" disabled={!a} onClick={() => a && choose(a)} className="w-full min-h-[56px] py-3 flex items-center gap-3 text-left">
<span className="min-w-0 flex-1"><span className="block text-sm font-semibold">{a?.code ?? 'Unknown vehicle'} <span className="font-normal text-text-muted">· {a?.name}</span></span>
<span className="block text-xs text-text-muted">{j.mechanic} · started {clockTime(j.startedAt.replace(' ', 'T'))} · {formatMinutes(minutesBetween(j.startedAt, now))}</span></span>
<span className="plant-clock-status shrink-0">Finish</span></button></li>;
})}</ul>}
<div className="mt-4">
<label htmlFor="vehicle-find" className="block text-sm font-medium">QR not scanning? Search for the vehicle</label>
<SearchPicker id="vehicle-find" placeholder="Type the vehicle code or name…" value=""
onChange={id => { const found = assetById(id); if (found) { setMessage(null); choose(found); } }}
options={assets.map(a => ({ id: a.id, label: a.code, sub: a.name }))}/>
</div>
</> : !job ? <form onSubmit={start} className="plant-clock-panel mt-4 p-4 sm:p-5">
<div className="flex items-start justify-between gap-3">