webspresso 0.0.97 → 0.0.99

package/plugins/admin-panel/client/parts/08-record-list.js

@@ -1,3 +1,188 @@
+// Helper to extract custom actions for a model
+function getModelActions(modelName, modelMeta) {
+  const fromMeta = Array.isArray(modelMeta?.actions) ? modelMeta.actions : [];
+  const fromConfig = Array.isArray(window.__ADMIN_CONFIG__?.actions)
+    ? window.__ADMIN_CONFIG__.actions.filter(a => {
+        if (!a.models || a.models === '*') return true;
+        if (Array.isArray(a.models)) return a.models.includes(modelName);
+        return a.models === modelName;
+      })
+    : [];
+
+  const map = new Map();
+  for (const a of fromConfig) map.set(a.id, a);
+  for (const a of fromMeta) map.set(a.id, a);
+  return Array.from(map.values());
+}
+
+// Helper to extract custom bulk actions for a model
+function getModelBulkActions(modelName, modelMeta) {
+  const fromMeta = Array.isArray(modelMeta?.bulkActions) ? modelMeta.bulkActions : [];
+  const fromConfig = Array.isArray(window.__ADMIN_CONFIG__?.bulkActions)
+    ? window.__ADMIN_CONFIG__.bulkActions.filter(a => {
+        if (a.id === 'bulk-delete' || a.id === 'bulk-restore' || a.id === 'bulk-update') return false;
+        if (!a.models || a.models === '*') return true;
+        if (Array.isArray(a.models)) return a.models.includes(modelName);
+        return a.models === modelName;
+      })
+    : [];
+
+  const map = new Map();
+  for (const a of fromConfig) map.set(a.id, a);
+  for (const a of fromMeta) map.set(a.id, a);
+  return Array.from(map.values());
+}
+
+// Evaluate condition whether an action should be shown for a record
+function shouldShowAction(action, record) {
+  if (!action || !action.showWhen) return true;
+  if (!record) return true;
+  if (typeof action.showWhen === 'function') {
+    try {
+      return !!action.showWhen(record);
+    } catch (e) {
+      return false;
+    }
+  }
+  if (typeof action.showWhen === 'object' && action.showWhen !== null) {
+    return Object.entries(action.showWhen).every(([k, v]) => record[k] === v);
+  }
+  return true;
+}
+
+// Render icon for actions (SVG string or common icon names)
+function renderActionIcon(icon) {
+  if (!icon) return null;
+  if (typeof icon === 'string' && (icon.startsWith('<svg') || icon.includes('</svg>'))) {
+    return m.trust(icon);
+  }
+  const iconPaths = {
+    check: 'M5 13l4 4L19 7',
+    copy: 'M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z',
+    duplicate: 'M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z',
+    play: 'M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z',
+    refresh: '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',
+    eye: 'M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z',
+    trash: 'M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16',
+    archive: 'M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4',
+    mail: 'M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z',
+    star: 'M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z',
+  };
+  const pathD = iconPaths[icon];
+  if (pathD) {
+    return m('svg.w-3.5.h-3.5', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor' },
+      m('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: pathD })
+    );
+  }
+  return m('span.text-xs', icon);
+}
+
+function getActionColorClass(color) {
+  switch (color) {
+    case 'green':
+      return 'text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 hover:bg-green-50 dark:hover:bg-green-950/40';
+    case 'red':
+      return 'text-red-600 dark:text-red-400 hover:text-red-800 dark:hover:text-red-300 hover:bg-red-50 dark:hover:bg-red-950/40';
+    case 'blue':
+    case 'indigo':
+      return 'text-indigo-600 dark:text-indigo-400 hover:text-indigo-800 dark:hover:text-indigo-300 hover:bg-indigo-50 dark:hover:bg-indigo-950/40';
+    case 'amber':
+    case 'yellow':
+      return 'text-amber-600 dark:text-amber-400 hover:text-amber-800 dark:hover:text-amber-300 hover:bg-amber-50 dark:hover:bg-amber-950/40';
+    case 'purple':
+    case 'violet':
+      return 'text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300 hover:bg-purple-50 dark:hover:bg-purple-950/40';
+    default:
+      return 'text-gray-600 dark:text-slate-400 hover:text-gray-800 dark:hover:text-slate-200 hover:bg-gray-100 dark:hover:bg-slate-700/60';
+  }
+}
+
+function getBulkActionColorClass(color) {
+  switch (color) {
+    case 'green':
+      return 'text-green-600 dark:text-green-400 border-green-200 dark:border-green-800 hover:bg-green-50 dark:hover:bg-green-950/40';
+    case 'red':
+      return 'text-red-600 dark:text-red-400 border-red-200 dark:border-red-800 hover:bg-red-50 dark:hover:bg-red-950/40';
+    case 'blue':
+    case 'indigo':
+      return 'text-indigo-600 dark:text-indigo-400 border-indigo-200 dark:border-indigo-800 hover:bg-indigo-50 dark:hover:bg-indigo-950/40';
+    case 'amber':
+    case 'yellow':
+      return 'text-amber-600 dark:text-amber-400 border-amber-200 dark:border-amber-800 hover:bg-amber-50 dark:hover:bg-amber-950/40';
+    case 'purple':
+    case 'violet':
+      return 'text-purple-600 dark:text-purple-400 border-purple-200 dark:border-purple-800 hover:bg-purple-50 dark:hover:bg-purple-950/40';
+    default:
+      return 'text-gray-700 dark:text-slate-300 border-gray-300 dark:border-slate-600 hover:bg-gray-50 dark:hover:bg-slate-700/40';
+  }
+}
+
+async function executeRecordAction(action, record, modelName, modelMeta, onSuccess) {
+  if (action.confirm) {
+    const msg = action.confirmMessage || ('Are you sure you want to perform "' + action.label + '"?');
+    const isConfirmed = await confirmAction({ title: action.label, message: msg, danger: action.color === 'red' });
+    if (!isConfirmed) return;
+  }
+  const primaryKey = modelMeta?.primaryKey || 'id';
+  const recId = record[primaryKey];
+  const busyKey = action.id + '-' + recId;
+  state.actionInProgress = busyKey;
+  m.redraw();
+  try {
+    const res = await api.post('/extensions/actions/' + action.id + '/' + modelName + '/' + recId);
+    const msg = res?.result?.message || res?.message;
+    if (msg) {
+      notifySuccess(msg);
+    }
+    const redirectUrl = res?.result?.redirect || res?.redirect;
+    if (redirectUrl) {
+      m.route.set(redirectUrl);
+      return;
+    }
+    if (typeof onSuccess === 'function') {
+      await onSuccess(res);
+    } else if (typeof loadRecords === 'function' && state.pagination) {
+      loadRecords(modelName, state.pagination.page);
+    }
+  } catch (err) {
+    const errText = 'Action failed: ' + (err.message || err);
+    notifyError(errText);
+  } finally {
+    state.actionInProgress = null;
+    m.redraw();
+  }
+}
+
+async function executeBulkAction(action, modelName, modelMeta) {
+  const count = state.selectAllMode ? state.pagination.total : state.selectedRecords.size;
+  if (action.confirm) {
+    const msg = action.confirmMessage || ('Perform "' + action.label + '" on ' + count + ' records?');
+    const isConfirmed = await confirmAction({ title: action.label, message: msg, danger: action.color === 'red' });
+    if (!isConfirmed) return;
+  }
+  state.bulkActionInProgress = true;
+  m.redraw();
+  try {
+    const payload = state.selectAllMode
+      ? { selectAll: true, filters: state.filters, trashed: state.trashedView }
+      : { ids: Array.from(state.selectedRecords), trashed: state.trashedView };
+    const res = await api.post('/extensions/bulk-actions/' + action.id + '/' + modelName, payload);
+    state.selectedRecords = new Set();
+    state.selectAllMode = false;
+    loadRecords(modelName, state.pagination.page);
+    if (res?.result?.message || res?.message) {
+      const msg = res.result?.message || res.message;
+      notifySuccess(msg);
+    }
+  } catch (err) {
+    const errText = 'Bulk action failed: ' + (err.message || err);
+    notifyError(errText);
+  } finally {
+    state.bulkActionInProgress = false;
+    m.redraw();
+  }
+}
+
 // Record List Component - displays records with dynamic columns
 const RecordList = {
   oninit(vnode) {
@@ -25,8 +210,10 @@ const RecordList = {
   view: (vnode) => {
     const modelName = m.route.param('model');
     const modelMeta = state.currentModelMeta;
-    const displayColumns = modelMeta ? getDisplayColumns(modelMeta.columns) : [];
+    const displayColumns = modelMeta ? getDisplayColumns(modelMeta.columns, modelMeta) : [];
     const primaryKey = modelMeta?.primaryKey || 'id';
+    const customActions = getModelActions(modelName, modelMeta);
+    const customBulkActions = getModelBulkActions(modelName, modelMeta);
     
     // Count active filters
     const activeFilterCount = Object.values(state.filters || {}).filter(filterPayloadIsActive).length;
@@ -101,7 +288,7 @@ const RecordList = {
                 if (state.trashedView) payload.trashed = 'only';
                 await downloadDataExchangeXlsx(modelName, payload);
               } catch (err) {
-                alert('Error: ' + err.message);
+                notifyError('Error: ' + err.message);
               }
             },
           }, [
@@ -119,7 +306,12 @@ const RecordList = {
               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 mode = (await confirmAction({
+                title: 'Import Mode',
+                message: 'Confirm to upsert records matching existing IDs, or cancel to insert as new records only.',
+                confirmText: 'Upsert by ID',
+                cancelText: 'Insert only'
+              })) ? 'upsert' : 'insert';
               const upsertKey = 'id';
               const fd = new FormData();
               fd.append('file', file);
@@ -137,10 +329,10 @@ const RecordList = {
                 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);
+                notifySuccess(msg);
                 loadRecords(modelName, state.pagination.page, state.filters);
               } catch (err) {
-                alert('Error: ' + err.message);
+                notifyError('Error: ' + err.message);
               }
             },
           }) : null,
@@ -155,7 +347,7 @@ const RecordList = {
             ),
             'Import',
           ]) : 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', {
+          !state.trashedView && !modelMeta?.readOnly && modelMeta?.permissions?.create !== false ? 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;
@@ -259,7 +451,7 @@ const RecordList = {
                   ? m('button.inline-flex.items-center.gap-1.px-3.py-1.5.text-sm.font-medium.text-green-600.bg-white dark:bg-slate-800.border.border-green-200.rounded.hover:bg-green-50.transition-colors', {
                       disabled: state.bulkActionInProgress,
                       onclick: async () => {
-                        if (!confirm('Restore the selected records?')) return;
+                        if (!(await confirmAction({ title: 'Restore Records', message: 'Restore the selected records?', confirmText: 'Restore' }))) return;
                         state.bulkActionInProgress = true;
                         m.redraw();
                         try {
@@ -269,9 +461,10 @@ const RecordList = {
                           await api.post('/extensions/bulk-actions/bulk-restore/' + modelName, payload);
                           state.selectedRecords = new Set();
                           state.selectAllMode = false;
+                          notifySuccess('Records restored successfully');
                           loadRecords(modelName, 1);
                         } catch (err) {
-                          alert('Error: ' + err.message);
+                          notifyError('Error: ' + err.message);
                         } finally {
                           state.bulkActionInProgress = false;
                           m.redraw();
@@ -283,11 +476,11 @@ const RecordList = {
                       ),
                       'Restore',
                     ])
-                  : m('button.inline-flex.items-center.gap-1.px-3.py-1.5.text-sm.font-medium.text-red-600.bg-white dark:bg-slate-800.border.border-red-200.rounded.hover:bg-red-50.transition-colors', {
+                  : (!modelMeta?.readOnly && modelMeta?.permissions?.delete !== false ? m('button.inline-flex.items-center.gap-1.px-3.py-1.5.text-sm.font-medium.text-red-600.bg-white dark:bg-slate-800.border.border-red-200.rounded.hover:bg-red-50.transition-colors', {
                       disabled: state.bulkActionInProgress,
                       onclick: async () => {
                         const count = state.selectAllMode ? state.pagination.total : state.selectedRecords.size;
-                        if (!confirm('Are you sure you want to delete ' + count + ' records? This action cannot be undone.')) return;
+                        if (!(await confirmAction({ title: 'Delete Records', message: 'Are you sure you want to delete ' + count + ' records? This action cannot be undone.', danger: true, confirmText: 'Delete' }))) return;
                         state.bulkActionInProgress = true;
                         m.redraw();
                         try {
@@ -297,9 +490,10 @@ const RecordList = {
                           await api.post('/extensions/bulk-actions/bulk-delete/' + modelName, payload);
                           state.selectedRecords = new Set();
                           state.selectAllMode = false;
+                          notifySuccess('Records deleted successfully');
                           loadRecords(modelName, 1);
                         } catch (err) {
-                          alert('Error: ' + err.message);
+                          notifyError('Error: ' + err.message);
                         } finally {
                           state.bulkActionInProgress = false;
                           m.redraw();
@@ -310,7 +504,17 @@ const RecordList = {
                         m('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16' })
                       ),
                       'Delete',
-                    ]),
+                    ]) : null),
+                // Custom bulk actions
+                !state.trashedView && customBulkActions.map(action =>
+                  m('button.inline-flex.items-center.gap-1.px-3.py-1.5.text-sm.font-medium.bg-white.dark:bg-slate-800.border.rounded.transition-colors.' + getBulkActionColorClass(action.color), {
+                    disabled: state.bulkActionInProgress,
+                    onclick: () => executeBulkAction(action, modelName, modelMeta),
+                  }, [
+                    action.icon ? renderActionIcon(action.icon) : null,
+                    action.label,
+                  ])
+                ),
                 !state.trashedView ? m('button.inline-flex.items-center.gap-1.px-3.py-1.5.text-sm.font-medium.text-blue-600.bg-white dark:bg-slate-800.border.border-blue-200.rounded.hover:bg-blue-50.transition-colors', {
                   disabled: state.bulkActionInProgress,
                   onclick: async () => {
@@ -335,7 +539,7 @@ const RecordList = {
                         URL.revokeObjectURL(url);
                       }, 1000);
                     } catch (err) {
-                      alert('Error: ' + err.message);
+                      notifyError('Error: ' + err.message);
                     } finally {
                       state.bulkActionInProgress = false;
                       m.redraw();
@@ -357,7 +561,7 @@ const RecordList = {
                         ? { selectAll: true, filters: state.filters }
                         : { ids: Array.from(state.selectedRecords) };
                       if (!state.selectAllMode && (!payload.ids || payload.ids.length === 0)) {
-                        alert('Please select at least one record to export');
+                        notifyWarning('Please select at least one record to export');
                         return;
                       }
                       const response = await api.post('/extensions/export?model=' + modelName + '&format=csv', payload);
@@ -375,7 +579,7 @@ const RecordList = {
                         URL.revokeObjectURL(url);
                       }, 1000);
                     } catch (err) {
-                      alert('Error: ' + err.message);
+                      notifyError('Error: ' + err.message);
                     } finally {
                       state.bulkActionInProgress = false;
                       m.redraw();
@@ -397,13 +601,13 @@ const RecordList = {
                         ? { selectAll: true, filters: state.filters }
                         : { ids: Array.from(state.selectedRecords) };
                       if (!state.selectAllMode && (!payload.ids || payload.ids.length === 0)) {
-                        alert('Please select at least one record to export');
+                        notifyWarning('Please select at least one record to export');
                         return;
                       }
                       if (state.trashedView) payload.trashed = 'only';
                       await downloadDataExchangeXlsx(modelName, payload);
                     } catch (err) {
-                      alert('Error: ' + err.message);
+                      notifyError('Error: ' + err.message);
                     } finally {
                       state.bulkActionInProgress = false;
                       m.redraw();
@@ -543,32 +747,53 @@ const RecordList = {
                             onclick: async () => {
                               try {
                                 await api.post('/models/' + modelName + '/records/' + record[primaryKey] + '/restore');
+                                notifySuccess('Record restored successfully');
                                 loadRecords(modelName, state.pagination.page);
                               } catch (err) {
-                                alert('Error: ' + err.message);
+                                notifyError('Error: ' + err.message);
                               }
                             },
                           }, 'Restore')
                         : [
+                            // Custom row actions
+                            ...customActions
+                              .filter(action => shouldShowAction(action, record))
+                              .map(action =>
+                                m('button.inline-flex.items-center.px-2.py-1.text-sm.rounded.mr-1.transition-colors.' + getActionColorClass(action.color), {
+                                  disabled: state.actionInProgress === (action.id + '-' + record[primaryKey]),
+                                  onclick: () => executeRecordAction(action, record, modelName, modelMeta),
+                                }, [
+                                  action.icon ? m('span.mr-1', renderActionIcon(action.icon)) : null,
+                                  state.actionInProgress === (action.id + '-' + record[primaryKey]) ? '...' : action.label,
+                                ])
+                              ),
                             m('button.inline-flex.items-center.px-2.py-1.text-sm.text-indigo-600.dark:text-indigo-400.hover:text-indigo-800.dark:hover:text-indigo-300.hover:bg-indigo-50.dark:hover:bg-indigo-950/40.rounded.mr-1.transition-colors', {
                               onclick: () => {
                                 state.currentRecord = record;
                                 state.editing = true;
                                 m.route.set('/models/' + modelName + '/edit/' + record[primaryKey]);
                               },
-                            }, 'Edit'),
-                            m('button.inline-flex.items-center.px-2.py-1.text-sm.text-red-600.dark:text-red-400.hover:text-red-800.dark:hover:text-red-300.hover:bg-red-50.dark:hover:bg-red-950/40.rounded.transition-colors', {
+                            }, modelMeta?.readOnly || modelMeta?.permissions?.edit === false ? 'View' : 'Edit'),
+                            !modelMeta?.readOnly && modelMeta?.permissions?.delete !== false ? m('button.inline-flex.items-center.px-2.py-1.text-sm.text-red-600.dark:text-red-400.hover:text-red-800.dark:hover:text-red-300.hover:bg-red-50.dark:hover:bg-red-950/40.rounded.transition-colors', {
                               onclick: async () => {
-                                if (confirm('Are you sure you want to delete this record?')) {
+                                const isConfirmed = await confirmAction({
+                                  title: 'Delete Record',
+                                  message: 'Are you sure you want to delete this record?',
+                                  danger: true,
+                                  confirmText: 'Delete'
+                                });
+                                if (isConfirmed) {
                                   try {
                                     await api.delete('/models/' + modelName + '/records/' + record[primaryKey]);
+                                    notifySuccess('Record deleted successfully');
                                     loadRecords(modelName, state.pagination.page);
                                   } catch (err) {
-                                    alert('Error: ' + err.message);
+                                    const errMsg = 'Error: ' + err.message;
+                                    notifyError(errMsg);
                                   }
                                 }
                               },
-                            }, 'Delete'),
+                            }, 'Delete') : null,
                           ],
                     ]),
                   ])

package/plugins/admin-panel/client/parts/09-record-form.js

@@ -144,6 +144,10 @@ const RecordForm = {
     api.get('/models/' + modelName)
       .then(modelMeta => {
         state.currentModelMeta = modelMeta;
+        if (typeof setAdminPageTitle === 'function') {
+          const label = modelMeta?.label || modelName;
+          setAdminPageTitle((id && id !== 'new' ? 'Edit ' : 'New ') + label);
+        }
         
         // Initialize form data with defaults
         modelMeta.columns.forEach(col => {
@@ -179,16 +183,26 @@ const RecordForm = {
     const id = m.route.param('id');
     const isNew = !id || id === 'new';
     const modelMeta = state.currentModelMeta;
+    const isFormReadOnly = modelMeta?.readOnly === true ||
+      (isNew && modelMeta?.permissions?.create === false) ||
+      (!isNew && modelMeta?.permissions?.edit === false);
     
+    const customActions = !isNew && state.currentRecord && typeof getModelActions === 'function'
+      ? getModelActions(modelName, modelMeta).filter(action => typeof shouldShowAction === 'function' ? shouldShowAction(action, state.currentRecord) : true)
+      : [];
+
     const breadcrumbs = [
       { label: modelMeta?.label || modelName, href: '/models/' + modelName },
-      { label: isNew ? 'New' : 'Edit #' + id, href: '#' },
+      { label: isNew ? 'New' : (isFormReadOnly ? 'View #' + id : 'Edit #' + id), href: '#' },
     ];
     
     return m(Layout, { breadcrumbs }, [
       m('.flex.items-center.justify-between.mb-6', [
-        m('h2.text-2xl.font-bold.text-gray-900.dark:text-slate-100', isNew ? 'New Record' : 'Edit Record'),
-        modelMeta ? m('span.text-gray-500.dark:text-slate-400', modelMeta.label || modelMeta.name) : null,
+        m('h2.text-2xl.font-bold.text-gray-900.dark:text-slate-100', isNew ? 'New Record' : (isFormReadOnly ? 'View Record' : 'Edit Record')),
+        m('.flex.items-center.gap-2', [
+          isFormReadOnly ? m('span.px-2.py-0.5.text-xs.font-semibold.rounded.bg-amber-100.text-amber-800.dark:bg-amber-900/40.dark:text-amber-300', 'Read-Only') : null,
+          modelMeta ? m('span.text-gray-500.dark:text-slate-400', modelMeta.label || modelMeta.name) : null,
+        ]),
       ]),
       
       state.loading ? m('p.text-gray-600.dark:text-slate-400', 'Loading...') :
@@ -198,6 +212,7 @@ const RecordForm = {
         style: 'min-height: calc(100vh - 280px);',
         onsubmit: async (e) => {
           e.preventDefault();
+          if (isFormReadOnly) return;
           state.error = null;
           state.fieldErrors = {};
 
@@ -261,6 +276,9 @@ const RecordForm = {
             } else {
               await api.put('/models/' + modelName + '/records/' + id, payload);
             }
+            if (typeof window !== 'undefined' && window.Admin && typeof window.Admin.toast === 'function') {
+              window.Admin.toast.success(isNew ? 'Record created successfully' : 'Record updated successfully');
+            }
             m.route.set('/models/' + modelName);
           } catch (err) {
             state.error = err.message || 'Failed to save record';
@@ -287,12 +305,13 @@ const RecordForm = {
             // Hide hidden fields
             if (col.ui && col.ui.hidden) return null;
             
-            const isReadonly = !!autoType || (col.ui && col.ui.readonly);
+            const isReadonly = isFormReadOnly || !!autoType || (col.ui && col.ui.readonly);
             const renderer = getFieldRenderer(col, modelMeta);
             const value = state.formData[col.name];
             const fieldError = state.fieldErrors ? state.fieldErrors[col.name] : null;
             
             const onChange = (newValue) => {
+              if (isFormReadOnly) return;
               state.formData[col.name] = newValue;
               if (state.fieldErrors && state.fieldErrors[col.name]) {
                 delete state.fieldErrors[col.name];
@@ -304,14 +323,42 @@ const RecordForm = {
         ]),
         
         // Sticky footer buttons
-        m('.flex.gap-4.p-4.border-t.border-gray-200.dark:border-slate-700.bg-gray-50.dark:bg-slate-900.sticky.bottom-0', [
-          m('button.bg-blue-600.dark:bg-blue-500.text-white.px-6.py-2.rounded-lg.hover:bg-blue-700.dark:hover:bg-blue-600.disabled:opacity-50', {
-            type: 'submit',
-            disabled: state.loading,
-          }, state.loading ? 'Saving...' : 'Save'),
-          m('button.bg-gray-200.dark:bg-slate-700.text-gray-800.dark:text-slate-200.px-6.py-2.rounded.hover:bg-gray-300.dark:hover:bg-slate-600[type=button]', {
-            onclick: () => m.route.set('/models/' + modelName),
-          }, 'Cancel'),
+        m('.flex.items-center.justify-between.gap-4.p-4.border-t.border-gray-200.dark:border-slate-700.bg-gray-50.dark:bg-slate-900.sticky.bottom-0', [
+          m('.flex.items-center.gap-3', [
+            isFormReadOnly
+              ? m('button.bg-gray-600.dark:bg-slate-700.text-white.px-6.py-2.rounded-lg.hover:bg-gray-700.dark:hover:bg-slate-600[type=button]', {
+                  onclick: () => m.route.set('/models/' + modelName),
+                }, 'Back')
+              : [
+                  m('button.bg-blue-600.dark:bg-blue-500.text-white.px-6.py-2.rounded-lg.hover:bg-blue-700.dark:hover:bg-blue-600.disabled:opacity-50', {
+                    type: 'submit',
+                    disabled: state.loading,
+                  }, state.loading ? 'Saving...' : 'Save'),
+                  m('button.bg-gray-200.dark:bg-slate-700.text-gray-800.dark:text-slate-200.px-6.py-2.rounded.hover:bg-gray-300.dark:hover:bg-slate-600[type=button]', {
+                    onclick: () => m.route.set('/models/' + modelName),
+                  }, 'Cancel'),
+                ],
+          ]),
+          !isNew && state.currentRecord && customActions.length > 0 ? m('.flex.items-center.gap-2', customActions.map(action => {
+            const isBusy = state.actionInProgress === (action.id + '-' + id);
+            return m('button.px-3.py-2.text-xs.font-medium.rounded-lg.border.flex.items-center.gap-1.5.transition-colors[type=button]', {
+              class: typeof getBulkActionColorClass === 'function' ? getBulkActionColorClass(action.color) : 'text-gray-700 dark:text-slate-300 border-gray-300 dark:border-slate-600',
+              disabled: isBusy || state.loading,
+              title: action.label,
+              onclick: () => executeRecordAction(action, state.currentRecord, modelName, modelMeta, async () => {
+                const refreshed = await api.get('/models/' + modelName + '/records/' + id);
+                if (refreshed?.data) {
+                  state.currentRecord = refreshed.data;
+                  Object.keys(refreshed.data).forEach(key => {
+                    state.formData[key] = refreshed.data[key];
+                  });
+                }
+              }),
+            }, [
+              isBusy ? m('span.inline-block.animate-spin', '⟳') : (action.icon && typeof renderActionIcon === 'function' ? renderActionIcon(action.icon) : null),
+              m('span', action.label),
+            ]);
+          })) : null,
         ]),
       ]),
     ]);

package/plugins/admin-panel/client/parts/10-export-registry.js

@@ -8,4 +8,27 @@ window.__ADMIN_COMPONENTS__ = {
   RecordForm,
   api,
   state,
+  notify: typeof window !== 'undefined' ? window.notify : undefined,
+  confirmModal: typeof window !== 'undefined' ? window.confirmModal : undefined,
+  toastState: typeof window !== 'undefined' ? window.toastState : undefined,
+  confirmState: typeof window !== 'undefined' ? window.confirmState : undefined,
+  AdminUI: typeof window !== 'undefined' ? window.AdminUI : undefined,
+  Admin: typeof window !== 'undefined' ? window.Admin : undefined,
+  ToastContainer: typeof window !== 'undefined' ? window.ToastContainer : undefined,
+  ConfirmModalContainer: typeof window !== 'undefined' ? window.ConfirmModalContainer : undefined,
 };
+
+if (typeof window !== 'undefined') {
+  window.Admin = window.Admin || {};
+  window.Admin.api = api;
+  window.Admin.state = state;
+  if (typeof window.AdminUI !== 'undefined') {
+    window.Admin.ui = window.AdminUI;
+  }
+  if (typeof window.notify !== 'undefined') {
+    window.Admin.toast = window.notify;
+  }
+  if (typeof window.confirmModal !== 'undefined') {
+    window.Admin.confirm = window.confirmModal;
+  }
+}

package/plugins/admin-panel/client/verify-spa-parts.js

@@ -9,11 +9,13 @@
 const path = require('path');
 const { buildComponentsBody } = require(path.join(__dirname, 'load-parts.js'));
 
+const vm = require('vm');
 const body = buildComponentsBody();
 const checks = [
   ['has api helper', () => body.includes('const api =')],
   ['has Mithril globals', () => body.includes('window.__ADMIN_COMPONENTS__')],
   ['has reasonable size', () => body.length > 50_000],
+  ['valid JS syntax', () => { vm.compileFunction(body); return true; }],
 ];
 
 let failed = false;

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

@@ -193,19 +193,22 @@ function registerModule(config, deps) {
     menuList = menuList.concat(dirMenuItems);
   }
 
+  const moduleTitle = config.title;
+
   for (const p of pagesList) {
     if (p.menu && !menuList.some(m => m.id === p.id)) {
+      const pageLabel = p.title || moduleTitle || p.id;
       if (p.menu === true) {
         menuList.push({
           id: p.id,
-          label: p.title,
+          label: pageLabel,
           path: p.path,
           icon: p.icon,
         });
       } else if (typeof p.menu === 'object') {
         menuList.push({
           id: p.id,
-          label: p.title,
+          label: pageLabel,
           path: p.path,
           icon: p.icon,
           ...p.menu,
@@ -215,7 +218,7 @@ function registerModule(config, deps) {
   }
 
   if (pagesList.length > 0) {
-    registerPages(config.id, pagesList, { registry, adminPath, ctx, optionalAuth, serveAdminPanel });
+    registerPages(config.id, pagesList, { registry, adminPath, ctx, optionalAuth, serveAdminPanel }, moduleTitle);
   }
 
   if (menuList.length > 0) {
@@ -246,7 +249,7 @@ function registerPageDir(dirPath, deps) {
   }
 }
 
-function registerPages(moduleId, pages, deps) {
+function registerPages(moduleId, pages, deps, moduleTitle) {
   if (!Array.isArray(pages)) {
     throw new Error(`Module "${moduleId}": pages must be an array`);
   }
@@ -257,8 +260,9 @@ function registerPages(moduleId, pages, deps) {
     const pageId = page.id || moduleId;
 
     let htmlContent = page.html || null;
+    let resolvedHtmlPath = null;
     if (page.htmlFile) {
-      const resolvedHtmlPath = path.resolve(page.htmlFile);
+      resolvedHtmlPath = path.resolve(page.htmlFile);
       if (!fs.existsSync(resolvedHtmlPath)) {
         throw new Error(`Module "${moduleId}", page "${pageId}": htmlFile not found at ${page.htmlFile}`);
       }
@@ -266,7 +270,8 @@ function registerPages(moduleId, pages, deps) {
     }
 
     registry.registerPage(pageId, {
-      title: page.title,
+      title: page.title || moduleTitle,
+      documentTitle: page.documentTitle,
       path: page.path,
       icon: page.icon,
       description: page.description,
@@ -275,6 +280,7 @@ function registerPages(moduleId, pages, deps) {
       iframe: page.iframe,
       url: page.url || page.iframeUrl || undefined,
       html: htmlContent || undefined,
+      htmlFile: resolvedHtmlPath || (page.htmlFile ? path.resolve(page.htmlFile) : undefined),
     });
 
     if (page.componentFile) {
@@ -284,7 +290,7 @@ function registerPages(moduleId, pages, deps) {
       }
       const rawCode = fs.readFileSync(resolvedPath, 'utf8');
       const formattedCode = formatClientComponent(pageId, rawCode);
-      registry.registerClientComponent(pageId, formattedCode);
+      registry.registerClientComponent(pageId, formattedCode, resolvedPath);
     } else if (page.component) {
       const formattedCode = formatClientComponent(pageId, page.component);
       registry.registerClientComponent(pageId, formattedCode);