cake-order-tracker/server/templates/orders.gohtml

{{define "title"}}
Panel główny
{{end}}
{{define "main"}}
<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">
            {{$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>
</section>
{{end}}
{{define "orders-table"}}
<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>
        {{range .}}
        <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>
<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}}