millas 0.1.0

package/src/admin/Admin.js

@@ -0,0 +1,617 @@
+'use strict';
+
+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');
+ *
+ *   Admin.register(UserResource);
+ *   Admin.register(PostResource);
+ *   Admin.register(OrderResource);
+ *
+ * Then mount in bootstrap/app.js:
+ *
+ *   Admin.mount(app, expressApp);
+ *
+ * Access at: http://localhost:3000/admin
+ */
+class Admin {
+  constructor() {
+    this._resources = new Map();   // slug → AdminResource class
+    this._config    = {
+      prefix:  '/admin',
+      title:   'Millas Admin',
+      auth:    false,              // set to a middleware fn to protect
+    };
+  }
+
+  // ─── Configuration ─────────────────────────────────────────────────────────
+
+  configure(config = {}) {
+    Object.assign(this._config, config);
+    return this;
+  }
+
+  // ─── 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) {
+      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);
+    return this;
+  }
+
+  /**
+   * Register multiple resources at once.
+   */
+  registerMany(resources = []) {
+    resources.forEach(r => this.register(r));
+    return this;
+  }
+
+  /**
+   * Get all registered resources.
+   */
+  resources() {
+    return [...this._resources.values()];
+  }
+
+  // ─── Mount ────────────────────────────────────────────────────────────────
+
+  /**
+   * Mount admin routes onto the Millas Route instance.
+   * Call this in routes/api.js or bootstrap/app.js.
+   *
+   * Admin.mount(route, expressApp);
+   */
+  mount(route, 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));
+    });
+
+    return this;
+  }
+
+  // ─── Request Handlers ─────────────────────────────────────────────────────
+
+  async _list(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,
+      });
+    } catch (err) {
+      this._error(res, err);
+    }
+  }
+
+  async _show(req, res) {
+    try {
+      const Resource = this._resolve(req.params.resource, res);
+      if (!Resource) return;
+
+      const record = await Resource.fetchOne(req.params.id);
+      const fields = Resource.fields().map(f => f.toJSON());
+
+      res.json({ data: record, fields });
+    } catch (err) {
+      this._error(res, err);
+    }
+  }
+
+  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 record = await Resource.create(req.body);
+      res.status(201).json({ data: record, message: 'Created successfully' });
+    } catch (err) {
+      this._error(res, err);
+    }
+  }
+
+  async _update(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 record = await Resource.update(req.params.id, req.body);
+      res.json({ data: record, message: 'Updated successfully' });
+    } catch (err) {
+      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' });
+
+      await Resource.destroy(req.params.id);
+      res.json({ message: 'Deleted successfully' });
+    } 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,
+    }));
+
+    res.setHeader('Content-Type', 'text/html');
+    res.send(this._renderShell(title, resources));
+  }
+
+  _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;
+    }
+    .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>\`;
+  }
+  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>`;
+  }
+
+  // ─── Internal ─────────────────────────────────────────────────────────────
+
+  _resolve(slug, res) {
+    const Resource = this._resources.get(slug);
+    if (!Resource) {
+      res.status(404).json({ error: `Resource "${slug}" not registered` });
+      return null;
+    }
+    return Resource;
+  }
+
+  _error(res, err) {
+    const status = err.status || err.statusCode || 500;
+    res.status(status).json({ error: err.message, status });
+  }
+
+  _autoResource(ModelClass) {
+    const R = class extends AdminResource {};
+    R.model  = ModelClass;
+    R.label  = ModelClass.name + 's';
+    R.labelSingular = ModelClass.name;
+    return R;
+  }
+}
+
+// Singleton
+const admin = new Admin();
+module.exports = admin;
+module.exports.Admin        = Admin;
+module.exports.AdminResource = AdminResource;
+module.exports.AdminField    = AdminField;
+module.exports.AdminFilter   = AdminFilter;

package/src/admin/index.js

@@ -0,0 +1,13 @@
+'use strict';
+
+const Admin              = require('./Admin');
+const AdminServiceProvider = require('../providers/AdminServiceProvider');
+const { AdminResource, AdminField, AdminFilter } = require('./resources/AdminResource');
+
+module.exports = {
+  Admin,
+  AdminResource,
+  AdminField,
+  AdminFilter,
+  AdminServiceProvider,
+};