initial version

src/views/orders/detail.njk

@@ -0,0 +1,90 @@
+{% extends "layout.njk" %}
+{% block title %}Order #{{ order.order_number }} — Harding's Clocks{% endblock %}
+{% block content %}
+  <div class="page-header">
+    <h1>Order #{{ order.order_number }}</h1>
+    <div class="header-actions">
+      <a class="button-link" href="/orders/{{ order.id }}/invoice" target="_blank">Print Invoice</a>
+      <button type="button" class="danger"
+              hx-delete="/orders/{{ order.id }}"
+              hx-confirm="Delete this order? It can be recovered later if needed.">
+        Delete Order
+      </button>
+    </div>
+  </div>
+
+  <section class="card two-col">
+    <div>
+      <h2>Customer</h2>
+      <p>{{ order.customer_name }}</p>
+      {% if order.address_line1 %}<p>{{ order.address_line1 }}{% if order.address_line2 %}, {{ order.address_line2 }}{% endif %}</p>{% endif %}
+      {% if order.city or order.state or order.zip %}<p>{{ order.city or '' }}{% if order.state %}, {{ order.state }}{% endif %} {{ order.zip or '' }}</p>{% endif %}
+      {% if order.phone %}<p>{{ order.phone }}{% if order.alt_phone %} / {{ order.alt_phone }}{% endif %}</p>{% endif %}
+      {% if order.email %}<p>{{ order.email }}</p>{% endif %}
+    </div>
+    <div>
+      <h2>Clock</h2>
+      {% if order.manufacturer or order.model %}
+        <p>{{ order.manufacturer or '' }} {{ order.model or '' }}</p>
+      {% endif %}
+      {% if order.serial_number %}<p>Serial: {{ order.serial_number }}</p>{% endif %}
+      {% if order.alternate_id %}<p>Alt ID: {{ order.alternate_id }}</p>{% endif %}
+      {% if order.reference %}<p>Reference: {{ order.reference }}</p>{% endif %}
+      {% if order.clock_description %}<p>{{ order.clock_description }}</p>{% endif %}
+      {% if not order.manufacturer and not order.model and not order.clock_description %}
+        <p class="empty">No clock on file.</p>
+      {% endif %}
+    </div>
+  </section>
+
+  {% include "orders/_order_summary.njk" %}
+
+  <section class="card">
+    <h2>Line Items</h2>
+    <table class="data-table">
+      <thead>
+        <tr><th>Type</th><th>Stock #</th><th>Description</th><th>Qty</th><th>Unit Price</th><th>Total</th><th></th></tr>
+      </thead>
+      <tbody id="lines-body">
+        {% for line in order.lineItems %}
+          {% include "orders/_line_item_row.njk" %}
+        {% endfor %}
+      </tbody>
+    </table>
+
+    <form class="inline-form"
+          hx-post="/orders/{{ order.id }}/line-items"
+          hx-target="#lines-body"
+          hx-swap="beforeend"
+          hx-on::after-request="this.reset()">
+      <select name="kind">
+        <option value="labor">Labor</option>
+        <option value="part">Part</option>
+        <option value="sublet">Sublet</option>
+      </select>
+      <input type="text" name="stock_code" placeholder="Stock #">
+      <input type="text" name="description" placeholder="Description" required>
+      <input type="number" name="quantity" placeholder="Qty" value="1" step="0.25" min="0">
+      <input type="text" name="unit_price" placeholder="Unit price">
+      <button type="submit">Add Line</button>
+    </form>
+  </section>
+
+  <section class="card">
+    <h2>Work Log</h2>
+    <ul id="work-log-list" class="work-log-list">
+      {% for entry in order.workLog %}
+        {% include "orders/_work_log_item.njk" %}
+      {% endfor %}
+    </ul>
+
+    <form class="inline-form"
+          hx-post="/orders/{{ order.id }}/work-log"
+          hx-target="#work-log-list"
+          hx-swap="afterbegin"
+          hx-on::after-request="this.reset()">
+      <input type="text" name="note" placeholder="Add a note…" required>
+      <button type="submit">Add Note</button>
+    </form>
+  </section>
+{% endblock %}