millas 0.1.9 → 0.2.0

package/src/admin/views/pages/dashboard.njk

@@ -1,61 +1,66 @@
 {% extends "layouts/base.njk" %}
-
 {% block title %}Dashboard{% endblock %}
 
 {% block content %}
 <div class="breadcrumb">
-  <span>🏠</span>
+  <span class="icon icon-13" style="color:var(--text-xmuted)"><svg viewBox="0 0 24 24"><use href="#ic-grid"/></svg></span>
   <span class="breadcrumb-sep">›</span>
-  <span>Dashboard</span>
+  <span class="breadcrumb-current">Dashboard</span>
 </div>
 
 {# ── Stat cards ── #}
+{% if resources | length %}
 <div class="stats-grid">
   {% for resource in resources %}
-  <a href="{{ adminPrefix }}/{{ resource.slug }}" style="text-decoration:none">
-    <div class="stat-card" style="cursor:pointer;transition:border .15s" onmouseover="this.style.borderColor='var(--primary)'" onmouseout="this.style.borderColor='var(--border)'">
-      <div class="stat-icon">{{ resource.icon }}</div>
-      <div class="stat-label">{{ resource.label }}</div>
-      <div class="stat-value">{{ resource.count if resource.count is defined else '—' }}</div>
-      <div class="stat-sub">Total records</div>
+  <a href="{{ adminPrefix }}/{{ resource.slug }}" class="stat-card" style="cursor:pointer">
+    <div class="stat-icon-wrap">
+      <span class="icon icon-18">
+        <svg viewBox="0 0 24 24"><use href="#ic-table"/></svg>
+      </span>
     </div>
+    <div class="stat-label">{{ resource.label }}</div>
+    <div class="stat-value">{{ resource.count if resource.count is defined else '—' }}</div>
+    <div class="stat-sub">Total records</div>
   </a>
-  {% else %}
-  <div class="stat-card">
-    <div class="stat-icon">📋</div>
-    <div class="stat-label">Resources</div>
-    <div class="stat-value">0</div>
-    <div class="stat-sub">None registered yet</div>
-  </div>
   {% endfor %}
 </div>
+{% endif %}
 
-{# ── Quick start if no resources ── #}
+{# ── No resources welcome state ── #}
 {% if not resources | length %}
 <div class="card">
   <div class="card-body">
     <div class="empty-state">
-      <div class="empty-icon">🚀</div>
+      <div class="empty-icon">
+        <span class="icon icon-24"><svg viewBox="0 0 24 24"><use href="#ic-database"/></svg></span>
+      </div>
       <div class="empty-title">Welcome to Millas Admin</div>
       <div class="empty-desc">
         Register your models to start managing your data.
-        Add this to your <code>AppServiceProvider.boot()</code>:
+        Add this to your <code style="font-family:'DM Mono',monospace;background:var(--surface3);padding:1px 5px;border-radius:3px;font-size:12px">AppServiceProvider.boot()</code>:
       </div>
-      <pre style="background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:16px;text-align:left;font-size:12px;margin:0 auto;max-width:480px;overflow-x:auto">
-const { Admin, AdminResource } = resolveMillas();
+      <pre style="background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:16px;text-align:left;font-family:'DM Mono',monospace;font-size:12px;margin:0 auto;max-width:480px;overflow-x:auto;color:var(--text-soft)">const { Admin } = resolveMillas();
 Admin.register(UserResource);
-Admin.mount(Route, expressApp);</pre>
+Admin.mount(expressApp);</pre>
     </div>
   </div>
 </div>
+
 {% else %}
-{# ── Recent activity per resource ── #}
+
+{# ── Recent records per resource ── #}
 {% for resource in resources %}
 {% if resource.recent | length %}
-<div class="card mb-6">
+<div class="card mb-5">
   <div class="card-header">
-    <span class="card-title">{{ resource.icon }} Recent {{ resource.label }}</span>
-    <a href="{{ adminPrefix }}/{{ resource.slug }}" class="btn btn-ghost btn-sm">View all →</a>
+    <span class="card-title">
+      <span class="icon icon-15" style="color:var(--primary)"><svg viewBox="0 0 24 24"><use href="#ic-table"/></svg></span>
+      Recent {{ resource.label }}
+    </span>
+    <a href="{{ adminPrefix }}/{{ resource.slug }}" class="btn btn-ghost btn-sm">
+      View all
+      <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-chevron-right"/></svg></span>
+    </a>
   </div>
   <div class="table-wrap">
     <table>
@@ -80,5 +85,6 @@ Admin.mount(Route, expressApp);</pre>
 </div>
 {% endif %}
 {% endfor %}
+
 {% endif %}
 {% endblock %}

package/src/admin/views/pages/form.njk

@@ -1,145 +1,262 @@
 {% extends "layouts/base.njk" %}
 
 {% block title %}{{ 'Edit' if isEdit else 'New' }} {{ resource.singular }}{% endblock %}
-{% block topbar_title %}{{ resource.icon }} {{ 'Edit' if isEdit else 'New' }} {{ resource.singular }}{% endblock %}
+{% block topbar_title %}
+  <span class="icon icon-16" style="color:var(--text-muted)">
+    <svg viewBox="0 0 24 24"><use href="#ic-{{ 'edit' if isEdit else 'plus' }}"/></svg>
+  </span>
+  {{ 'Edit' if isEdit else 'New' }} {{ resource.singular }}
+{% endblock %}
+
+{% block topbar_actions %}
+  <a href="{{ adminPrefix }}/{{ resource.slug }}" class="btn btn-ghost btn-sm">
+    <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-arrow-left"/></svg></span>
+    Back to {{ resource.label }}
+  </a>
+{% endblock %}
 
 {% block content %}
 <div class="breadcrumb">
-  <a href="{{ adminPrefix }}/">Dashboard</a>
+  <a href="{{ adminPrefix }}/">
+    <span class="icon icon-12"><svg viewBox="0 0 24 24"><use href="#ic-grid"/></svg></span>
+  </a>
   <span class="breadcrumb-sep">›</span>
   <a href="{{ adminPrefix }}/{{ resource.slug }}">{{ resource.label }}</a>
   <span class="breadcrumb-sep">›</span>
-  <span>{{ 'Edit #' + record.id if isEdit else 'New' }}</span>
+  <span class="breadcrumb-current">{{ 'Edit #' + record.id if isEdit else 'New ' + resource.singular }}</span>
 </div>
 
-<div class="card" style="max-width:720px">
-  <div class="card-header">
-    <span class="card-title">{{ 'Edit ' + resource.singular + ' #' + record.id if isEdit else 'Create ' + resource.singular }}</span>
-  </div>
-  <div class="card-body">
-    <form method="POST" action="{{ formAction }}">
+<div style="max-width:760px">
+  <div class="card">
+    <div class="card-header">
+      <span class="card-title">
+        <span class="icon icon-15" style="color:var(--primary)">
+          <svg viewBox="0 0 24 24"><use href="#ic-{{ 'edit' if isEdit else 'file' }}"/></svg>
+        </span>
+        {{ ('Edit ' + resource.singular + ' #' + record.id) if isEdit else ('Create ' + resource.singular) }}
+      </span>
       {% if isEdit %}
-      <input type="hidden" name="_method" value="PUT">
+      <span class="badge badge-gray text-xs">ID: {{ record.id }}</span>
       {% endif %}
+    </div>
 
+    <div class="card-body">
+
+      {# ── Validation errors summary ── #}
       {% if errors | length %}
-      <div class="alert alert-error" style="margin-bottom:20px">
+      <div class="alert alert-error mb-5">
+        <span class="icon icon-16"><svg viewBox="0 0 24 24"><use href="#ic-alert-circle"/></svg></span>
         <div>
           <strong>Please fix the following errors:</strong>
-          <ul style="margin-top:6px;padding-left:16px">
+          <ul style="margin-top:5px;padding-left:14px;list-style:disc">
             {% for field, msgs in errors %}
-            <li>{{ msgs[0] }}</li>
+            <li style="font-size:12.5px;margin-top:2px">{{ msgs[0] if msgs is iterable and msgs[0] is string else msgs }}</li>
             {% endfor %}
           </ul>
         </div>
       </div>
       {% endif %}
 
-      <div class="form-grid">
-        {% for field in formFields %}
-        <div class="form-group {% if field.type == 'textarea' or field.type == 'json' %}full{% endif %}">
-          <label class="form-label">
-            {{ field.label }}
-            {% if field.required %}<span class="required">*</span>{% endif %}
-          </label>
-
-          {% set val = record[field.name] if record[field.name] is defined else '' %}
-          {% set hasError = errors[field.name] is defined %}
-
-          {% if field.type == 'select' and field.options %}
-          <select name="{{ field.name }}" class="form-control {% if hasError %}error{% endif %}">
-            <option value="">— Select —</option>
-            {% for opt in field.options %}
-            <option value="{{ opt }}" {% if val == opt %}selected{% endif %}>{{ opt }}</option>
-            {% endfor %}
-          </select>
-
-          {% elif field.type == 'boolean' %}
-          <select name="{{ field.name }}" class="form-control">
-            <option value="1" {% if val %}selected{% endif %}>Yes</option>
-            <option value="0" {% if not val %}selected{% endif %}>No</option>
-          </select>
-
-          {% elif field.type == 'textarea' %}
-          <textarea
-            name="{{ field.name }}"
-            class="form-control {% if hasError %}error{% endif %}"
-            placeholder="{{ field.placeholder or '' }}"
-            rows="4">{{ val }}</textarea>
-
-          {% elif field.type == 'json' %}
-          <textarea
-            name="{{ field.name }}"
-            class="form-control {% if hasError %}error{% endif %}"
-            placeholder='{"key": "value"}'
-            style="font-family:monospace;font-size:12px"
-            rows="5">{{ val | dump if val else '' }}</textarea>
-
-          {% elif field.type == 'password' %}
-          <input
-            type="password"
-            name="{{ field.name }}"
-            class="form-control {% if hasError %}error{% endif %}"
-            placeholder="{{ 'Leave blank to keep current' if isEdit else '' }}">
-
-          {% elif field.type == 'email' %}
-          <input
-            type="email"
-            name="{{ field.name }}"
-            value="{{ val }}"
-            class="form-control {% if hasError %}error{% endif %}"
-            placeholder="{{ field.placeholder or '' }}">
-
-          {% elif field.type == 'number' %}
-          <input
-            type="number"
-            name="{{ field.name }}"
-            value="{{ val }}"
-            class="form-control {% if hasError %}error{% endif %}"
-            placeholder="{{ field.placeholder or '0' }}">
-
-          {% elif field.type == 'date' %}
-          <input
-            type="date"
-            name="{{ field.name }}"
-            value="{{ val }}"
-            class="form-control {% if hasError %}error{% endif %}">
-
-          {% else %}
-          <input
-            type="text"
-            name="{{ field.name }}"
-            value="{{ val }}"
-            class="form-control {% if hasError %}error{% endif %}"
-            placeholder="{{ field.placeholder or '' }}">
-          {% endif %}
+      <form method="POST" action="{{ formAction }}" id="record-form" novalidate>
+        {% if isEdit %}
+        <input type="hidden" name="_method" value="PUT">
+        {% endif %}
+
+        <div class="form-grid">
+          {% for field in formFields %}
+          <div class="form-group {% if field.type == 'textarea' or field.type == 'json' %}full{% endif %}">
+            <label class="form-label" for="field-{{ field.name }}">
+              {{ field.label }}
+              {% if field.required %}<span class="required">*</span>{% endif %}
+            </label>
+
+            {% set val = record[field.name] if record[field.name] is defined else '' %}
+            {% set hasError = errors[field.name] is defined %}
+
+            {# ── Select ── #}
+            {% if field.type == 'select' and field.options %}
+            <select
+              id="field-{{ field.name }}"
+              name="{{ field.name }}"
+              class="form-control{% if hasError %} error{% endif %}">
+              <option value="">— Select —</option>
+              {% for opt in field.options %}
+              <option value="{{ opt }}" {% if val == opt %}selected{% endif %}>{{ opt }}</option>
+              {% endfor %}
+            </select>
+
+            {# ── Boolean ── #}
+            {% elif field.type == 'boolean' %}
+            <div class="check-group" style="padding:8px 0">
+              <input
+                type="checkbox"
+                id="field-{{ field.name }}"
+                name="{{ field.name }}"
+                class="check-input"
+                value="1"
+                {% if val %}checked{% endif %}>
+              <label class="check-label" for="field-{{ field.name }}">
+                {{ field.label }}
+              </label>
+            </div>
+
+            {# ── Textarea ── #}
+            {% elif field.type == 'textarea' %}
+            <textarea
+              id="field-{{ field.name }}"
+              name="{{ field.name }}"
+              class="form-control{% if hasError %} error{% endif %}"
+              placeholder="{{ field.placeholder or '' }}"
+              rows="4">{{ val }}</textarea>
+
+            {# ── JSON ── #}
+            {% elif field.type == 'json' %}
+            <textarea
+              id="field-{{ field.name }}"
+              name="{{ field.name }}"
+              class="form-control{% if hasError %} error{% endif %}"
+              placeholder='{"key": "value"}'
+              style="font-family:'DM Mono',monospace;font-size:12px"
+              rows="5">{{ val | dump if val else '' }}</textarea>
+
+            {# ── Password ── #}
+            {% elif field.type == 'password' %}
+            <div style="position:relative">
+              <input
+                type="password"
+                id="field-{{ field.name }}"
+                name="{{ field.name }}"
+                class="form-control{% if hasError %} error{% endif %}"
+                placeholder="{{ 'Leave blank to keep current' if isEdit else '' }}"
+                style="padding-right:40px">
+              <button type="button"
+                onclick="togglePassword(this)"
+                style="position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--text-muted);display:flex;align-items:center">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>
+                </svg>
+              </button>
+            </div>
 
-          {% if hasError %}
-          <span class="form-error">{{ errors[field.name][0] }}</span>
-          {% elif field.help %}
-          <span class="form-help">{{ field.help }}</span>
+            {# ── Email ── #}
+            {% elif field.type == 'email' %}
+            <input
+              type="email"
+              id="field-{{ field.name }}"
+              name="{{ field.name }}"
+              value="{{ val }}"
+              class="form-control{% if hasError %} error{% endif %}"
+              placeholder="{{ field.placeholder or 'email@example.com' }}">
+
+            {# ── Number ── #}
+            {% elif field.type == 'number' %}
+            <input
+              type="number"
+              id="field-{{ field.name }}"
+              name="{{ field.name }}"
+              value="{{ val }}"
+              class="form-control{% if hasError %} error{% endif %}"
+              placeholder="{{ field.placeholder or '0' }}">
+
+            {# ── Date ── #}
+            {% elif field.type == 'date' %}
+            <input
+              type="date"
+              id="field-{{ field.name }}"
+              name="{{ field.name }}"
+              value="{{ val }}"
+              class="form-control{% if hasError %} error{% endif %}">
+
+            {# ── Datetime ── #}
+            {% elif field.type == 'datetime' %}
+            <input
+              type="datetime-local"
+              id="field-{{ field.name }}"
+              name="{{ field.name }}"
+              value="{{ val }}"
+              class="form-control{% if hasError %} error{% endif %}">
+
+            {# ── Default text ── #}
+            {% else %}
+            <input
+              type="text"
+              id="field-{{ field.name }}"
+              name="{{ field.name }}"
+              value="{{ val }}"
+              class="form-control{% if hasError %} error{% endif %}"
+              placeholder="{{ field.placeholder or '' }}">
+            {% endif %}
+
+            {# ── Error / help ── #}
+            {% if hasError %}
+            <span class="form-error">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+              {{ errors[field.name][0] if errors[field.name] is iterable and errors[field.name][0] is string else errors[field.name] }}
+            </span>
+            {% elif field.help %}
+            <span class="form-help">{{ field.help }}</span>
+            {% endif %}
+          </div>
+          {% endfor %}
+        </div>
+
+        {# ── Form footer ── #}
+        <div class="flex items-center gap-2" style="margin-top:24px;padding-top:20px;border-top:1px solid var(--border-soft)">
+          <button type="submit" class="btn btn-primary" id="submit-btn">
+            <span class="icon icon-14"><svg viewBox="0 0 24 24"><use href="#ic-save"/></svg></span>
+            {{ 'Save Changes' if isEdit else 'Create ' + resource.singular }}
+          </button>
+          <a href="{{ adminPrefix }}/{{ resource.slug }}" class="btn btn-ghost">Cancel</a>
+
+          {% if isEdit and resource.canDelete %}
+          <button type="button" class="btn btn-danger" style="margin-left:auto"
+            onclick="confirmDelete('{{ adminPrefix }}/{{ resource.slug }}/{{ record.id }}/delete', '{{ resource.singular }} #{{ record.id }}')">
+            <span class="icon icon-14"><svg viewBox="0 0 24 24"><use href="#ic-trash"/></svg></span>
+            Delete
+          </button>
           {% endif %}
         </div>
-        {% endfor %}
-      </div>
+      </form>
+    </div>
+  </div>
 
-      <div class="flex items-center gap-2" style="margin-top:24px;padding-top:20px;border-top:1px solid var(--border)">
-        <button type="submit" class="btn btn-primary">
-          {{ '💾 Save Changes' if isEdit else '＋ Create ' + resource.singular }}
-        </button>
-        <a href="{{ adminPrefix }}/{{ resource.slug }}" class="btn btn-ghost">Cancel</a>
-        {% if isEdit and resource.canDelete %}
-        <button type="button" class="btn btn-danger" style="margin-left:auto"
-          onclick="confirmDelete('{{ adminPrefix }}/{{ resource.slug }}/{{ record.id }}/delete', '{{ resource.singular }} #{{ record.id }}')">
-          Delete
-        </button>
-        {% endif %}
-      </div>
-    </form>
+  {# ── Timestamps readonly ── #}
+  {% if isEdit and (record.created_at or record.updated_at) %}
+  <div class="flex gap-4" style="margin-top:14px;padding:0 2px">
+    {% if record.created_at %}
+    <span class="text-xs text-muted flex items-center gap-1">
+      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+      Created {{ record.created_at }}
+    </span>
+    {% endif %}
+    {% if record.updated_at %}
+    <span class="text-xs text-muted flex items-center gap-1">
+      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></svg>
+      Updated {{ record.updated_at }}
+    </span>
+    {% endif %}
   </div>
+  {% endif %}
 </div>
 
+<script>
+  function togglePassword(btn) {
+    const input = btn.previousElementSibling || btn.closest('div').querySelector('input');
+    if (!input) return;
+    input.type = input.type === 'password' ? 'text' : 'password';
+  }
+
+  // Prevent double-submit
+  document.getElementById('record-form')?.addEventListener('submit', function() {
+    const btn = document.getElementById('submit-btn');
+    if (btn) {
+      btn.disabled = true;
+      btn.innerHTML = `<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="animation:spin 1s linear infinite"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></svg> Saving…`;
+    }
+  });
+</script>
+
 <style>
-  .form-control.error { border-color: var(--danger); }
+  @keyframes spin { to { transform: rotate(360deg); } }
 </style>
 {% endblock %}