@adminforge/core 0.3.1

package/src/ui/screens/CollectionListPage.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import type { AdminForgeConfig, CollectionDefinition, AccessConfig } from "../../core";
+import { AdminLayout } from "../components/AdminLayout.js";
+import { TableEngine } from "../table-engine/TableEngine.js";
+import Link from "next/link";
+import { useState, useCallback } from "react";
+import { useRouter } from "next/navigation";
+import { useAdminSession } from "../../auth/provider.js";
+
+interface CollectionListPageProps {
+  config: AdminForgeConfig;
+  collection: CollectionDefinition;
+  data: unknown[];
+  total: number;
+  page: number;
+  pageSize: number;
+  role?: string;
+}
+
+function hasAccess(access: AccessConfig | undefined, operation: string, role?: string): boolean {
+  if (!access) return true;
+  const allowed = access[operation as keyof AccessConfig];
+  if (!allowed || !Array.isArray(allowed)) return true;
+  if (!role) return false;
+  return allowed.includes(role);
+}
+
+export function CollectionListPage({ config, collection, data, total, page, pageSize, role: propRole }: CollectionListPageProps) {
+  const router = useRouter();
+  const session = useAdminSession();
+  const role = propRole || session?.role || session?.user?.role;
+  
+  const [searchQuery, setSearchQuery] = useState("");
+  const canCreate = hasAccess(collection.access, "create", role);
+
+  const updateParams = useCallback((newParams: Record<string, string | number>) => {
+    const params = new URLSearchParams(window.location.search);
+    Object.entries(newParams).forEach(([key, value]) => {
+      if (value) params.set(key, String(value));
+      else params.delete(key);
+    });
+    router.push(`/admin/${collection.name}?${params.toString()}`);
+  }, [collection.name, router]);
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    updateParams({ search: searchQuery, page: 1 });
+  };
+
+  const totalPages = Math.ceil(total / pageSize);
+  const startEntry = (page - 1) * pageSize + 1;
+  const endEntry = Math.min(page * pageSize, total);
+
+  return (
+    <AdminLayout config={config} currentPath={`/admin/${collection.name}`} role={role}>
+      <div className="adminforge-collection-page">
+        <div className="adminforge-page-header">
+          <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+            <h2 style={{ fontSize: '24px', fontWeight: 700, margin: 0 }}>{collection.label}</h2>
+            <span className="adminforge-badge" style={{ background: '#f8fafc', color: '#64748b', borderColor: '#e2e8f0', fontSize: '11px', fontWeight: 600 }}>
+              {total} total records
+            </span>
+          </div>
+          {canCreate && (
+            <Link href={`/admin/${collection.name}/new`} className="adminforge-btn adminforge-btn-primary">
+              <span className="material-symbols-outlined" style={{ fontSize: '20px', marginRight: '8px' }}>add</span>
+              Create New
+            </Link>
+          )}
+        </div>
+
+        <div style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)' }}>
+          <div style={{ padding: '20px', borderBottom: '1px solid var(--color-border)', background: '#fcfcfd' }}>
+            <form onSubmit={handleSearch} style={{ maxWidth: '400px', position: 'relative' }}>
+              <span className="material-symbols-outlined" style={{ position: 'absolute', left: '12px', top: '50%', transform: 'translateY(-50%)', color: '#94a3b8', fontSize: '20px' }}>search</span>
+              <input 
+                type="text" 
+                className="adminforge-search-input" 
+                placeholder={`Search ${(collection.label || collection.name).toLowerCase()}...`} 
+                value={searchQuery} 
+                onChange={(e) => setSearchQuery(e.target.value)}
+                style={{ paddingLeft: '40px', width: '100%' }}
+              />
+            </form>
+          </div>
+
+          <TableEngine collection={collection} data={data} basePath={`/admin/${collection.name}`} role={role} />
+
+          {/* Pagination Footer */}
+          <div style={{ padding: '16px 24px', borderTop: '1px solid var(--color-border)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: '#fcfcfd' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+              <div style={{ fontSize: '14px', color: 'var(--color-text-secondary)' }}>
+                Showing <span style={{ fontWeight: 600, color: 'var(--color-text)' }}>{startEntry}</span> to <span style={{ fontWeight: 600, color: 'var(--color-text)' }}>{endEntry}</span> of <span style={{ fontWeight: 600, color: 'var(--color-text)' }}>{total}</span> results
+              </div>
+              <select 
+                value={pageSize} 
+                onChange={(e) => updateParams({ pageSize: e.target.value, page: 1 })}
+                style={{
+                  padding: '4px 8px',
+                  borderRadius: '6px',
+                  border: '1px solid var(--color-border)',
+                  fontSize: '12px',
+                  background: 'white',
+                  color: 'var(--color-text)',
+                  cursor: 'pointer',
+                  outline: 'none'
+                }}
+              >
+                {[10, 25, 50, 100].map(size => (
+                  <option key={size} value={size}>{size} / page</option>
+                ))}
+              </select>
+            </div>
+            <div style={{ display: 'flex', gap: '8px' }}>
+              <button 
+                onClick={() => updateParams({ page: page - 1 })}
+                disabled={page <= 1}
+                className="adminforge-btn-icon"
+                style={{ border: '1px solid var(--color-border)', background: 'white' }}
+              >
+                <span className="material-symbols-outlined">chevron_left</span>
+              </button>
+              
+              {[...Array(totalPages)].map((_, i) => {
+                const p = i + 1;
+                // Simple logic to show only current, first, last and surrounding pages if many
+                if (totalPages > 7 && p > 1 && p < totalPages && Math.abs(p - page) > 1) {
+                  if (p === 2 || p === totalPages - 1) return <span key={p} style={{ padding: '0 4px' }}>...</span>;
+                  return null;
+                }
+                return (
+                  <button
+                    key={p}
+                    onClick={() => updateParams({ page: p })}
+                    style={{
+                      width: '36px',
+                      height: '36px',
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      borderRadius: '6px',
+                      border: '1px solid',
+                      borderColor: p === page ? 'var(--color-primary)' : 'var(--color-border)',
+                      background: p === page ? 'var(--color-primary)' : 'white',
+                      color: p === page ? 'white' : 'var(--color-text)',
+                      fontWeight: p === page ? 600 : 400,
+                      cursor: 'pointer'
+                    }}
+                  >
+                    {p}
+                  </button>
+                );
+              })}
+
+              <button 
+                onClick={() => updateParams({ page: page + 1 })}
+                disabled={page >= totalPages}
+                className="adminforge-btn-icon"
+                style={{ border: '1px solid var(--color-border)', background: 'white' }}
+              >
+                <span className="material-symbols-outlined">chevron_right</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </AdminLayout>
+  );
+}

package/src/ui/screens/CollectionSchemaPage.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import type { AdminForgeConfig, CollectionDefinition, FieldDefinition } from "../../core";
+import { AdminLayout } from "../components/AdminLayout.js";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+interface CollectionSchemaPageProps {
+  config: AdminForgeConfig;
+  collection: CollectionDefinition;
+  role?: string;
+}
+
+function formatFullTimestamp(date: Date) {
+  if (isNaN(date.getTime())) return "Unknown";
+  return new Intl.DateTimeFormat('en-US', {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+    hour12: true
+  }).format(date);
+}
+
+export function CollectionSchemaPage({ config, collection, role }: CollectionSchemaPageProps) {
+  const [lastActivity, setLastActivity] = useState<string>("Loading...");
+
+  useEffect(() => {
+    fetch(`/api/${collection.name}?pageSize=1`)
+      .then(res => res.json())
+      .then(result => {
+        const item = result.data?.[0];
+        if (item) {
+          const dateStr = item.updatedAt || item.updated_at || item.createdAt || item.created_at;
+          if (dateStr) {
+            setLastActivity(formatFullTimestamp(new Date(dateStr)));
+          } else {
+            setLastActivity("No date info");
+          }
+        } else {
+          setLastActivity("No activity");
+        }
+      })
+      .catch(() => setLastActivity("Unknown"));
+  }, [collection.name]);
+
+  const getFieldIcon = (type: string) => {
+    switch (type) {
+      case "text": return "text_fields";
+      case "slug": return "link";
+      case "richText": return "description";
+      case "boolean": return "toggle_on";
+      case "image": return "image";
+      case "relation": return "account_tree";
+      case "date": return "calendar_today";
+      default: return "label";
+    }
+  };
+
+  return (
+    <AdminLayout config={config} currentPath={`/admin/${collection.name}`} role={role}>
+      <div className="adminforge-schema-page">
+        <div style={{ marginBottom: '32px', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
+          <div>
+            <Link href="/admin" style={{ display: 'flex', alignItems: 'center', gap: '4px', fontSize: '14px', color: 'var(--color-text-secondary)', marginBottom: '16px', textDecoration: 'none' }}>
+              <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>arrow_back</span>
+              Back to Collection Registry
+            </Link>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+              <h1 style={{ fontSize: '32px', fontWeight: 700 }}>{collection.label} Schema</h1>
+              <span className="adminforge-badge" style={{ background: '#f8fafc', color: '#64748b', borderColor: '#e2e8f0', fontSize: '11px', fontWeight: 600 }}>
+                defined in adminforge.ts
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 340px', gap: '24px', alignItems: 'start' }}>
+          <div className="adminforge-card" style={{ border: '1px solid var(--color-border)', borderRadius: 'var(--radius-lg)', overflow: 'hidden' }}>
+            <div style={{ padding: '24px', borderBottom: '1px solid var(--color-border)' }}>
+              <h3 style={{ fontSize: '18px', fontWeight: 600 }}>Field Definitions</h3>
+            </div>
+            <table className="adminforge-table">
+              <thead>
+                <tr>
+                  <th style={{ fontSize: '12px', color: 'var(--color-text-secondary)' }}>FIELD NAME</th>
+                  <th style={{ fontSize: '12px', color: 'var(--color-text-secondary)' }}>TYPE</th>
+                  <th style={{ fontSize: '12px', color: 'var(--color-text-secondary)' }}>PROPERTIES</th>
+                </tr>
+              </thead>
+              <tbody>
+                {Object.entries(collection.fields).map(([name, field]) => (
+                  <tr key={name}>
+                    <td style={{ fontWeight: 600 }}>{name}</td>
+                    <td>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                        <span className="material-symbols-outlined" style={{ fontSize: '20px', color: 'var(--color-text-secondary)' }}>
+                          {getFieldIcon(field.type)}
+                        </span>
+                        <span>{field.type}</span>
+                      </div>
+                    </td>
+                    <td>
+                      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '4px' }}>
+                        {field.meta?.required && <span className="adminforge-badge adminforge-badge-danger" style={{ fontSize: '11px' }}>required</span>}
+                        {field.meta?.unique && <span className="adminforge-badge adminforge-badge-primary" style={{ fontSize: '11px' }}>unique</span>}
+                        {!!field.ui.props?.from && <span className="adminforge-badge adminforge-badge-secondary" style={{ fontSize: '11px' }}>from: {String(field.ui.props.from)}</span>}
+                        {!!field.ui.props?.to && (
+                          <div style={{ display: 'flex', flexDirection: 'column', gap: '2px' }}>
+                            <span style={{ fontSize: '12px' }}>to: <strong>{String(field.ui.props.to)}</strong></span>
+                            <span className="adminforge-badge adminforge-badge-secondary" style={{ fontSize: '10px', alignSelf: 'flex-start' }}>{String(field.ui.props.relationType)}</span>
+                          </div>
+                        )}
+                        {field.meta?.default !== undefined && <span style={{ fontSize: '12px', color: 'var(--color-text-secondary)' }}>default: <code>{JSON.stringify(field.meta.default)}</code></span>}
+                        {!field.meta?.required && !field.meta?.unique && !field.ui.props?.from && !field.ui.props?.to && <span style={{ color: 'var(--color-text-secondary)' }}>-</span>}
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          <div className="adminforge-card" style={{ padding: '24px', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-lg)' }}>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '24px' }}>
+              <span className="material-symbols-outlined" style={{ color: 'var(--color-text-secondary)' }}>info</span>
+              <h3 style={{ fontSize: '18px', fontWeight: 600 }}>Collection Meta</h3>
+            </div>
+
+            <div style={{ marginBottom: '20px' }}>
+              <label style={{ fontSize: '12px', fontWeight: 700, color: 'var(--color-text-secondary)', textTransform: 'uppercase', marginBottom: '8px', display: 'block' }}>Collection Name</label>
+              <code style={{ background: '#f1f5f9', padding: '4px 8px', borderRadius: '4px', fontSize: '14px' }}>{collection.name}</code>
+            </div>
+
+            <div style={{ marginBottom: '20px' }}>
+              <label style={{ fontSize: '12px', fontWeight: 700, color: 'var(--color-text-secondary)', textTransform: 'uppercase', marginBottom: '8px', display: 'block' }}>UI Label</label>
+              <span style={{ fontSize: '16px', fontWeight: 500 }}>{collection.label}</span>
+            </div>
+
+            <div style={{ marginBottom: '24px', paddingBottom: '24px', borderBottom: '1px solid var(--color-border)' }}>
+              <label style={{ fontSize: '12px', fontWeight: 700, color: 'var(--color-text-secondary)', textTransform: 'uppercase', marginBottom: '8px', display: 'block' }}>Last Activity</label>
+              <span style={{ fontSize: '14px', color: 'var(--color-text-secondary)' }}>{lastActivity}</span>
+            </div>
+
+            <div>
+              <label style={{ fontSize: '12px', fontWeight: 700, color: 'var(--color-text-secondary)', textTransform: 'uppercase', marginBottom: '16px', display: 'block' }}>Access Rules</label>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <span style={{ fontSize: '14px' }}>Create</span>
+                  <div style={{ display: 'flex', gap: '4px' }}>
+                    {(collection.access?.create || ['admin']).map(role => (
+                      <span key={role} className="adminforge-badge adminforge-badge-secondary" style={{ fontSize: '11px' }}>{role}</span>
+                    ))}
+                  </div>
+                </div>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <span style={{ fontSize: '14px' }}>Update</span>
+                  <div style={{ display: 'flex', gap: '4px' }}>
+                    {(collection.access?.update || ['admin']).map(role => (
+                      <span key={role} className="adminforge-badge adminforge-badge-secondary" style={{ fontSize: '11px' }}>{role}</span>
+                    ))}
+                  </div>
+                </div>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                  <span style={{ fontSize: '14px' }}>Delete</span>
+                  <div style={{ display: 'flex', gap: '4px' }}>
+                    {(collection.access?.delete || ['admin']).map(role => (
+                      <span key={role} className="adminforge-badge adminforge-badge-danger" style={{ fontSize: '11px', background: '#fee2e2', color: '#b91c1c' }}>{role}</span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </AdminLayout>
+  );
+}

package/src/ui/screens/RoleDetailPage.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import type { AdminForgeConfig, CollectionDefinition, AccessConfig } from "../../core";
+import { AdminLayout } from "../components/AdminLayout.js";
+import Link from "next/link";
+
+interface RoleDetailPageProps {
+  config: AdminForgeConfig;
+  roleId: string;
+  role?: string;
+}
+
+function hasAccess(access: AccessConfig | undefined, operation: string, roleName: string): boolean {
+  if (!access) return true;
+  const allowed = access[operation as keyof AccessConfig];
+  if (!allowed || !Array.isArray(allowed)) return true;
+  return allowed.includes(roleName);
+}
+
+export function RoleDetailPage({ config, roleId, role }: RoleDetailPageProps) {
+  const roleDef = config.auth?.roles?.[roleId];
+  if (!roleDef) {
+    return (
+      <AdminLayout config={config} currentPath="/admin/roles" role={role}>
+        <div className="adminforge-collection-page">
+          <div className="adminforge-page-header">
+            <h2 style={{ fontSize: '24px', fontWeight: 700, margin: 0 }}>Role not found</h2>
+          </div>
+          <Link href="/admin/roles" className="adminforge-btn adminforge-btn-secondary">Back to Roles</Link>
+        </div>
+      </AdminLayout>
+    );
+  }
+
+  return (
+    <AdminLayout config={config} currentPath="/admin/roles" role={role}>
+      <div className="adminforge-collection-page">
+        <div className="adminforge-page-header">
+          <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
+            <Link href="/admin/roles" className="adminforge-btn-icon" style={{ border: '1px solid var(--color-border)', background: 'white' }}>
+              <span className="material-symbols-outlined">arrow_back</span>
+            </Link>
+            <h2 style={{ fontSize: '24px', fontWeight: 700, margin: 0 }}>Role: {roleDef.label || roleId}</h2>
+          </div>
+          <div className="adminforge-badge" style={{ background: '#f8fafc', color: '#64748b', borderColor: '#e2e8f0', fontSize: '11px', fontWeight: 600 }}>
+            Read-only Config
+          </div>
+        </div>
+
+        <div style={{ marginBottom: '32px' }}>
+          <h3 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '16px', color: 'var(--color-text)' }}>Permissions Matrix</h3>
+          <div style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)' }}>
+            <table className="adminforge-table" style={{ width: '100%', borderCollapse: 'collapse' }}>
+              <thead>
+                <tr style={{ background: '#fcfcfd', borderBottom: '1px solid var(--color-border)' }}>
+                  <th style={{ textAlign: 'left', padding: '16px 24px', fontSize: '13px', fontWeight: 600, color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Collection</th>
+                  <th style={{ textAlign: 'center', padding: '16px 24px', fontSize: '13px', fontWeight: 600, color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Read</th>
+                  <th style={{ textAlign: 'center', padding: '16px 24px', fontSize: '13px', fontWeight: 600, color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Create</th>
+                  <th style={{ textAlign: 'center', padding: '16px 24px', fontSize: '13px', fontWeight: 600, color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Update</th>
+                  <th style={{ textAlign: 'center', padding: '16px 24px', fontSize: '13px', fontWeight: 600, color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Delete</th>
+                </tr>
+              </thead>
+              <tbody>
+                {config.collections.map((collection) => {
+                  const canRead = hasAccess(collection.access, 'read', roleId);
+                  const canCreate = hasAccess(collection.access, 'create', roleId);
+                  const canUpdate = hasAccess(collection.access, 'update', roleId);
+                  const canDelete = hasAccess(collection.access, 'delete', roleId);
+
+                  return (
+                    <tr key={collection.name} style={{ borderBottom: '1px solid var(--color-border)' }}>
+                      <td style={{ padding: '16px 24px', fontSize: '14px', fontWeight: 600, color: 'var(--color-text)' }}>
+                        {collection.label || collection.name}
+                      </td>
+                      <td style={{ padding: '16px 24px', textAlign: 'center' }}>
+                        <PermissionStatus allowed={canRead} />
+                      </td>
+                      <td style={{ padding: '16px 24px', textAlign: 'center' }}>
+                        <PermissionStatus allowed={canCreate} />
+                      </td>
+                      <td style={{ padding: '16px 24px', textAlign: 'center' }}>
+                        <PermissionStatus allowed={canUpdate} />
+                      </td>
+                      <td style={{ padding: '16px 24px', textAlign: 'center' }}>
+                        <PermissionStatus allowed={canDelete} />
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <div>
+          <h3 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '16px', color: 'var(--color-text)' }}>Field-Level Overrides</h3>
+          {config.collections.map((collection) => {
+            const fieldsWithAccess = Object.entries(collection.fields).filter(([_, field]) => field.access);
+            if (fieldsWithAccess.length === 0) return null;
+
+            return (
+              <div key={collection.name} style={{ marginBottom: '24px', padding: '20px', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-lg)', background: 'white' }}>
+                <h4 style={{ fontSize: '14px', fontWeight: 600, marginBottom: '12px', color: 'var(--color-text-secondary)' }}>{collection.label || collection.name}</h4>
+                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))', gap: '12px' }}>
+                  {fieldsWithAccess.map(([name, field]) => {
+                    const canRead = hasAccess(field.access, 'read', roleId);
+                    const canCreate = hasAccess(field.access, 'create', roleId);
+                    const canUpdate = hasAccess(field.access, 'update', roleId);
+
+                    return (
+                      <div key={name} style={{ padding: '12px', border: '1px solid #f1f5f9', borderRadius: '8px', background: '#f8fafc' }}>
+                        <div style={{ fontSize: '13px', fontWeight: 600, marginBottom: '8px' }}><code>{name}</code></div>
+                        <div style={{ display: 'flex', gap: '8px', fontSize: '11px' }}>
+                          <span style={{ display: 'flex', alignItems: 'center', gap: '4px', color: canRead ? '#10b981' : '#ef4444' }}>
+                            <span className="material-symbols-outlined" style={{ fontSize: '14px' }}>{canRead ? 'check_circle' : 'cancel'}</span> read
+                          </span>
+                          <span style={{ display: 'flex', alignItems: 'center', gap: '4px', color: canCreate ? '#10b981' : '#ef4444' }}>
+                            <span className="material-symbols-outlined" style={{ fontSize: '14px' }}>{canCreate ? 'check_circle' : 'cancel'}</span> create
+                          </span>
+                          <span style={{ display: 'flex', alignItems: 'center', gap: '4px', color: canUpdate ? '#10b981' : '#ef4444' }}>
+                            <span className="material-symbols-outlined" style={{ fontSize: '14px' }}>{canUpdate ? 'check_circle' : 'cancel'}</span> update
+                          </span>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </AdminLayout>
+  );
+}
+
+function PermissionStatus({ allowed }: { allowed: boolean }) {
+  return (
+    <span className="material-symbols-outlined" style={{ 
+      color: allowed ? '#10b981' : '#ef4444',
+      fontSize: '20px',
+      fontWeight: 'bold'
+    }}>
+      {allowed ? 'check' : 'close'}
+    </span>
+  );
+}

package/src/ui/screens/RolesListPage.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import type { AdminForgeConfig } from "../../core";
+import { AdminLayout } from "../components/AdminLayout.js";
+import Link from "next/link";
+
+interface RolesListPageProps {
+  config: AdminForgeConfig;
+  role?: string;
+}
+
+export function RolesListPage({ config, role }: RolesListPageProps) {
+  const roles = Object.entries(config.auth?.roles || {});
+
+  return (
+    <AdminLayout config={config} currentPath="/admin/roles" role={role}>
+      <div className="adminforge-collection-page">
+        <div className="adminforge-page-header">
+          <h2 style={{ fontSize: '24px', fontWeight: 700, margin: 0 }}>Roles</h2>
+        </div>
+
+        <div style={{ background: 'var(--color-surface)', border: '1px solid var(--color-border)', borderRadius: 'var(--radius-lg)', overflow: 'hidden', boxShadow: 'var(--shadow-sm)' }}>
+          <table className="adminforge-table" style={{ width: '100%', borderCollapse: 'collapse' }}>
+            <thead>
+              <tr style={{ background: '#fcfcfd', borderBottom: '1px solid var(--color-border)' }}>
+                <th style={{ textAlign: 'left', padding: '16px 24px', fontSize: '13px', fontWeight: 600, color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Role Name</th>
+                <th style={{ textAlign: 'left', padding: '16px 24px', fontSize: '13px', fontWeight: 600, color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Label</th>
+                <th style={{ textAlign: 'right', padding: '16px 24px', fontSize: '13px', fontWeight: 600, color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {roles.map(([key, roleDef]) => (
+                <tr key={key} style={{ borderBottom: '1px solid var(--color-border)' }}>
+                  <td style={{ padding: '16px 24px', fontSize: '14px', color: 'var(--color-text)', fontWeight: 500 }}>
+                    <code>{key}</code>
+                  </td>
+                  <td style={{ padding: '16px 24px', fontSize: '14px', color: 'var(--color-text-secondary)' }}>
+                    {roleDef.label}
+                  </td>
+                  <td style={{ padding: '16px 24px', textAlign: 'right' }}>
+                    <Link 
+                      href={`/admin/roles/${key}`} 
+                      className="adminforge-btn adminforge-btn-secondary"
+                      style={{ padding: '6px 12px', fontSize: '13px' }}
+                    >
+                      View Permissions
+                    </Link>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </AdminLayout>
+  );
+}