Initialize work order management system with database schema, API handlers, web client, and Docker configuration.

2026-05-16 16:15:53 -04:00
parent c135722339
commit f904431ec3
28 changed files with 2171 additions and 0 deletions
@@ -0,0 +1,66 @@
+import { api } from '../lib/api.mjs';
+
+class WoList extends HTMLElement {
+  #data = [];
+
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.#load();
+  }
+
+  async #load() {
+    const status = this.getAttribute('filter-status') || '';
+    this.#data = await api.get(`/work-orders?status=${status}`) ?? [];
+    this.#render();
+  }
+
+  refresh() { this.#load(); }
+
+  #render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host { display: block; }
+        .empty { color: #64748b; text-align: center; padding: 3rem; }
+        .grid  { display: grid; gap: .75rem; }
+        .card  {
+          background: #fff; border: 1px solid #e2ebf0;
+          border-radius: 8px; padding: 1rem 1.25rem;
+          cursor: pointer; display: grid;
+          grid-template-columns: 1fr auto; gap: .25rem 1rem;
+          transition: box-shadow .15s;
+        }
+        .card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); }
+        .wo-num  { font-size: .75rem; color: #64748b; }
+        .title   { font-weight: 600; }
+        .meta    { font-size: .8rem; color: #64748b; }
+        .badge   { display:inline-block; padding:.2rem .6rem; border-radius:999px;
+                   font-size:.7rem; font-weight:700; text-transform:uppercase;
+                   align-self: start; margin-top:.25rem; }
+        .draft        { background:#e2e8f0; color:#475569; }
+        .assigned     { background:#dbeafe; color:#1d4ed8; }
+        .scheduled    { background:#fef3c7; color:#92400e; }
+        .in_progress  { background:#d1fae5; color:#065f46; }
+        .pending_review { background:#ede9fe; color:#5b21b6; }
+        .closed       { background:#f3f4f6; color:#6b7280; }
+      </style>
+      ${this.#data.length === 0
+        ? '<div class="empty">No work orders found.</div>'
+        : `<div class="grid">${this.#data.map(wo => `
+          <div class="card" data-id="${wo.id}">
+            <div>
+              <div class="wo-num">${wo.wo_number}</div>
+              <div class="title">${wo.title}</div>
+              <div class="meta">${wo.site_name || '—'}  ·  ${wo.steps_done}/${wo.step_count} steps</div>
+            </div>
+            <span class="badge ${wo.status}">${wo.status.replace('_',' ')}</span>
+          </div>`).join('')}
+        </div>`}`;
+
+    this.shadowRoot.querySelectorAll('.card').forEach(c =>
+      c.addEventListener('click', () =>
+        this.dispatchEvent(new CustomEvent('wo:select',
+          { detail: { id: +c.dataset.id }, bubbles: true, composed: true }))));
+  }
+}
+
+customElements.define('wo-list', WoList);