@sonicjs-cms/core 2.0.0 → 2.0.1

package/dist/{chunk-JETM2U2D.js → chunk-QSF34IYQ.js}

@@ -1,8 +1,8 @@
-import { getCacheService, CACHE_CONFIGS } from './chunk-3MNMOLSA.js';
-import { requireAuth, isPluginActive, requireRole, AuthManager, logActivity, requirePermission } from './chunk-WESS2U3K.js';
-import { PluginService, getLogger } from './chunk-7N3HK7ZK.js';
-import { init_admin_layout_catalyst_template, renderDesignPage, renderCheckboxPage, renderFAQList, renderTestimonialsList, renderCodeExamplesList, renderAlert, renderTable, renderPagination, renderConfirmationDialog, getConfirmationDialogScript, renderAdminLayoutCatalyst, renderAdminLayout, adminLayoutV2 } from './chunk-P3VS4DV3.js';
-import { QueryFilterBuilder, sanitizeInput, escapeHtml } from './chunk-JIINOD2W.js';
+import { getCacheService, CACHE_CONFIGS, getLogger } from './chunk-5XTB4FE5.js';
+import { requireAuth, isPluginActive, requireRole, AuthManager, logActivity, requirePermission } from './chunk-TY3NHEBN.js';
+import { PluginService, MigrationService } from './chunk-CDBVZEWR.js';
+import { init_admin_layout_catalyst_template, renderDesignPage, renderCheckboxPage, renderFAQList, renderTestimonialsList, renderCodeExamplesList, renderAlert, renderTable, renderPagination, renderConfirmationDialog, getConfirmationDialogScript, renderAdminLayoutCatalyst, renderAdminLayout, adminLayoutV2, renderForm } from './chunk-O46XKBFM.js';
+import { QueryFilterBuilder, sanitizeInput, getCoreVersion, escapeHtml } from './chunk-OL2OE3VJ.js';
 import { Hono } from 'hono';
 import { cors } from 'hono/cors';
 import { z } from 'zod';
@@ -2030,209 +2030,9 @@ function renderRegisterPage(data) {
     </html>
   `;
 }
-var AuthValidationService = class _AuthValidationService {
-  static instance;
-  cachedSettings = null;
-  cacheExpiry = 0;
-  CACHE_TTL = 5 * 60 * 1e3;
-  // 5 minutes
-  static getInstance() {
-    if (!_AuthValidationService.instance) {
-      _AuthValidationService.instance = new _AuthValidationService();
-    }
-    return _AuthValidationService.instance;
-  }
-  /**
-   * Get authentication settings from core-auth plugin
-   */
-  async getAuthSettings(db) {
-    if (this.cachedSettings && Date.now() < this.cacheExpiry) {
-      return this.cachedSettings;
-    }
-    try {
-      const plugin = await db.prepare("SELECT settings FROM plugins WHERE id = ? AND status = ?").bind("core-auth", "active").first();
-      if (!plugin || !plugin.settings) {
-        console.warn("[AuthValidation] Core-auth plugin not found or not active, using defaults");
-        return this.getDefaultSettings();
-      }
-      const settings = typeof plugin.settings === "string" ? JSON.parse(plugin.settings) : plugin.settings;
-      this.cachedSettings = settings;
-      this.cacheExpiry = Date.now() + this.CACHE_TTL;
-      return settings;
-    } catch (error) {
-      console.error("[AuthValidation] Error loading auth settings:", error);
-      return this.getDefaultSettings();
-    }
-  }
-  /**
-   * Get default authentication settings
-   */
-  getDefaultSettings() {
-    return {
-      requiredFields: {
-        email: { required: true, minLength: 5, label: "Email", type: "email" },
-        password: { required: true, minLength: 8, label: "Password", type: "password" },
-        username: { required: true, minLength: 3, label: "Username", type: "text" },
-        firstName: { required: true, minLength: 1, label: "First Name", type: "text" },
-        lastName: { required: true, minLength: 1, label: "Last Name", type: "text" }
-      },
-      validation: {
-        emailFormat: true,
-        allowDuplicateUsernames: false,
-        passwordRequirements: {
-          requireUppercase: false,
-          requireLowercase: false,
-          requireNumbers: false,
-          requireSpecialChars: false
-        }
-      },
-      registration: {
-        enabled: true,
-        requireEmailVerification: false,
-        defaultRole: "viewer"
-      }
-    };
-  }
-  /**
-   * Build dynamic Zod schema based on settings
-   */
-  async buildRegistrationSchema(db) {
-    const settings = await this.getAuthSettings(db);
-    const fields = settings.requiredFields;
-    const validation = settings.validation;
-    const schemaFields = {};
-    if (fields.email.required) {
-      let emailSchema = z.string();
-      if (validation.emailFormat) {
-        emailSchema = emailSchema.email("Valid email is required");
-      }
-      if (fields.email.minLength > 0) {
-        emailSchema = emailSchema.min(
-          fields.email.minLength,
-          `Email must be at least ${fields.email.minLength} characters`
-        );
-      }
-      schemaFields.email = emailSchema;
-    } else {
-      schemaFields.email = z.string().email().optional();
-    }
-    if (fields.password.required) {
-      let passwordSchema = z.string().min(
-        fields.password.minLength,
-        `Password must be at least ${fields.password.minLength} characters`
-      );
-      if (validation.passwordRequirements.requireUppercase) {
-        passwordSchema = passwordSchema.regex(
-          /[A-Z]/,
-          "Password must contain at least one uppercase letter"
-        );
-      }
-      if (validation.passwordRequirements.requireLowercase) {
-        passwordSchema = passwordSchema.regex(
-          /[a-z]/,
-          "Password must contain at least one lowercase letter"
-        );
-      }
-      if (validation.passwordRequirements.requireNumbers) {
-        passwordSchema = passwordSchema.regex(
-          /[0-9]/,
-          "Password must contain at least one number"
-        );
-      }
-      if (validation.passwordRequirements.requireSpecialChars) {
-        passwordSchema = passwordSchema.regex(
-          /[!@#$%^&*(),.?":{}|<>]/,
-          "Password must contain at least one special character"
-        );
-      }
-      schemaFields.password = passwordSchema;
-    } else {
-      schemaFields.password = z.string().min(fields.password.minLength).optional();
-    }
-    if (fields.username.required) {
-      schemaFields.username = z.string().min(
-        fields.username.minLength,
-        `Username must be at least ${fields.username.minLength} characters`
-      );
-    } else {
-      schemaFields.username = z.string().min(fields.username.minLength).optional();
-    }
-    if (fields.firstName.required) {
-      schemaFields.firstName = z.string().min(
-        fields.firstName.minLength,
-        `First name must be at least ${fields.firstName.minLength} characters`
-      );
-    } else {
-      schemaFields.firstName = z.string().optional();
-    }
-    if (fields.lastName.required) {
-      schemaFields.lastName = z.string().min(
-        fields.lastName.minLength,
-        `Last name must be at least ${fields.lastName.minLength} characters`
-      );
-    } else {
-      schemaFields.lastName = z.string().optional();
-    }
-    return z.object(schemaFields);
-  }
-  /**
-   * Validate registration data against settings
-   */
-  async validateRegistration(db, data) {
-    try {
-      const schema = await this.buildRegistrationSchema(db);
-      await schema.parseAsync(data);
-      return { valid: true, errors: [] };
-    } catch (error) {
-      if (error instanceof z.ZodError) {
-        return {
-          valid: false,
-          errors: error.errors.map((e) => e.message)
-        };
-      }
-      return {
-        valid: false,
-        errors: ["Validation failed"]
-      };
-    }
-  }
-  /**
-   * Clear cached settings (call after updating plugin settings)
-   */
-  clearCache() {
-    this.cachedSettings = null;
-    this.cacheExpiry = 0;
-  }
-  /**
-   * Get required field names for database insertion
-   */
-  async getRequiredFieldNames(db) {
-    const settings = await this.getAuthSettings(db);
-    const requiredFields = [];
-    Object.entries(settings.requiredFields).forEach(([key, config]) => {
-      if (config.required) {
-        requiredFields.push(key);
-      }
-    });
-    return requiredFields;
-  }
-  /**
-   * Generate auto-fill values for optional fields
-   */
-  generateDefaultValue(fieldName, data) {
-    switch (fieldName) {
-      case "username":
-        return data.email ? data.email.split("@")[0] : `user_${Date.now()}`;
-      case "firstName":
-        return data.firstName || "User";
-      case "lastName":
-        return data.lastName || "";
-      default:
-        return "";
-    }
-  }
-};
-var authValidationService = AuthValidationService.getInstance();
+
+// src/services/auth-validation.ts
+var authValidationService = {};
 
 // src/routes/auth.ts
 var authRoutes = new Hono();
@@ -4899,6 +4699,9 @@ function escapeHtml3(text) {
   })[char] || char);
 }
 
+// src/middleware/plugin-middleware.ts
+var isPluginActive2 = () => false;
+
 // src/routes/admin-content.ts
 var adminContentRoutes = new Hono();
 async function getCollectionFields(db, collectionId) {
@@ -5147,7 +4950,7 @@ adminContentRoutes.get("/new", async (c) => {
       return c.html(renderContentFormPage(formData2));
     }
     const fields = await getCollectionFields(db, collectionId);
-    const workflowEnabled = await isPluginActive(db, "workflow");
+    const workflowEnabled = await isPluginActive2(db, "workflow");
     const formData = {
       collection,
       fields,
@@ -5219,7 +5022,7 @@ adminContentRoutes.get("/:id/edit", async (c) => {
     };
     const fields = await getCollectionFields(db, content.collection_id);
     const contentData = content.data ? JSON.parse(content.data) : {};
-    const workflowEnabled = await isPluginActive(db, "workflow");
+    const workflowEnabled = await isPluginActive2(db, "workflow");
     const formData = {
       id: content.id,
       title: content.title,
@@ -15753,6 +15556,4230 @@ adminCodeExamplesRoutes.delete("/:id", async (c) => {
 });
 var admin_code_examples_default = adminCodeExamplesRoutes;
 
+// src/templates/pages/admin-dashboard.template.ts
+function renderDashboardPage(data) {
+  const pageContent = `
+    <div class="mb-8 flex flex-col sm:flex-row sm:items-center sm:justify-between">
+      <div>
+        <h1 class="text-2xl/8 font-semibold text-zinc-950 dark:text-white sm:text-xl/8">Dashboard</h1>
+        <p class="mt-2 text-sm/6 text-zinc-500 dark:text-zinc-400">Welcome to your SonicJS AI admin dashboard</p>
+      </div>
+      <div class="mt-4 sm:mt-0 flex items-center gap-x-3">
+        <a href="/docs/getting-started" target="_blank" class="inline-flex items-center justify-center gap-x-1.5 rounded-lg bg-lime-600 dark:bg-lime-700 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-lime-700 dark:hover:bg-lime-600 transition-colors shadow-sm">
+          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.697 50.697 0 0112 13.489a50.702 50.702 0 017.74-3.342M6.75 15a.75.75 0 100-1.5.75.75 0 000 1.5zm0 0v-3.675A55.378 55.378 0 0112 8.443m-7.007 11.55A5.981 5.981 0 006.75 15.75v-1.5"/>
+          </svg>
+          Developer Docs
+        </a>
+        <a href="/admin/api-reference" class="inline-flex items-center justify-center gap-x-1.5 rounded-lg bg-white dark:bg-zinc-800 px-3.5 py-2.5 text-sm font-semibold text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors shadow-sm">
+          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"/>
+          </svg>
+          API Docs
+        </a>
+        <a href="/api" target="_blank" class="inline-flex items-center justify-center gap-x-1.5 rounded-lg bg-zinc-950 dark:bg-white px-3.5 py-2.5 text-sm font-semibold text-white dark:text-zinc-950 hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors shadow-sm">
+          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5"/>
+          </svg>
+          OpenAPI
+        </a>
+      </div>
+    </div>
+
+    <!-- Stats Cards -->
+    <div
+      id="stats-container"
+      class="mb-8"
+      hx-get="/admin/dashboard/stats"
+      hx-trigger="load"
+      hx-swap="innerHTML"
+    >
+      ${renderStatsCardsSkeleton()}
+    </div>
+
+    <!-- Dashboard Grid -->
+    <div class="grid grid-cols-1 gap-6 xl:grid-cols-3 mb-8">
+      <!-- Analytics Chart -->
+      <div class="xl:col-span-2">
+        ${renderAnalyticsChart()}
+      </div>
+
+      <!-- Recent Activity -->
+      <div
+        class="xl:col-span-1"
+        id="recent-activity-container"
+        hx-get="/admin/dashboard/recent-activity"
+        hx-trigger="load"
+        hx-swap="innerHTML"
+      >
+        ${renderRecentActivitySkeleton()}
+      </div>
+    </div>
+
+    <!-- Secondary Grid -->
+    <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
+      <!-- Quick Actions -->
+      ${renderQuickActions()}
+
+      <!-- System Status -->
+      ${renderSystemStatus()}
+
+      <!-- Storage Usage -->
+      <div id="storage-usage-container" hx-get="/admin/dashboard/storage" hx-trigger="load" hx-swap="innerHTML">
+        ${renderStorageUsage()}
+      </div>
+    </div>
+
+    <script>
+      function refreshDashboard() {
+        htmx.trigger('#stats-container', 'htmx:load');
+        showNotification('Dashboard refreshed', 'success');
+      }
+    </script>
+  `;
+  const layoutData = {
+    title: "Dashboard",
+    pageTitle: "Dashboard",
+    currentPath: "/admin",
+    user: data.user,
+    version: data.version,
+    content: pageContent
+  };
+  return renderAdminLayout(layoutData);
+}
+function renderStatsCards(stats) {
+  const cards = [
+    {
+      title: "Total Collections",
+      value: stats.collections.toString(),
+      change: "12.5",
+      isPositive: true
+    },
+    {
+      title: "Content Items",
+      value: stats.contentItems.toString(),
+      change: "8.2",
+      isPositive: true
+    },
+    {
+      title: "Media Files",
+      value: stats.mediaFiles.toString(),
+      change: "15.3",
+      isPositive: true
+    },
+    {
+      title: "Active Users",
+      value: stats.users.toString(),
+      change: "2.4",
+      isPositive: false
+    }
+  ];
+  const cardColors = ["text-cyan-400", "text-lime-400", "text-pink-400", "text-purple-400"];
+  return `
+    <div>
+      <h3 class="text-base font-semibold text-zinc-950 dark:text-white">Last 30 days</h3>
+      <dl class="mt-5 grid grid-cols-1 divide-zinc-950/5 dark:divide-white/10 overflow-hidden rounded-lg bg-zinc-800/75 dark:bg-zinc-800/75 ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 md:grid-cols-4 md:divide-x md:divide-y-0">
+        ${cards.map((card, index) => `
+          <div class="px-4 py-5 sm:p-6">
+            <dt class="text-base font-normal text-zinc-700 dark:text-zinc-100">${card.title}</dt>
+            <dd class="mt-1 flex items-baseline justify-between md:block lg:flex">
+              <div class="flex items-baseline text-2xl font-semibold ${cardColors[index]}">
+                ${card.value}
+              </div>
+              <div class="inline-flex items-baseline rounded-full ${card.isPositive ? "bg-lime-400/10 text-lime-600 dark:text-lime-400" : "bg-pink-400/10 text-pink-600 dark:text-pink-400"} px-2.5 py-0.5 text-sm font-medium md:mt-2 lg:mt-0">
+                <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-1 mr-0.5 size-5 shrink-0 self-center">
+                  ${card.isPositive ? '<path d="M10 17a.75.75 0 0 1-.75-.75V5.612L5.29 9.77a.75.75 0 0 1-1.08-1.04l5.25-5.5a.75.75 0 0 1 1.08 0l5.25 5.5a.75.75 0 1 1-1.08 1.04l-3.96-4.158V16.25A.75.75 0 0 1 10 17Z" clip-rule="evenodd" fill-rule="evenodd" />' : '<path d="M10 3a.75.75 0 0 1 .75.75v10.638l3.96-4.158a.75.75 0 1 1 1.08 1.04l-5.25 5.5a.75.75 0 0 1-1.08 0l-5.25-5.5a.75.75 0 1 1 1.08-1.04l3.96 4.158V3.75A.75.75 0 0 1 10 3Z" clip-rule="evenodd" fill-rule="evenodd" />'}
+                </svg>
+                <span class="sr-only">${card.isPositive ? "Increased" : "Decreased"} by</span>
+                ${card.change}%
+              </div>
+            </dd>
+          </div>
+        `).join("")}
+      </dl>
+    </div>
+  `;
+}
+function renderStatsCardsSkeleton() {
+  return `
+    <div>
+      <div class="h-6 w-32 bg-zinc-200 dark:bg-zinc-700 rounded animate-pulse mb-5"></div>
+      <div class="grid grid-cols-1 divide-zinc-950/5 dark:divide-white/10 overflow-hidden rounded-lg bg-zinc-800/75 dark:bg-zinc-800/75 ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 md:grid-cols-4 md:divide-x md:divide-y-0">
+        ${Array(4).fill(0).map(
+    () => `
+            <div class="px-4 py-5 sm:p-6 animate-pulse">
+              <div class="h-4 w-24 bg-zinc-200 dark:bg-zinc-700 rounded mb-3"></div>
+              <div class="h-8 w-16 bg-zinc-200 dark:bg-zinc-700 rounded"></div>
+            </div>
+          `
+  ).join("")}
+      </div>
+    </div>
+  `;
+}
+function renderAnalyticsChart() {
+  return `
+    <div class="rounded-lg bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10">
+      <div class="border-b border-zinc-950/5 dark:border-white/10 px-6 py-6">
+        <div class="flex flex-wrap items-start justify-between gap-3 sm:flex-nowrap">
+          <div>
+            <h3 class="text-base/7 font-semibold text-zinc-950 dark:text-white">Real-Time Analytics</h3>
+            <p class="mt-1 text-sm/6 text-zinc-500 dark:text-zinc-400">Requests per second (live)</p>
+          </div>
+          <div class="flex items-center gap-2">
+            <div class="h-2 w-2 rounded-full bg-lime-500 animate-pulse"></div>
+            <span class="text-xs text-zinc-500 dark:text-zinc-400">Live</span>
+          </div>
+        </div>
+        <div class="mt-4 flex items-baseline gap-2">
+          <span id="current-rps" class="text-4xl font-bold text-cyan-500 dark:text-cyan-400">0</span>
+          <span class="text-sm text-zinc-500 dark:text-zinc-400">req/s</span>
+        </div>
+      </div>
+
+      <div class="px-6 py-6">
+        <canvas id="requestsChart" class="w-full" style="height: 300px;"></canvas>
+      </div>
+
+      <!-- Hidden div to trigger HTMX polling -->
+      <div
+        hx-get="/admin/api/metrics"
+        hx-trigger="every 1s"
+        hx-swap="none"
+        style="display: none;"
+      ></div>
+    </div>
+
+    <script>
+      // Initialize Chart.js for Real-time Requests
+      (function() {
+        const ctx = document.getElementById('requestsChart');
+        if (!ctx) return;
+
+        // Initialize with last 60 seconds of data (1 data point per second)
+        const maxDataPoints = 60;
+        const labels = [];
+        const data = [];
+
+        for (let i = maxDataPoints - 1; i >= 0; i--) {
+          labels.push(\`-\${i}s\`);
+          data.push(0);
+        }
+
+        const isDark = document.documentElement.classList.contains('dark');
+
+        const chart = new Chart(ctx, {
+          type: 'line',
+          data: {
+            labels: labels,
+            datasets: [{
+              label: 'Requests/sec',
+              data: data,
+              borderColor: isDark ? 'rgb(34, 211, 238)' : 'rgb(6, 182, 212)',
+              backgroundColor: isDark ? 'rgba(34, 211, 238, 0.1)' : 'rgba(6, 182, 212, 0.1)',
+              borderWidth: 2,
+              fill: true,
+              tension: 0.4,
+              pointRadius: 0,
+              pointHoverRadius: 4,
+              pointBackgroundColor: isDark ? 'rgb(34, 211, 238)' : 'rgb(6, 182, 212)',
+              pointBorderColor: isDark ? 'rgb(17, 24, 39)' : 'rgb(255, 255, 255)',
+              pointBorderWidth: 2
+            }]
+          },
+          options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+              legend: {
+                display: false
+              },
+              tooltip: {
+                backgroundColor: isDark ? 'rgb(39, 39, 42)' : 'rgb(255, 255, 255)',
+                titleColor: isDark ? 'rgb(255, 255, 255)' : 'rgb(9, 9, 11)',
+                bodyColor: isDark ? 'rgb(161, 161, 170)' : 'rgb(113, 113, 122)',
+                borderColor: isDark ? 'rgba(255, 255, 255, 0.1)' : 'rgba(9, 9, 11, 0.05)',
+                borderWidth: 1,
+                padding: 12,
+                displayColors: false,
+                callbacks: {
+                  label: function(context) {
+                    return 'Requests/sec: ' + context.parsed.y.toFixed(2);
+                  }
+                }
+              }
+            },
+            scales: {
+              y: {
+                beginAtZero: true,
+                border: {
+                  display: false
+                },
+                grid: {
+                  color: isDark ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 0, 0, 0.05)',
+                  drawBorder: false
+                },
+                ticks: {
+                  color: isDark ? 'rgb(161, 161, 170)' : 'rgb(113, 113, 122)',
+                  padding: 8,
+                  callback: function(value) {
+                    return value.toFixed(1);
+                  }
+                }
+              },
+              x: {
+                border: {
+                  display: false
+                },
+                grid: {
+                  display: false
+                },
+                ticks: {
+                  color: isDark ? 'rgb(161, 161, 170)' : 'rgb(113, 113, 122)',
+                  padding: 8,
+                  maxTicksLimit: 6
+                }
+              }
+            }
+          }
+        });
+
+        // Listen for metrics updates from HTMX
+        window.addEventListener('htmx:afterRequest', function(event) {
+          if (event.detail.pathInfo.requestPath === '/admin/api/metrics') {
+            try {
+              const metrics = JSON.parse(event.detail.xhr.responseText);
+
+              // Update current RPS display
+              const rpsElement = document.getElementById('current-rps');
+              if (rpsElement) {
+                rpsElement.textContent = metrics.requestsPerSecond.toFixed(2);
+              }
+
+              // Add new data point to chart
+              chart.data.datasets[0].data.shift();
+              chart.data.datasets[0].data.push(metrics.requestsPerSecond);
+
+              // Regenerate labels to maintain -60s to now format
+              const newLabels = [];
+              for (let i = maxDataPoints - 1; i >= 1; i--) {
+                newLabels.push(\`-\${i}s\`);
+              }
+              newLabels.push('now');
+              chart.data.labels = newLabels;
+
+              chart.update('none'); // Update without animation for smoother real-time updates
+            } catch (e) {
+              console.error('Error updating metrics:', e);
+            }
+          }
+        });
+      })();
+    </script>
+  `;
+}
+function renderRecentActivitySkeleton() {
+  return `
+    <div class="rounded-lg bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 animate-pulse">
+      <div class="border-b border-zinc-950/5 dark:border-white/10 px-6 py-6">
+        <div class="h-5 w-32 bg-zinc-200 dark:bg-zinc-700 rounded"></div>
+      </div>
+      <div class="px-6 py-6">
+        <div class="space-y-6">
+          ${Array(3).fill(0).map(() => `
+            <div class="flex gap-x-4">
+              <div class="h-10 w-10 rounded-full bg-zinc-200 dark:bg-zinc-700"></div>
+              <div class="flex-auto space-y-2">
+                <div class="h-4 w-48 bg-zinc-200 dark:bg-zinc-700 rounded"></div>
+                <div class="h-3 w-32 bg-zinc-200 dark:bg-zinc-700 rounded"></div>
+              </div>
+            </div>
+          `).join("")}
+        </div>
+      </div>
+    </div>
+  `;
+}
+function renderRecentActivity(activities) {
+  const getInitials = (user) => {
+    const parts = user.split(" ").filter((p) => p.length > 0);
+    if (parts.length >= 2) {
+      const first = parts[0]?.[0] || "";
+      const second = parts[1]?.[0] || "";
+      return (first + second).toUpperCase();
+    }
+    return user.substring(0, 2).toUpperCase();
+  };
+  const getRelativeTime = (timestamp) => {
+    const date = new Date(timestamp);
+    const now = /* @__PURE__ */ new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffMins = Math.floor(diffMs / 6e4);
+    const diffHours = Math.floor(diffMins / 60);
+    const diffDays = Math.floor(diffHours / 24);
+    if (diffMins < 1) return "just now";
+    if (diffMins < 60) return `${diffMins} minute${diffMins > 1 ? "s" : ""} ago`;
+    if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? "s" : ""} ago`;
+    return `${diffDays} day${diffDays > 1 ? "s" : ""} ago`;
+  };
+  const getColorClasses = (type) => {
+    switch (type) {
+      case "content":
+        return {
+          bgColor: "bg-lime-500/10 dark:bg-lime-400/10",
+          textColor: "text-lime-700 dark:text-lime-300"
+        };
+      case "media":
+        return {
+          bgColor: "bg-cyan-500/10 dark:bg-cyan-400/10",
+          textColor: "text-cyan-700 dark:text-cyan-300"
+        };
+      case "user":
+        return {
+          bgColor: "bg-pink-500/10 dark:bg-pink-400/10",
+          textColor: "text-pink-700 dark:text-pink-300"
+        };
+      case "collection":
+        return {
+          bgColor: "bg-purple-500/10 dark:bg-purple-400/10",
+          textColor: "text-purple-700 dark:text-purple-300"
+        };
+      default:
+        return {
+          bgColor: "bg-gray-500/10 dark:bg-gray-400/10",
+          textColor: "text-gray-700 dark:text-gray-300"
+        };
+    }
+  };
+  const formattedActivities = (activities || []).map((activity) => {
+    const colors = getColorClasses(activity.type);
+    return {
+      ...activity,
+      initials: getInitials(activity.user),
+      time: getRelativeTime(activity.timestamp),
+      ...colors
+    };
+  });
+  if (formattedActivities.length === 0) {
+    formattedActivities.push({
+      type: "content",
+      description: "No recent activity",
+      user: "System",
+      time: "",
+      initials: "SY",
+      bgColor: "bg-gray-500/10 dark:bg-gray-400/10",
+      textColor: "text-gray-700 dark:text-gray-300",
+      id: "0",
+      action: "",
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    });
+  }
+  return `
+    <div class="rounded-lg bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10">
+      <div class="border-b border-zinc-950/5 dark:border-white/10 px-6 py-6">
+        <div class="flex items-center justify-between">
+          <h3 class="text-base/7 font-semibold text-zinc-950 dark:text-white">Recent Activity</h3>
+          <button class="text-xs/5 font-medium text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300 transition-colors">
+            View all
+          </button>
+        </div>
+      </div>
+
+      <div class="px-6 py-6">
+        <ul role="list" class="space-y-6">
+          ${formattedActivities.map(
+    (activity) => `
+            <li class="relative flex gap-x-4">
+              <div class="flex h-10 w-10 flex-none items-center justify-center rounded-full ${activity.bgColor}">
+                <span class="text-xs font-semibold ${activity.textColor}">${activity.initials}</span>
+              </div>
+              <div class="flex-auto">
+                <p class="text-sm/6 font-medium text-zinc-950 dark:text-white">${activity.description}</p>
+                <p class="mt-1 text-xs/5 text-zinc-500 dark:text-zinc-400">
+                  <span class="font-medium text-zinc-950 dark:text-white">${activity.user}</span>
+                  <span class="text-zinc-400 dark:text-zinc-500"> \xB7 </span>
+                  ${activity.time}
+                </p>
+              </div>
+            </li>
+          `
+  ).join("")}
+        </ul>
+      </div>
+    </div>
+  `;
+}
+function renderQuickActions() {
+  const actions = [
+    {
+      title: "Create Content",
+      description: "Add new blog post or page",
+      href: "/admin/content/new",
+      icon: `<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 4v16m8-8H4"/>
+      </svg>`
+    },
+    {
+      title: "Upload Media",
+      description: "Add images and files",
+      href: "/admin/media",
+      icon: `<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="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
+      </svg>`
+    },
+    {
+      title: "Manage Users",
+      description: "Add or edit user accounts",
+      href: "/admin/users",
+      icon: `<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 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"/>
+      </svg>`
+    }
+  ];
+  return `
+    <div class="rounded-lg bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10">
+      <div class="border-b border-zinc-950/5 dark:border-white/10 px-6 py-6">
+        <h3 class="text-base/7 font-semibold text-zinc-950 dark:text-white">Quick Actions</h3>
+      </div>
+
+      <div class="p-6">
+        <div class="space-y-2">
+          ${actions.map(
+    (action) => `
+            <a href="${action.href}" class="group flex items-center gap-x-3 rounded-lg px-3 py-2 hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors">
+              <div class="flex h-10 w-10 flex-none items-center justify-center text-zinc-400 dark:text-zinc-500 group-hover:text-zinc-600 dark:group-hover:text-zinc-400">
+                ${action.icon}
+              </div>
+              <div class="flex-auto">
+                <p class="text-sm/6 font-medium text-zinc-950 dark:text-white">${action.title}</p>
+                <p class="text-xs/5 text-zinc-500 dark:text-zinc-400">${action.description}</p>
+              </div>
+              <svg class="h-5 w-5 flex-none text-zinc-400 dark:text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8.25 4.5l7.5 7.5-7.5 7.5"/>
+              </svg>
+            </a>
+          `
+  ).join("")}
+        </div>
+      </div>
+    </div>
+  `;
+}
+function renderSystemStatus() {
+  return `
+    <div class="rounded-lg bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 overflow-hidden">
+      <div class="border-b border-zinc-950/5 dark:border-white/10 px-6 py-6">
+        <div class="flex items-center justify-between">
+          <h3 class="text-base/7 font-semibold text-zinc-950 dark:text-white">System Status</h3>
+          <div class="flex items-center gap-2">
+            <div class="h-2 w-2 rounded-full bg-lime-500 animate-pulse"></div>
+            <span class="text-xs text-zinc-500 dark:text-zinc-400">Live</span>
+          </div>
+        </div>
+      </div>
+
+      <div
+        id="system-status-container"
+        class="p-6"
+        hx-get="/admin/dashboard/system-status"
+        hx-trigger="load, every 30s"
+        hx-swap="innerHTML"
+      >
+        <!-- Loading skeleton with gradient -->
+        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+          ${[
+    { color: "from-blue-500/20 to-cyan-500/20", darkColor: "dark:from-blue-500/10 dark:to-cyan-500/10" },
+    { color: "from-purple-500/20 to-pink-500/20", darkColor: "dark:from-purple-500/10 dark:to-pink-500/10" },
+    { color: "from-amber-500/20 to-orange-500/20", darkColor: "dark:from-amber-500/10 dark:to-orange-500/10" },
+    { color: "from-lime-500/20 to-emerald-500/20", darkColor: "dark:from-lime-500/10 dark:to-emerald-500/10" }
+  ].map((gradient, i) => `
+            <div class="relative group">
+              <div class="absolute inset-0 bg-gradient-to-br ${gradient.color} ${gradient.darkColor} rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+              <div class="relative bg-zinc-50 dark:bg-zinc-800/50 rounded-xl p-5 border border-zinc-200/50 dark:border-zinc-700/50 animate-pulse">
+                <div class="flex items-center justify-between mb-3">
+                  <div class="h-4 w-24 bg-zinc-200 dark:bg-zinc-700 rounded"></div>
+                  <div class="h-6 w-6 bg-zinc-200 dark:bg-zinc-700 rounded-full"></div>
+                </div>
+                <div class="h-3 w-20 bg-zinc-200 dark:bg-zinc-700 rounded"></div>
+              </div>
+            </div>
+          `).join("")}
+        </div>
+      </div>
+    </div>
+
+    <style>
+      @keyframes ping-slow {
+        0%, 100% { opacity: 1; }
+        50% { opacity: 0.5; }
+      }
+      .animate-ping-slow {
+        animation: ping-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+      }
+    </style>
+  `;
+}
+function renderStorageUsage(databaseSizeBytes, mediaSizeBytes) {
+  const formatBytes = (bytes) => {
+    if (bytes === 0) return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`;
+  };
+  const dbSizeGB = databaseSizeBytes ? databaseSizeBytes / 1024 ** 3 : 0;
+  const dbMaxGB = 10;
+  const dbPercentageRaw = dbSizeGB / dbMaxGB * 100;
+  const dbPercentage = Math.min(Math.max(dbPercentageRaw, 0.5), 100);
+  const dbUsedFormatted = databaseSizeBytes ? formatBytes(databaseSizeBytes) : "Unknown";
+  const mediaUsedFormatted = mediaSizeBytes ? formatBytes(mediaSizeBytes) : "0 B";
+  const storageItems = [
+    {
+      label: "Database",
+      used: dbUsedFormatted,
+      total: "10 GB",
+      percentage: dbPercentage,
+      color: dbPercentage > 80 ? "bg-red-500 dark:bg-red-400" : dbPercentage > 60 ? "bg-amber-500 dark:bg-amber-400" : "bg-cyan-500 dark:bg-cyan-400"
+    },
+    {
+      label: "Media Files",
+      used: mediaUsedFormatted,
+      total: "\u221E",
+      percentage: 0,
+      color: "bg-lime-500 dark:bg-lime-400",
+      note: "Stored in R2"
+    },
+    {
+      label: "Cache (KV)",
+      used: "N/A",
+      total: "\u221E",
+      percentage: 0,
+      color: "bg-purple-500 dark:bg-purple-400",
+      note: "Unlimited"
+    }
+  ];
+  return `
+    <div class="rounded-lg bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10">
+      <div class="border-b border-zinc-950/5 dark:border-white/10 px-6 py-6">
+        <h3 class="text-base/7 font-semibold text-zinc-950 dark:text-white">Storage Usage</h3>
+      </div>
+
+      <div class="px-6 py-6">
+        <dl class="space-y-6">
+          ${storageItems.map(
+    (item) => `
+            <div>
+              <div class="flex items-center justify-between mb-2">
+                <dt class="text-sm/6 text-zinc-500 dark:text-zinc-400">
+                  ${item.label}
+                  ${item.note ? `<span class="ml-2 text-xs text-zinc-400 dark:text-zinc-500">(${item.note})</span>` : ""}
+                </dt>
+                <dd class="text-sm/6 font-medium text-zinc-950 dark:text-white">${item.used} / ${item.total}</dd>
+              </div>
+              <div class="w-full bg-zinc-100 dark:bg-zinc-800 rounded-full h-1.5 overflow-hidden">
+                <div class="${item.color} h-full rounded-full transition-all duration-300" style="width: ${item.percentage}%"></div>
+              </div>
+            </div>
+          `
+  ).join("")}
+        </dl>
+      </div>
+    </div>
+  `;
+}
+
+// src/routes/admin-dashboard.ts
+var VERSION = getCoreVersion();
+var router = new Hono();
+router.use("*", requireAuth());
+router.get("/", async (c) => {
+  const user = c.get("user");
+  try {
+    const pageData = {
+      user: {
+        name: user.email.split("@")[0] || user.email,
+        email: user.email,
+        role: user.role
+      },
+      version: VERSION
+    };
+    return c.html(renderDashboardPage(pageData));
+  } catch (error) {
+    console.error("Dashboard error:", error);
+    const pageData = {
+      user: {
+        name: user.email,
+        email: user.email,
+        role: user.role
+      },
+      version: VERSION
+    };
+    return c.html(renderDashboardPage(pageData));
+  }
+});
+router.get("/dashboard/stats", async (c) => {
+  try {
+    const db = c.env.DB;
+    let collectionsCount = 0;
+    try {
+      const collectionsStmt = db.prepare("SELECT COUNT(*) as count FROM collections WHERE is_active = 1");
+      const collectionsResult = await collectionsStmt.first();
+      collectionsCount = collectionsResult?.count || 0;
+    } catch (error) {
+      console.error("Error fetching collections count:", error);
+    }
+    let contentCount = 0;
+    try {
+      const contentStmt = db.prepare("SELECT COUNT(*) as count FROM content WHERE deleted_at IS NULL");
+      const contentResult = await contentStmt.first();
+      contentCount = contentResult?.count || 0;
+    } catch (error) {
+      console.error("Error fetching content count:", error);
+    }
+    let mediaCount = 0;
+    let mediaSize = 0;
+    try {
+      const mediaStmt = db.prepare("SELECT COUNT(*) as count, COALESCE(SUM(size), 0) as total_size FROM media WHERE deleted_at IS NULL");
+      const mediaResult = await mediaStmt.first();
+      mediaCount = mediaResult?.count || 0;
+      mediaSize = mediaResult?.total_size || 0;
+    } catch (error) {
+      console.error("Error fetching media count:", error);
+    }
+    let usersCount = 0;
+    try {
+      const usersStmt = db.prepare("SELECT COUNT(*) as count FROM users WHERE is_active = 1");
+      const usersResult = await usersStmt.first();
+      usersCount = usersResult?.count || 0;
+    } catch (error) {
+      console.error("Error fetching users count:", error);
+    }
+    const html9 = renderStatsCards({
+      collections: collectionsCount,
+      contentItems: contentCount,
+      mediaFiles: mediaCount,
+      users: usersCount,
+      mediaSize
+    });
+    return c.html(html9);
+  } catch (error) {
+    console.error("Error fetching stats:", error);
+    return c.html('<div class="text-red-500">Failed to load statistics</div>');
+  }
+});
+router.get("/dashboard/storage", async (c) => {
+  try {
+    const db = c.env.DB;
+    let databaseSize = 0;
+    try {
+      const result = await db.prepare("SELECT 1").run();
+      databaseSize = result?.meta?.size_after || 0;
+    } catch (error) {
+      console.error("Error fetching database size:", error);
+    }
+    let mediaSize = 0;
+    try {
+      const mediaStmt = db.prepare("SELECT COALESCE(SUM(size), 0) as total_size FROM media WHERE deleted_at IS NULL");
+      const mediaResult = await mediaStmt.first();
+      mediaSize = mediaResult?.total_size || 0;
+    } catch (error) {
+      console.error("Error fetching media size:", error);
+    }
+    const html9 = renderStorageUsage(databaseSize, mediaSize);
+    return c.html(html9);
+  } catch (error) {
+    console.error("Error fetching storage usage:", error);
+    return c.html('<div class="text-red-500">Failed to load storage information</div>');
+  }
+});
+router.get("/dashboard/recent-activity", async (c) => {
+  try {
+    const db = c.env.DB;
+    const limit = parseInt(c.req.query("limit") || "5");
+    const activityStmt = db.prepare(`
+      SELECT
+        a.id,
+        a.action,
+        a.resource_type,
+        a.resource_id,
+        a.details,
+        a.created_at,
+        u.email,
+        u.first_name,
+        u.last_name
+      FROM activity_logs a
+      LEFT JOIN users u ON a.user_id = u.id
+      WHERE a.resource_type IN ('content', 'collections', 'users', 'media')
+      ORDER BY a.created_at DESC
+      LIMIT ?
+    `);
+    const { results } = await activityStmt.bind(limit).all();
+    const activities = (results || []).map((row) => {
+      const userName = row.first_name && row.last_name ? `${row.first_name} ${row.last_name}` : row.email || "System";
+      let description = "";
+      if (row.action === "create") {
+        description = `Created new ${row.resource_type}`;
+      } else if (row.action === "update") {
+        description = `Updated ${row.resource_type}`;
+      } else if (row.action === "delete") {
+        description = `Deleted ${row.resource_type}`;
+      } else {
+        description = `${row.action} ${row.resource_type}`;
+      }
+      return {
+        id: row.id,
+        type: row.resource_type,
+        action: row.action,
+        description,
+        timestamp: new Date(Number(row.created_at)).toISOString(),
+        user: userName
+      };
+    });
+    const html9 = renderRecentActivity(activities);
+    return c.html(html9);
+  } catch (error) {
+    console.error("Error fetching recent activity:", error);
+    const html9 = renderRecentActivity([]);
+    return c.html(html9);
+  }
+});
+router.get("/api/metrics", async (c) => {
+  try {
+    const { metricsTracker } = await import('../utils/metrics-tracker');
+    return c.json({
+      requestsPerSecond: metricsTracker.getRequestsPerSecond(),
+      totalRequests: metricsTracker.getTotalRequests(),
+      averageRPS: metricsTracker.getAverageRPS(),
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    });
+  } catch (error) {
+    console.error("Error fetching metrics:", error);
+    return c.json({
+      requestsPerSecond: 0,
+      totalRequests: 0,
+      averageRPS: 0,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    });
+  }
+});
+router.get("/dashboard/system-status", async (c) => {
+  try {
+    const html9 = `
+      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <div class="relative group">
+          <div class="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 dark:from-blue-500/10 dark:to-cyan-500/10 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+          <div class="relative bg-zinc-50 dark:bg-zinc-800/50 rounded-xl p-5 border border-zinc-200/50 dark:border-zinc-700/50">
+            <div class="flex items-center justify-between mb-3">
+              <span class="text-sm font-medium text-zinc-600 dark:text-zinc-400">API Status</span>
+              <svg class="w-6 h-6 text-lime-500" 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>
+            </div>
+            <p class="text-xs text-zinc-500 dark:text-zinc-400">Operational</p>
+          </div>
+        </div>
+
+        <div class="relative group">
+          <div class="absolute inset-0 bg-gradient-to-br from-purple-500/20 to-pink-500/20 dark:from-purple-500/10 dark:to-pink-500/10 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+          <div class="relative bg-zinc-50 dark:bg-zinc-800/50 rounded-xl p-5 border border-zinc-200/50 dark:border-zinc-700/50">
+            <div class="flex items-center justify-between mb-3">
+              <span class="text-sm font-medium text-zinc-600 dark:text-zinc-400">Database</span>
+              <svg class="w-6 h-6 text-lime-500" 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>
+            </div>
+            <p class="text-xs text-zinc-500 dark:text-zinc-400">Connected</p>
+          </div>
+        </div>
+
+        <div class="relative group">
+          <div class="absolute inset-0 bg-gradient-to-br from-amber-500/20 to-orange-500/20 dark:from-amber-500/10 dark:to-orange-500/10 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+          <div class="relative bg-zinc-50 dark:bg-zinc-800/50 rounded-xl p-5 border border-zinc-200/50 dark:border-zinc-700/50">
+            <div class="flex items-center justify-between mb-3">
+              <span class="text-sm font-medium text-zinc-600 dark:text-zinc-400">R2 Storage</span>
+              <svg class="w-6 h-6 text-lime-500" 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>
+            </div>
+            <p class="text-xs text-zinc-500 dark:text-zinc-400">Available</p>
+          </div>
+        </div>
+
+        <div class="relative group">
+          <div class="absolute inset-0 bg-gradient-to-br from-lime-500/20 to-emerald-500/20 dark:from-lime-500/10 dark:to-emerald-500/10 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+          <div class="relative bg-zinc-50 dark:bg-zinc-800/50 rounded-xl p-5 border border-zinc-200/50 dark:border-zinc-700/50">
+            <div class="flex items-center justify-between mb-3">
+              <span class="text-sm font-medium text-zinc-600 dark:text-zinc-400">KV Cache</span>
+              <svg class="w-6 h-6 text-lime-500" 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>
+            </div>
+            <p class="text-xs text-zinc-500 dark:text-zinc-400">Ready</p>
+          </div>
+        </div>
+      </div>
+    `;
+    return c.html(html9);
+  } catch (error) {
+    console.error("Error fetching system status:", error);
+    return c.html('<div class="text-red-500">Failed to load system status</div>');
+  }
+});
+
+// src/templates/pages/admin-collections-list.template.ts
+init_admin_layout_catalyst_template();
+
+// src/templates/components/table.template.ts
+function renderTable2(data) {
+  const tableId = data.tableId || `table-${Math.random().toString(36).substr(2, 9)}`;
+  if (data.rows.length === 0) {
+    return `
+      <div class="rounded-xl bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 p-8 text-center">
+        <div class="text-zinc-500 dark:text-zinc-400">
+          <svg class="mx-auto h-12 w-12 text-zinc-400 dark:text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <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" />
+          </svg>
+          <p class="mt-2 text-sm text-zinc-500 dark:text-zinc-400">${data.emptyMessage || "No data available"}</p>
+        </div>
+      </div>
+    `;
+  }
+  return `
+    <div class="${data.className || ""}" id="${tableId}">
+      ${data.title ? `
+        <div class="px-4 sm:px-0 mb-4">
+          <h3 class="text-base font-semibold text-zinc-950 dark:text-white">${data.title}</h3>
+        </div>
+      ` : ""}
+      <div class="overflow-x-auto">
+        <table class="min-w-full sortable-table">
+          <thead>
+            <tr>
+              ${data.selectable ? `
+                <th class="px-4 py-3.5 text-center sm:pl-0">
+                  <div class="flex items-center justify-center">
+                    <div class="group grid size-4 grid-cols-1">
+                      <input type="checkbox" id="select-all-${tableId}" class="col-start-1 row-start-1 appearance-none rounded border border-white/10 bg-white/5 checked:border-cyan-500 checked:bg-cyan-500 indeterminate:border-cyan-500 indeterminate:bg-cyan-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-500 disabled:border-white/5 disabled:bg-white/10 disabled:checked:bg-white/10 forced-colors:appearance-auto row-checkbox" />
+                      <svg viewBox="0 0 14 14" fill="none" class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-white/25">
+                        <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:checked]:opacity-100" />
+                        <path d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:indeterminate]:opacity-100" />
+                      </svg>
+                    </div>
+                  </div>
+                </th>
+              ` : ""}
+              ${data.columns.map((column, index) => {
+    const isFirst = index === 0 && !data.selectable;
+    const isLast = index === data.columns.length - 1;
+    return `
+                <th class="px-4 py-3.5 text-left text-sm font-semibold text-zinc-950 dark:text-white ${isFirst ? "sm:pl-0" : ""} ${isLast ? "sm:pr-0" : ""} ${column.className || ""}">
+                  ${column.sortable ? `
+                    <button
+                      class="flex items-center gap-x-2 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors sort-btn text-left"
+                      data-column="${column.key}"
+                      data-sort-type="${column.sortType || "string"}"
+                      data-sort-direction="none"
+                      onclick="sortTable('${tableId}', '${column.key}', '${column.sortType || "string"}')"
+                    >
+                      <span>${column.label}</span>
+                      <div class="sort-icons flex flex-col">
+                        <svg class="w-3 h-3 sort-up opacity-30" fill="currentColor" viewBox="0 0 20 20">
+                          <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd" />
+                        </svg>
+                        <svg class="w-3 h-3 sort-down opacity-30 -mt-1" fill="currentColor" viewBox="0 0 20 20">
+                          <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+                        </svg>
+                      </div>
+                    </button>
+                  ` : column.label}
+                </th>
+              `;
+  }).join("")}
+            </tr>
+          </thead>
+          <tbody>
+            ${data.rows.map((row, rowIndex) => {
+    if (!row) return "";
+    const clickableClass = data.rowClickable ? "cursor-pointer" : "";
+    const clickHandler = data.rowClickable && data.rowClickUrl ? `onclick="window.location.href='${data.rowClickUrl(row)}'"` : "";
+    return `
+                <tr class="group border-t border-zinc-950/5 dark:border-white/5 hover:bg-gradient-to-r hover:from-cyan-50/50 hover:via-blue-50/30 hover:to-purple-50/50 dark:hover:from-cyan-900/20 dark:hover:via-blue-900/10 dark:hover:to-purple-900/20 hover:shadow-sm hover:shadow-cyan-500/5 dark:hover:shadow-cyan-400/5 transition-all duration-300 ${clickableClass}" ${clickHandler}>
+                  ${data.selectable ? `
+                    <td class="px-4 py-4 sm:pl-0" onclick="event.stopPropagation()">
+                      <div class="flex items-center justify-center">
+                        <div class="group grid size-4 grid-cols-1">
+                          <input type="checkbox" value="${row.id || ""}" class="col-start-1 row-start-1 appearance-none rounded border border-white/10 bg-white/5 checked:border-cyan-500 checked:bg-cyan-500 indeterminate:border-cyan-500 indeterminate:bg-cyan-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-500 disabled:border-white/5 disabled:bg-white/10 disabled:checked:bg-white/10 forced-colors:appearance-auto row-checkbox" />
+                          <svg viewBox="0 0 14 14" fill="none" class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-white/25">
+                            <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:checked]:opacity-100" />
+                            <path d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:indeterminate]:opacity-100" />
+                          </svg>
+                        </div>
+                      </div>
+                    </td>
+                  ` : ""}
+                  ${data.columns.map((column, colIndex) => {
+      const value = row[column.key];
+      const displayValue = column.render ? column.render(value, row) : value;
+      const stopPropagation = column.key === "actions" ? 'onclick="event.stopPropagation()"' : "";
+      const isFirst = colIndex === 0 && !data.selectable;
+      const isLast = colIndex === data.columns.length - 1;
+      return `
+                      <td class="px-4 py-4 text-sm text-zinc-500 dark:text-zinc-400 ${isFirst ? "sm:pl-0 font-medium text-zinc-950 dark:text-white" : ""} ${isLast ? "sm:pr-0" : ""} ${column.className || ""}" ${stopPropagation}>
+                        ${displayValue || ""}
+                      </td>
+                    `;
+    }).join("")}
+                </tr>
+              `;
+  }).join("")}
+          </tbody>
+        </table>
+      </div>
+
+      <script>
+        // Table sorting functionality
+        window.sortTable = function(tableId, column, sortType) {
+          const tableContainer = document.getElementById(tableId);
+          const table = tableContainer.querySelector('.sortable-table');
+          const tbody = table.querySelector('tbody');
+          const rows = Array.from(tbody.querySelectorAll('tr'));
+          const headerBtn = table.querySelector(\`[data-column="\${column}"]\`);
+
+          // Get current sort direction
+          let direction = headerBtn.getAttribute('data-sort-direction');
+
+          // Reset all sort indicators
+          table.querySelectorAll('.sort-btn').forEach(btn => {
+            btn.setAttribute('data-sort-direction', 'none');
+            btn.querySelectorAll('.sort-up, .sort-down').forEach(icon => {
+              icon.classList.add('opacity-30');
+              icon.classList.remove('opacity-100', 'text-zinc-950', 'dark:text-white');
+            });
+          });
+
+          // Determine new direction
+          if (direction === 'none' || direction === 'desc') {
+            direction = 'asc';
+          } else {
+            direction = 'desc';
+          }
+
+          // Update current header
+          headerBtn.setAttribute('data-sort-direction', direction);
+          const upIcon = headerBtn.querySelector('.sort-up');
+          const downIcon = headerBtn.querySelector('.sort-down');
+
+          if (direction === 'asc') {
+            upIcon.classList.remove('opacity-30');
+            upIcon.classList.add('opacity-100', 'text-zinc-950', 'dark:text-white');
+            downIcon.classList.add('opacity-30');
+            downIcon.classList.remove('opacity-100', 'text-zinc-950', 'dark:text-white');
+          } else {
+            downIcon.classList.remove('opacity-30');
+            downIcon.classList.add('opacity-100', 'text-zinc-950', 'dark:text-white');
+            upIcon.classList.add('opacity-30');
+            upIcon.classList.remove('opacity-100', 'text-zinc-950', 'dark:text-white');
+          }
+
+          // Find column index (accounting for potential select column)
+          const headers = Array.from(table.querySelectorAll('th'));
+          const selectableOffset = table.querySelector('input[id^="select-all"]') ? 1 : 0;
+          const columnIndex = headers.findIndex(th => th.querySelector(\`[data-column="\${column}"]\`)) - selectableOffset;
+
+          // Sort rows
+          rows.sort((a, b) => {
+            const aCell = a.children[columnIndex + selectableOffset];
+            const bCell = b.children[columnIndex + selectableOffset];
+
+            if (!aCell || !bCell) return 0;
+
+            let aValue = aCell.textContent.trim();
+            let bValue = bCell.textContent.trim();
+
+            // Handle different sort types
+            switch (sortType) {
+              case 'number':
+                aValue = parseFloat(aValue.replace(/[^0-9.-]/g, '')) || 0;
+                bValue = parseFloat(bValue.replace(/[^0-9.-]/g, '')) || 0;
+                break;
+              case 'date':
+                aValue = new Date(aValue).getTime() || 0;
+                bValue = new Date(bValue).getTime() || 0;
+                break;
+              case 'boolean':
+                aValue = aValue.toLowerCase() === 'true' || aValue.toLowerCase() === 'published' || aValue.toLowerCase() === 'active';
+                bValue = bValue.toLowerCase() === 'true' || bValue.toLowerCase() === 'published' || bValue.toLowerCase() === 'active';
+                break;
+              default: // string
+                aValue = aValue.toLowerCase();
+                bValue = bValue.toLowerCase();
+            }
+
+            if (aValue < bValue) return direction === 'asc' ? -1 : 1;
+            if (aValue > bValue) return direction === 'asc' ? 1 : -1;
+            return 0;
+          });
+
+          // Re-append sorted rows
+          rows.forEach(row => tbody.appendChild(row));
+        };
+
+        // Select all functionality
+        document.addEventListener('DOMContentLoaded', function() {
+          document.querySelectorAll('[id^="select-all"]').forEach(selectAll => {
+            selectAll.addEventListener('change', function() {
+              const tableId = this.id.replace('select-all-', '');
+              const table = document.getElementById(tableId);
+              if (table) {
+                const checkboxes = table.querySelectorAll('.row-checkbox');
+                checkboxes.forEach(checkbox => {
+                  checkbox.checked = this.checked;
+                });
+              }
+            });
+          });
+        });
+      </script>
+    </div>
+  `;
+}
+
+// src/templates/pages/admin-collections-list.template.ts
+function renderCollectionsListPage(data) {
+  const tableData = {
+    tableId: "collections-table",
+    rowClickable: true,
+    rowClickUrl: (collection) => `/admin/collections/${collection.id}`,
+    columns: [
+      {
+        key: "name",
+        label: "Name",
+        sortable: true,
+        sortType: "string",
+        render: (value, collection) => `
+            <div class="flex items-center gap-2 ml-2">
+                <span class="inline-flex items-center rounded-md bg-cyan-50 dark:bg-cyan-500/10 px-2.5 py-1 text-sm font-medium text-cyan-700 dark:text-cyan-300 ring-1 ring-inset ring-cyan-700/10 dark:ring-cyan-400/20">
+                  ${collection.name}
+                </span>
+                ${collection.managed ? `
+                  <span class="inline-flex items-center rounded-md bg-purple-50 dark:bg-purple-500/10 px-2 py-0.5 text-xs font-medium text-purple-700 dark:text-purple-300 ring-1 ring-inset ring-purple-700/10 dark:ring-purple-400/20" title="Config-managed collection (read-only in UI)">
+                    <svg class="w-3 h-3 mr-1" 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>
+                    Config
+                  </span>
+                ` : ""}
+            </div>
+          `
+      },
+      {
+        key: "display_name",
+        label: "Display Name",
+        sortable: true,
+        sortType: "string"
+      },
+      {
+        key: "description",
+        label: "Description",
+        sortable: true,
+        sortType: "string",
+        render: (value, collection) => collection.description || '<span class="text-zinc-500 dark:text-zinc-400">-</span>'
+      },
+      {
+        key: "field_count",
+        label: "Fields",
+        sortable: true,
+        sortType: "number",
+        render: (value, collection) => {
+          const count = collection.field_count || 0;
+          return `
+            <div class="flex items-center">
+              <span class="inline-flex items-center rounded-md bg-pink-50 dark:bg-pink-500/10 px-2.5 py-1 text-sm font-medium text-pink-700 dark:text-pink-300 ring-1 ring-inset ring-pink-700/10 dark:ring-pink-400/20">
+                ${count} ${count === 1 ? "field" : "fields"}
+              </span>
+            </div>
+          `;
+        }
+      },
+      {
+        key: "managed",
+        label: "Source",
+        sortable: true,
+        sortType: "string",
+        render: (value, collection) => {
+          if (collection.managed) {
+            return `
+              <div class="flex items-center gap-1.5">
+                <svg class="w-4 h-4 text-purple-600 dark:text-purple-400" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"/>
+                </svg>
+                <span class="text-sm text-zinc-700 dark:text-zinc-300">Code</span>
+              </div>
+            `;
+          } else {
+            return `
+              <div class="flex items-center gap-1.5">
+                <svg class="w-4 h-4 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
+                  <path d="M3 12v3c0 1.657 3.134 3 7 3s7-1.343 7-3v-3c0 1.657-3.134 3-7 3s-7-1.343-7-3z"/>
+                  <path d="M3 7v3c0 1.657 3.134 3 7 3s7-1.343 7-3V7c0 1.657-3.134 3-7 3S3 8.657 3 7z"/>
+                  <path d="M17 5c0 1.657-3.134 3-7 3S3 6.657 3 5s3.134-3 7-3 7 1.343 7 3z"/>
+                </svg>
+                <span class="text-sm text-zinc-700 dark:text-zinc-300">Database</span>
+              </div>
+            `;
+          }
+        }
+      },
+      {
+        key: "formattedDate",
+        label: "Created",
+        sortable: true,
+        sortType: "date"
+      },
+      {
+        key: "actions",
+        label: "Content",
+        sortable: false,
+        render: (value, collection) => {
+          if (!collection || !collection.id) return '<span class="text-zinc-500 dark:text-zinc-400">-</span>';
+          return `
+            <div class="flex items-center space-x-2">
+              <a href="/admin/content?model=${collection.name}" class="inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-lg bg-zinc-950 dark:bg-white text-white dark:text-zinc-950 hover:bg-zinc-800 dark:hover:bg-zinc-100 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="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>
+              </a>
+            </div>
+          `;
+        }
+      }
+    ],
+    rows: data.collections,
+    emptyMessage: "No collections found."
+  };
+  const pageContent = `
+    <div>
+      <!-- Header -->
+      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
+        <div>
+          <h1 class="text-2xl/8 font-semibold text-zinc-950 dark:text-white sm:text-xl/8">Collections</h1>
+          <p class="mt-2 text-sm/6 text-zinc-500 dark:text-zinc-400">Manage your content collections and their schemas</p>
+        </div>
+        <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
+          <a href="/admin/collections/new" class="inline-flex items-center justify-center rounded-lg bg-zinc-950 dark:bg-white px-3.5 py-2.5 text-sm font-semibold text-white dark:text-zinc-950 hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors shadow-sm">
+            <svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+              <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
+            </svg>
+            New Collection
+          </a>
+        </div>
+      </div>
+
+      <!-- Filters -->
+      <div class="relative rounded-xl overflow-hidden mb-6">
+        <!-- Gradient Background -->
+        <div class="absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10 dark:from-cyan-400/20 dark:via-blue-400/20 dark:to-purple-400/20"></div>
+
+        <div class="relative bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10">
+          <div class="px-6 py-5">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center space-x-4">
+                <form onsubmit="performSearch(event)" class="flex items-center space-x-2">
+                  <div class="relative group">
+                    <input
+                      id="collections-search"
+                      type="text"
+                      placeholder="Search collections..."
+                      value="${data.search || ""}"
+                      oninput="toggleClearButton()"
+                      class="rounded-full bg-white/90 dark:bg-zinc-800/90 backdrop-blur-sm px-4 py-2.5 pl-11 pr-10 text-sm w-72 text-zinc-950 dark:text-white border-2 border-cyan-200/50 dark:border-cyan-700/50 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 focus:outline-none focus:border-cyan-500 dark:focus:border-cyan-400 focus:bg-white dark:focus:bg-zinc-800 focus:shadow-lg focus:shadow-cyan-500/20 dark:focus:shadow-cyan-400/20 transition-all duration-300"
+                    >
+                    <div class="absolute left-3.5 top-2.5 flex items-center justify-center w-5 h-5 rounded-full bg-gradient-to-br from-cyan-400 to-blue-500 dark:from-cyan-300 dark:to-blue-400 opacity-90 group-focus-within:opacity-100 transition-opacity">
+                      <svg class="h-3 w-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+                      </svg>
+                    </div>
+                    <button
+                      type="button"
+                      id="clear-search"
+                      onclick="clearSearch()"
+                      class="${data.search ? "" : "hidden"} absolute right-3 top-3 flex items-center justify-center w-5 h-5 rounded-full bg-zinc-400/20 dark:bg-zinc-500/20 hover:bg-zinc-400/30 dark:hover:bg-zinc-500/30 transition-colors"
+                    >
+                      <svg class="h-3 w-3 text-zinc-600 dark:text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+                      </svg>
+                    </button>
+                  </div>
+                  <button
+                    type="submit"
+                    class="inline-flex items-center gap-x-1.5 px-4 py-2.5 bg-gradient-to-r from-cyan-500 to-blue-500 dark:from-cyan-400 dark:to-blue-400 text-white text-sm font-medium rounded-full hover:from-cyan-600 hover:to-blue-600 dark:hover:from-cyan-500 dark:hover:to-blue-500 shadow-md hover:shadow-lg transition-all duration-200"
+                  >
+                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+                    </svg>
+                    Search
+                  </button>
+                </form>
+                <script>
+                  function performSearch(event) {
+                    event.preventDefault();
+                    const searchInput = document.getElementById('collections-search');
+                    const value = searchInput.value.trim();
+                    const params = new URLSearchParams(window.location.search);
+                    if (value) {
+                      params.set('search', value);
+                    } else {
+                      params.delete('search');
+                    }
+                    window.location.href = window.location.pathname + '?' + params.toString();
+                  }
+
+                  function clearSearch() {
+                    const params = new URLSearchParams(window.location.search);
+                    params.delete('search');
+                    window.location.href = window.location.pathname + (params.toString() ? '?' + params.toString() : '');
+                  }
+
+                  function toggleClearButton() {
+                    const searchInput = document.getElementById('collections-search');
+                    const clearButton = document.getElementById('clear-search');
+                    if (searchInput.value.trim()) {
+                      clearButton.classList.remove('hidden');
+                    } else {
+                      clearButton.classList.add('hidden');
+                    }
+                  }
+                </script>
+              </div>
+              <div class="flex items-center gap-x-3">
+                <span class="text-sm/6 font-medium text-zinc-700 dark:text-zinc-300 px-3 py-1.5 rounded-full bg-white/60 dark:bg-zinc-800/60 backdrop-blur-sm">${data.collections.length} ${data.collections.length === 1 ? "collection" : "collections"}</span>
+                <button
+                  class="inline-flex items-center gap-x-1.5 px-3 py-1.5 bg-white/90 dark:bg-zinc-800/90 backdrop-blur-sm text-zinc-950 dark:text-white text-sm font-medium rounded-full ring-1 ring-inset ring-cyan-200/50 dark:ring-cyan-700/50 hover:bg-gradient-to-r hover:from-cyan-50 hover:to-blue-50 dark:hover:from-cyan-900/30 dark:hover:to-blue-900/30 hover:ring-cyan-300 dark:hover:ring-cyan-600 transition-all duration-200"
+                  onclick="location.reload()"
+                >
+                  <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+                  </svg>
+                  Refresh
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Collections List -->
+      <div id="collections-list">
+        ${renderTable2(tableData)}
+      </div>
+
+      <!-- Empty State -->
+      ${data.collections.length === 0 ? `
+        <div class="rounded-lg bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 p-12 text-center">
+          <svg class="mx-auto h-12 w-12 text-zinc-400 dark:text-zinc-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
+          </svg>
+          <h3 class="mt-4 text-base/7 font-semibold text-zinc-950 dark:text-white">No collections found</h3>
+          <p class="mt-2 text-sm/6 text-zinc-500 dark:text-zinc-400">Get started by creating your first collection</p>
+          <div class="mt-6">
+            <a href="/admin/collections/new" class="inline-flex items-center justify-center rounded-lg bg-zinc-950 dark:bg-white px-3.5 py-2.5 text-sm font-semibold text-white dark:text-zinc-950 hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors shadow-sm">
+              <svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
+              </svg>
+              New Collection
+            </a>
+          </div>
+        </div>
+      ` : ""}
+    </div>
+  `;
+  const layoutData = {
+    title: "Collections",
+    pageTitle: "Collections",
+    currentPath: "/admin/collections",
+    user: data.user,
+    version: data.version,
+    content: pageContent
+  };
+  return renderAdminLayoutCatalyst(layoutData);
+}
+
+// src/templates/pages/admin-collections-form.template.ts
+init_admin_layout_catalyst_template();
+function renderCollectionFormPage(data) {
+  const isEdit = data.isEdit || !!data.id;
+  const title = isEdit ? "Edit Collection" : "Create New Collection";
+  const subtitle = isEdit ? `Update collection: ${data.display_name}` : "Define a new content collection with custom fields and settings.";
+  const fields = [
+    {
+      name: "displayName",
+      label: "Display Name",
+      type: "text",
+      value: data.display_name || "",
+      placeholder: "Blog Posts",
+      required: true,
+      readonly: data.managed,
+      className: data.managed ? "bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 cursor-not-allowed" : ""
+    },
+    {
+      name: "name",
+      label: "Collection Name",
+      type: "text",
+      value: data.name || "",
+      placeholder: "blog_posts",
+      required: true,
+      readonly: isEdit,
+      helpText: isEdit ? "Collection name cannot be changed" : "Lowercase letters, numbers, and underscores only",
+      className: isEdit ? "bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 cursor-not-allowed" : ""
+    },
+    {
+      name: "description",
+      label: "Description",
+      type: "textarea",
+      value: data.description || "",
+      placeholder: "Description of this collection...",
+      rows: 3,
+      readonly: data.managed,
+      className: data.managed ? "bg-zinc-100 dark:bg-zinc-800 text-zinc-500 dark:text-zinc-400 cursor-not-allowed" : ""
+    }
+  ];
+  const formData = {
+    id: "collection-form",
+    ...isEdit ? { hxPut: `/admin/collections/${data.id}`, action: `/admin/collections/${data.id}`, method: "PUT" } : { hxPost: "/admin/collections", action: "/admin/collections" },
+    hxTarget: "#form-messages",
+    fields,
+    submitButtons: data.managed ? [] : [
+      {
+        label: isEdit ? "Update Collection" : "Create Collection",
+        type: "submit",
+        className: "btn-primary"
+      }
+    ]
+  };
+  const pageContent = `
+    <div class="space-y-6">
+      <!-- Config-Managed Collection Banner -->
+      ${data.managed ? `
+        <div class="rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-900/30 p-4">
+          <div class="flex items-start gap-x-3">
+            <svg class="h-5 w-5 text-amber-600 dark:text-amber-400 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
+            </svg>
+            <div class="flex-1">
+              <h3 class="text-sm/6 font-semibold text-amber-900 dark:text-amber-300">
+                Config-Managed Collection
+              </h3>
+              <div class="text-sm/6 text-amber-800 dark:text-amber-400 mt-1 space-y-1">
+                <p>This collection is managed by a configuration file and cannot be edited through the admin interface.</p>
+                <p class="mt-2">
+                  <span class="font-medium">Config file:</span>
+                  <code class="ml-2 px-2 py-0.5 rounded bg-amber-100 dark:bg-amber-900/40 text-amber-900 dark:text-amber-300 font-mono text-xs">
+                    src/collections/${data.name}.collection.ts
+                  </code>
+                </p>
+                <p class="mt-2 text-xs">
+                  To modify this collection's schema, edit the configuration file directly in your code editor.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      ` : ""}
+
+      <!-- Header -->
+      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h1 class="text-2xl/8 font-semibold text-zinc-950 dark:text-white sm:text-xl/8">${title}</h1>
+          <p class="mt-2 text-sm/6 text-zinc-500 dark:text-zinc-400">${subtitle}</p>
+        </div>
+        <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
+          <a href="/admin/collections" class="inline-flex items-center justify-center rounded-lg bg-white dark:bg-zinc-800 px-3.5 py-2.5 text-sm font-semibold text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors shadow-sm">
+            <svg class="-ml-0.5 mr-1.5 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
+            </svg>
+            Back to Collections
+          </a>
+        </div>
+      </div>
+
+      <!-- Form Container -->
+      <div class="rounded-lg bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 overflow-hidden">
+        <!-- Form Header -->
+        <div class="border-b border-zinc-950/5 dark:border-white/10 px-6 py-6">
+          <div class="flex items-center gap-x-3">
+            <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-zinc-50 dark:bg-zinc-800 ring-1 ring-zinc-950/10 dark:ring-white/10">
+              <svg class="h-6 w-6 text-zinc-950 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
+              </svg>
+            </div>
+            <div>
+              <h2 class="text-base/7 font-semibold text-zinc-950 dark:text-white">Collection Details</h2>
+              <p class="text-sm/6 text-zinc-500 dark:text-zinc-400">Configure your collection settings below</p>
+            </div>
+          </div>
+        </div>
+
+        <!-- Form Content -->
+        <div class="px-6 py-6">
+          <div id="form-messages"></div>
+          ${data.error ? renderAlert2({ type: "error", message: data.error, dismissible: true }) : ""}
+          ${data.success ? renderAlert2({ type: "success", message: data.success, dismissible: true }) : ""}
+
+          <!-- Form Styling -->
+          <style>
+            #collection-form .form-group {
+              margin-bottom: 1.5rem;
+            }
+
+            #collection-form .form-label {
+              display: block;
+              font-size: 0.875rem;
+              font-weight: 500;
+              margin-bottom: 0.5rem;
+              line-height: 1.5rem;
+            }
+
+            .dark #collection-form .form-label {
+              color: white;
+            }
+
+            html:not(.dark) #collection-form .form-label {
+              color: #09090b; /* zinc-950 */
+            }
+
+            #collection-form .form-input,
+            #collection-form .form-textarea {
+              width: 100%;
+              padding: 0.625rem 0.75rem;
+              border-radius: 0.5rem;
+              font-size: 0.875rem;
+              line-height: 1.5rem;
+              transition: all 0.15s;
+            }
+
+            html:not(.dark) #collection-form .form-input,
+            html:not(.dark) #collection-form .form-textarea {
+              background: white;
+              border: 1px solid rgba(9, 9, 11, 0.1); /* zinc-950/10 */
+              color: #09090b; /* zinc-950 */
+            }
+
+            .dark #collection-form .form-input,
+            .dark #collection-form .form-textarea {
+              background: #18181b; /* zinc-900 */
+              border: 1px solid rgba(255, 255, 255, 0.1);
+              color: white;
+            }
+
+            #collection-form .form-input:focus,
+            #collection-form .form-textarea:focus {
+              outline: none;
+              box-shadow: 0 0 0 2px #2563eb; /* blue-600 */
+            }
+
+            .dark #collection-form .form-input:focus,
+            .dark #collection-form .form-textarea:focus {
+              box-shadow: 0 0 0 2px #3b82f6; /* blue-500 */
+            }
+
+            html:not(.dark) #collection-form .form-input::placeholder,
+            html:not(.dark) #collection-form .form-textarea::placeholder {
+              color: #71717a; /* zinc-500 */
+            }
+
+            .dark #collection-form .form-input::placeholder,
+            .dark #collection-form .form-textarea::placeholder {
+              color: #71717a; /* zinc-500 */
+            }
+
+            #collection-form .btn {
+              padding: 0.625rem 1rem;
+              font-weight: 600;
+              font-size: 0.875rem;
+              border-radius: 0.5rem;
+              transition: all 0.15s;
+              border: none;
+              cursor: pointer;
+            }
+
+            html:not(.dark) #collection-form .btn-primary {
+              background: #09090b; /* zinc-950 */
+              color: white;
+            }
+
+            html:not(.dark) #collection-form .btn-primary:hover {
+              background: #27272a; /* zinc-800 */
+            }
+
+            .dark #collection-form .btn-primary {
+              background: white;
+              color: #09090b; /* zinc-950 */
+            }
+
+            .dark #collection-form .btn-primary:hover {
+              background: #f4f4f5; /* zinc-100 */
+            }
+
+            #collection-form .form-help-text {
+              font-size: 0.75rem;
+              margin-top: 0.25rem;
+            }
+
+            html:not(.dark) #collection-form .form-help-text {
+              color: #71717a; /* zinc-500 */
+            }
+
+            .dark #collection-form .form-help-text {
+              color: #a1a1aa; /* zinc-400 */
+            }
+          </style>
+          
+          ${renderForm(formData)}
+          
+          ${isEdit && !data.managed ? `
+            <!-- Fields Management Section -->
+            <div class="mt-8 pt-8 border-t border-zinc-950/5 dark:border-white/10">
+              <div class="flex items-center justify-between mb-6">
+                <div>
+                  <h3 class="text-base/7 font-semibold text-zinc-950 dark:text-white">Collection Fields</h3>
+                  <p class="text-sm/6 text-zinc-500 dark:text-zinc-400 mt-1">Define the fields that content in this collection will have</p>
+                </div>
+                <button
+                  type="button"
+                  onclick="showAddFieldModal()"
+                  class="inline-flex items-center gap-x-1.5 px-3.5 py-2.5 bg-zinc-950 dark:bg-white text-white dark:text-zinc-950 font-semibold text-sm rounded-lg hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors shadow-sm"
+                >
+                  <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"/>
+                  </svg>
+                  Add Field
+                </button>
+              </div>
+              
+              <!-- Fields List -->
+              <div id="fields-list" class="space-y-3">
+                ${(data.fields || []).map((field) => `
+                  <div class="field-item bg-zinc-50 dark:bg-zinc-800/50 rounded-lg border border-zinc-950/5 dark:border-white/10 p-4" data-field-id="${field.id}">
+                    <div class="flex items-center justify-between">
+                      <div class="flex items-center gap-x-4">
+                        <div class="drag-handle cursor-move text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-400">
+                          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M4 8h16M4 16h16"/>
+                          </svg>
+                        </div>
+                        <div>
+                          <div class="flex items-center gap-x-2">
+                            <span class="text-sm/6 font-medium text-zinc-950 dark:text-white">${field.field_label}</span>
+                            <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium bg-cyan-500/10 dark:bg-cyan-400/10 text-cyan-700 dark:text-cyan-300 ring-1 ring-inset ring-cyan-500/20 dark:ring-cyan-400/20">
+                              ${field.field_type}
+                            </span>
+                            ${field.is_required ? `
+                              <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium bg-pink-500/10 dark:bg-pink-400/10 text-pink-700 dark:text-pink-300 ring-1 ring-inset ring-pink-500/20 dark:ring-pink-400/20">
+                                Required
+                              </span>
+                            ` : ""}
+                          </div>
+                          <div class="text-sm/6 text-zinc-500 dark:text-zinc-400 mt-1">
+                            Field name: <code class="text-zinc-950 dark:text-white font-mono text-xs">${field.field_name}</code>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="flex items-center gap-x-2">
+                        <button
+                          type="button"
+                          onclick="editField('${field.id}')"
+                          class="inline-flex items-center gap-x-1 px-2.5 py-1.5 text-sm font-medium text-zinc-950 dark:text-white hover:bg-zinc-100 dark:hover:bg-zinc-700 rounded-lg transition-colors"
+                        >
+                          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"/>
+                          </svg>
+                          Edit
+                        </button>
+                        <button
+                          type="button"
+                          onclick="deleteField('${field.id}')"
+                          class="inline-flex items-center gap-x-1 px-2.5 py-1.5 text-sm font-medium text-pink-700 dark:text-pink-300 hover:bg-pink-50 dark:hover:bg-pink-900/20 rounded-lg transition-colors"
+                        >
+                          <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
+                          </svg>
+                          Delete
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                `).join("")}
+
+                ${(data.fields || []).length === 0 ? `
+                  <div class="text-center py-12 text-zinc-500 dark:text-zinc-400">
+                    <svg class="mx-auto h-12 w-12 text-zinc-400 dark:text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z"/>
+                    </svg>
+                    <p class="mt-4 text-base/7 font-semibold text-zinc-950 dark:text-white">No fields defined</p>
+                    <p class="mt-2 text-sm/6">Add your first field to get started</p>
+                  </div>
+                ` : ""}
+              </div>
+            </div>
+          ` : `
+            <div class="mt-6 rounded-lg bg-cyan-50 dark:bg-cyan-900/20 border border-cyan-100 dark:border-cyan-900/30 p-4">
+              <div class="flex items-start gap-x-3">
+                <svg class="h-5 w-5 text-cyan-600 dark:text-cyan-400 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
+                  <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
+                </svg>
+                <div>
+                  <h3 class="text-sm/6 font-medium text-cyan-900 dark:text-cyan-300">
+                    Create Collection First
+                  </h3>
+                  <p class="text-sm/6 text-cyan-800 dark:text-cyan-400 mt-1">
+                    After creating the collection, you'll be able to add and configure custom fields.
+                  </p>
+                </div>
+              </div>
+            </div>
+          `}
+          
+          <!-- Action Buttons -->
+          <div class="mt-6 pt-6 border-t border-zinc-950/5 dark:border-white/10 flex items-center justify-between">
+            <a href="/admin/collections" class="inline-flex items-center justify-center gap-x-1.5 rounded-lg bg-white dark:bg-zinc-800 px-3.5 py-2.5 text-sm font-semibold text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors shadow-sm">
+              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
+              </svg>
+              ${data.managed ? "Back to Collections" : "Cancel"}
+            </a>
+
+            ${isEdit && !data.managed ? `
+              <button
+                type="button"
+                hx-delete="/admin/collections/${data.id}"
+                hx-confirm="Are you sure you want to delete this collection? This action cannot be undone."
+                hx-target="body"
+                class="inline-flex items-center justify-center gap-x-1.5 rounded-lg bg-pink-600 dark:bg-pink-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-pink-700 dark:hover:bg-pink-600 transition-colors shadow-sm"
+              >
+                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
+                </svg>
+                Delete Collection
+              </button>
+            ` : ""}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Add/Edit Field Modal -->
+    <div id="field-modal" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 hidden">
+      <div class="rounded-xl bg-white dark:bg-zinc-900 shadow-xl ring-1 ring-zinc-950/5 dark:ring-white/10 w-full max-w-lg mx-4">
+        <div class="px-6 py-4 border-b border-zinc-950/5 dark:border-white/10">
+          <div class="flex items-center justify-between">
+            <h3 id="modal-title" class="text-lg font-semibold text-zinc-950 dark:text-white">Add Field</h3>
+            <button onclick="closeFieldModal()" class="text-zinc-500 dark:text-zinc-400 hover:text-zinc-950 dark:hover:text-white transition-colors">
+              <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="M6 18L18 6M6 6l12 12"></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+
+        <form id="field-form" class="p-6 space-y-4">
+          <input type="hidden" id="field-id" name="field_id">
+
+          <div>
+            <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-2">Field Name</label>
+            <input
+              type="text"
+              id="field-name"
+              name="field_name"
+              required
+              pattern="[a-z0-9_]+"
+              class="w-full rounded-lg bg-white dark:bg-zinc-800 px-4 py-3 text-sm text-zinc-950 dark:text-white placeholder-zinc-500 dark:placeholder-zinc-400 ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500 focus:outline-none transition-colors"
+              placeholder="field_name"
+            >
+            <p class="text-xs text-zinc-500 dark:text-zinc-400 mt-1">Lowercase letters, numbers, and underscores only</p>
+          </div>
+
+          <div>
+            <label for="field-type" class="block text-sm/6 font-medium text-zinc-950 dark:text-white">Field Type</label>
+            <div class="mt-2 grid grid-cols-1">
+              <select
+                id="field-type"
+                name="field_type"
+                required
+                class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white/5 dark:bg-white/5 py-1.5 pl-3 pr-8 text-base text-zinc-950 dark:text-white outline outline-1 -outline-offset-1 outline-blue-500/30 dark:outline-blue-400/30 *:bg-white dark:*:bg-zinc-800 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-blue-500 dark:focus-visible:outline-blue-400 sm:text-sm/6"
+              >
+                <option value="">Select field type...</option>
+                <option value="text">Text</option>
+                <option value="richtext">Rich Text</option>
+                <option value="number">Number</option>
+                <option value="boolean">Boolean</option>
+                <option value="date">Date</option>
+                <option value="select">Select</option>
+                <option value="media">Media</option>
+                <option value="guid">GUID (Auto-generated)</option>
+              </select>
+              <svg viewBox="0 0 16 16" fill="currentColor" data-slot="icon" aria-hidden="true" class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-blue-600 dark:text-blue-400 sm:size-4">
+                <path d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
+              </svg>
+            </div>
+            <p id="field-type-help" class="text-xs text-zinc-500 dark:text-zinc-400 mt-1"></p>
+          </div>
+
+          <div>
+            <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-2">Field Label</label>
+            <input
+              type="text"
+              id="field-label"
+              name="field_label"
+              required
+              class="w-full rounded-lg bg-white dark:bg-zinc-800 px-4 py-3 text-sm text-zinc-950 dark:text-white placeholder-zinc-500 dark:placeholder-zinc-400 ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500 focus:outline-none transition-colors"
+              placeholder="Field Label"
+            >
+          </div>
+
+          <div class="flex items-center space-x-6">
+            <div class="flex gap-3">
+              <div class="flex h-6 shrink-0 items-center">
+                <div class="group grid size-4 grid-cols-1">
+                  <input
+                    type="checkbox"
+                    id="field-required"
+                    name="is_required"
+                    value="1"
+                    class="col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 indeterminate:border-indigo-500 indeterminate:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 disabled:checked:bg-zinc-950/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto"
+                  />
+                  <svg viewBox="0 0 14 14" fill="none" class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25">
+                    <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:checked]:opacity-100" />
+                    <path d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:indeterminate]:opacity-100" />
+                  </svg>
+                </div>
+              </div>
+              <div class="text-sm/6">
+                <label for="field-required" class="font-medium text-zinc-950 dark:text-white">Required</label>
+              </div>
+            </div>
+
+            <div class="flex gap-3">
+              <div class="flex h-6 shrink-0 items-center">
+                <div class="group grid size-4 grid-cols-1">
+                  <input
+                    type="checkbox"
+                    id="field-searchable"
+                    name="is_searchable"
+                    value="1"
+                    class="col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 indeterminate:border-indigo-500 indeterminate:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 disabled:checked:bg-zinc-950/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto"
+                  />
+                  <svg viewBox="0 0 14 14" fill="none" class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25">
+                    <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:checked]:opacity-100" />
+                    <path d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:indeterminate]:opacity-100" />
+                  </svg>
+                </div>
+              </div>
+              <div class="text-sm/6">
+                <label for="field-searchable" class="font-medium text-zinc-950 dark:text-white">Searchable</label>
+              </div>
+            </div>
+          </div>
+
+          <div id="field-options-container" class="hidden">
+            <label class="block text-sm font-medium text-zinc-950 dark:text-white mb-2">Field Options (JSON)</label>
+            <textarea
+              id="field-options"
+              name="field_options"
+              rows="3"
+              class="w-full rounded-lg bg-white dark:bg-zinc-800 px-4 py-3 text-sm text-zinc-950 dark:text-white placeholder-zinc-500 dark:placeholder-zinc-400 ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 focus:ring-2 focus:ring-blue-600 dark:focus:ring-blue-500 focus:outline-none transition-colors font-mono"
+              placeholder='{"maxLength": 200, "placeholder": "Enter text..."}'
+            ></textarea>
+            <p class="text-xs text-zinc-500 dark:text-zinc-400 mt-1">JSON configuration for field-specific options</p>
+          </div>
+
+          <div class="flex justify-end space-x-3 pt-4 border-t border-zinc-950/5 dark:border-white/10">
+            <button
+              type="button"
+              onclick="closeFieldModal()"
+              class="rounded-lg bg-white dark:bg-zinc-800 px-4 py-2 text-sm font-semibold text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700 transition-colors"
+            >
+              <span id="submit-text">Add Field</span>
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+
+    <script>
+      const collectionId = '${data.id || ""}';
+      
+      
+      let currentEditingField = null;
+
+      // Field modal functions
+      function showAddFieldModal() {
+        document.getElementById('modal-title').textContent = 'Add Field';
+        document.getElementById('submit-text').textContent = 'Add Field';
+        document.getElementById('field-form').reset();
+        document.getElementById('field-id').value = '';
+        document.getElementById('field-name').disabled = false;
+        currentEditingField = null;
+        document.getElementById('field-modal').classList.remove('hidden');
+      }
+
+      function editField(fieldId) {
+        const fieldItem = document.querySelector(\`[data-field-id="\${fieldId}"]\`);
+        if (!fieldItem) return;
+
+        // Find the field data from the collection's fields array
+        const field = ${JSON.stringify(data.fields || [])}.find(f => f.id === fieldId);
+        if (!field) return;
+
+        // Set up the modal for editing
+        document.getElementById('modal-title').textContent = 'Edit Field';
+        document.getElementById('submit-text').textContent = 'Update Field';
+        document.getElementById('field-id').value = fieldId;
+        currentEditingField = fieldId;
+
+        // Populate form with existing field data
+        document.getElementById('field-name').value = field.field_name || '';
+        document.getElementById('field-name').disabled = true;
+        document.getElementById('field-label').value = field.field_label || '';
+        document.getElementById('field-type').value = field.field_type || '';
+        document.getElementById('field-required').checked = Boolean(field.is_required);
+        document.getElementById('field-searchable').checked = Boolean(field.is_searchable);
+        
+        // Handle field options - serialize object back to JSON string
+        if (field.field_options) {
+          document.getElementById('field-options').value = typeof field.field_options === 'string' 
+            ? field.field_options 
+            : JSON.stringify(field.field_options, null, 2);
+        } else {
+          document.getElementById('field-options').value = '';
+        }
+
+        // Show/hide options container based on field type
+        const fieldType = field.field_type;
+        const optionsContainer = document.getElementById('field-options-container');
+        const helpText = document.getElementById('field-type-help');
+
+        if (['select', 'media', 'richtext', 'guid'].includes(fieldType)) {
+          optionsContainer.classList.remove('hidden');
+
+          // Set help text based on type
+          switch (fieldType) {
+            case 'select':
+              helpText.textContent = 'Create a dropdown select field with custom options';
+              break;
+            case 'media':
+              helpText.textContent = 'Upload and manage media files (images, videos, documents)';
+              break;
+            case 'richtext':
+              helpText.textContent = 'Full-featured WYSIWYG text editor with formatting options';
+              break;
+            case 'guid':
+              helpText.textContent = 'Automatically generates a unique identifier (UUID v4) for each content item';
+              break;
+          }
+        } else {
+          optionsContainer.classList.add('hidden');
+
+          // Set help text for other field types
+          switch (fieldType) {
+            case 'text':
+              helpText.textContent = 'Single-line text input for short content';
+              break;
+            case 'number':
+              helpText.textContent = 'Numeric input field for integers or decimals';
+              break;
+            case 'boolean':
+              helpText.textContent = 'True/false checkbox field';
+              break;
+            case 'date':
+              helpText.textContent = 'Date and time picker field';
+              break;
+            default:
+              helpText.textContent = '';
+          }
+        }
+
+        document.getElementById('field-modal').classList.remove('hidden');
+      }
+
+      function closeFieldModal() {
+        document.getElementById('field-modal').classList.add('hidden');
+        currentEditingField = null;
+      }
+
+      let fieldToDelete = null;
+
+      function deleteField(fieldId) {
+        fieldToDelete = fieldId;
+        showConfirmDialog('delete-field-confirm');
+      }
+
+      function performDeleteField() {
+        if (!fieldToDelete) return;
+
+        fetch(\`/admin/collections/\${collectionId}/fields/\${fieldToDelete}\`, {
+          method: 'DELETE'
+        })
+        .then(response => response.json())
+        .then(data => {
+          if (data.success) {
+            location.reload();
+          } else {
+            alert('Error deleting field: ' + data.error);
+          }
+        })
+        .catch(error => {
+          console.error('Error:', error);
+          alert('Error deleting field');
+        })
+        .finally(() => {
+          fieldToDelete = null;
+        });
+      }
+
+      // Field form submission
+      document.getElementById('field-form').addEventListener('submit', function(e) {
+        e.preventDefault();
+        
+        if (!collectionId) {
+          alert('Error: Collection ID is missing. Cannot save field.');
+          return;
+        }
+        
+        const formData = new FormData(this);
+        const isEditing = currentEditingField !== null;
+        
+        const url = isEditing 
+          ? \`/admin/collections/\${collectionId}/fields/\${currentEditingField}\`
+          : \`/admin/collections/\${collectionId}/fields\`;
+        
+        const method = isEditing ? 'PUT' : 'POST';
+        
+        
+        fetch(url, {
+          method: method,
+          body: formData
+        })
+        .then(response => {
+          if (!response.ok) {
+            throw new Error(\`HTTP \${response.status}: \${response.statusText}\`);
+          }
+          return response.json();
+        })
+        .then(data => {
+          if (data.success) {
+            location.reload();
+          } else {
+            alert('Error saving field: ' + (data.error || 'Unknown error'));
+          }
+        })
+        .catch(error => {
+          alert('Error saving field: ' + error.message);
+        });
+      });
+
+      // Field type change handler
+      document.getElementById('field-type').addEventListener('change', function() {
+        const optionsContainer = document.getElementById('field-options-container');
+        const fieldOptions = document.getElementById('field-options');
+        const helpText = document.getElementById('field-type-help');
+        const fieldNameInput = document.getElementById('field-name');
+
+        // Show/hide options based on field type
+        if (['select', 'media', 'richtext', 'guid'].includes(this.value)) {
+          optionsContainer.classList.remove('hidden');
+
+          // Set default options and help text based on type
+          switch (this.value) {
+            case 'select':
+              fieldOptions.value = '{"options": ["Option 1", "Option 2"], "multiple": false}';
+              helpText.textContent = 'Create a dropdown select field with custom options';
+              break;
+            case 'media':
+              fieldOptions.value = '{"accept": "image/*", "maxSize": "10MB"}';
+              helpText.textContent = 'Upload and manage media files (images, videos, documents)';
+              break;
+            case 'richtext':
+              fieldOptions.value = '{"toolbar": "full", "height": 400}';
+              helpText.textContent = 'Full-featured WYSIWYG text editor with formatting options';
+              break;
+            case 'guid':
+              fieldOptions.value = '{"autoGenerate": true, "format": "uuid-v4"}';
+              helpText.textContent = 'Automatically generates a unique identifier (UUID v4) for each content item';
+              // Suggest 'id' as field name for GUID fields
+              if (!fieldNameInput.value || fieldNameInput.value === '') {
+                fieldNameInput.value = 'id';
+              }
+              break;
+          }
+        } else {
+          optionsContainer.classList.add('hidden');
+          fieldOptions.value = '{}';
+
+          // Set help text for other field types
+          switch (this.value) {
+            case 'text':
+              helpText.textContent = 'Single-line text input for short content';
+              break;
+            case 'number':
+              helpText.textContent = 'Numeric input field for integers or decimals';
+              break;
+            case 'boolean':
+              helpText.textContent = 'True/false checkbox field';
+              break;
+            case 'date':
+              helpText.textContent = 'Date and time picker field';
+              break;
+            default:
+              helpText.textContent = '';
+          }
+        }
+      });
+
+      // Close modal on escape key
+      document.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape' && !document.getElementById('field-modal').classList.contains('hidden')) {
+          closeFieldModal();
+        }
+      });
+
+      // Close modal on backdrop click
+      document.getElementById('field-modal').addEventListener('click', function(e) {
+        if (e.target === this) {
+          closeFieldModal();
+        }
+      });
+    </script>
+
+    <!-- Confirmation Dialogs -->
+    ${renderConfirmationDialog2({
+    id: "delete-field-confirm",
+    title: "Delete Field",
+    message: "Are you sure you want to delete this field? This action cannot be undone.",
+    confirmText: "Delete",
+    cancelText: "Cancel",
+    iconColor: "red",
+    confirmClass: "bg-red-500 hover:bg-red-400",
+    onConfirm: "performDeleteField()"
+  })}
+
+    ${getConfirmationDialogScript2()}
+  `;
+  const layoutData = {
+    title,
+    pageTitle: "Collections",
+    currentPath: "/admin/collections",
+    user: data.user,
+    version: data.version,
+    content: pageContent
+  };
+  return renderAdminLayoutCatalyst(layoutData);
+}
+
+// src/routes/admin-collections.ts
+var adminCollectionsRoutes = new Hono();
+adminCollectionsRoutes.get("/collections", async (c) => {
+  try {
+    const user = c.get("user");
+    const db = c.env.DB;
+    const url = new URL(c.req.url);
+    const search = url.searchParams.get("search") || "";
+    let stmt;
+    let results;
+    if (search) {
+      stmt = db.prepare(`
+        SELECT id, name, display_name, description, created_at, managed
+        FROM collections
+        WHERE is_active = 1
+        AND (name LIKE ? OR display_name LIKE ? OR description LIKE ?)
+        ORDER BY created_at DESC
+      `);
+      const searchParam = `%${search}%`;
+      const queryResults = await stmt.bind(searchParam, searchParam, searchParam).all();
+      results = queryResults.results;
+    } else {
+      stmt = db.prepare("SELECT id, name, display_name, description, created_at, managed FROM collections WHERE is_active = 1 ORDER BY created_at DESC");
+      const queryResults = await stmt.all();
+      results = queryResults.results;
+    }
+    const fieldCountStmt = db.prepare("SELECT collection_id, COUNT(*) as count FROM content_fields GROUP BY collection_id");
+    const { results: fieldCountResults } = await fieldCountStmt.all();
+    const fieldCounts = new Map((fieldCountResults || []).map((row) => [String(row.collection_id), Number(row.count)]));
+    const collections = (results || []).filter((row) => row && row.id).map((row) => {
+      return {
+        id: String(row.id || ""),
+        name: String(row.name || ""),
+        display_name: String(row.display_name || ""),
+        description: row.description ? String(row.description) : void 0,
+        created_at: Number(row.created_at || 0),
+        formattedDate: row.created_at ? new Date(Number(row.created_at)).toLocaleDateString() : "Unknown",
+        field_count: fieldCounts.get(String(row.id)) || 0,
+        managed: row.managed === 1
+      };
+    });
+    const pageData = {
+      collections,
+      search,
+      user: user ? {
+        name: user.email,
+        email: user.email,
+        role: user.role
+      } : void 0,
+      version: c.get("appVersion")
+    };
+    return c.html(renderCollectionsListPage(pageData));
+  } catch (error) {
+    console.error("Error fetching collections:", error);
+    return c.html(html`<p>Error loading collections</p>`);
+  }
+});
+adminCollectionsRoutes.get("/collections/new", (c) => {
+  const user = c.get("user");
+  const formData = {
+    isEdit: false,
+    user: user ? {
+      name: user.email,
+      email: user.email,
+      role: user.role
+    } : void 0,
+    version: c.get("appVersion")
+  };
+  return c.html(renderCollectionFormPage(formData));
+});
+adminCollectionsRoutes.post("/collections", async (c) => {
+  try {
+    const formData = await c.req.formData();
+    const name = formData.get("name");
+    const displayName = formData.get("displayName");
+    const description = formData.get("description");
+    const isHtmx = c.req.header("HX-Request") === "true";
+    if (!name || !displayName) {
+      const errorMsg = "Name and display name are required.";
+      if (isHtmx) {
+        return c.html(html`
+          <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+            ${errorMsg}
+          </div>
+        `);
+      } else {
+        return c.redirect("/admin/collections/new");
+      }
+    }
+    if (!/^[a-z0-9_]+$/.test(name)) {
+      const errorMsg = "Collection name must contain only lowercase letters, numbers, and underscores.";
+      if (isHtmx) {
+        return c.html(html`
+          <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+            ${errorMsg}
+          </div>
+        `);
+      } else {
+        return c.redirect("/admin/collections/new");
+      }
+    }
+    const db = c.env.DB;
+    const existingStmt = db.prepare("SELECT id FROM collections WHERE name = ?");
+    const existing = await existingStmt.bind(name).first();
+    if (existing) {
+      const errorMsg = "A collection with this name already exists.";
+      if (isHtmx) {
+        return c.html(html`
+          <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+            ${errorMsg}
+          </div>
+        `);
+      } else {
+        return c.redirect("/admin/collections/new");
+      }
+    }
+    const basicSchema = {
+      type: "object",
+      properties: {
+        title: {
+          type: "string",
+          title: "Title",
+          required: true
+        },
+        content: {
+          type: "string",
+          title: "Content",
+          format: "richtext"
+        },
+        status: {
+          type: "string",
+          title: "Status",
+          enum: ["draft", "published", "archived"],
+          default: "draft"
+        }
+      },
+      required: ["title"]
+    };
+    const collectionId = globalThis.crypto.randomUUID();
+    const now = Date.now();
+    const insertStmt = db.prepare(`
+      INSERT INTO collections (id, name, display_name, description, schema, is_active, created_at, updated_at)
+      VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+    `);
+    await insertStmt.bind(
+      collectionId,
+      name,
+      displayName,
+      description || null,
+      JSON.stringify(basicSchema),
+      1,
+      // is_active
+      now,
+      now
+    ).run();
+    try {
+      await c.env.CACHE_KV.delete("cache:collections:all");
+      await c.env.CACHE_KV.delete(`cache:collection:${name}`);
+    } catch (e) {
+      console.error("Error clearing cache:", e);
+    }
+    if (isHtmx) {
+      return c.html(html`
+        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
+          Collection created successfully! Redirecting...
+          <script>
+            setTimeout(() => {
+              window.location.href = '/admin/collections';
+            }, 1500);
+          </script>
+        </div>
+      `);
+    } else {
+      return c.redirect("/admin/collections");
+    }
+  } catch (error) {
+    console.error("Error creating collection:", error);
+    const isHtmx = c.req.header("HX-Request") === "true";
+    if (isHtmx) {
+      return c.html(html`
+        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+          Failed to create collection. Please try again.
+        </div>
+      `);
+    } else {
+      return c.redirect("/admin/collections/new");
+    }
+  }
+});
+adminCollectionsRoutes.get("/collections/:id", async (c) => {
+  try {
+    const id = c.req.param("id");
+    const user = c.get("user");
+    const db = c.env.DB;
+    const stmt = db.prepare("SELECT * FROM collections WHERE id = ?");
+    const collection = await stmt.bind(id).first();
+    if (!collection) {
+      const formData2 = {
+        isEdit: true,
+        error: "Collection not found.",
+        user: user ? {
+          name: user.email,
+          email: user.email,
+          role: user.role
+        } : void 0,
+        version: c.get("appVersion")
+      };
+      return c.html(renderCollectionFormPage(formData2));
+    }
+    const fieldsStmt = db.prepare(`
+      SELECT * FROM content_fields
+      WHERE collection_id = ?
+      ORDER BY field_order ASC
+    `);
+    const { results: fieldsResults } = await fieldsStmt.bind(id).all();
+    const fields = (fieldsResults || []).map((row) => ({
+      id: row.id,
+      field_name: row.field_name,
+      field_type: row.field_type,
+      field_label: row.field_label,
+      field_options: row.field_options ? JSON.parse(row.field_options) : {},
+      field_order: row.field_order,
+      is_required: row.is_required === 1,
+      is_searchable: row.is_searchable === 1
+    }));
+    const formData = {
+      id: collection.id,
+      name: collection.name,
+      display_name: collection.display_name,
+      description: collection.description,
+      fields,
+      managed: collection.managed === 1,
+      isEdit: true,
+      user: user ? {
+        name: user.email,
+        email: user.email,
+        role: user.role
+      } : void 0,
+      version: c.get("appVersion")
+    };
+    return c.html(renderCollectionFormPage(formData));
+  } catch (error) {
+    console.error("Error fetching collection:", error);
+    const user = c.get("user");
+    const formData = {
+      isEdit: true,
+      error: "Failed to load collection.",
+      user: user ? {
+        name: user.email,
+        email: user.email,
+        role: user.role
+      } : void 0,
+      version: c.get("appVersion")
+    };
+    return c.html(renderCollectionFormPage(formData));
+  }
+});
+adminCollectionsRoutes.put("/collections/:id", async (c) => {
+  try {
+    const id = c.req.param("id");
+    const formData = await c.req.formData();
+    const displayName = formData.get("displayName");
+    const description = formData.get("description");
+    if (!displayName) {
+      return c.html(html`
+        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+          Display name is required.
+        </div>
+      `);
+    }
+    const db = c.env.DB;
+    const updateStmt = db.prepare(`
+      UPDATE collections
+      SET display_name = ?, description = ?, updated_at = ?
+      WHERE id = ?
+    `);
+    await updateStmt.bind(displayName, description || null, Date.now(), id).run();
+    return c.html(html`
+      <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
+        Collection updated successfully!
+      </div>
+    `);
+  } catch (error) {
+    console.error("Error updating collection:", error);
+    return c.html(html`
+      <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+        Failed to update collection. Please try again.
+      </div>
+    `);
+  }
+});
+adminCollectionsRoutes.delete("/collections/:id", async (c) => {
+  try {
+    const id = c.req.param("id");
+    const db = c.env.DB;
+    const contentStmt = db.prepare("SELECT COUNT(*) as count FROM content WHERE collection_id = ?");
+    const contentResult = await contentStmt.bind(id).first();
+    if (contentResult && contentResult.count > 0) {
+      return c.html(html`
+        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+          Cannot delete collection: it contains ${contentResult.count} content item(s). Delete all content first.
+        </div>
+      `);
+    }
+    const deleteFieldsStmt = db.prepare("DELETE FROM content_fields WHERE collection_id = ?");
+    await deleteFieldsStmt.bind(id).run();
+    const deleteStmt = db.prepare("DELETE FROM collections WHERE id = ?");
+    await deleteStmt.bind(id).run();
+    return c.html(html`
+      <script>
+        window.location.href = '/admin/collections';
+      </script>
+    `);
+  } catch (error) {
+    console.error("Error deleting collection:", error);
+    return c.html(html`
+      <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+        Failed to delete collection. Please try again.
+      </div>
+    `);
+  }
+});
+adminCollectionsRoutes.post("/collections/:id/fields", async (c) => {
+  try {
+    const collectionId = c.req.param("id");
+    const formData = await c.req.formData();
+    const fieldName = formData.get("field_name");
+    const fieldType = formData.get("field_type");
+    const fieldLabel = formData.get("field_label");
+    const isRequired = formData.get("is_required") === "1";
+    const isSearchable = formData.get("is_searchable") === "1";
+    const fieldOptions = formData.get("field_options") || "{}";
+    if (!fieldName || !fieldType || !fieldLabel) {
+      return c.json({ success: false, error: "Field name, type, and label are required." });
+    }
+    if (!/^[a-z0-9_]+$/.test(fieldName)) {
+      return c.json({ success: false, error: "Field name must contain only lowercase letters, numbers, and underscores." });
+    }
+    const db = c.env.DB;
+    const existingStmt = db.prepare("SELECT id FROM content_fields WHERE collection_id = ? AND field_name = ?");
+    const existing = await existingStmt.bind(collectionId, fieldName).first();
+    if (existing) {
+      return c.json({ success: false, error: "A field with this name already exists." });
+    }
+    const orderStmt = db.prepare("SELECT MAX(field_order) as max_order FROM content_fields WHERE collection_id = ?");
+    const orderResult = await orderStmt.bind(collectionId).first();
+    const nextOrder = (orderResult?.max_order || 0) + 1;
+    const fieldId = globalThis.crypto.randomUUID();
+    const now = Date.now();
+    const insertStmt = db.prepare(`
+      INSERT INTO content_fields (
+        id, collection_id, field_name, field_type, field_label,
+        field_options, field_order, is_required, is_searchable,
+        created_at, updated_at
+      ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+    `);
+    await insertStmt.bind(
+      fieldId,
+      collectionId,
+      fieldName,
+      fieldType,
+      fieldLabel,
+      fieldOptions,
+      nextOrder,
+      isRequired ? 1 : 0,
+      isSearchable ? 1 : 0,
+      now,
+      now
+    ).run();
+    return c.json({ success: true, fieldId });
+  } catch (error) {
+    console.error("Error adding field:", error);
+    return c.json({ success: false, error: "Failed to add field." });
+  }
+});
+adminCollectionsRoutes.put("/collections/:collectionId/fields/:fieldId", async (c) => {
+  try {
+    const fieldId = c.req.param("fieldId");
+    const formData = await c.req.formData();
+    const fieldLabel = formData.get("field_label");
+    const isRequired = formData.get("is_required") === "1";
+    const isSearchable = formData.get("is_searchable") === "1";
+    const fieldOptions = formData.get("field_options") || "{}";
+    if (!fieldLabel) {
+      return c.json({ success: false, error: "Field label is required." });
+    }
+    const db = c.env.DB;
+    const updateStmt = db.prepare(`
+      UPDATE content_fields
+      SET field_label = ?, field_options = ?, is_required = ?, is_searchable = ?, updated_at = ?
+      WHERE id = ?
+    `);
+    await updateStmt.bind(fieldLabel, fieldOptions, isRequired ? 1 : 0, isSearchable ? 1 : 0, Date.now(), fieldId).run();
+    return c.json({ success: true });
+  } catch (error) {
+    console.error("Error updating field:", error);
+    return c.json({ success: false, error: "Failed to update field." });
+  }
+});
+adminCollectionsRoutes.delete("/collections/:collectionId/fields/:fieldId", async (c) => {
+  try {
+    const fieldId = c.req.param("fieldId");
+    const db = c.env.DB;
+    const deleteStmt = db.prepare("DELETE FROM content_fields WHERE id = ?");
+    await deleteStmt.bind(fieldId).run();
+    return c.json({ success: true });
+  } catch (error) {
+    console.error("Error deleting field:", error);
+    return c.json({ success: false, error: "Failed to delete field." });
+  }
+});
+adminCollectionsRoutes.post("/collections/:collectionId/fields/reorder", async (c) => {
+  try {
+    const body = await c.req.json();
+    const fieldIds = body.fieldIds;
+    if (!Array.isArray(fieldIds)) {
+      return c.json({ success: false, error: "Invalid field order data." });
+    }
+    const db = c.env.DB;
+    for (let i = 0; i < fieldIds.length; i++) {
+      const updateStmt = db.prepare("UPDATE content_fields SET field_order = ?, updated_at = ? WHERE id = ?");
+      await updateStmt.bind(i + 1, Date.now(), fieldIds[i]).run();
+    }
+    return c.json({ success: true });
+  } catch (error) {
+    console.error("Error reordering fields:", error);
+    return c.json({ success: false, error: "Failed to reorder fields." });
+  }
+});
+
+// src/templates/pages/admin-settings.template.ts
+init_admin_layout_catalyst_template();
+function renderSettingsPage(data) {
+  const activeTab = data.activeTab || "general";
+  const pageContent = `
+    <div>
+      <!-- Header -->
+      <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between mb-6">
+        <div>
+          <h1 class="text-2xl/8 font-semibold text-zinc-950 dark:text-white sm:text-xl/8">Settings</h1>
+          <p class="mt-2 text-sm/6 text-zinc-500 dark:text-zinc-400">Manage your application settings and preferences</p>
+        </div>
+        <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none flex space-x-3">
+          <button
+            onclick="resetSettings()"
+            class="inline-flex items-center justify-center rounded-lg bg-white dark:bg-zinc-800 px-3.5 py-2.5 text-sm font-semibold text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors shadow-sm"
+          >
+            <svg class="-ml-0.5 mr-1.5 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+            </svg>
+            Reset to Defaults
+          </button>
+          <button
+            onclick="saveAllSettings()"
+            class="inline-flex items-center justify-center rounded-lg bg-zinc-950 dark:bg-white px-3.5 py-2.5 text-sm font-semibold text-white dark:text-zinc-950 hover:bg-zinc-800 dark:hover:bg-zinc-100 transition-colors shadow-sm"
+          >
+            <svg class="-ml-0.5 mr-1.5 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+            </svg>
+            Save All Changes
+          </button>
+        </div>
+      </div>
+
+      <!-- Settings Navigation Tabs -->
+      <div class="rounded-xl bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10 mb-6 overflow-hidden">
+        <div class="border-b border-zinc-950/5 dark:border-white/10">
+          <nav class="flex overflow-x-auto" role="tablist">
+            ${renderTabButton("general", "General", "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z", activeTab)}
+            ${renderTabButton("appearance", "Appearance", "M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z", activeTab)}
+            ${renderTabButton("security", "Security", "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", activeTab)}
+            ${renderTabButton("notifications", "Notifications", "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9", activeTab)}
+            ${renderTabButton("storage", "Storage", "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12", activeTab)}
+            ${renderTabButton("migrations", "Migrations", "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 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4", activeTab)}
+            ${renderTabButton("database-tools", "Database Tools", "M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01", activeTab)}
+          </nav>
+        </div>
+      </div>
+
+      <!-- Settings Content -->
+      <div class="rounded-xl bg-white dark:bg-zinc-900 shadow-sm ring-1 ring-zinc-950/5 dark:ring-white/10">
+        <div id="settings-content" class="p-8">
+          ${renderTabContent(activeTab, data.settings)}
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // Initialize tab-specific features on page load
+      const currentTab = '${activeTab}';
+
+      function saveAllSettings() {
+        // Collect all form data
+        const formData = new FormData();
+        
+        // Get all form inputs
+        document.querySelectorAll('input, select, textarea').forEach(input => {
+          if (input.type === 'checkbox') {
+            formData.append(input.name, input.checked);
+          } else if (input.name) {
+            formData.append(input.name, input.value);
+          }
+        });
+        
+        // Show loading state
+        const saveBtn = document.querySelector('button[onclick="saveAllSettings()"]');
+        const originalText = saveBtn.innerHTML;
+        saveBtn.innerHTML = 'Saving...';
+        saveBtn.disabled = true;
+        
+        // Simulate save (replace with actual API call)
+        setTimeout(() => {
+          saveBtn.innerHTML = originalText;
+          saveBtn.disabled = false;
+          showNotification('Settings saved successfully!', 'success');
+        }, 1000);
+      }
+      
+      function resetSettings() {
+        showConfirmDialog('reset-settings-confirm');
+      }
+
+      function performResetSettings() {
+        showNotification('Settings reset to defaults', 'info');
+        setTimeout(() => {
+          window.location.reload();
+        }, 1000);
+      }
+      
+      // Migration functions
+      window.refreshMigrationStatus = async function() {
+        try {
+          const response = await fetch('/admin/api/migrations/status');
+          const result = await response.json();
+          
+          if (result.success) {
+            updateMigrationUI(result.data);
+          } else {
+            console.error('Failed to refresh migration status');
+          }
+        } catch (error) {
+          console.error('Error loading migration status:', error);
+        }
+      };
+
+      window.runPendingMigrations = async function() {
+        const btn = document.getElementById('run-migrations-btn');
+        if (!btn || btn.disabled) return;
+
+        showConfirmDialog('run-migrations-confirm');
+      };
+
+      window.performRunMigrations = async function() {
+        const btn = document.getElementById('run-migrations-btn');
+        if (!btn) return;
+
+        btn.disabled = true;
+        btn.innerHTML = 'Running...';
+
+        try {
+          const response = await fetch('/admin/api/migrations/run', {
+            method: 'POST'
+          });
+          const result = await response.json();
+
+          if (result.success) {
+            alert(result.message);
+            setTimeout(() => window.refreshMigrationStatus(), 1000);
+          } else {
+            alert(result.error || 'Failed to run migrations');
+          }
+        } catch (error) {
+          alert('Error running migrations');
+        } finally {
+          btn.disabled = false;
+          btn.innerHTML = 'Run Pending';
+        }
+      };
+
+      window.validateSchema = async function() {
+        try {
+          const response = await fetch('/admin/api/migrations/validate');
+          const result = await response.json();
+          
+          if (result.success) {
+            if (result.data.valid) {
+              alert('Database schema is valid');
+            } else {
+              alert(\`Schema validation failed: \${result.data.issues.join(', ')}\`);
+            }
+          } else {
+            alert('Failed to validate schema');
+          }
+        } catch (error) {
+          alert('Error validating schema');
+        }
+      };
+
+      window.updateMigrationUI = function(data) {
+        const totalEl = document.getElementById('total-migrations');
+        const appliedEl = document.getElementById('applied-migrations');
+        const pendingEl = document.getElementById('pending-migrations');
+        
+        if (totalEl) totalEl.textContent = data.totalMigrations;
+        if (appliedEl) appliedEl.textContent = data.appliedMigrations;
+        if (pendingEl) pendingEl.textContent = data.pendingMigrations;
+        
+        const runBtn = document.getElementById('run-migrations-btn');
+        if (runBtn) {
+          runBtn.disabled = data.pendingMigrations === 0;
+        }
+        
+        // Update migrations list
+        const listContainer = document.getElementById('migrations-list');
+        if (listContainer && data.migrations && data.migrations.length > 0) {
+          listContainer.innerHTML = data.migrations.map(migration => \`
+            <div class="px-6 py-4 flex items-center justify-between">
+              <div class="flex-1">
+                <div class="flex items-center space-x-3">
+                  <div class="flex-shrink-0">
+                    \${migration.applied 
+                      ? '<svg class="w-5 h-5 text-green-400" 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"/></svg>'
+                      : '<svg class="w-5 h-5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>'
+                    }
+                  </div>
+                  <div>
+                    <h5 class="text-white font-medium">\${migration.name}</h5>
+                    <p class="text-sm text-gray-300">\${migration.filename}</p>
+                    \${migration.description ? \`<p class="text-xs text-gray-400 mt-1">\${migration.description}</p>\` : ''}
+                  </div>
+                </div>
+              </div>
+              
+              <div class="flex items-center space-x-4 text-sm">
+                \${migration.size ? \`<span class="text-gray-400">\${(migration.size / 1024).toFixed(1)} KB</span>\` : ''}
+                <span class="px-2 py-1 rounded-full text-xs font-medium \${
+                  migration.applied 
+                    ? 'bg-green-100 text-green-800' 
+                    : 'bg-orange-100 text-orange-800'
+                }">
+                  \${migration.applied ? 'Applied' : 'Pending'}
+                </span>
+                \${migration.appliedAt ? \`<span class="text-gray-400">\${new Date(migration.appliedAt).toLocaleDateString()}</span>\` : ''}
+              </div>
+            </div>
+          \`).join('');
+        }
+      };
+      
+      // Auto-load migrations when switching to that tab
+      function initializeMigrations() {
+        if (currentTab === 'migrations') {
+          setTimeout(window.refreshMigrationStatus, 500);
+        }
+      }
+      
+      // Database Tools functions
+      window.refreshDatabaseStats = async function() {
+        try {
+          const response = await fetch('/admin/database-tools/api/stats');
+          const result = await response.json();
+          
+          if (result.success) {
+            updateDatabaseToolsUI(result.data);
+          } else {
+            console.error('Failed to refresh database stats');
+          }
+        } catch (error) {
+          console.error('Error loading database stats:', error);
+        }
+      };
+
+      window.createDatabaseBackup = async function() {
+        const btn = document.getElementById('create-backup-btn');
+        if (!btn) return;
+        
+        btn.disabled = true;
+        btn.innerHTML = 'Creating Backup...';
+        
+        try {
+          const response = await fetch('/admin/database-tools/api/backup', {
+            method: 'POST'
+          });
+          const result = await response.json();
+          
+          if (result.success) {
+            alert(result.message);
+            setTimeout(() => window.refreshDatabaseStats(), 1000);
+          } else {
+            alert(result.error || 'Failed to create backup');
+          }
+        } catch (error) {
+          alert('Error creating backup');
+        } finally {
+          btn.disabled = false;
+          btn.innerHTML = 'Create Backup';
+        }
+      };
+
+      window.truncateDatabase = async function() {
+        // Show dangerous operation warning
+        const confirmText = prompt(
+          'WARNING: This will delete ALL data except your admin account!\\n\\n' +
+          'This action CANNOT be undone!\\n\\n' +
+          'Type "TRUNCATE ALL DATA" to confirm:'
+        );
+        
+        if (confirmText !== 'TRUNCATE ALL DATA') {
+          alert('Operation cancelled. Confirmation text did not match.');
+          return;
+        }
+        
+        const btn = document.getElementById('truncate-db-btn');
+        if (!btn) return;
+        
+        btn.disabled = true;
+        btn.innerHTML = 'Truncating...';
+        
+        try {
+          const response = await fetch('/admin/database-tools/api/truncate', {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+              confirmText: confirmText
+            })
+          });
+          const result = await response.json();
+          
+          if (result.success) {
+            alert(result.message + '\\n\\nTables cleared: ' + result.data.tablesCleared.join(', '));
+            setTimeout(() => {
+              window.refreshDatabaseStats();
+              // Optionally reload page to refresh all data
+              window.location.reload();
+            }, 2000);
+          } else {
+            alert(result.error || 'Failed to truncate database');
+          }
+        } catch (error) {
+          alert('Error truncating database');
+        } finally {
+          btn.disabled = false;
+          btn.innerHTML = 'Truncate All Data';
+        }
+      };
+
+      window.validateDatabase = async function() {
+        try {
+          const response = await fetch('/admin/database-tools/api/validate');
+          const result = await response.json();
+          
+          if (result.success) {
+            if (result.data.valid) {
+              alert('Database validation passed. No issues found.');
+            } else {
+              alert('Database validation failed:\\n\\n' + result.data.issues.join('\\n'));
+            }
+          } else {
+            alert('Failed to validate database');
+          }
+        } catch (error) {
+          alert('Error validating database');
+        }
+      };
+
+      window.updateDatabaseToolsUI = function(data) {
+        const totalTablesEl = document.getElementById('total-tables');
+        const totalRowsEl = document.getElementById('total-rows');
+        const tablesListEl = document.getElementById('tables-list');
+
+        if (totalTablesEl) totalTablesEl.textContent = data.tables.length;
+        if (totalRowsEl) totalRowsEl.textContent = data.totalRows.toLocaleString();
+
+        if (tablesListEl && data.tables && data.tables.length > 0) {
+          tablesListEl.innerHTML = data.tables.map(table => \`
+            <a
+              href="/admin/database-tools/tables/\${table.name}"
+              class="flex items-center justify-between py-3 px-4 rounded-lg bg-white dark:bg-white/5 hover:bg-zinc-50 dark:hover:bg-white/10 cursor-pointer transition-colors ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 no-underline"
+            >
+              <div class="flex items-center space-x-3">
+                <svg class="w-5 h-5 text-zinc-500 dark:text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/>
+                </svg>
+                <span class="text-zinc-950 dark:text-white font-medium">\${table.name}</span>
+              </div>
+              <div class="flex items-center space-x-3">
+                <span class="text-zinc-500 dark:text-zinc-400 text-sm">\${table.rowCount.toLocaleString()} rows</span>
+                <svg class="w-4 h-4 text-zinc-400" 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"/>
+                </svg>
+              </div>
+            </a>
+          \`).join('');
+        }
+      };
+
+      // Auto-load tab-specific data after all functions are defined
+      if (currentTab === 'migrations') {
+        setTimeout(window.refreshMigrationStatus, 500);
+      }
+
+      if (currentTab === 'database-tools') {
+        setTimeout(window.refreshDatabaseStats, 500);
+      }
+    </script>
+
+    <!-- Confirmation Dialogs -->
+    ${renderConfirmationDialog2({
+    id: "reset-settings-confirm",
+    title: "Reset Settings",
+    message: "Are you sure you want to reset all settings to their default values? This action cannot be undone.",
+    confirmText: "Reset",
+    cancelText: "Cancel",
+    iconColor: "yellow",
+    confirmClass: "bg-yellow-500 hover:bg-yellow-400",
+    onConfirm: "performResetSettings()"
+  })}
+
+    ${renderConfirmationDialog2({
+    id: "run-migrations-confirm",
+    title: "Run Migrations",
+    message: "Are you sure you want to run pending migrations? This action cannot be undone.",
+    confirmText: "Run Migrations",
+    cancelText: "Cancel",
+    iconColor: "blue",
+    confirmClass: "bg-blue-500 hover:bg-blue-400",
+    onConfirm: "performRunMigrations()"
+  })}
+
+    ${getConfirmationDialogScript2()}
+  `;
+  const layoutData = {
+    title: "Settings",
+    pageTitle: "Settings",
+    currentPath: "/admin/settings",
+    user: data.user,
+    version: data.version,
+    content: pageContent
+  };
+  return renderAdminLayoutCatalyst(layoutData);
+}
+function renderTabButton(tabId, label, iconPath, activeTab) {
+  const isActive = activeTab === tabId;
+  const baseClasses = "flex items-center space-x-2 px-4 py-3 text-sm font-medium transition-colors border-b-2 whitespace-nowrap no-underline";
+  const activeClasses = isActive ? "border-zinc-950 dark:border-white text-zinc-950 dark:text-white" : "border-transparent text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300 hover:border-zinc-300 dark:hover:border-zinc-700";
+  return `
+    <a
+      href="/admin/settings/${tabId}"
+      data-tab="${tabId}"
+      class="${baseClasses} ${activeClasses}"
+    >
+      <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="${iconPath}"/>
+      </svg>
+      <span>${label}</span>
+    </a>
+  `;
+}
+function renderTabContent(activeTab, settings) {
+  switch (activeTab) {
+    case "general":
+      return renderGeneralSettings(settings?.general);
+    case "appearance":
+      return renderAppearanceSettings(settings?.appearance);
+    case "security":
+      return renderSecuritySettings(settings?.security);
+    case "notifications":
+      return renderNotificationSettings(settings?.notifications);
+    case "storage":
+      return renderStorageSettings(settings?.storage);
+    case "migrations":
+      return renderMigrationSettings(settings?.migrations);
+    case "database-tools":
+      return renderDatabaseToolsSettings(settings?.databaseTools);
+    default:
+      return renderGeneralSettings(settings?.general);
+  }
+}
+function renderGeneralSettings(settings) {
+  return `
+    <div class="space-y-6">
+      <div>
+        <h3 class="text-lg/7 font-semibold text-zinc-950 dark:text-white">General Settings</h3>
+        <p class="mt-1 text-sm/6 text-zinc-500 dark:text-zinc-400">Configure basic application settings and preferences.</p>
+      </div>
+      
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm/6 font-medium text-zinc-950 dark:text-white mb-2">Site Name</label>
+            <input
+              type="text"
+              name="siteName"
+              value="${settings?.siteName || "SonicJS AI"}"
+              class="w-full rounded-lg bg-white dark:bg-white/5 px-3 py-2 text-sm/6 text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 placeholder:text-zinc-500 dark:placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-indigo-500 dark:focus:ring-indigo-400"
+              placeholder="Enter site name"
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm/6 font-medium text-zinc-950 dark:text-white mb-2">Admin Email</label>
+            <input
+              type="email"
+              name="adminEmail"
+              value="${settings?.adminEmail || "admin@example.com"}"
+              class="w-full rounded-lg bg-white dark:bg-white/5 px-3 py-2 text-sm/6 text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 placeholder:text-zinc-500 dark:placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-indigo-500 dark:focus:ring-indigo-400"
+              placeholder="admin@example.com"
+            />
+          </div>
+
+          <div>
+            <label class="block text-sm/6 font-medium text-zinc-950 dark:text-white mb-2">Timezone</label>
+            <select
+              name="timezone"
+              class="w-full rounded-lg bg-white dark:bg-white/5 px-3 py-2 text-sm/6 text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 dark:focus:ring-indigo-400"
+            >
+              <option value="UTC" ${settings?.timezone === "UTC" ? "selected" : ""}>UTC</option>
+              <option value="America/New_York" ${settings?.timezone === "America/New_York" ? "selected" : ""}>Eastern Time</option>
+              <option value="America/Chicago" ${settings?.timezone === "America/Chicago" ? "selected" : ""}>Central Time</option>
+              <option value="America/Denver" ${settings?.timezone === "America/Denver" ? "selected" : ""}>Mountain Time</option>
+              <option value="America/Los_Angeles" ${settings?.timezone === "America/Los_Angeles" ? "selected" : ""}>Pacific Time</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm/6 font-medium text-zinc-950 dark:text-white mb-2">Site Description</label>
+            <textarea
+              name="siteDescription"
+              rows="3"
+              class="w-full rounded-lg bg-white dark:bg-white/5 px-3 py-2 text-sm/6 text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 placeholder:text-zinc-500 dark:placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-indigo-500 dark:focus:ring-indigo-400"
+              placeholder="Describe your site..."
+            >${settings?.siteDescription || ""}</textarea>
+          </div>
+
+          <div>
+            <label class="block text-sm/6 font-medium text-zinc-950 dark:text-white mb-2">Language</label>
+            <select
+              name="language"
+              class="w-full rounded-lg bg-white dark:bg-white/5 px-3 py-2 text-sm/6 text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 dark:focus:ring-indigo-400"
+            >
+              <option value="en" ${settings?.language === "en" ? "selected" : ""}>English</option>
+              <option value="es" ${settings?.language === "es" ? "selected" : ""}>Spanish</option>
+              <option value="fr" ${settings?.language === "fr" ? "selected" : ""}>French</option>
+              <option value="de" ${settings?.language === "de" ? "selected" : ""}>German</option>
+            </select>
+          </div>
+          
+          <div class="flex gap-3">
+            <div class="flex h-6 shrink-0 items-center">
+              <div class="group grid size-4 grid-cols-1">
+                <input
+                  type="checkbox"
+                  id="maintenanceMode"
+                  name="maintenanceMode"
+                  ${settings?.maintenanceMode ? "checked" : ""}
+                  class="col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 indeterminate:border-indigo-500 indeterminate:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 disabled:checked:bg-zinc-950/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto"
+                />
+                <svg viewBox="0 0 14 14" fill="none" class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25">
+                  <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:checked]:opacity-100" />
+                  <path d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:indeterminate]:opacity-100" />
+                </svg>
+              </div>
+            </div>
+            <div class="text-sm/6">
+              <label for="maintenanceMode" class="font-medium text-zinc-950 dark:text-white">
+                Enable maintenance mode
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}
+function renderAppearanceSettings(settings) {
+  return `
+    <div class="space-y-6">
+      <!-- WIP Notice -->
+      <div class="rounded-lg bg-blue-50 dark:bg-blue-950/20 p-6 ring-1 ring-inset ring-blue-600/20 dark:ring-blue-500/30">
+        <div class="flex items-start space-x-3">
+          <svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+          <div class="flex-1">
+            <h4 class="text-base/7 font-semibold text-blue-900 dark:text-blue-300">Work in Progress</h4>
+            <p class="mt-1 text-sm/6 text-blue-700 dark:text-blue-200">
+              This settings section is currently under development and provided for reference and design feedback only. Changes made here will not be saved.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 class="text-lg font-semibold text-white mb-4">Appearance Settings</h3>
+        <p class="text-gray-300 mb-6">Customize the look and feel of your application.</p>
+      </div>
+      
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-300 mb-2">Theme</label>
+            <div class="grid grid-cols-3 gap-3">
+              <label class="flex items-center space-x-2 p-3 bg-white/10 rounded-lg border border-white/20 cursor-pointer hover:bg-white/20 transition-colors">
+                <input 
+                  type="radio" 
+                  name="theme" 
+                  value="light"
+                  ${settings?.theme === "light" ? "checked" : ""}
+                  class="text-blue-600"
+                />
+                <span class="text-sm text-gray-300">Light</span>
+              </label>
+              <label class="flex items-center space-x-2 p-3 bg-white/10 rounded-lg border border-white/20 cursor-pointer hover:bg-white/20 transition-colors">
+                <input 
+                  type="radio" 
+                  name="theme" 
+                  value="dark"
+                  ${settings?.theme === "dark" || !settings?.theme ? "checked" : ""}
+                  class="text-blue-600"
+                />
+                <span class="text-sm text-gray-300">Dark</span>
+              </label>
+              <label class="flex items-center space-x-2 p-3 bg-white/10 rounded-lg border border-white/20 cursor-pointer hover:bg-white/20 transition-colors">
+                <input 
+                  type="radio" 
+                  name="theme" 
+                  value="auto"
+                  ${settings?.theme === "auto" ? "checked" : ""}
+                  class="text-blue-600"
+                />
+                <span class="text-sm text-gray-300">Auto</span>
+              </label>
+            </div>
+          </div>
+          
+          <div>
+            <label class="block text-sm font-medium text-gray-300 mb-2">Primary Color</label>
+            <div class="flex items-center space-x-3">
+              <input 
+                type="color" 
+                name="primaryColor"
+                value="${settings?.primaryColor || "#465FFF"}"
+                class="w-12 h-10 bg-white/10 border border-white/20 rounded-lg cursor-pointer"
+              />
+              <input 
+                type="text" 
+                value="${settings?.primaryColor || "#465FFF"}"
+                class="flex-1 px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder="#465FFF"
+              />
+            </div>
+          </div>
+          
+          <div>
+            <label class="block text-sm font-medium text-gray-300 mb-2">Logo URL</label>
+            <input 
+              type="url" 
+              name="logoUrl"
+              value="${settings?.logoUrl || ""}"
+              class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="https://example.com/logo.png"
+            />
+          </div>
+        </div>
+        
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-300 mb-2">Favicon URL</label>
+            <input 
+              type="url" 
+              name="favicon"
+              value="${settings?.favicon || ""}"
+              class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="https://example.com/favicon.ico"
+            />
+          </div>
+          
+          <div>
+            <label class="block text-sm font-medium text-gray-300 mb-2">Custom CSS</label>
+            <textarea 
+              name="customCSS"
+              rows="6"
+              class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono text-sm"
+              placeholder="/* Add your custom CSS here */"
+            >${settings?.customCSS || ""}</textarea>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}
+function renderSecuritySettings(settings) {
+  return `
+    <div class="space-y-6">
+      <!-- WIP Notice -->
+      <div class="rounded-lg bg-blue-50 dark:bg-blue-950/20 p-6 ring-1 ring-inset ring-blue-600/20 dark:ring-blue-500/30">
+        <div class="flex items-start space-x-3">
+          <svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+          <div class="flex-1">
+            <h4 class="text-base/7 font-semibold text-blue-900 dark:text-blue-300">Work in Progress</h4>
+            <p class="mt-1 text-sm/6 text-blue-700 dark:text-blue-200">
+              This settings section is currently under development and provided for reference and design feedback only. Changes made here will not be saved.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 class="text-lg font-semibold text-white mb-4">Security Settings</h3>
+        <p class="text-gray-300 mb-6">Configure security and authentication settings.</p>
+      </div>
+      
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div class="space-y-5">
+          <div class="flex gap-3">
+            <div class="flex h-6 shrink-0 items-center">
+              <div class="group grid size-4 grid-cols-1">
+                <input
+                  type="checkbox"
+                  id="twoFactorEnabled"
+                  name="twoFactorEnabled"
+                  ${settings?.twoFactorEnabled ? "checked" : ""}
+                  class="col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 indeterminate:border-indigo-500 indeterminate:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 disabled:checked:bg-zinc-950/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto"
+                />
+                <svg viewBox="0 0 14 14" fill="none" class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25">
+                  <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:checked]:opacity-100" />
+                  <path d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:indeterminate]:opacity-100" />
+                </svg>
+              </div>
+            </div>
+            <div class="text-sm/6">
+              <label for="twoFactorEnabled" class="font-medium text-zinc-950 dark:text-white">
+                Enable Two-Factor Authentication
+              </label>
+            </div>
+          </div>
+          
+          <div>
+            <label class="block text-sm font-medium text-gray-300 mb-2">Session Timeout (minutes)</label>
+            <input 
+              type="number" 
+              name="sessionTimeout"
+              value="${settings?.sessionTimeout || 30}"
+              min="5"
+              max="1440"
+              class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          
+          <div>
+            <label class="block text-sm font-medium text-gray-300 mb-2">Password Requirements</label>
+            <div class="space-y-3">
+              <div class="flex gap-3">
+                <div class="flex h-6 shrink-0 items-center">
+                  <div class="group grid size-4 grid-cols-1">
+                    <input
+                      type="checkbox"
+                      id="requireUppercase"
+                      name="requireUppercase"
+                      ${settings?.passwordRequirements?.requireUppercase ? "checked" : ""}
+                      class="col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 indeterminate:border-indigo-500 indeterminate:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 disabled:checked:bg-zinc-950/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto"
+                    />
+                    <svg viewBox="0 0 14 14" fill="none" class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25">
+                      <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:checked]:opacity-100" />
+                      <path d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:indeterminate]:opacity-100" />
+                    </svg>
+                  </div>
+                </div>
+                <div class="text-sm/6">
+                  <label for="requireUppercase" class="font-medium text-zinc-950 dark:text-white">Require uppercase letters</label>
+                </div>
+              </div>
+              <div class="flex gap-3">
+                <div class="flex h-6 shrink-0 items-center">
+                  <div class="group grid size-4 grid-cols-1">
+                    <input
+                      type="checkbox"
+                      id="requireNumbers"
+                      name="requireNumbers"
+                      ${settings?.passwordRequirements?.requireNumbers ? "checked" : ""}
+                      class="col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 indeterminate:border-indigo-500 indeterminate:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 disabled:checked:bg-zinc-950/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto"
+                    />
+                    <svg viewBox="0 0 14 14" fill="none" class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25">
+                      <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:checked]:opacity-100" />
+                      <path d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:indeterminate]:opacity-100" />
+                    </svg>
+                  </div>
+                </div>
+                <div class="text-sm/6">
+                  <label for="requireNumbers" class="font-medium text-zinc-950 dark:text-white">Require numbers</label>
+                </div>
+              </div>
+              <div class="flex gap-3">
+                <div class="flex h-6 shrink-0 items-center">
+                  <div class="group grid size-4 grid-cols-1">
+                    <input
+                      type="checkbox"
+                      id="requireSymbols"
+                      name="requireSymbols"
+                      ${settings?.passwordRequirements?.requireSymbols ? "checked" : ""}
+                      class="col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 indeterminate:border-indigo-500 indeterminate:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 disabled:checked:bg-zinc-950/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto"
+                    />
+                    <svg viewBox="0 0 14 14" fill="none" class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25">
+                      <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:checked]:opacity-100" />
+                      <path d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:indeterminate]:opacity-100" />
+                    </svg>
+                  </div>
+                </div>
+                <div class="text-sm/6">
+                  <label for="requireSymbols" class="font-medium text-zinc-950 dark:text-white">Require symbols</label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-300 mb-2">Minimum Password Length</label>
+            <input 
+              type="number" 
+              name="minPasswordLength"
+              value="${settings?.passwordRequirements?.minLength || 8}"
+              min="6"
+              max="128"
+              class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          
+          <div>
+            <label class="block text-sm font-medium text-gray-300 mb-2">IP Whitelist</label>
+            <textarea 
+              name="ipWhitelist"
+              rows="4"
+              class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="Enter IP addresses (one per line)&#10;192.168.1.1&#10;10.0.0.1"
+            >${settings?.ipWhitelist?.join("\n") || ""}</textarea>
+            <p class="text-xs text-gray-400 mt-1">Leave empty to allow all IPs</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}
+function renderNotificationSettings(settings) {
+  return `
+    <div class="space-y-6">
+      <!-- WIP Notice -->
+      <div class="rounded-lg bg-blue-50 dark:bg-blue-950/20 p-6 ring-1 ring-inset ring-blue-600/20 dark:ring-blue-500/30">
+        <div class="flex items-start space-x-3">
+          <svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+          <div class="flex-1">
+            <h4 class="text-base/7 font-semibold text-blue-900 dark:text-blue-300">Work in Progress</h4>
+            <p class="mt-1 text-sm/6 text-blue-700 dark:text-blue-200">
+              This settings section is currently under development and provided for reference and design feedback only. Changes made here will not be saved.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 class="text-lg font-semibold text-white mb-4">Notification Settings</h3>
+        <p class="text-gray-300 mb-6">Configure how and when you receive notifications.</p>
+      </div>
+      
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div class="space-y-4">
+          <div>
+            <h4 class="text-md font-medium text-white mb-3">Email Notifications</h4>
+            <div class="space-y-5">
+              <div class="flex gap-3">
+                <div class="flex h-6 shrink-0 items-center">
+                  <div class="group grid size-4 grid-cols-1">
+                    <input
+                      type="checkbox"
+                      id="emailNotifications"
+                      name="emailNotifications"
+                      ${settings?.emailNotifications ? "checked" : ""}
+                      class="col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 indeterminate:border-indigo-500 indeterminate:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 disabled:checked:bg-zinc-950/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto"
+                    />
+                    <svg viewBox="0 0 14 14" fill="none" class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25">
+                      <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:checked]:opacity-100" />
+                      <path d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:indeterminate]:opacity-100" />
+                    </svg>
+                  </div>
+                </div>
+                <div class="text-sm/6">
+                  <label for="emailNotifications" class="font-medium text-zinc-950 dark:text-white">Enable email notifications</label>
+                </div>
+              </div>
+
+              <div class="flex gap-3">
+                <div class="flex h-6 shrink-0 items-center">
+                  <div class="group grid size-4 grid-cols-1">
+                    <input
+                      type="checkbox"
+                      id="contentUpdates"
+                      name="contentUpdates"
+                      ${settings?.contentUpdates ? "checked" : ""}
+                      class="col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 indeterminate:border-indigo-500 indeterminate:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 disabled:checked:bg-zinc-950/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto"
+                    />
+                    <svg viewBox="0 0 14 14" fill="none" class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25">
+                      <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:checked]:opacity-100" />
+                      <path d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:indeterminate]:opacity-100" />
+                    </svg>
+                  </div>
+                </div>
+                <div class="text-sm/6">
+                  <label for="contentUpdates" class="font-medium text-zinc-950 dark:text-white">Content updates</label>
+                </div>
+              </div>
+
+              <div class="flex gap-3">
+                <div class="flex h-6 shrink-0 items-center">
+                  <div class="group grid size-4 grid-cols-1">
+                    <input
+                      type="checkbox"
+                      id="systemAlerts"
+                      name="systemAlerts"
+                      ${settings?.systemAlerts ? "checked" : ""}
+                      class="col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 indeterminate:border-indigo-500 indeterminate:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 disabled:checked:bg-zinc-950/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto"
+                    />
+                    <svg viewBox="0 0 14 14" fill="none" class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25">
+                      <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:checked]:opacity-100" />
+                      <path d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:indeterminate]:opacity-100" />
+                    </svg>
+                  </div>
+                </div>
+                <div class="text-sm/6">
+                  <label for="systemAlerts" class="font-medium text-zinc-950 dark:text-white">System alerts</label>
+                </div>
+              </div>
+
+              <div class="flex gap-3">
+                <div class="flex h-6 shrink-0 items-center">
+                  <div class="group grid size-4 grid-cols-1">
+                    <input
+                      type="checkbox"
+                      id="userRegistrations"
+                      name="userRegistrations"
+                      ${settings?.userRegistrations ? "checked" : ""}
+                      class="col-start-1 row-start-1 appearance-none rounded border border-zinc-950/10 dark:border-white/10 bg-white dark:bg-white/5 checked:border-indigo-500 checked:bg-indigo-500 indeterminate:border-indigo-500 indeterminate:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:border-zinc-950/5 dark:disabled:border-white/5 disabled:bg-zinc-950/10 dark:disabled:bg-white/10 disabled:checked:bg-zinc-950/10 dark:disabled:checked:bg-white/10 forced-colors:appearance-auto"
+                    />
+                    <svg viewBox="0 0 14 14" fill="none" class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-zinc-950/25 dark:group-has-[:disabled]:stroke-white/25">
+                      <path d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:checked]:opacity-100" />
+                      <path d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-0 group-has-[:indeterminate]:opacity-100" />
+                    </svg>
+                  </div>
+                </div>
+                <div class="text-sm/6">
+                  <label for="userRegistrations" class="font-medium text-zinc-950 dark:text-white">New user registrations</label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-300 mb-2">Email Frequency</label>
+            <select 
+              name="emailFrequency"
+              class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="immediate" ${settings?.emailFrequency === "immediate" ? "selected" : ""}>Immediate</option>
+              <option value="daily" ${settings?.emailFrequency === "daily" ? "selected" : ""}>Daily Digest</option>
+              <option value="weekly" ${settings?.emailFrequency === "weekly" ? "selected" : ""}>Weekly Digest</option>
+            </select>
+          </div>
+          
+          <div class="p-4 bg-blue-500/20 border border-blue-500/30 rounded-lg">
+            <div class="flex items-start space-x-3">
+              <svg class="w-5 h-5 text-blue-400 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+              </svg>
+              <div>
+                <h5 class="text-sm font-medium text-blue-300">Notification Preferences</h5>
+                <p class="text-xs text-blue-200 mt-1">
+                  Critical system alerts will always be sent immediately regardless of your frequency setting.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}
+function renderStorageSettings(settings) {
+  return `
+    <div class="space-y-6">
+      <!-- WIP Notice -->
+      <div class="rounded-lg bg-blue-50 dark:bg-blue-950/20 p-6 ring-1 ring-inset ring-blue-600/20 dark:ring-blue-500/30">
+        <div class="flex items-start space-x-3">
+          <svg class="w-6 h-6 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+          </svg>
+          <div class="flex-1">
+            <h4 class="text-base/7 font-semibold text-blue-900 dark:text-blue-300">Work in Progress</h4>
+            <p class="mt-1 text-sm/6 text-blue-700 dark:text-blue-200">
+              This settings section is currently under development and provided for reference and design feedback only. Changes made here will not be saved.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 class="text-lg font-semibold text-white mb-4">Storage Settings</h3>
+        <p class="text-gray-300 mb-6">Configure file storage and backup settings.</p>
+      </div>
+      
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-300 mb-2">Max File Size (MB)</label>
+            <input 
+              type="number" 
+              name="maxFileSize"
+              value="${settings?.maxFileSize || 10}"
+              min="1"
+              max="100"
+              class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          
+          <div>
+            <label class="block text-sm font-medium text-gray-300 mb-2">Storage Provider</label>
+            <select 
+              name="storageProvider"
+              class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="local" ${settings?.storageProvider === "local" ? "selected" : ""}>Local Storage</option>
+              <option value="cloudflare" ${settings?.storageProvider === "cloudflare" ? "selected" : ""}>Cloudflare R2</option>
+              <option value="s3" ${settings?.storageProvider === "s3" ? "selected" : ""}>Amazon S3</option>
+            </select>
+          </div>
+          
+          <div>
+            <label class="block text-sm font-medium text-gray-300 mb-2">Backup Frequency</label>
+            <select 
+              name="backupFrequency"
+              class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              <option value="daily" ${settings?.backupFrequency === "daily" ? "selected" : ""}>Daily</option>
+              <option value="weekly" ${settings?.backupFrequency === "weekly" ? "selected" : ""}>Weekly</option>
+              <option value="monthly" ${settings?.backupFrequency === "monthly" ? "selected" : ""}>Monthly</option>
+            </select>
+          </div>
+        </div>
+        
+        <div class="space-y-4">
+          <div>
+            <label class="block text-sm font-medium text-gray-300 mb-2">Allowed File Types</label>
+            <textarea 
+              name="allowedFileTypes"
+              rows="3"
+              class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              placeholder="jpg, jpeg, png, gif, pdf, docx"
+            >${settings?.allowedFileTypes?.join(", ") || "jpg, jpeg, png, gif, pdf, docx"}</textarea>
+          </div>
+          
+          <div>
+            <label class="block text-sm font-medium text-gray-300 mb-2">Backup Retention (days)</label>
+            <input 
+              type="number" 
+              name="retentionPeriod"
+              value="${settings?.retentionPeriod || 30}"
+              min="7"
+              max="365"
+              class="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          
+          <div class="p-4 bg-green-500/20 border border-green-500/30 rounded-lg">
+            <div class="flex items-start space-x-3">
+              <svg class="w-5 h-5 text-green-400 mt-0.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"/>
+              </svg>
+              <div>
+                <h5 class="text-sm font-medium text-green-300">Storage Status</h5>
+                <p class="text-xs text-green-200 mt-1">
+                  Current usage: 2.4 GB / 10 GB available
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}
+function renderMigrationSettings(settings) {
+  return `
+    <div class="space-y-6">
+      <div>
+        <h3 class="text-lg font-semibold text-white mb-4">Database Migrations</h3>
+        <p class="text-gray-300 mb-6">View and manage database migrations to keep your schema up to date.</p>
+      </div>
+      
+      <!-- Migration Status Overview -->
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+        <div class="backdrop-blur-md bg-blue-500/20 rounded-lg border border-blue-500/30 p-4">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm text-blue-300">Total Migrations</p>
+              <p id="total-migrations" class="text-2xl font-bold text-white">${settings?.totalMigrations || "0"}</p>
+            </div>
+            <svg class="w-8 h-8 text-blue-400" 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"/>
+            </svg>
+          </div>
+        </div>
+        
+        <div class="backdrop-blur-md bg-green-500/20 rounded-lg border border-green-500/30 p-4">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm text-green-300">Applied</p>
+              <p id="applied-migrations" class="text-2xl font-bold text-white">${settings?.appliedMigrations || "0"}</p>
+            </div>
+            <svg class="w-8 h-8 text-green-400" 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"/>
+            </svg>
+          </div>
+        </div>
+        
+        <div class="backdrop-blur-md bg-orange-500/20 rounded-lg border border-orange-500/30 p-4">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm text-orange-300">Pending</p>
+              <p id="pending-migrations" class="text-2xl font-bold text-white">${settings?.pendingMigrations || "0"}</p>
+            </div>
+            <svg class="w-8 h-8 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <!-- Migration Actions -->
+      <div class="flex items-center space-x-4 mb-6">
+        <button 
+          onclick="window.refreshMigrationStatus()"
+          class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors"
+        >
+          <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+          </svg>
+          Refresh Status
+        </button>
+        
+        <button 
+          onclick="window.runPendingMigrations()"
+          id="run-migrations-btn"
+          class="inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-lg transition-colors"
+          ${(settings?.pendingMigrations || 0) === 0 ? "disabled" : ""}
+        >
+          <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h1.586a1 1 0 01.707.293l2.414 2.414a1 1 0 00.707.293H15M9 10v4.586a1 1 0 00.293.707l2.414 2.414a1 1 0 00.707.293H15M9 10V9a2 2 0 012-2h2a2 2 0 012 2v1"/>
+          </svg>
+          Run Pending
+        </button>
+
+        <button 
+          onclick="window.validateSchema()" 
+          class="inline-flex items-center px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white text-sm font-medium rounded-lg transition-colors"
+        >
+          <svg class="w-4 h-4 mr-2" 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"/>
+          </svg>
+          Validate Schema
+        </button>
+      </div>
+
+      <!-- Migrations List -->
+      <div class="backdrop-blur-md bg-white/10 rounded-lg border border-white/20 overflow-hidden">
+        <div class="px-6 py-4 border-b border-white/10">
+          <h4 class="text-lg font-medium text-white">Migration History</h4>
+          <p class="text-sm text-gray-300 mt-1">List of all available database migrations</p>
+        </div>
+        
+        <div id="migrations-list" class="divide-y divide-white/10">
+          <div class="px-6 py-8 text-center">
+            <svg class="w-12 h-12 text-gray-400 mx-auto mb-4" 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"/>
+            </svg>
+            <p class="text-gray-300">Loading migration status...</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <script>
+      // Load migration status when tab becomes active
+      if (typeof refreshMigrationStatus === 'undefined') {
+        window.refreshMigrationStatus = async function() {
+          try {
+            const response = await fetch('/admin/api/migrations/status');
+            const result = await response.json();
+            
+            if (result.success) {
+              updateMigrationUI(result.data);
+            } else {
+              console.error('Failed to refresh migration status');
+            }
+          } catch (error) {
+            console.error('Error loading migration status:', error);
+          }
+        };
+
+        window.runPendingMigrations = async function() {
+          const btn = document.getElementById('run-migrations-btn');
+          if (!btn || btn.disabled) return;
+
+          showConfirmDialog('run-migrations-confirm');
+        };
+
+        window.performRunMigrations = async function() {
+          const btn = document.getElementById('run-migrations-btn');
+          if (!btn) return;
+
+          btn.disabled = true;
+          btn.innerHTML = 'Running...';
+
+          try {
+            const response = await fetch('/admin/api/migrations/run', {
+              method: 'POST'
+            });
+            const result = await response.json();
+
+            if (result.success) {
+              alert(result.message);
+              setTimeout(() => window.refreshMigrationStatus(), 1000);
+            } else {
+              alert(result.error || 'Failed to run migrations');
+            }
+          } catch (error) {
+            alert('Error running migrations');
+          } finally {
+            btn.disabled = false;
+            btn.innerHTML = 'Run Pending';
+          }
+        };
+
+        window.validateSchema = async function() {
+          try {
+            const response = await fetch('/admin/api/migrations/validate');
+            const result = await response.json();
+            
+            if (result.success) {
+              if (result.data.valid) {
+                alert('Database schema is valid');
+              } else {
+                alert(\`Schema validation failed: \${result.data.issues.join(', ')}\`);
+              }
+            } else {
+              alert('Failed to validate schema');
+            }
+          } catch (error) {
+            alert('Error validating schema');
+          }
+        };
+
+        window.updateMigrationUI = function(data) {
+          const totalEl = document.getElementById('total-migrations');
+          const appliedEl = document.getElementById('applied-migrations');
+          const pendingEl = document.getElementById('pending-migrations');
+          
+          if (totalEl) totalEl.textContent = data.totalMigrations;
+          if (appliedEl) appliedEl.textContent = data.appliedMigrations;
+          if (pendingEl) pendingEl.textContent = data.pendingMigrations;
+          
+          const runBtn = document.getElementById('run-migrations-btn');
+          if (runBtn) {
+            runBtn.disabled = data.pendingMigrations === 0;
+          }
+          
+          // Update migrations list
+          const listContainer = document.getElementById('migrations-list');
+          if (listContainer && data.migrations && data.migrations.length > 0) {
+            listContainer.innerHTML = data.migrations.map(migration => \`
+              <div class="px-6 py-4 flex items-center justify-between">
+                <div class="flex-1">
+                  <div class="flex items-center space-x-3">
+                    <div class="flex-shrink-0">
+                      \${migration.applied 
+                        ? '<svg class="w-5 h-5 text-green-400" 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"/></svg>'
+                        : '<svg class="w-5 h-5 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>'
+                      }
+                    </div>
+                    <div>
+                      <h5 class="text-white font-medium">\${migration.name}</h5>
+                      <p class="text-sm text-gray-300">\${migration.filename}</p>
+                      \${migration.description ? \`<p class="text-xs text-gray-400 mt-1">\${migration.description}</p>\` : ''}
+                    </div>
+                  </div>
+                </div>
+                
+                <div class="flex items-center space-x-4 text-sm">
+                  \${migration.size ? \`<span class="text-gray-400">\${(migration.size / 1024).toFixed(1)} KB</span>\` : ''}
+                  <span class="px-2 py-1 rounded-full text-xs font-medium \${
+                    migration.applied 
+                      ? 'bg-green-100 text-green-800' 
+                      : 'bg-orange-100 text-orange-800'
+                  }">
+                    \${migration.applied ? 'Applied' : 'Pending'}
+                  </span>
+                  \${migration.appliedAt ? \`<span class="text-gray-400">\${new Date(migration.appliedAt).toLocaleDateString()}</span>\` : ''}
+                </div>
+              </div>
+            \`).join('');
+          }
+        };
+      }
+      
+      // Auto-load when tab becomes active
+      if (currentTab === 'migrations') {
+        setTimeout(refreshMigrationStatus, 500);
+      }
+    </script>
+  `;
+}
+function renderDatabaseToolsSettings(settings) {
+  return `
+    <div class="space-y-6">
+      <div>
+        <h3 class="text-lg/7 font-semibold text-zinc-950 dark:text-white">Database Tools</h3>
+        <p class="mt-1 text-sm/6 text-zinc-500 dark:text-zinc-400">Manage database operations including backup, restore, and maintenance.</p>
+      </div>
+
+      <!-- Database Statistics -->
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
+        <div class="rounded-lg bg-white dark:bg-white/5 p-6 ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm/6 font-medium text-zinc-500 dark:text-zinc-400">Total Tables</p>
+              <p id="total-tables" class="mt-2 text-3xl/8 font-semibold text-zinc-950 dark:text-white">${settings?.totalTables || "0"}</p>
+            </div>
+            <div class="rounded-lg bg-indigo-500/10 p-3">
+              <svg class="w-8 h-8 text-indigo-600 dark:text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        <div class="rounded-lg bg-white dark:bg-white/5 p-6 ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm/6 font-medium text-zinc-500 dark:text-zinc-400">Total Rows</p>
+              <p id="total-rows" class="mt-2 text-3xl/8 font-semibold text-zinc-950 dark:text-white">${settings?.totalRows?.toLocaleString() || "0"}</p>
+            </div>
+            <div class="rounded-lg bg-green-500/10 p-3">
+              <svg class="w-8 h-8 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"/>
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Database Operations -->
+      <div class="space-y-4">
+        <!-- Safe Operations -->
+        <div class="rounded-lg bg-white dark:bg-white/5 p-6 ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10">
+          <h4 class="text-base/7 font-semibold text-zinc-950 dark:text-white mb-4">Safe Operations</h4>
+          <div class="flex flex-wrap gap-3">
+            <button
+              onclick="window.refreshDatabaseStats()"
+              class="inline-flex items-center justify-center rounded-lg bg-white dark:bg-zinc-800 px-3.5 py-2.5 text-sm font-semibold text-zinc-950 dark:text-white ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors shadow-sm"
+            >
+              <svg class="-ml-0.5 mr-1.5 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
+              </svg>
+              Refresh Stats
+            </button>
+
+            <button
+              onclick="window.createDatabaseBackup()"
+              id="create-backup-btn"
+              class="inline-flex items-center justify-center rounded-lg bg-indigo-600 dark:bg-indigo-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-indigo-500 dark:hover:bg-indigo-400 transition-colors shadow-sm"
+            >
+              <svg class="-ml-0.5 mr-1.5 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 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"/>
+              </svg>
+              Create Backup
+            </button>
+
+            <button
+              onclick="window.validateDatabase()"
+              class="inline-flex items-center justify-center rounded-lg bg-green-600 dark:bg-green-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-green-500 dark:hover:bg-green-400 transition-colors shadow-sm"
+            >
+              <svg class="-ml-0.5 mr-1.5 h-5 w-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"/>
+              </svg>
+              Validate Database
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Tables List -->
+      <div class="rounded-lg bg-white dark:bg-white/5 ring-1 ring-inset ring-zinc-950/10 dark:ring-white/10 overflow-hidden">
+        <div class="px-6 py-4 border-b border-zinc-950/10 dark:border-white/10">
+          <h4 class="text-base/7 font-semibold text-zinc-950 dark:text-white">Database Tables</h4>
+          <p class="mt-1 text-sm/6 text-zinc-500 dark:text-zinc-400">Click on a table to view its data</p>
+        </div>
+
+        <div id="tables-list" class="p-6 space-y-2">
+          <div class="text-center py-8">
+            <svg class="w-12 h-12 text-zinc-400 dark:text-zinc-500 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
+            </svg>
+            <p class="text-zinc-500 dark:text-zinc-400">Loading database statistics...</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Danger Zone -->
+      <div class="rounded-lg bg-red-50 dark:bg-red-950/20 p-6 ring-1 ring-inset ring-red-600/20 dark:ring-red-500/30">
+        <div class="flex items-start space-x-3">
+          <svg class="w-6 h-6 text-red-600 dark:text-red-500 mt-0.5 flex-shrink-0" 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-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.268 16.5c-.77.833.192 2.5 1.732 2.5z"/>
+          </svg>
+          <div class="flex-1">
+            <h4 class="text-base/7 font-semibold text-red-900 dark:text-red-400">Danger Zone</h4>
+            <p class="mt-1 text-sm/6 text-red-700 dark:text-red-300">
+              These operations are destructive and cannot be undone.
+              <strong>Your admin account will be preserved</strong>, but all other data will be permanently deleted.
+            </p>
+            <div class="mt-4">
+              <button
+                onclick="window.truncateDatabase()"
+                id="truncate-db-btn"
+                class="inline-flex items-center justify-center rounded-lg bg-red-600 dark:bg-red-500 px-3.5 py-2.5 text-sm font-semibold text-white hover:bg-red-500 dark:hover:bg-red-400 transition-colors shadow-sm"
+              >
+                <svg class="-ml-0.5 mr-1.5 h-5 w-5" 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"/>
+                </svg>
+                Truncate All Data
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+// src/routes/admin-settings.ts
+var adminSettingsRoutes = new Hono();
+function getMockSettings(user) {
+  return {
+    general: {
+      siteName: "SonicJS AI",
+      siteDescription: "A modern headless CMS powered by AI",
+      adminEmail: user?.email || "admin@example.com",
+      timezone: "UTC",
+      language: "en",
+      maintenanceMode: false
+    },
+    appearance: {
+      theme: "dark",
+      primaryColor: "#465FFF",
+      logoUrl: "",
+      favicon: "",
+      customCSS: ""
+    },
+    security: {
+      twoFactorEnabled: false,
+      sessionTimeout: 30,
+      passwordRequirements: {
+        minLength: 8,
+        requireUppercase: true,
+        requireNumbers: true,
+        requireSymbols: false
+      },
+      ipWhitelist: []
+    },
+    notifications: {
+      emailNotifications: true,
+      contentUpdates: true,
+      systemAlerts: true,
+      userRegistrations: false,
+      emailFrequency: "immediate"
+    },
+    storage: {
+      maxFileSize: 10,
+      allowedFileTypes: ["jpg", "jpeg", "png", "gif", "pdf", "docx"],
+      storageProvider: "cloudflare",
+      backupFrequency: "daily",
+      retentionPeriod: 30
+    },
+    migrations: {
+      totalMigrations: 0,
+      appliedMigrations: 0,
+      pendingMigrations: 0,
+      lastApplied: void 0,
+      migrations: []
+    },
+    databaseTools: {
+      totalTables: 0,
+      totalRows: 0,
+      lastBackup: void 0,
+      databaseSize: "0 MB",
+      tables: []
+    }
+  };
+}
+adminSettingsRoutes.get("/settings", (c) => {
+  return c.redirect("/admin/settings/general");
+});
+adminSettingsRoutes.get("/settings/general", (c) => {
+  const user = c.get("user");
+  const pageData = {
+    user: user ? {
+      name: user.email,
+      email: user.email,
+      role: user.role
+    } : void 0,
+    settings: getMockSettings(user),
+    activeTab: "general",
+    version: c.get("appVersion")
+  };
+  return c.html(renderSettingsPage(pageData));
+});
+adminSettingsRoutes.get("/settings/appearance", (c) => {
+  const user = c.get("user");
+  const pageData = {
+    user: user ? {
+      name: user.email,
+      email: user.email,
+      role: user.role
+    } : void 0,
+    settings: getMockSettings(user),
+    activeTab: "appearance",
+    version: c.get("appVersion")
+  };
+  return c.html(renderSettingsPage(pageData));
+});
+adminSettingsRoutes.get("/settings/security", (c) => {
+  const user = c.get("user");
+  const pageData = {
+    user: user ? {
+      name: user.email,
+      email: user.email,
+      role: user.role
+    } : void 0,
+    settings: getMockSettings(user),
+    activeTab: "security",
+    version: c.get("appVersion")
+  };
+  return c.html(renderSettingsPage(pageData));
+});
+adminSettingsRoutes.get("/settings/notifications", (c) => {
+  const user = c.get("user");
+  const pageData = {
+    user: user ? {
+      name: user.email,
+      email: user.email,
+      role: user.role
+    } : void 0,
+    settings: getMockSettings(user),
+    activeTab: "notifications",
+    version: c.get("appVersion")
+  };
+  return c.html(renderSettingsPage(pageData));
+});
+adminSettingsRoutes.get("/settings/storage", (c) => {
+  const user = c.get("user");
+  const pageData = {
+    user: user ? {
+      name: user.email,
+      email: user.email,
+      role: user.role
+    } : void 0,
+    settings: getMockSettings(user),
+    activeTab: "storage",
+    version: c.get("appVersion")
+  };
+  return c.html(renderSettingsPage(pageData));
+});
+adminSettingsRoutes.get("/settings/migrations", (c) => {
+  const user = c.get("user");
+  const pageData = {
+    user: user ? {
+      name: user.email,
+      email: user.email,
+      role: user.role
+    } : void 0,
+    settings: getMockSettings(user),
+    activeTab: "migrations",
+    version: c.get("appVersion")
+  };
+  return c.html(renderSettingsPage(pageData));
+});
+adminSettingsRoutes.get("/settings/database-tools", (c) => {
+  const user = c.get("user");
+  const pageData = {
+    user: user ? {
+      name: user.email,
+      email: user.email,
+      role: user.role
+    } : void 0,
+    settings: getMockSettings(user),
+    activeTab: "database-tools",
+    version: c.get("appVersion")
+  };
+  return c.html(renderSettingsPage(pageData));
+});
+adminSettingsRoutes.get("/api/migrations/status", async (c) => {
+  try {
+    const db = c.env.DB;
+    const migrationService = new MigrationService(db);
+    const status = await migrationService.getMigrationStatus();
+    return c.json({
+      success: true,
+      data: status
+    });
+  } catch (error) {
+    console.error("Error fetching migration status:", error);
+    return c.json({
+      success: false,
+      error: "Failed to fetch migration status"
+    }, 500);
+  }
+});
+adminSettingsRoutes.post("/api/migrations/run", async (c) => {
+  try {
+    const user = c.get("user");
+    if (!user || user.role !== "admin") {
+      return c.json({
+        success: false,
+        error: "Unauthorized. Admin access required."
+      }, 403);
+    }
+    const db = c.env.DB;
+    const migrationService = new MigrationService(db);
+    const result = await migrationService.runPendingMigrations();
+    return c.json({
+      success: result.success,
+      message: result.message,
+      applied: result.applied
+    });
+  } catch (error) {
+    console.error("Error running migrations:", error);
+    return c.json({
+      success: false,
+      error: "Failed to run migrations"
+    }, 500);
+  }
+});
+adminSettingsRoutes.get("/api/migrations/validate", async (c) => {
+  try {
+    const db = c.env.DB;
+    const migrationService = new MigrationService(db);
+    const validation = await migrationService.validateSchema();
+    return c.json({
+      success: true,
+      data: validation
+    });
+  } catch (error) {
+    console.error("Error validating schema:", error);
+    return c.json({
+      success: false,
+      error: "Failed to validate schema"
+    }, 500);
+  }
+});
+adminSettingsRoutes.post("/settings", async (c) => {
+  try {
+    const formData = await c.req.formData();
+    return c.html(html`
+      <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded">
+        Settings saved successfully!
+        <script>
+          setTimeout(() => {
+            showNotification('Settings saved successfully!', 'success');
+          }, 100);
+        </script>
+      </div>
+    `);
+  } catch (error) {
+    console.error("Error saving settings:", error);
+    return c.html(html`
+      <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
+        Failed to save settings. Please try again.
+      </div>
+    `);
+  }
+});
+
 // src/routes/index.ts
 var ROUTES_INFO = {
   message: "Core routes available",
@@ -15772,12 +19799,15 @@ var ROUTES_INFO = {
     "adminCheckboxRoutes",
     "adminFAQRoutes",
     "adminTestimonialsRoutes",
-    "adminCodeExamplesRoutes"
+    "adminCodeExamplesRoutes",
+    "adminDashboardRoutes",
+    "adminCollectionsRoutes",
+    "adminSettingsRoutes"
   ],
   status: "Core package routes ready",
   reference: "https://github.com/sonicjs/sonicjs"
 };
 
-export { ROUTES_INFO, adminCheckboxRoutes, adminDesignRoutes, adminLogsRoutes, adminMediaRoutes, adminPluginRoutes, admin_api_default, admin_code_examples_default, admin_content_default, admin_faq_default, admin_testimonials_default, api_content_crud_default, api_default, api_media_default, api_system_default, auth_default, userRoutes };
-//# sourceMappingURL=chunk-JETM2U2D.js.map
-//# sourceMappingURL=chunk-JETM2U2D.js.map
+export { ROUTES_INFO, adminCheckboxRoutes, adminCollectionsRoutes, adminDesignRoutes, adminLogsRoutes, adminMediaRoutes, adminPluginRoutes, adminSettingsRoutes, admin_api_default, admin_code_examples_default, admin_content_default, admin_faq_default, admin_testimonials_default, api_content_crud_default, api_default, api_media_default, api_system_default, auth_default, router, userRoutes };
+//# sourceMappingURL=chunk-QSF34IYQ.js.map
+//# sourceMappingURL=chunk-QSF34IYQ.js.map