@kyro-cms/admin 0.1.2

package/src/pages/api/auth/users.ts

@@ -0,0 +1,150 @@
+import type { APIRoute } from "astro";
+import { RedisAuthAdapter } from "@kyro-cms/core";
+import { AuditLogger } from "@kyro-cms/core";
+import { createAuditContext } from "@kyro-cms/core";
+import bcrypt from "bcryptjs";
+import { randomBytes } from "crypto";
+
+const redisAdapter = new RedisAuthAdapter({
+  url: process.env.REDIS_URL || "redis://localhost:6379",
+});
+
+const auditLogger = new AuditLogger(redisAdapter as any);
+
+async function ensureConnection() {
+  try {
+    await redisAdapter.connect();
+  } catch (e) {
+    // Connection might already be established
+  }
+}
+
+export const GET: APIRoute = async ({ url, request }) => {
+  await ensureConnection();
+
+  const page = parseInt(url.searchParams.get("page") || "1");
+  const limit = parseInt(url.searchParams.get("limit") || "25");
+  const search = url.searchParams.get("search") || "";
+
+  try {
+    const pattern = search ? `*${search.toLowerCase()}*` : "*";
+
+    let cursor = "0";
+    const users: any[] = [];
+    const seenIds = new Set<string>();
+
+    do {
+      const [nextCursor, keys] = await (redisAdapter as any).redis.scan(
+        cursor,
+        "MATCH",
+        "kyro:auth:users:email:*",
+        "COUNT",
+        100,
+      );
+      cursor = nextCursor;
+
+      for (const key of keys) {
+        const userId = await (redisAdapter as any).redis.get(key);
+        if (userId && !seenIds.has(userId)) {
+          seenIds.add(userId);
+          const user = await redisAdapter.findUserById(userId);
+          if (user) {
+            const { passwordHash, ...safeUser } = user;
+            users.push(safeUser);
+          }
+        }
+      }
+    } while (cursor !== "0");
+
+    const totalDocs = users.length;
+    const startIndex = (page - 1) * limit;
+    const paginatedUsers = users.slice(startIndex, startIndex + limit);
+
+    return new Response(
+      JSON.stringify({
+        docs: paginatedUsers,
+        totalDocs,
+        page,
+        limit,
+        totalPages: Math.ceil(totalDocs / limit),
+      }),
+      {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      },
+    );
+  } catch (error) {
+    console.error("Error fetching users:", error);
+    return new Response(
+      JSON.stringify({
+        error: "Failed to fetch users",
+        docs: [],
+        totalDocs: 0,
+      }),
+      {
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      },
+    );
+  }
+};
+
+export const POST: APIRoute = async ({ request }) => {
+  await ensureConnection();
+
+  const { ipAddress, userAgent } = createAuditContext(request as any);
+
+  try {
+    const body = await request.json();
+    const { email, password, role, tenantId } = body;
+
+    if (!email || !password) {
+      return new Response(
+        JSON.stringify({ error: "Email and password are required" }),
+        {
+          status: 400,
+          headers: { "Content-Type": "application/json" },
+        },
+      );
+    }
+
+    const existing = await redisAdapter.findUserByEmail(email);
+    if (existing) {
+      return new Response(JSON.stringify({ error: "Email already exists" }), {
+        status: 400,
+        headers: { "Content-Type": "application/json" },
+      });
+    }
+
+    const passwordHash = await bcrypt.hash(password, 12);
+    const user = await redisAdapter.createUser({
+      email,
+      passwordHash,
+      role: role || "customer",
+      tenantId,
+    });
+
+    await auditLogger.log({
+      action: "user_create",
+      userId: user.id,
+      userEmail: user.email,
+      role: user.role,
+      resource: "users",
+      ipAddress,
+      userAgent,
+      success: true,
+    });
+
+    const { passwordHash: _, ...safeUser } = user;
+    return new Response(JSON.stringify({ data: safeUser }), {
+      status: 201,
+      headers: { "Content-Type": "application/json" },
+    });
+  } catch (error) {
+    console.error("Error creating user:", error);
+    return new Response(JSON.stringify({ error: "Failed to create user" }), {
+      status: 500,
+      headers: { "Content-Type": "application/json" },
+    });
+  }
+};

package/src/pages/audit/index.astro

@@ -0,0 +1,110 @@
+---
+import AdminLayout from '../../layouts/AdminLayout.astro';
+
+let auditLogs: any[] = [];
+let totalLogs = 0;
+
+try {
+  const response = await fetch(`${Astro.url.origin}/api/audit_logs?page=1&limit=50`);
+  if (response.ok) {
+    const data = await response.json();
+    auditLogs = data.docs || [];
+    totalLogs = data.totalDocs || 0;
+  }
+} catch (error) {
+  console.error('Failed to fetch audit logs:', error);
+}
+
+const actionColors: Record<string, string> = {
+  login: 'bg-green-50 text-green-600',
+  logout: 'bg-gray-50 text-gray-600',
+  login_failed: 'bg-red-50 text-red-600',
+  register: 'bg-blue-50 text-blue-600',
+  password_change: 'bg-yellow-50 text-yellow-600',
+  password_reset: 'bg-purple-50 text-purple-600',
+  user_create: 'bg-green-50 text-green-600',
+  user_update: 'bg-blue-50 text-blue-600',
+  user_delete: 'bg-red-50 text-red-600',
+  user_lockout: 'bg-orange-50 text-orange-600',
+};
+---
+
+<AdminLayout title="Audit Logs">
+  <div class="flex-1 overflow-y-auto p-8 pr-12 space-y-8">
+    <!-- Header -->
+    <div class="surface-tile p-6">
+      <h1 class="text-3xl font-black tracking-tighter text-[#0b1222]">Audit Logs</h1>
+      <p class="text-sm text-[#64748b] mt-1 font-medium">
+        Security audit trail
+        <span class="ml-2 text-[#0b1222] font-bold">· {totalLogs} entries</span>
+      </p>
+    </div>
+
+    <!-- Logs Table -->
+    <div class="surface-tile overflow-hidden">
+      {auditLogs.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-gray-50 flex items-center justify-center">
+              <svg class="w-8 h-8 text-[#9ca3af]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+              </svg>
+            </div>
+            <p class="font-bold text-[#0b1222] text-base">No audit logs yet</p>
+            <p class="text-sm text-[#64748b]">Logs will appear here as users interact with the system.</p>
+          </div>
+        </div>
+      ) : (
+        <table class="w-full text-left">
+          <thead>
+            <tr class="text-[#64748b] font-bold text-[10px] uppercase tracking-[0.3em] border-b border-gray-100">
+              <th class="px-8 py-6">Action</th>
+              <th class="px-6 py-6">User</th>
+              <th class="px-6 py-6">Resource</th>
+              <th class="px-6 py-6">IP Address</th>
+              <th class="px-6 py-6">Status</th>
+              <th class="px-6 py-6">Timestamp</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-50">
+            {auditLogs.map((log) => (
+              <tr class="group hover:bg-gray-50/50 transition-colors">
+                <td class="px-8 py-4">
+                  <span class={`inline-flex items-center px-3 py-1 rounded-lg text-xs font-bold ${actionColors[log.action] || 'bg-gray-50 text-gray-600'}`}>
+                    {log.action.replace(/_/g, ' ')}
+                  </span>
+                </td>
+                <td class="px-6 py-4">
+                  <div class="text-sm font-bold text-[#0b1222]">{log.userEmail || '—'}</div>
+                  {log.role && <div class="text-xs text-[#64748b]">{log.role}</div>}
+                </td>
+                <td class="px-6 py-4 text-sm text-[#64748b]">{log.resource}</td>
+                <td class="px-6 py-4 text-sm text-[#64748b] font-mono">{log.ipAddress || '—'}</td>
+                <td class="px-6 py-4">
+                  {log.success ? (
+                    <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>
+                      Success
+                    </span>
+                  ) : (
+                    <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="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
+                      </svg>
+                      Failed
+                    </span>
+                  )}
+                </td>
+                <td class="px-6 py-4 text-sm text-[#64748b]">
+                  {log.timestamp ? new Date(log.timestamp).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' }) : '—'}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  </div>
+</AdminLayout>

package/src/pages/index.astro

@@ -0,0 +1,225 @@
+---
+import AdminLayout from '../layouts/AdminLayout.astro';
+import { collections } from "../lib/config";
+
+const authCollections = ['users', 'roles', 'audit_logs'];
+const authItems = authCollections.map(slug => ({
+  slug,
+  label: collections[slug]?.label || slug,
+  icon: slug === 'users' ? 'users' : slug === 'roles' ? 'shield' : 'file-text'
+}));
+---
+
+<AdminLayout title="Dashboard">
+  <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 gap-8">
+      <div class="relative flex-1 max-w-2xl">
+        <div class="absolute inset-y-0 left-6 flex items-center pointer-events-none text-[#64748b]">
+          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+          </svg>
+        </div>
+        <input type="text" placeholder="Search anything..." class="w-full bg-gray-50/50 border border-transparent rounded-2xl py-4 pl-16 pr-8 text-lg font-medium focus:outline-none focus:bg-white focus:border-gray-100 transition-all shadow-inner" />
+      </div>
+      <div class="flex p-1.5 bg-gray-50/50 rounded-2xl">
+        <button class="flex items-center gap-3 px-8 py-3 bg-[#0b1222] text-white rounded-xl font-bold shadow-lg transition-all active:scale-95">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path>
+          </svg>
+          <span>Card</span>
+        </button>
+        <button class="flex items-center gap-3 px-8 py-3 text-[#64748b] rounded-xl font-bold hover:bg-white/50 transition-all">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 6h16M4 12h16M4 18h16"></path>
+          </svg>
+          <span>List</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- Auth Management Section -->
+    <div class="surface-tile overflow-hidden">
+      <div class="flex items-center justify-between p-12 border-b border-gray-50/50">
+        <div class="flex-1">
+          <h2 class="text-5xl font-black tracking-tighter text-[#0b1222]">
+            Authentication
+          </h2>
+          <p class="text-[#64748b] font-bold mt-4 uppercase tracking-[0.2em] text-sm">
+            Manage users, roles, and security
+          </p>
+        </div>
+        <a href="/users/new" class="flex items-center gap-2 px-6 py-3 bg-[#0b1222] text-white rounded-xl font-bold transition-all hover:bg-[#1a2332] active:scale-95">
+          <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>
+
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6">
+        {authItems.map((item) => (
+          <a href={`/${item.slug}`} class="group p-6 bg-gray-50/30 rounded-2xl hover:bg-gray-50/50 transition-all border border-transparent hover:border-gray-100/50">
+            <div class="flex items-center gap-4 mb-4">
+              <div class={`w-12 h-12 rounded-xl flex items-center justify-center ${
+                item.slug === 'users' ? 'bg-blue-50 text-blue-500' :
+                item.slug === 'roles' ? 'bg-purple-50 text-purple-500' :
+                'bg-green-50 text-green-500'
+              }`}>
+                {item.icon === 'users' && (
+                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 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>
+                )}
+                {item.icon === 'shield' && (
+                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
+                  </svg>
+                )}
+                {item.icon === 'file-text' && (
+                  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                  </svg>
+                )}
+              </div>
+              <div>
+                <h3 class="text-xl font-black text-[#0b1222] tracking-tighter">{item.label}</h3>
+                <p class="text-sm text-[#64748b] font-medium mt-1">Manage {item.slug.replace('_', ' ')}</p>
+              </div>
+            </div>
+            <div class="flex items-center gap-2 text-[#64748b] font-bold text-sm group-hover:text-[#0b1222] transition-colors">
+              <span>View all</span>
+              <svg class="w-4 h-4 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
+              </svg>
+            </div>
+          </a>
+        ))}
+      </div>
+    </div>
+
+    <!-- Security Quick Actions -->
+    <div class="surface-tile overflow-hidden">
+      <div class="p-8 border-b border-gray-50/50">
+        <h2 class="text-3xl font-black tracking-tighter text-[#0b1222]">
+          Security & Monitoring
+        </h2>
+        <p class="text-[#64748b] font-bold mt-2 text-sm">
+          Rate limiting, audit logs, and account lockout settings
+        </p>
+      </div>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 p-6">
+        <a href="/audit_logs" class="p-5 bg-gray-50/30 rounded-xl hover:bg-gray-50/50 transition-all border border-transparent hover:border-gray-100/50 group">
+          <div class="w-10 h-10 rounded-lg bg-orange-50 text-orange-500 flex items-center justify-center mb-3">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
+            </svg>
+          </div>
+          <h4 class="font-bold text-[#0b1222] mb-1">Audit Logs</h4>
+          <p class="text-xs text-[#64748b]">View last 30 days</p>
+        </a>
+
+        <a href="/users?locked=true" class="p-5 bg-gray-50/30 rounded-xl hover:bg-gray-50/50 transition-all border border-transparent hover:border-gray-100/50 group">
+          <div class="w-10 h-10 rounded-lg bg-red-50 text-red-500 flex items-center justify-center mb-3">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path>
+            </svg>
+          </div>
+          <h4 class="font-bold text-[#0b1222] mb-1">Locked Accounts</h4>
+          <p class="text-xs text-[#64748b]">Manage lockouts</p>
+        </a>
+
+        <a href="/roles" class="p-5 bg-gray-50/30 rounded-xl hover:bg-gray-50/50 transition-all border border-transparent hover:border-gray-100/50 group">
+          <div class="w-10 h-10 rounded-lg bg-indigo-50 text-indigo-500 flex items-center justify-center mb-3">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
+            </svg>
+          </div>
+          <h4 class="font-bold text-[#0b1222] mb-1">Permissions</h4>
+          <p class="text-xs text-[#64748b]">RBAC settings</p>
+        </a>
+
+        <a href="/api/health" target="_blank" class="p-5 bg-gray-50/30 rounded-xl hover:bg-gray-50/50 transition-all border border-transparent hover:border-gray-100/50 group">
+          <div class="w-10 h-10 rounded-lg bg-green-50 text-green-500 flex items-center justify-center mb-3">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+          </div>
+          <h4 class="font-bold text-[#0b1222] mb-1">API Health</h4>
+          <p class="text-xs text-[#64748b]">System status</p>
+        </a>
+      </div>
+    </div>
+
+    <!-- Environment Info -->
+    <div class="surface-tile p-6">
+      <h3 class="text-xl font-black text-[#0b1222] tracking-tighter mb-4">Configuration</h3>
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <div class="bg-gray-50/50 rounded-xl p-4">
+          <div class="text-xs text-[#64748b] font-bold uppercase tracking-wider mb-1">Database</div>
+          <div class="text-sm font-bold text-[#0b1222]">PostgreSQL</div>
+        </div>
+        <div class="bg-gray-50/50 rounded-xl p-4">
+          <div class="text-xs text-[#64748b] font-bold uppercase tracking-wider mb-1">Cache/Sessions</div>
+          <div class="text-sm font-bold text-[#0b1222]">Redis</div>
+        </div>
+        <div class="bg-gray-50/50 rounded-xl p-4">
+          <div class="text-xs text-[#64748b] font-bold uppercase tracking-wider mb-1">Auth Method</div>
+          <div class="text-sm font-bold text-[#0b1222]">JWT + Redis</div>
+        </div>
+        <div class="bg-gray-50/50 rounded-xl p-4">
+          <div class="text-xs text-[#64748b] font-bold uppercase tracking-wider mb-1">Email</div>
+          <div class="text-sm font-bold text-[#0b1222]">Nodemailer</div>
+        </div>
+      </div>
+      <p class="text-xs text-[#64748b] mt-4 font-medium">
+        Configure via <code class="bg-gray-100 px-2 py-0.5 rounded text-[#0b1222]">.env</code> file
+      </p>
+    </div>
+
+    <!-- Quick Links -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <a href="/api/health" target="_blank" class="surface-tile group p-6 hover:shadow-2xl transition-all hover:translate-y-[-4px]">
+        <div class="flex items-center gap-4">
+          <div class="w-14 h-14 rounded-2xl bg-green-50 flex items-center justify-center text-green-500 group-hover:scale-110 transition-transform">
+            <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+          </div>
+          <div>
+            <h4 class="text-lg font-bold text-[#0b1222]">API Health</h4>
+            <p class="text-sm text-[#64748b]">Check system status</p>
+          </div>
+        </div>
+      </a>
+
+      <a href="/graphql" target="_blank" class="surface-tile group p-6 hover:shadow-2xl transition-all hover:translate-y-[-4px]">
+        <div class="flex items-center gap-4">
+          <div class="w-14 h-14 rounded-2xl bg-pink-50 flex items-center justify-center text-pink-500 group-hover:scale-110 transition-transform">
+            <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+            </svg>
+          </div>
+          <div>
+            <h4 class="text-lg font-bold text-[#0b1222]">GraphQL</h4>
+            <p class="text-sm text-[#64748b]">API Playground</p>
+          </div>
+        </div>
+      </a>
+
+      <a href="/api/collections" target="_blank" class="surface-tile group p-6 hover:shadow-2xl transition-all hover:translate-y-[-4px]">
+        <div class="flex items-center gap-4">
+          <div class="w-14 h-14 rounded-2xl bg-blue-50 flex items-center justify-center text-blue-500 group-hover:scale-110 transition-transform">
+            <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4"></path>
+            </svg>
+          </div>
+          <div>
+            <h4 class="text-lg font-bold text-[#0b1222]">REST API</h4>
+            <p class="text-sm text-[#64748b]">Collections endpoint</p>
+          </div>
+        </div>
+      </a>
+    </div>
+  </div>
+</AdminLayout>

package/src/pages/roles/index.astro

@@ -0,0 +1,114 @@
+---
+import AdminLayout from '../../layouts/AdminLayout.astro';
+
+const defaultRoles = [
+  { name: 'super_admin', level: 100, inherits: ['admin'], description: 'Full system access across all tenants', color: 'bg-red-50 text-red-600 border-red-200' },
+  { name: 'admin', level: 90, inherits: ['editor'], description: 'Full tenant access with all content permissions', color: 'bg-purple-50 text-purple-600 border-purple-200' },
+  { name: 'editor', level: 70, inherits: ['author'], description: 'Edit and publish all content', color: 'bg-blue-50 text-blue-600 border-blue-200' },
+  { name: 'author', level: 50, inherits: ['customer'], description: 'Create and edit own content', color: 'bg-green-50 text-green-600 border-green-200' },
+  { name: 'customer', level: 30, inherits: [], description: 'Access own data and make purchases', color: 'bg-gray-50 text-gray-600 border-gray-200' },
+  { name: 'guest', level: 10, inherits: [], description: 'Public read-only access', color: 'bg-yellow-50 text-yellow-600 border-yellow-200' },
+];
+
+const permissions: Record<string, string[]> = {
+  super_admin: ['*'],
+  admin: ['users:*', 'roles:*', 'content:*', 'settings:*', 'audit:read'],
+  editor: ['content:*', 'media:*', 'comments:*'],
+  author: ['content:create', 'content:read', 'content:update:own', 'media:*'],
+  customer: ['content:read', 'orders:*', 'profile:*'],
+  guest: ['content:read'],
+};
+---
+
+<AdminLayout title="Roles">
+  <div class="flex-1 overflow-y-auto p-8 pr-12 space-y-8">
+    <!-- Header -->
+    <div class="surface-tile p-6">
+      <h1 class="text-3xl font-black tracking-tighter text-[#0b1222]">Roles & Permissions</h1>
+      <p class="text-sm text-[#64748b] mt-1 font-medium">
+        Role-based access control with hierarchical permissions
+      </p>
+    </div>
+
+    <!-- Role Hierarchy -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {defaultRoles.map((role) => (
+        <div class={`surface-tile p-6 border-2 ${role.color.split(' ').slice(2).join(' ')} rounded-2xl`}>
+          <div class="flex items-center justify-between mb-4">
+            <h3 class="text-xl font-black text-[#0b1222] tracking-tighter">{role.name}</h3>
+            <span class={`px-3 py-1 rounded-lg text-xs font-bold ${role.color.split(' ').slice(0, 2).join(' ')}`}>
+              Level {role.level}
+            </span>
+          </div>
+          <p class="text-sm text-[#64748b] mb-4">{role.description}</p>
+          {role.inherits.length > 0 && (
+            <div class="mb-4">
+              <span class="text-xs font-bold text-[#64748b] uppercase tracking-wider">Inherits:</span>
+              <div class="flex gap-2 mt-2">
+                {role.inherits.map((parent) => (
+                  <span class="px-2 py-1 bg-gray-100 rounded text-xs font-bold text-[#64748b]">{parent}</span>
+                ))}
+              </div>
+            </div>
+          )}
+          <div>
+            <span class="text-xs font-bold text-[#64748b] uppercase tracking-wider">Permissions:</span>
+            <div class="flex flex-wrap gap-1.5 mt-2">
+              {(permissions[role.name] || []).map((perm) => (
+                <span class="px-2 py-0.5 bg-gray-50 rounded text-[10px] font-bold text-[#0b1222]">{perm}</span>
+              ))}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+
+    <!-- Permission Matrix -->
+    <div class="surface-tile overflow-hidden">
+      <div class="p-6 border-b border-gray-100">
+        <h2 class="text-xl font-black text-[#0b1222] tracking-tighter">Permission Matrix</h2>
+      </div>
+      <table class="w-full text-left">
+        <thead>
+          <tr class="text-[#64748b] font-bold text-[10px] uppercase tracking-[0.3em] border-b border-gray-100">
+            <th class="px-6 py-4">Resource</th>
+            {defaultRoles.map((role) => (
+              <th class="px-4 py-4 text-center">{role.name}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-50">
+          {[
+            { resource: 'Users', actions: ['create', 'read', 'update', 'delete'] },
+            { resource: 'Roles', actions: ['create', 'read', 'update', 'delete'] },
+            { resource: 'Content', actions: ['create', 'read', 'update', 'delete', 'publish'] },
+            { resource: 'Media', actions: ['create', 'read', 'update', 'delete'] },
+            { resource: 'Settings', actions: ['read', 'update'] },
+            { resource: 'Audit Logs', actions: ['read'] },
+          ].map((row) => (
+            <tr class="hover:bg-gray-50/50">
+              <td class="px-6 py-4 font-bold text-[#0b1222]">{row.resource}</td>
+              {defaultRoles.map((role) => {
+                const hasAll = permissions[role.name]?.includes('*');
+                const hasResource = permissions[role.name]?.some(p => p.startsWith(row.resource.toLowerCase() + ':') || p === '*');
+                return (
+                  <td class="px-4 py-4 text-center">
+                    {hasAll || hasResource ? (
+                      <svg class="w-5 h-5 text-green-500 mx-auto" 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>
+                    ) : (
+                      <svg class="w-5 h-5 text-gray-200 mx-auto" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
+                      </svg>
+                    )}
+                  </td>
+                );
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  </div>
+</AdminLayout>