phase-3: ingestion, from a QR in the camera to a card in the bandeja
The whole pipeline: storage behind one driver interface (local disk and S3), a portable job queue with a poller, QR and CDC parsing, OCR through the Anthropic API, dedupe, manual entry, and the bandeja that turns all of it into one decision per card. Scanning tries the trustworthy door first: a QR is parsed and prefilled from its CDC; a photo without one is queued for OCR when a key is configured and otherwise opens the manual form against the stored file. A QR that will not parse records an ingest error and falls through rather than losing the photo. Job claiming is the only dialect divergence, as SPEC allows: FOR UPDATE SKIP LOCKED on Postgres, a conditional UPDATE against SQLite's single writer. Retry backoff follows SPEC exactly and a job abandoned by a killed process returns to the queue once its lock goes stale, which is the phase 3 acceptance case. OCR uses structured outputs rather than parsing prose, so the model cannot return anything but the RULES.md schema, and every field is nullable because unreadable is a real answer. Web: scan with live QR decoding (BarcodeDetector, ZXing fallback, wasm served from our own origin), manual entry with the IVA split worked out from the total, the bandeja with swipe, buttons and keyboard all doing the same thing, and the documents list and detail with an editable classification. The seed now carries Maria's 34 purchases and 8 sales and Carlos's 6, all classified through the real rules, plus the two open ingest errors. Two defects found and fixed with tests: seeded documents could be dated in the future, which would corrupt any projection computed from them, and the category buttons announced their keyboard shortcut as part of their name. 255 vitest tests, 37 Playwright tests, rules coverage still 100%, typecheck and lint clean. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Michilis
co-authored by
Claude Opus 5
Claude Opus 5
parent
0d7651b17c
commit
b074456b70
@@ -0,0 +1,308 @@
|
||||
'use client';
|
||||
|
||||
import type { DocumentDto, ScanResultDto } from '@impuestos/contracts';
|
||||
import { formatDateLong, formatGs, type Locale } from '@impuestos/i18n';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { Flashlight, Upload } from 'lucide-react';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { Button, buttonClasses } from '@/components/ui/button';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { Link, useRouter } from '@/i18n/navigation';
|
||||
import { useT } from '@/i18n/t';
|
||||
import { api } from '@/lib/api';
|
||||
import { captureFrame, decodeQr, decodeQrFromVideo } from '@/lib/qr';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
/** How long to look for a QR before offering the plain photo path (FLOWS.md B1). */
|
||||
const NO_QR_HINT_AFTER_MS = 4000;
|
||||
const DECODE_INTERVAL_MS = 250;
|
||||
|
||||
type Outcome =
|
||||
| { kind: 'document'; document: DocumentDto }
|
||||
| { kind: 'needs_manual'; fileId: string };
|
||||
|
||||
export function ScanScreen({ locale }: { locale: string }) {
|
||||
const t = useT();
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const video = useRef<HTMLVideoElement>(null);
|
||||
const stream = useRef<MediaStream | null>(null);
|
||||
const busy = useRef(false);
|
||||
|
||||
const [cameraFailed, setCameraFailed] = useState(false);
|
||||
const [showNoQrHint, setShowNoQrHint] = useState(false);
|
||||
const [torchOn, setTorchOn] = useState(false);
|
||||
const [outcome, setOutcome] = useState<Outcome | null>(null);
|
||||
|
||||
const upload = useMutation({
|
||||
mutationFn: async (input: { file: File; qrPayload: string | null }) => {
|
||||
const result: ScanResultDto = await api.scanDocument(input.file, input.qrPayload);
|
||||
return result;
|
||||
},
|
||||
onSuccess: async (result) => {
|
||||
await queryClient.invalidateQueries({ queryKey: ['documents'] });
|
||||
if ('needsManual' in result) {
|
||||
setOutcome({ kind: 'needs_manual', fileId: result.fileId });
|
||||
return;
|
||||
}
|
||||
setOutcome({ kind: 'document', document: result });
|
||||
},
|
||||
});
|
||||
|
||||
const submit = useCallback(
|
||||
(file: File, qrPayload: string | null) => {
|
||||
if (busy.current) return;
|
||||
busy.current = true;
|
||||
upload.mutate({ file, qrPayload }, { onSettled: () => (busy.current = false) });
|
||||
},
|
||||
[upload],
|
||||
);
|
||||
|
||||
// Live capture: the camera is only opened here, and always released on unmount.
|
||||
useEffect(() => {
|
||||
if (outcome) return;
|
||||
let cancelled = false;
|
||||
|
||||
async function open() {
|
||||
try {
|
||||
const media = await navigator.mediaDevices.getUserMedia({
|
||||
video: { facingMode: 'environment' },
|
||||
audio: false,
|
||||
});
|
||||
if (cancelled) {
|
||||
media.getTracks().forEach((track) => track.stop());
|
||||
return;
|
||||
}
|
||||
stream.current = media;
|
||||
if (video.current) {
|
||||
video.current.srcObject = media;
|
||||
await video.current.play().catch(() => undefined);
|
||||
}
|
||||
} catch {
|
||||
if (!cancelled) setCameraFailed(true);
|
||||
}
|
||||
}
|
||||
|
||||
void open();
|
||||
return () => {
|
||||
cancelled = true;
|
||||
stream.current?.getTracks().forEach((track) => track.stop());
|
||||
stream.current = null;
|
||||
};
|
||||
}, [outcome]);
|
||||
|
||||
// A QR hit auto-captures: there is nothing for the user to decide once we have it.
|
||||
useEffect(() => {
|
||||
if (cameraFailed || outcome) return;
|
||||
const hintTimer = setTimeout(() => setShowNoQrHint(true), NO_QR_HINT_AFTER_MS);
|
||||
|
||||
const timer = setInterval(() => {
|
||||
void (async () => {
|
||||
if (!video.current || busy.current) return;
|
||||
const payload = await decodeQrFromVideo(video.current);
|
||||
if (!payload || !video.current) return;
|
||||
|
||||
const frame = await captureFrame(video.current);
|
||||
if (frame) {
|
||||
navigator.vibrate?.(40);
|
||||
submit(frame, payload);
|
||||
}
|
||||
})();
|
||||
}, DECODE_INTERVAL_MS);
|
||||
|
||||
return () => {
|
||||
clearTimeout(hintTimer);
|
||||
clearInterval(timer);
|
||||
};
|
||||
}, [cameraFailed, outcome, submit]);
|
||||
|
||||
async function toggleTorch() {
|
||||
const track = stream.current?.getVideoTracks()[0];
|
||||
if (!track) return;
|
||||
try {
|
||||
const next = !torchOn;
|
||||
// `torch` is a real constraint on mobile but is not in the DOM lib's type yet.
|
||||
await track.applyConstraints({ advanced: [{ torch: next }] } as unknown as MediaTrackConstraints);
|
||||
setTorchOn(next);
|
||||
} catch {
|
||||
// Most desktop cameras have no torch. Nothing to say about it.
|
||||
}
|
||||
}
|
||||
|
||||
async function onPick(file: File) {
|
||||
// Decoding before upload keeps the QR path working for a photo from the gallery.
|
||||
submit(file, await decodeQr(file));
|
||||
}
|
||||
|
||||
if (outcome?.kind === 'document') {
|
||||
return (
|
||||
<ScanResult
|
||||
document={outcome.document}
|
||||
locale={locale as Locale}
|
||||
onAnother={() => setOutcome(null)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (outcome?.kind === 'needs_manual') {
|
||||
router.push(`/comprobantes/nuevo?fileId=${encodeURIComponent(outcome.fileId)}`);
|
||||
return (
|
||||
<Card className="my-4">
|
||||
<Skeleton name="profile-section" />
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4 py-4">
|
||||
<h1 className="text-2xl font-semibold tracking-tight">{t('scan.title')}</h1>
|
||||
|
||||
<div className="relative overflow-hidden rounded-2xl bg-black">
|
||||
<video
|
||||
ref={video}
|
||||
playsInline
|
||||
muted
|
||||
aria-label={t('scan.hint')}
|
||||
className={cn('aspect-3/4 w-full object-cover', cameraFailed && 'hidden')}
|
||||
/>
|
||||
{cameraFailed ? (
|
||||
<p className="p-8 text-center text-sm text-white">{t('scan.cameraDenied')}</p>
|
||||
) : (
|
||||
<>
|
||||
{/* Frame guide: shows where the QR has to sit. */}
|
||||
<div
|
||||
aria-hidden
|
||||
className="pointer-events-none absolute inset-x-8 top-1/4 aspect-square rounded-2xl border-2 border-white/70"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void toggleTorch()}
|
||||
aria-pressed={torchOn}
|
||||
className="absolute top-3 right-3 rounded-full bg-black/50 p-2.5 text-white"
|
||||
>
|
||||
<Flashlight aria-hidden className="size-5" />
|
||||
<span className="sr-only">{t('scan.torch')}</span>
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-center text-sm text-[var(--text-muted)]">
|
||||
{showNoQrHint || cameraFailed ? t('scan.noQrHint') : t('scan.hint')}
|
||||
</p>
|
||||
|
||||
{upload.isPending ? (
|
||||
<Card>
|
||||
<p className="mb-3 text-sm text-[var(--text-muted)]">{t('scan.processing')}</p>
|
||||
<Skeleton name="bandeja-card" />
|
||||
</Card>
|
||||
) : null}
|
||||
|
||||
{upload.isError ? (
|
||||
<p role="alert" className="text-center text-sm text-overdue">
|
||||
{t('common.error.generic')}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className={cn(buttonClasses({ variant: 'secondary', size: 'lg', block: true }), 'cursor-pointer')}>
|
||||
<Upload aria-hidden className="size-4" />
|
||||
{t('scan.upload')}
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*,application/pdf"
|
||||
className="sr-only"
|
||||
onChange={(event) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (file) void onPick(file);
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
|
||||
{!cameraFailed ? (
|
||||
<Button
|
||||
type="button"
|
||||
size="lg"
|
||||
block
|
||||
disabled={upload.isPending}
|
||||
onClick={() => {
|
||||
void (async () => {
|
||||
if (!video.current) return;
|
||||
const frame = await captureFrame(video.current);
|
||||
if (frame) submit(frame, await decodeQr(frame));
|
||||
})();
|
||||
}}
|
||||
>
|
||||
{t('scan.shutter')}
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ScanResult({
|
||||
document,
|
||||
locale,
|
||||
onAnother,
|
||||
}: {
|
||||
document: DocumentDto;
|
||||
locale: Locale;
|
||||
onAnother: () => void;
|
||||
}) {
|
||||
const t = useT();
|
||||
const merged = document.merged === true;
|
||||
|
||||
return (
|
||||
<div className="space-y-4 py-4">
|
||||
<Card className="space-y-4">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<h1 className="text-xl font-semibold tracking-tight text-balance">
|
||||
{merged ? t('scan.duplicate.title') : t('scan.result.title')}
|
||||
</h1>
|
||||
<span className="shrink-0 rounded-full bg-positive-soft px-2.5 py-0.5 text-xs font-medium text-positive">
|
||||
{document.verifiedDnit ? t('scan.verified') : t('scan.registered')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{merged ? (
|
||||
<p className="text-sm text-[var(--text-muted)] text-pretty">
|
||||
{t('scan.duplicate.body', { date: formatDateLong(locale, document.issueDate) })}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<dl className="space-y-2 text-sm">
|
||||
<Row label={t('scan.result.emitter')} value={document.emitterName} />
|
||||
<Row label={t('scan.result.date')} value={formatDateLong(locale, document.issueDate)} />
|
||||
<Row label={t('scan.result.total')} value={formatGs(document.total)} />
|
||||
{document.classification ? (
|
||||
<Row
|
||||
label={t('bandeja.category')}
|
||||
value={t(`categories.${document.classification.irpCategory}` as const)}
|
||||
/>
|
||||
) : null}
|
||||
</dl>
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<Link href="/bandeja" className={buttonClasses({ size: 'lg', block: true })}>
|
||||
{t('scan.goToBandeja')}
|
||||
</Link>
|
||||
<Button type="button" variant="secondary" block onClick={onAnother}>
|
||||
{t('scan.another')}
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Row({ label, value }: { label: string; value: string }) {
|
||||
return (
|
||||
<div className="flex items-baseline justify-between gap-4">
|
||||
<dt className="text-[var(--text-muted)]">{label}</dt>
|
||||
<dd className="text-right font-medium">{value}</dd>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user