Runs / kyc-form Batch Runs from different design-system versions should not be compared.
project-root/page.tsx As the agent left it; marked lines broke a rule.
Violations None. The run followed every rule that was checked.
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,390 48 $0.0000 1 list_components 1,705 142 $0.0000 2 write_file 4,296 2,131 $0.0000 3
cdb5d9e77633
Output cap 20,000 tokens a step 12
13 Text,
14 Card,
15 CardHeader,
16 CardBody,
17 CardFooter,
18 Heading,
19 } from "@vektos/ds";
20
21 type FieldErrors = {
22 dateOfBirth?: string;
23 nationality?: string;
24 countryOfResidence?: string;
25 taxIdentificationNumber?: string;
26 identityDocumentType?: string;
27 documentNumber?: string;
28 politicallyExposedPerson?: string;
29 };
30
31 interface IdentityFormProps {
32 customer: typeof data.customer;
33 countries: typeof data.countries;
34 documentTypes: typeof data.documentTypes;
35 }
36
37 export default function IdentityVerificationPage() {
38 const [form, setForm] = useState<{
39 dateOfBirth: string;
40 nationality: string;
41 countryOfResidence: string;
42 taxIdentificationNumber: string;
43 identityDocumentType: string;
44 documentNumber: string;
45 politicallyExposedPerson: "yes" | "no";
46 }>({
47 dateOfBirth: "",
48 nationality: "",
49 countryOfResidence: "",
50 taxIdentificationNumber: "",
51 identityDocumentType: "",
52 documentNumber: "",
53 politicallyExposedPerson: "no",
54 });
55
56 const [errors, setErrors] = useState<FieldErrors>({});
57 const [submitted, setSubmitted] = useState<boolean>(false);
58
59 const countries = data.countries;
60 const documentTypes = data.documentTypes;
61 const { firstName, lastName, email } = data.customer;
62
63 const handleChange = (
64 e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
65 field: keyof typeof form
66 ) => {
67 const value =
68 e.target.type === "checkbox"
69 ? (e.target as HTMLInputElement).checked
70 ? "yes"
71 : "no"
72 : (e.target as HTMLInputElement | HTMLSelectElement).value;
73 setForm((prev) => ({ ...prev, [field]: String(value) }));
74 // clear error when user starts typing
75 setErrors((prev) => {
76 const { [field]: _, ...rest } = prev;
77 return rest;
78 });
79 };
80
81 const handleSubmit = (e: React.FormEvent) => {
82 e.preventDefault();
83 const newErrors: FieldErrors = {};
84
85 if (!form.dateOfBirth) newErrors.dateOfBirth = "Required";
86 if (!form.nationality) newErrors.nationality = "Required";
87 if (!form.countryOfResidence) newErrors.countryOfResidence = "Required";
88 if (!form.taxIdentificationNumber)
89 newErrors.taxIdentificationNumber = "Required";
90 if (!form.identityDocumentType) newErrors.identityDocumentType = "Required";
91 if (!form.documentNumber) newErrors.documentNumber = "Required";
92 if (form.politicallyExposedPerson === "no") newErrors.politicallyExposedPerson = "Required";
93
94 setErrors(newErrors);
95 if (Object.keys(newErrors).length === 0) {
96 setSubmitted(true);
97 }
98 };
99
100 if (submitted) {
101 return (
102 <Card>
103 <CardHeader>
104 <Heading size="2">Details being reviewed</Heading>
105 </CardHeader>
106 <CardBody>
107 <Text>We are reviewing the identity verification details you provided.</Text>
108 </CardBody>
109 </Card>
110 );
111 }
112
113 return (
114 <Card>
115 <CardHeader>
116 <Heading size="2">Identity verification</Heading>
117 </CardHeader>
118 <CardBody>
119 {/* Read-only customer info */}
120 <DataList>
121 <div>
122 <Text>Full name</Text>
123 <Text>{`${firstName} ${lastName}`}</Text>
124 </div>
125 <div>
126 <Text>Email</Text>
127 <Text>{email}</Text>
128 </div>
129 </DataList>
130
131 <form onSubmit={handleSubmit} noValidate>
132 {/* Date of birth */}
133 <FormField
134 label="Date of birth"
135 error={!!errors.dateOfBirth}
136 errorMessage={errors.dateOfBirth}
137 >
138 <DatePicker
139 placeholder="YYYY-MM-DD"
140 value={form.dateOfBirth}
141 onChange={(e) => handleChange(e, "dateOfBirth")}
142 />
143 </FormField>
144
145 {/* Nationality */}
146 <FormField
147 label="Nationality"
148 error={!!errors.nationality}
149 errorMessage={errors.nationality}
150 >
151 <Select
152 placeholder="Select nationality"
153 value={form.nationality}
154 onChange={(e) => handleChange(e, "nationality")}
155 >
156 {countries.map((c) => (
157 <option key={c.code} value={c.code}>
158 {c.name}
159 </option>
160 ))}
161 </Select>
162 </FormField>
163
164 {/* Country of residence */}
165 <FormField
166 label="Country of residence"
167 error={!!errors.countryOfResidence}
168 errorMessage={errors.countryOfResidence}
169 >
170 <Select
171 placeholder="Select country of residence"
172 value={form.countryOfResidence}
173 onChange={(e) => handleChange(e, "countryOfResidence")}
174 >
175 {countries.map((c) => (
176 <option key={c.code} value={c.code}>
177 {c.name}
178 </option>
179 ))}
180 </Select>
181 </FormField>
182
183 {/* Tax identification number */}
184 <FormField
185 label="Tax identification number"
186 error={!!errors.taxIdentificationNumber}
187 errorMessage={errors.taxIdentificationNumber}
188 >
189 <Input
190 placeholder="TIN"
191 value={form.taxIdentificationNumber}
192 onChange={(e) => handleChange(e, "taxIdentificationNumber")}
193 />
194 </FormField>
195
196 {/* Type of identity document */}
197 <FormField
198 label="Type of identity document"
199 error={!!errors.identityDocumentType}
200 errorMessage={errors.identityDocumentType}
201 >
202 <Select
203 placeholder="Select document type"
204 value={form.identityDocumentType}
205 onChange={(e) => handleChange(e, "identityDocumentType")}
206 >
207 {documentTypes.map((dt) => (
208 <option key={dt.value} value={dt.value}>
209 {dt.label}
210 </option>
211 ))}
212 </Select>
213 </FormField>
214
215 {/* Document number */}
216 <FormField
217 label="Document number"
218 error={!!errors.documentNumber}
219 errorMessage={errors.documentNumber}
220 >
221 <Input
222 placeholder="Document number"
223 value={form.documentNumber}
224 onChange={(e) => handleChange(e, "documentNumber")}
225 />
226 </FormField>
227
228 {/* Politically exposed person */}
229 <FormField
230 label="Politically exposed person"
231 error={!!errors.politicallyExposedPerson}
232 errorMessage={errors.politicallyExposedPerson}
233 >
234 <Checkbox
235 checked={form.politicallyExposedPerson === "yes"}
236 onChange={(e) => handleChange(e, "politicallyExposedPerson")}
237 />
238 Yes
239 </FormField>
240
241 <CardFooter>
242 <Button type="submit" css={{ width: "100%" }}>
243 Continue
244 </Button>
245 </CardFooter>
246 </form>
247 </CardBody>
248 </Card>
249 );
250 }