payment-approval

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  Table,16  TableBody,17  TableCell,18  TableHead,19  TableHeader,20  TableRow,21} from "@vektos/ds";22import { css } from "styled-system/css";23import data from "./fixture.json";24 25type Payment = (typeof data.payments)[number];26 27const money = new Intl.NumberFormat("en-IE", {28  style: "currency",29  currency: data.currency,30});31 32function formatDate(value: string) {33  return new Intl.DateTimeFormat("en-GB", {34    day: "numeric",35    month: "short",36    year: "numeric",37    timeZone: "UTC",38  }).format(new Date(`${value}T00:00:00Z`));39}40 41const page = css({42  minHeight: "100vh",43  background: "#f5f7fa",44  color: "#172033",45  padding: { base: "6", md: "12" },46});47 48const content = css({49  maxWidth: "1180px",50  marginInline: "auto",51});52 53const eyebrow = css({54  color: "#64748b",55  fontSize: "sm",56  fontWeight: "semibold",57  letterSpacing: "0.08em",58  textTransform: "uppercase",59  marginBottom: "3",60});61 62const heading = css({63  fontSize: { base: "2xl", md: "3xl" },64  lineHeight: "1.15",65  fontWeight: "bold",66  letterSpacing: "-0.035em",67  margin: "0",68});69 70const intro = css({71  color: "#64748b",72  fontSize: "md",73  marginTop: "3",74  marginBottom: "0",75});76 77const summary = css({78  display: "flex",79  alignItems: "center",80  justifyContent: "space-between",81  gap: "4",82  flexWrap: "wrap",83  marginTop: "8",84  marginBottom: "4",85});86 87const summaryLabel = css({88  fontSize: "sm",89  color: "#64748b",90  margin: "0",91});92 93const summaryCount = css({94  color: "#172033",95  fontWeight: "semibold",96  marginInlineEnd: "1",97});98 99const cardTitle = css({ fontSize: "lg", fontWeight: "semibold" });100const cardDescription = css({ fontSize: "sm" });101 102const tableWrap = css({103  overflowX: "auto",104  border: "1px solid #e5eaf0",105  borderRadius: "12px",106  background: "white",107  boxShadow: "0 4px 18px rgba(15, 23, 42, 0.04)",108});109 110const table = css({111  width: "100%",112  minWidth: "860px",113  borderCollapse: "collapse",114  "& th": { whiteSpace: "nowrap" },115  "& td": { verticalAlign: "middle" },116});117 118const beneficiary = css({ fontWeight: "semibold", color: "#172033" });119const secondary = css({ fontSize: "xs", color: "#718096", marginTop: "1" });120const iban = css({ fontSize: "sm", color: "#475569", whiteSpace: "nowrap" });121const amount = css({ fontWeight: "semibold", fontVariantNumeric: "tabular-nums", whiteSpace: "nowrap" });122const scheme = css({ fontSize: "xs", textTransform: "capitalize", color: "#718096", marginTop: "1" });123 124const dialogRows = css({125  display: "grid",126  gap: "4",127  marginBlock: "2 6",128});129 130const detail = css({131  display: "flex",132  justifyContent: "space-between",133  alignItems: "baseline",134  gap: "4",135  borderBottom: "1px solid #e9edf2",136  paddingBottom: "3",137  fontSize: "sm",138  "& dt": { color: "#64748b" },139  "& dd": { margin: "0", textAlign: "right", fontWeight: "medium", color: "#172033" },140});141 142const total = css({143  display: "flex",144  justifyContent: "space-between",145  alignItems: "baseline",146  gap: "4",147  borderRadius: "10px",148  background: "#f3f6fa",149  padding: "4",150  fontSize: "md",151  fontWeight: "semibold",152  "& dd": { margin: "0", fontVariantNumeric: "tabular-nums" },153});154 155export default function PaymentsApprovalPage() {156  const [approvedIds, setApprovedIds] = useState<Set<string>>(() => new Set());157  const [selectedPayment, setSelectedPayment] = useState<Payment | null>(null);158 159  const pendingCount = data.payments.length - approvedIds.size;160  const fee = selectedPayment161    ? data.fees[selectedPayment.scheme as keyof typeof data.fees]162    : 0;163 164  function approveSelectedPayment() {165    if (!selectedPayment) return;166    setApprovedIds((current) => new Set(current).add(selectedPayment.id));167    setSelectedPayment(null);168  }169 170  return (171    <main className={page}>172      <div className={content}>173        <header>174          <p className={eyebrow}>Treasury <span aria-hidden="true">/</span> Payments</p>175          <h1 className={heading}>Payments for approval</h1>176          <p className={intro}>Review outgoing payments and approve them before they are sent.</p>177        </header>178 179        <section aria-label="Payments awaiting approval">180          <div className={summary}>181            <p className={summaryLabel}>182              <span className={summaryCount}>{pendingCount}</span>183              {pendingCount === 1 ? "payment" : "payments"} awaiting approval184            </p>185          </div>186 187          <Card>188            <CardHeader>189              <CardTitle className={cardTitle}>Outgoing payments</CardTitle>190              <CardDescription className={cardDescription}>191                Payment instructions scheduled for processing.192              </CardDescription>193            </CardHeader>194            <div className={tableWrap}>195              <Table aria-label="Company payments" className={table}>196                <TableHead>197                  <TableRow>198                    <TableHeader>Beneficiary</TableHeader>199                    <TableHeader>IBAN</TableHeader>200                    <TableHeader>Due date</TableHeader>201                    <TableHeader numeric>Amount</TableHeader>202                    <TableHeader>Status</TableHeader>203                    <TableHeader>Action</TableHeader>204                  </TableRow>205                </TableHead>206                <TableBody>207                  {data.payments.map((payment) => {208                    const isApproved = approvedIds.has(payment.id);209                    return (210                      <TableRow key={payment.id}>211                        <TableCell>212                          <div className={beneficiary}>{payment.beneficiary}</div>213                          <div className={secondary}>{payment.reference}</div>214                        </TableCell>215                        <TableCell><span className={iban}>{payment.iban}</span></TableCell>216                        <TableCell>{formatDate(payment.dueDate)}</TableCell>217                        <TableCell numeric><span className={amount}>{money.format(payment.amount)}</span></TableCell>218                        <TableCell>219                          <Badge tone={isApproved ? "success" : "warning"}>220                            {isApproved ? "Approved" : "Pending"}221                          </Badge>222                        </TableCell>223                        <TableCell>224                          {isApproved ? (225                            <span className={secondary}>Ready to process</span>226                          ) : (227                            <Button228                              size="sm"229                              variant="outline"230                              onClick={() => setSelectedPayment(payment)}231                              aria-label={`Approve payment to ${payment.beneficiary}`}232                            >233                              Approve234                            </Button>235                          )}236                        </TableCell>237                      </TableRow>238                    );239                  })}240                </TableBody>241              </Table>242            </div>243          </Card>244        </section>245 246        <Dialog247          open={selectedPayment !== null}248          onOpenChange={(open) => {249            if (!open) setSelectedPayment(null);250          }}251        >252          {selectedPayment && (253            <DialogContent254              title="Approve this payment?"255              description="Review the payment details, fee and total before confirming."256            >257              <dl className={dialogRows}>258                <div className={detail}>259                  <dt>Beneficiary</dt>260                  <dd>{selectedPayment.beneficiary}</dd>261                </div>262                <div className={detail}>263                  <dt>IBAN</dt>264                  <dd>{selectedPayment.iban}</dd>265                </div>266                <div className={detail}>267                  <dt>Amount</dt>268                  <dd>{money.format(selectedPayment.amount)}</dd>269                </div>270                <div className={detail}>271                  <dt>Payment fee <span className={scheme}>({selectedPayment.scheme})</span></dt>272                  <dd>{money.format(fee)}</dd>273                </div>274                <div className={total}>275                  <dt>Total</dt>276                  <dd>{money.format(selectedPayment.amount + fee)}</dd>277                </div>278              </dl>279              <DialogFooter>280                <DialogClose asChild>281                  <Button variant="outline">Cancel</Button>282                </DialogClose>283                <Button onClick={approveSelectedPayment}>Confirm approval</Button>284              </DialogFooter>285            </DialogContent>286          )}287        </Dialog>288      </div>289    </main>290  );291}292