phase-5: declarations, from generated numbers to a PDF you file yourself
Formulario 120 and 515 assembly, the review screen, approval, the PDF, and the guided checklist that walks the user through presenting it in Marangatu. Approval is a promise about what the user actually saw: the numbers are recomputed on the way in, and if the documents moved since the declaration was generated the answer is a 409 with the fresh figures stored as a draft, not a silent approval of numbers nobody read. An approved declaration is never regenerated or invalidated. Editing, confirming, rejecting or reclassifying a document flips any ready declaration covering its period back to draft, which is what the dashboard reads to stop offering it for review. The PDF is rendered once and cached against the declaration, so two downloads are byte for byte the same document; every write that changes the numbers clears the cache. Approval pre-renders it, and the route renders on demand, so a failed job costs a wait rather than a missing file. It stays Spanish in both locales, like the form it mirrors, and carries a BORRADOR watermark until it is approved. The seeded declarations are computed through the same code path the product uses, so their figures agree with the documents behind them. Three defects the screenshots caught: the floating scan button swallowed the tap meant for Aprobar on a phone, the summary breakdown reused labels meant for other screens, and five tab labels collided at 390px. Tests that can avoid depending on a fresh seed now do; the ones that cannot say so in the assertion rather than timing out. db:reset warns that the API has to be stopped first, having learned that the hard way. 293 vitest tests, 59 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
5dc284c5f2
commit
6620650e9e
@@ -0,0 +1,248 @@
|
||||
'use client';
|
||||
|
||||
import { isApiError, type DeclarationDto } from '@impuestos/contracts';
|
||||
import { formatDateLong, formatGs, formatGsAmount, type Locale } from '@impuestos/i18n';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { useRef, useState } from 'react';
|
||||
import { FormPreview } from '@/components/form-preview';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { useT } from '@/i18n/t';
|
||||
import { api } from '@/lib/api';
|
||||
import { FilingChecklist } from './filing-checklist';
|
||||
|
||||
/**
|
||||
* Flow D2 and D3. The human summary first, the official layout underneath, and one
|
||||
* primary action. Nothing here files anything: the checklist that follows approval is how
|
||||
* the user presents it themselves.
|
||||
*/
|
||||
export function DeclarationDetail({ id, locale }: { id: string; locale: string }) {
|
||||
const t = useT();
|
||||
const queryClient = useQueryClient();
|
||||
const confirmDialog = useRef<HTMLDialogElement>(null);
|
||||
const [staleWarning, setStaleWarning] = useState<string | null>(null);
|
||||
|
||||
const declaration = useQuery({
|
||||
queryKey: ['declarations', id],
|
||||
queryFn: ({ signal }) => api.getDeclaration(id, signal),
|
||||
retry: (count, error) => !isApiError(error) && count < 1,
|
||||
});
|
||||
|
||||
const approve = useMutation({
|
||||
mutationFn: () => api.approveDeclaration(id),
|
||||
onSuccess: async () => {
|
||||
setStaleWarning(null);
|
||||
confirmDialog.current?.close();
|
||||
await queryClient.invalidateQueries({ queryKey: ['declarations'] });
|
||||
await queryClient.invalidateQueries({ queryKey: ['dashboard'] });
|
||||
},
|
||||
onError: (error) => {
|
||||
confirmDialog.current?.close();
|
||||
// A 409 means the documents moved: the numbers on screen are stale, not wrong.
|
||||
setStaleWarning(isApiError(error) ? error.message : t('common.error.generic'));
|
||||
void queryClient.invalidateQueries({ queryKey: ['declarations', id] });
|
||||
},
|
||||
});
|
||||
|
||||
if (declaration.isPending) {
|
||||
return (
|
||||
<Card className="my-4">
|
||||
<Skeleton name="declaration-summary" />
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (declaration.isError || !declaration.data) {
|
||||
const missing = isApiError(declaration.error) && declaration.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 declaration.refetch()}>
|
||||
{t('common.retry')}
|
||||
</Button>
|
||||
) : null}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const data = declaration.data;
|
||||
const approved = data.status === 'approved';
|
||||
// Spanish in every locale, like the form it names (COPY.md multi-language policy).
|
||||
const officialTitle = `Formulario ${data.formCode}`;
|
||||
|
||||
return (
|
||||
<div className="space-y-4 py-4 pb-28">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold tracking-tight">{officialTitle}</h1>
|
||||
<p className="tnum text-sm text-[var(--text-muted)]">{data.period}</p>
|
||||
</div>
|
||||
|
||||
{staleWarning ? (
|
||||
<Card className="border-attention">
|
||||
<p role="alert" className="text-sm text-attention text-pretty">
|
||||
{staleWarning}
|
||||
</p>
|
||||
</Card>
|
||||
) : null}
|
||||
|
||||
<Card className="space-y-3">
|
||||
<h2 className="font-semibold tracking-tight">{t('decl.summary.title')}</h2>
|
||||
<p className="text-lg text-pretty">{humanSummary(data, t)}</p>
|
||||
<Breakdown declaration={data} />
|
||||
</Card>
|
||||
|
||||
<FormPreview
|
||||
formCode={data.formCode}
|
||||
period={data.period}
|
||||
values={data.values}
|
||||
draft={!approved}
|
||||
labels={{
|
||||
title: t('decl.preview.title'),
|
||||
spanishNote: t('decl.preview.spanishNote'),
|
||||
casilla: t('decl.preview.casilla'),
|
||||
concept: t('decl.preview.concept'),
|
||||
amount: t('decl.amount'),
|
||||
draftMark: t('decl.preview.draftMark'),
|
||||
}}
|
||||
/>
|
||||
|
||||
{approved ? (
|
||||
<FilingChecklist declaration={data} locale={locale as Locale} />
|
||||
) : (
|
||||
<>
|
||||
{/* Sticky footer: the primary action stays reachable however long the form is. */}
|
||||
<div className="fixed inset-x-0 bottom-16 z-10 border-t bg-[var(--surface-raised)] px-5 py-3">
|
||||
<div className="mx-auto flex max-w-2xl gap-2">
|
||||
<a
|
||||
href={api.declarationPdfUrl(data.id)}
|
||||
download
|
||||
className="flex h-11 flex-1 items-center justify-center rounded-full border text-sm font-medium"
|
||||
>
|
||||
{t('decl.downloadPdf')}
|
||||
</a>
|
||||
<Button
|
||||
type="button"
|
||||
className="flex-1"
|
||||
onClick={() => confirmDialog.current?.showModal()}
|
||||
>
|
||||
{t('decl.approve')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<dialog
|
||||
ref={confirmDialog}
|
||||
aria-label={t('decl.approve.confirmTitle')}
|
||||
className="m-auto w-[min(28rem,calc(100vw-2rem))] rounded-2xl border bg-[var(--surface-raised)] p-6 text-[var(--text)] backdrop:bg-black/40"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-lg font-semibold tracking-tight">
|
||||
{t('decl.approve.confirmTitle')}
|
||||
</h2>
|
||||
<p className="text-sm text-[var(--text-muted)] text-pretty">
|
||||
{t('decl.approve.confirmBody', {
|
||||
form: data.formCode,
|
||||
period: data.period,
|
||||
amount: formatGsAmount(payable(data)),
|
||||
})}
|
||||
</p>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
onClick={() => confirmDialog.current?.close()}
|
||||
>
|
||||
{t('common.cancel')}
|
||||
</Button>
|
||||
<Button type="button" disabled={approve.isPending} onClick={() => approve.mutate()}>
|
||||
{approve.isPending ? t('common.saving') : t('decl.approve')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
</>
|
||||
)}
|
||||
|
||||
{approved && data.approvedAt ? (
|
||||
<p className="text-center text-xs text-[var(--text-muted)]">
|
||||
{t('decl.approvedAt', { date: formatDateLong(locale as Locale, data.approvedAt.slice(0, 10)) })}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
type Translate = ReturnType<typeof useT>;
|
||||
|
||||
/** FLOWS.md D2: the sentence comes before the form, always. */
|
||||
function humanSummary(declaration: DeclarationDto, t: Translate): string {
|
||||
const summary = declaration.summary;
|
||||
|
||||
if (declaration.formCode === '120') {
|
||||
const aPagar = Number(summary['aPagar'] ?? 0);
|
||||
const result =
|
||||
aPagar > 0
|
||||
? t('decl.f120.toPay', { amount: formatGsAmount(aPagar) })
|
||||
: t('decl.f120.inFavor', { amount: formatGsAmount(Number(summary['saldoAFavor'] ?? 0)) });
|
||||
|
||||
return t('decl.f120.summary', {
|
||||
sales: formatGsAmount(Number(summary['sales'] ?? 0)),
|
||||
purchases: formatGsAmount(Number(summary['purchases'] ?? 0)),
|
||||
result,
|
||||
});
|
||||
}
|
||||
|
||||
return t('decl.f515.summary', {
|
||||
income: formatGsAmount(Number(summary['grossIncome'] ?? 0)),
|
||||
deductions: formatGsAmount(Number(summary['totalDeductions'] ?? 0)),
|
||||
tax: formatGsAmount(Number(summary['tax'] ?? 0)),
|
||||
});
|
||||
}
|
||||
|
||||
function Breakdown({ declaration }: { declaration: DeclarationDto }) {
|
||||
const t = useT();
|
||||
const summary = declaration.summary;
|
||||
|
||||
const rows: [string, number][] =
|
||||
declaration.formCode === '120'
|
||||
? [
|
||||
[t('decl.breakdown.debito'), Number(summary['debito'] ?? 0)],
|
||||
[t('decl.breakdown.credito'), Number(summary['credito'] ?? 0)],
|
||||
[t('decl.breakdown.saldoAnterior'), Number(summary['saldoAnterior'] ?? 0)],
|
||||
]
|
||||
: [
|
||||
[t('profile.income'), Number(summary['grossIncome'] ?? 0)],
|
||||
[t('docs.detail.deductible'), Number(summary['totalDeductions'] ?? 0)],
|
||||
[t('decl.f515.netIncome'), Number(summary['netIncome'] ?? 0)],
|
||||
];
|
||||
|
||||
const capExcess = Number(summary['capExcess'] ?? 0);
|
||||
|
||||
return (
|
||||
<dl className="space-y-2 text-sm">
|
||||
{rows.map(([label, amount]) => (
|
||||
<div key={label} className="flex items-baseline justify-between gap-4">
|
||||
<dt className="text-[var(--text-muted)]">{label}</dt>
|
||||
<dd className="tnum font-medium">{formatGs(amount)}</dd>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{capExcess > 0 ? (
|
||||
<p className="pt-2 text-[var(--text-muted)] text-pretty">
|
||||
{t('decl.f515.capNote', { amount: formatGsAmount(capExcess) })}
|
||||
</p>
|
||||
) : null}
|
||||
</dl>
|
||||
);
|
||||
}
|
||||
|
||||
function payable(declaration: DeclarationDto): number {
|
||||
const summary = declaration.summary;
|
||||
return declaration.formCode === '120'
|
||||
? Number(summary['aPagar'] ?? 0) || Number(summary['saldoAFavor'] ?? 0)
|
||||
: Number(summary['tax'] ?? 0);
|
||||
}
|
||||
Reference in New Issue
Block a user