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/router.tsx

@@ -9,8 +9,8 @@ import {
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useQueryClient } from "@tanstack/react-query";
-import type { Lang, SessionUser } from "./api.js";
-import { closeShift, logout, openShift, setLanguagePref } from "./api.js";
+import type { Lang, Permission, SessionUser } from "./api.js";
+import { can, closeShift, logout, openShift, setLanguagePref } from "./api.js";
 import { qk, queryClient } from "./lib/query.js";
 import { setLanguage } from "./lib/i18n/index.js";
 import { useLiveFeed } from "./lib/use-live-feed.js";
@@ -23,6 +23,8 @@ import { TariffComposer } from "./TariffComposer.js";
 import { SubscriptionManager } from "./SubscriptionManager.js";
 import { ShiftControl } from "./ShiftControl.js";
 import { SiteSettings } from "./SiteSettings.js";
+import { UsersManager } from "./UsersManager.js";
+import { RolesManager } from "./RolesManager.js";
 
 // Code-based TanStack Router (no file-based codegen — the app is small enough that
 // an explicit tree is clearer). The router context carries the signed-in user and
@@ -154,7 +156,9 @@ function RootLayout() {
   const { t } = useTranslation();
   // One app-wide WebSocket for the live feed (booth + any live widget).
   useLiveFeed();
-  const isAdmin = user?.role === "admin";
+  // Nav is gated by PERMISSION, not role — a tab shows iff the user's role grants
+  // the permission its screen needs (the route guards enforce the same server-side).
+  const show = (perm: Permission) => can(user, perm);
 
   return (
     <div className="flex h-screen flex-col bg-term-bg text-term-text">
@@ -163,17 +167,19 @@ function RootLayout() {
         <nav className="flex items-center gap-1">
           <NavLink to="/booth" label={t("nav.booth")} />
           <NavLink to="/shift" label={t("nav.shift")} />
-          {isAdmin && <NavLink to="/setup" label={t("nav.setup")} />}
-          {isAdmin && <NavLink to="/tariff" label={t("nav.tariff")} />}
-          {isAdmin && <NavLink to="/subscriptions" label={t("nav.subscriptions")} />}
-          {isAdmin && <NavLink to="/site" label={t("nav.site")} />}
+          {show("site:update") && <NavLink to="/setup" label={t("nav.setup")} />}
+          {show("tariff:read") && <NavLink to="/tariff" label={t("nav.tariff")} />}
+          {show("subscription:read") && <NavLink to="/subscriptions" label={t("nav.subscriptions")} />}
+          {show("site:read") && <NavLink to="/site" label={t("nav.site")} />}
+          {show("user:read") && <NavLink to="/users" label={t("nav.users")} />}
+          {show("role:read") && <NavLink to="/roles" label={t("nav.roles")} />}
         </nav>
         <div className="ml-auto flex items-center gap-3">
           {user && <ShiftButton />}
           {user && <LanguageToggle user={user} setUser={setUser} />}
           <StatusDot />
           <span className="text-[11px] text-term-muted">
-            {user?.username} · {user?.role}
+            {user?.username} · {user?.roleName}
           </span>
           <button
             type="button"
@@ -215,38 +221,64 @@ const shiftRoute = createRoute({
   path: "/shift",
   component: function ShiftRoute() {
     const { user } = rootRoute.useRouteContext();
-    return <ShiftControl isAdmin={user?.role === "admin"} />;
+    // "Admin" actions on the shift screen (drawer cash) need shift:cash.
+    return <ShiftControl isAdmin={can(user, "shift:cash")} />;
   },
 });
 
-/** Guard: admin-only routes redirect non-admins back to the booth. */
-function adminOnly(ctx: RouterContext) {
-  if (ctx.user?.role !== "admin") throw redirect({ to: "/booth" });
+/** Guard factory: a route requiring `perm` redirects a user who lacks it back to
+ *  the booth. Same permission the server enforces — defence in depth, not the only
+ *  gate. */
+function requirePerm(perm: Permission) {
+  return (ctx: RouterContext) => {
+    if (!can(ctx.user, perm)) throw redirect({ to: "/booth" });
+  };
 }
 
 const setupRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: "/setup",
-  beforeLoad: ({ context }) => adminOnly(context),
+  beforeLoad: ({ context }) => requirePerm("site:update")(context),
   component: () => <SetupWizard />,
 });
 const tariffRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: "/tariff",
-  beforeLoad: ({ context }) => adminOnly(context),
+  beforeLoad: ({ context }) => requirePerm("tariff:read")(context),
   component: () => <TariffComposer />,
 });
 const subscriptionsRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: "/subscriptions",
-  beforeLoad: ({ context }) => adminOnly(context),
+  beforeLoad: ({ context }) => requirePerm("subscription:read")(context),
   component: () => <SubscriptionManager />,
 });
 const siteRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: "/site",
-  beforeLoad: ({ context }) => adminOnly(context),
-  component: () => <SiteSettings canEdit={true} />,
+  beforeLoad: ({ context }) => requirePerm("site:read")(context),
+  component: function SiteRoute() {
+    const { user } = rootRoute.useRouteContext();
+    return <SiteSettings canEdit={can(user, "site:update")} />;
+  },
+});
+const usersRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/users",
+  beforeLoad: ({ context }) => requirePerm("user:read")(context),
+  component: function UsersRoute() {
+    const { user } = rootRoute.useRouteContext();
+    return <UsersManager user={user} />;
+  },
+});
+const rolesRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/roles",
+  beforeLoad: ({ context }) => requirePerm("role:read")(context),
+  component: function RolesRoute() {
+    const { user } = rootRoute.useRouteContext();
+    return <RolesManager user={user} />;
+  },
 });
 
 const routeTree = rootRoute.addChildren([
@@ -257,6 +289,8 @@ const routeTree = rootRoute.addChildren([
   tariffRoute,
   subscriptionsRoute,
   siteRoute,
+  usersRoute,
+  rolesRoute,
 ]);
 
 export const router = createRouter({