npm - @intranefr/superbackend - Versions diffs - 1.4.3 - Mend

@intranefr/superbackend 1.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (188) hide show

package/.commiat +4 -0
package/.env.example +47 -0
package/README.md +110 -0
package/index.js +94 -0
package/package.json +67 -0
package/public/css/styles.css +139 -0
package/public/js/animations.js +41 -0
package/sdk/error-tracking/browser/package.json +16 -0
package/sdk/error-tracking/browser/src/core.js +270 -0
package/sdk/error-tracking/browser/src/embed.js +18 -0
package/sdk/error-tracking/browser/src/index.js +1 -0
package/server.js +5 -0
package/src/admin/endpointRegistry.js +300 -0
package/src/controllers/admin.controller.js +321 -0
package/src/controllers/adminAssets.controller.js +530 -0
package/src/controllers/adminAssetsStorage.controller.js +260 -0
package/src/controllers/adminEjsVirtual.controller.js +354 -0
package/src/controllers/adminFeatureFlags.controller.js +155 -0
package/src/controllers/adminHeadless.controller.js +1071 -0
package/src/controllers/adminI18n.controller.js +604 -0
package/src/controllers/adminJsonConfigs.controller.js +97 -0
package/src/controllers/adminLlm.controller.js +273 -0
package/src/controllers/adminMigration.controller.js +257 -0
package/src/controllers/adminSeoConfig.controller.js +515 -0
package/src/controllers/adminStats.controller.js +121 -0
package/src/controllers/adminUploadNamespaces.controller.js +208 -0
package/src/controllers/assets.controller.js +248 -0
package/src/controllers/auth.controller.js +93 -0
package/src/controllers/billing.controller.js +223 -0
package/src/controllers/featureFlags.controller.js +35 -0
package/src/controllers/forms.controller.js +217 -0
package/src/controllers/globalSettings.controller.js +252 -0
package/src/controllers/headlessCrud.controller.js +126 -0
package/src/controllers/i18n.controller.js +12 -0
package/src/controllers/invite.controller.js +249 -0
package/src/controllers/jsonConfigs.controller.js +19 -0
package/src/controllers/metrics.controller.js +149 -0
package/src/controllers/notificationAdmin.controller.js +264 -0
package/src/controllers/notifications.controller.js +131 -0
package/src/controllers/org.controller.js +357 -0
package/src/controllers/orgAdmin.controller.js +491 -0
package/src/controllers/stripeAdmin.controller.js +410 -0
package/src/controllers/user.controller.js +361 -0
package/src/controllers/userAdmin.controller.js +277 -0
package/src/controllers/waitingList.controller.js +167 -0
package/src/controllers/webhook.controller.js +200 -0
package/src/middleware/auth.js +66 -0
package/src/middleware/errorCapture.js +170 -0
package/src/middleware/headlessApiTokenAuth.js +57 -0
package/src/middleware/org.js +108 -0
package/src/middleware.js +901 -0
package/src/models/ActionEvent.js +31 -0
package/src/models/ActivityLog.js +41 -0
package/src/models/Asset.js +84 -0
package/src/models/AuditEvent.js +93 -0
package/src/models/EmailLog.js +28 -0
package/src/models/ErrorAggregate.js +72 -0
package/src/models/FormSubmission.js +41 -0
package/src/models/GlobalSetting.js +38 -0
package/src/models/HeadlessApiToken.js +24 -0
package/src/models/HeadlessModelDefinition.js +41 -0
package/src/models/I18nEntry.js +77 -0
package/src/models/I18nLocale.js +33 -0
package/src/models/Invite.js +70 -0
package/src/models/JsonConfig.js +46 -0
package/src/models/Notification.js +60 -0
package/src/models/Organization.js +57 -0
package/src/models/OrganizationMember.js +43 -0
package/src/models/StripeCatalogItem.js +77 -0
package/src/models/StripeWebhookEvent.js +57 -0
package/src/models/User.js +89 -0
package/src/models/VirtualEjsFile.js +60 -0
package/src/models/VirtualEjsFileVersion.js +43 -0
package/src/models/VirtualEjsGroupChange.js +32 -0
package/src/models/WaitingList.js +41 -0
package/src/models/Webhook.js +63 -0
package/src/models/Workflow.js +29 -0
package/src/models/WorkflowExecution.js +12 -0
package/src/routes/admin.routes.js +26 -0
package/src/routes/adminAssets.routes.js +28 -0
package/src/routes/adminAssetsStorage.routes.js +13 -0
package/src/routes/adminAudit.routes.js +196 -0
package/src/routes/adminEjsVirtual.routes.js +17 -0
package/src/routes/adminErrors.routes.js +164 -0
package/src/routes/adminFeatureFlags.routes.js +12 -0
package/src/routes/adminHeadless.routes.js +38 -0
package/src/routes/adminI18n.routes.js +22 -0
package/src/routes/adminJsonConfigs.routes.js +15 -0
package/src/routes/adminLlm.routes.js +12 -0
package/src/routes/adminMigration.routes.js +81 -0
package/src/routes/adminSeoConfig.routes.js +20 -0
package/src/routes/adminUploadNamespaces.routes.js +13 -0
package/src/routes/assets.routes.js +21 -0
package/src/routes/auth.routes.js +12 -0
package/src/routes/billing.routes.js +11 -0
package/src/routes/errorTracking.routes.js +31 -0
package/src/routes/featureFlags.routes.js +9 -0
package/src/routes/forms.routes.js +9 -0
package/src/routes/formsAdmin.routes.js +13 -0
package/src/routes/globalSettings.routes.js +18 -0
package/src/routes/headless.routes.js +15 -0
package/src/routes/i18n.routes.js +8 -0
package/src/routes/invite.routes.js +9 -0
package/src/routes/jsonConfigs.routes.js +8 -0
package/src/routes/log.routes.js +111 -0
package/src/routes/metrics.routes.js +9 -0
package/src/routes/notificationAdmin.routes.js +15 -0
package/src/routes/notifications.routes.js +12 -0
package/src/routes/org.routes.js +31 -0
package/src/routes/orgAdmin.routes.js +20 -0
package/src/routes/publicAssets.routes.js +7 -0
package/src/routes/stripeAdmin.routes.js +20 -0
package/src/routes/user.routes.js +22 -0
package/src/routes/userAdmin.routes.js +15 -0
package/src/routes/waitingList.routes.js +13 -0
package/src/routes/waitingListAdmin.routes.js +9 -0
package/src/routes/webhook.routes.js +32 -0
package/src/routes/workflowWebhook.routes.js +54 -0
package/src/routes/workflows.routes.js +110 -0
package/src/services/assets.service.js +110 -0
package/src/services/audit.service.js +62 -0
package/src/services/auditLogger.js +165 -0
package/src/services/ejsVirtual.service.js +614 -0
package/src/services/email.service.js +351 -0
package/src/services/errorLogger.js +221 -0
package/src/services/featureFlags.service.js +202 -0
package/src/services/forms.service.js +214 -0
package/src/services/globalSettings.service.js +49 -0
package/src/services/headlessApiTokens.service.js +158 -0
package/src/services/headlessCrypto.service.js +31 -0
package/src/services/headlessModels.service.js +356 -0
package/src/services/i18n.service.js +314 -0
package/src/services/i18nInferredKeys.service.js +337 -0
package/src/services/jsonConfigs.service.js +392 -0
package/src/services/llm.service.js +749 -0
package/src/services/migration.service.js +581 -0
package/src/services/migrationAssets/fsLocal.js +58 -0
package/src/services/migrationAssets/index.js +134 -0
package/src/services/migrationAssets/s3.js +75 -0
package/src/services/migrationAssets/sftp.js +92 -0
package/src/services/notification.service.js +212 -0
package/src/services/objectStorage.service.js +514 -0
package/src/services/seoConfig.service.js +402 -0
package/src/services/storage.js +150 -0
package/src/services/stripe.service.js +185 -0
package/src/services/stripeHelper.service.js +264 -0
package/src/services/uploadNamespaces.service.js +326 -0
package/src/services/webhook.service.js +157 -0
package/src/services/workflow.service.js +271 -0
package/src/utils/asyncHandler.js +5 -0
package/src/utils/encryption.js +80 -0
package/src/utils/jwt.js +40 -0
package/src/utils/orgRoles.js +156 -0
package/src/utils/validation.js +26 -0
package/src/utils/webhookRetry.js +93 -0
package/views/admin-assets.ejs +444 -0
package/views/admin-audit.ejs +283 -0
package/views/admin-coolify-deploy.ejs +207 -0
package/views/admin-dashboard-home.ejs +291 -0
package/views/admin-dashboard.ejs +397 -0
package/views/admin-ejs-virtual.ejs +280 -0
package/views/admin-errors.ejs +368 -0
package/views/admin-feature-flags.ejs +390 -0
package/views/admin-forms.ejs +526 -0
package/views/admin-global-settings.ejs +436 -0
package/views/admin-headless.ejs +2020 -0
package/views/admin-i18n-locales.ejs +221 -0
package/views/admin-i18n.ejs +728 -0
package/views/admin-json-configs.ejs +410 -0
package/views/admin-llm.ejs +884 -0
package/views/admin-metrics.ejs +274 -0
package/views/admin-migration.ejs +814 -0
package/views/admin-notifications.ejs +430 -0
package/views/admin-organizations.ejs +984 -0
package/views/admin-seo-config.ejs +673 -0
package/views/admin-stripe-pricing.ejs +558 -0
package/views/admin-test.ejs +342 -0
package/views/admin-users.ejs +452 -0
package/views/admin-waiting-list.ejs +547 -0
package/views/admin-webhooks.ejs +329 -0
package/views/admin-workflows.ejs +310 -0
package/views/partials/admin-assets-script.ejs +2022 -0
package/views/partials/admin-test-sidebar.ejs +14 -0
package/views/partials/dashboard/nav-items.ejs +66 -0
package/views/partials/dashboard/palette.ejs +63 -0
package/views/partials/dashboard/sidebar.ejs +21 -0
package/views/partials/dashboard/tab-bar.ejs +26 -0
package/views/partials/footer.ejs +3 -0

package/views/admin-dashboard-home.ejs ADDED Viewed

@@ -0,0 +1,291 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>SaaSBackend Command Center</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css">
+  <style>
+    .stat-card { @apply bg-white p-5 rounded-xl border border-gray-200 shadow-sm transition-all hover:shadow-md flex flex-col justify-between; }
+    .category-title { @apply text-xs font-semibold text-gray-400 uppercase tracking-wider mb-4 flex items-center gap-2; }
+    .chart-container { position: relative; height: 250px; width: 100%; }
+    .status-badge { @apply px-2 py-0.5 rounded-full text-[10px] font-bold uppercase; }
+  </style>
+</head>
+<body class="bg-gray-50 min-h-screen p-6">
+  <div id="app" class="max-w-7xl mx-auto space-y-8">
+    <!-- Header -->
+    <div class="flex justify-between items-center">
+      <div>
+        <h1 class="text-2xl font-bold text-gray-900">Command Center</h1>
+        <p class="text-sm text-gray-500">System-wide health and growth metrics.</p>
+      </div>
+      <div class="flex items-center gap-3">
+        <div id="system-health-badge" class="flex items-center gap-2 text-xs font-semibold"></div>
+        <button onclick="fetchStats()" class="p-2 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors shadow-sm">
+          <i class="ti ti-refresh text-gray-600"></i>
+        </button>
+      </div>
+    </div>
+    <!-- Categorized Stats Grid -->
+    <div class="space-y-8">
+      <!-- Section: User Management -->
+      <div>
+        <h2 class="category-title"><i class="ti ti-users"></i> User Management</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <div class="stat-card">
+            <span class="text-sm text-gray-500">Total Users</span>
+            <div class="flex items-end justify-between mt-2">
+              <h3 id="users-total" class="text-2xl font-bold">-</h3>
+              <span id="users-new" class="text-xs font-medium text-green-600 bg-green-50 px-2 py-1 rounded">+0 today</span>
+            </div>
+          </div>
+          <div class="stat-card">
+            <span class="text-sm text-gray-500">Organizations</span>
+            <h3 id="users-orgs" class="text-2xl font-bold mt-2">-</h3>
+          </div>
+          <div class="stat-card">
+            <span class="text-sm text-gray-500">Active Invites</span>
+            <h3 id="users-invites" class="text-2xl font-bold mt-2">-</h3>
+          </div>
+          <div class="stat-card">
+            <span class="text-sm text-gray-500">Conversion (est)</span>
+            <h3 class="text-2xl font-bold mt-2 text-blue-600">84.2%</h3>
+          </div>
+        </div>
+      </div>
+      <!-- Section: Monitoring & Health -->
+      <div>
+        <h2 class="category-title"><i class="ti ti-activity"></i> System Monitoring</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <div class="stat-card border-red-100 bg-red-50/10">
+            <span class="text-sm text-gray-500">Unresolved Errors</span>
+            <h3 id="mon-errors" class="text-2xl font-bold text-red-600 mt-2">-</h3>
+          </div>
+          <div class="stat-card">
+            <span class="text-sm text-gray-500">Audit Events (24h)</span>
+            <h3 id="mon-audit" class="text-2xl font-bold mt-2">-</h3>
+          </div>
+          <div class="stat-card">
+            <span class="text-sm text-gray-500">Emails Sent</span>
+            <h3 id="mon-emails-sent" class="text-2xl font-bold text-green-600 mt-2">-</h3>
+          </div>
+          <div class="stat-card">
+            <span class="text-sm text-gray-500">Emails Failed</span>
+            <h3 id="mon-emails-failed" class="text-2xl font-bold text-orange-600 mt-2">-</h3>
+          </div>
+        </div>
+      </div>
+      <!-- Section: Content & Configuration -->
+      <div>
+        <h2 class="category-title"><i class="ti ti-folder"></i> Content & Configuration</h2>
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+          <div class="stat-card">
+            <span class="text-sm text-gray-500">Total Assets</span>
+            <h3 id="cont-assets" class="text-2xl font-bold mt-2">-</h3>
+          </div>
+          <div class="stat-card">
+            <span class="text-sm text-gray-500">Virtual EJS Files</span>
+            <h3 id="cont-ejs" class="text-2xl font-bold mt-2">-</h3>
+          </div>
+          <div class="stat-card">
+            <span class="text-sm text-gray-500">JSON Configs</span>
+            <h3 id="cont-json" class="text-2xl font-bold mt-2">-</h3>
+          </div>
+          <div class="stat-card">
+            <span class="text-sm text-gray-500">Active Plans</span>
+            <h3 id="saas-plans" class="text-2xl font-bold mt-2">-</h3>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Charts Row -->
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <div class="lg:col-span-2 stat-card">
+        <h3 class="text-sm font-bold text-gray-900 mb-6">User Growth & Activity (7d)</h3>
+        <div class="chart-container">
+          <canvas id="growthChart"></canvas>
+        </div>
+      </div>
+      <div class="stat-card">
+        <h3 class="text-sm font-bold text-gray-900 mb-6">Email Delivery Trend</h3>
+        <div class="chart-container">
+          <canvas id="emailChart"></canvas>
+        </div>
+      </div>
+    </div>
+    <!-- Recent Activity Table -->
+    <div class="stat-card overflow-hidden">
+      <div class="flex items-center justify-between mb-4">
+        <h3 class="text-sm font-bold text-gray-900">Latest Audit Logs</h3>
+        <a href="#" onclick="parent.window.app.openTab({id:'audit', label:'Audit Logs', path:'/admin/audit', icon:'ti-history'})" class="text-xs text-blue-600 hover:underline">View All</a>
+      </div>
+      <div class="overflow-x-auto">
+        <table class="w-full text-left">
+          <thead class="bg-gray-50 text-[10px] font-bold text-gray-400 uppercase">
+            <tr>
+              <th class="px-4 py-2">Action</th>
+              <th class="px-4 py-2">Actor</th>
+              <th class="px-4 py-2">Details</th>
+              <th class="px-4 py-2">Time</th>
+            </tr>
+          </thead>
+          <tbody id="activity-list" class="divide-y divide-gray-100">
+            <!-- Dynamically populated -->
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <%- include('partials/footer') %>
+  </div>
+  <script>
+    let growthChart, emailChart;
+    async function fetchStats() {
+      try {
+        const res = await fetch('<%= baseUrl %>/api/admin/stats/overview');
+        const data = await res.json();
+        updateUI(data);
+      } catch (err) {
+        console.error('Failed to load stats:', err);
+      }
+    }
+    function updateUI(data) {
+      const { categories, recentActivity, timeSeries } = data;
+      const setVal = (id, val) => {
+        const el = document.getElementById(id);
+        if (el) el.innerText = val;
+      };
+      // Update Health Badge
+      const healthBadge = document.getElementById('system-health-badge');
+      if (healthBadge) {
+        const health = categories.monitoring.health;
+        const healthMeta = {
+          healthy: { cls: 'bg-green-100 text-green-700', icon: 'ti ti-heartbeat', label: 'Healthy' },
+          warning: { cls: 'bg-yellow-100 text-yellow-700', icon: 'ti ti-alert-triangle', label: 'Warnings present' },
+          critical: { cls: 'bg-red-100 text-red-700', icon: 'ti ti-flame', label: 'Critical issues' }
+        };
+        const meta = healthMeta[health] || healthMeta.healthy;
+        healthBadge.innerHTML = `<span class="status-badge ${meta.cls}" title="${meta.label}"><i class="${meta.icon}"></i></span>`;
+      }
+      // Update Users
+      setVal('users-total', categories.users.total);
+      setVal('users-new', `+${categories.users.newToday} today`);
+      setVal('users-orgs', categories.users.orgs);
+      setVal('users-invites', categories.users.invites);
+      // Update Monitoring
+      setVal('mon-errors', categories.monitoring.errors);
+      setVal('mon-audit', categories.monitoring.audit24h);
+      setVal('mon-emails-sent', categories.monitoring.emailsSent);
+      setVal('mon-emails-failed', categories.monitoring.emailsFailed);
+      // Update Content
+      setVal('cont-assets', categories.content.assets);
+      setVal('cont-ejs', categories.content.virtualEjs);
+      setVal('saas-workflows', categories.content.workflows || 0);
+      const activityBody = document.getElementById('activity-list');
+      if (activityBody) {
+        activityBody.innerHTML = recentActivity.map(event => `
+          <tr class="text-xs text-gray-700">
+            <td class="px-4 py-3"><span class="font-medium text-gray-900">${event.action}</span></td>
+            <td class="px-4 py-3">${event.actorEmail || 'System'}</td>
+            <td class="px-4 py-3 truncate max-w-[200px] text-gray-400">${event.resourceId || '-'}</td>
+            <td class="px-4 py-3 text-gray-400">${new Date(event.createdAt).toLocaleTimeString()}</td>
+          </tr>
+        `).join('');
+      }
+      // Update Charts
+      updateCharts(timeSeries);
+    }
+    function updateCharts(timeSeries) {
+      const labels = timeSeries.map(d => d.date);
+      // Growth & Activity Chart
+      if (growthChart) growthChart.destroy();
+      growthChart = new Chart(document.getElementById('growthChart'), {
+        type: 'line',
+        data: {
+          labels,
+          datasets: [
+            {
+              label: 'Signups',
+              data: timeSeries.map(d => d.users),
+              borderColor: 'rgb(59, 130, 246)',
+              backgroundColor: 'rgba(59, 130, 246, 0.1)',
+              fill: true,
+              tension: 0.4
+            },
+            {
+              label: 'Activity',
+              data: timeSeries.map(d => d.activity),
+              borderColor: 'rgb(139, 92, 246)',
+              backgroundColor: 'transparent',
+              tension: 0.4
+            }
+          ]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: { legend: { position: 'bottom', labels: { boxWidth: 12, font: { size: 10 } } } },
+          scales: {
+            y: { grid: { display: false } },
+            x: { grid: { display: false } }
+          }
+        }
+      });
+      // Email Delivery Chart
+      if (emailChart) emailChart.destroy();
+      emailChart = new Chart(document.getElementById('emailChart'), {
+        type: 'bar',
+        data: {
+          labels,
+          datasets: [{
+            label: 'Sent Emails',
+            data: timeSeries.map(d => d.emails),
+            backgroundColor: 'rgba(34, 197, 94, 0.8)',
+            borderRadius: 4
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: { legend: { display: false } },
+          scales: {
+            y: { grid: { display: false }, ticks: { stepSize: 1 } },
+            x: { grid: { display: false } }
+          }
+        }
+      });
+    }
+    window.onload = fetchStats;
+  </script>
+<script>
+  window.addEventListener("keydown", (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === "k") {
+      e.preventDefault();
+      window.parent.postMessage({ type: "keydown", ctrlK: true }, "*");
+    }
+  });
+</script>
+</body>
+</html>

package/views/admin-dashboard.ejs ADDED Viewed

@@ -0,0 +1,397 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Superbackend Admin Dashboard</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css">
+    <style>
+        [v-cloak] { display: none; }
+        .sidebar-link.active { @apply bg-blue-50 text-blue-700 border-r-4 border-blue-700; }
+    </style>
+</head>
+<body class="bg-gray-50 overflow-hidden">
+    <div id="app" class="h-screen flex flex-col" v-cloak>
+        <!-- Top Header -->
+        <header class="bg-white border-b border-gray-200 h-16 flex items-center justify-between px-6 shrink-0">
+            <div class="flex items-center gap-4">
+                <i class="ti ti-layout-dashboard text-2xl text-blue-600"></i>
+                <h1 class="text-xl font-bold text-gray-800">
+                    Superbackend <span class="text-xs font-normal text-gray-500 ml-2 align-middle">(saasbackend)</span>
+                </h1>
+            </div>
+            <div class="flex items-center gap-6">
+                <div class="hidden md:flex items-center gap-2 text-xs text-gray-400 bg-gray-50 px-3 py-1.5 rounded-lg border border-gray-200">
+                    <kbd class="px-1.5 py-0.5 bg-white border border-gray-300 rounded shadow-sm font-sans">Ctrl</kbd>
+                    <span>+</span>
+                    <kbd class="px-1.5 py-0.5 bg-white border border-gray-300 rounded shadow-sm font-sans">K</kbd>
+                    <span class="ml-1">to search</span>
+                </div>
+                <div class="flex items-center gap-4">
+                    <span class="text-sm text-gray-500">v1.0.0</span>
+                    <a :href="baseUrl + adminBase + '/api/test'" target="_blank" class="text-sm text-blue-600 hover:underline">API Test</a>
+                </div>
+            </div>
+        </header>
+        <div class="flex-1 flex overflow-hidden">
+            <%- include('partials/dashboard/sidebar') %>
+            <!-- Main Content Area -->
+            <main class="flex-1 flex flex-col overflow-hidden bg-gray-50">
+                <%- include('partials/dashboard/tab-bar') %>
+                <div class="flex-1 relative">
+                    <!-- Iframes -->
+                    <iframe
+                        v-for="tab in tabs"
+                        v-show="activeTabId === tab.id"
+                        :key="tab.id"
+                        :src="baseUrl + tab.path"
+                        class="absolute inset-0 w-full h-full border-none"
+                        :id="'frame-' + tab.id"
+                    ></iframe>
+                    <!-- Empty State -->
+                    <div v-if="tabs.length === 0" class="flex items-center justify-center h-full text-gray-400">
+                        <div class="text-center">
+                            <i class="ti ti-layout-dashboard text-6xl mb-4 opacity-20"></i>
+                            <p class="text-lg font-medium">No open modules</p>
+                            <p class="text-sm opacity-60">Select a module from the sidebar or press Ctrl+K</p>
+                        </div>
+                    </div>
+                </div>
+            </main>
+        </div>
+        <%- include('partials/dashboard/palette') %>
+    </div>
+    <script>
+        // Initialize globals from EJS locals first (must run before nav-items)
+        window.BASE_URL = '<%= baseUrl %>';
+        window.ADMIN_PATH = '<%= adminPath %>';
+    </script>
+    <%- include('partials/dashboard/nav-items') %>
+    <script>
+        const { createApp, ref, computed, nextTick, onMounted, onUnmounted, watch } = Vue;
+        createApp({
+            setup() {
+                const baseUrl = window.BASE_URL;
+                const adminBase = window.ADMIN_PATH || '/admin';
+                const navSections = window.NAV_SECTIONS || [];
+                // Tabs state
+                const tabs = ref([]);
+                const activeTabId = ref(null);
+                // localStorage utilities
+                const STORAGE_KEY = 'adminDashboardTabs';
+                const saveTabsToStorage = () => {
+                    try {
+                        const data = {
+                            tabs: tabs.value,
+                            activeTabId: activeTabId.value
+                        };
+                        localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+                    } catch (error) {
+                        console.warn('Failed to save tabs to localStorage:', error);
+                    }
+                    // Always save to URL as fallback
+                    saveTabsToURL();
+                };
+                const loadTabsFromStorage = () => {
+                    // Try localStorage first
+                    try {
+                        const stored = localStorage.getItem(STORAGE_KEY);
+                        if (stored) {
+                            const data = JSON.parse(stored);
+                            if (data && Array.isArray(data.tabs)) {
+                                // Validate tabs have required fields
+                                const validTabs = data.tabs.filter(tab =>
+                                    tab &&
+                                    typeof tab.id === 'string' &&
+                                    typeof tab.label === 'string' &&
+                                    typeof tab.path === 'string'
+                                );
+                                // Ensure tabs still exist in available modules
+                                const availableModuleIds = allModules.value.map(m => m.id);
+                                const existingTabs = validTabs.filter(tab =>
+                                    availableModuleIds.includes(tab.id)
+                                );
+                                if (existingTabs.length > 0) {
+                                    return {
+                                        tabs: existingTabs,
+                                        activeTabId: existingTabs.some(t => t.id === data.activeTabId)
+                                            ? data.activeTabId
+                                            : (existingTabs.length > 0 ? existingTabs[0].id : null)
+                                    };
+                                }
+                            }
+                        }
+                    } catch (error) {
+                        console.warn('Failed to load tabs from localStorage:', error);
+                    }
+                    // Fallback to URL parameters
+                    return loadTabsFromURL();
+                };
+                // URL utilities for fallback persistence
+                let urlUpdateTimeout = null;
+                const saveTabsToURL = () => {
+                    clearTimeout(urlUpdateTimeout);
+                    urlUpdateTimeout = setTimeout(() => {
+                        try {
+                            const url = new URL(window.location);
+                            if (tabs.value.length > 0) {
+                                const tabIds = tabs.value.map(t => t.id).join(',');
+                                url.searchParams.set('openTabs', tabIds);
+                                if (activeTabId.value) {
+                                    url.searchParams.set('activeTab', activeTabId.value);
+                                }
+                            } else {
+                                url.searchParams.delete('openTabs');
+                                url.searchParams.delete('activeTab');
+                            }
+                            // Update URL without page reload
+                            window.history.replaceState({}, '', url);
+                        } catch (error) {
+                            console.warn('Failed to save tabs to URL:', error);
+                        }
+                    }, 300); // Debounce URL updates
+                };
+                const loadTabsFromURL = () => {
+                    try {
+                        const url = new URL(window.location);
+                        const openTabsParam = url.searchParams.get('openTabs');
+                        const activeTabParam = url.searchParams.get('activeTab');
+                        if (!openTabsParam) return null;
+                        // Parse comma-separated tab IDs
+                        const tabIds = openTabsParam.split(',').filter(id => id.trim());
+                        if (tabIds.length === 0) return null;
+                        // Get available modules
+                        const availableModules = allModules.value;
+                        // Reconstruct full tab objects from IDs
+                        const tabs = tabIds.map(id => {
+                            const module = availableModules.find(m => m.id === id);
+                            if (module) {
+                                return {
+                                    id: module.id,
+                                    label: module.label,
+                                    icon: module.icon,
+                                    path: module.path
+                                };
+                            }
+                            return null;
+                        }).filter(tab => tab !== null);
+                        if (tabs.length === 0) return null;
+                        return {
+                            tabs,
+                            activeTabId: tabs.some(t => t.id === activeTabParam)
+                                ? activeTabParam
+                                : tabs[0].id
+                        };
+                    } catch (error) {
+                        console.warn('Failed to load tabs from URL:', error);
+                        return null;
+                    }
+                };
+                // Palette state
+                const showPalette = ref(false);
+                const paletteQuery = ref('');
+                const paletteCursor = ref(0);
+                const paletteInput = ref(null);
+                // Flattened modules for search
+                const allModules = computed(() => {
+                    const modules = [];
+                    if (Array.isArray(navSections)) {
+                        navSections.forEach(section => {
+                            if (section && Array.isArray(section.items)) {
+                                section.items.forEach(item => {
+                                    modules.push({
+                                        ...item,
+                                        sectionTitle: section.title || 'Other'
+                                    });
+                                });
+                            }
+                        });
+                    }
+                    return modules;
+                });
+                const filteredModules = computed(() => {
+                    const mods = allModules.value;
+                    if (!paletteQuery.value) return mods;
+                    const query = paletteQuery.value.toLowerCase();
+                    return mods.filter(m =>
+                        (m.label && m.label.toLowerCase().includes(query)) ||
+                        (m.sectionTitle && m.sectionTitle.toLowerCase().includes(query))
+                    );
+                });
+                // Tab methods
+                const openTab = (item) => {
+                    if (!item || !item.id) return;
+                    const existing = tabs.value.find(t => t.id === item.id);
+                    if (!existing) {
+                        tabs.value.push({
+                            id: item.id,
+                            label: item.label,
+                            icon: item.icon,
+                            path: item.path
+                        });
+                    }
+                    activeTabId.value = item.id;
+                    saveTabsToStorage();
+                    closePalette();
+                };
+                const closeTab = (id) => {
+                    const index = tabs.value.findIndex(t => t.id === id);
+                    if (index === -1) return;
+                    const wasActive = activeTabId.value === id;
+                    tabs.value.splice(index, 1);
+                    if (wasActive && tabs.value.length > 0) {
+                        const nextTab = tabs.value[Math.min(index, tabs.value.length - 1)];
+                        activeTabId.value = nextTab.id;
+                    } else if (tabs.value.length === 0) {
+                        activeTabId.value = null;
+                    }
+                    saveTabsToStorage();
+                };
+                // Palette methods
+                const togglePalette = () => {
+                    showPalette.value = !showPalette.value;
+                    if (showPalette.value) {
+                        paletteQuery.value = '';
+                        paletteCursor.value = 0;
+                        nextTick(() => {
+                            if (paletteInput.value) paletteInput.value.focus();
+                        });
+                    }
+                };
+                const closePalette = () => {
+                    showPalette.value = false;
+                };
+                const navigatePalette = (dir) => {
+                    const len = filteredModules.value.length;
+                    if (len === 0) return;
+                    paletteCursor.value = (paletteCursor.value + dir + len) % len;
+                    nextTick(() => {
+                        const items = document.querySelectorAll('.palette-item');
+                        const el = items[paletteCursor.value];
+                        if (el) el.scrollIntoView({ block: 'nearest' });
+                    });
+                };
+                const selectPaletteItem = () => {
+                    const item = filteredModules.value[paletteCursor.value];
+                    if (item) openTab(item);
+                };
+                const selectModule = (item) => {
+                    openTab(item);
+                };
+                // Keyboard events
+                const handleKeydown = (e) => {
+                    if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+                        e.preventDefault();
+                        togglePalette();
+                    }
+                };
+                const handleMessage = (e) => {
+                    if (e.data && e.data.type === 'keydown' && e.data.ctrlK) {
+                        togglePalette();
+                    }
+                };
+                onMounted(() => {
+                    window.addEventListener('keydown', handleKeydown);
+                    window.addEventListener('message', handleMessage);
+                    // Load saved tabs from localStorage
+                    const savedState = loadTabsFromStorage();
+                    if (savedState && savedState.tabs.length > 0) {
+                        tabs.value = savedState.tabs;
+                        activeTabId.value = savedState.activeTabId;
+                    } else {
+                        // Open default tab if no saved state
+                        if (allModules.value.length > 0) {
+                            const defaultModule = allModules.value.find(m => m.id === 'overview') || allModules.value[0];
+                            if (defaultModule) openTab(defaultModule);
+                        }
+                    }
+                });
+                // Watch for activeTabId changes (when user clicks on tabs)
+                watch(activeTabId, () => {
+                    saveTabsToStorage();
+                });
+                onUnmounted(() => {
+                    window.removeEventListener('keydown', handleKeydown);
+                    window.removeEventListener('message', handleMessage);
+                });
+                return {
+                    baseUrl,
+                    adminBase,
+                    navSections,
+                    tabs,
+                    activeTabId,
+                    openTab,
+                    closeTab,
+                    showPalette,
+                    paletteQuery,
+                    paletteCursor,
+                    paletteInput,
+                    filteredModules,
+                    togglePalette,
+                    closePalette,
+                    navigatePalette,
+                    selectPaletteItem,
+                    selectModule
+                };
+            }
+        }).mount('#app');
+    </script>
+<script>
+  window.addEventListener("keydown", (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === "k") {
+      e.preventDefault();
+      window.parent.postMessage({ type: "keydown", ctrlK: true }, "*");
+    }
+  });
+</script>
+</body>
+</html>