@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/mailboxes/index.stx

@@ -0,0 +1,149 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Emails')
+<div class="py-4 lg:py-8 min-h-screen dark:bg-neutral-800">
+  <div class="px-4 sm:px-6 lg:px-8">
+    <div class="mb-8 bg-white dark:bg-neutral-700 rounded-lg shadow">
+      <div class="p-6">
+        <div class="flex items-center justify-between mb-6">
+          <div>
+            <h3 class="font-medium text-base text-gray-900 dark:text-neutral-100">Email Activity</h3>
+            <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Received, sent, and spam email volume</p>
+          </div>
+          <select x-model="timeRange" class="pl-3 pr-8 py-1.5 h-9 text-gray-900 text-sm dark:text-neutral-100 bg-gray-50 dark:bg-neutral-600 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600">
+            <option value="day">Last 24 Hours</option>
+            <option value="week">Last 7 Days</option>
+            <option value="month">Last 30 Days</option>
+            <option value="year">Last Year</option>
+          </select>
+        </div>
+        <div class="relative h-[300px]">
+          <div :show="isLoading" class="flex absolute inset-0 z-10 items-center justify-center bg-opacity-75 bg-white dark:bg-neutral-700 dark:bg-opacity-75">
+            <div class="h-8 w-8 border-b-2 border-blue-500 rounded-full animate-spin"></div>
+          </div>
+          <canvas id="mailboxes_activity_chart"></canvas>
+        </div>
+      </div>
+    </div>
+
+    <div class="sm:flex sm:items-center mb-8">
+      <div class="sm:flex-auto">
+        <h1 class="font-semibold leading-6 text-base text-gray-900">Mailbox</h1>
+        <p class="mt-2 text-gray-700 text-sm dark:text-neutral-400">A list of all your project's email inboxes.</p>
+      </div>
+      <div class="sm:flex-none mt-4 sm:ml-16 sm:mt-0">
+        <button type="button" class="block px-3 py-2 font-semibold text-center text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm">Add Mailbox</button>
+      </div>
+    </div>
+
+    <div class="flow-root mt-8">
+      <div class="overflow-x-auto -mx-4 -my-2 sm:-mx-6 lg:-mx-8">
+        <div class="inline-block py-2 sm:px-6 lg:px-8 min-w-full align-middle">
+          <div class="overflow-hidden ring-1 ring-black ring-opacity-5 sm:rounded-lg shadow">
+            <table class="min-w-full divide-gray-300 divide-y">
+              <thead class="bg-gray-50 dark:bg-neutral-700/50">
+                <tr>
+                  <th scope="col" class="pl-4 pr-3 py-3.5 sm:pl-6 font-semibold text-gray-900 text-left text-sm">Inbox</th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm">Name</th>
+                  <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-right text-sm">Created At</th>
+                  <th scope="col" class="relative pl-3 pr-4 py-3.5 sm:pr-6"><span class="sr-only">Edit</span></th>
+                </tr>
+              </thead>
+
+              <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y">
+                <tr>
+                  <td class="pl-4 pr-3 py-4 sm:pl-6 font-medium text-gray-900 text-sm whitespace-nowrap">chris@stacksjs.com</td>
+                  <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap">Chris Breuer</td>
+                  <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap">2023-08-01</td>
+                  <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
+                    <a href="#" class="text-blue-600 hover:text-blue-900">Edit<span class="sr-only">, Email Inbox</span></a>
+                  </td>
+                </tr>
+
+                <tr>
+                  <td class="pl-4 pr-3 py-4 sm:pl-6 font-medium text-gray-900 text-sm whitespace-nowrap">blake@stacksjs.com</td>
+                  <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap">Blake</td>
+                  <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap">2024-01-11</td>
+                  <td class="relative pl-3 pr-4 py-4 sm:pr-6 font-medium text-right text-sm whitespace-nowrap">
+                    <a href="#" class="text-blue-600 hover:text-blue-900">Edit<span class="sr-only">, Email Inbox</span></a>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script client>
+
+interface ChartLike { destroy: () => void }
+type ChartCtor = new (canvas: HTMLElement, config: { type: string, data: unknown, options?: unknown }) => ChartLike
+
+const timeRange = state('day')
+const isLoading = state(false)
+
+let chartHandle: { destroy: () => void } | null = null
+
+const chartOptions = {
+  responsive: true,
+  maintainAspectRatio: false,
+  scales: {
+    y: {
+      beginAtZero: true,
+      grid: { color: 'rgba(200, 200, 200, 0.1)' },
+      ticks: { color: 'rgb(156, 163, 175)', font: { family: "'JetBrains Mono', monospace" } },
+    },
+    x: {
+      grid: { display: false },
+      ticks: { color: 'rgb(156, 163, 175)', font: { family: "'JetBrains Mono', monospace" } },
+    },
+  },
+  plugins: {
+    legend: {
+      display: true,
+      position: 'top',
+      align: 'end',
+      labels: { color: 'rgb(156, 163, 175)', font: { family: "'JetBrains Mono', monospace" }, boxWidth: 12, padding: 15 },
+    },
+    tooltip: { mode: 'index', intersect: false },
+  },
+}
+
+function getEmailActivityData() {
+  const labels = Array.from({ length: 24 }, (_, i) => `${i}:00`)
+  return {
+    labels,
+    datasets: [
+      { label: 'Received', data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 50) + 20), borderColor: 'rgb(59, 130, 246)', backgroundColor: 'rgba(59, 130, 246, 0.1)', fill: true },
+      { label: 'Sent', data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 30) + 10), borderColor: 'rgb(16, 185, 129)', backgroundColor: 'rgba(16, 185, 129, 0.1)', fill: true },
+      { label: 'Spam', data: Array.from({ length: 24 }, () => Math.floor(Math.random() * 10)), borderColor: 'rgb(239, 68, 68)', backgroundColor: 'rgba(239, 68, 68, 0.1)', fill: true },
+    ],
+  }
+}
+
+onMount(async () => {
+  isLoading.set(true)
+  const { Chart, registerables } = await import('@stacksjs/charts')
+  Chart.register(...registerables)
+  chartHandle = useChart({
+    Chart: Chart as unknown as ChartCtor,
+    id: 'mailboxes_activity_chart',
+    type: 'line',
+    data: getEmailActivityData(),
+    options: chartOptions,
+  })
+  await new Promise(resolve => setTimeout(resolve, 500))
+  isLoading.set(false)
+})
+
+onDestroy(() => {
+  chartHandle?.destroy()
+  chartHandle = null
+})
+</script>
+
+@endsection

package/views/dashboard/management/permissions/index.stx

@@ -0,0 +1,490 @@
+@extends('layouts/default')
+
+@section('content')
+<script client>
+  // RBAC management surface (stacksjs/stacks#1845).
+  //
+  // Lets an admin manage roles, permissions, per-user role attachments,
+  // and the role/permission matrix against the live `user_roles` /
+  // `role_permissions` / `user_permissions` pivots. All persistence
+  // flows through the `/api/dashboard/rbac/*` endpoints which delegate
+  // to `@stacksjs/auth`'s `Rbac` facade — no direct DB writes from the
+  // page.
+  //
+  // Follows #1838 conventions:
+  //   - No `<script server>` and no vanilla DOM reads.
+  //   - All state in the rbacStore; the page is pure presentation.
+  //   - Mutations are optimistic with rollback on failure (store handles
+  //     the snapshot/rollback dance).
+  import { useStore } from '@stacksjs/stx'
+  import { useRole } from '../../composables/useRole'
+
+  const rbac = useStore('rbac')
+  // Admin-only surface. Per `useRole.ts`, `isAdmin()` returns true for
+  // any user with the `admin` role *or* an unauthenticated viewer on
+  // the localhost dev dashboard — same permissive-dev defaults the rest
+  // of the management surface uses.
+  const { isAdmin } = useRole()
+  const canManage = derived(() => isAdmin())
+
+  // ─── Lifted store signals (for template auto-unwrap) ──────────
+
+  const loading = derived(() => rbac.loading())
+  const error = derived(() => rbac.error())
+  const roles = derived(() => rbac.roles())
+  const permissions = derived(() => rbac.permissions())
+  const users = derived(() => rbac.users())
+
+  // ─── Tab state ────────────────────────────────────────────────
+
+  const activeTab = state('roles')
+
+  function tabClass(id) {
+    const base = 'px-4 py-2 font-medium text-sm whitespace-nowrap bg-transparent border-b-2 transition-colors cursor-pointer '
+    return activeTab() === id
+      ? base + 'border-violet-400 text-violet-600 dark:text-violet-400'
+      : base + 'border-transparent text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300'
+  }
+
+  function selectTab(id) {
+    activeTab.set(id)
+    selectedUserId.set(null)
+    selectedRoleName.set(null)
+  }
+
+  // ─── Filters ──────────────────────────────────────────────────
+
+  const roleFilter = state('')
+  const permissionFilter = state('')
+  const userFilter = state('')
+
+  const filteredRoles = derived(() => {
+    const q = roleFilter().toLowerCase()
+    if (!q) return roles()
+    return roles().filter(r => r.name.toLowerCase().includes(q) || (r.description || '').toLowerCase().includes(q))
+  })
+
+  const filteredPermissions = derived(() => {
+    const q = permissionFilter().toLowerCase()
+    if (!q) return permissions()
+    return permissions().filter(p => p.name.toLowerCase().includes(q) || (p.description || '').toLowerCase().includes(q))
+  })
+
+  const filteredUsers = derived(() => {
+    const q = userFilter().toLowerCase()
+    if (!q) return users()
+    return users().filter(u => (u.name || '').toLowerCase().includes(q) || (u.email || '').toLowerCase().includes(q))
+  })
+
+  // ─── Create-role form ─────────────────────────────────────────
+
+  const newRoleName = state('')
+  const newRoleDescription = state('')
+  const newRoleGuard = state('web')
+  const submittingRole = state(false)
+
+  async function submitNewRole() {
+    const name = newRoleName().trim()
+    if (!name) return
+    submittingRole.set(true)
+    try {
+      const created = await rbac.createRole({
+        name,
+        guardName: newRoleGuard().trim() || 'web',
+        description: newRoleDescription().trim(),
+      })
+      if (created) {
+        newRoleName.set('')
+        newRoleDescription.set('')
+      }
+    }
+    finally {
+      submittingRole.set(false)
+    }
+  }
+
+  async function removeRole(name, guardName) {
+    // eslint-disable-next-line no-alert
+    if (typeof window !== 'undefined' && !window.confirm('Delete role "' + name + '"? This also detaches it from every user.'))
+      return
+    await rbac.deleteRole(name, guardName)
+  }
+
+  // ─── Create-permission form ───────────────────────────────────
+
+  const newPermName = state('')
+  const newPermDescription = state('')
+  const newPermGuard = state('web')
+  const submittingPerm = state(false)
+
+  async function submitNewPermission() {
+    const name = newPermName().trim()
+    if (!name) return
+    submittingPerm.set(true)
+    try {
+      const created = await rbac.createPermission({
+        name,
+        guardName: newPermGuard().trim() || 'web',
+        description: newPermDescription().trim(),
+      })
+      if (created) {
+        newPermName.set('')
+        newPermDescription.set('')
+      }
+    }
+    finally {
+      submittingPerm.set(false)
+    }
+  }
+
+  async function removePermission(name, guardName) {
+    // eslint-disable-next-line no-alert
+    if (typeof window !== 'undefined' && !window.confirm('Delete permission "' + name + '"? This also detaches it from every role.'))
+      return
+    await rbac.deletePermission(name, guardName)
+  }
+
+  // ─── User-role assignment drawer ──────────────────────────────
+
+  const selectedUserId = state(null)
+  const userRolesDraft = state([])
+  const savingUserRoles = state(false)
+
+  function selectUser(userId) {
+    selectedUserId.set(userId)
+    userRolesDraft.set([])
+    rbac.loadUserRoles(userId).then(() => {
+      userRolesDraft.set([...(rbac.userRoles()[userId] || [])])
+    })
+  }
+
+  function toggleUserRoleDraft(roleName) {
+    const list = userRolesDraft()
+    userRolesDraft.set(
+      list.includes(roleName)
+        ? list.filter(n => n !== roleName)
+        : [...list, roleName],
+    )
+  }
+
+  async function saveUserRoles() {
+    const uid = selectedUserId()
+    if (uid == null) return
+    savingUserRoles.set(true)
+    try {
+      await rbac.syncUserRoles(uid, userRolesDraft())
+    }
+    finally {
+      savingUserRoles.set(false)
+    }
+  }
+
+  function closeUserDrawer() {
+    selectedUserId.set(null)
+    userRolesDraft.set([])
+  }
+
+  function isRoleInDraft(roleName) {
+    return userRolesDraft().includes(roleName)
+  }
+
+  const selectedUser = derived(() => {
+    const uid = selectedUserId()
+    if (uid == null) return null
+    return users().find(u => u.id === uid) || null
+  })
+
+  // ─── Role-permission matrix ───────────────────────────────────
+
+  const selectedRoleName = state(null)
+  const rolePermsDraft = state([])
+  const savingRolePerms = state(false)
+
+  function selectRole(roleName, guardName) {
+    selectedRoleName.set(roleName)
+    rolePermsDraft.set([])
+    rbac.loadRolePermissions(roleName, guardName).then(() => {
+      rolePermsDraft.set([...(rbac.rolePermissions()[roleName] || [])])
+    })
+  }
+
+  function toggleRolePermDraft(permName) {
+    const list = rolePermsDraft()
+    rolePermsDraft.set(
+      list.includes(permName)
+        ? list.filter(n => n !== permName)
+        : [...list, permName],
+    )
+  }
+
+  async function saveRolePerms() {
+    const name = selectedRoleName()
+    if (!name) return
+    savingRolePerms.set(true)
+    try {
+      await rbac.syncRolePermissions(name, rolePermsDraft())
+    }
+    finally {
+      savingRolePerms.set(false)
+    }
+  }
+
+  function closeRoleDrawer() {
+    selectedRoleName.set(null)
+    rolePermsDraft.set([])
+  }
+
+  function isPermInDraft(permName) {
+    return rolePermsDraft().includes(permName)
+  }
+
+  const selectedRole = derived(() => {
+    const name = selectedRoleName()
+    if (!name) return null
+    return roles().find(r => r.name === name) || null
+  })
+
+  // ─── Tiny formatters ──────────────────────────────────────────
+
+  function formatDate(iso) {
+    if (!iso) return ''
+    const d = new Date(iso)
+    if (Number.isNaN(d.getTime())) return ''
+    return d.toLocaleDateString()
+  }
+
+  // Top-level fetch — runs on every page entry (hard reload + SPA swap).
+  // The store dedupes its own loading flag so back-to-back calls don't
+  // double-fire.
+  rbac.load()
+</script>
+
+@title('Dashboard - Permissions')
+<div class="mx-auto px-6 py-8 max-w-7xl">
+  <!-- Role-gated wrapper: only admins can manage RBAC. Unauthenticated
+      viewers on localhost see the surface as if they were admin so the
+      dev dashboard stays usable; production must put the auth
+      middleware in front of `/api/dashboard/rbac/*` to make that
+      guarantee real. -->
+  <div :if="!canManage" class="px-5 py-8 text-center bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 rounded-lg dark:border-zinc-800">
+    <p class="text-sm text-zinc-600 dark:text-zinc-400">This surface requires the admin role.</p>
+  </div>
+
+  <div :if="canManage">
+    <header class="mb-6">
+      <h1 class="font-semibold text-2xl text-zinc-900 dark:text-zinc-100">Permissions Management</h1>
+      <p class="mt-1 text-sm text-zinc-500">Manage roles, permissions, and user assignments. Backed by the live <code class="text-xs">user_roles</code> / <code class="text-xs">role_permissions</code> pivots.</p>
+    </header>
+
+    <!-- Error banner (initial load + transient mutation failures) -->
+    <div :if="error" class="mb-4 px-4 py-3 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950 border border-red-300 rounded-md dark:border-red-800">
+      <span :text="error"></span>
+    </div>
+
+    <!-- Loading state -->
+    <div :if="loading" class="px-5 py-8 text-center bg-white dark:bg-neutral-900 border border-zinc-200 rounded-lg dark:border-zinc-800">
+      <p class="text-sm text-zinc-500">Loading…</p>
+    </div>
+
+    <div :if="!loading">
+      <!-- Tabs -->
+      <div class="flex mb-6 border-b border-zinc-200 dark:border-zinc-800">
+        <button type="button" @click="selectTab('roles')" :class="tabClass('roles')">Roles</button>
+        <button type="button" @click="selectTab('permissions')" :class="tabClass('permissions')">Permissions</button>
+        <button type="button" @click="selectTab('users')" :class="tabClass('users')">Users</button>
+        <button type="button" @click="selectTab('matrix')" :class="tabClass('matrix')">Role × Permission</button>
+      </div>
+
+      <!-- ─── Roles tab ─────────────────────────────────────── -->
+      <div :if="activeTab() === 'roles'" class="space-y-6">
+        <div class="p-5 bg-white dark:bg-neutral-900 border border-zinc-200 rounded-lg dark:border-zinc-800">
+          <h2 class="mb-3 font-medium text-sm text-zinc-700 dark:text-zinc-300">Create role</h2>
+          <form @submit.prevent="submitNewRole()" class="grid gap-3 grid-cols-1 sm:grid-cols-4">
+            <input type="text" :value="newRoleName()" @input="newRoleName.set($event.target.value)" required maxlength="60" placeholder="Role name (e.g. editor)" class="block sm:col-span-2 px-3 py-1.5 text-sm text-zinc-900 dark:text-zinc-100 dark:bg-neutral-800 border-0 ring-1 ring-zinc-300 rounded-md dark:ring-zinc-700 focus:ring-2 focus:ring-violet-500" />
+            <input type="text" :value="newRoleDescription()" @input="newRoleDescription.set($event.target.value)" placeholder="Description (optional)" class="block px-3 py-1.5 text-sm text-zinc-900 dark:text-zinc-100 dark:bg-neutral-800 border-0 ring-1 ring-zinc-300 rounded-md dark:ring-zinc-700 focus:ring-2 focus:ring-violet-500" />
+            <button type="submit" :disabled="submittingRole()" class="block px-3 py-1.5 font-medium text-sm text-white bg-violet-600 hover:bg-violet-500 rounded-md disabled:opacity-50">Add role</button>
+          </form>
+        </div>
+
+        <div class="bg-white dark:bg-neutral-900 border border-zinc-200 rounded-lg dark:border-zinc-800">
+          <div class="flex gap-3 items-center justify-between px-5 py-3 border-b border-zinc-200 dark:border-zinc-800">
+            <h2 class="font-medium text-sm text-zinc-700 dark:text-zinc-300">Roles (<span :text="roles().length"></span>)</h2>
+            <input type="text" :value="roleFilter()" @input="roleFilter.set($event.target.value)" placeholder="Filter roles…" class="block px-3 py-1 w-64 text-xs text-zinc-900 dark:text-zinc-100 dark:bg-neutral-800 border-0 ring-1 ring-zinc-300 rounded-md dark:ring-zinc-700 focus:ring-2 focus:ring-violet-500" />
+          </div>
+          <div :if="filteredRoles().length === 0" class="px-5 py-8 text-center text-sm text-zinc-500">No roles yet.</div>
+          <table :if="filteredRoles().length > 0" class="min-w-full divide-y divide-zinc-200 dark:divide-zinc-800">
+            <thead class="bg-zinc-50 dark:bg-neutral-950/50">
+              <tr>
+                <th class="px-5 py-2 font-medium text-left text-xs text-zinc-500 tracking-wider uppercase">Name</th>
+                <th class="px-5 py-2 font-medium text-left text-xs text-zinc-500 tracking-wider uppercase">Guard</th>
+                <th class="px-5 py-2 font-medium text-left text-xs text-zinc-500 tracking-wider uppercase">Description</th>
+                <th class="px-5 py-2 font-medium text-left text-xs text-zinc-500 tracking-wider uppercase">Created</th>
+                <th class="px-5 py-2 font-medium text-right text-xs text-zinc-500 tracking-wider uppercase">Actions</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-zinc-200 dark:divide-zinc-800">
+              <template :for="role in filteredRoles">
+                <tr>
+                  <td class="px-5 py-2 font-medium text-sm text-zinc-900 dark:text-zinc-100">{{ role.name }}</td>
+                  <td class="px-5 py-2 text-xs text-zinc-500"><code>{{ role.guardName }}</code></td>
+                  <td class="px-5 py-2 text-sm text-zinc-600 dark:text-zinc-400">{{ role.description || '—' }}</td>
+                  <td class="px-5 py-2 text-xs text-zinc-500">{{ formatDate(role.createdAt) }}</td>
+                  <td class="px-5 py-2 text-right text-sm">
+                    <button type="button" @click="selectTab('matrix'); selectRole('{{ role.name }}', '{{ role.guardName }}')" class="mr-3 text-violet-600 dark:text-violet-400 hover:underline">Permissions</button>
+                    <button type="button" @click="removeRole('{{ role.name }}', '{{ role.guardName }}')" class="text-red-600 dark:text-red-400 hover:underline">Delete</button>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- ─── Permissions tab ───────────────────────────────── -->
+      <div :if="activeTab() === 'permissions'" class="space-y-6">
+        <div class="p-5 bg-white dark:bg-neutral-900 border border-zinc-200 rounded-lg dark:border-zinc-800">
+          <h2 class="mb-3 font-medium text-sm text-zinc-700 dark:text-zinc-300">Create permission</h2>
+          <form @submit.prevent="submitNewPermission()" class="grid gap-3 grid-cols-1 sm:grid-cols-4">
+            <input type="text" :value="newPermName()" @input="newPermName.set($event.target.value)" required maxlength="100" placeholder="Permission name (e.g. posts.publish)" class="block sm:col-span-2 px-3 py-1.5 text-sm text-zinc-900 dark:text-zinc-100 dark:bg-neutral-800 border-0 ring-1 ring-zinc-300 rounded-md dark:ring-zinc-700 focus:ring-2 focus:ring-violet-500" />
+            <input type="text" :value="newPermDescription()" @input="newPermDescription.set($event.target.value)" placeholder="Description (optional)" class="block px-3 py-1.5 text-sm text-zinc-900 dark:text-zinc-100 dark:bg-neutral-800 border-0 ring-1 ring-zinc-300 rounded-md dark:ring-zinc-700 focus:ring-2 focus:ring-violet-500" />
+            <button type="submit" :disabled="submittingPerm()" class="block px-3 py-1.5 font-medium text-sm text-white bg-violet-600 hover:bg-violet-500 rounded-md disabled:opacity-50">Add permission</button>
+          </form>
+        </div>
+
+        <div class="bg-white dark:bg-neutral-900 border border-zinc-200 rounded-lg dark:border-zinc-800">
+          <div class="flex gap-3 items-center justify-between px-5 py-3 border-b border-zinc-200 dark:border-zinc-800">
+            <h2 class="font-medium text-sm text-zinc-700 dark:text-zinc-300">Permissions (<span :text="permissions().length"></span>)</h2>
+            <input type="text" :value="permissionFilter()" @input="permissionFilter.set($event.target.value)" placeholder="Filter permissions…" class="block px-3 py-1 w-64 text-xs text-zinc-900 dark:text-zinc-100 dark:bg-neutral-800 border-0 ring-1 ring-zinc-300 rounded-md dark:ring-zinc-700 focus:ring-2 focus:ring-violet-500" />
+          </div>
+          <div :if="filteredPermissions().length === 0" class="px-5 py-8 text-center text-sm text-zinc-500">No permissions yet.</div>
+          <table :if="filteredPermissions().length > 0" class="min-w-full divide-y divide-zinc-200 dark:divide-zinc-800">
+            <thead class="bg-zinc-50 dark:bg-neutral-950/50">
+              <tr>
+                <th class="px-5 py-2 font-medium text-left text-xs text-zinc-500 tracking-wider uppercase">Name</th>
+                <th class="px-5 py-2 font-medium text-left text-xs text-zinc-500 tracking-wider uppercase">Guard</th>
+                <th class="px-5 py-2 font-medium text-left text-xs text-zinc-500 tracking-wider uppercase">Description</th>
+                <th class="px-5 py-2 font-medium text-left text-xs text-zinc-500 tracking-wider uppercase">Created</th>
+                <th class="px-5 py-2 font-medium text-right text-xs text-zinc-500 tracking-wider uppercase">Actions</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-zinc-200 dark:divide-zinc-800">
+              <template :for="perm in filteredPermissions">
+                <tr>
+                  <td class="px-5 py-2 font-medium text-sm text-zinc-900 dark:text-zinc-100">{{ perm.name }}</td>
+                  <td class="px-5 py-2 text-xs text-zinc-500"><code>{{ perm.guardName }}</code></td>
+                  <td class="px-5 py-2 text-sm text-zinc-600 dark:text-zinc-400">{{ perm.description || '—' }}</td>
+                  <td class="px-5 py-2 text-xs text-zinc-500">{{ formatDate(perm.createdAt) }}</td>
+                  <td class="px-5 py-2 text-right text-sm">
+                    <button type="button" @click="removePermission('{{ perm.name }}', '{{ perm.guardName }}')" class="text-red-600 dark:text-red-400 hover:underline">Delete</button>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- ─── Users tab ─────────────────────────────────────── -->
+      <div :if="activeTab() === 'users'" class="space-y-6">
+        <div class="bg-white dark:bg-neutral-900 border border-zinc-200 rounded-lg dark:border-zinc-800">
+          <div class="flex gap-3 items-center justify-between px-5 py-3 border-b border-zinc-200 dark:border-zinc-800">
+            <h2 class="font-medium text-sm text-zinc-700 dark:text-zinc-300">Users (<span :text="users().length"></span>)</h2>
+            <input type="text" :value="userFilter()" @input="userFilter.set($event.target.value)" placeholder="Filter users…" class="block px-3 py-1 w-64 text-xs text-zinc-900 dark:text-zinc-100 dark:bg-neutral-800 border-0 ring-1 ring-zinc-300 rounded-md dark:ring-zinc-700 focus:ring-2 focus:ring-violet-500" />
+          </div>
+          <div :if="filteredUsers().length === 0" class="px-5 py-8 text-center text-sm text-zinc-500">No users found.</div>
+          <table :if="filteredUsers().length > 0" class="min-w-full divide-y divide-zinc-200 dark:divide-zinc-800">
+            <thead class="bg-zinc-50 dark:bg-neutral-950/50">
+              <tr>
+                <th class="px-5 py-2 font-medium text-left text-xs text-zinc-500 tracking-wider uppercase">Name</th>
+                <th class="px-5 py-2 font-medium text-left text-xs text-zinc-500 tracking-wider uppercase">Email</th>
+                <th class="px-5 py-2 font-medium text-right text-xs text-zinc-500 tracking-wider uppercase">Actions</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-zinc-200 dark:divide-zinc-800">
+              <template :for="u in filteredUsers">
+                <tr>
+                  <td class="px-5 py-2 font-medium text-sm text-zinc-900 dark:text-zinc-100">{{ u.name || '—' }}</td>
+                  <td class="px-5 py-2 text-sm text-zinc-500">{{ u.email || '—' }}</td>
+                  <td class="px-5 py-2 text-right text-sm">
+                    <button type="button" @click="selectUser({{ u.id }})" class="text-violet-600 dark:text-violet-400 hover:underline">Manage roles</button>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <!-- ─── Role × Permission matrix tab ──────────────────── -->
+      <div :if="activeTab() === 'matrix'" class="space-y-4">
+        <div class="p-5 bg-white dark:bg-neutral-900 border border-zinc-200 rounded-lg dark:border-zinc-800">
+          <p class="text-sm text-zinc-500">Pick a role to edit its permission attachments.</p>
+        </div>
+        <div :if="roles().length === 0" class="px-5 py-8 text-center text-sm text-zinc-500 bg-white dark:bg-neutral-900 border border-zinc-200 rounded-lg dark:border-zinc-800">No roles yet — create one on the Roles tab.</div>
+        <div :if="roles().length > 0" class="grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+          <template :for="role in roles">
+            <button type="button" @click="selectRole('{{ role.name }}', '{{ role.guardName }}')" class="block px-4 py-3 text-left bg-white dark:bg-neutral-900 border border-zinc-200 rounded-lg dark:border-zinc-800 hover:border-violet-300 dark:hover:border-violet-700 transition-colors">
+              <div class="font-medium text-sm text-zinc-900 dark:text-zinc-100">{{ role.name }}</div>
+              <div class="mt-0.5 text-xs text-zinc-500">{{ role.description || 'No description' }}</div>
+            </button>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- ─── User-role drawer (right-side panel) ───────────────── -->
+  <div :if="selectedUserId() !== null" class="fixed inset-0 z-30">
+    <div class="fixed inset-0 bg-black/50" @click="closeUserDrawer()"></div>
+    <div class="flex fixed inset-y-0 right-0 flex-col w-full sm:w-[28rem] bg-white dark:bg-neutral-900 shadow-xl">
+      <div class="flex items-center justify-between px-5 py-3 border-b border-zinc-200 dark:border-zinc-800">
+        <h3 class="font-medium text-sm text-zinc-900 dark:text-zinc-100">
+          Roles for <span :if="selectedUser()" :text="selectedUser().name || selectedUser().email || ('User #' + selectedUser().id)"></span>
+        </h3>
+        <button type="button" @click="closeUserDrawer()" class="text-xs text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300">Close</button>
+      </div>
+      <div class="overflow-y-auto flex-1 px-5 py-4 space-y-2">
+        <div :if="roles().length === 0" class="text-sm text-zinc-500">No roles defined yet.</div>
+        <template :for="role in roles">
+          <label class="flex gap-2 items-center px-2 py-1.5 hover:bg-zinc-50 dark:hover:bg-neutral-800 rounded-md cursor-pointer">
+            <input type="checkbox" :checked="isRoleInDraft('{{ role.name }}')" @change="toggleUserRoleDraft('{{ role.name }}')" class="h-4 w-4 text-violet-600 border-zinc-300 rounded dark:border-zinc-700 focus:ring-violet-500" />
+            <span class="text-sm text-zinc-900 dark:text-zinc-100">{{ role.name }}</span>
+            <span class="text-xs text-zinc-500">{{ role.description || '' }}</span>
+          </label>
+        </template>
+      </div>
+      <div class="flex gap-2 items-center justify-end px-5 py-3 border-t border-zinc-200 dark:border-zinc-800">
+        <button type="button" @click="closeUserDrawer()" class="px-3 py-1.5 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-neutral-800 rounded-md">Cancel</button>
+        <button type="button" @click="saveUserRoles()" :disabled="savingUserRoles()" class="px-3 py-1.5 text-sm text-white bg-violet-600 hover:bg-violet-500 rounded-md disabled:opacity-50">Save</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ─── Role-permission drawer ────────────────────────────── -->
+  <div :if="selectedRoleName() !== null" class="fixed inset-0 z-30">
+    <div class="fixed inset-0 bg-black/50" @click="closeRoleDrawer()"></div>
+    <div class="flex fixed inset-y-0 right-0 flex-col w-full sm:w-[28rem] bg-white dark:bg-neutral-900 shadow-xl">
+      <div class="flex items-center justify-between px-5 py-3 border-b border-zinc-200 dark:border-zinc-800">
+        <h3 class="font-medium text-sm text-zinc-900 dark:text-zinc-100">
+          Permissions for <span :if="selectedRole()" :text="selectedRole().name"></span>
+        </h3>
+        <button type="button" @click="closeRoleDrawer()" class="text-xs text-zinc-500 hover:text-zinc-700 dark:hover:text-zinc-300">Close</button>
+      </div>
+      <div class="overflow-y-auto flex-1 px-5 py-4 space-y-2">
+        <div :if="permissions().length === 0" class="text-sm text-zinc-500">No permissions defined yet.</div>
+        <template :for="perm in permissions">
+          <label class="flex gap-2 items-center px-2 py-1.5 hover:bg-zinc-50 dark:hover:bg-neutral-800 rounded-md cursor-pointer">
+            <input type="checkbox" :checked="isPermInDraft('{{ perm.name }}')" @change="toggleRolePermDraft('{{ perm.name }}')" class="h-4 w-4 text-violet-600 border-zinc-300 rounded dark:border-zinc-700 focus:ring-violet-500" />
+            <span class="text-sm text-zinc-900 dark:text-zinc-100">{{ perm.name }}</span>
+            <span class="text-xs text-zinc-500">{{ perm.description || '' }}</span>
+          </label>
+        </template>
+      </div>
+      <div class="flex gap-2 items-center justify-end px-5 py-3 border-t border-zinc-200 dark:border-zinc-800">
+        <button type="button" @click="closeRoleDrawer()" class="px-3 py-1.5 text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-neutral-800 rounded-md">Cancel</button>
+        <button type="button" @click="saveRolePerms()" :disabled="savingRolePerms()" class="px-3 py-1.5 text-sm text-white bg-violet-600 hover:bg-violet-500 rounded-md disabled:opacity-50">Save</button>
+      </div>
+    </div>
+  </div>
+</div>
+@endsection