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,266 @@
|
||||
'use client';
|
||||
|
||||
import type { IrpCategory } from '@impuestos/contracts';
|
||||
import { formatDateLong, formatGs, type Locale } from '@impuestos/i18n';
|
||||
import { IRP_CATEGORIES } from '@impuestos/rules';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { Check, X } from 'lucide-react';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { CategoryPicker } from '@/components/category-picker';
|
||||
import { Button, buttonClasses } from '@/components/ui/button';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { EmptyState } from '@/components/ui/empty-state';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { Link } from '@/i18n/navigation';
|
||||
import { useT } from '@/i18n/t';
|
||||
import { api } from '@/lib/api';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
/** Past this many pixels, letting go commits the swipe. */
|
||||
const COMMIT_PX = 96;
|
||||
|
||||
/**
|
||||
* Flow B4. A stack of documents waiting for a yes. Every gesture has a button and a key,
|
||||
* because a swipe is unusable with a keyboard and invisible to a screen reader.
|
||||
*/
|
||||
export function Bandeja({ locale }: { locale: string }) {
|
||||
const t = useT();
|
||||
const queryClient = useQueryClient();
|
||||
const [index, setIndex] = useState(0);
|
||||
const [picking, setPicking] = useState(false);
|
||||
const [drag, setDrag] = useState(0);
|
||||
const [dragging, setDragging] = useState(false);
|
||||
const dragStart = useRef<number | null>(null);
|
||||
|
||||
const pending = useQuery({
|
||||
queryKey: ['documents', { status: 'needs_review' }],
|
||||
queryFn: ({ signal }) => api.listDocuments({ status: 'needs_review' }, signal),
|
||||
});
|
||||
|
||||
const documents = pending.data?.items ?? [];
|
||||
// Confirming the last card shortens the list under us. Clamping here rather than in an
|
||||
// effect keeps the render consistent and avoids a cascading update.
|
||||
const safeIndex = Math.min(index, Math.max(0, documents.length - 1));
|
||||
const current = documents[safeIndex];
|
||||
|
||||
const invalidate = useCallback(
|
||||
() => queryClient.invalidateQueries({ queryKey: ['documents'] }),
|
||||
[queryClient],
|
||||
);
|
||||
|
||||
const confirm = useMutation({
|
||||
mutationFn: (id: string) => api.confirmDocument(id),
|
||||
onSuccess: async () => {
|
||||
setDrag(0);
|
||||
await invalidate();
|
||||
},
|
||||
});
|
||||
|
||||
const reject = useMutation({
|
||||
mutationFn: (args: { id: string; reason: 'not_mine' | 'duplicate' | 'other' }) =>
|
||||
api.rejectDocument(args.id, { reason: args.reason }),
|
||||
onSuccess: async () => {
|
||||
setDrag(0);
|
||||
await invalidate();
|
||||
},
|
||||
});
|
||||
|
||||
const reclassify = useMutation({
|
||||
mutationFn: (args: { id: string; irpCategory: IrpCategory | 'none' }) =>
|
||||
api.patchClassification(args.id, { irpCategory: args.irpCategory }),
|
||||
onSuccess: async () => {
|
||||
setPicking(false);
|
||||
await invalidate();
|
||||
},
|
||||
});
|
||||
|
||||
// Desktop keyboard mirrors of every gesture (FLOWS.md B4).
|
||||
useEffect(() => {
|
||||
function onKey(event: KeyboardEvent) {
|
||||
if (!current || picking) return;
|
||||
if (event.key === 'j') setIndex(Math.min(safeIndex + 1, documents.length - 1));
|
||||
else if (event.key === 'k') setIndex(Math.max(safeIndex - 1, 0));
|
||||
else if (event.key === 'Enter') confirm.mutate(current.id);
|
||||
else if (event.key === 'x' || event.key === 'X') reject.mutate({ id: current.id, reason: 'other' });
|
||||
else if (/^[1-8]$/.test(event.key)) {
|
||||
const category = IRP_CATEGORIES[Number(event.key) - 1];
|
||||
if (category) reclassify.mutate({ id: current.id, irpCategory: category });
|
||||
} else return;
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', onKey);
|
||||
return () => window.removeEventListener('keydown', onKey);
|
||||
}, [current, documents.length, safeIndex, picking, confirm, reject, reclassify]);
|
||||
|
||||
if (pending.isPending) {
|
||||
return (
|
||||
<div className="space-y-4 py-4">
|
||||
<Card>
|
||||
<Skeleton name="bandeja-card" />
|
||||
</Card>
|
||||
<Card>
|
||||
<Skeleton name="bandeja-card" />
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (pending.isError) {
|
||||
return (
|
||||
<Card className="my-4 space-y-3">
|
||||
<p role="alert" className="text-sm">
|
||||
{t('common.error.generic')}
|
||||
</p>
|
||||
<Button type="button" onClick={() => void pending.refetch()}>
|
||||
{t('common.retry')}
|
||||
</Button>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (!current) {
|
||||
return (
|
||||
<div className="py-4">
|
||||
<Card>
|
||||
<EmptyState
|
||||
icon={<Check aria-hidden className="size-8" />}
|
||||
title={t('bandeja.empty')}
|
||||
body={t('bandeja.emptyBody')}
|
||||
action={
|
||||
<Link href="/escanear" className={buttonClasses({ size: 'lg' })}>
|
||||
{t('scan.fab')}
|
||||
</Link>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const category = current.classification?.irpCategory ?? 'none';
|
||||
const highConfidence = (current.classification?.confidence ?? 0) >= 0.8;
|
||||
|
||||
return (
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="flex items-baseline justify-between">
|
||||
<h1 className="text-2xl font-semibold tracking-tight">{t('bandeja.title')}</h1>
|
||||
<span className="text-sm text-[var(--text-muted)]">
|
||||
{t('bandeja.count', { count: documents.length })}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Card
|
||||
data-testid="bandeja-card"
|
||||
className="touch-pan-y space-y-4 select-none"
|
||||
style={{
|
||||
transform: `translateX(${drag}px) rotate(${drag / 40}deg)`,
|
||||
transition: dragging ? 'none' : 'transform 200ms ease-out',
|
||||
}}
|
||||
onPointerDown={(event) => {
|
||||
dragStart.current = event.clientX;
|
||||
setDragging(true);
|
||||
event.currentTarget.setPointerCapture(event.pointerId);
|
||||
}}
|
||||
onPointerMove={(event) => {
|
||||
if (dragStart.current === null) return;
|
||||
setDrag(event.clientX - dragStart.current);
|
||||
}}
|
||||
onPointerUp={() => {
|
||||
const offset = drag;
|
||||
dragStart.current = null;
|
||||
setDragging(false);
|
||||
if (offset > COMMIT_PX) confirm.mutate(current.id);
|
||||
else if (offset < -COMMIT_PX) {
|
||||
setPicking(true);
|
||||
setDrag(0);
|
||||
} else setDrag(0);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-lg font-medium">{current.emitterName}</p>
|
||||
<p className="text-sm text-[var(--text-muted)]">
|
||||
{formatDateLong(locale as Locale, current.issueDate)}
|
||||
</p>
|
||||
</div>
|
||||
<span
|
||||
className={cn(
|
||||
'shrink-0 rounded-full px-2.5 py-0.5 text-xs font-medium',
|
||||
highConfidence ? 'bg-positive-soft text-positive' : 'bg-attention-soft text-attention',
|
||||
)}
|
||||
>
|
||||
{highConfidence ? t('bandeja.confidence.high') : t('bandeja.confidence.low')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p className="tnum text-4xl font-semibold tracking-tight">{formatGs(current.total)}</p>
|
||||
|
||||
<p className="text-sm text-[var(--text-muted)]">
|
||||
{t('scan.result.suggested', { category: t(`categories.${category}` as const) })}
|
||||
</p>
|
||||
|
||||
{current.classification?.reasons.length ? (
|
||||
<ul className="space-y-1 text-xs text-[var(--text-muted)]">
|
||||
{current.classification.reasons.map((reason) => (
|
||||
<li key={reason}>{t(`classification.reason.${reason}` as 'classification.reason.irp_no_category')}</li>
|
||||
))}
|
||||
</ul>
|
||||
) : null}
|
||||
</Card>
|
||||
|
||||
{picking ? (
|
||||
<Card className="space-y-3">
|
||||
<h2 className="font-medium">{t('scan.result.changeCat')}</h2>
|
||||
<CategoryPicker
|
||||
value={category}
|
||||
onSelect={(next) => reclassify.mutate({ id: current.id, irpCategory: next })}
|
||||
/>
|
||||
<Button type="button" variant="ghost" block onClick={() => setPicking(false)}>
|
||||
{t('common.cancel')}
|
||||
</Button>
|
||||
</Card>
|
||||
) : (
|
||||
/* Confirm leads and takes the full width: it is the action on almost every card,
|
||||
and three buttons across a 390px screen wraps the longest label. */
|
||||
<div className="space-y-2">
|
||||
<Button
|
||||
type="button"
|
||||
size="lg"
|
||||
block
|
||||
disabled={confirm.isPending}
|
||||
onClick={() => confirm.mutate(current.id)}
|
||||
>
|
||||
<Check aria-hidden className="size-4" />
|
||||
{t('bandeja.confirm')}
|
||||
</Button>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
disabled={reject.isPending}
|
||||
onClick={() => reject.mutate({ id: current.id, reason: 'other' })}
|
||||
>
|
||||
<X aria-hidden className="size-4" />
|
||||
{t('scan.result.discard')}
|
||||
</Button>
|
||||
<Button type="button" variant="secondary" onClick={() => setPicking(true)}>
|
||||
{t('scan.result.changeCat')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-1 text-xs text-[var(--text-muted)]">
|
||||
<p>{t('bandeja.swipeHint')}</p>
|
||||
<p className="hidden sm:block">{t('bandeja.keyboardHint')}</p>
|
||||
<p>
|
||||
{t('bandeja.autoConfirmNote', { days: 7 })}{' '}
|
||||
<Link href="/perfil" className="underline">
|
||||
{t('bandeja.autoConfirmLink')}
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { setRequestLocale } from 'next-intl/server';
|
||||
import { Bandeja } from './bandeja';
|
||||
|
||||
export default async function BandejaPage({ params }: { params: Promise<{ locale: string }> }) {
|
||||
const { locale } = await params;
|
||||
setRequestLocale(locale);
|
||||
return <Bandeja locale={locale} />;
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
import { setRequestLocale } from 'next-intl/server';
|
||||
import { DocumentDetail } from './document-detail';
|
||||
|
||||
export default async function DocumentPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ locale: string; id: string }>;
|
||||
}) {
|
||||
const { locale, id } = await params;
|
||||
setRequestLocale(locale);
|
||||
return <DocumentDetail id={id} locale={locale} />;
|
||||
}
|
||||
@@ -0,0 +1,188 @@
|
||||
'use client';
|
||||
|
||||
import type { Direction, DocStatus } from '@impuestos/contracts';
|
||||
import { formatGs, type Locale } from '@impuestos/i18n';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { FileText } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import { DocCard } from '@/components/doc-card';
|
||||
import { Button, buttonClasses } from '@/components/ui/button';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { EmptyState } from '@/components/ui/empty-state';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { Link } from '@/i18n/navigation';
|
||||
import { useT } from '@/i18n/t';
|
||||
import { api } from '@/lib/api';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
/** Flow E1: filterable list with a monthly total header. */
|
||||
export function DocumentsScreen({ locale }: { locale: string }) {
|
||||
const t = useT();
|
||||
const [direction, setDirection] = useState<Direction | undefined>();
|
||||
const [status, setStatus] = useState<DocStatus | undefined>();
|
||||
const [search, setSearch] = useState('');
|
||||
|
||||
const query = {
|
||||
...(direction ? { direction } : {}),
|
||||
...(status ? { status } : {}),
|
||||
...(search.trim() ? { q: search.trim() } : {}),
|
||||
};
|
||||
|
||||
const documents = useQuery({
|
||||
queryKey: ['documents', query],
|
||||
queryFn: ({ signal }) => api.listDocuments(query, signal),
|
||||
});
|
||||
|
||||
const items = documents.data?.items ?? [];
|
||||
const total = items.reduce((sum, doc) => sum + (doc.direction === 'purchase' ? doc.total : 0), 0);
|
||||
|
||||
const errors = useQuery({
|
||||
queryKey: ['documents', 'errors'],
|
||||
queryFn: ({ signal }) => api.listIngestErrors(signal),
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<h1 className="text-2xl font-semibold tracking-tight">{t('docs.title')}</h1>
|
||||
<Link href="/escanear" className={buttonClasses({ size: 'md' })}>
|
||||
{t('scan.fab')}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<input
|
||||
type="search"
|
||||
aria-label={t('common.search')}
|
||||
placeholder={t('common.search')}
|
||||
value={search}
|
||||
onChange={(event) => setSearch(event.target.value)}
|
||||
className="h-11 w-full rounded-2xl border bg-[var(--surface-raised)] px-4"
|
||||
/>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Filter label={t('docs.filter.all')} active={!direction && !status} onClick={() => {
|
||||
setDirection(undefined);
|
||||
setStatus(undefined);
|
||||
}} />
|
||||
<Filter
|
||||
label={t('manual.direction.purchase')}
|
||||
active={direction === 'purchase'}
|
||||
onClick={() => setDirection(direction === 'purchase' ? undefined : 'purchase')}
|
||||
/>
|
||||
<Filter
|
||||
label={t('manual.direction.sale')}
|
||||
active={direction === 'sale'}
|
||||
onClick={() => setDirection(direction === 'sale' ? undefined : 'sale')}
|
||||
/>
|
||||
<Filter
|
||||
label={t('status.needs_review')}
|
||||
active={status === 'needs_review'}
|
||||
onClick={() => setStatus(status === 'needs_review' ? undefined : 'needs_review')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{errors.data && errors.data.length > 0 ? (
|
||||
<Card className="space-y-2 border-attention">
|
||||
<h2 className="font-medium text-attention">{t('docs.errors.title')}</h2>
|
||||
<ul className="space-y-1 text-sm text-[var(--text-muted)]">
|
||||
{errors.data.map((error) => (
|
||||
<li key={error.id}>{error.message}</li>
|
||||
))}
|
||||
</ul>
|
||||
<Link href="/comprobantes/nuevo" className="text-sm text-accent-700 underline">
|
||||
{t('docs.errors.retry')}
|
||||
</Link>
|
||||
</Card>
|
||||
) : null}
|
||||
|
||||
{documents.isPending ? (
|
||||
<Card>
|
||||
<Skeleton name="doc-list-item" count={5} />
|
||||
</Card>
|
||||
) : null}
|
||||
|
||||
{documents.isError ? (
|
||||
<Card className="space-y-3">
|
||||
<p role="alert" className="text-sm">
|
||||
{t('common.error.generic')}
|
||||
</p>
|
||||
<Button type="button" onClick={() => void documents.refetch()}>
|
||||
{t('common.retry')}
|
||||
</Button>
|
||||
</Card>
|
||||
) : null}
|
||||
|
||||
{documents.data && items.length === 0 ? (
|
||||
<Card>
|
||||
<EmptyState
|
||||
icon={<FileText aria-hidden className="size-8" />}
|
||||
title={t('docs.empty')}
|
||||
action={
|
||||
<Link href="/escanear" className={buttonClasses({ size: 'lg' })}>
|
||||
{t('docs.emptyCta')}
|
||||
</Link>
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
) : null}
|
||||
|
||||
{items.length > 0 ? (
|
||||
<>
|
||||
<Card className="flex items-baseline justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-[var(--text-muted)]">{t('docs.monthTotal')}</p>
|
||||
<p className="tnum text-2xl font-semibold tracking-tight">{formatGs(total)}</p>
|
||||
</div>
|
||||
<p className="text-sm text-[var(--text-muted)]">
|
||||
{t('docs.count', { count: documents.data?.total ?? items.length })}
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<Card className="divide-y p-0">
|
||||
<ul>
|
||||
{items.map((document) => (
|
||||
<li key={document.id} className="px-6">
|
||||
<Link href={`/comprobantes/${document.id}`} className="block">
|
||||
<DocCard
|
||||
document={document}
|
||||
locale={locale as Locale}
|
||||
compact
|
||||
categoryLabel={t(
|
||||
`categories.${document.classification?.irpCategory ?? 'none'}` as const,
|
||||
)}
|
||||
statusLabel={t(`status.${document.status}` as const)}
|
||||
/>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Card>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Filter({
|
||||
label,
|
||||
active,
|
||||
onClick,
|
||||
}: {
|
||||
label: string;
|
||||
active: boolean;
|
||||
onClick: () => void;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
aria-pressed={active}
|
||||
onClick={onClick}
|
||||
className={cn(
|
||||
'rounded-full border px-3 py-1.5 text-sm transition-colors',
|
||||
active ? 'border-accent-600 bg-accent-50 text-accent-700' : 'bg-[var(--surface-raised)]',
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,233 @@
|
||||
'use client';
|
||||
|
||||
import type { Direction, SupplierRegimeHint } from '@impuestos/contracts';
|
||||
import { formatGsAmount } from '@impuestos/i18n';
|
||||
import { computeRucDv, parseRuc, validateRuc } from '@impuestos/rules';
|
||||
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { useRouter } from '@/i18n/navigation';
|
||||
import { useT } from '@/i18n/t';
|
||||
import { api } from '@/lib/api';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const REGIMES: SupplierRegimeHint[] = ['normal', 'resimple', 'unknown'];
|
||||
|
||||
/**
|
||||
* Flow B3. One screen, numeric keypads for the money, and the IVA split worked out from
|
||||
* the total with an override, because retyping a number the factura already prints is how
|
||||
* people give up halfway.
|
||||
*/
|
||||
export function ManualForm() {
|
||||
const t = useT();
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
const fileId = useSearchParams().get('fileId');
|
||||
|
||||
const [direction, setDirection] = useState<Direction>('purchase');
|
||||
const [ruc, setRuc] = useState('');
|
||||
const [emitterName, setEmitterName] = useState('');
|
||||
const [issueDate, setIssueDate] = useState(() => new Date().toISOString().slice(0, 10));
|
||||
const [total, setTotal] = useState('');
|
||||
const [allTenPercent, setAllTenPercent] = useState(true);
|
||||
const [regime, setRegime] = useState<SupplierRegimeHint>('unknown');
|
||||
const [override, setOverride] = useState<{ iva10: string; iva5: string; exenta: string } | null>(null);
|
||||
|
||||
const parsedRuc = parseRuc(ruc.trim());
|
||||
const rucValid = parsedRuc ? validateRuc(parsedRuc.base, parsedRuc.dv) : /^\d{1,8}$/.test(ruc.trim());
|
||||
const totalValue = total === '' ? 0 : Number(total);
|
||||
|
||||
// IVA is inside the printed total: at 10% the tax is a eleventh of it, at 5% a twenty first.
|
||||
const derived = allTenPercent
|
||||
? { iva10: Math.round(totalValue / 11), iva5: 0, exenta: 0 }
|
||||
: { iva10: 0, iva5: Math.round(totalValue / 21), exenta: 0 };
|
||||
const split = override
|
||||
? {
|
||||
iva10: Number(override.iva10 || '0'),
|
||||
iva5: Number(override.iva5 || '0'),
|
||||
exenta: Number(override.exenta || '0'),
|
||||
}
|
||||
: derived;
|
||||
|
||||
const save = useMutation({
|
||||
mutationFn: () => {
|
||||
const base = parsedRuc?.base ?? ruc.trim();
|
||||
return api.createManualDocument({
|
||||
...(fileId ? { fileId } : {}),
|
||||
direction,
|
||||
docKind: 'factura',
|
||||
emitterRuc: base,
|
||||
emitterDv: parsedRuc ? String(parsedRuc.dv) : String(computeRucDv(base)),
|
||||
emitterName: emitterName.trim(),
|
||||
issueDate,
|
||||
total: totalValue,
|
||||
amountIva10: split.iva10 > 0 ? totalValue - split.iva10 - split.exenta : 0,
|
||||
amountIva5: split.iva5 > 0 ? totalValue - split.iva5 - split.exenta : 0,
|
||||
amountExenta: split.exenta,
|
||||
iva10: split.iva10,
|
||||
iva5: split.iva5,
|
||||
supplierRegimeHint: regime,
|
||||
});
|
||||
},
|
||||
onSuccess: async () => {
|
||||
await queryClient.invalidateQueries({ queryKey: ['documents'] });
|
||||
router.push('/bandeja');
|
||||
},
|
||||
});
|
||||
|
||||
const canSave = rucValid && emitterName.trim().length > 0 && totalValue > 0;
|
||||
|
||||
return (
|
||||
<div className="space-y-4 py-4">
|
||||
<h1 className="text-2xl font-semibold tracking-tight">{t('manual.title')}</h1>
|
||||
{fileId ? <p className="text-sm text-[var(--text-muted)]">{t('scan.needsManual')}</p> : null}
|
||||
|
||||
<Card className="space-y-5">
|
||||
<fieldset className="space-y-2">
|
||||
<legend className="text-sm font-medium text-[var(--text-muted)]">
|
||||
{t('manual.direction')}
|
||||
</legend>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{(['purchase', 'sale'] as const).map((value) => (
|
||||
<button
|
||||
key={value}
|
||||
type="button"
|
||||
aria-pressed={direction === value}
|
||||
onClick={() => setDirection(value)}
|
||||
className={cn(
|
||||
'rounded-2xl border p-3 text-sm transition-colors',
|
||||
direction === value ? 'border-accent-600 bg-accent-50' : 'bg-[var(--surface-raised)]',
|
||||
)}
|
||||
>
|
||||
{t(`manual.direction.${value}` as const)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="ruc">{t('manual.emitterRuc')}</Label>
|
||||
<Input
|
||||
id="ruc"
|
||||
inputMode="numeric"
|
||||
value={ruc}
|
||||
aria-invalid={ruc.length > 0 && !rucValid}
|
||||
onChange={(event) => setRuc(event.target.value)}
|
||||
/>
|
||||
{ruc.length > 0 && !rucValid ? (
|
||||
<p role="alert" className="text-sm text-overdue">
|
||||
{t('landing.invalidDoc')}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="emitterName">{t('manual.emitterName')}</Label>
|
||||
<Input
|
||||
id="emitterName"
|
||||
value={emitterName}
|
||||
onChange={(event) => setEmitterName(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="issueDate">{t('manual.date')}</Label>
|
||||
<Input
|
||||
id="issueDate"
|
||||
type="date"
|
||||
value={issueDate}
|
||||
onChange={(event) => setIssueDate(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="total">{t('manual.total')}</Label>
|
||||
<Input
|
||||
id="total"
|
||||
inputMode="numeric"
|
||||
className="tnum text-2xl"
|
||||
value={total === '' ? '' : formatGsAmount(totalValue)}
|
||||
onChange={(event) => setTotal(event.target.value.replace(/\D/g, ''))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<label className="flex items-center justify-between gap-4">
|
||||
<span className="text-sm">{t('manual.ivaSplit.q')}</span>
|
||||
<Switch
|
||||
checked={allTenPercent}
|
||||
onCheckedChange={(next) => {
|
||||
setAllTenPercent(next);
|
||||
setOverride(null);
|
||||
}}
|
||||
label={t('manual.ivaSplit.q')}
|
||||
/>
|
||||
</label>
|
||||
<p className="text-sm text-[var(--text-muted)] text-pretty">{t('manual.ivaSplit.help')}</p>
|
||||
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{(
|
||||
[
|
||||
['iva10', t('manual.iva10')],
|
||||
['iva5', t('manual.iva5')],
|
||||
['exenta', t('manual.exenta')],
|
||||
] as const
|
||||
).map(([key, label]) => (
|
||||
<div key={key} className="space-y-1">
|
||||
<Label htmlFor={key} className="text-xs">
|
||||
{label}
|
||||
</Label>
|
||||
<Input
|
||||
id={key}
|
||||
inputMode="numeric"
|
||||
className="tnum"
|
||||
value={formatGsAmount(split[key])}
|
||||
onChange={(event) => {
|
||||
const digits = event.target.value.replace(/\D/g, '');
|
||||
setOverride({
|
||||
iva10: String(split.iva10),
|
||||
iva5: String(split.iva5),
|
||||
exenta: String(split.exenta),
|
||||
[key]: digits,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="regime">{t('manual.regime')}</Label>
|
||||
<select
|
||||
id="regime"
|
||||
value={regime}
|
||||
onChange={(event) => setRegime(event.target.value as SupplierRegimeHint)}
|
||||
className="h-12 w-full rounded-2xl border bg-[var(--surface-raised)] px-3 text-base"
|
||||
>
|
||||
{REGIMES.map((value) => (
|
||||
<option key={value} value={value}>
|
||||
{t(`manual.regime.${value}` as const)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{save.isError ? (
|
||||
<p role="alert" className="text-sm text-overdue">
|
||||
{t('common.error.generic')}
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
<Button type="button" size="lg" block disabled={!canSave || save.isPending} onClick={() => save.mutate()}>
|
||||
{save.isPending ? t('common.saving') : t('manual.submit')}
|
||||
</Button>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
import { setRequestLocale } from 'next-intl/server';
|
||||
import { Suspense } from 'react';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { ManualForm } from './manual-form';
|
||||
|
||||
export default async function ManualPage({ params }: { params: Promise<{ locale: string }> }) {
|
||||
const { locale } = await params;
|
||||
setRequestLocale(locale);
|
||||
return (
|
||||
<Suspense
|
||||
fallback={
|
||||
<Card className="my-4">
|
||||
<Skeleton name="profile-section" />
|
||||
</Card>
|
||||
}
|
||||
>
|
||||
<ManualForm />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { setRequestLocale } from 'next-intl/server';
|
||||
import { DocumentsScreen } from './documents-screen';
|
||||
|
||||
export default async function DocumentsPage({ params }: { params: Promise<{ locale: string }> }) {
|
||||
const { locale } = await params;
|
||||
setRequestLocale(locale);
|
||||
return <DocumentsScreen locale={locale} />;
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
import { setRequestLocale } from 'next-intl/server';
|
||||
import { ScanScreen } from './scan-screen';
|
||||
|
||||
export default async function ScanPage({ params }: { params: Promise<{ locale: string }> }) {
|
||||
const { locale } = await params;
|
||||
setRequestLocale(locale);
|
||||
return <ScanScreen locale={locale} />;
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -44,11 +44,10 @@ export default async function InicioPage({ params }: { params: Promise<{ locale:
|
||||
body={t('home.firstRun.body')}
|
||||
action={
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
{/* Scanning and manual entry arrive with the ingestion pipeline in phase 3. */}
|
||||
<Link href="/comprobantes" className={buttonClasses({ size: 'lg' })}>
|
||||
<Link href="/escanear" className={buttonClasses({ size: 'lg' })}>
|
||||
{t('home.firstRun.scan')}
|
||||
</Link>
|
||||
<Link href="/comprobantes" className="text-sm text-accent-700 hover:underline">
|
||||
<Link href="/comprobantes/nuevo" className="text-sm text-accent-700 hover:underline">
|
||||
{t('home.firstRun.manual')}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user