Runs / payment-approval Batch Runs from different design-system versions should not be compared.
page.tsx As the agent left it; marked lines broke a rule.
Violations 4 counted, under 4 rules. “Not counted” marks a compiler error that restates a design-system violation, “Ignored” one the agent silenced with a comment.
Steps One row per model call, with the tools it asked for. An agent that reads the guidelines before writing shows it here; what a checker or submit_view answered is under its call.
Step Tools Tokens in Tokens out Cost 0 read_file 1,376 40 $0.0000 1 list_components 1,918 80 $0.0000 2 get_component 4,447 622 $0.0000 3
cdb5d9e77633
Output cap The provider's default 12 Button,
13 Badge,
14 Table,
15 TableHead,
16 TableBody,
17 TableRow,
18 TableHeader,
19 TableCell,
20 FormatNumber,
21 } from "@vektos/ds";
22
23 import data from "./fixture.json";
24
25 type Payment = {
26 id: string;
27 beneficiary: string;
28 iban: string;
29 amount: number;
30 dueDate: string;
31 scheme: keyof typeof data.fees;
32 reference: string;
33 };
34
35 const fees = data.fees;
36 const payments: Payment[] = data.payments;
37
38 const [approvedIds, setApprovedIds] = React.useState<string[]>([]);
39 const [openDialogId, setOpenDialogId] = React.useState<string | null>(null);
40
41 const openDialog = (id: string) => {
42 setOpenDialogId(id);
43 };
44
45 const closeDialog = () => {
46 setOpenDialogId(null);
47 };
48
49 const confirmApprove = (id: string, scheme: Payment["scheme"], amount: number) => {
50 setApprovedIds((prev) => [...new Set([...prev, id])]);
51 closeDialog();
52 };
53
54 const getFeeAmount = (amount: number, scheme: Payment["scheme"]) => {
55 const percent = fees[scheme] ?? 0;
56 return (amount * percent) / 100;
57 };
58
59 const TotalPage = () => {
60 return (
61 <>
62 <h1 data-testid="payments-title">Payments Waiting for Approval</h1>
63
64 <Table aria-label="Payments awaiting approval">
65 <TableHead>
66 <TableRow>
67 <TableHeader>Beneficiary</TableHeader>
68 <TableHeader>IBAN</TableHeader>
69 <TableHeader>Due Date</TableHeader>
70 <TableHeader>Amount</TableHeader>
71 <TableHeader></TableHeader>
72 </TableRow>
73 </TableHead>
74 <TableBody>
75 {payments.map((p) => (
76 <TableRow key={p.id}>
77 <TableCell>{p.beneficiary}</TableCell>
78 <TableCell>{p.iban}</TableCell>
79 <TableCell>{p.dueDate}</TableCell>
80 <TableCell>
81 <FormatNumber value={p.amount} format="currency" currency={data.currency} />
82 </TableCell>
83 <TableCell>
84 {approvedIds.includes(p.id) ? (
85 <Badge tone="success">Approved</Badge>
86 ) : (
87 <Button
88 variant="outline"
89 onClick={() => openDialog(p.id)}
90 >
91 Approve
92 </Button>
93 )}
94 </TableCell>
95 </TableRow>
96 ))}
97 </TableBody>
98 </Table>
99
100 {/* Confirmation dialog */}
101 {openDialogId && (
102 <Dialog
103 open={openDialogId !== null}
104 onOpenChange={setOpenDialogId}
105 role="alertdialog"
106 >
107 <DialogContent
108 title="Approve payment"
109 description={`Are you sure you want to approve the payment to ${openDialogId}?`}
110 >
111 <div data-testid="payment-summary">
112 <p>
113 <strong>Beneficiary:</strong> {" "}
114 {payments.find((p) => p.id === openDialogId)?.beneficiary}
115 </p>
116 <p>
117 <strong>IBAN:</strong> {" "}
118 {payments.find((p) => p.id === openDialogId)?.iban}
119 </p>
120 <p>
121 <strong>Amount:</strong> {" "}
122 <FormatNumber
123 value={payments.find((p) => p.id === openDialogId)?.amount ?? 0}
124 format="currency"
125 currency={data.currency}
126 />
127 </p>
128 <p>
129 <strong>Fee ({payments.find((p) => p.id === openDialogId)?.scheme}):</strong>
130 {" "}
131 <FormatNumber
132 value={getFeeAmount(
133 payments.find((p) => p.id === openDialogId)?.amount ?? 0,
134 payments.find((p) => p.id === openDialogId)?.scheme ?? "sepa"
135 )format="currency"
136 currency={data.currency}
137 />
138 </p>
139 <p>
140 <strong>Total:</strong> {" "}
141 <FormatNumber
142 value={
143 (payments.find((p) => p.id === openDialogId)?.amount ?? 0) +
144 (getFeeAmount(
145 payments.find((p) => p.id === openDialogId)?.amount ?? 0,
146 payments.find((p) => p.id === openDialogId)?.scheme ?? "sepa"
147 ) ?? 0)
148 }
149 format="currency"
150 currency={data.currency}
151 />
152 </p>
153 </div>
154
155 <DialogFooter>
156 <DialogClose asChild>
157 <Button variant="outline">Cancel</Button>
158 </DialogClose>
159 <Button onClick={() => confirmApprove(openDialogId!, "", 0)}>Confirm</Button>
160 </DialogFooter>
161 </DialogContent>
162 </Dialog>
163 )}
164 </>
165 );
166 };
167
168 export default TotalPage;
typecheck/TS1005 1 quality
4 write_file 3,003 1,178 $0.0000
5 write_file 4,208 1,579 $0.0000
6 check_code 1,622 1,195 $0.0000