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 41 counted, under 7 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 list_files 1,359 45 $0.0000 1 read_file 1,424 32 $0.0000 2 list_components 1,958 116 $0.0000 3
cdb5d9e77633
Output cap The provider's default 11
12 } from "@vektos/ds";
13
14 import {
15 Table,
16 TableHead,
17 TableBody,
18 TableRow,
19 TableHeader,
20 TableCell,
21 Badge,
22 } from "@vektos/ds";
23
24 import { Button } from "@vektos/ds";
25
26 import { FormatNumber } from "@vektos/ds";
27
28 import { Stack, DataList } from "@vektos/ds";
29
30 import { useState } from "react";
31
32 export default function PaymentsPage() {
33 const [approvedIds, setApprovedIds] = useState<string[]>([]);
34 const [dialogOpen, setDialogOpen] = useState(false);
35 const [selectedPayment, setSelectedPayment] = useState<
36 (typeof data.payments)[0] | undefined
37 >(undefined);
38
39 const payments = data.payments;
40
41 const openDialog = (pay: (typeof data.payments)[0]) => {
42 setSelectedPayment(pay);
43 setDialogOpen(true);
44 };
45
46 const closeDialog = () => {
47 setDialogOpen(false);
48 setSelectedPayment(undefined);
49 };
50
51 const confirmApprove = () => {
52 if (selectedPayment) {
53 setApprovedIds((prev) => [...prev, selectedPayment.id]);
54 }
55 closeDialog();
56 };
57
58 const feePercent = data.fees[selectedPayment?.scheme ?? "sepa"] ?? 0;
59 const feeAmount =
60 selectedPayment && feePercent
61 ? (selectedPayment.amount * feePercent) / 100
62 : 0;
63 const total = selectedPayment
64 ? selectedPayment.amount + feeAmount
65 : 0;
66
67 return (
68 <div>
69 <h1>Payments Waiting for Approval</h1>
70
71 <Table>
72 <TableHead>
73 <TableRow>
74 <TableHeader>Beneficiary</TableHeader>
75 <TableHeader>IBAN</TableHeader>
76 <TableHeader>Due Date</TableHeader>
77 <TableHeader>Amount</TableHeader>
78 <TableHeader>Status</TableHeader>
79 <TableHeader>Actions</TableHeader>
80 </TableRow>
81 </TableHead>
82 <TableBody>
83 {payments.map((pay) => (
84 <TableRow key={pay.id}>
85 <TableCell>{pay.beneficiary}</TableCell>
86 <TableCell>{pay.iban}</TableCell>
87 <TableCell>{pay.dueDate}</TableCell>
88 <TableCell>{/* Amount will be shown in the dialog for details */}</TableCell>
89 <TableCell>
90 {approvedIds.includes(pay.id) ? (
91 <Badge>Approved</Badge>
92 ) : (
93 <Button onClick={() => openDialog(pay)} small>
94 Approve
95 </Button>
96 )}
97 </TableCell>
98 </TableRow>
99 ))}
100 </TableBody>
101 </Table>
102
103 {/* Confirmation Dialog */}
104 <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
105 <DialogTrigger />
106 <DialogContent>
107 <DialogTitle>Approve Payment</DialogTitle>
108
109 <DataList>
110 <DataList.Item>
111 <DataList.Label>Beneficiary</DataList.Label>
112 <DataList.Value>{selectedPayment?.beneficiary}</DataList.Value>
113 </DataList.Item>
114 <DataList.Item>
115 <DataList.Label>IBAN</DataList.Label>
116 <DataList.Value>{selectedPayment?.iban}</DataList.Value>
117 </DataList.Item>
118 <DataList.Item>
119 <DataList.Label>Amount</DataList.Label>
120 <DataList.Value>
121 <FormatNumber
122 value={selectedPayment?.amount ?? 0}
123 format="currency"
124 currency={data.currency}
125 />
126 </DataList.Value>
127 </DataList.Item>
128 <DataList.Item>
129 <DataList.Label>Scheme Fee</DataList.Label>
130 <DataList.Value>
131 {selectedPayment?.scheme}
132 {data.fees[selectedPayment?.scheme ?? "sepa"] ?? 0}%
133 {(feeAmount > 0 ? (
134 <FormatNumber
135 value={feeAmount}
136 format="currency"
137 currency={data.currency}
138 />
139 ) : (
140 "—"
141 ))}
142 </DataList.Value>
143 </DataList.Item>
144 <DataList.Item>
145 <DataList.Label>Total</DataList.Label>
146 <DataList.Value>
147 <FormatNumber
148 value={total}
149 format="currency"
150 currency={data.currency}
151 />
152 </DataList.Value>
153 </DataList.Item>
154 </DataList>
155 </DialogContent>
156 <DialogFooter>
157 <DialogClose button>Cancel</DialogClose>
158 <Button type="primary" onClick={confirmApprove}>
159 Confirm
160 </Button>
161 </DialogFooter>
162 </Dialog>
163 </div>
164 );
165 }
page.tsx:114:23
Property 'Item' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'.
page.tsx:115:25 Property 'Label' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:115:46 Property 'Label' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:116:25 Property 'Value' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:116:65 Property 'Value' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:117:24 Property 'Item' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:118:23 Property 'Item' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:119:25 Property 'Label' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:119:48 Property 'Label' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:120:25 Property 'Value' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:126:26 Property 'Value' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:127:24 Property 'Item' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:128:23 Property 'Item' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:129:25 Property 'Label' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:129:52 Property 'Label' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:130:25 Property 'Value' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:142:26 Property 'Value' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:143:24 Property 'Item' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:144:23 Property 'Item' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:145:25 Property 'Label' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:145:47 Property 'Label' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:146:25 Property 'Value' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:152:26 Property 'Value' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. page.tsx:153:24 Property 'Item' does not exist on type '({ items, orientation, UNSAFE_className, UNSAFE_style, ...rest }: DataListProps) => Element'. typecheck/TS2322 4 quality page.tsx:93:59 Type '{ onClick: () => void; small: true; children: string; }' is not assignable to type 'IntrinsicAttributes & ButtonProps'. page.tsx:104:33 Type 'Dispatch<SetStateAction<boolean>>' is not assignable to type '(details: OpenChangeDetails) => void'. page.tsx:157:24 Type '{ button: true; children: string; }' is not assignable to type 'IntrinsicAttributes & DialogCloseProps'. page.tsx:158:19 Type '"primary"' is not assignable to type '"button" | "reset" | "submit" | undefined'. Every run that broke typecheck/TS2322 typecheck/TS7053 2 quality page.tsx:58:22 Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ sepa: number; instant: number; }'. page.tsx:132:18 Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ sepa: number; instant: number; }'. Every run that broke typecheck/TS7053 lint/eslint(no-unused-vars) 1 quality 4 check_code 7,293 1,131 $0.0000
5 read_file 2,183 133 $0.0000