@gelabs/ovr 0.4.2 → 0.4.4

package/dist/chunk-HX7QT2FE.js

@@ -0,0 +1,452 @@
+import { Textarea } from './chunk-QCRVT2SS.js';
+import { Label } from './chunk-XQTVSNHC.js';
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose } from './chunk-M35R6JLA.js';
+import { usePagination, Pagination } from './chunk-6YFZLXFP.js';
+import { Input } from './chunk-K3KIBHJF.js';
+import { Money } from './chunk-BVI5XDDA.js';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from './chunk-OWCGEEAZ.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 { cn } from './chunk-77QBZC7J.js';
+import * as React from 'react';
+import { toast } from 'sonner';
+import { useRouter } from 'next/navigation';
+import { Plus, Pencil, Loader2, Archive, ArchiveRestore, Trash2 } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var fieldClass = "h-9 w-full rounded-lg border border-input bg-transparent px-2.5 text-sm shadow-xs outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:opacity-50 dark:bg-input/30";
+function ViolationsManager({
+  violations,
+  createAction,
+  updateAction,
+  deleteAction,
+  usedCodes = [],
+  purgeAction
+}) {
+  const t = useCopy().admin.violationsPage;
+  const router = useRouter();
+  const used = React.useMemo(() => new Set(usedCodes), [usedCodes]);
+  const { pageItems, page, setPage, totalPages, from, to, total } = usePagination(violations, 12);
+  const categoryLabel = (c) => c === "TRAFFIC" ? t.categoryTraffic : t.categoryOrdinance;
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto w-full max-w-5xl 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(
+        ViolationDialog,
+        {
+          mode: "create",
+          createAction,
+          onDone: () => router.refresh()
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "p-0", children: violations.length === 0 ? /* @__PURE__ */ jsx("p", { className: "p-8 text-center text-sm text-muted-foreground", children: t.empty }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+          /* @__PURE__ */ jsx(TableHead, { children: t.code }),
+          /* @__PURE__ */ jsx(TableHead, { children: t.titleLabel }),
+          /* @__PURE__ */ jsx(TableHead, { className: "hidden sm:table-cell", children: t.category }),
+          /* @__PURE__ */ jsx(TableHead, { className: "text-right", children: t.fine }),
+          /* @__PURE__ */ jsx(TableHead, { children: t.status }),
+          /* @__PURE__ */ jsx(TableHead, { className: "text-right", children: t.actions })
+        ] }) }),
+        /* @__PURE__ */ jsx(TableBody, { children: pageItems.map((v) => {
+          const archived = v.active === false;
+          return /* @__PURE__ */ jsxs(TableRow, { className: cn(archived && "opacity-60"), children: [
+            /* @__PURE__ */ jsx(TableCell, { className: "font-mono text-xs", children: v.code }),
+            /* @__PURE__ */ jsx(TableCell, { className: "font-medium", children: v.title }),
+            /* @__PURE__ */ jsx(TableCell, { className: "hidden text-muted-foreground sm:table-cell", children: categoryLabel(v.category) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "text-right", children: /* @__PURE__ */ jsx(Money, { value: v.basicFine }) }),
+            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { variant: archived ? "outline" : "secondary", children: archived ? t.archived : t.active }) }),
+            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-1.5", children: [
+              /* @__PURE__ */ jsx(
+                ViolationDialog,
+                {
+                  mode: "edit",
+                  violation: v,
+                  updateAction,
+                  onDone: () => router.refresh()
+                }
+              ),
+              archived ? /* @__PURE__ */ jsx(
+                RestoreButton,
+                {
+                  violation: v,
+                  updateAction,
+                  onDone: () => router.refresh()
+                }
+              ) : /* @__PURE__ */ jsx(
+                ArchiveButton,
+                {
+                  violation: v,
+                  deleteAction,
+                  onDone: () => router.refresh()
+                }
+              ),
+              purgeAction && !used.has(v.code) ? /* @__PURE__ */ jsx(
+                DeleteButton,
+                {
+                  violation: v,
+                  purgeAction,
+                  onDone: () => router.refresh()
+                }
+              ) : null
+            ] }) })
+          ] }, v.code);
+        }) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Pagination,
+        {
+          page,
+          totalPages,
+          from,
+          to,
+          total,
+          onPage: setPage
+        }
+      )
+    ] }) }) })
+  ] });
+}
+function ViolationDialog({
+  mode,
+  violation,
+  createAction,
+  updateAction,
+  onDone
+}) {
+  const t = useCopy().admin.violationsPage;
+  const [open, setOpen] = React.useState(false);
+  const [code, setCode] = React.useState(violation?.code ?? "");
+  const [title, setTitle] = React.useState(violation?.title ?? "");
+  const [category, setCategory] = React.useState(
+    violation?.category ?? "TRAFFIC"
+  );
+  const [fine, setFine] = React.useState(
+    violation ? String(violation.basicFine) : ""
+  );
+  const [legalText, setLegalText] = React.useState(violation?.legalText ?? "");
+  const [submitting, setSubmitting] = React.useState(false);
+  function resetTo(v) {
+    setCode(v?.code ?? "");
+    setTitle(v?.title ?? "");
+    setCategory(v?.category ?? "TRAFFIC");
+    setFine(v ? String(v.basicFine) : "");
+    setLegalText(v?.legalText ?? "");
+  }
+  async function submit(e) {
+    e.preventDefault();
+    if (mode === "create" && !code.trim())
+      return toast.error(`${t.code} is required.`);
+    if (!title.trim()) return toast.error(`${t.titleLabel} is required.`);
+    const fineNum = Number(fine);
+    if (!Number.isFinite(fineNum) || fineNum < 0)
+      return toast.error(`${t.fine} must be a number \u2265 0.`);
+    setSubmitting(true);
+    try {
+      let res;
+      if (mode === "create") {
+        const input = {
+          code: code.trim(),
+          title: title.trim(),
+          category,
+          basicFine: fineNum,
+          legalText: legalText.trim() || void 0
+        };
+        res = await createAction?.(input);
+      } else {
+        res = await updateAction?.(violation.code, {
+          title: title.trim(),
+          category,
+          basicFine: fineNum,
+          legalText: legalText.trim() || void 0
+        });
+      }
+      if (res?.error) {
+        toast.error(res.error);
+        return;
+      }
+      toast.success(
+        `${mode === "create" ? t.create : t.editTitle}: ${title.trim()}`
+      );
+      setOpen(false);
+      onDone();
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open,
+      onOpenChange: (o) => {
+        if (o) resetTo(violation);
+        setOpen(o);
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          DialogTrigger,
+          {
+            render: mode === "create" ? /* @__PURE__ */ jsx(Button, { className: "gap-1.5" }) : /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: "gap-1.5" }),
+            children: [
+              mode === "create" ? /* @__PURE__ */ jsx(Plus, { className: "size-4" }) : /* @__PURE__ */ jsx(Pencil, { className: "size-3.5" }),
+              /* @__PURE__ */ jsx("span", { className: mode === "create" ? "" : "hidden sm:inline", children: mode === "create" ? t.newViolation : t.edit })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: mode === "create" ? t.newViolation : t.editTitle }),
+            /* @__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: "vio-code", children: t.code }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "vio-code",
+                  value: code,
+                  onChange: (e) => setCode(e.target.value),
+                  placeholder: t.codePlaceholder,
+                  autoComplete: "off",
+                  disabled: mode === "edit",
+                  autoFocus: mode === "create"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: "vio-title", children: t.titleLabel }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: "vio-title",
+                  value: title,
+                  onChange: (e) => setTitle(e.target.value),
+                  placeholder: t.titlePlaceholder,
+                  autoComplete: "off",
+                  autoFocus: mode === "edit"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+                /* @__PURE__ */ jsx(Label, { htmlFor: "vio-category", children: t.category }),
+                /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    id: "vio-category",
+                    value: category,
+                    onChange: (e) => setCategory(e.target.value),
+                    className: fieldClass,
+                    children: [
+                      /* @__PURE__ */ jsx("option", { value: "TRAFFIC", children: t.categoryTraffic }),
+                      /* @__PURE__ */ jsx("option", { value: "ORDINANCE", children: t.categoryOrdinance })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+                /* @__PURE__ */ jsx(Label, { htmlFor: "vio-fine", children: t.fine }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: "vio-fine",
+                    type: "number",
+                    min: "0",
+                    step: "1",
+                    inputMode: "numeric",
+                    value: fine,
+                    onChange: (e) => setFine(e.target.value),
+                    placeholder: t.finePlaceholder,
+                    autoComplete: "off"
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: "vio-legal", children: t.legalText }),
+              /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  id: "vio-legal",
+                  value: legalText,
+                  onChange: (e) => setLegalText(e.target.value),
+                  placeholder: t.legalTextPlaceholder,
+                  rows: 2
+                }
+              )
+            ] }),
+            /* @__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" }) : null,
+                submitting ? mode === "create" ? t.creating : t.saving : mode === "create" ? t.create : t.save
+              ] })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function ArchiveButton({
+  violation,
+  deleteAction,
+  onDone
+}) {
+  const t = useCopy().admin.violationsPage;
+  const [busy, setBusy] = React.useState(false);
+  async function archive() {
+    setBusy(true);
+    try {
+      const res = await deleteAction(violation.code);
+      if (res?.error) {
+        toast.error(res.error);
+        return;
+      }
+      toast.success(`${t.archive}: ${violation.title}`);
+      onDone();
+    } finally {
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs(Dialog, { children: [
+    /* @__PURE__ */ jsxs(
+      DialogTrigger,
+      {
+        render: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: "gap-1.5" }),
+        children: [
+          /* @__PURE__ */ jsx(Archive, { className: "size-3.5" }),
+          /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: t.archive })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-sm", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: t.archiveConfirmTitle }),
+        /* @__PURE__ */ jsxs(DialogDescription, { children: [
+          violation.title,
+          " \u2014 ",
+          t.archiveConfirmBody
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(DialogFooter, { children: [
+        /* @__PURE__ */ jsx(DialogClose, { render: /* @__PURE__ */ jsx(Button, { variant: "outline" }), children: t.cancel }),
+        /* @__PURE__ */ jsxs(
+          DialogClose,
+          {
+            render: /* @__PURE__ */ jsx(Button, { className: "gap-2", disabled: busy }),
+            onClick: archive,
+            children: [
+              /* @__PURE__ */ jsx(Archive, { className: "size-4" }),
+              t.archive
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function RestoreButton({
+  violation,
+  updateAction,
+  onDone
+}) {
+  const t = useCopy().admin.violationsPage;
+  const [busy, setBusy] = React.useState(false);
+  async function restore() {
+    setBusy(true);
+    try {
+      const res = await updateAction(violation.code, { active: true });
+      if (res?.error) {
+        toast.error(res.error);
+        return;
+      }
+      toast.success(`${t.restore}: ${violation.title}`);
+      onDone();
+    } finally {
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: "outline",
+      size: "sm",
+      className: "gap-1.5",
+      disabled: busy,
+      onClick: restore,
+      children: [
+        busy ? /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(ArchiveRestore, { className: "size-3.5" }),
+        /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: t.restore })
+      ]
+    }
+  );
+}
+function DeleteButton({
+  violation,
+  purgeAction,
+  onDone
+}) {
+  const t = useCopy().admin.violationsPage;
+  const [busy, setBusy] = React.useState(false);
+  async function purge() {
+    setBusy(true);
+    try {
+      const res = await purgeAction(violation.code);
+      if (res?.error) {
+        toast.error(res.error);
+        return;
+      }
+      toast.success(`${t.delete}: ${violation.title}`);
+      onDone();
+    } finally {
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs(Dialog, { children: [
+    /* @__PURE__ */ jsxs(
+      DialogTrigger,
+      {
+        render: /* @__PURE__ */ jsx(Button, { variant: "destructive", size: "sm", className: "gap-1.5" }),
+        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: [
+          violation.title,
+          " \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: busy }),
+            onClick: purge,
+            children: [
+              /* @__PURE__ */ jsx(Trash2, { className: "size-4" }),
+              t.delete
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+export { ViolationsManager };