new ui
This commit is contained in:
bronku
parent
7c756e87c1
commit
d69d8c3857
24 changed files with 3421 additions and 859 deletions
|
|
@ -1,68 +1,138 @@
|
|||
{{define "title"}}
|
||||
Zamówienia
|
||||
Panel główny
|
||||
{{end}}
|
||||
{{define "main"}}
|
||||
<main>
|
||||
<div class="toolbar">
|
||||
<a href="/order" class="btn-primary">
|
||||
<i class="fa-solid fa-plus"></i>
|
||||
Nowe zamówienie
|
||||
</a>
|
||||
<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>
|
||||
<form class="search-container" hx-get="/orders/search" hx-target="#results-table"
|
||||
hx-trigger="keyup delay:500ms, change">
|
||||
<label>Data początkowa
|
||||
<input type="date" value="{{.First}}" name="from">
|
||||
</label>
|
||||
<label>Data końcowa
|
||||
<input type="date" value="{{.Last}}" name="to">
|
||||
</label>
|
||||
</form>
|
||||
<div id="results-table" class="scrollable">
|
||||
<div class="metric-card">
|
||||
<span class="metric-label">
|
||||
<span class="material-symbols-outlined">cake</span>
|
||||
Do realizacji
|
||||
</span>
|
||||
<span class="metric-value">
|
||||
{{$pending := 0}}
|
||||
{{range .Orders}}{{if ne .Status "done"}}{{$pending = add $pending 1}}{{end}}{{end}}
|
||||
{{$pending}}
|
||||
</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">
|
||||
{{$done := 0}}
|
||||
{{range .Orders}}{{if eq .Status "done"}}{{$done = add $done 1}}{{end}}{{end}}
|
||||
{{$done}}
|
||||
</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">
|
||||
{{$total := 0}}
|
||||
{{range .Orders}}{{range .Cakes}}{{$total = add $total (mult .Price .Amount)}}{{end}}{{end}}
|
||||
{{$total}} 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">
|
||||
{{template "orders-table" .Orders}}
|
||||
</div>
|
||||
</main>
|
||||
</section>
|
||||
{{end}}
|
||||
{{define "orders-table"}}
|
||||
<table id="orders_table">
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Numer zamówienia</th>
|
||||
<th>ID zamówienia</th>
|
||||
<th>Klient</th>
|
||||
<th>Lokalizacja</th>
|
||||
<th>Data zamówienia</th>
|
||||
<th>Pozostało do zapłaty</th>
|
||||
<th>Status</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>
|
||||
{{range .}}
|
||||
<tr class="clickable" onclick="toggleDetails(this)">
|
||||
<th><a href="/order/{{.ID}}">#{{.ID}}</a></th>
|
||||
<th>{{.Surname}} {{.Name}} {{.Phone}}</th>
|
||||
<th>{{.Location}}</th>
|
||||
<th>{{.Date.Format "2006-01-02"}}</th>
|
||||
<th>{{.Total}} PLN</th>
|
||||
<th><span class="status-badge status-{{.Status}}">{{.Status}}</span></th>
|
||||
</tr>
|
||||
<tr class="hidden details-row">
|
||||
<td colspan="6" class="details-content">
|
||||
{{template "order_info" .}}
|
||||
<tr>
|
||||
<td><a href="/order/{{.ID}}" class="order-id">#{{.ID}}</a></td>
|
||||
<td class="customer-name">{{.Surname}} {{.Name}}<br><span class="text-on-surface-variant" style="font-size:11px;font-weight:400">{{.Phone}}</span></td>
|
||||
<td class="text-on-surface-variant">{{.Date.Format "2006-01-02 15:04"}}</td>
|
||||
<td>
|
||||
<span class="truncate" title="{{range .Cakes}}{{.Name}} (x{{.Amount}}), {{end}}">
|
||||
{{range $i, $c := .Cakes}}{{if $i}}, {{end}}{{.Name}} (x{{.Amount}}){{end}}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-right" style="font-weight:700">{{.Total}} PLN</td>
|
||||
<td class="text-center">
|
||||
<span class="status-chip {{.Status}}">
|
||||
{{if eq .Status "accepted"}}Przyjęte
|
||||
{{else if eq .Status "done"}}Gotowe
|
||||
{{else}}Oczekujące{{end}}
|
||||
</span>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<a href="/order/{{.ID}}" class="action-btn">
|
||||
<span class="material-symbols-outlined">edit</span>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
{{end}}
|
||||
{{define "order_info"}}
|
||||
<table>
|
||||
{{range .Cakes}}
|
||||
<tr>
|
||||
<th>{{.Name}}<br><small>ID: {{.ID}}</small></th>
|
||||
<th><small>Cena:</small><br>{{.Price}} PLN</th>
|
||||
<th><small>Ilość:</small><br>{{.Amount}}</th>
|
||||
<th><small>Razem:</small><br>{{.Total}} PLN</th>
|
||||
</tr>
|
||||
{{end}}
|
||||
</table>
|
||||
<div class="table-footer">
|
||||
<span>Pokazuje 1-{{len .}} z {{len .}}</span>
|
||||
<div class="pagination">
|
||||
<button class="pagination-btn" disabled>
|
||||
<span class="material-symbols-outlined">chevron_left</span>
|
||||
</button>
|
||||
<button class="pagination-btn active">1</button>
|
||||
<button class="pagination-btn" disabled>
|
||||
<span class="material-symbols-outlined">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue