webspresso 0.0.90 → 0.0.93

package/plugins/admin-panel/index.js

@@ -4,6 +4,8 @@
  * @module plugins/admin-panel
  */
 
+const path = require('path');
+const fs = require('fs');
 const { createAdminUserModel } = require('./admin-user-model');
 const { generateAdminUsersMigration } = require('./migration-template');
 const { createApiHandlers } = require('./api');
@@ -49,6 +51,7 @@ function adminPanelPlugin(options = {}) {
     configure,
     uploadUrl: uploadUrlOption,
     richTextSanitize = true,
+    dataExchange: dataExchangeOption = true,
   } = options;
 
   const adminUsersConfig = typeof adminUsersOption === 'object' ? adminUsersOption : { enabled: adminUsersOption !== false };
@@ -75,22 +78,26 @@ function adminPanelPlugin(options = {}) {
     version: '2.0.0',
     description: 'Modular admin panel for Webspresso with extensions support',
     
-    // CSP requirements for admin panel scripts, styles, and custom page iframe sources
-    // Note: cdn.quilljs.com 301-redirects to cdn.jsdelivr.net; CSP is enforced on the final URL.
+    // CSP requirements for admin panel scripts, styles, and custom page iframe sources (Offline Zero-CDN)
     csp: {
       styleSrc: [
+        "'self'",
+        "'unsafe-inline'",
         'https://cdn.quilljs.com',
         'https://cdn.jsdelivr.net',
         'https://unpkg.com',
         'https://cdn.tailwindcss.com',
       ],
       scriptSrc: [
+        "'self'",
+        "'unsafe-inline'",
+        "'unsafe-eval'",
         'https://cdn.quilljs.com',
         'https://cdn.jsdelivr.net',
         'https://unpkg.com',
         'https://cdn.tailwindcss.com',
       ],
-      connectSrc: ['https://unpkg.com', 'https://cdn.tailwindcss.com', 'https://cdn.jsdelivr.net'],
+      connectSrc: ["'self'", 'https://unpkg.com', 'https://cdn.tailwindcss.com', 'https://cdn.jsdelivr.net'],
       frameSrc: ["'self'", 'data:', 'blob:', 'https:'],
     },
     enabled,
@@ -162,6 +169,15 @@ function adminPanelPlugin(options = {}) {
           /^https:/i.test(String(process.env.BASE_URL || '').trim())
             ? true
             : 'auto';
+        if (process.env.NODE_ENV === 'production') {
+          const warnMsg = '[webspresso:admin] Warning: Admin panel is using default MemoryStore in production. Please configure a persistent session store to prevent memory leaks.';
+          if (typeof process !== 'undefined' && typeof process.emitWarning === 'function') {
+            process.emitWarning(warnMsg, 'SecurityWarning');
+          } else {
+            console.warn(warnMsg);
+          }
+        }
+
         ctx.app.use(session({
           secret,
           resave: false,
@@ -175,6 +191,17 @@ function adminPanelPlugin(options = {}) {
         }));
         ctx.app._webspressoSessionInitialized = true;
       }
+
+      // Auto-register built-in exchange services if enabled and serviceRegistry exists
+      if (enabled && dataExchangeOption !== false && ctx.app && ctx.app.serviceRegistry) {
+        const { createExchangeServices } = require('../../src/services/builtins/exchange');
+        const exchangeServices = createExchangeServices({ db });
+        for (const [name, def] of Object.entries(exchangeServices)) {
+          if (!ctx.app.serviceRegistry.has(name)) {
+            ctx.app.serviceRegistry.register(name, def);
+          }
+        }
+      }
     },
 
     /**
@@ -189,22 +216,24 @@ function adminPanelPlugin(options = {}) {
       const { app } = ctx;
 
       const uploadUrlResolved =
-        uploadUrlOption || app.get('webspresso.uploadPath') || null;
+        uploadUrlOption || (app && typeof app.get === 'function' ? app.get('webspresso.uploadPath') : null);
       if (uploadUrlResolved) {
         registry.configure({ uploadUrl: uploadUrlResolved });
       }
 
       // Check if admin_users table exists (migration run)
-      db.knex.schema.hasTable('admin_users').then((hasAdminTable) => {
-        if (!hasAdminTable) {
-          console.warn(
-            '\n⚠️  [admin-panel] admin_users table not found. Run: webspresso admin:setup\n' +
-            '   Or create the table manually via migration. See: AdminUser model / getMigrationTemplate()\n'
-          );
-        }
-      }).catch((err) => {
-        console.warn('[admin-panel] Could not check admin_users table:', err.message);
-      });
+      if (db?.knex?.schema?.hasTable) {
+        db.knex.schema.hasTable('admin_users').then((hasAdminTable) => {
+          if (!hasAdminTable) {
+            console.warn(
+              '\n⚠️  [admin-panel] admin_users table not found. Run: webspresso admin:setup\n' +
+              '   Or create the table manually via migration. See: AdminUser model / getMigrationTemplate()\n'
+            );
+          }
+        }).catch((err) => {
+          console.warn('[admin-panel] Could not check admin_users table:', err.message);
+        });
+      }
 
       // Create and register AdminUser model
       const { hasModel: hasGlobalModel, getModel: getGlobalModel } = require('../../core/orm/model');
@@ -251,7 +280,7 @@ function adminPanelPlugin(options = {}) {
         path: adminPath,
         db,
         AdminUser,
-        hashPassword: (password, rounds) => bcrypt.hash(password, rounds),
+        hashPassword: (password, rounds) => bcrypt.hash(password, process.env.NODE_ENV === 'test' ? 4 : (rounds || 10)),
         comparePassword: (password, hash) => bcrypt.compare(password, hash),
         richTextSanitize,
       });
@@ -270,7 +299,7 @@ function adminPanelPlugin(options = {}) {
         adminUsersHandlers = createAdminUsersApiHandlers({
           db,
           AdminUser,
-          hashPassword: (password, rounds) => bcrypt.hash(password, rounds),
+          hashPassword: (password, rounds) => bcrypt.hash(password, process.env.NODE_ENV === 'test' ? 4 : (rounds || 10)),
         });
       }
 
@@ -313,6 +342,8 @@ function adminPanelPlugin(options = {}) {
       // Settings API routes
       ctx.addRoute('get', `${adminPath}/api/extensions/settings`, requireAuth, extensionHandlers.settingsGetHandler);
       ctx.addRoute('post', `${adminPath}/api/extensions/settings`, requireAuth, extensionHandlers.settingsUpdateHandler);
+      ctx.addRoute('get', `${adminPath}/api/extensions/system-info`, requireAuth, extensionHandlers.systemInfoHandler);
+      ctx.addRoute('get', `${adminPath}/api/system-info`, requireAuth, extensionHandlers.systemInfoHandler);
 
       // Custom pages API routes
       ctx.addRoute('get', `${adminPath}/api/extensions/pages/:pageId/data`, requireAuth, pageHandlers.getPageData);
@@ -360,6 +391,73 @@ function adminPanelPlugin(options = {}) {
       // Query API routes (auth required)
       ctx.addRoute('get', `${adminPath}/api/models/:model/queries/:query`, requireAuth, apiHandlers.queryHandler);
 
+      // Data exchange (Excel export & CSV/XLSX import) routes
+      const dataExchangeConfig = typeof dataExchangeOption === 'object' ? dataExchangeOption : { enabled: dataExchangeOption !== false };
+      if (dataExchangeConfig.enabled !== false && !ctx.app?._dataExchangeRoutesRegistered) {
+        const { createExportXlsxHandler } = require('../data-exchange/export-xlsx');
+        const { createImportHandler } = require('../data-exchange/import');
+        const exportHandler = createExportXlsxHandler({ db, maxRows: dataExchangeConfig.maxRows || 10000 });
+        const importHandler = createImportHandler({
+          db,
+          maxRows: dataExchangeConfig.maxRows || 10000,
+          maxFileBytes: dataExchangeConfig.maxFileBytes || 10 * 1024 * 1024,
+        });
+
+        const base = `${adminPath}/api/data-exchange`;
+        ctx.addRoute('get', `${base}/export/:model`, requireAuth, exportHandler);
+        ctx.addRoute('post', `${base}/export/:model`, requireAuth, exportHandler);
+        ctx.addRoute('post', `${base}/import/:model`, requireAuth, importHandler);
+
+        if (!registry.bulkActions.has('export-xlsx')) {
+          registry.registerBulkAction('export-xlsx', {
+            label: 'Export as Excel',
+            icon: 'download',
+            color: 'blue',
+            models: '*',
+            confirm: false,
+            handler: async (records, modelName, { db: d }) => {
+              const { getModel } = require('../../core/orm/model');
+              const model = d.getModel ? d.getModel(modelName) : getModel(modelName);
+              const pk = model?.primaryKey || 'id';
+              const ids = records.map((r) => r[pk]).join(',');
+              return {
+                download: true,
+                url: `${adminPath}/api/data-exchange/export/${modelName}?ids=${encodeURIComponent(ids)}`,
+                filename: `${modelName}_export.xlsx`,
+              };
+            },
+          });
+        }
+
+        if (ctx.app) {
+          ctx.app._dataExchangeRoutesRegistered = true;
+        }
+      }
+
+      // ==========================================
+      // Static Vendor Assets (Offline Zero-CDN)
+      // ==========================================
+      const vendorDir = path.join(__dirname, 'vendor');
+      ctx.addRoute('get', `${adminPath}/vendor/:file`, (req, res) => {
+        const fileName = path.basename(req.params.file);
+        const filePath = path.join(vendorDir, fileName);
+
+        if (!fs.existsSync(filePath)) {
+          return res.status(404).send('Vendor asset not found');
+        }
+
+        if (fileName.endsWith('.js')) {
+          res.type('application/javascript');
+        } else if (fileName.endsWith('.css')) {
+          res.type('text/css');
+        } else {
+          res.type('application/octet-stream');
+        }
+
+        res.setHeader('Cache-Control', 'public, max-age=86400');
+        res.sendFile(filePath);
+      });
+
       // ==========================================
       // HTML Endpoints
       // ==========================================
@@ -433,10 +531,14 @@ function generateAdminPanelHtml(adminPath, registry) {
 
   const settings = registry.settings;
   const fieldRenderersCode = Array.from(registry.fieldRenderers.entries()).map(([type, r]) => {
-    return `window.__customFieldRenderers['${type}'] = {
-      display: ${r.display ? serializeJs(r.display) : 'null'},
-      edit: ${r.edit ? serializeJs(r.edit) : 'null'}
-    };`;
+    return `try {
+      window.__customFieldRenderers['${type}'] = {
+        display: ${r.display ? serializeJs(r.display) : 'null'},
+        edit: ${r.edit ? serializeJs(r.edit) : 'null'}
+      };
+    } catch (err) {
+      console.error('[Admin Panel] Failed to register custom field renderer "${type}":', err);
+    }`;
   }).join('\n');
 
   return `<!DOCTYPE html>
@@ -465,9 +567,9 @@ function generateAdminPanelHtml(adminPath, registry) {
       });
     } catch (e) {}
   })();
-  </script>
-  <script src="https://unpkg.com/mithril/mithril.js"></script>
-  <script src="https://cdn.tailwindcss.com"></script>
+  <script>window.__ADMIN_PATH__ = ${JSON.stringify(adminPath)};</script>
+  <script src="${adminPath}/vendor/mithril.min.js"></script>
+  <script src="${adminPath}/vendor/tailwind.min.js"></script>
   <script>tailwind.config = { darkMode: 'class' };</script>
   <style>
     body { margin: 0; font-family: system-ui, -apple-system, sans-serif; }
@@ -484,6 +586,35 @@ function generateAdminPanelHtml(adminPath, registry) {
     .dark .ql-snow .ql-stroke { stroke: #94a3b8; }
     .dark .ql-snow .ql-fill { fill: #94a3b8; }
     .dark .ql-picker { color: #cbd5e1; }
+    @media (min-width: 768px) {
+      .admin-table-sticky-check {
+        position: sticky;
+        left: 0;
+        z-index: 5;
+        box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.08);
+      }
+      th.admin-table-sticky-check {
+        z-index: 15;
+      }
+      .admin-table-sticky-first {
+        position: sticky;
+        left: 40px;
+        z-index: 5;
+        box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.08);
+      }
+      th.admin-table-sticky-first {
+        z-index: 15;
+      }
+      .admin-table-sticky-actions {
+        position: sticky;
+        right: 0;
+        z-index: 5;
+        box-shadow: -4px 0 8px -4px rgba(0, 0, 0, 0.08);
+      }
+      th.admin-table-sticky-actions {
+        z-index: 15;
+      }
+    }
   </style>
   ${registry.getStylesHtml()}
   ${registry.getScriptsHtml('head')}
@@ -530,5 +661,6 @@ function generateAdminPanelHtml(adminPath, registry) {
 
 // Export registry and utilities for external use
 module.exports = adminPanelPlugin;
+module.exports.adminPanelPlugin = adminPanelPlugin;
 module.exports.AdminRegistry = AdminRegistry;
 module.exports.defaultRegistry = defaultRegistry;

package/plugins/admin-panel/modules/bulk-actions.js

@@ -238,11 +238,18 @@ async function executeBulkAction(action, selectedIds, modelName) {
     if (result.result?.download) {
       // Trigger download
       const link = document.createElement('a');
-      link.href = window.__ADMIN_PATH__ + result.result.url;
+      link.style.display = 'none';
+      const rawUrl = result.result.url || '';
+      const adminPath = window.__ADMIN_PATH__ || '/_admin';
+      link.href = (rawUrl.startsWith('/') && !rawUrl.startsWith(adminPath))
+        ? adminPath + rawUrl
+        : rawUrl;
       link.download = result.result.filename || 'export';
       document.body.appendChild(link);
       link.click();
-      document.body.removeChild(link);
+      setTimeout(function () {
+        if (link.parentNode) link.parentNode.removeChild(link);
+      }, 1000);
       return { success: true, message: 'Download started' };
     }
 

package/plugins/admin-panel/modules/custom-pages.js

@@ -315,45 +315,41 @@ function createCustomPage(pageConfig) {
 const SettingsPage = {
   oninit(vnode) {
     vnode.state.config = null;
+    vnode.state.systemInfo = null;
     vnode.state.loading = true;
     vnode.state.saving = false;
+    vnode.state.checkingUpdates = false;
     vnode.state.formData = {};
     vnode.state.reloadBusy = false;
+    vnode.state.error = null;
 
-    vnode.state.reloadFromServer = () => {
+    vnode.state.loadAll = (forceUpdateCheck = false) => {
       vnode.state.reloadBusy = true;
       vnode.state.error = null;
+      if (forceUpdateCheck) vnode.state.checkingUpdates = true;
       m.redraw();
-      return api.get('/extensions/config')
-        .then(result => {
-          vnode.state.config = result;
-          vnode.state.formData = { ...result.settings };
-        })
-        .catch(err => {
-          vnode.state.error = err.message;
-        })
-        .finally(() => {
-          vnode.state.reloadBusy = false;
-          m.redraw();
-        });
-    };
-
-    api.get('/extensions/config')
-      .then(result => {
-        vnode.state.config = result;
-        vnode.state.formData = { ...result.settings };
-        vnode.state.loading = false;
-        m.redraw();
-      })
-      .catch(err => {
+      return Promise.all([
+        api.get('/extensions/config'),
+        api.get('/extensions/system-info' + (forceUpdateCheck ? '?force=true' : '')).catch(() => null)
+      ]).then(([configRes, sysRes]) => {
+        vnode.state.config = configRes;
+        vnode.state.formData = { ...configRes.settings };
+        if (sysRes) vnode.state.systemInfo = sysRes;
+      }).catch(err => {
         vnode.state.error = err.message;
+      }).finally(() => {
         vnode.state.loading = false;
+        vnode.state.reloadBusy = false;
+        vnode.state.checkingUpdates = false;
         m.redraw();
       });
+    };
+
+    vnode.state.loadAll();
   },
 
   view(vnode) {
-    const { config, loading, saving, formData, error } = vnode.state;
+    const { config, systemInfo, loading, saving, checkingUpdates, formData, error, reloadBusy } = vnode.state;
 
     if (loading) {
       return m(Layout, m('div.flex.justify-center.py-12', m(Spinner)));
@@ -365,43 +361,147 @@ const SettingsPage = {
       m('div.mb-6.flex.items-start.justify-between.gap-4', [
         m('div', [
           m('h1.text-2xl.font-bold.text-gray-900.dark:text-slate-100', 'Admin Settings'),
-          m('p.text-xs.text-gray-500.dark:text-slate-400.mt-1', 'Reload discards unsaved changes'),
+          m('p.text-xs.text-gray-500.dark:text-slate-400.mt-1', 'System overview and admin panel configuration'),
         ]),
         m(RefreshIconButton, {
           title: 'Reload settings from server',
-          disabled: saving,
-          spinning: vnode.state.reloadBusy,
+          disabled: saving || reloadBusy,
+          spinning: reloadBusy,
           onclick: () => {
-            vnode.state.reloadFromServer();
+            vnode.state.loadAll();
           },
         }),
       ]),
 
-      error && m('div.bg-red-50.border.border-red-200.rounded.p-4.text-red-700.mb-4', error),
+      error && m('div.bg-red-50.dark:bg-red-950/40.border.border-red-200.dark:border-red-800.rounded-lg.p-4.text-red-700.dark:text-red-300.mb-6', error),
+
+      // System Information Card
+      systemInfo ? m('div.bg-white.dark:bg-slate-800.rounded-xl.shadow-sm.border.border-gray-200.dark:border-slate-700.mb-6.overflow-hidden', [
+        m('div.px-6.py-4.border-b.border-gray-100.dark:border-slate-700.flex.items-center.justify-between.bg-gray-50/50.dark:bg-slate-800/80', [
+          m('div.flex.items-center.gap-2.5', [
+            m('div.w-8.h-8.rounded-lg.bg-indigo-50.dark:bg-indigo-950/60.text-indigo-600.dark:text-indigo-400.flex.items-center.justify-center', [
+              m('svg.w-4.h-4', { fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' },
+                m('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z' })
+              )
+            ]),
+            m('div', [
+              m('h2.text-base.font-semibold.text-gray-900.dark:text-slate-100', 'System Information'),
+              m('p.text-xs.text-gray-500.dark:text-slate-400', 'Runtime environment and version status')
+            ])
+          ]),
+          m('button.inline-flex.items-center.gap-1.5.px-3.py-1.5.text-xs.font-medium.text-indigo-600.dark:text-indigo-400.bg-indigo-50.dark:bg-indigo-950/50.hover:bg-indigo-100.dark:hover:bg-indigo-900/50.rounded-lg.transition-colors.disabled:opacity-50', {
+            disabled: checkingUpdates,
+            onclick: () => {
+              vnode.state.loadAll(true);
+            }
+          }, [
+            checkingUpdates ? m(Spinner) : m('svg.w-3.5.h-3.5', { fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' },
+              m('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' })
+            ),
+            checkingUpdates ? 'Checking...' : 'Check for Updates'
+          ])
+        ]),
+        m('div.p-6.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-3.gap-5', [
+          // Webspresso Version
+          m('div.p-3.5.rounded-lg.bg-gray-50.dark:bg-slate-900/50.border.border-gray-100.dark:border-slate-800', [
+            m('div.text-xs.font-medium.text-gray-500.dark:text-slate-400', 'Webspresso Framework'),
+            m('div.mt-1.5.flex.items-center.gap-2.flex-wrap', [
+              m('span.text-sm.font-semibold.text-gray-900.dark:text-slate-100', 'v' + (systemInfo.webspressoVersion || '0.0.1')),
+              systemInfo.hasUpdate
+                ? m('span.inline-flex.items-center.px-2.py-0.5.rounded-full.text-[11px].font-semibold.bg-amber-100.text-amber-800.dark:bg-amber-950/60.dark:text-amber-300.border.border-amber-200.dark:border-amber-800', '⚡ Update: v' + systemInfo.latestVersion)
+                : m('span.inline-flex.items-center.px-2.py-0.5.rounded-full.text-[11px].font-semibold.bg-emerald-100.text-emerald-800.dark:bg-emerald-950/60.dark:text-emerald-300.border.border-emerald-200.dark:border-emerald-800', '✓ Up to date')
+            ]),
+            systemInfo.hasUpdate && m('div.mt-2', [
+              m('code.text-[11px].bg-white.dark:bg-slate-800.text-indigo-600.dark:text-indigo-400.px-2.py-0.5.rounded.border.border-gray-200.dark:border-slate-700.select-all', 'npm i webspresso@latest')
+            ])
+          ]),
+
+          // Node.js Version
+          m('div.p-3.5.rounded-lg.bg-gray-50.dark:bg-slate-900/50.border.border-gray-100.dark:border-slate-800', [
+            m('div.text-xs.font-medium.text-gray-500.dark:text-slate-400', 'Node.js Runtime'),
+            m('div.mt-1.5.text-sm.font-semibold.text-gray-900.dark:text-slate-100', systemInfo.nodeVersion || process.version)
+          ]),
 
-      m('div.bg-white dark:bg-slate-800.rounded-lg.shadow', [
-        m('div.p-6.space-y-4', [
+          // Environment
+          m('div.p-3.5.rounded-lg.bg-gray-50.dark:bg-slate-900/50.border.border-gray-100.dark:border-slate-800', [
+            m('div.text-xs.font-medium.text-gray-500.dark:text-slate-400', 'Environment'),
+            m('div.mt-1.5', [
+              m('span.inline-flex.items-center.px-2.5.py-0.5.rounded-full.text-xs.font-semibold', {
+                class: systemInfo.environment === 'production'
+                  ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950/60 dark:text-emerald-300'
+                  : 'bg-blue-100 text-blue-800 dark:bg-blue-950/60 dark:text-blue-300'
+              }, systemInfo.environment || 'development')
+            ])
+          ]),
+
+          // Operating System
+          m('div.p-3.5.rounded-lg.bg-gray-50.dark:bg-slate-900/50.border.border-gray-100.dark:border-slate-800', [
+            m('div.text-xs.font-medium.text-gray-500.dark:text-slate-400', 'OS & Architecture'),
+            m('div.mt-1.5.text-sm.font-semibold.text-gray-900.dark:text-slate-100.truncate', { title: systemInfo.platform }, systemInfo.platform || 'Server')
+          ]),
+
+          // Server Uptime
+          m('div.p-3.5.rounded-lg.bg-gray-50.dark:bg-slate-900/50.border.border-gray-100.dark:border-slate-800', [
+            m('div.text-xs.font-medium.text-gray-500.dark:text-slate-400', 'Server Uptime'),
+            m('div.mt-1.5.text-sm.font-semibold.text-gray-900.dark:text-slate-100', systemInfo.uptimeFormatted || '0s')
+          ]),
+
+          // Memory Usage
+          m('div.p-3.5.rounded-lg.bg-gray-50.dark:bg-slate-900/50.border.border-gray-100.dark:border-slate-800', [
+            m('div.text-xs.font-medium.text-gray-500.dark:text-slate-400', 'Memory (Heap / RSS)'),
+            m('div.mt-1.5.text-sm.font-semibold.text-gray-900.dark:text-slate-100',
+              (systemInfo.memory?.heapUsed || '0 MB') + ' / ' + (systemInfo.memory?.heapTotal || '0 MB') + ' (' + (systemInfo.memory?.rss || '0 MB') + ')'
+            )
+          ]),
+
+          // Database Engine
+          m('div.p-3.5.rounded-lg.bg-gray-50.dark:bg-slate-900/50.border.border-gray-100.dark:border-slate-800', [
+            m('div.text-xs.font-medium.text-gray-500.dark:text-slate-400', 'Database Client'),
+            m('div.mt-1.5.text-sm.font-semibold.text-gray-900.dark:text-slate-100', systemInfo.database?.client || 'knex')
+          ])
+        ])
+      ]) : null,
+
+      // Admin Preferences Card
+      m('div.bg-white.dark:bg-slate-800.rounded-xl.shadow-sm.border.border-gray-200.dark:border-slate-700.overflow-hidden', [
+        m('div.px-6.py-4.border-b.border-gray-100.dark:border-slate-700.flex.items-center.gap-2.5.bg-gray-50/50.dark:bg-slate-800/80', [
+          m('div.w-8.h-8.rounded-lg.bg-blue-50.dark:bg-blue-950/60.text-blue-600.dark:text-blue-400.flex.items-center.justify-center', [
+            m('svg.w-4.h-4', { fill: 'none', stroke: 'currentColor', viewBox: '0 0 24 24' },
+              m('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4' })
+            )
+          ]),
           m('div', [
-            m('label.block.text-sm.font-medium.text-gray-700', 'Panel Title'),
-            m('input.mt-1.block.w-full.rounded.border-gray-300 dark:border-slate-600.shadow-sm.focus:border-blue-500.focus:ring-blue-500', {
+            m('h2.text-base.font-semibold.text-gray-900.dark:text-slate-100', 'Panel Preferences'),
+            m('p.text-xs.text-gray-500.dark:text-slate-400', 'Customize admin title, theme colors, and table pagination')
+          ])
+        ]),
+
+        m('div.p-6.space-y-5', [
+          m('div', [
+            m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300', 'Panel Title'),
+            m('input.mt-1.block.w-full.rounded-lg.border-gray-300.dark:border-slate-600.dark:bg-slate-900.dark:text-slate-100.shadow-sm.focus:border-blue-500.focus:ring-blue-500.text-sm.px-3.py-2', {
               type: 'text',
               value: formData.title || '',
+              placeholder: 'Admin Panel',
               oninput: (e) => { formData.title = e.target.value; },
             }),
           ]),
 
           m('div', [
-            m('label.block.text-sm.font-medium.text-gray-700', 'Primary Color'),
-            m('input.mt-1.block.w-24.h-10.rounded.border-gray-300 dark:border-slate-600.shadow-sm', {
-              type: 'color',
-              value: formData.primaryColor || '#3B82F6',
-              oninput: (e) => { formData.primaryColor = e.target.value; },
-            }),
+            m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300', 'Primary Accent Color'),
+            m('div.mt-1.5.flex.items-center.gap-3', [
+              m('input.w-10.h-10.rounded-lg.border.border-gray-300.dark:border-slate-600.cursor-pointer.p-0.5.bg-transparent', {
+                type: 'color',
+                value: formData.primaryColor || '#3B82F6',
+                oninput: (e) => { formData.primaryColor = e.target.value; },
+              }),
+              m('span.text-xs.font-mono.text-gray-600.dark:text-slate-400', formData.primaryColor || '#3B82F6'),
+            ]),
           ]),
 
           m('div', [
-            m('label.block.text-sm.font-medium.text-gray-700', 'Records Per Page'),
-            m('input.mt-1.block.w-32.rounded.border-gray-300 dark:border-slate-600.shadow-sm.focus:border-blue-500.focus:ring-blue-500', {
+            m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300', 'Records Per Page'),
+            m('input.mt-1.block.w-32.rounded-lg.border-gray-300.dark:border-slate-600.dark:bg-slate-900.dark:text-slate-100.shadow-sm.focus:border-blue-500.focus:ring-blue-500.text-sm.px-3.py-2', {
               type: 'number',
               min: 5,
               max: 100,
@@ -411,15 +511,14 @@ const SettingsPage = {
           ]),
         ]),
 
-        m('div.bg-gray-50 dark:bg-slate-900.px-6.py-4.flex.justify-end.gap-3.rounded-b-lg', [
-          m('button.px-4.py-2.text-sm.font-medium.text-white.bg-blue-600.rounded.hover:bg-blue-700.disabled:opacity-50', {
+        m('div.bg-gray-50.dark:bg-slate-900/70.px-6.py-4.flex.justify-end.gap-3.border-t.border-gray-100.dark:border-slate-700', [
+          m('button.inline-flex.items-center.gap-2.px-4.py-2.text-sm.font-medium.text-white.bg-blue-600.hover:bg-blue-700.rounded-lg.shadow-sm.transition-colors.disabled:opacity-50', {
             disabled: saving,
             onclick: async () => {
               vnode.state.saving = true;
               m.redraw();
               try {
                 await api.post('/extensions/settings', formData);
-                // Reload to apply changes
                 window.location.reload();
               } catch (err) {
                 vnode.state.error = err.message;
@@ -427,7 +526,7 @@ const SettingsPage = {
                 m.redraw();
               }
             },
-          }, saving ? 'Saving...' : 'Save Settings'),
+          }, saving ? [m(Spinner), 'Saving...'] : 'Save Settings'),
         ]),
       ]),
     ]);

package/plugins/admin-panel/modules/dashboard.js

@@ -384,7 +384,14 @@ const Widget = {
           ? m('div.flex.justify-center.py-8', m(Spinner))
           : error 
             ? m('div.text-red-500.text-sm', error)
-            : (WidgetRenderers[widget.id] || WidgetRenderers.default).render(data),
+            : (() => {
+                try {
+                  return (WidgetRenderers[widget.id] || WidgetRenderers.default).render(data);
+                } catch (err) {
+                  console.error('[Admin Panel] Error rendering widget "' + widget.id + '":', err);
+                  return m('div.text-red-500.text-xs', 'Widget render error: ' + (err.message || String(err)));
+                }
+              })(),
       ]),
     ]);
   },