bronku/cake-order-tracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

new ui

Browse source
This commit is contained in:
bronku 2026-06-10 22:14:48 +02:00
parent 7c756e87c1
commit d69d8c3857
24 changed files with 3421 additions and 859 deletions
Download patch file Download diff file Expand all files Collapse all files

71
server/templates/cake.gohtml
View file

@ -2,33 +2,48 @@
Ciasto {{if .ID}}#{{.ID}}{{else}}nowe{{end}}
{{end}}
{{define "main"}}
<main>
<form method="post" class="order">
<div>
<h2>Informacje o cieście</h2>
<input hidden="hidden" name="id" value="{{.ID}}">
<label>Nazwa
<input type="text" name="name" value="{{.Name}}">
</label>
<label>Cena (gr)
<input type="number" name="price" min="0" value="{{.Price}}">
</label>
<label>Kategoria
<select name="category" id="category">
<option {{ if eq .Category "common" }}selected{{ end }} value="common">common</option>
<option {{ if eq .Category "christmas" }}selected{{ end }} value="christmas">christmas</option>
<option {{ if eq .Category "easter" }}selected{{ end }} value="easter">easter</option>
<option {{ if eq .Category "donuts" }}selected{{ end }} value="donuts">donuts</option>
</select>
</label>
<label>Dostępność
<select name="availability" id="availability">
<option {{ if eq .Availability "available" }}selected{{ end }} value="available">dostępne</option>
<option {{ if eq .Availability "unavailable" }}selected{{ end }} value="unavailable">niedostępne</option>
</select>
</label>
<button type="submit">Zapisz ciasto</button>
<div class="form-card">
<section class="card">
<div class="card-header">
<h2>
<span class="material-symbols-outlined">cake</span>
{{if .ID}}Edytuj ciasto #{{.ID}}{{else}}Nowe ciasto{{end}}
</h2>
</div>
</form>
</main>
<form method="post" class="card-body">
<input type="hidden" name="id" value="{{.ID}}">
<div class="form-group">
<label>Nazwa *</label>
<input class="form-input" type="text" name="name" value="{{.Name}}" placeholder="Nazwa ciasta">
</div>
<div class="form-group">
<label>Cena (gr) *</label>
<input class="form-input" type="number" name="price" min="0" value="{{.Price}}">
</div>
<div class="form-group">
<label>Kategoria</label>
<select class="form-input" name="category">
<option {{if eq .Category "common"}}selected{{end}} value="common">Zwykłe</option>
<option {{if eq .Category "christmas"}}selected{{end}} value="christmas">Bożonarodzeniowe</option>
<option {{if eq .Category "easter"}}selected{{end}} value="easter">Wielkanocne</option>
<option {{if eq .Category "donuts"}}selected{{end}} value="donuts">Pączki</option>
</select>
</div>
<div class="form-group">
<label>Dostępność</label>
<select class="form-input" name="availability">
<option {{if eq .Availability "available"}}selected{{end}} value="available">Dostępne</option>
<option {{if eq .Availability "unavailable"}}selected{{end}} value="unavailable">Niedostępne</option>
</select>
</div>
<div class="form-actions">
<a href="/cakes" class="btn btn-outline">Anuluj</a>
<button type="submit" class="btn btn-primary">
<span class="material-symbols-outlined">save</span>
Zapisz ciasto
</button>
</div>
</form>
</section>
</div>
{{end}}

66
server/templates/cakes.gohtml
View file

@ -1,37 +1,73 @@
{{define "title"}}
Ciasta
Katalog
{{end}}
{{define "main"}}
<main>
<div class="toolbar">
<a href="/cake" class="btn-primary">
<i class="fa-solid fa-plus"></i>
<section class="card">
<div class="card-header">
<h2>
<span class="material-symbols-outlined">inventory_2</span>
Zarządzanie katalogiem
</h2>
<a href="/cake" class="btn btn-primary btn-sm">
<span class="material-symbols-outlined">add</span>
Nowe ciasto
</a>
</div>
<div id="results-table" class="scrollable">
<table>
<div class="table-container">
<table class="data-table">
<thead>
<tr>
<th></th>
<th style="width:32px"></th>
<th>Nazwa</th>
<th>Cena</th>
<th>SKU</th>
<th class="right">Cena bazowa</th>
<th>Kategoria</th>
<th>Dostępność</th>
<th class="center"></th>
</tr>
</thead>
<tbody>
{{range .}}
<tr>
<th><a href="/cake/{{.ID}}">Edytuj</a></th>
<th>{{.Name}}</th>
<th>{{.Price}} PLN</th>
<th>{{.Category}}</th>
<th>{{.Availability}}</th>
<td>
<div class="catalogue-item-icon icon-cake" style="width:28px;height:28px">
<span class="material-symbols-outlined" style="font-size:14px">cake</span>
</div>
</td>
<td style="font-weight:500">{{.Name}}</td>
<td class="text-on-surface-variant">#{{.ID}}</td>
<td class="text-right">{{.Price}} PLN</td>
<td>
<span class="badge-pill {{if eq .Category "common"}}signature{{else}}seasonal{{end}}">
{{if eq .Category "common"}}Zwykłe
{{else if eq .Category "christmas"}}Bożonarodzeniowe
{{else if eq .Category "easter"}}Wielkanocne
{{else if eq .Category "donuts"}}Pączki
{{else}}{{.Category}}{{end}}
</span>
</td>
<td>{{if eq .Availability "available"}}Dostępne{{else}}Niedostępne{{end}}</td>
<td class="text-center">
<a href="/cake/{{.ID}}" class="action-btn">
<span class="material-symbols-outlined">edit</span>
</a>
</td>
</tr>
{{end}}
</tbody>
</table>
</div>
</main>
<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>
</section>
{{end}}

13
server/templates/confirmation.gohtml
View file

@ -1,8 +1,13 @@
{{define "title"}}
Confirmed
Potwierdzone
{{end}}
{{define "main"}}
<main>
<h2>{{.ID}} confirmed</h2>
</main>
<div class="confirmation">
<span class="material-symbols-outlined" style="font-size:48px;color:var(--success-text)">check_circle</span>
<h2>{{.ID}} — zapisano</h2>
<a href="/orders" class="btn btn-primary" style="margin-top:16px">
<span class="material-symbols-outlined">arrow_back</span>
Powrót do zamówień
</a>
</div>
{{end}}

58
server/templates/layout/layout.gohtml
View file

@ -1,31 +1,61 @@
{{define "layout"}}
<!doctype html>
<html lang="en">
<html lang="pl">
<head>
<meta charset="UTF-8" />
<title>{{template "title" .}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{template "title" .}} — Zamówienia ciast</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,0&display=swap" rel="stylesheet">
<script src="/static/htmx2.04.js" defer></script>
<script src="/static/order.js" ></script>
<script src="/static/order.js"></script>
<link rel="stylesheet" href="/static/style.css">
<link rel="stylesheet" href="/static/fontawesome/css/fontawesome.min.css">
<link rel="stylesheet" href="/static/fontawesome/css/solid.css">
</head>
<body>
<aside>
<nav>{{template "nav" .}}</nav>
<aside class="sidebar">
{{template "nav" .}}
</aside>
<div class="app-body">
<header>
<h1>{{template "title" .}}</h1>
<header class="topnav">
<div class="topnav-left">
<h1 class="topnav-title">{{template "title" .}}</h1>
<div class="topnav-search">
<span class="material-symbols-outlined">search</span>
<input type="text" placeholder="Szukaj zamówień..." />
</div>
</div>
<nav class="topnav-center">
<a class="topnav-period active" href="/orders">Dzisiaj</a>
<a class="topnav-period" href="/orders">Ten tydzień</a>
<a class="topnav-period" href="/orders">Miesiąc</a>
</nav>
<div class="topnav-right">
<a class="topnav-btn" href="/orders">
<span class="material-symbols-outlined">sync</span>
Sync
</a>
<a class="topnav-icon" href="#">
<span class="material-symbols-outlined">notifications</span>
</a>
</div>
</header>
{{template "main" .}}
<div class="main-content">
{{template "main" .}}
</div>
</div>
<script>
(function() {
var path = window.location.pathname;
var links = document.querySelectorAll('.sidebar-link');
for (var i = 0; i < links.length; i++) {
if (links[i].getAttribute('href') === path) {
links[i].classList.add('active');
}
}
})();
</script>
</body>
</html>
{{end}}

42
server/templates/layout/nav.gohtml
View file

@ -1,7 +1,39 @@
{{define "nav"}}
<a href="/orders" data-title="Zamówienia"><i class="fa-solid fa-list-ul"></i></a>
<a href="/order" data-title="Nowe zamówienie"><i class="fa-solid fa-plus-circle"></i></a>
<a href="/cakes" data-title="Wszystkie ciasta"><i class="fa-solid fa-birthday-cake"></i></a>
<a href="/cake" data-title="Nowe ciasto"><i class="fa-solid fa-plus"></i></a>
<a href="/logout" data-title="Wyloguj"><i class="fa-solid fa-sign-out-alt"></i></a>
<div class="sidebar-brand">
<h1>Crumbs &amp; Co.</h1>
<p>Produkcja</p>
</div>
<a href="/order" class="sidebar-cta">
<span class="material-symbols-outlined">add</span>
<span>Nowe zamówienie</span>
</a>
<div class="sidebar-nav">
<a href="/orders" class="sidebar-link">
<span class="material-symbols-outlined">dashboard</span>
<span>Panel główny</span>
</a>
<a href="/order" class="sidebar-link">
<span class="material-symbols-outlined">shopping_cart</span>
<span>Zamówienia</span>
</a>
<a href="/cakes" class="sidebar-link">
<span class="material-symbols-outlined">inventory_2</span>
<span>Katalog</span>
</a>
</div>
<div class="sidebar-footer">
<a href="/logout" class="sidebar-link">
<span class="material-symbols-outlined">settings</span>
<span>Ustawienia</span>
</a>
<div class="sidebar-user">
<div class="sidebar-user-avatar">
<span class="material-symbols-outlined" style="font-size:18px">person</span>
</div>
<div class="sidebar-user-info">
<span class="sidebar-user-name">Menedżer</span>
<span class="sidebar-user-status">Aktywny</span>
</div>
</div>
</div>
{{end}}

237
server/templates/order.gohtml
View file

@ -6,100 +6,153 @@
{{end}}
{{end}}
{{define "main"}}
<main>
<form method="post" class="order">
{{with .Order}}
<div>
<h2>Dane zamówienia</h2>
<input hidden="hidden" name="id" value="{{.ID}}">
<label>Imię
<input type="text" name="name" value="{{.Name}}">
</label>
<label>Nazwisko
<input type="text" name="surname" value="{{.Surname}}">
</label>
<label>Numer telefonu
<input type="tel" name="phone" value="{{.Phone}}">
</label>
<label>Lokalizacja
<select name="location">
<option {{ if eq .Location "Kartuzy" }}selected{{ end }} value="Kartuzy">Kartuzy</option>
<option {{ if eq .Location "Somonino" }}selected{{ end }} value="Somonino">Somonino</option>
</select>
</label>
<label>Data dostawy
<input type="date" name="date" value="{{.Date.Format "2006-01-02"}}">
</label>
<label>Status
<select name="status">
<option {{ if eq .Status "accepted" }}selected{{ end }} value="accepted">accepted</option>
<option {{ if eq .Status "done" }}selected{{ end }} value="done">done</option>
</select>
</label>
<label>Zaliczka
<input type="number" name="paid" min="0" value="{{.Paid}}">
</label>
<form method="post" class="split-pane" style="flex:1;min-height:0">
{{$catalogue := .Catalogue}}
{{with .Order}}
<input type="hidden" name="id" value="{{.ID}}">
<div class="split-pane-left">
<section class="card">
<div class="card-header">
<h2>
<span class="material-symbols-outlined">person_add</span>
Dane klienta
</h2>
</div>
<div>
<h2>Dodane ciasta</h2>
<div class="scrollable" style="flex:1">
<table id="basket_table">
</table>
</div>
<ul id="basket" class="scrollable">
</ul>
</div>
<div>
<h2>Podsumowanie</h2>
<label>
<small>Do zapłaty:</small>
<span id="total-price">100 PLN</span>
</label>
<button type="submit">Zapisz</button>
</div>
{{end}}
{{with .Catalogue}}
<div class="catalog-section">
<h2>Katalog</h2>
<div class="scrollable">
<table>
{{range .}}
<tr>
<th>{{.Name}}<br><small>{{.Category}} (#{{.ID}})</small></th>
<th>{{.Price}} PLN</th>
<th>
<button type=button onClick="addCake({{.ID}},{{.Name}}, {{.Price}}, 1)">
<i class="fa-solid fa-plus"></i>
</button>
</th>
</tr>
{{end}}
</table>
<div class="card-body">
<div class="form-grid">
<div class="form-group">
<label>Imię *</label>
<input class="form-input" type="text" name="name" value="{{.Name}}" placeholder="Jan">
</div>
<div class="form-group">
<label>Nazwisko *</label>
<input class="form-input" type="text" name="surname" value="{{.Surname}}" placeholder="Kowalski">
</div>
<div class="form-group">
<label>Telefon</label>
<input class="form-input" type="tel" name="phone" value="{{.Phone}}" placeholder="+48 123 456 789">
</div>
<div class="form-group">
<label>Lokalizacja</label>
<select class="form-input" name="location">
<option {{if eq .Location "Kartuzy"}}selected{{end}} value="Kartuzy">Kartuzy</option>
<option {{if eq .Location "Somonino"}}selected{{end}} value="Somonino">Somonino</option>
</select>
</div>
<div class="form-group">
<label>Data dostawy *</label>
<input class="form-input" type="date" name="date" value="{{.Date.Format "2006-01-02"}}">
</div>
<div class="form-group">
<label>Status</label>
<select class="form-input" name="status">
<option {{if eq .Status "accepted"}}selected{{end}} value="accepted">Przyjęte</option>
<option {{if eq .Status "done"}}selected{{end}} value="done">Gotowe</option>
</select>
</div>
<div class="form-group">
<label>Zaliczka</label>
<input class="form-input" type="number" name="paid" min="0" value="{{.Paid}}">
</div>
<div class="form-group" style="grid-column:span 2">
<label>Uwagi</label>
<input class="form-input" type="text" placeholder="Alergie, specjalne życzenia...">
</div>
</div>
</div>
{{end}}
</form>
</main>
<template id="basket_element_template">
<tr>
<th class="cake-name">Name</th>
<th class="cake-price">Price</th>
<th>
<label>
<input type="number" min="0">
</label>
</th>
<th class="cake-total">Total</th>
<th>
<button type=button>
<i class="fa-solid fa-minus"></i>
</section>
<section class="card" style="flex:1;min-height:200px">
<div class="card-header">
<h2>
<span class="material-symbols-outlined">inventory_2</span>
Katalog produktów
</h2>
<div class="topnav-search" style="width:180px">
<span class="material-symbols-outlined" style="left:6px;font-size:14px">search</span>
<input class="form-input" style="height:28px;padding-left:26px;font-size:12px" type="text" placeholder="Filtruj produkty..." oninput="filterCatalogue(this)">
</div>
</div>
<div class="card-body" style="overflow-y:auto">
<div class="catalogue-grid" id="catalogue-grid">
{{range $catalogue}}
<div class="catalogue-item" data-name="{{.Name}}">
<div class="catalogue-item-top">
<div class="catalogue-item-icon icon-cake">
<span class="material-symbols-outlined" style="font-size:16px">cake</span>
</div>
<div style="min-width:0">
<div class="catalogue-item-name">{{.Name}}</div>
<div class="catalogue-item-price">{{.Price}} PLN</div>
</div>
</div>
<div class="catalogue-item-actions">
<button type="button" class="qty-btn qty-minus" onclick="changeCake({{.ID}},'{{.Name}}',{{.Price}},-1)">
<span class="material-symbols-outlined">remove</span>
</button>
<span class="qty-value" id="qty-{{.ID}}">0</span>
<button type="button" class="qty-btn qty-plus" onclick="changeCake({{.ID}},'{{.Name}}',{{.Price}},1)">
<span class="material-symbols-outlined">add</span>
</button>
</div>
</div>
{{end}}
</div>
</div>
</section>
</div>
<aside class="split-pane-right">
<section class="card" style="flex:1;display:flex;flex-direction:column">
<div class="card-header">
<h2>
<span class="material-symbols-outlined">receipt_long</span>
Podsumowanie
</h2>
</div>
<div class="summary-lineitems" id="basket_items">
{{$sub := 0}}
{{range .Cakes}}
{{$sub = add $sub (mult .Price .Amount)}}
<div class="summary-item" data-cake-id="{{.ID}}">
<div class="summary-item-info">
<div class="summary-item-name cake-name">{{.Name}}</div>
<div class="summary-item-detail cake-price">{{.Price}} PLN × <span class="cake-qty">{{.Amount}}</span></div>
</div>
<div class="summary-item-price cake-total">{{.Total}} PLN</div>
<button type="button" class="summary-item-remove" onclick="removeCake(this)">
<span class="material-symbols-outlined">close</span>
</button>
<input type="hidden" name="cake[{{.ID}}]" value="{{.Amount}}">
</div>
{{end}}
</div>
<div class="summary-totals">
<div class="summary-total-row">
<span>Subtotal</span>
<span id="subtotal-price">{{$sub}} PLN</span>
</div>
<div class="summary-total-row">
<span>Zaliczka</span>
<span id="paid-amount">{{.Paid}} PLN</span>
</div>
<div class="summary-total-row total">
<span>Do zapłaty</span>
<span id="total-price">{{add $sub (mult .Paid -1)}} PLN</span>
</div>
<button type="submit" class="btn-finalize">
<span class="material-symbols-outlined">check_circle</span>
Finalizuj zamówienie
</button>
</th>
</tr>
</template>
<script>
{{range .Order.Cakes}}
addCake({{.ID}},{{.Name}}, {{.Price}}, {{.Amount}})
{{end}}
</script>
</div>
</section>
</aside>
{{end}}
</form>
<script>
{{if .Order.ID}}
{{range .Order.Cakes}}
updateCatalogueQty({{.ID}}, {{.Amount}});
{{end}}
{{end}}
updateTotals();
</script>
{{end}}

164
server/templates/orders.gohtml
View file

@ -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}}