webspresso 0.0.72 → 0.0.74

package/plugins/admin-panel/components.js

@@ -32,6 +32,38 @@ const api = {
   delete(path) { return this.request(path, { method: 'DELETE' }); },
 };
 
+/** POST /data-exchange/export/:model — validates JSON errors vs .xlsx blob */
+async function downloadDataExchangeXlsx(modelName, payload) {
+  const adminPath = window.__ADMIN_PATH__ || '/_admin';
+  const res = await fetch(adminPath + '/api/data-exchange/export/' + modelName, {
+    method: 'POST',
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(payload),
+  });
+  const ct = (res.headers.get('content-type') || '').toLowerCase();
+  if (!res.ok || ct.indexOf('spreadsheet') === -1) {
+    var msg = 'Export failed';
+    try {
+      if (ct.indexOf('json') !== -1) {
+        var j = await res.json();
+        msg = j.error || msg;
+      } else {
+        var t = await res.text();
+        if (t) msg = t.slice(0, 300);
+      }
+    } catch (e) {}
+    throw new Error(msg);
+  }
+  const blob = await res.blob();
+  var url = URL.createObjectURL(blob);
+  var a = document.createElement('a');
+  a.href = url;
+  a.download = modelName + '-export.xlsx';
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
 // Helper: Capitalize first letter of each word
 function capitalizeWords(str) {
   if (!str) return '';
@@ -659,7 +691,7 @@ const FieldRenderers = {
     
     return m('.mb-4', [
       m('label.block.text-sm.font-medium.text-gray-700 dark:text-slate-300.mb-1', { for: col.name }, label),
-      m('input.w-full.px-3.py-2.border.border-gray-300 dark:border-slate-600.rounded.focus:outline-none.focus:ring-2.focus:ring-blue-500', {
+      m('input.w-full.px-3.py-2.border.border-gray-300.dark:border-slate-600.rounded-md.bg-white.dark:bg-slate-900/70.text-gray-900.dark:text-slate-100.placeholder-gray-400.dark:placeholder-slate-500.focus:outline-none.focus:ring-2.focus:ring-blue-500.dark:focus:ring-blue-400', {
         id: col.name,
         name: col.name,
         type: inputType,
@@ -671,7 +703,7 @@ const FieldRenderers = {
         required: !col.nullable && !readonly,
         readonly: readonly,
         disabled: readonly,
-        class: readonly ? 'bg-gray-100 cursor-not-allowed' : '',
+        class: readonly ? 'bg-gray-100 dark:bg-slate-800 cursor-not-allowed' : '',
         oninput: (e) => onChange(e.target.value),
       }),
       hint ? m('p.text-xs.text-gray-500 dark:text-slate-400.mt-1', hint) : null,
@@ -689,7 +721,7 @@ const FieldRenderers = {
     
     return m('.mb-4', [
       m('label.block.text-sm.font-medium.text-gray-700 dark:text-slate-300.mb-1', { for: col.name }, label),
-      m('textarea.w-full.px-3.py-2.border.border-gray-300 dark:border-slate-600.rounded.focus:outline-none.focus:ring-2.focus:ring-blue-500', {
+      m('textarea.w-full.px-3.py-2.border.border-gray-300.dark:border-slate-600.rounded-md.bg-white.dark:bg-slate-900/70.text-gray-900.dark:text-slate-100.placeholder-gray-400.dark:placeholder-slate-500.focus:outline-none.focus:ring-2.focus:ring-blue-500.dark:focus:ring-blue-400', {
         id: col.name,
         name: col.name,
         rows: rows,
@@ -699,7 +731,7 @@ const FieldRenderers = {
         required: !col.nullable && !readonly,
         readonly: readonly,
         disabled: readonly,
-        class: readonly ? 'bg-gray-100 cursor-not-allowed' : '',
+        class: readonly ? 'bg-gray-100 dark:bg-slate-800 cursor-not-allowed' : '',
         oninput: (e) => onChange(e.target.value),
       }, value || ''),
       hint ? m('p.text-xs.text-gray-500 dark:text-slate-400.mt-1', hint) : null,
@@ -716,7 +748,7 @@ const FieldRenderers = {
     
     return m('.mb-4', [
       m('label.block.text-sm.font-medium.text-gray-700 dark:text-slate-300.mb-1', { for: col.name }, label),
-      m('input.w-full.px-3.py-2.border.border-gray-300 dark:border-slate-600.rounded.focus:outline-none.focus:ring-2.focus:ring-blue-500', {
+      m('input.w-full.px-3.py-2.border.border-gray-300.dark:border-slate-600.rounded-md.bg-white.dark:bg-slate-900/70.text-gray-900.dark:text-slate-100.placeholder-gray-400.dark:placeholder-slate-500.focus:outline-none.focus:ring-2.focus:ring-blue-500.dark:focus:ring-blue-400', {
         id: col.name,
         name: col.name,
         type: 'number',
@@ -728,7 +760,7 @@ const FieldRenderers = {
         required: !col.nullable && !readonly,
         readonly: readonly,
         disabled: readonly,
-        class: readonly ? 'bg-gray-100 cursor-not-allowed' : '',
+        class: readonly ? 'bg-gray-100 dark:bg-slate-800 cursor-not-allowed' : '',
         oninput: (e) => onChange(e.target.value === '' ? null : parseInt(e.target.value, 10)),
       }),
       hint ? m('p.text-xs.text-gray-500 dark:text-slate-400.mt-1', hint) : null,
@@ -745,7 +777,7 @@ const FieldRenderers = {
     
     return m('.mb-4', [
       m('label.block.text-sm.font-medium.text-gray-700 dark:text-slate-300.mb-1', { for: col.name }, label),
-      m('input.w-full.px-3.py-2.border.border-gray-300 dark:border-slate-600.rounded.focus:outline-none.focus:ring-2.focus:ring-blue-500', {
+      m('input.w-full.px-3.py-2.border.border-gray-300.dark:border-slate-600.rounded-md.bg-white.dark:bg-slate-900/70.text-gray-900.dark:text-slate-100.placeholder-gray-400.dark:placeholder-slate-500.focus:outline-none.focus:ring-2.focus:ring-blue-500.dark:focus:ring-blue-400', {
         id: col.name,
         name: col.name,
         type: 'number',
@@ -757,7 +789,7 @@ const FieldRenderers = {
         required: !col.nullable && !readonly,
         readonly: readonly,
         disabled: readonly,
-        class: readonly ? 'bg-gray-100 cursor-not-allowed' : '',
+        class: readonly ? 'bg-gray-100 dark:bg-slate-800 cursor-not-allowed' : '',
         oninput: (e) => onChange(e.target.value === '' ? null : parseFloat(e.target.value)),
       }),
       hint ? m('p.text-xs.text-gray-500 dark:text-slate-400.mt-1', hint) : null,
@@ -772,14 +804,14 @@ const FieldRenderers = {
     
     return m('.mb-4', [
       m('label.flex.items-center.cursor-pointer', { class: readonly ? 'cursor-not-allowed' : '' }, [
-        m('input.mr-2.w-4.h-4', {
+        m('input.mr-2.w-4.h-4.rounded.border-gray-300.dark:border-slate-600.text-indigo-600.focus:ring-indigo-500', {
           type: 'checkbox',
           name: col.name,
           checked: Boolean(value),
           disabled: readonly,
           onchange: (e) => onChange(e.target.checked),
         }),
-        m('span.text-sm.font-medium.text-gray-700', label),
+        m('span.text-sm.font-medium.text-gray-700.dark:text-slate-300', label),
       ]),
       hint ? m('p.text-xs.text-gray-500 dark:text-slate-400.mt-1', hint) : null,
     ]);
@@ -796,7 +828,7 @@ const FieldRenderers = {
     
     return m('.mb-4', [
       m('label.block.text-sm.font-medium.text-gray-700 dark:text-slate-300.mb-1', { for: col.name }, label),
-      m('input.w-full.px-3.py-2.border.border-gray-300 dark:border-slate-600.rounded.focus:outline-none.focus:ring-2.focus:ring-blue-500', {
+      m('input.w-full.px-3.py-2.border.border-gray-300.dark:border-slate-600.rounded-md.bg-white.dark:bg-slate-900/70.text-gray-900.dark:text-slate-100.placeholder-gray-400.dark:placeholder-slate-500.focus:outline-none.focus:ring-2.focus:ring-blue-500.dark:focus:ring-blue-400', {
         id: col.name,
         name: col.name,
         type: 'date',
@@ -807,7 +839,7 @@ const FieldRenderers = {
         required: !col.nullable && !readonly,
         readonly: readonly,
         disabled: readonly,
-        class: readonly ? 'bg-gray-100 cursor-not-allowed' : '',
+        class: readonly ? 'bg-gray-100 dark:bg-slate-800 cursor-not-allowed' : '',
         oninput: (e) => onChange(e.target.value),
       }),
       hint ? m('p.text-xs.text-gray-500 dark:text-slate-400.mt-1', hint) : null,
@@ -825,7 +857,7 @@ const FieldRenderers = {
     
     return m('.mb-4', [
       m('label.block.text-sm.font-medium.text-gray-700 dark:text-slate-300.mb-1', { for: col.name }, label),
-      m('input.w-full.px-3.py-2.border.border-gray-300 dark:border-slate-600.rounded.focus:outline-none.focus:ring-2.focus:ring-blue-500', {
+      m('input.w-full.px-3.py-2.border.border-gray-300.dark:border-slate-600.rounded-md.bg-white.dark:bg-slate-900/70.text-gray-900.dark:text-slate-100.placeholder-gray-400.dark:placeholder-slate-500.focus:outline-none.focus:ring-2.focus:ring-blue-500.dark:focus:ring-blue-400', {
         id: col.name,
         name: col.name,
         type: 'datetime-local',
@@ -836,7 +868,7 @@ const FieldRenderers = {
         required: !col.nullable && !readonly,
         readonly: readonly,
         disabled: readonly,
-        class: readonly ? 'bg-gray-100 cursor-not-allowed' : '',
+        class: readonly ? 'bg-gray-100 dark:bg-slate-800 cursor-not-allowed' : '',
         oninput: (e) => onChange(e.target.value),
       }),
       hint ? m('p.text-xs.text-gray-500 dark:text-slate-400.mt-1', hint) : null,
@@ -852,13 +884,13 @@ const FieldRenderers = {
     
     return m('.mb-4', [
       m('label.block.text-sm.font-medium.text-gray-700 dark:text-slate-300.mb-1', { for: col.name }, label),
-      m('select.w-full.px-3.py-2.border.border-gray-300 dark:border-slate-600.rounded.focus:outline-none.focus:ring-2.focus:ring-blue-500', {
+      m('select.w-full.px-3.py-2.border.border-gray-300.dark:border-slate-600.rounded-md.bg-white.dark:bg-slate-900/70.text-gray-900.dark:text-slate-100.focus:outline-none.focus:ring-2.focus:ring-blue-500.dark:focus:ring-blue-400', {
         id: col.name,
         name: col.name,
         value: value || '',
         required: !col.nullable && !readonly,
         disabled: readonly,
-        class: readonly ? 'bg-gray-100 cursor-not-allowed' : '',
+        class: readonly ? 'bg-gray-100 dark:bg-slate-800 cursor-not-allowed' : '',
         onchange: (e) => onChange(e.target.value),
       }, [
         col.nullable ? m('option', { value: '' }, '-- Select --') : null,
@@ -879,7 +911,7 @@ const FieldRenderers = {
     
     return m('.mb-4', [
       m('label.block.text-sm.font-medium.text-gray-700 dark:text-slate-300.mb-1', { for: col.name }, label),
-      m('textarea.w-full.px-3.py-2.border.border-gray-300 dark:border-slate-600.rounded.font-mono.text-sm.focus:outline-none.focus:ring-2.focus:ring-blue-500', {
+      m('textarea.w-full.px-3.py-2.border.border-gray-300.dark:border-slate-600.rounded-md.bg-white.dark:bg-slate-900/70.text-gray-900.dark:text-slate-100.placeholder-gray-400.dark:placeholder-slate-500.font-mono.text-sm.focus:outline-none.focus:ring-2.focus:ring-blue-500.dark:focus:ring-blue-400', {
         id: col.name,
         name: col.name,
         rows: rows,
@@ -887,7 +919,7 @@ const FieldRenderers = {
         required: !col.nullable && !readonly,
         readonly: readonly,
         disabled: readonly,
-        class: readonly ? 'bg-gray-100 cursor-not-allowed' : '',
+        class: readonly ? 'bg-gray-100 dark:bg-slate-800 cursor-not-allowed' : '',
         oninput: (e) => {
           try {
             const parsed = JSON.parse(e.target.value);
@@ -912,7 +944,7 @@ const FieldRenderers = {
     
     return m('.mb-4', [
       m('label.block.text-sm.font-medium.text-gray-700 dark:text-slate-300.mb-1', { for: col.name }, label),
-      m('input.w-full.px-3.py-2.border.border-gray-300 dark:border-slate-600.rounded.focus:outline-none.focus:ring-2.focus:ring-blue-500', {
+      m('input.w-full.px-3.py-2.border.border-gray-300.dark:border-slate-600.rounded-md.bg-white.dark:bg-slate-900/70.text-gray-900.dark:text-slate-100.placeholder-gray-400.dark:placeholder-slate-500.focus:outline-none.focus:ring-2.focus:ring-blue-500.dark:focus:ring-blue-400', {
         id: col.name,
         name: col.name,
         type: 'text',
@@ -923,7 +955,7 @@ const FieldRenderers = {
         required: !col.nullable && !readonly,
         readonly: readonly,
         disabled: readonly,
-        class: readonly ? 'bg-gray-100 cursor-not-allowed' : '',
+        class: readonly ? 'bg-gray-100 dark:bg-slate-800 cursor-not-allowed' : '',
         oninput: (e) => {
           const arr = e.target.value.split(',').map(s => s.trim()).filter(s => s);
           onChange(arr);
@@ -1035,9 +1067,9 @@ const RichTextField = {
         label,
         required ? m('span.text-red-500', ' *') : null
       ),
-      m('div.border.border-gray-300 dark:border-slate-600.rounded', {
+      m('div.border.border-gray-300.dark:border-slate-600.rounded.bg-white.dark:bg-slate-900/50', {
         id: editorId,
-        class: readonly ? 'bg-gray-100 opacity-50' : '',
+        class: readonly ? 'bg-gray-100 dark:bg-slate-800 opacity-50' : '',
         style: 'min-height: 200px;'
       }),
       m('input[type=hidden]', {
@@ -1115,7 +1147,7 @@ const FileUploadField = {
     if (readonly) {
       return m('.mb-4', [
         m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-1', label, required ? m('span.text-red-500', ' *') : null),
-        value ? m('a.text-indigo-600.break-all', { href: value, target: '_blank', rel: 'noopener noreferrer' }, value) : m('span.text-gray-400', '—'),
+        value ? m('a.text-indigo-600.dark:text-indigo-400.break-all', { href: value, target: '_blank', rel: 'noopener noreferrer' }, value) : m('span.text-gray-400.dark:text-slate-500', '—'),
         hint ? m('p.text-xs.text-gray-500.dark:text-slate-400.mt-1', hint) : null,
       ]);
     }
@@ -1123,7 +1155,7 @@ const FileUploadField = {
       return m('.mb-4', [
         m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-1', { for: col.name }, label, required ? m('span.text-red-500', ' *') : null),
         m('p.text-xs.text-amber-700.dark:text-amber-400.mb-2', 'Upload URL is not configured. Enter a public URL or path manually.'),
-        m('input.w-full.px-3.py-2.border.border-gray-300.dark:border-slate-600.rounded.bg-white.dark:bg-slate-800', {
+        m('input.w-full.px-3.py-2.border.border-gray-300.dark:border-slate-600.rounded-md.bg-white.dark:bg-slate-900/70.text-gray-900.dark:text-slate-100.placeholder-gray-400.dark:placeholder-slate-500', {
           type: 'text',
           id: col.name,
           name: col.name,
@@ -1137,7 +1169,7 @@ const FileUploadField = {
     }
     return m('.mb-4', [
       m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-1', label, required ? m('span.text-red-500', ' *') : null),
-      m('div#' + dropZoneId + '.border-2.border-dashed.border-gray-300.dark:border-slate-600.rounded.p-8.text-center', { style: 'cursor: pointer;' }, [
+      m('div#' + dropZoneId + '.border-2.border-dashed.border-gray-300.dark:border-slate-600.rounded-lg.p-8.text-center.bg-gray-50.dark:bg-slate-900/40', { style: 'cursor: pointer;' }, [
         m('input[type=file].hidden', {
           id: 'file-input-' + col.name,
           accept: accept,
@@ -1153,7 +1185,7 @@ const FileUploadField = {
         ]),
         value ? m('.mt-4.text-left', [
           m('p.text-sm.text-gray-600.dark:text-slate-400.break-all', 'Current: ' + value),
-          m('button.text-red-600.hover:text-red-800.text-sm.mt-2', {
+          m('button.text-red-600.dark:text-red-400.hover:text-red-800.dark:hover:text-red-300.text-sm.mt-2', {
             type: 'button',
             onclick: function () { if (onChange) onChange(''); },
           }, 'Remove'),
@@ -1285,8 +1317,8 @@ const LoginForm = {
     m('.w-full.max-w-md', [
       m('.bg-white dark:bg-slate-800.rounded-2xl.shadow-2xl.p-6.sm:p-8', [
         m('div.text-center.mb-6', [
-          m('h1.text-2xl.sm:text-3xl.font-bold.text-gray-900', 'Admin Login'),
-          m('p.text-gray-500 dark:text-slate-400.text-sm.mt-1', 'Sign in to your account'),
+          m('h1.text-2xl.sm:text-3xl.font-bold.text-gray-900.dark:text-slate-50', 'Admin Login'),
+          m('p.text-gray-500.dark:text-slate-400.text-sm.mt-1', 'Sign in to your account'),
         ]),
         m('form', {
           onsubmit: async (e) => {
@@ -1308,10 +1340,10 @@ const LoginForm = {
             }
           }
         }, [
-          state.error ? m('.bg-red-50.border.border-red-200.text-red-700.px-4.py-3.rounded-lg.mb-4.text-sm', state.error) : null,
+          state.error ? m('.bg-red-50.border.border-red-200.text-red-700.dark:bg-red-950/50.dark:border-red-800/80.dark:text-red-200.px-4.py-3.rounded-lg.mb-4.text-sm', state.error) : null,
           m('.mb-4', [
-            m('label.block.text-sm.font-medium.text-gray-700 dark:text-slate-300.mb-2', { for: 'email' }, 'Email'),
-            m('input#email.w-full.px-3.py-2.5.border.border-gray-300 dark:border-slate-600.rounded-lg.focus:ring-2.focus:ring-blue-500.focus:border-blue-500.transition-colors', {
+            m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-2', { for: 'email' }, 'Email'),
+            m('input#email.w-full.px-3.py-2.5.bg-white.text-gray-900.border.border-gray-300.rounded-lg.placeholder-gray-400.focus:ring-2.focus:ring-blue-500.focus:border-blue-500.transition-colors.dark:bg-slate-900/80.dark:border-slate-500.dark:text-slate-100.dark:placeholder-slate-500', {
               type: 'email',
               name: 'email',
               required: true,
@@ -1319,14 +1351,14 @@ const LoginForm = {
             }),
           ]),
           m('.mb-6', [
-            m('label.block.text-sm.font-medium.text-gray-700 dark:text-slate-300.mb-2', { for: 'password' }, 'Password'),
-            m('input#password.w-full.px-3.py-2.5.border.border-gray-300 dark:border-slate-600.rounded-lg.focus:ring-2.focus:ring-blue-500.focus:border-blue-500.transition-colors', {
+            m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-2', { for: 'password' }, 'Password'),
+            m('input#password.w-full.px-3.py-2.5.bg-white.text-gray-900.border.border-gray-300.rounded-lg.focus:ring-2.focus:ring-blue-500.focus:border-blue-500.transition-colors.dark:bg-slate-900/80.dark:border-slate-500.dark:text-slate-100', {
               type: 'password',
               name: 'password',
               required: true,
             }),
           ]),
-          m('button.w-full.bg-blue-600.text-white.py-2.5.px-4.rounded-lg.font-medium.hover:bg-blue-700.focus:ring-2.focus:ring-blue-500.focus:ring-offset-2.disabled:opacity-50.transition-colors', {
+          m('button.w-full.bg-blue-600.text-white.py-2.5.px-4.rounded-lg.font-medium.hover:bg-blue-700.focus:ring-2.focus:ring-blue-500.focus:ring-offset-2.dark:focus:ring-offset-slate-800.disabled:opacity-50.transition-colors', {
             type: 'submit',
             disabled: state.loading,
           }, state.loading ? 'Logging in...' : 'Sign in'),
@@ -1342,8 +1374,8 @@ const SetupForm = {
     m('.w-full.max-w-md', [
       m('.bg-white dark:bg-slate-800.rounded-2xl.shadow-2xl.p-6.sm:p-8', [
         m('div.text-center.mb-6', [
-          m('h1.text-2xl.sm:text-3xl.font-bold.text-gray-900', 'Setup Admin Account'),
-          m('p.text-gray-500 dark:text-slate-400.text-sm.mt-1', 'Create the first admin user account.'),
+          m('h1.text-2xl.sm:text-3xl.font-bold.text-gray-900.dark:text-slate-50', 'Setup Admin Account'),
+          m('p.text-gray-500.dark:text-slate-400.text-sm.mt-1', 'Create the first admin user account.'),
         ]),
         m('form', {
       onsubmit: async (e) => {
@@ -1367,18 +1399,18 @@ const SetupForm = {
         }
       }
     }, [
-      state.error ? m('.bg-red-50.border.border-red-200.text-red-700.px-4.py-3.rounded-lg.mb-4.text-sm', state.error) : null,
+      state.error ? m('.bg-red-50.border.border-red-200.text-red-700.dark:bg-red-950/50.dark:border-red-800/80.dark:text-red-200.px-4.py-3.rounded-lg.mb-4.text-sm', state.error) : null,
           m('.mb-4', [
-            m('label.block.text-sm.font-medium.text-gray-700 dark:text-slate-300.mb-2', { for: 'name' }, 'Name'),
-            m('input#name.w-full.px-3.py-2.5.border.border-gray-300 dark:border-slate-600.rounded-lg.focus:ring-2.focus:ring-blue-500.focus:border-blue-500.transition-colors', {
+            m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-2', { for: 'name' }, 'Name'),
+            m('input#name.w-full.px-3.py-2.5.bg-white.text-gray-900.border.border-gray-300.rounded-lg.focus:ring-2.focus:ring-blue-500.focus:border-blue-500.transition-colors.dark:bg-slate-900/80.dark:border-slate-500.dark:text-slate-100', {
               type: 'text',
               name: 'name',
               required: true,
             }),
           ]),
           m('.mb-4', [
-            m('label.block.text-sm.font-medium.text-gray-700 dark:text-slate-300.mb-2', { for: 'email' }, 'Email'),
-            m('input#email.w-full.px-3.py-2.5.border.border-gray-300 dark:border-slate-600.rounded-lg.focus:ring-2.focus:ring-blue-500.focus:border-blue-500.transition-colors', {
+            m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-2', { for: 'email' }, 'Email'),
+            m('input#email.w-full.px-3.py-2.5.bg-white.text-gray-900.border.border-gray-300.rounded-lg.placeholder-gray-400.focus:ring-2.focus:ring-blue-500.focus:border-blue-500.transition-colors.dark:bg-slate-900/80.dark:border-slate-500.dark:text-slate-100.dark:placeholder-slate-500', {
               type: 'email',
               name: 'email',
               required: true,
@@ -1386,14 +1418,14 @@ const SetupForm = {
             }),
           ]),
           m('.mb-6', [
-            m('label.block.text-sm.font-medium.text-gray-700 dark:text-slate-300.mb-2', { for: 'password' }, 'Password'),
-            m('input#password.w-full.px-3.py-2.5.border.border-gray-300 dark:border-slate-600.rounded-lg.focus:ring-2.focus:ring-blue-500.focus:border-blue-500.transition-colors', {
+            m('label.block.text-sm.font-medium.text-gray-700.dark:text-slate-300.mb-2', { for: 'password' }, 'Password'),
+            m('input#password.w-full.px-3.py-2.5.bg-white.text-gray-900.border.border-gray-300.rounded-lg.focus:ring-2.focus:ring-blue-500.focus:border-blue-500.transition-colors.dark:bg-slate-900/80.dark:border-slate-500.dark:text-slate-100', {
               type: 'password',
               name: 'password',
               required: true,
             }),
           ]),
-          m('button.w-full.bg-blue-600.text-white.py-2.5.px-4.rounded-lg.font-medium.hover:bg-blue-700.focus:ring-2.focus:ring-blue-500.focus:ring-offset-2.disabled:opacity-50.transition-colors', {
+          m('button.w-full.bg-blue-600.text-white.py-2.5.px-4.rounded-lg.font-medium.hover:bg-blue-700.focus:ring-2.focus:ring-blue-500.focus:ring-offset-2.dark:focus:ring-offset-slate-800.disabled:opacity-50.transition-colors', {
             type: 'submit',
             disabled: state.loading,
           }, state.loading ? 'Creating...' : 'Create Admin Account'),
@@ -1985,29 +2017,13 @@ const RecordList = {
             }, 'Trash'),
           ]) : null,
         ]),
-        !state.trashedView ? m('.flex.items-center.gap-2', [
+        m('.flex.flex-wrap.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);
+                if (state.trashedView) payload.trashed = 'only';
+                await downloadDataExchangeXlsx(modelName, payload);
               } catch (err) {
                 alert('Error: ' + err.message);
               }
@@ -2018,7 +2034,7 @@ const RecordList = {
             ),
             'Export Excel',
           ]),
-          m('input[type=file]', {
+          !state.trashedView ? m('input[type=file]', {
             id: 'data-exchange-import-' + modelName,
             style: 'display:none',
             accept: '.csv,.xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv',
@@ -2043,7 +2059,7 @@ const RecordList = {
                 }
                 var msg = 'Import finished: created ' + body.created + ', updated ' + (body.updated || 0) + ', failed ' + (body.failed || 0);
                 if (body.errors && body.errors.length) {
-                  msg += '\nFirst errors: ' + body.errors.slice(0, 3).map(function (x) { return 'row ' + x.row + ': ' + x.message; }).join('; ');
+                  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);
@@ -2051,8 +2067,8 @@ const RecordList = {
                 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', {
+          }) : null,
+          !state.trashedView ? 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();
@@ -2062,8 +2078,8 @@ const RecordList = {
               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', {
+          ]) : 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;
@@ -2074,8 +2090,8 @@ const RecordList = {
               m('path', { 'stroke-linecap': 'round', 'stroke-linejoin': 'round', 'stroke-width': '2', d: 'M12 4v16m8-8H4' }),
             ]),
             'New Record',
-          ]),
-        ]) : null,
+          ]) : null,
+        ]),
       ]),
       
       // Quick Filters Bar
@@ -2281,33 +2297,17 @@ 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', {
+                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);
+                      if (state.trashedView) payload.trashed = 'only';
+                      await downloadDataExchangeXlsx(modelName, payload);
                     } catch (err) {
                       alert('Error: ' + err.message);
                     } finally {
@@ -2320,7 +2320,7 @@ const RecordList = {
                     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),
@@ -2350,7 +2350,7 @@ const RecordList = {
                 m('thead.bg-gray-50.dark:bg-slate-900', { style: 'position: sticky; top: 0; z-index: 20;' }, [
                   m('tr', [
                     // Checkbox column header (sticky left, box-shadow on right)
-                    m('th.px-4.py-3.text-left.bg-gray-50 dark:bg-slate-900.border-b.border-gray-200', { style: 'width: 40px; position: sticky; left: 0; z-index: 15; box-shadow: 4px 0 8px -4px rgba(0,0,0,0.08);' }, [
+                    m('th.px-4.py-3.text-left.bg-gray-50 dark:bg-slate-900.border-b.border-gray-200 dark:border-slate-700', { style: 'width: 40px; position: sticky; left: 0; z-index: 15; box-shadow: 4px 0 8px -4px rgba(0,0,0,0.08);' }, [
                       m('input[type=checkbox].rounded.border-gray-300 dark:border-slate-600.text-indigo-600.focus:ring-indigo-500', {
                         checked: state.records.length > 0 && state.selectedRecords && state.selectedRecords.size === state.records.length,
                         indeterminate: state.selectedRecords && state.selectedRecords.size > 0 && state.selectedRecords.size < state.records.length,
@@ -2366,23 +2366,23 @@ const RecordList = {
                     ]),
                     // Dynamic column headers (first column sticky left with box-shadow)
                     ...displayColumns.map((col, i) => 
-                      m('th.px-4.py-3.text-left.text-xs.font-medium.text-gray-500 dark:text-slate-400.uppercase.tracking-wider.whitespace-nowrap.bg-gray-50 dark:bg-slate-900.border-b.border-gray-200', 
+                      m('th.px-4.py-3.text-left.text-xs.font-medium.text-gray-500 dark:text-slate-400.uppercase.tracking-wider.whitespace-nowrap.bg-gray-50 dark:bg-slate-900.border-b.border-gray-200 dark:border-slate-700', 
                         i === 0 ? { style: 'position: sticky; left: 40px; z-index: 15; box-shadow: 4px 0 8px -4px rgba(0,0,0,0.08);' } : {},
                         formatColumnLabel(col.name)
                       )
                     ),
                     // Sticky actions header (sticky right, box-shadow on left)
-                    m('th.px-4.py-3.text-right.text-xs.font-medium.text-gray-500 dark:text-slate-400.uppercase.tracking-wider.bg-gray-50 dark:bg-slate-900.border-b.border-gray-200', {
+                    m('th.px-4.py-3.text-right.text-xs.font-medium.text-gray-500 dark:text-slate-400.uppercase.tracking-wider.bg-gray-50 dark:bg-slate-900.border-b.border-gray-200 dark:border-slate-700', {
                       style: 'position: sticky; right: 0; min-width: 120px; z-index: 15; box-shadow: -4px 0 8px -4px rgba(0,0,0,0.08);',
                     }, 'Actions'),
                   ]),
                 ]),
-                m('tbody.divide-y.divide-gray-100', state.records.map(record => 
-                  m('tr.hover:bg-gray-50 dark:hover:bg-slate-800/50 dark:hover:bg-slate-800/50.transition-colors', {
-                    class: state.selectedRecords && state.selectedRecords.has(record[primaryKey]) ? 'bg-indigo-50' : '',
+                m('tbody.divide-y.divide-gray-100.dark:divide-slate-700', state.records.map(record => 
+                  m('tr.hover:bg-gray-50 dark:hover:bg-slate-800/50.transition-colors', {
+                    class: state.selectedRecords && state.selectedRecords.has(record[primaryKey]) ? 'bg-indigo-50 dark:bg-indigo-950/50' : '',
                   }, [
                     // Checkbox cell (sticky left, box-shadow on right)
-                    m('td.px-4.py-3.bg-white', {
+                    m('td.px-4.py-3.bg-white.dark:bg-slate-800', {
                       style: 'position: sticky; left: 0; z-index: 5; box-shadow: 4px 0 8px -4px rgba(0,0,0,0.08);',
                     }, [
                       m('input[type=checkbox].rounded.border-gray-300 dark:border-slate-600.text-indigo-600.focus:ring-indigo-500', {
@@ -2400,17 +2400,17 @@ const RecordList = {
                     ]),
                     // Dynamic cell values (first column sticky left with box-shadow)
                     ...displayColumns.map((col, i) => 
-                      m('td.px-4.py-3.text-sm.whitespace-nowrap.text-gray-700 dark:text-slate-300.bg-white',
+                      m('td.px-4.py-3.text-sm.whitespace-nowrap.text-gray-700 dark:text-slate-300.bg-white dark:bg-slate-800',
                         i === 0 ? { style: 'position: sticky; left: 40px; z-index: 5; box-shadow: 4px 0 8px -4px rgba(0,0,0,0.08);' } : {},
                         formatCellValue(record[col.name], col)
                       )
                     ),
                     // Sticky actions cell (sticky right, box-shadow on left)
-                    m('td.px-4.py-3.text-sm.text-right.whitespace-nowrap.bg-white', {
+                    m('td.px-4.py-3.text-sm.text-right.whitespace-nowrap.text-gray-700 dark:text-slate-300.bg-white dark:bg-slate-800', {
                       style: 'position: sticky; right: 0; z-index: 5; box-shadow: -4px 0 8px -4px rgba(0,0,0,0.08);',
                     }, [
                       state.trashedView && modelMeta?.softDelete
-                        ? m('button.inline-flex.items-center.px-2.py-1.text-sm.text-green-600.hover:text-green-800.hover:bg-green-50.rounded.transition-colors', {
+                        ? m('button.inline-flex.items-center.px-2.py-1.text-sm.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.rounded.transition-colors', {
                             onclick: async () => {
                               try {
                                 await api.post('/models/' + modelName + '/records/' + record[primaryKey] + '/restore');
@@ -2421,14 +2421,14 @@ const RecordList = {
                             },
                           }, 'Restore')
                         : [
-                            m('button.inline-flex.items-center.px-2.py-1.text-sm.text-indigo-600.hover:text-indigo-800.hover:bg-indigo-50.rounded.mr-1.transition-colors', {
+                            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.hover:text-red-800.hover:bg-red-50.rounded.transition-colors', {
+                            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?')) {
                                   try {
@@ -2516,14 +2516,14 @@ const RecordForm = {
     
     return m(Layout, { breadcrumbs }, [
       m('.flex.items-center.justify-between.mb-6', [
-        m('h2.text-2xl.font-bold', isNew ? 'New Record' : 'Edit Record'),
-        modelMeta ? m('span.text-gray-500', modelMeta.label || modelMeta.name) : null,
+        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,
       ]),
       
-      state.loading ? m('p.text-gray-600', 'Loading...') :
-      state.error && !modelMeta ? m('.bg-red-100.border.border-red-400.text-red-700.px-4.py-3.rounded', state.error) :
+      state.loading ? m('p.text-gray-600.dark:text-slate-400', 'Loading...') :
+      state.error && !modelMeta ? m('.bg-red-50.dark:bg-red-950/40.border.border-red-200.dark:border-red-800.text-red-800.dark:text-red-200.px-4.py-3.rounded-lg', state.error) :
       
-      m('form.bg-white dark:bg-slate-800.rounded.shadow.flex.flex-col', {
+      m('form.bg-white.dark:bg-slate-800.rounded-lg.shadow-sm.border.border-gray-200.dark:border-slate-700.flex.flex-col', {
         style: 'min-height: calc(100vh - 280px);',
         onsubmit: async (e) => {
           e.preventDefault();
@@ -2592,7 +2592,7 @@ const RecordForm = {
       }, [
         // Form content (scrollable)
         m('.p-6.flex-1.overflow-y-auto', [
-          state.error ? m('.bg-red-100.border.border-red-400.text-red-700.px-4.py-3.rounded.mb-4', state.error) : null,
+          state.error ? m('.bg-red-50.dark:bg-red-950/40.border.border-red-200.dark:border-red-800.text-red-800.dark:text-red-200.px-4.py-3.rounded-lg.mb-4', state.error) : null,
           
           // Render form fields based on model columns
           modelMeta && modelMeta.columns ? modelMeta.columns.map(col => {
@@ -2616,8 +2616,8 @@ const RecordForm = {
         ]),
         
         // Sticky footer buttons
-        m('.flex.gap-4.p-4.border-t.bg-gray-50 dark:bg-slate-900.sticky.bottom-0', [
-          m('button.bg-blue-600.text-white.px-6.py-2.rounded.hover:bg-blue-700.disabled:opacity-50', {
+        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'),