webspresso 0.0.71 → 0.0.73

package/README.md

@@ -15,7 +15,7 @@ A minimal, file-based SSR framework for Node.js with Nunjucks templating.
 - **Lifecycle Hooks**: Global and route-level hooks for request processing
 - **Template Helpers**: Laravel-inspired helper functions available in templates
 - **Plugin System**: Extensible architecture with version control and inter-plugin communication
-- **Built-in Plugins**: Development dashboard, sitemap generator, SEO checker, analytics integration (Google, Yandex, Bing), self-hosted site analytics, optional Swagger UI for HTTP APIs, configurable HTTP health probe endpoint, optional REST CRUD routes from ORM models, optional admin UI for ORM query cache metrics and purge
+- **Built-in Plugins**: Development dashboard, sitemap generator, SEO checker, analytics integration (Google, Yandex, Bing), self-hosted site analytics, optional Swagger UI for HTTP APIs, configurable HTTP health probe endpoint, optional REST CRUD routes from ORM models, optional admin UI for ORM query cache metrics and purge, optional **admin-only spreadsheet exchange** (Excel export, CSV/XLSX import via `dataExchangePlugin`)
 - **Session authentication** (optional): `createAuth` / `quickAuth` in **`webspresso/core/auth`** — pass the manager to **`createApp({ auth })`** for `express-session`, `req.user` / `req.auth`, remember-me tokens, and policy-style authorization. Full walkthrough: **[`doc/index.html#authentication`](doc/index.html#authentication)**.
 - **Optional client runtime** (Alpine.js + [swup](https://swup.js.org/)): **`createApp({ clientRuntime: { alpine, swup } })`** serves scripts under **`/__webspresso/client-runtime/`** and exposes **`clientRuntime`** in Nunjucks; layouts can include **`views/partials/webspresso-client-runtime.njk`**. Env overrides: **`WEBSPRESSO_ALPINE`**, **`WEBSPRESSO_SWUP`**. Demo: **`examples/alpine-swup-demo/`**. Details: **[`doc/index.html#client-runtime`](doc/index.html#client-runtime)**.
 - **TypeScript**: Published **`index.d.ts`** (via `package.json` `"types"`) for `createApp`, ORM, plugins, and router helpers — use from TS/JS with IDE autocomplete; runtime stays CommonJS
@@ -833,6 +833,45 @@ adminPanelPlugin({
 })
 ```
 
+### Data exchange plugin (`dataExchangePlugin`)
+
+- **Admin session only** — same `requireAuth` / `req.session.adminUser` as the admin panel; paths live under your admin prefix (default `/_admin`).
+- **Excel export** (`.xlsx`) for models with `admin.enabled`; record selection matches the built-in JSON/CSV export (`ids`, `selectAll`, `filters` via query or POST body).
+- **Import** — `multipart/form-data` field `file` (`.csv` or `.xlsx`); query/body `mode=insert|upsert`, `upsertKey` (default primary key). Rows are validated through the ORM (`repository.create` / `update`). Hidden columns are excluded; caps: `maxRows`, `maxFileBytes`.
+- **UI** — when the plugin is loaded, the admin model list adds **Export Excel**, **Import**, and bulk **Export Excel** (alongside the existing JSON/CSV export actions). Registers bulk action `export-xlsx` for download URLs.
+- **Dependencies** — implemented with `exceljs` and `csv-parse` (declared on the `webspresso` package).
+
+Register **after** `adminPanelPlugin` so session middleware and the admin registry exist; use the **same** `db` and `adminPath`:
+
+```javascript
+const { adminPanelPlugin, dataExchangePlugin } = require('webspresso/plugins');
+
+const { app } = createApp({
+  pagesDir: './pages',
+  db,
+  plugins: [
+    adminPanelPlugin({ db, path: '/_admin' }),
+    dataExchangePlugin({
+      db,
+      adminPath: '/_admin',
+      maxRows: 10_000,
+      maxFileBytes: 10 * 1024 * 1024,
+    }),
+  ],
+});
+```
+
+Options:
+- `db` — database instance (defaults to `ctx.db` in `onRoutesReady` if omitted but `createApp({ db })` was set)
+- `adminPath` — must match the admin panel path (default `/_admin`)
+- `enabled` — set `false` to skip registering routes (default `true`)
+- `maxRows` — export and import row limit (default `10000`)
+- `maxFileBytes` — multipart upload limit (default 10 MiB)
+
+API (all require admin cookie):
+- `GET|POST ${adminPath}/api/data-exchange/export/:model` — spreadsheet download
+- `POST ${adminPath}/api/data-exchange/import/:model` — import summary `{ success, created, updated, failed, errors: [{ row, message }] }`
+
 **Site Analytics Plugin:**
 - Self-hosted page view analytics (no external services required)
 - Automatic page view tracking via Express middleware

package/index.d.ts

@@ -516,6 +516,8 @@ export function schemaExplorerPlugin(options?: Record<string, unknown>): Webspre
 
 export function adminPanelPlugin(options?: Record<string, unknown>): WebspressoPlugin;
 
+export function dataExchangePlugin(options?: Record<string, unknown>): WebspressoPlugin;
+
 export function siteAnalyticsPlugin(options?: Record<string, unknown>): WebspressoPlugin;
 
 export function auditLogPlugin(options?: Record<string, unknown>): WebspressoPlugin;

package/index.js

@@ -52,6 +52,7 @@ const {
   ormCacheAdminPlugin,
   uploadPlugin,
   createLocalFileProvider,
+  dataExchangePlugin,
 } = require('./plugins');
 
 module.exports = {
@@ -109,4 +110,5 @@ module.exports = {
   ormCacheAdminPlugin,
   uploadPlugin,
   createLocalFileProvider,
+  dataExchangePlugin,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webspresso",
-  "version": "0.0.71",
+  "version": "0.0.73",
   "description": "Minimal, production-ready SSR framework for Node.js with file-based routing, Nunjucks templating, built-in i18n, and CLI tooling",
   "main": "index.js",
   "types": "index.d.ts",
@@ -56,7 +56,9 @@
     "commander": "^11.1.0",
     "connect-timeout": "^1.9.1",
     "cookie-parser": "^1.4.7",
+    "csv-parse": "^5.6.0",
     "dayjs": "^1.11.19",
+    "exceljs": "^4.4.0",
     "express": "^4.18.2",
     "express-session": "^1.18.0",
     "helmet": "^7.2.0",

package/plugins/admin-panel/components.js

@@ -1407,10 +1407,11 @@ const SetupForm = {
 
 // Model List Component
 const ModelList = {
-  oninit: () => {
+  _load() {
     state.loading = true;
     state.error = null;
-    api.get('/models')
+    m.redraw();
+    return api.get('/models')
       .then(result => {
         state.models = result.models || [];
       })
@@ -1422,8 +1423,31 @@ const ModelList = {
         m.redraw();
       });
   },
-  view: () => m(Layout, [
-    m('h2.text-2xl.font-bold.mb-6', 'Models'),
+  oninit(vnode) {
+    vnode.state._stopPoll = null;
+    vnode.state.refreshing = false;
+    ModelList._load();
+    vnode.state._stopPoll = runAdminAutoRefresh(() => ModelList._load());
+  },
+  onremove(vnode) {
+    if (vnode.state._stopPoll) vnode.state._stopPoll();
+  },
+  view: (vnode) => m(Layout, [
+    m('.flex.items-center.justify-between.mb-6', [
+      m('h2.text-2xl.font-bold', 'Models'),
+      m(RefreshIconButton, {
+        title: 'Reload models',
+        spinning: vnode.state.refreshing || state.loading,
+        onclick: () => {
+          vnode.state.refreshing = true;
+          m.redraw();
+          ModelList._load().finally(() => {
+            vnode.state.refreshing = false;
+            m.redraw();
+          });
+        },
+      }),
+    ]),
     state.error ? m('.bg-red-100.border.border-red-400.text-red-700.px-4.py-3.rounded.mb-4', state.error) : null,
     state.loading
       ? m('p.text-gray-600', 'Loading models...')
@@ -1807,7 +1831,7 @@ function loadRecords(modelName, page = 1, filters = null) {
   window.history.replaceState({}, '', newUrl);
   
   const trashedParam = state.trashedView ? '&trashed=only' : '';
-  api.get('/models/' + modelName + '/records?page=' + page + '&perPage=' + perPage + trashedParam + filterQuery)
+  return api.get('/models/' + modelName + '/records?page=' + page + '&perPage=' + perPage + trashedParam + filterQuery)
     .then(result => {
       state.records = result.data || [];
       state.pagination = {
@@ -1866,9 +1890,19 @@ function initializeModelView(modelName) {
 
 // Record List Component - displays records with dynamic columns
 const RecordList = {
-  oninit: () => {
+  oninit(vnode) {
+    vnode.state._stopPoll = null;
+    vnode.state.manualRefresh = false;
     const modelName = m.route.param('model');
     initializeModelView(modelName);
+    vnode.state._stopPoll = runAdminAutoRefresh(() => {
+      const mName = m.route.param('model');
+      if (state._currentModelName !== mName || !state.currentModelMeta) return;
+      loadRecords(mName, state.pagination.page, state.filters);
+    });
+  },
+  onremove(vnode) {
+    if (vnode.state._stopPoll) vnode.state._stopPoll();
   },
   onbeforeupdate: () => {
     // Check if model changed (navigation between different models)
@@ -1878,7 +1912,7 @@ const RecordList = {
     }
     return true;
   },
-  view: () => {
+  view: (vnode) => {
     const modelName = m.route.param('model');
     const modelMeta = state.currentModelMeta;
     const displayColumns = modelMeta ? getDisplayColumns(modelMeta.columns) : [];
@@ -1922,6 +1956,18 @@ const RecordList = {
       m('.flex.items-center.justify-between.mb-4', [
         m('.flex.items-center.gap-3', [
           m('h2.text-2xl.font-bold', modelMeta?.label || modelName),
+          m(RefreshIconButton, {
+            title: 'Reload records',
+            spinning: vnode.state.manualRefresh || state.loading,
+            onclick: () => {
+              vnode.state.manualRefresh = true;
+              m.redraw();
+              loadRecords(modelName, state.pagination.page, state.filters).finally(() => {
+                vnode.state.manualRefresh = false;
+                m.redraw();
+              });
+            },
+          }),
           modelMeta?.softDelete ? m('.flex.rounded-lg.border.border-gray-200 dark:border-slate-600.p-0.5', [
             m('button.px-3.py-1.5.text-sm.font-medium.rounded-md.transition-colors', {
               class: !state.trashedView ? 'bg-indigo-600.text-white' : 'text-gray-600.hover:text-gray-900 dark:hover:text-slate-100 dark:hover:text-slate-100',
@@ -1939,17 +1985,96 @@ const RecordList = {
             }, 'Trash'),
           ]) : null,
         ]),
-        !state.trashedView ? m('button.inline-flex.items-center.gap-2.px-4.py-2.text-sm.font-medium.text-white.bg-indigo-600.rounded-lg.hover:bg-indigo-700.focus:outline-none.focus:ring-2.focus:ring-indigo-500', {
-          onclick: () => {
-            state.currentRecord = null;
-            state.editing = true;
-            m.route.set('/models/' + modelName + '/new');
-          }
-        }, [
-          m('svg.w-4.h-4', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor' }, [
-            m('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M12 4v16m8-8H4' }),
+        !state.trashedView ? m('.flex.items-center.gap-2', [
+          m('button.inline-flex.items-center.gap-2.px-4.py-2.text-sm.font-medium.text-indigo-700.bg-white.dark:bg-slate-800.border.border-indigo-200.rounded-lg.hover:bg-indigo-50.transition-colors', {
+            onclick: async () => {
+              const adminPath = window.__ADMIN_PATH__ || '/_admin';
+              try {
+                const payload = { selectAll: true, filters: state.filters };
+                const res = await fetch(adminPath + '/api/data-exchange/export/' + modelName, {
+                  method: 'POST',
+                  credentials: 'include',
+                  headers: { 'Content-Type': 'application/json' },
+                  body: JSON.stringify(payload),
+                });
+                if (!res.ok) {
+                  const err = await res.json().catch(function () { return {}; });
+                  throw new Error(err.error || 'Export failed');
+                }
+                const blob = await res.blob();
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = modelName + '-export.xlsx';
+                a.click();
+                URL.revokeObjectURL(url);
+              } catch (err) {
+                alert('Error: ' + err.message);
+              }
+            },
+          }, [
+            m('svg.w-4.h-4', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor' },
+              m('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' })
+            ),
+            'Export Excel',
+          ]),
+          m('input[type=file]', {
+            id: 'data-exchange-import-' + modelName,
+            style: 'display:none',
+            accept: '.csv,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv',
+            onchange: async (e) => {
+              const file = e.target.files && e.target.files[0];
+              e.target.value = '';
+              if (!file) return;
+              const adminPath = window.__ADMIN_PATH__ || '/_admin';
+              const mode = window.confirm('OK = upsert by id, Cancel = insert only') ? 'upsert' : 'insert';
+              const upsertKey = 'id';
+              const fd = new FormData();
+              fd.append('file', file);
+              try {
+                const res = await fetch(
+                  adminPath + '/api/data-exchange/import/' + modelName +
+                    '?mode=' + encodeURIComponent(mode) + '&upsertKey=' + encodeURIComponent(upsertKey),
+                  { method: 'POST', body: fd, credentials: 'include' }
+                );
+                const body = await res.json().catch(function () { return ({}); });
+                if (!res.ok) {
+                  throw new Error(body.error || 'Import failed');
+                }
+                var msg = 'Import finished: created ' + body.created + ', updated ' + (body.updated || 0) + ', failed ' + (body.failed || 0);
+                if (body.errors && body.errors.length) {
+                  msg += 'First errors: ' + body.errors.slice(0, 3).map(function (x) { return 'row ' + x.row + ': ' + x.message; }).join('; ');
+                }
+                alert(msg);
+                loadRecords(modelName, state.pagination.page, state.filters);
+              } catch (err) {
+                alert('Error: ' + err.message);
+              }
+            },
+          }),
+          m('button.inline-flex.items-center.gap-2.px-4.py-2.text-sm.font-medium.text-indigo-700.bg-white.dark:bg-slate-800.border.border-indigo-200.rounded-lg.hover:bg-indigo-50.transition-colors', {
+            onclick: function () {
+              var el = document.getElementById('data-exchange-import-' + modelName);
+              if (el) el.click();
+            },
+          }, [
+            m('svg.w-4.h-4', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor' },
+              m('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1M7 10l5 5m0 0l5-5m-5 5V4' })
+            ),
+            'Import',
+          ]),
+          m('button.inline-flex.items-center.gap-2.px-4.py-2.text-sm.font-medium.text-white.bg-indigo-600.rounded-lg.hover:bg-indigo-700.focus:outline-none.focus:ring-2.focus:ring-indigo-500', {
+            onclick: () => {
+              state.currentRecord = null;
+              state.editing = true;
+              m.route.set('/models/' + modelName + '/new');
+            },
+          }, [
+            m('svg.w-4.h-4', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor' }, [
+              m('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M12 4v16m8-8H4' }),
+            ]),
+            'New Record',
           ]),
-          'New Record',
         ]) : null,
       ]),
       
@@ -2156,6 +2281,46 @@ const RecordList = {
                   ),
                   'Export CSV',
                 ]) : null,
+                !state.trashedView ? m('button.inline-flex.items-center.gap-1.px-3.py-1.5.text-sm.font-medium.text-violet-600.bg-white dark:bg-slate-800.border.border-violet-200.rounded.hover:bg-violet-50.transition-colors', {
+                  disabled: state.bulkActionInProgress,
+                  onclick: async () => {
+                    state.bulkActionInProgress = true;
+                    m.redraw();
+                    try {
+                      const adminPath = window.__ADMIN_PATH__ || '/_admin';
+                      const payload = state.selectAllMode 
+                        ? { selectAll: true, filters: state.filters }
+                        : { ids: Array.from(state.selectedRecords) };
+                      const res = await fetch(adminPath + '/api/data-exchange/export/' + modelName, {
+                        method: 'POST',
+                        credentials: 'include',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(payload),
+                      });
+                      if (!res.ok) {
+                        const err = await res.json().catch(function () { return {}; });
+                        throw new Error(err.error || 'Export failed');
+                      }
+                      const blob = await res.blob();
+                      const url = URL.createObjectURL(blob);
+                      const a = document.createElement('a');
+                      a.href = url;
+                      a.download = modelName + '-export.xlsx';
+                      a.click();
+                      URL.revokeObjectURL(url);
+                    } catch (err) {
+                      alert('Error: ' + err.message);
+                    } finally {
+                      state.bulkActionInProgress = false;
+                      m.redraw();
+                    }
+                  },
+                }, [
+                  m('svg.w-4.h-4', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor' },
+                    m('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' })
+                  ),
+                  'Export Excel',
+                ]) : null,
                 !state.trashedView ? m(BulkFieldUpdateDropdown, {
                   modelName: modelName,
                   selectedIds: state.selectAllMode ? null : Array.from(state.selectedRecords),

package/plugins/admin-panel/core/api-extensions.js

@@ -658,4 +658,6 @@ function createExtensionApiHandlers(options) {
 
 module.exports = {
   createExtensionApiHandlers,
+  buildFilteredQuery,
+  getAllMatchingIds,
 };

package/plugins/admin-panel/core/registry.js

@@ -68,6 +68,8 @@ class AdminRegistry {
       dateFormat: 'YYYY-MM-DD',
       timeFormat: 'HH:mm',
       uploadUrl: null,
+      /** Client: auto-refresh data on list/dashboard pages (ms). 0 = off. Min 10s when > 0. */
+      autoRefreshMs: 60000,
     };
     
     // User management config

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

@@ -153,23 +153,38 @@ function createCustomPage(pageConfig) {
       vnode.state.data = null;
       vnode.state.loading = true;
       vnode.state.error = null;
-
-      // Load page data
-      if (pageConfig.dataLoader) {
-        api.get('/extensions/pages/' + pageConfig.id + '/data')
+      vnode.state.refreshing = false;
+      vnode.state._stopPoll = null;
+
+      vnode.state.load = () => {
+        if (!pageConfig.dataLoader) {
+          vnode.state.loading = false;
+          return Promise.resolve();
+        }
+        vnode.state.loading = true;
+        vnode.state.error = null;
+        m.redraw();
+        return api.get('/extensions/pages/' + pageConfig.id + '/data')
           .then(result => {
             vnode.state.data = result.data;
-            vnode.state.loading = false;
-            m.redraw();
           })
           .catch(err => {
             vnode.state.error = err.message;
+          })
+          .finally(() => {
             vnode.state.loading = false;
             m.redraw();
           });
-      } else {
-        vnode.state.loading = false;
-      }
+      };
+
+      vnode.state.load();
+      vnode.state._stopPoll = pageConfig.dataLoader
+        ? runAdminAutoRefresh(() => vnode.state.load())
+        : null;
+    },
+
+    onremove(vnode) {
+      if (vnode.state._stopPoll) vnode.state._stopPoll();
     },
 
     view(vnode) {
@@ -180,9 +195,25 @@ function createCustomPage(pageConfig) {
           { label: pageConfig.title, href: pageConfig.path },
         ]}),
 
-        m('div.mb-6', [
-          m('h1.text-2xl.font-bold.text-gray-900', pageConfig.title),
-          pageConfig.description && m('p.text-gray-500 dark:text-slate-400.mt-1', pageConfig.description),
+        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', pageConfig.title),
+            pageConfig.description && m('p.text-gray-500.dark:text-slate-400.mt-1', pageConfig.description),
+          ]),
+          pageConfig.dataLoader
+            ? m(RefreshIconButton, {
+                title: 'Reload page data',
+                spinning: vnode.state.refreshing || loading,
+                onclick: () => {
+                  vnode.state.refreshing = true;
+                  m.redraw();
+                  vnode.state.load().finally(() => {
+                    vnode.state.refreshing = false;
+                    m.redraw();
+                  });
+                },
+              })
+            : null,
         ]),
 
         loading 
@@ -208,6 +239,25 @@ const SettingsPage = {
     vnode.state.loading = true;
     vnode.state.saving = false;
     vnode.state.formData = {};
+    vnode.state.reloadBusy = false;
+
+    vnode.state.reloadFromServer = () => {
+      vnode.state.reloadBusy = true;
+      vnode.state.error = null;
+      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 => {
@@ -233,8 +283,19 @@ const SettingsPage = {
     return m(Layout, [
       m(Breadcrumb, { items: [{ label: 'Settings', href: '/settings' }] }),
 
-      m('div.mb-6', [
-        m('h1.text-2xl.font-bold.text-gray-900', 'Admin Settings'),
+      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(RefreshIconButton, {
+          title: 'Reload settings from server',
+          disabled: saving,
+          spinning: vnode.state.reloadBusy,
+          onclick: () => {
+            vnode.state.reloadFromServer();
+          },
+        }),
       ]),
 
       error && m('div.bg-red-50.border.border-red-200.rounded.p-4.text-red-700.mb-4', error),

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

@@ -310,22 +310,37 @@ const Widget = {
     vnode.state.data = null;
     vnode.state.loading = true;
     vnode.state.error = null;
-    
-    // Load widget data
+    vnode.state.refreshing = false;
+    vnode.state._stopPoll = null;
+
     const { widget } = vnode.attrs;
-    if (widget.id) {
-      api.get('/extensions/widgets/' + widget.id + '/data')
+    vnode.state.load = () => {
+      if (!widget.id) {
+        vnode.state.loading = false;
+        return Promise.resolve();
+      }
+      vnode.state.loading = true;
+      vnode.state.error = null;
+      m.redraw();
+      return api.get('/extensions/widgets/' + widget.id + '/data')
         .then(result => {
           vnode.state.data = result.data;
-          vnode.state.loading = false;
-          m.redraw();
         })
         .catch(err => {
           vnode.state.error = err.message;
+        })
+        .finally(() => {
           vnode.state.loading = false;
           m.redraw();
         });
-    }
+    };
+
+    vnode.state.load();
+    vnode.state._stopPoll = runAdminAutoRefresh(() => vnode.state.load());
+  },
+
+  onremove(vnode) {
+    if (vnode.state._stopPoll) vnode.state._stopPoll();
   },
 
   view(vnode) {
@@ -343,8 +358,22 @@ const Widget = {
     return m('div.bg-white dark:bg-slate-800.rounded-lg.shadow', {
       class: sizeClasses[widget.size] || sizeClasses.md,
     }, [
-      m('div.px-4.py-3.border-b.border-gray-200', [
-        m('h3.text-sm.font-medium.text-gray-900', widget.title),
+      m('div.px-4.py-3.border-b.border-gray-200.dark:border-slate-700', [
+        m('div.flex.items-center.justify-between.gap-2', [
+          m('h3.text-sm.font-medium.text-gray-900.dark:text-slate-100', widget.title),
+          m(RefreshIconButton, {
+            title: 'Refresh',
+            spinning: vnode.state.refreshing || loading,
+            onclick: () => {
+              vnode.state.refreshing = true;
+              m.redraw();
+              vnode.state.load().finally(() => {
+                vnode.state.refreshing = false;
+                m.redraw();
+              });
+            },
+          }),
+        ]),
       ]),
       m('div.p-4', [
         loading 
@@ -362,6 +391,8 @@ const Dashboard = {
   oninit(vnode) {
     vnode.state.config = null;
     vnode.state.loading = true;
+    vnode.state.refreshKey = 0;
+    vnode.state.dashRefreshing = false;
     
     // Load admin config
     api.get('/extensions/config')
@@ -389,14 +420,34 @@ const Dashboard = {
     const widgets = config?.widgets || [];
 
     return m(Layout, [
-      m('div.mb-6', [
-        m('h1.text-2xl.font-bold.text-gray-900', config?.settings?.title || 'Dashboard'),
-        m('p.text-gray-500 dark:text-slate-400.mt-1', 'Welcome back, ' + (state.user?.name || 'Admin')),
+      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', config?.settings?.title || 'Dashboard'),
+          m('p.text-gray-500.dark:text-slate-400.mt-1', 'Welcome back, ' + (state.user?.name || 'Admin')),
+        ]),
+        m(RefreshIconButton, {
+          title: 'Refresh all widgets',
+          spinning: vnode.state.dashRefreshing,
+          onclick: () => {
+            vnode.state.dashRefreshing = true;
+            m.redraw();
+            api.get('/extensions/config')
+              .then(config => {
+                vnode.state.config = config;
+                vnode.state.refreshKey = (vnode.state.refreshKey || 0) + 1;
+              })
+              .catch(err => console.error('Failed to refresh dashboard:', err))
+              .finally(() => {
+                vnode.state.dashRefreshing = false;
+                m.redraw();
+              });
+          },
+        }),
       ]),
 
       widgets.length > 0
         ? m('div.grid.grid-cols-1.md:grid-cols-2.lg:grid-cols-4.gap-4', 
-            widgets.map(widget => m(Widget, { key: widget.id, widget }))
+            widgets.map(widget => m(Widget, { key: widget.id + '-' + vnode.state.refreshKey, widget }))
           )
         : m('div.text-center.py-12.text-gray-500', [
             m('p', 'No dashboard widgets configured'),