millas 0.2.12-beta-2 → 0.2.13

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

@@ -99,8 +99,11 @@
             <div class="detail-label">{{ field.label }}</div>
             <div class="detail-value">
               {% set val = record[field.name] %}
-              {% include "partials/detail-value.njk" ignore missing %}
-              {{ val | adminCell(field) | safe if val is not none else '<span class="cell-muted">—</span>' }}
+              {% if val is not none %}
+                {{ val | adminCell(field) | safe }}
+              {% else %}
+                <span class="cell-muted">—</span>
+              {% endif %}
             </div>
           </div>
           {% endif %}
@@ -125,7 +128,11 @@
           <div class="detail-label">{{ field.label }}</div>
           <div class="detail-value">
             {% set val = record[field.name] %}
-            {{ val | adminDetail(field) | safe }}
+            {% if val is not none %}
+              {{ val | adminDetail(field) | safe }}
+            {% else %}
+              <span class="cell-muted">—</span>
+            {% endif %}
           </div>
         </div>
         {% endif %}
@@ -246,7 +253,11 @@
           <tr>
             {% for field in inline.fields %}
             <td {% if loop.first %}class="td-primary"{% endif %}>
-              {{ row[field.name] | adminCell(field) | safe if row[field.name] is not none else '<span class="cell-muted">—</span>' }}
+              {% if row[field.name] is not none %}
+                {{ row[field.name] | adminCell(field) | safe }}
+              {% else %}
+                <span class="cell-muted">—</span>
+              {% endif %}
             </td>
             {% endfor %}
             {% if inline.canDelete %}
@@ -343,4 +354,4 @@
     document.querySelectorAll('.tab-panel').forEach((p, i) => p.classList.toggle('active', i === idx));
   }
 </script>
-{% endblock %}
+{% endblock %}

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

@@ -0,0 +1,65 @@
+{% extends "layouts/base.njk" %}
+
+{% block title %}{{ errorTitle }}{% endblock %}
+
+{% block topbar_title %}
+  <span style="color:var(--danger)">{{ errorTitle }}</span>
+{% endblock %}
+{% block sidebar %}
+{% endblock %}
+
+{% block content %}
+<div style="max-width:640px;margin:40px auto;padding:0 8px">
+
+  {# ── Icon + heading ── #}
+  <div style="display:flex;align-items:center;gap:14px;margin-bottom:28px">
+    <div style="flex-shrink:0;width:48px;height:48px;background:var(--danger-bg);border:1px solid var(--danger-border);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center">
+      {% if errorStatus == 404 %}
+      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--danger)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
+        <line x1="11" y1="8" x2="11" y2="11"/><line x1="11" y1="14" x2="11.01" y2="14"/>
+      </svg>
+      {% else %}
+      <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="var(--danger)" 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>
+      {% endif %}
+    </div>
+    <div>
+      <div style="font-size:22px;font-weight:700;color:var(--danger);line-height:1.2">{{ errorStatus }}</div>
+      <div style="font-size:14px;color:var(--text-soft);margin-top:2px">{{ errorTitle }}</div>
+    </div>
+  </div>
+
+  {# ── Message card ── #}
+  <div class="card" style="margin-bottom:20px">
+    <div style="padding:20px 22px;display:flex;align-items:flex-start;gap:12px">
+      <svg style="flex-shrink:0;margin-top:1px;color:var(--text-muted)" width="15" height="15" 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>
+      <span style="font-size:14px;color:var(--text);line-height:1.6">{{ errorMsg }}</span>
+    </div>
+  </div>
+
+  {# ── Stack trace (dev only) ── #}
+  {% if errorStack %}
+  <details style="margin-bottom:20px">
+    <summary style="font-size:12.5px;color:var(--text-muted);cursor:pointer;user-select:none;margin-bottom:8px">Stack trace</summary>
+    <pre style="background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;font-size:11.5px;color:var(--text-soft);overflow-x:auto;line-height:1.65;margin:0;white-space:pre-wrap;word-break:break-word">{{ errorStack }}</pre>
+  </details>
+  {% endif %}
+
+  {# ── Actions ── #}
+  <div style="display:flex;align-items:center;gap:10px">
+    <a href="javascript:history.back()" class="btn btn-ghost btn-sm">
+      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>
+      Go back
+    </a>
+    <a href="{{ adminPrefix }}/" class="btn btn-ghost btn-sm">
+      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+      Dashboard
+    </a>
+  </div>
+
+</div>
+{% endblock %}

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

@@ -99,10 +99,18 @@
   <div class="bulk-bar" id="bulk-bar">
     <span class="bulk-count" id="bulk-count">0 selected</span>
     <span class="text-muted" style="font-size:12px">—</span>
+    {% for action in resource.actions %}
+    <button class="btn btn-ghost btn-sm" onclick="bulkAction({{ action.index }})">
+      {% if action.icon %}<span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-{{ action.icon }}"/></svg></span>{% endif %}
+      {{ action.label }}
+    </button>
+    {% endfor %}
+    {% if resource.canDelete %}
     <button class="btn btn-ghost btn-sm btn-danger" onclick="bulkDelete()">
       <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-trash"/></svg></span>
       Delete selected
     </button>
+    {% endif %}
     <button class="btn btn-ghost btn-sm" style="margin-left:auto" onclick="clearSelection()">
       <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-x"/></svg></span>
       Cancel
@@ -186,7 +194,7 @@
             {% endif %}
           </th>
           {% endfor %}
-          {% if resource.canEdit or resource.canDelete %}
+          {% if resource.canEdit or resource.canDelete or resource.rowActions | length %}
           <th class="col-actions">Actions</th>
           {% endif %}
         </tr>
@@ -200,7 +208,7 @@
           {% for field in listFields %}
           <td class="{% if loop.first %}td-primary{% endif %}">{{ row[field.name] | adminCell(field) | safe }}</td>
           {% endfor %}
-          {% if resource.canEdit or resource.canDelete %}
+          {% if resource.canEdit or resource.canDelete or resource.rowActions | length %}
           <td class="col-actions">
             <div class="ui-menu">
               <button class="action-menu-btn ui-menu-trigger" type="button" aria-label="Row actions">
@@ -219,6 +227,24 @@
                   Edit
                 </a>
                 {% endif %}
+                {% if row._rowActions | length %}
+                {% if resource.canEdit %}<div class="ui-menu-sep"></div>{% endif %}
+                {% for ra in row._rowActions %}
+                {% if ra.href %}
+                <a class="ui-menu-item" href="{{ ra.href }}" target="_blank" rel="noopener">
+                  <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-{{ ra.icon or 'eye' }}"/></svg></span>
+                  {{ ra.label }}
+                </a>
+                {% elif ra.action %}
+                <button class="ui-menu-item" type="button"
+                  data-row-action="{{ adminPrefix }}/{{ resource.slug }}/{{ row.id }}/action/{{ ra.action }}"
+                  data-row-action-label="{{ ra.label }}">
+                  <span class="icon icon-13"><svg viewBox="0 0 24 24"><use href="#ic-{{ ra.icon or 'check' }}"/></svg></span>
+                  {{ ra.label }}
+                </button>
+                {% endif %}
+                {% endfor %}
+                {% endif %}
                 {% if resource.canDelete %}
                 <div class="ui-menu-sep"></div>
                 <button class="ui-menu-item ui-menu-danger" type="button"
@@ -362,6 +388,19 @@
       });
     };
 
+    window.bulkAction = function(actionIndex) {
+      var ids = $('.item-check:checked').map(function() { return this.value; }).get();
+      if (!ids.length) return;
+      var csrf = $('meta[name="csrf-token"]').attr('content') || '';
+      var $form = $('<form method="POST">').attr('action', PREFIX + '/' + SLUG + '/bulk-action');
+      $form.append('<input name="_csrf" value="' + csrf + '">');
+      $form.append('<input type="hidden" name="actionIndex" value="' + actionIndex + '">');
+      $.each(ids, function(_, id) {
+        $form.append('<input type="hidden" name="ids[]" value="' + id + '">');
+      });
+      $form.appendTo('body').submit();
+    };
+
     // ── UI.Dropdown — portal-rendered action menus ────────────────────────────
     // Wire export menu
     var $exportBtn   = $('#export-menu-btn');
@@ -399,6 +438,78 @@
         dd.close();
         confirmDelete($(this).data('confirm-delete'), $(this).data('confirm-label'));
       });
+
+      $panel.find('[data-row-action]').on('click', function() {
+        dd.close();
+        var url   = $(this).data('row-action');
+        var label = $(this).data('row-action-label');
+        UI.Confirm.show({
+          title:   label,
+          message: 'Run <strong>' + label + '</strong> on this record?',
+          confirm: label,
+        }).then(function(ok) {
+          if (!ok) return;
+          var csrf = $('meta[name="csrf-token"]').attr('content') || '';
+          var $form = $('<form method="POST">').attr('action', url);
+          $form.append('<input name="_csrf" value="' + csrf + '">');
+          $form.appendTo('body').submit();
+        });
+      });
+
+      // ── Right-click on the row opens a context menu at the cursor ──────────
+      (function($menuPanel) {
+        var $row = $menuPanel.closest('tr');
+
+        $row.on('contextmenu', function(e) {
+          e.preventDefault();
+          e.stopPropagation();
+
+          // Remove any existing portal
+          $('.context-menu-portal').remove();
+
+          // Build a fresh portal from the panel's inner HTML (avoids clone display:none)
+          var $p = $('<div class="ui-menu-panel context-menu-portal"></div>');
+          $p.html($menuPanel.html());
+          $p.css({
+            position: 'fixed',
+            top:      Math.min(e.clientY, window.innerHeight - 240) + 'px',
+            left:     Math.min(e.clientX, window.innerWidth  - 190) + 'px',
+            zIndex:   9999,
+          });
+          $('body').append($p);
+
+          // Wire handlers on the portal
+          $p.find('[data-confirm-delete]').on('click', function() {
+            $p.remove();
+            confirmDelete($(this).data('confirm-delete'), $(this).data('confirm-label'));
+          });
+          $p.find('[data-row-action]').on('click', function() {
+            $p.remove();
+            var _url   = $(this).data('row-action');
+            var _label = $(this).data('row-action-label');
+            UI.Confirm.show({
+              title:   _label,
+              message: 'Run <strong>' + _label + '</strong> on this record?',
+              confirm: _label,
+            }).then(function(ok) {
+              if (!ok) return;
+              var csrf = $('meta[name="csrf-token"]').attr('content') || '';
+              var $form = $('<form method="POST">').attr('action', _url);
+              $form.append('<input name="_csrf" value="' + csrf + '">');
+              $form.appendTo('body').submit();
+            });
+          });
+          $p.find('a.ui-menu-item').on('click', function() { $p.remove(); });
+
+          // Dismiss on next click anywhere or Escape
+          setTimeout(function() {
+            $(document).one('click.ctxmenu', function() { $p.remove(); });
+          }, 0);
+          $(document).one('keydown.ctxmenu', function(ev) {
+            if (ev.key === 'Escape') { $p.remove(); }
+          });
+        });
+      })($panel);
     });
   });
 </script>
@@ -437,6 +548,20 @@
   .ui-menu-danger:hover { background: var(--danger-bg); color: var(--danger); }
 
   .ui-menu-sep { height: 1px; background: var(--border-soft); margin: 3px 0; }
+
+  /* ── Context menu portal ── */
+  .context-menu-portal {
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    min-width: 160px;
+    overflow: hidden;
+    box-shadow: 0 4px 16px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.08);
+  }
+
+  /* ── Right-click cursor hint on rows ── */
+  #data-table tbody tr { cursor: context-menu; }
+  #data-table tbody tr:hover { background: var(--surface2); }
 </style>
 
 {% endblock %}

package/src/admin/views/partials/form-scripts.njk

@@ -133,8 +133,9 @@
   //  Supabase-style: async, paginated, searchable, keyboard nav.
   // ══════════════════════════════════════════════════════════════
   (function () {
-    const ADMIN_PREFIX = {{ adminPrefix | dump | safe }};
-    const PER_PAGE     = 20;
+    const ADMIN_PREFIX   = {{ adminPrefix | dump | safe }};
+    const SOURCE_RESOURCE = {{ resource.slug | dump | safe }};
+    const PER_PAGE       = 20;
     const DEBOUNCE_MS  = 220;
 
     // Initialise every fk-widget — deferred so ui.js is guaranteed loaded.
@@ -150,6 +151,7 @@
     function initFKWidget(widget) {
       const name       = widget.dataset.name;
       const resource   = widget.dataset.resource;
+      const fkField    = widget.dataset.fkField || name;
       const nullable   = widget.dataset.nullable === 'true';
       const currentId  = widget.dataset.currentId || '';
 
@@ -192,7 +194,7 @@
 
       // ── If there's a current value, resolve its label immediately ──────────
       if (currentId) {
-        fetch(`${ADMIN_PREFIX}/api/${resource}/options?q=&page=1&limit=100`)
+        fetch(`${ADMIN_PREFIX}/api/${resource}/options?q=&page=1&limit=100&field=${fkField}&from=${SOURCE_RESOURCE}`)
           .then(r => r.json())
           .then(json => {
             const match = (json.data || []).find(r => String(r.id) === String(currentId));
@@ -295,6 +297,8 @@
           q:     state.query,
           page:  state.page,
           limit: PER_PAGE,
+          field: fkField,
+          from:  SOURCE_RESOURCE,
         });
 
         fetch(`${ADMIN_PREFIX}/api/${resource}/options?${params}`)

package/src/admin/views/partials/form-widget.njk

@@ -25,7 +25,8 @@
   data-nullable="{{ 'true' if field.nullable else 'false' }}"
   data-required="{{ 'true' if not field.nullable else 'false' }}"
   data-current-id="{{ val }}"
-  data-current-label="">
+  data-current-label=""
+  data-fk-field="{{ field.name }}">
   <input type="hidden"
     id="field-{{ field.name }}"
     name="{{ field.name }}"

package/src/admin/views/partials/icons.njk

@@ -0,0 +1,64 @@
+{# ══════════════════════════════════════
+   SVG ICON SPRITE
+   ══════════════════════════════════════
+   Hidden SVG sprite — all icons referenced via <use href="#ic-name"/>.
+   To add a new icon: add a <symbol> here with id="ic-<name>".
+   All paths use stroke="currentColor" — colour is set via CSS.
+   ViewBox is always "0 0 24 24". Stroke-width 2, linecap/linejoin round.
+#}
+<svg xmlns="http://www.w3.org/2000/svg" style="display:none" aria-hidden="true">
+
+  {# ── Navigation & Layout ── #}
+  <symbol id="ic-grid"         viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></symbol>
+  <symbol id="ic-list"         viewBox="0 0 24 24"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></symbol>
+  <symbol id="ic-home"         viewBox="0 0 24 24"><path d="M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H5a1 1 0 01-1-1V9.5z"/><path d="M9 21V12h6v9"/></symbol>
+  <symbol id="ic-chevron-left" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></symbol>
+  <symbol id="ic-chevron-right"viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></symbol>
+  <symbol id="ic-chevron-down" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></symbol>
+  <symbol id="ic-arrow-left"   viewBox="0 0 24 24"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></symbol>
+
+  {# ── Data & Content ── #}
+  <symbol id="ic-table"        viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 3v18"/></symbol>
+  <symbol id="ic-database"     viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></symbol>
+  <symbol id="ic-file"         viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></symbol>
+  <symbol id="ic-tag"          viewBox="0 0 24 24"><path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z"/><circle cx="7" cy="7" r="1.5" fill="currentColor" stroke="none"/></symbol>
+  <symbol id="ic-save"         viewBox="0 0 24 24"><path d="M19 21H5a2 2 0 01-2-2V5a2 2 0 012-2h11l5 5v11a2 2 0 01-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></symbol>
+  <symbol id="ic-activity"     viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></symbol>
+
+  {# ── Users & Auth ── #}
+  <symbol id="ic-users"        viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75"/></symbol>
+  <symbol id="ic-user"         viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></symbol>
+  <symbol id="ic-shield"       viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></symbol>
+  <symbol id="ic-shield-check" viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></symbol>
+  <symbol id="ic-lock"         viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></symbol>
+  <symbol id="ic-log-out"      viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></symbol>
+
+  {# ── Actions ── #}
+  <symbol id="ic-plus"         viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></symbol>
+  <symbol id="ic-edit"         viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></symbol>
+  <symbol id="ic-trash"        viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6M10 11v6M14 11v6"/><path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2"/></symbol>
+  <symbol id="ic-refresh"      viewBox="0 0 24 24"><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"/></symbol>
+  <symbol id="ic-download"     viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></symbol>
+  <symbol id="ic-upload"       viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></symbol>
+  <symbol id="ic-ban"          viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></symbol>
+
+  {# ── Status & Feedback ── #}
+  <symbol id="ic-check"        viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></symbol>
+  <symbol id="ic-x"            viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></symbol>
+  <symbol id="ic-alert-circle" viewBox="0 0 24 24"><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"/></symbol>
+  <symbol id="ic-info"         viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></symbol>
+
+  {# ── Search & Filter ── #}
+  <symbol id="ic-search"       viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></symbol>
+  <symbol id="ic-filter"       viewBox="0 0 24 24"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></symbol>
+
+  {# ── Domain ── #}
+  <symbol id="ic-key"          viewBox="0 0 24 24"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 11-7.778 7.778 5.5 5.5 0 017.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></symbol>
+  <symbol id="ic-calendar"     viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></symbol>
+  <symbol id="ic-credit-card"  viewBox="0 0 24 24"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></symbol>
+  <symbol id="ic-settings"     viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/></symbol>
+  <symbol id="ic-more-vertical"viewBox="0 0 24 24"><circle cx="12" cy="5" r="1" fill="currentColor" stroke="none"/><circle cx="12" cy="12" r="1" fill="currentColor" stroke="none"/><circle cx="12" cy="19" r="1" fill="currentColor" stroke="none"/></symbol>
+  <symbol id="ic-eye-off"      viewBox="0 0 24 24"><path d="M17.94 17.94A10.07 10.07 0 0112 20c-7 0-11-8-11-8a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c7 0 11 8 11 8a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></symbol>
+  <symbol id="ic-eye"          viewBox="0 0 24 24"><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"/></symbol>
+
+</svg>