Add user database migration, core reusable components, and layout structure

2026-05-16 18:54:23 -04:00
parent c7df396a83
commit e132c7a580
33 changed files with 2348 additions and 398 deletions
@@ -0,0 +1,41 @@
+const TABS = [
+  { label: 'Dashboard',   href: '/',            icon: 'layout-dashboard' },
+  { label: 'Work Orders', href: '/work-orders',  icon: 'clipboard-list'  },
+  { label: 'People',      href: '/registry/people', icon: 'users'        },
+  { label: 'Reports',     href: '/reports',      icon: 'bar-chart-2'     },
+];
+
+class AppMobileNav extends HTMLElement {
+  connectedCallback() {
+    this.#render();
+    window.addEventListener('hashchange', () => this.#render());
+  }
+
+  #render() {
+    const path = decodeURIComponent(location.hash.slice(1)) || '/';
+    this.innerHTML = `
+      <style>
+        app-mobile-nav a {
+          flex: 1; display: flex; flex-direction: column; align-items: center;
+          justify-content: center; gap: .2rem; text-decoration: none;
+          color: var(--text-muted); font-size: .65rem; font-weight: 500;
+          padding: .4rem; position: relative; transition: color .15s;
+        }
+        app-mobile-nav a.active { color: var(--teal); }
+        app-mobile-nav a.active::after {
+          content: ''; position: absolute; bottom: 0; left: 25%; right: 25%;
+          height: 2px; background: var(--teal); border-radius: 1px;
+        }
+        app-mobile-nav a i { width: 20px; height: 20px; }
+      </style>
+      ${TABS.map(t => {
+        const active = t.href === '/' ? path === '/' : path.startsWith(t.href);
+        return `<a href="#${t.href}" class="${active ? 'active' : ''}">
+          <i data-lucide="${t.icon}"></i>
+          <span>${t.label}</span>
+        </a>`;
+      }).join('')}`;
+    if (window.lucide) lucide.createIcons({ nodes: [this] });
+  }
+}
+customElements.define('app-mobile-nav', AppMobileNav);