feat(auth): dynamic RBAC — composable roles + resource×CRUD permissions

Replace the hardcoded role enum (admin/operator/cashier/readonly, checked
literally as requireRole("admin",...) across ~15 routes) with dynamic RBAC:
roles are DATA, route guards check a PERMISSION.

@parking/shared defines a code-defined grid: RESOURCES (user/role/tariff/
subscription/site/device/shift/payment/session/event/report) × Action
(create/read/update/delete + domain verbs void/cash) -> PERMISSIONS
(resource:action, e.g. tariff:update, payment:create, event:void).

DB: new roles + role_permissions tables; users.role enum -> role_id FK;
migration 0007_rbac (create tables, seed the builtin admin role + all 26
perms, seed operator/cashier/readonly composable roles matching old
behaviour, rebuild users to swap the column copying all rows).

auth.ts: JWT payload role -> roleId; permissionsFor(roleId) with an
in-memory cache + bumpPermsCache(); requirePermission(...perms) preHandler;
requireAuth for /me & /language; initAuth(db) wires the resolver once. Every
route guard mapped to a permission; device ingress (devices/qr-reader) stays
auth-free by design. New routes/users.ts (user:* CRUD, bcrypt 12, last-admin
guard) + routes/roles.ts (role:* CRUD, builtin-protected, perms validated
against the grid, cache bump on write). auth/me + /login return
{roleId, roleName, permissions, language}. seed-admin -> roleId:'admin'.

Frontend: SessionUser carries permissions + can() helper; router nav/route
guards gate by permission (requirePerm replaces adminOnly); SiteSettings
edit gated by site:update; new UsersManager + RolesManager (permission
checkbox grid; admin role locked); i18n nav.users/roles + blocks (sq+en).

Decisions: one role per user; protected built-in admin (no-lockout: the last
admin can't be deleted/downgraded); JWT carries roleId, perms resolved
per-request so role edits apply immediately (no re-login).

Verified: full build green; 20-assertion inject test passes (cashier 403s on
tariff publish + user list, admin passes, granting a perm applies on the next
request, last-admin + builtin-role protections return 409); migration 0007
applied to a copy of the live DB (incl WAL/shm) — existing admin maps to
role_id='admin', all rows preserved. Append-only event chain untouched
(event:void gates appending a void, not a delete).

Claude-Session: https://claude.ai/code/session_01Xcm6ikLgGoCxxHrxtjkk5V

apps/web/src/UsersManager.tsx

@@ -0,0 +1,232 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  ApiError,
+  can,
+  createUser,
+  deleteUser,
+  fetchRoles,
+  fetchUsers,
+  resetUserPassword,
+  updateUser,
+  type ManagedRole,
+  type ManagedUser,
+  type SessionUser,
+} from "./api.js";
+
+// User management (admin). List users, create one (username + password + role),
+// change a user's role, reset a password, delete. The server enforces the same
+// permissions and the no-lockout rule (the last admin can't be removed). See
+// wiki/entities/local-jwt-auth.md.
+
+export function UsersManager({ user }: { user: SessionUser | null }) {
+  const { t } = useTranslation();
+  const qc = useQueryClient();
+  const usersQ = useQuery({ queryKey: ["users"], queryFn: fetchUsers });
+  const rolesQ = useQuery({ queryKey: ["roles"], queryFn: fetchRoles });
+
+  const canCreate = can(user, "user:create");
+  const canUpdate = can(user, "user:update");
+  const canDelete = can(user, "user:delete");
+
+  const roles: ManagedRole[] = rolesQ.data?.roles ?? [];
+  const [error, setError] = useState<string | null>(null);
+  const [adding, setAdding] = useState(false);
+
+  const invalidate = () => void qc.invalidateQueries({ queryKey: ["users"] });
+  const onError = (e: unknown) =>
+    setError(e instanceof ApiError ? e.message : (e as Error).message);
+
+  return (
+    <div className="mx-auto max-w-3xl">
+      <div className="mb-3 flex items-center justify-between">
+        <h1 className="text-sm font-bold uppercase tracking-widest text-term-amber">{t("users.title")}</h1>
+        {canCreate && roles.length > 0 && (
+          <button
+            type="button"
+            onClick={() => { setAdding(true); setError(null); }}
+            className="rounded-term border border-term-green bg-term-green/10 px-3 py-1 text-[12px] uppercase tracking-wider text-term-green"
+          >
+            {t("users.add")}
+          </button>
+        )}
+      </div>
+
+      {error && <div className="mb-2 rounded-term border border-term-red px-3 py-2 text-[12px] text-term-red">{error}</div>}
+
+      {adding && (
+        <UserForm
+          roles={roles}
+          onCancel={() => setAdding(false)}
+          onSubmit={async (v) => {
+            try {
+              await createUser({ username: v.username, password: v.password, roleId: v.roleId });
+              setAdding(false);
+              invalidate();
+            } catch (e) { onError(e); }
+          }}
+        />
+      )}
+
+      <div className="overflow-hidden rounded-term border border-term-border">
+        <table className="w-full text-[12px]">
+          <thead className="bg-term-panel-2 text-[11px] uppercase tracking-wider text-term-muted">
+            <tr>
+              <th className="px-3 py-1.5 text-left">{t("users.username")}</th>
+              <th className="px-3 py-1.5 text-left">{t("users.role")}</th>
+              <th className="px-3 py-1.5 text-right">{t("common.none")}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {(usersQ.data?.users ?? []).map((u) => (
+              <UserRow
+                key={u.id}
+                u={u}
+                roles={roles}
+                canUpdate={canUpdate}
+                canDelete={canDelete}
+                onChanged={invalidate}
+                onError={onError}
+              />
+            ))}
+            {usersQ.data?.users.length === 0 && (
+              <tr><td colSpan={3} className="px-3 py-3 text-term-muted">{t("users.none")}</td></tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function UserRow({
+  u, roles, canUpdate, canDelete, onChanged, onError,
+}: {
+  u: ManagedUser;
+  roles: ManagedRole[];
+  canUpdate: boolean;
+  canDelete: boolean;
+  onChanged: () => void;
+  onError: (e: unknown) => void;
+}) {
+  const { t } = useTranslation();
+  const [resetting, setResetting] = useState(false);
+  const [pw, setPw] = useState("");
+
+  const roleMut = useMutation({
+    mutationFn: (roleId: string) => updateUser(u.id, { roleId }),
+    onSuccess: onChanged,
+    onError,
+  });
+  const pwMut = useMutation({
+    mutationFn: () => resetUserPassword(u.id, pw),
+    onSuccess: () => { setResetting(false); setPw(""); },
+    onError,
+  });
+  const delMut = useMutation({
+    mutationFn: () => deleteUser(u.id),
+    onSuccess: onChanged,
+    onError,
+  });
+
+  return (
+    <tr className="border-t border-term-border">
+      <td className="px-3 py-1.5">{u.username}</td>
+      <td className="px-3 py-1.5">
+        {canUpdate ? (
+          <select
+            value={u.roleId}
+            onChange={(e) => roleMut.mutate(e.target.value)}
+            className="rounded-term border border-term-border bg-term-panel px-2 py-0.5 text-[12px]"
+          >
+            {roles.map((r) => <option key={r.id} value={r.id}>{r.name}</option>)}
+          </select>
+        ) : (
+          u.roleName
+        )}
+      </td>
+      <td className="px-3 py-1.5 text-right">
+        <div className="flex justify-end gap-2">
+          {canUpdate && !resetting && (
+            <button type="button" onClick={() => setResetting(true)}
+              className="text-[11px] uppercase tracking-wider text-term-muted hover:text-term-text">
+              {t("users.resetPassword")}
+            </button>
+          )}
+          {canUpdate && resetting && (
+            <span className="flex items-center gap-1">
+              <input
+                type="password" value={pw} autoFocus
+                onChange={(e) => setPw(e.target.value)}
+                placeholder={t("users.newPassword")}
+                className="w-32 rounded-term border border-term-border bg-term-panel px-2 py-0.5 text-[12px]"
+              />
+              <button type="button" disabled={pw.length < 8 || pwMut.isPending} onClick={() => pwMut.mutate()}
+                className="text-[11px] uppercase tracking-wider text-term-green disabled:opacity-40">
+                {t("common.save")}
+              </button>
+              <button type="button" onClick={() => { setResetting(false); setPw(""); }}
+                className="text-[11px] uppercase tracking-wider text-term-muted">✕</button>
+            </span>
+          )}
+          {canDelete && (
+            <button
+              type="button"
+              onClick={() => { if (confirm(t("users.confirmDelete", { name: u.username }))) delMut.mutate(); }}
+              className="text-[11px] uppercase tracking-wider text-term-red hover:text-term-text"
+            >
+              {t("users.delete")}
+            </button>
+          )}
+        </div>
+      </td>
+    </tr>
+  );
+}
+
+function UserForm({
+  roles, onCancel, onSubmit,
+}: {
+  roles: ManagedRole[];
+  onCancel: () => void;
+  onSubmit: (v: { username: string; password: string; roleId: string }) => void;
+}) {
+  const { t } = useTranslation();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [roleId, setRoleId] = useState(roles[0]?.id ?? "");
+  const valid = username.trim().length > 0 && password.length >= 8 && roleId;
+
+  return (
+    <div className="mb-3 rounded-term border border-term-border bg-term-panel p-3">
+      <div className="mb-2 text-[12px] font-semibold uppercase tracking-wider text-term-amber">{t("users.new")}</div>
+      <div className="grid grid-cols-3 gap-2">
+        <label className="text-[11px] text-term-muted">
+          {t("users.username")}
+          <input value={username} onChange={(e) => setUsername(e.target.value)}
+            className="mt-1 w-full rounded-term border border-term-border bg-term-panel-2 px-2 py-1 text-[12px] text-term-text" />
+        </label>
+        <label className="text-[11px] text-term-muted">
+          {t("users.password")}
+          <input type="password" value={password} onChange={(e) => setPassword(e.target.value)}
+            className="mt-1 w-full rounded-term border border-term-border bg-term-panel-2 px-2 py-1 text-[12px] text-term-text" />
+        </label>
+        <label className="text-[11px] text-term-muted">
+          {t("users.role")}
+          <select value={roleId} onChange={(e) => setRoleId(e.target.value)}
+            className="mt-1 w-full rounded-term border border-term-border bg-term-panel-2 px-2 py-1 text-[12px] text-term-text">
+            {roles.map((r) => <option key={r.id} value={r.id}>{r.name}</option>)}
+          </select>
+        </label>
+      </div>
+      <div className="mt-1 text-[10px] text-term-muted">{t("users.passwordHint")}</div>
+      <div className="mt-2 flex justify-end gap-2">
+        <button type="button" onClick={onCancel}
+          className="rounded-term border border-term-border px-3 py-1 text-[12px] uppercase tracking-wider text-term-muted">{t("common.cancel")}</button>
+        <button type="button" disabled={!valid} onClick={() => onSubmit({ username: username.trim(), password, roleId })}
+          className="rounded-term border border-term-green bg-term-green/10 px-3 py-1 text-[12px] uppercase tracking-wider text-term-green disabled:opacity-40">{t("common.save")}</button>
+      </div>
+    </div>
+  );
+}