millas 0.1.2 → 0.1.3

package/src/admin/Admin.js

@@ -1,34 +1,34 @@
 'use strict';
 
+const path = require('path');
+const nunjucks = require('nunjucks');
 const { AdminResource, AdminField, AdminFilter } = require('./resources/AdminResource');
 
 /**
  * Admin
  *
- * The Millas admin panel registry and HTTP handler.
- *
- * Usage in AppServiceProvider.boot():
- *
- *   const { Admin } = require('millas/src');
+ * The Millas admin panel.
+ * Auto-mounts at /admin by default — no configuration needed.
  *
+ * Basic usage (AppServiceProvider.boot):
  *   Admin.register(UserResource);
- *   Admin.register(PostResource);
- *   Admin.register(OrderResource);
- *
- * Then mount in bootstrap/app.js:
+ *   Admin.mount(route, expressApp);
  *
- *   Admin.mount(app, expressApp);
- *
- * Access at: http://localhost:3000/admin
+ * Custom resource:
+ *   class UserResource extends AdminResource {
+ *     static model      = User;
+ *     static label      = 'Users';
+ *     static fields() { return [AdminField.id(), AdminField.text('name')]; }
+ *   }
  */
 class Admin {
   constructor() {
-    this._resources = new Map();   // slug → AdminResource class
+    this._resources = new Map();
     this._config    = {
-      prefix:  '/admin',
-      title:   'Millas Admin',
-      auth:    false,              // set to a middleware fn to protect
+      prefix: '/admin',
+      title:  'Millas Admin',
     };
+    this._njk = null;
   }
 
   // ─── Configuration ─────────────────────────────────────────────────────────
@@ -40,42 +40,21 @@ class Admin {
 
   // ─── Registration ─────────────────────────────────────────────────────────
 
-  /**
-   * Register a resource (AdminResource subclass or raw Model).
-   *
-   * Admin.register(UserResource)
-   * Admin.register(User)   — auto-generates a basic resource
-   */
   register(ResourceOrModel) {
     let Resource = ResourceOrModel;
-
-    // Auto-wrap plain Model classes
-    if (!ResourceOrModel.prototype && ResourceOrModel.fields !== undefined) {
+    if (ResourceOrModel.fields !== undefined &&
+        !(ResourceOrModel.prototype instanceof AdminResource)) {
       Resource = this._autoResource(ResourceOrModel);
-    } else if (!(ResourceOrModel.prototype instanceof AdminResource) &&
-               ResourceOrModel !== AdminResource) {
-      // It's a Model class (has static fields property)
-      if (ResourceOrModel.fields !== undefined) {
-        Resource = this._autoResource(ResourceOrModel);
-      }
     }
-
-    const slug = Resource.slug || Resource._getLabel?.().toLowerCase() || Resource.name.toLowerCase();
-    this._resources.set(slug, Resource);
+    this._resources.set(Resource.slug, Resource);
     return this;
   }
 
-  /**
-   * Register multiple resources at once.
-   */
-  registerMany(resources = []) {
-    resources.forEach(r => this.register(r));
+  registerMany(list = []) {
+    list.forEach(r => this.register(r));
     return this;
   }
 
-  /**
-   * Get all registered resources.
-   */
   resources() {
     return [...this._resources.values()];
   }
@@ -83,89 +62,200 @@ class Admin {
   // ─── Mount ────────────────────────────────────────────────────────────────
 
   /**
-   * Mount admin routes onto the Millas Route instance.
-   * Call this in routes/api.js or bootstrap/app.js.
+   * Mount all admin routes onto express directly.
+   * Call this AFTER app.boot() in bootstrap/app.js:
    *
-   * Admin.mount(route, expressApp);
+   *   Admin.mount(expressApp);
    */
-  mount(route, expressApp) {
+  mount(expressApp) {
     const prefix = this._config.prefix;
-    const admin  = this;
-
-    // Serve the admin HTML shell (SPA-style)
-    expressApp.get(`${prefix}`, (req, res) => this._serveShell(req, res));
-    expressApp.get(`${prefix}/*`, (req, res) => this._serveShell(req, res));
-
-    // JSON API for the panel
-    route.group({ prefix: `${prefix}/api` }, () => {
-
-      // Meta: list all resources for sidebar
-      route.get('/resources', (req, res) => {
-        res.json(admin.resources().map(r => ({
-          slug:    r.slug,
-          label:   r._getLabel ? r._getLabel() : r.label,
-          singular: r._getLabelSingular ? r._getLabelSingular() : r.labelSingular,
-          icon:    r.icon,
-          canCreate: r.canCreate,
-        })));
-      });
-
-      // Per-resource CRUD API
-      route.get('/:resource',          (req, res) => admin._list(req, res));
-      route.get('/:resource/:id',      (req, res) => admin._show(req, res));
-      route.post('/:resource',         (req, res) => admin._store(req, res));
-      route.put('/:resource/:id',      (req, res) => admin._update(req, res));
-      route.delete('/:resource/:id',   (req, res) => admin._destroy(req, res));
-    });
+    this._njk    = this._setupNunjucks(expressApp);
+
+    // Dashboard
+    expressApp.get(`${prefix}`,     (q, s) => this._dashboard(q, s));
+    expressApp.get(`${prefix}/`,    (q, s) => this._dashboard(q, s));
+
+    // Resource routes
+    expressApp.get   (`${prefix}/:resource`,             (q, s) => this._list(q, s));
+    expressApp.get   (`${prefix}/:resource/create`,      (q, s) => this._create(q, s));
+    expressApp.post  (`${prefix}/:resource`,             (q, s) => this._store(q, s));
+    expressApp.get   (`${prefix}/:resource/:id/edit`,    (q, s) => this._edit(q, s));
+    expressApp.post  (`${prefix}/:resource/:id`,         (q, s) => this._update(q, s));
+    expressApp.post  (`${prefix}/:resource/:id/delete`,  (q, s) => this._destroy(q, s));
 
     return this;
   }
 
-  // ─── Request Handlers ─────────────────────────────────────────────────────
+  // ─── Nunjucks setup ───────────────────────────────────────────────────────
 
-  async _list(req, res) {
+  _setupNunjucks(expressApp) {
+    const viewsDir = path.join(__dirname, 'views');
+    const env = nunjucks.configure(viewsDir, {
+      autoescape: true,
+      express:    expressApp,
+      noCache:    process.env.NODE_ENV !== 'production',
+    });
+
+    // ── Custom filters ───────────────────────────────────────────
+    env.addFilter('adminCell', (value, field) => {
+      if (value === null || value === undefined) return '<span class="cell-muted">—</span>';
+      switch (field.type) {
+        case 'boolean':
+          return value ? '<span class="bool-yes">✓</span>' : '<span class="bool-no">✗</span>';
+        case 'badge': {
+          const colorMap = { admin:'purple', user:'blue', active:'green', inactive:'gray', pending:'yellow', published:'green', draft:'gray' };
+          const c = (field.colors && field.colors[String(value)]) || colorMap[String(value)] || 'gray';
+          return `<span class="badge badge-${c}">${value}</span>`;
+        }
+        case 'datetime':
+          try { return new Date(value).toLocaleString(); } catch { return String(value); }
+        case 'date':
+          try { return new Date(value).toLocaleDateString(); } catch { return String(value); }
+        case 'password':
+          return '<span class="cell-muted">••••••••</span>';
+        case 'image':
+          return value ? `<img src="${value}" style="width:36px;height:36px;border-radius:6px;object-fit:cover">` : '<span class="cell-muted">—</span>';
+        case 'json':
+          return `<code style="font-size:11px;color:var(--text-muted)">${JSON.stringify(value).slice(0, 40)}…</code>`;
+        default: {
+          const str = String(value);
+          return str.length > 60 ? str.slice(0, 60) + '…' : str;
+        }
+      }
+    });
+
+    env.addFilter('min', (arr) => Math.min(...arr));
+    env.addFilter('dump', (val) => {
+      try { return JSON.stringify(val, null, 2); } catch { return String(val); }
+    });
+
+    return env;
+  }
+
+  // ─── Base render context ──────────────────────────────────────────────────
+
+  _ctx(req, extra = {}) {
+    return {
+      adminPrefix:    this._config.prefix,
+      adminTitle:     this._config.title,
+      resources:      this.resources().map(r => ({
+        slug:     r.slug,
+        label:    r._getLabel(),
+        singular: r._getLabelSingular(),
+        icon:     r.icon,
+      })),
+      flash:          this._pullFlash(req),
+      activePage:     extra.activePage || null,
+      activeResource: extra.activeResource || null,
+      ...extra,
+    };
+  }
+
+  // ─── Pages ────────────────────────────────────────────────────────────────
+
+  async _dashboard(req, res) {
     try {
-      const Resource = this._resolve(req.params.resource, res);
-      if (!Resource) return;
-
-      const page    = Number(req.query.page)    || 1;
-      const search  = req.query.search          || '';
-      const sort    = req.query.sort            || 'id';
-      const order   = req.query.order           || 'desc';
-      const filters = req.query.filters
-        ? JSON.parse(req.query.filters)
-        : {};
-
-      const result = await Resource.fetchList({ page, search, sort, order, filters });
-
-      // Attach field definitions for the frontend
-      const fields   = Resource.fields().map(f => f.toJSON());
-      const fltrs    = Resource.filters().map(f => f.toJSON());
-      const sortable = Resource.sortable || [];
-
-      res.json({
-        ...result,
-        fields,
-        filters:   fltrs,
-        sortable,
-        canCreate: Resource.canCreate,
-        canEdit:   Resource.canEdit,
-        canDelete: Resource.canDelete,
-      });
+      const resourceData = await Promise.all(
+        this.resources().map(async (R) => {
+          let count = 0;
+          let recent = [];
+          try {
+            count  = await R.model.count();
+            const result = await R.fetchList({ page: 1, perPage: 5 });
+            recent = result.data.map(r => r.toJSON ? r.toJSON() : r);
+          } catch {}
+          return {
+            slug:       R.slug,
+            label:      R._getLabel(),
+            icon:       R.icon,
+            count,
+            recent,
+            listFields: R.fields().filter(f => !f._hidden && !f._detailOnly).slice(0, 4).map(f => f.toJSON()),
+          };
+        })
+      );
+
+      res.render('pages/dashboard.njk', this._ctx(req, {
+        pageTitle:  'Dashboard',
+        activePage: 'dashboard',
+        resources:  resourceData,
+      }));
     } catch (err) {
       this._error(res, err);
     }
   }
 
-  async _show(req, res) {
+  async _list(req, res) {
     try {
-      const Resource = this._resolve(req.params.resource, res);
-      if (!Resource) return;
+      const R = this._resolve(req.params.resource, res);
+      if (!R) return;
+
+      const page   = Number(req.query.page)   || 1;
+      const search = req.query.search         || '';
+      const sort   = req.query.sort           || 'id';
+      const order  = req.query.order          || 'desc';
+
+      // Collect active filters
+      const activeFilters = {};
+      if (req.query.filter) {
+        for (const [k, v] of Object.entries(req.query.filter)) {
+          if (v !== '') activeFilters[k] = v;
+        }
+      }
 
-      const record = await Resource.fetchOne(req.params.id);
-      const fields = Resource.fields().map(f => f.toJSON());
+      const result = await R.fetchList({ page, search, sort, order, filters: activeFilters });
+      const rows   = result.data.map(r => r.toJSON ? r.toJSON() : r);
+
+      const listFields = R.fields()
+        .filter(f => !f._hidden && !f._detailOnly)
+        .map(f => f.toJSON());
+
+      res.render('pages/list.njk', this._ctx(req, {
+        pageTitle:     R._getLabel(),
+        activeResource: req.params.resource,
+        resource: {
+          slug:      R.slug,
+          label:     R._getLabel(),
+          singular:  R._getLabelSingular(),
+          icon:      R.icon,
+          canCreate: R.canCreate,
+          canEdit:   R.canEdit,
+          canDelete: R.canDelete,
+        },
+        rows,
+        listFields,
+        filters:      R.filters().map(f => f.toJSON()),
+        activeFilters,
+        sortable:     R.sortable || [],
+        total:        result.total,
+        page:         result.page,
+        perPage:      result.perPage,
+        lastPage:     result.lastPage,
+        search,
+        sort,
+        order,
+      }));
+    } catch (err) {
+      this._error(res, err);
+    }
+  }
 
-      res.json({ data: record, fields });
+  async _create(req, res) {
+    try {
+      const R = this._resolve(req.params.resource, res);
+      if (!R) return;
+      if (!R.canCreate) return res.status(403).send('Not allowed');
+
+      res.render('pages/form.njk', this._ctx(req, {
+        pageTitle:     `New ${R._getLabelSingular()}`,
+        activeResource: req.params.resource,
+        resource: { slug: R.slug, label: R._getLabel(), singular: R._getLabelSingular(), icon: R.icon, canDelete: false },
+        formFields:  this._formFields(R),
+        formAction:  `${this._config.prefix}/${R.slug}`,
+        isEdit:      false,
+        record:      {},
+        errors:      {},
+      }));
     } catch (err) {
       this._error(res, err);
     }
@@ -173,436 +263,154 @@ class Admin {
 
   async _store(req, res) {
     try {
-      const Resource = this._resolve(req.params.resource, res);
-      if (!Resource) return;
-      if (!Resource.canCreate) return res.status(403).json({ error: 'Create not allowed' });
+      const R = this._resolve(req.params.resource, res);
+      if (!R) return;
+      if (!R.canCreate) return res.status(403).send('Not allowed');
 
-      const record = await Resource.create(req.body);
-      res.status(201).json({ data: record, message: 'Created successfully' });
+      await R.create(req.body);
+      this._flash(req, 'success', `${R._getLabelSingular()} created successfully`);
+      this._redirectWithFlash(res, `${this._config.prefix}/${R.slug}`, req._flashType, req._flashMessage);
     } catch (err) {
+      if (err.status === 422) {
+        const R = this._resources.get(req.params.resource);
+        return res.render('pages/form.njk', this._ctx(req, {
+          pageTitle:  `New ${R._getLabelSingular()}`,
+          activeResource: req.params.resource,
+          resource: { slug: R.slug, label: R._getLabel(), singular: R._getLabelSingular(), icon: R.icon, canDelete: false },
+          formFields: this._formFields(R),
+          formAction: `${this._config.prefix}/${R.slug}`,
+          isEdit:     false,
+          record:     req.body,
+          errors:     err.errors || {},
+        }));
+      }
       this._error(res, err);
     }
   }
 
-  async _update(req, res) {
+  async _edit(req, res) {
     try {
-      const Resource = this._resolve(req.params.resource, res);
-      if (!Resource) return;
-      if (!Resource.canEdit) return res.status(403).json({ error: 'Edit not allowed' });
+      const R = this._resolve(req.params.resource, res);
+      if (!R) return;
+      if (!R.canEdit) return res.status(403).send('Not allowed');
+
+      const record = await R.fetchOne(req.params.id);
+      const data   = record.toJSON ? record.toJSON() : record;
+
+      res.render('pages/form.njk', this._ctx(req, {
+        pageTitle:     `Edit ${R._getLabelSingular()} #${req.params.id}`,
+        activeResource: req.params.resource,
+        resource: { slug: R.slug, label: R._getLabel(), singular: R._getLabelSingular(), icon: R.icon, canDelete: R.canDelete },
+        formFields:  this._formFields(R),
+        formAction:  `${this._config.prefix}/${R.slug}/${req.params.id}`,
+        isEdit:      true,
+        record:      data,
+        errors:      {},
+      }));
+    } catch (err) {
+      this._error(res, err);
+    }
+  }
 
-      const record = await Resource.update(req.params.id, req.body);
-      res.json({ data: record, message: 'Updated successfully' });
+  async _update(req, res) {
+    try {
+      const R = this._resolve(req.params.resource, res);
+      if (!R) return;
+      if (!R.canEdit) return res.status(403).send('Not allowed');
+
+      // Support method override
+      const method = req.body._method || 'POST';
+      if (method === 'PUT' || method === 'POST') {
+        await R.update(req.params.id, req.body);
+        this._flash(req, 'success', `${R._getLabelSingular()} updated successfully`);
+        this._redirectWithFlash(res, `${this._config.prefix}/${R.slug}`, req._flashType, req._flashMessage);
+      }
     } catch (err) {
+      if (err.status === 422) {
+        const R = this._resources.get(req.params.resource);
+        return res.render('pages/form.njk', this._ctx(req, {
+          pageTitle:  `Edit ${R._getLabelSingular()} #${req.params.id}`,
+          activeResource: req.params.resource,
+          resource: { slug: R.slug, label: R._getLabel(), singular: R._getLabelSingular(), icon: R.icon, canDelete: R.canDelete },
+          formFields: this._formFields(R),
+          formAction: `${this._config.prefix}/${R.slug}/${req.params.id}`,
+          isEdit:     true,
+          record:     { id: req.params.id, ...req.body },
+          errors:     err.errors || {},
+        }));
+      }
       this._error(res, err);
     }
   }
 
   async _destroy(req, res) {
     try {
-      const Resource = this._resolve(req.params.resource, res);
-      if (!Resource) return;
-      if (!Resource.canDelete) return res.status(403).json({ error: 'Delete not allowed' });
+      const R = this._resolve(req.params.resource, res);
+      if (!R) return;
+      if (!R.canDelete) return res.status(403).send('Not allowed');
 
-      await Resource.destroy(req.params.id);
-      res.json({ message: 'Deleted successfully' });
+      await R.destroy(req.params.id);
+      this._flash(req, 'success', `${R._getLabelSingular()} deleted`);
+      this._redirectWithFlash(res, `${this._config.prefix}/${R.slug}`, req._flashType, req._flashMessage);
     } catch (err) {
       this._error(res, err);
     }
   }
 
-  // ─── HTML Shell ───────────────────────────────────────────────────────────
-
-  _serveShell(req, res) {
-    const title     = this._config.title;
-    const resources = this.resources().map(r => ({
-      slug:  r.slug,
-      label: r._getLabel ? r._getLabel() : r.label || r.name,
-      icon:  r.icon,
-    }));
+  // ─── Helpers ──────────────────────────────────────────────────────────────
 
-    res.setHeader('Content-Type', 'text/html');
-    res.send(this._renderShell(title, resources));
+  _formFields(R) {
+    return R.fields()
+      .filter(f => f._type !== 'id' && !f._listOnly && !f._readonly)
+      .map(f => ({ ...f.toJSON(), required: !f._nullable }));
   }
 
-  _renderShell(title, resources) {
-    const navItems = resources.map(r =>
-      `<a href="/admin/${r.slug}" class="nav-item" data-slug="${r.slug}">
-         <span class="nav-icon">${r.icon}</span>
-         <span class="nav-label">${r.label}</span>
-       </a>`
-    ).join('\n');
-
-    return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>${title}</title>
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-    :root {
-      --bg:        #0f1117;
-      --surface:   #1a1d27;
-      --surface2:  #222535;
-      --border:    #2e3146;
-      --primary:   #6366f1;
-      --primary-h: #818cf8;
-      --text:      #e2e8f0;
-      --text-muted:#64748b;
-      --success:   #22c55e;
-      --danger:    #ef4444;
-      --warning:   #f59e0b;
-      --radius:    8px;
-      --font:      'Inter', system-ui, sans-serif;
-    }
-    body { font-family: var(--font); background: var(--bg); color: var(--text); display: flex; height: 100vh; overflow: hidden; }
-    /* ── Sidebar ── */
-    #sidebar {
-      width: 240px; min-width: 240px; background: var(--surface); border-right: 1px solid var(--border);
-      display: flex; flex-direction: column; overflow-y: auto;
+  _resolve(slug, res) {
+    const R = this._resources.get(slug);
+    if (!R) {
+      res.status(404).send(`Resource "${slug}" not registered in Admin`);
+      return null;
     }
-    .sidebar-header { padding: 20px 16px; border-bottom: 1px solid var(--border); }
-    .sidebar-title { font-size: 16px; font-weight: 700; color: var(--primary); letter-spacing: -0.3px; }
-    .sidebar-subtitle { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
-    .nav-section { padding: 12px 8px 8px; }
-    .nav-section-label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; padding: 0 8px 6px; }
-    .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius); color: var(--text-muted); text-decoration: none; font-size: 13px; font-weight: 500; transition: all .15s; cursor: pointer; }
-    .nav-item:hover, .nav-item.active { background: var(--surface2); color: var(--text); }
-    .nav-item.active { color: var(--primary-h); }
-    .nav-icon { font-size: 15px; width: 20px; text-align: center; }
-    /* ── Main ── */
-    #main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
-    #topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 24px; height: 56px; display: flex; align-items: center; justify-content: space-between; }
-    #page-title { font-size: 15px; font-weight: 600; }
-    #content { flex: 1; overflow-y: auto; padding: 24px; }
-    /* ── Table ── */
-    .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
-    .card-header { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
-    .card-title { font-size: 14px; font-weight: 600; }
-    table { width: 100%; border-collapse: collapse; }
-    th { text-align: left; padding: 10px 16px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); background: var(--surface2); border-bottom: 1px solid var(--border); white-space: nowrap; cursor: pointer; user-select: none; }
-    th:hover { color: var(--text); }
-    td { padding: 12px 16px; font-size: 13px; border-bottom: 1px solid var(--border); }
-    tr:last-child td { border-bottom: none; }
-    tr:hover td { background: var(--surface2); }
-    /* ── Controls ── */
-    .btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; border: none; transition: all .15s; }
-    .btn-primary { background: var(--primary); color: #fff; }
-    .btn-primary:hover { background: var(--primary-h); }
-    .btn-ghost { background: transparent; color: var(--text-muted); border: 1px solid var(--border); }
-    .btn-ghost:hover { background: var(--surface2); color: var(--text); }
-    .btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--border); }
-    .btn-danger:hover { background: var(--danger); color: #fff; }
-    .btn-sm { padding: 4px 10px; font-size: 12px; }
-    input, select, textarea { background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: 6px; padding: 8px 12px; font-size: 13px; width: 100%; outline: none; font-family: var(--font); }
-    input:focus, select:focus, textarea:focus { border-color: var(--primary); }
-    .search-input { width: 240px; }
-    /* ── Badge ── */
-    .badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 600; }
-    .badge-blue   { background: #1e3a5f; color: #60a5fa; }
-    .badge-red    { background: #3b1212; color: #f87171; }
-    .badge-green  { background: #14342b; color: #4ade80; }
-    .badge-yellow { background: #3b2800; color: #fbbf24; }
-    .badge-gray   { background: var(--surface2); color: var(--text-muted); }
-    /* ── Pagination ── */
-    .pagination { display: flex; align-items: center; gap: 6px; padding: 14px 20px; border-top: 1px solid var(--border); }
-    .page-info { font-size: 12px; color: var(--text-muted); margin-left: auto; }
-    .page-btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; font-size: 12px; }
-    .page-btn:hover { background: var(--surface2); }
-    .page-btn.active { background: var(--primary); border-color: var(--primary); }
-    .page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
-    /* ── Modal ── */
-    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 24px; }
-    .modal { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; }
-    .modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
-    .modal-title { font-size: 15px; font-weight: 600; }
-    .modal-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
-    .modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
-    .form-group { display: flex; flex-direction: column; gap: 6px; }
-    .form-label { font-size: 12px; font-weight: 500; color: var(--text-muted); }
-    /* ── States ── */
-    .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
-    .empty-icon { font-size: 36px; margin-bottom: 12px; }
-    .loading { opacity: .5; pointer-events: none; }
-    .bool-yes { color: var(--success); } .bool-no { color: var(--danger); }
-    .actions { display: flex; gap: 6px; }
-    .close-btn { background: none; border: none; color: var(--text-muted); font-size: 20px; cursor: pointer; line-height: 1; padding: 2px; }
-    .close-btn:hover { color: var(--text); }
-    .alert { padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; }
-    .alert-success { background: #14342b; color: #4ade80; border: 1px solid #166534; }
-    .alert-error   { background: #3b1212; color: #f87171; border: 1px solid #7f1d1d; }
-  </style>
-</head>
-<body>
-  <nav id="sidebar">
-    <div class="sidebar-header">
-      <div class="sidebar-title">⚡ ${title}</div>
-      <div class="sidebar-subtitle">Admin Panel</div>
-    </div>
-    <div class="nav-section">
-      <div class="nav-section-label">Resources</div>
-      ${navItems}
-    </div>
-  </nav>
-  <div id="main">
-    <div id="topbar">
-      <span id="page-title">Dashboard</span>
-      <div style="display:flex;gap:8px;align-items:center">
-        <span style="font-size:12px;color:var(--text-muted)" id="record-count"></span>
-      </div>
-    </div>
-    <div id="content">
-      <div class="empty-state">
-        <div class="empty-icon">📋</div>
-        <p>Select a resource from the sidebar to get started.</p>
-      </div>
-    </div>
-  </div>
-  <div id="modal-root"></div>
-
-<script>
-const API = '/admin/api';
-let state = { resource: null, page: 1, search: '', sort: 'id', order: 'desc', filters: {}, data: null };
-
-// ── Navigation ──────────────────────────────────────────────────
-document.querySelectorAll('.nav-item').forEach(el => {
-  el.addEventListener('click', e => {
-    e.preventDefault();
-    loadResource(el.dataset.slug);
-    document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
-    el.classList.add('active');
-  });
-});
-
-// Handle browser back/forward
-window.addEventListener('popstate', () => {
-  const slug = location.pathname.split('/admin/')[1]?.split('/')[0];
-  if (slug) loadResource(slug);
-});
-
-async function loadResource(slug) {
-  state = { ...state, resource: slug, page: 1, search: '', sort: 'id', order: 'desc', filters: {} };
-  history.pushState({}, '', '/admin/' + slug);
-  await fetchAndRender();
-}
-
-// ── Fetch + Render ───────────────────────────────────────────────
-async function fetchAndRender() {
-  const { resource, page, search, sort, order, filters } = state;
-  const params = new URLSearchParams({ page, sort, order });
-  if (search) params.set('search', search);
-  if (Object.keys(filters).length) params.set('filters', JSON.stringify(filters));
-
-  const res  = await fetch(API + '/' + resource + '?' + params);
-  const json = await res.json();
-  state.data = json;
-
-  document.getElementById('page-title').textContent =
-    json.resource?.label || resource.replace(/-/g,' ').replace(/\\b\\w/g, c => c.toUpperCase());
-  document.getElementById('record-count').textContent = json.total + ' records';
-
-  renderTable(json);
-}
-
-function renderTable({ data, fields, total, page, perPage, lastPage, canCreate, canEdit, canDelete, sortable = [] }) {
-  const listFields = fields.filter(f => !f.detailOnly && !f.hidden);
-  const content    = document.getElementById('content');
-
-  const searchBar = \`
-    <div class="card-header">
-      <span class="card-title">\${state.resource}</span>
-      <div style="display:flex;gap:8px;align-items:center;flex:1;justify-content:flex-end">
-        <input class="search-input" type="text" placeholder="Search..." value="\${state.search}"
-          oninput="debSearch(this.value)">
-        \${canCreate ? '<button class="btn btn-primary" onclick="openCreate()">＋ New</button>' : ''}
-      </div>
-    </div>\`;
-
-  const thead = '<tr>' + listFields.map(f => {
-    const canSort = sortable.includes(f.name);
-    const arrow   = state.sort === f.name ? (state.order === 'asc' ? ' ↑' : ' ↓') : '';
-    return \`<th onclick="\${canSort ? 'toggleSort("' + f.name + '")' : ''}"
-      style="\${canSort ? '' : 'cursor:default'}">\${f.label}\${arrow}</th>\`;
-  }).join('') + (canEdit || canDelete ? '<th style="cursor:default">Actions</th>' : '') + '</tr>';
-
-  const tbody = data.length === 0
-    ? \`<tr><td colspan="\${listFields.length + 1}" style="text-align:center;padding:40px;color:var(--text-muted)">No records found</td></tr>\`
-    : data.map(row => {
-        const cells = listFields.map(f => \`<td>\${renderCell(f, row[f.name])}</td>\`).join('');
-        const actions = (canEdit || canDelete) ? \`<td><div class="actions">
-          \${canEdit   ? \`<button class="btn btn-ghost btn-sm" onclick='openEdit(\${JSON.stringify(row.id)})'>Edit</button>\` : ''}
-          \${canDelete ? \`<button class="btn btn-danger btn-sm" onclick='confirmDelete(\${JSON.stringify(row.id)})'>Delete</button>\` : ''}
-        </div></td>\` : '';
-        return \`<tr>\${cells}\${actions}</tr>\`;
-      }).join('');
-
-  const pageNums = Array.from({ length: Math.min(lastPage, 7) }, (_, i) => i + 1)
-    .map(n => \`<button class="page-btn \${n === page ? 'active' : ''}" onclick="goPage(\${n})">\${n}</button>\`).join('');
-
-  content.innerHTML = \`
-    <div class="card">
-      \${searchBar}
-      <div style="overflow-x:auto"><table><thead>\${thead}</thead><tbody>\${tbody}</tbody></table></div>
-      <div class="pagination">
-        <button class="page-btn" \${page <= 1 ? 'disabled' : ''} onclick="goPage(\${page-1})">‹</button>
-        \${pageNums}
-        <button class="page-btn" \${page >= lastPage ? 'disabled' : ''} onclick="goPage(\${page+1})">›</button>
-        <span class="page-info">Showing \${(page-1)*perPage+1}–\${Math.min(page*perPage,total)} of \${total}</span>
-      </div>
-    </div>\`;
-}
-
-function renderCell(field, value) {
-  if (value === null || value === undefined) return '<span style="color:var(--text-muted)">—</span>';
-  if (field.type === 'boolean') return value
-    ? '<span class="bool-yes">✓</span>'
-    : '<span class="bool-no">✗</span>';
-  if (field.type === 'badge') {
-    const colorMap = { admin:'red', user:'blue', active:'green', inactive:'gray', pending:'yellow' };
-    const c = (field.colors && field.colors[value]) || colorMap[value] || 'gray';
-    return \`<span class="badge badge-\${c}">\${value}</span>\`;
+    return R;
   }
-  if (field.type === 'datetime' && value) return new Date(value).toLocaleString();
-  if (field.type === 'date'     && value) return new Date(value).toLocaleDateString();
-  if (field.type === 'image'    && value) return \`<img src="\${value}" style="width:32px;height:32px;border-radius:4px;object-fit:cover">\`;
-  if (field.type === 'password')          return '••••••••';
-  const str = String(value);
-  return str.length > 60 ? str.slice(0, 60) + '…' : str;
-}
-
-// ── Sort / Page / Search ─────────────────────────────────────────
-function toggleSort(col) {
-  if (state.sort === col) state.order = state.order === 'asc' ? 'desc' : 'asc';
-  else { state.sort = col; state.order = 'asc'; }
-  state.page = 1;
-  fetchAndRender();
-}
-function goPage(p) { state.page = p; fetchAndRender(); }
-let _searchTimer;
-function debSearch(v) { clearTimeout(_searchTimer); _searchTimer = setTimeout(() => { state.search = v; state.page = 1; fetchAndRender(); }, 300); }
-
-// ── Create / Edit ────────────────────────────────────────────────
-async function openCreate() {
-  const { fields } = state.data;
-  const editFields = fields.filter(f => f.type !== 'id' && !f.listOnly && !f.readonly);
-  showModal('New ' + state.resource, renderForm(editFields, {}), async () => {
-    const data = collectForm();
-    const res  = await fetch(API + '/' + state.resource, { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
-    if (res.ok) { closeModal(); showAlert('Created successfully', 'success'); fetchAndRender(); }
-    else        { const e = await res.json(); showAlert(e.message || 'Error', 'error'); }
-  });
-}
-
-async function openEdit(id) {
-  const res    = await fetch(API + '/' + state.resource + '/' + id);
-  const { data: record, fields } = await res.json();
-  const editFields = fields.filter(f => f.type !== 'id' && !f.listOnly && !f.readonly);
-  showModal('Edit ' + state.resource + ' #' + id, renderForm(editFields, record), async () => {
-    const data  = collectForm();
-    const res2  = await fetch(API + '/' + state.resource + '/' + id, { method:'PUT', headers:{'Content-Type':'application/json'}, body: JSON.stringify(data) });
-    if (res2.ok) { closeModal(); showAlert('Updated successfully', 'success'); fetchAndRender(); }
-    else         { const e = await res2.json(); showAlert(e.message || 'Error', 'error'); }
-  });
-}
-
-function renderForm(fields, record) {
-  return fields.map(f => {
-    const val = record[f.name] !== undefined ? record[f.name] : '';
-    let input;
-    if (f.type === 'boolean') {
-      input = \`<select name="\${f.name}"><option value="1" \${val ? 'selected' : ''}>Yes</option><option value="0" \${!val ? 'selected' : ''}>No</option></select>\`;
-    } else if (f.type === 'select' && f.options) {
-      const opts = f.options.map(o => \`<option value="\${o}" \${val===o?'selected':''}>\${o}</option>\`).join('');
-      input = \`<select name="\${f.name}">\${opts}</select>\`;
-    } else if (f.type === 'textarea') {
-      input = \`<textarea name="\${f.name}" rows="4">\${val}</textarea>\`;
-    } else {
-      const t = f.type === 'password' ? 'password' : f.type === 'email' ? 'email' : f.type === 'number' ? 'number' : 'text';
-      input = \`<input type="\${t}" name="\${f.name}" value="\${val}" placeholder="\${f.placeholder || ''}">\`;
-    }
-    return \`<div class="form-group"><label class="form-label">\${f.label}</label>\${input}\${f.help ? '<small style="color:var(--text-muted)">' + f.help + '</small>' : ''}</div>\`;
-  }).join('');
-}
-
-function collectForm() {
-  const modal = document.querySelector('.modal');
-  const data  = {};
-  modal.querySelectorAll('[name]').forEach(el => { data[el.name] = el.value; });
-  return data;
-}
-
-// ── Delete ───────────────────────────────────────────────────────
-function confirmDelete(id) {
-  showModal('Confirm Delete', \`<p style="color:var(--text-muted)">Are you sure you want to delete record #\${id}? This cannot be undone.</p>\`, async () => {
-    const res = await fetch(API + '/' + state.resource + '/' + id, { method: 'DELETE' });
-    if (res.ok) { closeModal(); showAlert('Deleted', 'success'); fetchAndRender(); }
-    else        { const e = await res.json(); showAlert(e.message || 'Error', 'error'); }
-  }, { confirmLabel: 'Delete', confirmClass: 'btn-danger' });
-}
 
-// ── Modal ────────────────────────────────────────────────────────
-function showModal(title, bodyHtml, onConfirm, opts = {}) {
-  document.getElementById('modal-root').innerHTML = \`
-    <div class="modal-overlay" onclick="if(event.target===this)closeModal()">
-      <div class="modal">
-        <div class="modal-header">
-          <span class="modal-title">\${title}</span>
-          <button class="close-btn" onclick="closeModal()">×</button>
-        </div>
-        <div class="modal-body">\${bodyHtml}</div>
-        <div class="modal-footer">
-          <button class="btn btn-ghost" onclick="closeModal()">Cancel</button>
-          <button class="btn \${opts.confirmClass || 'btn-primary'}" onclick="modalConfirm()">\${opts.confirmLabel || 'Save'}</button>
-        </div>
-      </div>
-    </div>\`;
-  window._modalConfirm = onConfirm;
-}
-function closeModal()   { document.getElementById('modal-root').innerHTML = ''; }
-function modalConfirm() { if (window._modalConfirm) window._modalConfirm(); }
-
-// ── Alert ────────────────────────────────────────────────────────
-function showAlert(msg, type = 'success') {
-  const el = document.createElement('div');
-  el.className = \`alert alert-\${type}\`;
-  el.textContent = msg;
-  document.getElementById('content').prepend(el);
-  setTimeout(() => el.remove(), 3000);
-}
-
-// ── Init: load from URL ──────────────────────────────────────────
-(function init() {
-  const slug = location.pathname.split('/admin/')[1]?.split('/')[0];
-  if (slug) {
-    const navEl = document.querySelector(\`.nav-item[data-slug="\${slug}"]\`);
-    if (navEl) { navEl.classList.add('active'); loadResource(slug); }
-  }
-})();
-</script>
-</body>
-</html>`;
+  _error(res, err) {
+    const status = err.status || 500;
+    res.status(status).send(`
+      <html><body style="font-family:system-ui;padding:40px;background:#0c0e14;color:#e2e8f0">
+        <h2 style="color:#ef4444">Admin Error</h2>
+        <pre style="background:#1c1f2e;padding:20px;border-radius:8px;color:#94a3b8">${err.stack || err.message}</pre>
+        <a href="javascript:history.back()" style="color:#6366f1">← Go back</a>
+      </body></html>
+    `);
   }
 
-  // ─── Internal ─────────────────────────────────────────────────────────────
+  // ─── Flash messages (stored in query string for stateless operation) ───────
+  _flash(req, type, message) {
+    // Store in a simple query param on redirect
+    req._flashType    = type;
+    req._flashMessage = message;
+  }
 
-  _resolve(slug, res) {
-    const Resource = this._resources.get(slug);
-    if (!Resource) {
-      res.status(404).json({ error: `Resource "${slug}" not registered` });
-      return null;
-    }
-    return Resource;
+  _pullFlash(req) {
+    const type = req.query._flash_type;
+    const msg  = req.query._flash_msg;
+    if (type && msg) return { [type]: decodeURIComponent(msg) };
+    // Check set by _flash helper (pre-redirect)
+    if (req._flashType) return { [req._flashType]: req._flashMessage };
+    return {};
   }
 
-  _error(res, err) {
-    const status = err.status || err.statusCode || 500;
-    res.status(status).json({ error: err.message, status });
+  // Override redirect to include flash in URL
+  _redirectWithFlash(res, url, type, message) {
+    const sep = url.includes('?') ? '&' : '?';
+    res.redirect(`${url}${sep}_flash_type=${type}&_flash_msg=${encodeURIComponent(message)}`);
   }
 
   _autoResource(ModelClass) {
     const R = class extends AdminResource {};
-    R.model  = ModelClass;
-    R.label  = ModelClass.name + 's';
+    R.model = ModelClass;
+    R.label = ModelClass.name + 's';
     R.labelSingular = ModelClass.name;
     return R;
   }
@@ -611,7 +419,7 @@ function showAlert(msg, type = 'success') {
 // Singleton
 const admin = new Admin();
 module.exports = admin;
-module.exports.Admin        = Admin;
+module.exports.Admin         = Admin;
 module.exports.AdminResource = AdminResource;
 module.exports.AdminField    = AdminField;
 module.exports.AdminFilter   = AdminFilter;