MichilisandClaude Opus 5
6620650e9e
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>
84 lines
3.0 KiB
TypeScript
84 lines
3.0 KiB
TypeScript
import type { FormValueDto } from '@impuestos/contracts';
|
|
import { formatGs } from '@impuestos/i18n';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
/**
|
|
* The declaration laid out the way the official form is, casilla by casilla, so the
|
|
* numbers can be transcribed straight across into Marangatu.
|
|
*
|
|
* The labels are Spanish in every locale, deliberately: this mirrors the DNIT form, and a
|
|
* form whose labels have been translated is harder to copy from, not easier
|
|
* (COPY.md multi-language policy). The caption around it says so in the reader's language.
|
|
*/
|
|
export function FormPreview({
|
|
formCode,
|
|
period,
|
|
values,
|
|
draft,
|
|
labels,
|
|
}: {
|
|
formCode: string;
|
|
period: string;
|
|
values: FormValueDto[];
|
|
draft: boolean;
|
|
labels: { title: string; spanishNote: string; casilla: string; concept: string; amount: string; draftMark: string };
|
|
}) {
|
|
// The official designation, Spanish in every locale: COPY.md keeps "Formulario 120"
|
|
// and "515" as-is in English, and this block mirrors the DNIT form.
|
|
const officialTitle = `Formulario ${formCode}`;
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<div className="flex flex-wrap items-baseline justify-between gap-2">
|
|
<h2 className="font-semibold tracking-tight">{labels.title}</h2>
|
|
<span className="text-xs text-[var(--text-muted)]">{labels.spanishNote}</span>
|
|
</div>
|
|
|
|
<div className="relative overflow-hidden rounded-2xl border bg-[var(--surface-raised)]">
|
|
{draft ? (
|
|
<span
|
|
aria-hidden
|
|
className="pointer-events-none absolute inset-0 flex items-center justify-center text-5xl font-bold tracking-widest text-overdue/10 -rotate-12"
|
|
>
|
|
{labels.draftMark}
|
|
</span>
|
|
) : null}
|
|
|
|
<div className="border-b px-5 py-4">
|
|
<p className="font-semibold tracking-tight">{officialTitle}</p>
|
|
<p className="tnum text-sm text-[var(--text-muted)]">{period}</p>
|
|
</div>
|
|
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b text-left text-xs text-[var(--text-muted)]">
|
|
<th scope="col" className="px-5 py-2 font-medium">
|
|
{labels.casilla}
|
|
</th>
|
|
<th scope="col" className="py-2 font-medium">
|
|
{labels.concept}
|
|
</th>
|
|
<th scope="col" className="px-5 py-2 text-right font-medium">
|
|
{labels.amount}
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{values.map((value) => (
|
|
<tr key={value.casilla} className="border-b last:border-0">
|
|
<td className="px-5 py-2.5 font-mono text-xs text-[var(--text-muted)]">
|
|
{value.casilla}
|
|
</td>
|
|
<td className="py-2.5">{value.label}</td>
|
|
<td className={cn('tnum px-5 py-2.5 text-right font-medium')}>
|
|
{formatGs(value.amount)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|