@gelabs/ovr 0.2.2 → 0.4.0

package/dist/ui-components-admin/accounts-manager.js

@@ -0,0 +1,471 @@
+"use client";
+import { Card, CardContent } from '../chunk-SETIN6XP.js';
+import { usePagination, Pagination } from '../chunk-6YFZLXFP.js';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../chunk-OWCGEEAZ.js';
+import { Badge } from '../chunk-55FQP2DO.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 { Button } from '../chunk-I4WDVYHX.js';
+import { useCopy, useOvrConfig } from '../chunk-TJSNVTVB.js';
+import '../chunk-77QBZC7J.js';
+import { hasPermission } from '../chunk-WUNTHINH.js';
+import '../chunk-BI4EGLPG.js';
+import * as React from 'react';
+import { toast } from 'sonner';
+import { useRouter } from 'next/navigation';
+import { Loader2, UserPlus, KeyRound, Pencil } 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 AccountsManager({
+  users,
+  officers,
+  roles,
+  currentUserId,
+  createAction,
+  editAction,
+  setActiveAction,
+  resetPasswordAction
+}) {
+  const t = useCopy().admin.accountsPage;
+  const { rules } = useOvrConfig();
+  const router = useRouter();
+  const [busyId, setBusyId] = React.useState(null);
+  const { pageItems, page, setPage, totalPages, from, to, total } = usePagination(users, 12);
+  const fmtDate = (iso) => new Date(iso).toLocaleDateString(rules.locale, {
+    timeZone: rules.timeZone,
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+  async function toggleActive(u) {
+    setBusyId(u.id);
+    try {
+      const res = await setActiveAction(u.id, !u.active);
+      if (res?.error) {
+        toast.error(res.error);
+        return;
+      }
+      router.refresh();
+    } finally {
+      setBusyId(null);
+    }
+  }
+  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(
+        NewAccountDialog,
+        {
+          officers,
+          roles,
+          createAction,
+          onCreated: () => router.refresh()
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "p-0", children: users.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.username }),
+          /* @__PURE__ */ jsx(TableHead, { children: t.role }),
+          /* @__PURE__ */ jsx(TableHead, { children: t.officer }),
+          /* @__PURE__ */ jsx(TableHead, { children: t.status }),
+          /* @__PURE__ */ jsx(TableHead, { children: t.created }),
+          /* @__PURE__ */ jsx(TableHead, { className: "text-right", children: t.actions })
+        ] }) }),
+        /* @__PURE__ */ jsx(TableBody, { children: pageItems.map((u) => {
+          const isSelf = u.id === currentUserId;
+          return /* @__PURE__ */ jsxs(TableRow, { children: [
+            /* @__PURE__ */ jsxs(TableCell, { className: "font-medium", children: [
+              u.username,
+              isSelf ? /* @__PURE__ */ jsxs("span", { className: "ml-1.5 text-xs text-muted-foreground", children: [
+                "(",
+                t.you,
+                ")"
+              ] }) : null
+            ] }),
+            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { variant: "secondary", children: u.roleLabel ?? u.role }) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "text-muted-foreground", children: u.officerName ?? "\u2014" }),
+            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Badge, { variant: u.active ? "default" : "outline", children: u.active ? t.active : t.inactive }) }),
+            /* @__PURE__ */ jsx(TableCell, { className: "text-muted-foreground", children: fmtDate(u.createdAt) }),
+            /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-1.5", children: [
+              /* @__PURE__ */ jsx(
+                EditAccountDialog,
+                {
+                  user: u,
+                  officers,
+                  roles,
+                  editAction,
+                  onSaved: () => router.refresh()
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ResetPasswordDialog,
+                {
+                  user: u,
+                  resetPasswordAction
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: u.active ? "destructive" : "outline",
+                  size: "sm",
+                  disabled: isSelf || busyId === u.id,
+                  onClick: () => toggleActive(u),
+                  title: isSelf ? "You can't deactivate yourself." : void 0,
+                  children: [
+                    busyId === u.id ? /* @__PURE__ */ jsx(Loader2, { className: "size-3.5 animate-spin" }) : null,
+                    u.active ? t.deactivate : t.activate
+                  ]
+                }
+              )
+            ] }) })
+          ] }, u.id);
+        }) })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Pagination,
+        {
+          page,
+          totalPages,
+          from,
+          to,
+          total,
+          onPage: setPage
+        }
+      )
+    ] }) }) })
+  ] });
+}
+function NewAccountDialog({
+  officers,
+  roles,
+  createAction,
+  onCreated
+}) {
+  const t = useCopy().admin.accountsPage;
+  const defaultRole = roles.find((r) => r.name === "ENFORCER")?.name ?? roles[0]?.name ?? "";
+  const [open, setOpen] = React.useState(false);
+  const [username, setUsername] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [role, setRole] = React.useState(defaultRole);
+  const [officerId, setOfficerId] = React.useState("");
+  const [submitting, setSubmitting] = React.useState(false);
+  const selectedRole = roles.find((r) => r.name === role);
+  const showOfficer = hasPermission(selectedRole?.permissions, "tickets:create");
+  function reset() {
+    setUsername("");
+    setPassword("");
+    setRole(defaultRole);
+    setOfficerId("");
+  }
+  async function submit(e) {
+    e.preventDefault();
+    if (!username.trim()) return toast.error(`${t.username} is required.`);
+    if (password.length < 6)
+      return toast.error("Password must be at least 6 characters.");
+    if (!role) return toast.error(`${t.role} is required.`);
+    setSubmitting(true);
+    try {
+      const res = await createAction({
+        username: username.trim(),
+        password,
+        role,
+        officerId: showOfficer && officerId ? officerId : null
+      });
+      if (res?.error) {
+        toast.error(res.error);
+        return;
+      }
+      toast.success(`Account "${username.trim()}" created.`);
+      reset();
+      setOpen(false);
+      onCreated();
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs(DialogTrigger, { render: /* @__PURE__ */ jsx(Button, { className: "gap-1.5" }), children: [
+      /* @__PURE__ */ jsx(UserPlus, { className: "size-4" }),
+      t.newAccount
+    ] }),
+    /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: t.newAccount }),
+        /* @__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: "acc-username", children: t.username }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "acc-username",
+              value: username,
+              onChange: (e) => setUsername(e.target.value),
+              autoComplete: "off",
+              autoFocus: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "acc-password", children: t.password }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: "acc-password",
+              type: "password",
+              value: password,
+              onChange: (e) => setPassword(e.target.value),
+              autoComplete: "new-password"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "acc-role", children: t.role }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              id: "acc-role",
+              value: role,
+              onChange: (e) => setRole(e.target.value),
+              className: fieldClass,
+              children: roles.map((r) => /* @__PURE__ */ jsx("option", { value: r.name, children: r.label }, r.name))
+            }
+          )
+        ] }),
+        showOfficer ? /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "acc-officer", children: t.officer }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              id: "acc-officer",
+              value: officerId,
+              onChange: (e) => setOfficerId(e.target.value),
+              className: fieldClass,
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: t.officerNone }),
+                officers.map((o) => /* @__PURE__ */ jsxs("option", { value: o.id, children: [
+                  o.name,
+                  o.badgeNo ? ` (${o.badgeNo})` : ""
+                ] }, o.id))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t.officerHint })
+        ] }) : 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: submitting, className: "gap-1.5", children: [
+            submitting ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(UserPlus, { className: "size-4" }),
+            submitting ? t.creating : t.create
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function ResetPasswordDialog({
+  user,
+  resetPasswordAction
+}) {
+  const t = useCopy().admin.accountsPage;
+  const [open, setOpen] = React.useState(false);
+  const [password, setPassword] = React.useState("");
+  const [submitting, setSubmitting] = React.useState(false);
+  async function submit(e) {
+    e.preventDefault();
+    if (password.length < 6)
+      return toast.error("Password must be at least 6 characters.");
+    setSubmitting(true);
+    try {
+      const res = await resetPasswordAction(user.id, password);
+      if (res?.error) {
+        toast.error(res.error);
+        return;
+      }
+      toast.success(`Password reset for "${user.username}".`);
+      setPassword("");
+      setOpen(false);
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs(
+      DialogTrigger,
+      {
+        render: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: "gap-1.5" }),
+        children: [
+          /* @__PURE__ */ jsx(KeyRound, { className: "size-3.5" }),
+          /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: t.resetPassword })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-sm", children: [
+      /* @__PURE__ */ jsxs(DialogHeader, { children: [
+        /* @__PURE__ */ jsx(DialogTitle, { children: t.resetPassword }),
+        /* @__PURE__ */ jsxs(DialogDescription, { children: [
+          t.resetPassword,
+          " \u2014 ",
+          /* @__PURE__ */ jsx("span", { className: "font-medium", children: user.username })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("form", { onSubmit: submit, className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: `reset-${user.id}`, children: t.newPassword }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              id: `reset-${user.id}`,
+              type: "password",
+              value: password,
+              onChange: (e) => setPassword(e.target.value),
+              autoComplete: "new-password",
+              autoFocus: true
+            }
+          )
+        ] }),
+        /* @__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 ? t.saving : t.save
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function EditAccountDialog({
+  user,
+  officers,
+  roles,
+  editAction,
+  onSaved
+}) {
+  const t = useCopy().admin.accountsPage;
+  const [open, setOpen] = React.useState(false);
+  const [username, setUsername] = React.useState(user.username);
+  const [role, setRole] = React.useState(user.role);
+  const [officerId, setOfficerId] = React.useState(user.officerId ?? "");
+  const [submitting, setSubmitting] = React.useState(false);
+  const selectedRole = roles.find((r) => r.name === role);
+  const showOfficer = hasPermission(selectedRole?.permissions, "tickets:create");
+  async function submit(e) {
+    e.preventDefault();
+    if (!username.trim()) return toast.error(`${t.username} is required.`);
+    setSubmitting(true);
+    try {
+      const res = await editAction(user.id, {
+        username: username.trim(),
+        role,
+        officerId: showOfficer && officerId ? officerId : null
+      });
+      if (res?.error) {
+        toast.error(res.error);
+        return;
+      }
+      toast.success(`${t.editTitle}: ${username.trim()}`);
+      setOpen(false);
+      onSaved();
+    } finally {
+      setSubmitting(false);
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open,
+      onOpenChange: (o) => {
+        if (o) {
+          setUsername(user.username);
+          setRole(user.role);
+          setOfficerId(user.officerId ?? "");
+        }
+        setOpen(o);
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          DialogTrigger,
+          {
+            render: /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", className: "gap-1.5" }),
+            children: [
+              /* @__PURE__ */ jsx(Pencil, { className: "size-3.5" }),
+              /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: t.edit })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
+          /* @__PURE__ */ jsxs(DialogHeader, { children: [
+            /* @__PURE__ */ jsx(DialogTitle, { children: t.editTitle }),
+            /* @__PURE__ */ jsx(DialogDescription, { children: user.username })
+          ] }),
+          /* @__PURE__ */ jsxs("form", { onSubmit: submit, className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: `edit-username-${user.id}`, children: t.username }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: `edit-username-${user.id}`,
+                  value: username,
+                  onChange: (e) => setUsername(e.target.value),
+                  autoComplete: "off"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: `edit-role-${user.id}`, children: t.role }),
+              /* @__PURE__ */ jsx(
+                "select",
+                {
+                  id: `edit-role-${user.id}`,
+                  value: role,
+                  onChange: (e) => setRole(e.target.value),
+                  className: fieldClass,
+                  children: roles.map((r) => /* @__PURE__ */ jsx("option", { value: r.name, children: r.label }, r.name))
+                }
+              )
+            ] }),
+            showOfficer ? /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: `edit-officer-${user.id}`, children: t.officer }),
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  id: `edit-officer-${user.id}`,
+                  value: officerId,
+                  onChange: (e) => setOfficerId(e.target.value),
+                  className: fieldClass,
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "", children: t.officerNone }),
+                    officers.map((o) => /* @__PURE__ */ jsxs("option", { value: o.id, children: [
+                      o.name,
+                      o.badgeNo ? ` (${o.badgeNo})` : ""
+                    ] }, o.id))
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t.officerHint })
+            ] }) : 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: submitting, className: "gap-1.5", children: [
+                submitting ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(Pencil, { className: "size-4" }),
+                submitting ? t.saving : t.saveChanges
+              ] })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+
+export { AccountsManager };

package/dist/ui-components-admin/admin-nav.d.ts

@@ -1,7 +1,21 @@
 import * as React from 'react';
 
-declare function AdminNav({ signOutAction, }: {
+/**
+ * Self-service change-password dialog (GE-024). Controlled by the user menu. On
+ * success it re-caches the offline-login verifier with the new password so
+ * offline login keeps working. The actual verify+update is the injected server
+ * action (argon2 stays server-side).
+ */
+
+type ChangePasswordAction = (currentPassword: string, newPassword: string) => Promise<{
+    error?: string;
+} | void>;
+
+declare function AdminNav({ signOutAction, changePasswordAction, }: {
     signOutAction: () => Promise<void>;
+    /** Optional self-service password change (GE-024). When provided, a
+     *  "Change password" item appears in the user menu. */
+    changePasswordAction?: ChangePasswordAction;
 }): React.JSX.Element;
 
 export { AdminNav };