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,164 @@
|
||||
'use client';
|
||||
|
||||
import { isApiError, type IrpCategory } from '@impuestos/contracts';
|
||||
import { formatDateLong, formatGs, type Locale } from '@impuestos/i18n';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useState } from 'react';
|
||||
import { CategoryPicker } from '@/components/category-picker';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { StatusChip } from '@/components/ui/status-chip';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { useT } from '@/i18n/t';
|
||||
import { api } from '@/lib/api';
|
||||
|
||||
/** Flow E1 detail: the data, the image, and the classification the user can override. */
|
||||
export function DocumentDetail({ id, locale }: { id: string; locale: string }) {
|
||||
const t = useT();
|
||||
const queryClient = useQueryClient();
|
||||
const [editing, setEditing] = useState(false);
|
||||
|
||||
const document = useQuery({
|
||||
queryKey: ['documents', id],
|
||||
queryFn: ({ signal }) => api.getDocument(id, signal),
|
||||
retry: (count, error) => !isApiError(error) && count < 1,
|
||||
});
|
||||
|
||||
const reclassify = useMutation({
|
||||
mutationFn: (patch: { irpCategory?: IrpCategory | 'none'; ivaCreditEligible?: boolean }) =>
|
||||
api.patchClassification(id, patch),
|
||||
onSuccess: async () => {
|
||||
setEditing(false);
|
||||
await queryClient.invalidateQueries({ queryKey: ['documents'] });
|
||||
},
|
||||
});
|
||||
|
||||
if (document.isPending) {
|
||||
return (
|
||||
<Card className="my-4">
|
||||
<Skeleton name="declaration-summary" />
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (document.isError || !document.data) {
|
||||
const missing = isApiError(document.error) && document.error.code === 'not_found';
|
||||
return (
|
||||
<Card className="my-4 space-y-3">
|
||||
<p role="alert" className="text-sm">
|
||||
{missing ? t('error.not_found') : t('common.error.generic')}
|
||||
</p>
|
||||
{!missing ? (
|
||||
<Button type="button" onClick={() => void document.refetch()}>
|
||||
{t('common.retry')}
|
||||
</Button>
|
||||
) : null}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const doc = document.data;
|
||||
const classification = doc.classification;
|
||||
const category = classification?.irpCategory ?? 'none';
|
||||
|
||||
return (
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<h1 className="truncate text-2xl font-semibold tracking-tight">{doc.emitterName}</h1>
|
||||
<p className="text-sm text-[var(--text-muted)]">
|
||||
{formatDateLong(locale as Locale, doc.issueDate)}
|
||||
</p>
|
||||
</div>
|
||||
<StatusChip status={doc.status} label={t(`status.${doc.status}` as const)} />
|
||||
</div>
|
||||
|
||||
<Card className="space-y-3">
|
||||
<p className="tnum text-4xl font-semibold tracking-tight">{formatGs(doc.total)}</p>
|
||||
<dl className="space-y-2 text-sm">
|
||||
<Row label={t('manual.iva10')} value={formatGs(doc.iva10)} />
|
||||
<Row label={t('manual.iva5')} value={formatGs(doc.iva5)} />
|
||||
<Row label={t('manual.exenta')} value={formatGs(doc.amountExenta)} />
|
||||
<Row label={t('manual.emitterRuc')} value={`${doc.emitterRuc}-${doc.emitterDv ?? ''}`} />
|
||||
<Row label={t('docs.detail.source.manual')} value={t(`docs.detail.source.${doc.source}` as const)} />
|
||||
</dl>
|
||||
</Card>
|
||||
|
||||
<Card className="space-y-4">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<h2 className="font-semibold tracking-tight">{t('bandeja.category')}</h2>
|
||||
<Button type="button" variant="ghost" onClick={() => setEditing(!editing)}>
|
||||
{editing ? t('common.cancel') : t('common.edit')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{editing ? (
|
||||
<CategoryPicker
|
||||
value={category}
|
||||
onSelect={(next) => reclassify.mutate({ irpCategory: next })}
|
||||
/>
|
||||
) : (
|
||||
<p data-testid="document-category" className="text-lg font-medium">
|
||||
{t(`categories.${category}` as const)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{classification ? (
|
||||
<div className="space-y-3 border-t pt-4 text-sm">
|
||||
<Row
|
||||
label={t('docs.detail.ivaCredit')}
|
||||
value={formatGs(classification.ivaCreditAmount)}
|
||||
/>
|
||||
<Row
|
||||
label={t('docs.detail.deductible')}
|
||||
value={
|
||||
classification.irpDeductibleAmount > 0
|
||||
? formatGs(classification.irpDeductibleAmount)
|
||||
: t('docs.detail.notDeductible')
|
||||
}
|
||||
/>
|
||||
<label className="flex items-center justify-between gap-4">
|
||||
<span>{t('docs.detail.ivaCredit')}</span>
|
||||
<Switch
|
||||
checked={classification.ivaCreditEligible}
|
||||
onCheckedChange={(next) => reclassify.mutate({ ivaCreditEligible: next })}
|
||||
label={t('docs.detail.ivaCredit')}
|
||||
/>
|
||||
</label>
|
||||
|
||||
{classification.reasons.length > 0 ? (
|
||||
<ul className="space-y-1 text-xs text-[var(--text-muted)]">
|
||||
{classification.reasons.map((reason) => (
|
||||
<li key={reason}>
|
||||
{t(`classification.reason.${reason}` as 'classification.reason.irp_no_category')}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</Card>
|
||||
|
||||
{doc.fileUrl ? (
|
||||
<Card className="p-0">
|
||||
{/* The stored photograph. Served through the authenticated file route. */}
|
||||
<img
|
||||
src={doc.fileUrl}
|
||||
alt={doc.emitterName}
|
||||
className="w-full rounded-2xl object-contain"
|
||||
/>
|
||||
</Card>
|
||||
) : null}
|
||||
</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="tnum text-right font-medium">{value}</dd>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user