@stacksjs/defaults 0.70.229 → 0.70.230

package/views/dashboard/mailboxes/index.stx

@@ -1,149 +1,10 @@
 @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>
+@title('Dashboard - Mailboxes')
 
-    <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 class="px-4 py-6 sm:px-6 lg:px-8 lg:py-8 min-h-screen">
+  <MailboxesDashboard />
 </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

@@ -1,490 +1,7 @@
 @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>
+<PermissionsDashboard />
 @endsection