@gelabs/ovr 0.4.2 → 0.4.4

package/dist/chunk-7GVZZWK3.js

@@ -0,0 +1,74 @@
+import { StatusBadge } from './chunk-OE525ZER.js';
+import { Money } from './chunk-BVI5XDDA.js';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from './chunk-OWCGEEAZ.js';
+import { useFormatters, useCopy } from './chunk-TJSNVTVB.js';
+import { cn } from './chunk-77QBZC7J.js';
+import Link from 'next/link';
+import { ChevronRight } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function ViolationHistoryTable({
+  tickets,
+  currentTicketNo,
+  lastName
+}) {
+  const { formatDate } = useFormatters();
+  const copy = useCopy();
+  const t = copy.citizen.ticket.history;
+  if (tickets.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "px-4 py-10 text-center text-sm text-muted-foreground", children: t.empty });
+  }
+  return /* @__PURE__ */ jsxs(Table, { children: [
+    /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+      /* @__PURE__ */ jsx(TableHead, { children: t.colTicketNo }),
+      /* @__PURE__ */ jsx(TableHead, { className: "hidden sm:table-cell", children: t.colDate }),
+      /* @__PURE__ */ jsx(TableHead, { children: t.colViolations }),
+      /* @__PURE__ */ jsx(TableHead, { children: t.colStatus }),
+      /* @__PURE__ */ jsx(TableHead, { className: "text-right", children: t.colAmount }),
+      /* @__PURE__ */ jsx(TableHead, { className: "w-8" })
+    ] }) }),
+    /* @__PURE__ */ jsx(TableBody, { children: tickets.map((ticket) => {
+      const isCurrent = ticket.ovrTicketNo === currentTicketNo;
+      const href = `/citizen/ticket/${encodeURIComponent(
+        ticket.ovrTicketNo
+      )}?ln=${encodeURIComponent(lastName)}`;
+      const amount = ticket.status === "PAID" ? ticket.payment?.amount ?? 0 : ticket.totalAmountDue;
+      const first = ticket.violations[0];
+      const extra = ticket.violations.length - 1;
+      return /* @__PURE__ */ jsxs(
+        TableRow,
+        {
+          className: cn(isCurrent && "bg-muted/40"),
+          children: [
+            /* @__PURE__ */ jsx(TableCell, { className: "font-mono text-xs", children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(Link, { href, className: "hover:underline", children: ticket.ovrTicketNo }),
+              isCurrent ? /* @__PURE__ */ jsx("span", { className: "rounded bg-brand/12 px-1.5 py-0.5 text-[0.65rem] font-medium uppercase tracking-wide text-brand", children: t.current }) : null
+            ] }) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "hidden text-muted-foreground sm:table-cell", children: formatDate(ticket.apprehendedAt) }),
+            /* @__PURE__ */ jsxs(TableCell, { className: "max-w-[16rem] truncate text-muted-foreground", children: [
+              first?.title ?? "\u2014",
+              extra > 0 ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                " +",
+                extra
+              ] }) : null
+            ] }),
+            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(StatusBadge, { status: ticket.status }) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: /* @__PURE__ */ jsx(Money, { value: amount }) }),
+            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(
+              Link,
+              {
+                href,
+                className: "text-muted-foreground hover:text-foreground",
+                "aria-label": `Open ${ticket.ovrTicketNo}`,
+                children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })
+              }
+            ) })
+          ]
+        },
+        ticket.ovrTicketNo
+      );
+    }) })
+  ] });
+}
+
+export { ViolationHistoryTable };

package/dist/chunk-ACXED4UH.js

@@ -0,0 +1,403 @@
+import { Checkbox } from './chunk-BBQBKQA4.js';
+import { Label } from './chunk-XQTVSNHC.js';
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose } from './chunk-M35R6JLA.js';
+import { Input } from './chunk-K3KIBHJF.js';
+import { PERMISSION_CATALOG, SUPER_ADMIN_LOCKED_PERMISSIONS } from './chunk-QZRRFE6E.js';
+import { Badge } from './chunk-55FQP2DO.js';
+import { Button } from './chunk-I4WDVYHX.js';
+import { useCopy } from './chunk-TJSNVTVB.js';
+import { Card, CardContent } from './chunk-SETIN6XP.js';
+import * as React from 'react';
+import { toast } from 'sonner';
+import { useRouter } from 'next/navigation';
+import { ShieldCheck, SlidersHorizontal, Loader2, Trash2, Plus, Lock } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function RolesManager({
+  roles,
+  usage = {},
+  createAction,
+  updateAction,
+  deleteAction
+}) {
+  const t = useCopy().admin.rolesPage;
+  const router = useRouter();
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-3xl p-4 sm:p-6 lg:p-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-6 flex items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx("h1", { className: "font-heading text-2xl font-semibold tracking-tight", children: t.title }),
+        /* @__PURE__ */ jsx("p", { className: "max-w-2xl text-sm text-muted-foreground", children: t.subtitle })
+      ] }),
+      /* @__PURE__ */ jsx(
+        NewRoleDialog,
+        {
+          createAction,
+          onChanged: () => router.refresh()
+        }
+      )
+    ] }),
+    roles.length === 0 ? /* @__PURE__ */ jsx("p", { className: "rounded-xl border bg-card p-8 text-center text-sm text-muted-foreground", children: t.empty }) : /* @__PURE__ */ jsx("div", { className: "space-y-3", children: roles.map((role) => /* @__PURE__ */ jsx(
+      RoleCard,
+      {
+        role,
+        inUse: usage[role.name] ?? 0,
+        updateAction,
+        deleteAction,
+        onChanged: () => router.refresh()
+      },
+      role.name
+    )) })
+  ] });
+}
+function PermissionChecklist({
+  selected,
+  onToggle,
+  locked
+}) {
+  return /* @__PURE__ */ jsx("div", { className: "grid gap-2 sm:grid-cols-2", children: PERMISSION_CATALOG.map((perm) => {
+    const isLocked = locked?.(perm.key) ?? false;
+    const checked = selected.has(perm.key) || isLocked;
+    return /* @__PURE__ */ jsxs(
+      "label",
+      {
+        className: "flex items-start gap-2.5 rounded-lg border p-2.5",
+        children: [
+          /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked,
+              disabled: isLocked,
+              onCheckedChange: (v) => onToggle(perm.key, v === true),
+              className: "mt-0.5"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "flex-1", children: [
+            /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-sm font-medium", children: [
+              perm.label,
+              isLocked ? /* @__PURE__ */ jsx(Lock, { className: "size-3 text-muted-foreground" }) : null
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "block text-xs text-muted-foreground", children: perm.description })
+          ] })
+        ]
+      },
+      perm.key
+    );
+  }) });
+}
+function RoleCard({
+  role,
+  inUse,
+  updateAction,
+  deleteAction,
+  onChanged
+}) {
+  const t = useCopy().admin.rolesPage;
+  const grantedLabels = PERMISSION_CATALOG.filter(
+    (p) => role.permissions.includes(p.key)
+  ).map((p) => p.label);
+  return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(CardContent, { className: "flex items-center justify-between gap-3 py-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx(ShieldCheck, { className: "size-4 shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsx("span", { className: "font-medium", children: role.label }),
+        /* @__PURE__ */ jsx(Badge, { variant: role.isSystem ? "secondary" : "outline", children: role.isSystem ? t.system : t.custom }),
+        inUse > 0 ? /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+          inUse,
+          " ",
+          t.inUseSuffix
+        ] }) : null
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: grantedLabels.length ? grantedLabels.join(" \xB7 ") : t.noPermissions })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx(
+        EditRolePermissionsDialog,
+        {
+          role,
+          updateAction,
+          onChanged
+        }
+      ),
+      !role.isSystem ? /* @__PURE__ */ jsx(
+        DeleteRoleButton,
+        {
+          role,
+          inUse,
+          deleteAction,
+          onChanged
+        }
+      ) : null
+    ] })
+  ] }) });
+}
+function EditRolePermissionsDialog({
+  role,
+  updateAction,
+  onChanged
+}) {
+  const t = useCopy().admin.rolesPage;
+  const [open, setOpen] = React.useState(false);
+  const [label, setLabel] = React.useState(role.label);
+  const [perms, setPerms] = React.useState(
+    () => new Set(role.permissions)
+  );
+  const [saving, setSaving] = React.useState(false);
+  const isLocked = (p) => role.name === "SUPER_ADMIN" && SUPER_ADMIN_LOCKED_PERMISSIONS.includes(p);
+  function toggle(p, checked) {
+    if (isLocked(p)) return;
+    setPerms((prev) => {
+      const next = new Set(prev);
+      if (checked) next.add(p);
+      else next.delete(p);
+      return next;
+    });
+  }
+  async function submit(e) {
+    e.preventDefault();
+    setSaving(true);
+    try {
+      const res = await updateAction(role.name, {
+        label: role.isSystem ? void 0 : label.trim(),
+        permissions: [...perms]
+      });
+      if (res?.error) {
+        toast.error(res.error);
+        return;
+      }
+      toast.success(`${t.saved}: ${role.isSystem ? role.label : label.trim()}`);
+      setOpen(false);
+      onChanged();
+    } finally {
+      setSaving(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open,
+      onOpenChange: (o) => {
+        if (o) {
+          setLabel(role.label);
+          setPerms(new Set(role.permissions));
+        }
+        setOpen(o);
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          DialogTrigger,
+          {
+            render: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: "gap-1.5" }),
+            children: [
+              /* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-3.5" }),
+              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: t.editPermissions })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-lg", children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: role.label }),
+            /* @__PURE__ */ jsx(DialogDescription, { children: t.editPermissions })
+          ] }),
+          /* @__PURE__ */ jsxs("form", { onSubmit: submit, className: "space-y-4", children: [
+            !role.isSystem ? /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: `role-label-${role.name}`, children: t.roleName }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: `role-label-${role.name}`,
+                  value: label,
+                  onChange: (e) => setLabel(e.target.value),
+                  autoComplete: "off"
+                }
+              )
+            ] }) : null,
+            /* @__PURE__ */ jsx(
+              PermissionChecklist,
+              {
+                selected: perms,
+                onToggle: toggle,
+                locked: isLocked
+              }
+            ),
+            role.name === "SUPER_ADMIN" ? /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t.lockedHint }) : null,
+            /* @__PURE__ */ jsxs(DialogFooter, { children: [
+              /* @__PURE__ */ jsx(DialogClose, { render: /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline" }), children: t.cancel }),
+              /* @__PURE__ */ jsxs(Button, { type: "submit", disabled: saving, className: "gap-1.5", children: [
+                saving ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : null,
+                saving ? t.saving : t.save
+              ] })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function DeleteRoleButton({
+  role,
+  inUse,
+  deleteAction,
+  onChanged
+}) {
+  const t = useCopy().admin.rolesPage;
+  const [deleting, setDeleting] = React.useState(false);
+  async function remove() {
+    setDeleting(true);
+    try {
+      const res = await deleteAction(role.name);
+      if (res?.error) {
+        toast.error(res.error);
+        return;
+      }
+      toast.success(`${t.delete}: ${role.label}`);
+      onChanged();
+    } finally {
+      setDeleting(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs(Dialog, { children: [
+    /* @__PURE__ */ jsxs(
+      DialogTrigger,
+      {
+        render: /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "destructive",
+            size: "sm",
+            className: "gap-1.5",
+            disabled: inUse > 0
+          }
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Trash2, { className: "size-3.5" }),
+          /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: t.delete })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-sm", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: t.deleteConfirmTitle }),
+        /* @__PURE__ */ jsxs(DialogDescription, { children: [
+          role.label,
+          " \u2014 ",
+          t.deleteConfirmBody
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(DialogClose, { render: /* @__PURE__ */ jsx(Button, { variant: "outline" }), children: t.cancel }),
+        /* @__PURE__ */ jsxs(
+          DialogClose,
+          {
+            render: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "destructive",
+                className: "gap-2",
+                disabled: deleting
+              }
+            ),
+            onClick: remove,
+            children: [
+              /* @__PURE__ */ jsx(Trash2, { className: "size-4" }),
+              t.delete
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function NewRoleDialog({
+  createAction,
+  onChanged
+}) {
+  const t = useCopy().admin.rolesPage;
+  const [open, setOpen] = React.useState(false);
+  const [label, setLabel] = React.useState("");
+  const [perms, setPerms] = React.useState(() => /* @__PURE__ */ new Set());
+  const [submitting, setSubmitting] = React.useState(false);
+  function reset() {
+    setLabel("");
+    setPerms(/* @__PURE__ */ new Set());
+  }
+  function toggle(p, checked) {
+    setPerms((prev) => {
+      const next = new Set(prev);
+      if (checked) next.add(p);
+      else next.delete(p);
+      return next;
+    });
+  }
+  async function submit(e) {
+    e.preventDefault();
+    if (!label.trim()) return toast.error(`${t.roleName} is required.`);
+    setSubmitting(true);
+    try {
+      const res = await createAction({
+        label: label.trim(),
+        permissions: [...perms]
+      });
+      if (res?.error) {
+        toast.error(res.error);
+        return;
+      }
+      toast.success(`${t.create}: ${label.trim()}`);
+      reset();
+      setOpen(false);
+      onChanged();
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open,
+      onOpenChange: (o) => {
+        if (!o) reset();
+        setOpen(o);
+      },
+      children: [
+        /* @__PURE__ */ jsxs(DialogTrigger, { render: /* @__PURE__ */ jsx(Button, { className: "gap-1.5" }), children: [
+          /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+          t.newRole
+        ] }),
+        /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-lg", children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: t.newRole }),
+            /* @__PURE__ */ jsx(DialogDescription, { children: t.subtitle })
+          ] }),
+          /* @__PURE__ */ jsxs("form", { onSubmit: submit, className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: "role-label", children: t.roleName }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "role-label",
+                  value: label,
+                  onChange: (e) => setLabel(e.target.value),
+                  placeholder: t.roleNamePlaceholder,
+                  autoComplete: "off",
+                  autoFocus: true
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsx(Label, { children: t.permissions }),
+              /* @__PURE__ */ jsx(PermissionChecklist, { selected: perms, onToggle: toggle })
+            ] }),
+            /* @__PURE__ */ jsxs(DialogFooter, { children: [
+              /* @__PURE__ */ jsx(DialogClose, { render: /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline" }), children: t.cancel }),
+              /* @__PURE__ */ jsxs(Button, { type: "submit", disabled: submitting, className: "gap-1.5", children: [
+                submitting ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(Plus, { className: "size-4" }),
+                submitting ? t.creating : t.create
+              ] })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export { RolesManager };

package/dist/chunk-BBTAG3FD.js

@@ -0,0 +1,165 @@
+import { PaymentQrDialog } from './chunk-QCAURREW.js';
+import { Separator } from './chunk-NSCIBSCW.js';
+import { Alert, AlertDescription } from './chunk-EYFZWQ4J.js';
+import { Money } from './chunk-BVI5XDDA.js';
+import { Button } from './chunk-I4WDVYHX.js';
+import { useOvrConfig, useCopy } from './chunk-TJSNVTVB.js';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from './chunk-SETIN6XP.js';
+import { cn } from './chunk-77QBZC7J.js';
+import * as React from 'react';
+import { toast } from 'sonner';
+import { Check, TriangleAlert, Loader2, Lock, Building2, Landmark, Smartphone, Wallet } from 'lucide-react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var ICONS = {
+  GCASH: /* @__PURE__ */ jsx(Wallet, { className: "size-5" }),
+  MAYA: /* @__PURE__ */ jsx(Smartphone, { className: "size-5" }),
+  LANDBANK: /* @__PURE__ */ jsx(Landmark, { className: "size-5" }),
+  OVER_THE_COUNTER: /* @__PURE__ */ jsx(Building2, { className: "size-5" })
+};
+function PaymentForm({
+  ovrTicketNo,
+  lastName,
+  violatorName,
+  basicFines,
+  penalty,
+  amount,
+  payAction
+}) {
+  const { paymentMethods } = useOvrConfig();
+  const copy = useCopy();
+  const payMethods = paymentMethods.filter((m) => m.id !== "OVER_THE_COUNTER");
+  const [method, setMethod] = React.useState(
+    () => payMethods[0]?.id ?? "GCASH"
+  );
+  const [error, setError] = React.useState(null);
+  const [isPending, startTransition] = React.useTransition();
+  const [qrOpen, setQrOpen] = React.useState(false);
+  function pay() {
+    setError(null);
+    startTransition(async () => {
+      const res = await payAction({ ovrTicketNo, lastName, method });
+      if (res?.error) {
+        setError(res.error);
+        toast.error(res.error);
+      }
+    });
+  }
+  const methodLabel = paymentMethods.find((m) => m.id === method)?.label ?? method;
+  function handlePay() {
+    if (method === "OVER_THE_COUNTER") {
+      pay();
+    } else {
+      setError(null);
+      setQrOpen(true);
+    }
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Card, { className: "overflow-visible", children: [
+      /* @__PURE__ */ jsxs(CardHeader, { children: [
+        /* @__PURE__ */ jsx(CardTitle, { className: "text-xl", children: copy.citizen.pay.title }),
+        /* @__PURE__ */ jsxs(CardDescription, { children: [
+          violatorName,
+          " \xB7 ",
+          /* @__PURE__ */ jsx("span", { className: "font-mono", children: ovrTicketNo })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2 rounded-lg border bg-muted/20 p-3 text-sm", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Basic fines" }),
+            /* @__PURE__ */ jsx(Money, { value: basicFines })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-between", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Penalty / surcharge" }),
+            /* @__PURE__ */ jsx(
+              Money,
+              {
+                value: penalty,
+                className: cn(penalty === 0 && "text-muted-foreground")
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(Separator, {}),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Total to pay" }),
+            /* @__PURE__ */ jsx(Money, { value: amount, className: "text-xl font-bold" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: copy.citizen.pay.choose }),
+          /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-2", children: payMethods.map((m) => {
+            const active = method === m.id;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => setMethod(m.id),
+                "aria-pressed": active,
+                className: cn(
+                  "flex items-center gap-2.5 rounded-lg border p-3 text-left transition-colors outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
+                  active ? "border-primary bg-primary/5 ring-1 ring-primary/30" : "hover:bg-muted/40"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "flex size-9 shrink-0 items-center justify-center rounded-lg",
+                        active ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"
+                      ),
+                      children: ICONS[m.id]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0", children: /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-medium", children: m.label }) }),
+                  active ? /* @__PURE__ */ jsx(Check, { className: "ml-auto size-4 shrink-0 text-primary" }) : null
+                ]
+              },
+              m.id
+            );
+          }) })
+        ] }),
+        error ? /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
+          /* @__PURE__ */ jsx(TriangleAlert, {}),
+          /* @__PURE__ */ jsx(AlertDescription, { children: error })
+        ] }) : null,
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: handlePay,
+            disabled: isPending,
+            className: "h-11 w-full gap-2 text-base",
+            children: isPending ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }),
+              copy.citizen.pay.processing
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Lock, { className: "size-4" }),
+              copy.citizen.pay.payNow,
+              " ",
+              /* @__PURE__ */ jsx(Money, { value: amount, className: "font-semibold" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs("p", { className: "flex items-center justify-center gap-1.5 text-center text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Lock, { className: "size-3" }),
+          copy.citizen.pay.secure
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      PaymentQrDialog,
+      {
+        open: qrOpen,
+        onOpenChange: setQrOpen,
+        method,
+        methodLabel,
+        amount,
+        ovrTicketNo,
+        lastName,
+        payAction
+      }
+    )
+  ] });
+}
+
+export { PaymentForm };