Vektos

Loading the page

payment-approval

0 design-system2 qualityDone

deepseek/deepseek-v4.1-flash-1017 · storybook-mcp · all runs of payment-approval · Nov 9, 09:21

Run

Batch

Runs from different design-system versions should not be compared.

The page

A screenshot in each theme, as the benchmark took it.

page.stories.tsx

As the agent left it; marked lines broke a rule.

1import Page from "./page";2 3/**

Violations

2 counted, under 1 rule. “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, read_file	142	65	$0.0001
1	docs-list	627	109	$0.0003
2	docs-show, docs-show	877	87	$0.0004
3

page.tsx

As the agent left it; marked lines broke a rule.

1"use client";2 3import { useState } from "react";4import {5  Badge,6  Button,7  Card,8  CardDescription,9  CardHeader,10  CardTitle,11  Dialog,12  DialogClose,13  DialogContent,14  DialogFooter,15  DialogTrigger,16  Table,17  TableBody,18  TableCell,19  TableHead,20  TableHeader,21  TableRow,22} from "@vektos/ds";23import { css } from "styled-system/css";24import data from "./fixture.json";25 26const fees: Record<string, number> = data.fees;27 28const schemeNames: Record<string, string> = {29  sepa: "SEPA transfer",30  instant: "Instant transfer",31};32 33const amountFormat = new Intl.NumberFormat("en-IE", {34  minimumFractionDigits: 2,35  maximumFractionDigits: 2,36});37 38const currencyFormat = new Intl.NumberFormat("en-IE", {39  style: "currency",40  currency: data.currency,41});42 43const dateFormat = new Intl.DateTimeFormat("en-GB", {44  day: "numeric",45  month: "short",46  year: "numeric",47  timeZone: "UTC",48});49 50function feeFor(scheme: string) {51  return fees[scheme] ?? 0;52}53 54function schemeName(scheme: string) {55  return schemeNames[scheme] ?? scheme;56}57 58function formatAmount(value: number) {59  return amountFormat.format(value);60}61 62function formatCurrency(value: number) {63  return currencyFormat.format(value);64}65 66function formatDate(isoDate: string) {67  return dateFormat.format(new Date(`${isoDate}T00:00:00Z`));68}69 70const rowStyles = {71  label: css({ color: "fg.muted", fontSize: "sm" }),72  value: css({ fontSize: "sm", textAlign: "end", margin: "0" }),73  totalLabel: css({ fontSize: "sm", fontWeight: "semibold" }),74  totalValue: css({75    fontSize: "sm",76    fontWeight: "semibold",77    textAlign: "end",78    margin: "0",79  }),80};81 82export default function Page() {83  const [approvedIds, setApprovedIds] = useState<string[]>([]);84  const [openId, setOpenId] = useState<string | null>(null);85 86  const payments = data.payments;87  const isApproved = (id: string) => approvedIds.includes(id);88 89  const pending = payments.filter((payment) => !isApproved(payment.id));90  const pendingAmount = pending.reduce(91    (total, payment) => total + payment.amount,92    0,93  );94 95  const summary =96    pending.length === 097      ? `All ${payments.length} payments are approved.`98      : `${pending.length} of ${payments.length} payments waiting for approval · ${formatCurrency(pendingAmount)} in total.`;99 100  const approve = (id: string) => {101    setApprovedIds((current) => [...current, id]);102    setOpenId(null);103  };104 105  return (106    <main className="vektos">107      <div108        className={css({109          px: "6",110          py: "8",111          display: "flex",112          flexDirection: "column",113          gap: "6",114        })}115      >116        <header117          className={css({ display: "flex", flexDirection: "column", gap: "2" })}118        >119          <h1 className={css({ fontSize: "xl", fontWeight: "bold" })}>120            Payments awaiting approval121          </h1>122          <p className={css({ color: "fg.muted", fontSize: "sm" })}>{summary}</p>123        </header>124 125        <Card>126          <CardHeader>127            <CardTitle asChild>128              <h2>Company payments</h2>129            </CardTitle>130            <CardDescription>131              Approve a payment to release it to the bank. Fees depend on the132              payment scheme.133            </CardDescription>134          </CardHeader>135          <Table136            aria-label="Payments waiting for approval"137            className={css({ marginBlockStart: "4" })}138          >139            <TableHead>140              <TableRow>141                <TableHeader>Beneficiary</TableHeader>142                <TableHeader>IBAN</TableHeader>143                <TableHeader>Due date</TableHeader>144                <TableHeader numeric>Amount (EUR)</TableHeader>145                <TableHeader>Status</TableHeader>146                <TableHeader>Action</TableHeader>147              </TableRow>148            </TableHead>149            <TableBody>150              {payments.map((payment) => {151                const approved = isApproved(payment.id);152                const fee = feeFor(payment.scheme);153 154                return (155                  <TableRow key={payment.id}>156                    <TableCell>{payment.beneficiary}</TableCell>157                    <TableCell>{payment.iban}</TableCell>158                    <TableCell>{formatDate(payment.dueDate)}</TableCell>159                    <TableCell numeric>{formatAmount(payment.amount)}</TableCell>160                    <TableCell>161                      <Badge tone={approved ? "success" : "warning"}>162                        {approved ? "Approved" : "Awaiting approval"}163                      </Badge>164                    </TableCell>165                    <TableCell>166                      {approved ? (167                        <span168                          className={css({ color: "fg.muted", fontSize: "sm" })}169                        >170                          Approved171                        </span>172                      ) : (173                        <Dialog174                          role="alertdialog"175                          open={openId === payment.id}176                          onOpenChange={(open) =>177                            setOpenId(open ? payment.id : null)178                          }179                        >180                          <DialogTrigger asChild>181                            <Button variant="outline" size="sm">182                              Approve183                            </Button>184                          </DialogTrigger>185                          <DialogContent186                            title={`Approve payment to ${payment.beneficiary}?`}187                            description="Check the details below. The payment leaves the account as soon as you confirm."188                          >189                            <dl190                              className={css({191                                display: "grid",192                                gridTemplateColumns: "auto 1fr",193                                columnGap: "6",194                                rowGap: "3",195                                margin: "0",196                              })}197                            >198                              <dt className={rowStyles.label}>Beneficiary</dt>199                              <dd className={rowStyles.value}>200                                {payment.beneficiary}201                              </dd>202 203                              <dt className={rowStyles.label}>IBAN</dt>204                              <dd205                                className={`${rowStyles.value} ${css({206                                  overflowWrap: "anywhere",207                                })}`}208                              >209                                {payment.iban}210                              </dd>211 212                              <dt className={rowStyles.label}>Due date</dt>213                              <dd className={rowStyles.value}>214                                {formatDate(payment.dueDate)}215                              </dd>216 217                              <dt className={rowStyles.label}>Amount</dt>218                              <dd className={rowStyles.value}>219                                {formatCurrency(payment.amount)}220                              </dd>221 222                              <dt className={rowStyles.label}>223                                Fee ({schemeName(payment.scheme)})224                              </dt>225                              <dd className={rowStyles.value}>226                                {formatCurrency(fee)}227                              </dd>228 229                              <dt className={rowStyles.totalLabel}>Total</dt>230                              <dd className={rowStyles.totalValue}>231                                {formatCurrency(payment.amount + fee)}232                              </dd>233                            </dl>234                            <DialogFooter>235                              <DialogClose asChild>236                                <Button variant="outline">Cancel</Button>237                              </DialogClose>238                              <Button onClick={() => approve(payment.id)}>239                                Confirm payment240                              </Button>241                            </DialogFooter>242                          </DialogContent>243                        </Dialog>244                      )}245                    </TableCell>246                  </TableRow>247                );248              })}249            </TableBody>250          </Table>251        </Card>252      </div>253    </main>254  );255}256