@kyro-cms/admin 0.3.2 → 0.3.5

package/src/pages/users/[id].astro

@@ -1,5 +1,8 @@
 ---
-import AdminLayout from '../../layouts/AdminLayout.astro';
+import AdminLayout from "../../layouts/AdminLayout.astro";
+import { UserDetail } from "../../components/users/UserDetail";
+
+import { adminPath, apiPath } from "../../lib/paths";
 
 const { id } = Astro.params;
 let user: any = null;
@@ -7,176 +10,44 @@ let error: string | null = null;
 
 if (id) {
   try {
-    const response = await fetch(`${Astro.url.origin}/api/users/${id}`, {
+    const response = await fetch(`${Astro.url.origin}${apiPath}/users/${id}`, {
       headers: Astro.request.headers,
-      credentials: 'include'
+      credentials: "include",
     });
     if (response.ok) {
       const data = await response.json();
       user = data.data;
     } else {
-      error = 'User not found';
+      error = "User not found";
     }
   } catch (e) {
-    error = 'Failed to fetch user';
+    error = "Failed to fetch user";
   }
 }
-
-const roleOptions = ['super_admin', 'admin', 'editor', 'author', 'customer', 'guest'];
 ---
 
-<AdminLayout title={user ? user.email : 'User'}>
-  <div class="flex-1 overflow-y-auto p-8 pr-12 space-y-8">
-    {error ? (
+<AdminLayout title={user ? user.email : "User"}>
+  {error ? (
+    <div class="flex-1 overflow-y-auto pr-12 space-y-8">
       <div class="surface-tile p-8">
         <div class="text-center">
           <p class="text-lg font-bold text-red-500">{error}</p>
-          <a href="/users" class="mt-4 inline-block text-[var(--kyro-text-primary)] font-bold underline">← Back to users</a>
+          <a href={`${adminPath}/users`} class="mt-4 inline-block text-[var(--kyro-text-primary)] font-bold underline">← Back to users</a>
         </div>
       </div>
-    ) : user ? (
-      <>
-        <!-- Header -->
-        <div class="surface-tile p-6 flex items-center justify-between">
-          <div class="flex items-center gap-4">
-            <div class="w-14 h-14 rounded-full bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] flex items-center justify-center font-bold text-xl">
-              {user.email.charAt(0).toUpperCase()}
-            </div>
-            <div>
-              <h1 class="text-2xl font-black tracking-tighter text-[var(--kyro-text-primary)]">{user.email}</h1>
-              <p class="text-sm text-[var(--kyro-text-secondary)] font-medium">User ID: {user.id}</p>
-            </div>
-          </div>
-          <div class="flex gap-2">
-            <button id="btn-toggle-lock" class="px-4 py-2 border border-[var(--kyro-border)] rounded-xl text-sm font-bold text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] transition-colors">
-              {user.locked ? 'Unlock User' : 'Lock User'}
-            </button>
-            <button id="btn-delete-user" class="px-4 py-2 border border-red-200 rounded-xl text-sm font-bold text-red-600 hover:bg-red-50 transition-colors">
-              Delete
-            </button>
-          </div>
-        </div>
-
-        <!-- User Details -->
-        <div class="surface-tile p-6">
-          <h2 class="text-lg font-black text-[var(--kyro-text-primary)] tracking-tighter mb-6">Details</h2>
-          <div class="grid grid-cols-2 gap-6">
-            <div>
-              <label class="text-xs font-bold text-[var(--kyro-text-secondary)] uppercase tracking-wider">Email</label>
-              <p class="mt-1 font-bold text-[var(--kyro-text-primary)]" id="field-email">{user.email}</p>
-            </div>
-            <div>
-              <label class="text-xs font-bold text-[var(--kyro-text-secondary)] uppercase tracking-wider">Role</label>
-              <select id="field-role" class="mt-1 w-full px-3 py-2 border border-[var(--kyro-border)] bg-[var(--kyro-surface-accent)] rounded-lg text-sm font-bold text-[var(--kyro-text-primary)]">
-                {roleOptions.map((role) => (
-                  <option value={role} selected={user.role === role}>{role}</option>
-                ))}
-              </select>
-            </div>
-            <div>
-              <label class="text-xs font-bold text-[var(--kyro-text-secondary)] uppercase tracking-wider">Email Verified</label>
-              <p class="mt-1">
-                <span class={`inline-flex items-center px-3 py-1 rounded-lg text-xs font-bold ${user.emailVerified ? 'bg-green-500/10 text-green-500' : 'bg-yellow-500/10 text-yellow-500'}`}>
-                  {user.emailVerified ? 'Verified' : 'Not verified'}
-                </span>
-              </p>
-            </div>
-            <div>
-              <label class="text-xs font-bold text-[var(--kyro-text-secondary)] uppercase tracking-wider">Status</label>
-              <p class="mt-1">
-                <span class={`inline-flex items-center px-3 py-1 rounded-lg text-xs font-bold ${user.locked ? 'bg-red-500/10 text-red-500' : 'bg-green-500/10 text-green-500'}`}>
-                  {user.locked ? 'Locked' : 'Active'}
-                </span>
-              </p>
-            </div>
-            <div>
-              <label class="text-xs font-bold text-[var(--kyro-text-secondary)] uppercase tracking-wider">Last Login</label>
-              <p class="mt-1 text-sm text-[var(--kyro-text-secondary)]" id="field-last-login">
-                {user.lastLogin ? new Date(user.lastLogin).toLocaleString() : 'Never'}
-              </p>
-            </div>
-            <div>
-              <label class="text-xs font-bold text-[var(--kyro-text-secondary)] uppercase tracking-wider">Failed Attempts</label>
-              <p class="mt-1 text-sm font-bold text-[var(--kyro-text-primary)]" id="field-failed-attempts">
-                {user.failedLoginAttempts || 0}
-              </p>
-            </div>
-            <div>
-              <label class="text-xs font-bold text-[#64748b] uppercase tracking-wider">Created</label>
-              <p class="mt-1 text-sm text-[#64748b]">
-                {user.createdAt ? new Date(user.createdAt).toLocaleString() : '—'}
-              </p>
-            </div>
-            <div>
-              <label class="text-xs font-bold text-[#64748b] uppercase tracking-wider">Updated</label>
-              <p class="mt-1 text-sm text-[#64748b]">
-                {user.updatedAt ? new Date(user.updatedAt).toLocaleString() : '—'}
-              </p>
-            </div>
-          </div>
-
-          <div class="mt-6 flex justify-end">
-            <button id="btn-save" class="px-6 py-2 bg-[#0b1222] text-white rounded-xl text-sm font-bold hover:bg-[#1a2332] transition-colors">
-              Save Changes
-            </button>
-          </div>
-        </div>
-      </>
-    ) : (
+    </div>
+  ) : user ? (
+    <UserDetail
+      client:load
+      user={user}
+      apiPath={apiPath}
+      adminPath={adminPath}
+    />
+  ) : (
+    <div class="flex-1 overflow-y-auto pr-12 space-y-8">
       <div class="surface-tile p-8 text-center">
-        <p class="text-lg font-bold text-[#64748b]">Loading...</p>
+        <p class="text-lg font-bold text-[var(--kyro-text-secondary)]">Loading...</p>
       </div>
-    )}
-  </div>
-
-  <script is:inline>
-    document.addEventListener('DOMContentLoaded', () => {
-      const userId = window.location.pathname.split('/').pop();
-      const saveBtn = document.getElementById('btn-save');
-      const lockBtn = document.getElementById('btn-toggle-lock');
-      const deleteBtn = document.getElementById('btn-delete-user');
-      const roleSelect = document.getElementById('field-role');
-
-      if (saveBtn && roleSelect) {
-        saveBtn.addEventListener('click', async () => {
-          const role = roleSelect.value;
-          const res = await fetch(`/api/users/${userId}`, {
-            method: 'PATCH',
-            credentials: 'include',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ role }),
-          });
-          if (res.ok) {
-            saveBtn.textContent = 'Saved!';
-            setTimeout(() => { saveBtn.textContent = 'Save Changes'; }, 2000);
-          }
-        });
-      }
-
-      if (lockBtn) {
-        lockBtn.addEventListener('click', async () => {
-          const isLocked = lockBtn.textContent?.includes('Unlock');
-          const res = await fetch(`/api/users/${userId}`, {
-            method: 'PATCH',
-            credentials: 'include',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ locked: isLocked }),
-          });
-          if (res.ok) location.reload();
-        });
-      }
-
-      if (deleteBtn) {
-        deleteBtn.addEventListener('click', async () => {
-          if (confirm('Delete this user? This cannot be undone.')) {
-            const res = await fetch(`/api/users/${userId}`, { 
-              method: 'DELETE',
-              credentials: 'include'
-            });
-            if (res.ok) window.location.href = '/users';
-          }
-        });
-      }
-    });
-  </script>
+    </div>
+  )}
 </AdminLayout>

package/src/pages/users/index.astro

@@ -1,147 +1,36 @@
 ---
-import AdminLayout from '../../layouts/AdminLayout.astro';
+import AdminLayout from "../../layouts/AdminLayout.astro";
+import { UsersList } from "../../components/users/UsersList";
+
+import { adminPath, apiPath } from "../../lib/paths";
 
 let users: any[] = [];
 let totalUsers = 0;
 
 try {
-  const response = await fetch(`${Astro.url.origin}/api/users?page=1&limit=100`, {
-    headers: Astro.request.headers,
-    credentials: 'include'
-  });
+  const response = await fetch(
+    `${Astro.url.origin}${apiPath}/users?page=1&limit=100`,
+    {
+      headers: Astro.request.headers,
+      credentials: "include",
+    },
+  );
   if (response.ok) {
     const data = await response.json();
     users = data.docs || [];
     totalUsers = data.totalDocs || 0;
   }
 } catch (error) {
-  console.error('Failed to fetch users:', error);
+  console.error("Failed to fetch users:", error);
 }
-
-users = users || [];
-
-const roleColors: Record<string, string> = {
-  super_admin: 'bg-red-50 text-red-600',
-  admin: 'bg-purple-50 text-purple-600',
-  editor: 'bg-blue-50 text-blue-600',
-  author: 'bg-green-50 text-green-600',
-  customer: 'bg-gray-50 text-gray-600',
-  guest: 'bg-yellow-50 text-yellow-600',
-};
 ---
 
 <AdminLayout title="Users">
-  <div class="flex-1 overflow-y-auto p-8 pr-12 space-y-8">
-    <!-- Header -->
-    <div class="surface-tile p-6 flex items-center justify-between">
-      <div>
-        <h1 class="text-3xl font-black tracking-tighter text-[var(--kyro-text-primary)]">Users</h1>
-        <p class="text-sm text-[var(--kyro-text-secondary)] mt-1 font-medium">
-          Manage user accounts and permissions
-          <span class="ml-2 text-[var(--kyro-text-primary)] font-bold">· {totalUsers} users</span>
-        </p>
-      </div>
-      <a href="/users/new" class="flex items-center gap-2 px-6 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-bold transition-all hover:opacity-90 active:scale-95 shadow-lg">
-        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 5v14M5 12h14"></path>
-        </svg>
-        Add User
-      </a>
-    </div>
-
-    <!-- Users Table -->
-    <div class="surface-tile overflow-hidden">
-      {users.length === 0 ? (
-        <div class="px-8 py-16 text-center">
-          <div class="flex flex-col items-center gap-4">
-            <div class="w-16 h-16 rounded-2xl bg-[var(--kyro-surface-accent)] flex items-center justify-center">
-              <svg class="w-8 h-8 text-[var(--kyro-text-muted)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
-              </svg>
-            </div>
-            <p class="font-bold text-[var(--kyro-text-primary)] text-base">No users yet</p>
-            <p class="text-sm text-[var(--kyro-text-secondary)]">Create your first user to get started.</p>
-            <a href="/users/new" class="mt-2 inline-flex items-center gap-2 px-5 py-2.5 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-lg font-bold text-sm shadow-md">
-              <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 5v14M5 12h14"></path>
-              </svg>
-              Add User
-            </a>
-          </div>
-        </div>
-      ) : (
-        <table class="w-full text-left">
-          <thead>
-            <tr class="text-[var(--kyro-text-secondary)] font-bold text-[10px] uppercase tracking-[0.3em] border-b border-[var(--kyro-border)]">
-              <th class="px-8 py-6">Email</th>
-              <th class="px-6 py-6">Role</th>
-              <th class="px-6 py-6">Status</th>
-              <th class="px-6 py-6">Last Login</th>
-              <th class="px-6 py-6">Created</th>
-              <th class="px-6 py-6 text-right">Actions</th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-[var(--kyro-border)]">
-            {users.map((user) => (
-              <tr class="group hover:bg-gray-50/50 transition-colors cursor-pointer" onclick={`window.location='/users/${user.id}'`}>
-                <td class="px-8 py-5">
-                  <div class="flex items-center gap-4">
-                    <div class="w-10 h-10 rounded-full bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] flex items-center justify-center font-bold text-sm">
-                      {user.email ? user.email.charAt(0).toUpperCase() : '?'}
-                    </div>
-                    <div>
-                      <div class="font-bold text-[var(--kyro-text-primary)]">{user.email}</div>
-                      {user.tenantId && <div class="text-xs text-[var(--kyro-text-secondary)]">Tenant: {user.tenantId}</div>}
-                    </div>
-                  </div>
-                </td>
-                <td class="px-6 py-5">
-                  <span class={`inline-flex items-center px-3 py-1 rounded-lg text-xs font-bold ${roleColors[user.role] || 'bg-gray-50 text-gray-600'}`}>
-                    {user.role}
-                  </span>
-                </td>
-                <td class="px-6 py-5">
-                  {user.locked ? (
-                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-xs font-bold bg-red-50 text-red-600">
-                      <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-                        <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/>
-                      </svg>
-                      Locked
-                    </span>
-                  ) : (
-                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-lg text-xs font-bold bg-green-50 text-green-600">
-                      <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
-                      </svg>
-                      Active
-                    </span>
-                  )}
-                </td>
-                <td class="px-6 py-5 text-sm text-[#64748b]">
-                  {user.lastLogin ? new Date(user.lastLogin).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : 'Never'}
-                </td>
-                <td class="px-6 py-5 text-sm text-[#64748b]">
-                  {user.createdAt ? new Date(user.createdAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : '—'}
-                </td>
-                <td class="px-6 py-5 text-right">
-                  <div class="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-                    <a href={`/users/${user.id}`} class="inline-flex items-center justify-center w-8 h-8 rounded-md text-[#64748b] hover:bg-gray-100 hover:text-[#0b1222] transition-colors" onclick="event.stopPropagation()">
-                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
-                      </svg>
-                    </a>
-                    <button onclick={`event.stopPropagation(); if(confirm('Delete this user?')) { fetch('/api/users/${user.id}', { method: 'DELETE', credentials: 'include' }).then(() => location.reload()); }`} class="inline-flex items-center justify-center w-8 h-8 rounded-md text-[#64748b] hover:bg-red-50 hover:text-red-600 transition-colors">
-                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
-                      </svg>
-                    </button>
-                  </div>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
-    </div>
-  </div>
+  <UsersList
+    client:load
+    initialUsers={users}
+    initialTotal={totalUsers}
+    apiPath={apiPath}
+    adminPath={adminPath}
+  />
 </AdminLayout>

package/src/pages/users/new.astro

@@ -1,92 +1,15 @@
 ---
-import AdminLayout from '../../layouts/AdminLayout.astro';
+import AdminLayout from "../../layouts/AdminLayout.astro";
+import { UserForm } from "../../components/users/UserForm";
 
-const roleOptions = ['super_admin', 'admin', 'editor', 'author', 'customer', 'guest'];
+import { adminPath, apiPath } from "../../lib/paths";
 ---
 
 <AdminLayout title="New User">
-  <div class="flex-1 overflow-y-auto p-8 pr-12 space-y-8">
-    <!-- Header -->
-    <div class="surface-tile p-6 flex items-center justify-between">
-      <div>
-        <h1 class="text-3xl font-black tracking-tighter text-[var(--kyro-text-primary)]">Create User</h1>
-        <p class="text-sm text-[var(--kyro-text-secondary)] mt-1 font-medium">Add a new user to the system</p>
-      </div>
-      <a href="/users" class="text-sm font-bold text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] transition-colors">
-        ← Back to users
-      </a>
-    </div>
-
-    <!-- Form -->
-    <div class="surface-tile p-6">
-      <form id="create-user-form" class="space-y-6 max-w-2xl">
-        <div>
-          <label for="email" class="block text-sm font-bold text-[var(--kyro-text-primary)] mb-2">Email Address</label>
-          <input type="email" id="email" name="email" required class="w-full px-4 py-3 border border-[var(--kyro-border)] bg-[var(--kyro-input-bg)] rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-[var(--kyro-sidebar-active)] text-[var(--kyro-text-primary)]" placeholder="user@example.com" />
-        </div>
-
-        <div>
-          <label for="password" class="block text-sm font-bold text-[var(--kyro-text-primary)] mb-2">Password</label>
-          <input type="password" id="password" name="password" required minlength="12" class="w-full px-4 py-3 border border-[var(--kyro-border)] bg-[var(--kyro-input-bg)] rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-[var(--kyro-sidebar-active)] text-[var(--kyro-text-primary)]" placeholder="Minimum 12 characters" />
-          <p class="text-xs text-[var(--kyro-text-secondary)] mt-1">Must contain uppercase, lowercase, numbers, and special characters</p>
-        </div>
-
-        <div>
-          <label for="role" class="block text-sm font-bold text-[var(--kyro-text-primary)] mb-2">Role</label>
-          <select id="role" name="role" class="w-full px-4 py-3 border border-[var(--kyro-border)] bg-[var(--kyro-input-bg)] rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-[var(--kyro-sidebar-active)] text-[var(--kyro-text-primary)]">
-            {roleOptions.map((role) => (
-              <option value={role}>{role}</option>
-            ))}
-          </select>
-        </div>
-
-        <div>
-          <label for="tenantId" class="block text-sm font-bold text-[var(--kyro-text-primary)] mb-2">Tenant ID (optional)</label>
-          <input type="text" id="tenantId" name="tenantId" class="w-full px-4 py-3 border border-[var(--kyro-border)] bg-[var(--kyro-input-bg)] rounded-xl text-sm font-medium focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-[var(--kyro-sidebar-active)] text-[var(--kyro-text-primary)]" placeholder="Leave empty for global user" />
-        </div>
-
-        <div class="flex items-center justify-end gap-3 pt-4 border-t border-[var(--kyro-border)]">
-          <a href="/users" class="px-6 py-3 border border-[var(--kyro-border)] rounded-xl text-sm font-bold text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] transition-colors">
-            Cancel
-          </a>
-          <button type="submit" class="px-6 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl text-sm font-bold hover:bg-opacity-90 transition-colors shadow-lg shadow-black/10">
-            Create User
-          </button>
-        </div>
-      </form>
-
-      <div id="form-message" class="hidden mt-4 p-4 rounded-xl text-sm font-bold"></div>
-    </div>
-  </div>
-
-  <script is:inline>
-    document.addEventListener('DOMContentLoaded', () => {
-      const form = document.getElementById('create-user-form');
-      const message = document.getElementById('form-message');
-
-      form?.addEventListener('submit', async (e) => {
-        e.preventDefault();
-        const formData = new FormData(form);
-        const body = Object.fromEntries(formData.entries());
-
-        const res = await fetch('/api/users', {
-          method: 'POST',
-          credentials: 'include',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(body),
-        });
-
-        const data = await res.json();
-
-        if (res.ok) {
-          message.textContent = 'User created successfully!';
-          message.className = 'mt-4 p-4 rounded-xl text-sm font-bold bg-green-500/10 text-green-500';
-          setTimeout(() => { window.location.href = `/users/${data.data.id}`; }, 1000);
-        } else {
-          message.textContent = data.error || 'Failed to create user';
-          message.className = 'mt-4 p-4 rounded-xl text-sm font-bold bg-red-500/10 text-red-500';
-        }
-      });
-    });
-  </script>
+  <UserForm
+    client:load
+    mode="create"
+    apiPath={apiPath}
+    adminPath={adminPath}
+  />
 </AdminLayout>

package/src/pages/webhooks.astro

@@ -0,0 +1,11 @@
+---
+import AdminLayout from "../layouts/AdminLayout.astro";
+import { WebhookManager } from "../components/WebhookManager";
+
+import { adminPath, apiPath } from '../lib/paths';
+
+---
+
+<AdminLayout title="Webhooks">
+  <WebhookManager client:only="react" />
+</AdminLayout>

package/src/routes.ts

@@ -0,0 +1,80 @@
+export const ADMIN_ROUTES = [
+  { pattern: "/", entrypoint: "@kyro-cms/admin/src/pages/admin/index.astro" },
+  {
+    pattern: "/api-explorer",
+    entrypoint: "@kyro-cms/admin/src/pages/admin/api-explorer.astro",
+  },
+  {
+    pattern: "/graphql",
+    entrypoint: "@kyro-cms/admin/src/pages/admin/graphql.astro",
+  },
+  {
+    pattern: "/graphql-explorer",
+    entrypoint: "@kyro-cms/admin/src/pages/admin/graphql-explorer.astro",
+  },
+  {
+    pattern: "/rest-playground",
+    entrypoint: "@kyro-cms/admin/src/pages/admin/rest-playground.astro",
+  },
+  {
+    pattern: "/webhooks",
+    entrypoint: "@kyro-cms/admin/src/pages/admin/webhooks.astro",
+  },
+  {
+    pattern: "/keys",
+    entrypoint: "@kyro-cms/admin/src/pages/admin/keys.astro",
+  },
+  {
+    pattern: "/login",
+    entrypoint: "@kyro-cms/admin/src/pages/auth/login.astro",
+  },
+  {
+    pattern: "/register",
+    entrypoint: "@kyro-cms/admin/src/pages/auth/register.astro",
+  },
+  { pattern: "/media", entrypoint: "@kyro-cms/admin/src/pages/media.astro" },
+  {
+    pattern: "/users",
+    entrypoint: "@kyro-cms/admin/src/pages/users/index.astro",
+  },
+  {
+    pattern: "/users/new",
+    entrypoint: "@kyro-cms/admin/src/pages/users/new.astro",
+  },
+  {
+    pattern: "/users/[id]",
+    entrypoint: "@kyro-cms/admin/src/pages/users/[id].astro",
+  },
+  {
+    pattern: "/roles",
+    entrypoint: "@kyro-cms/admin/src/pages/roles/index.astro",
+  },
+  {
+    pattern: "/audit",
+    entrypoint: "@kyro-cms/admin/src/pages/audit/index.astro",
+  },
+  {
+    pattern: "/settings",
+    entrypoint: "@kyro-cms/admin/src/pages/settings/index.astro",
+  },
+  {
+    pattern: "/settings/[slug]",
+    entrypoint: "@kyro-cms/admin/src/pages/settings/[slug].astro",
+  },
+  {
+    pattern: "/sessions",
+    entrypoint: "@kyro-cms/admin/src/pages/sessions.astro",
+  },
+  {
+    pattern: "/preview/[collection]/[id]",
+    entrypoint: "@kyro-cms/admin/src/pages/preview/[collection]/[id].astro",
+  },
+  {
+    pattern: "/[collection]",
+    entrypoint: "@kyro-cms/admin/src/pages/[collection]/index.astro",
+  },
+  {
+    pattern: "/[collection]/[id]",
+    entrypoint: "@kyro-cms/admin/src/pages/[collection]/[id].astro",
+  },
+];