move to templ

server/templates/orders.templ

@@ -0,0 +1,133 @@
+package templates
+
+import (
+	"strconv"
+
+	"git.bronku.xyz/bronku/cake-order-tracker/models"
+)
+
+templ OrdersPage(first, last string, orders []models.Order) {
+	@Layout("Panel główny", OrdersMain(first, last, orders))
+}
+
+templ OrdersMain(first, last string, orders []models.Order) {
+	<div class="metrics-grid">
+		<div class="metric-card">
+			<span class="metric-label">
+				<span class="material-symbols-outlined">receipt_long</span>
+				Zamówienia dzisiaj
+			</span>
+			<span class="metric-value">{ len(orders) }</span>
+			<span class="metric-change positive">
+				<span class="material-symbols-outlined">arrow_upward</span>
+				Wszystkie aktywne
+			</span>
+		</div>
+		<div class="metric-card">
+			<span class="metric-label">
+				<span class="material-symbols-outlined">cake</span>
+				Do realizacji
+			</span>
+			<span class="metric-value">{ strconv.Itoa(countPending(orders)) }</span>
+			<span class="metric-change warning">
+				<span class="material-symbols-outlined">priority_high</span>
+				Oczekujące
+			</span>
+		</div>
+		<div class="metric-card">
+			<span class="metric-label">
+				<span class="material-symbols-outlined">check_circle</span>
+				Gotowe do odbioru
+			</span>
+			<span class="metric-value">{ strconv.Itoa(countDone(orders)) }</span>
+			<span class="metric-change">Zrealizowane</span>
+		</div>
+		<div class="metric-card">
+			<span class="metric-label">
+				<span class="material-symbols-outlined">payments</span>
+				Przychód (szac.)
+			</span>
+			<span class="metric-value">{ strconv.Itoa(estimateRevenue(orders)) } PLN</span>
+			<span class="metric-change positive">
+				<span class="material-symbols-outlined">trending_up</span>
+				W bieżącym miesiącu
+			</span>
+		</div>
+	</div>
+
+	<section class="card">
+		<div class="card-header">
+			<h2>
+				<span class="material-symbols-outlined">list_alt</span>
+				Aktywne zamówienia
+			</h2>
+			<div style="display:flex;align-items:center;gap:8px">
+				<form hx-get="/orders/search" hx-target="#results-table" hx-trigger="keyup delay:500ms, change" style="display:flex;align-items:center;gap:8px">
+					<div class="form-group" style="flex-direction:row;align-items:center;gap:4px">
+						<label style="font-size:11px;white-space:nowrap">Od</label>
+						<input class="form-input" style="width:140px" type="date" value={ first } name="from">
+					</div>
+					<div class="form-group" style="flex-direction:row;align-items:center;gap:4px">
+						<label style="font-size:11px;white-space:nowrap">Do</label>
+						<input class="form-input" style="width:140px" type="date" value={ last } name="to">
+					</div>
+				</form>
+			</div>
+		</div>
+		<div class="table-container" id="results-table">
+			@OrdersTable(orders)
+		</div>
+	</section>
+}
+
+templ OrdersTable(orders []models.Order) {
+	<table class="data-table">
+		<thead>
+			<tr>
+				<th>ID zamówienia</th>
+				<th>Klient</th>
+				<th>Data odbioru</th>
+				<th>Pozycje</th>
+				<th class="right">Suma</th>
+				<th class="center">Status</th>
+				<th class="center"></th>
+			</tr>
+		</thead>
+		<tbody>
+			for _, o := range orders {
+				<tr>
+					<td><a href={ templ.URL("/order/" + strconv.Itoa(o.ID)) } class="order-id">#{ strconv.Itoa(o.ID) }</a></td>
+					<td class="customer-name">{ o.Surname } { o.Name }<br /><span class="text-on-surface-variant" style="font-size:11px;font-weight:400">{ o.Phone }</span></td>
+					<td class="text-on-surface-variant">{ o.Date.Format("2006-01-02 15:04") }</td>
+					<td>
+						<span class="truncate" title={ cakeItemsDesc(o.Cakes) }>
+							for i, c := range o.Cakes {
+								if i > 0 {
+									{ ", " }
+								}
+								{ c.Name } (x{ strconv.Itoa(c.Amount) })
+							}
+						</span>
+					</td>
+					<td class="text-right" style="font-weight:700">{ strconv.Itoa(o.Total()) } PLN</td>
+					<td class="text-center">
+						<span class={ "status-chip " + o.Status }>
+							if o.Status == "accepted" {
+								Przyjęte
+							} else if o.Status == "done" {
+								Gotowe
+							} else {
+								Oczekujące
+							}
+						</span>
+					</td>
+					<td class="text-center">
+						<a href={ templ.URL("/order/" + strconv.Itoa(o.ID)) } class="action-btn">
+							<span class="material-symbols-outlined">edit</span>
+						</a>
+					</td>
+				</tr>
+			}
+		</tbody>
+	</table>
+}