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

12
auth/templates/login.html
View file

@ -1,19 +1,19 @@
<!doctype html>
<html lang="en">
<html lang="pl">
<head>
<meta charset="UTF-8" />
<title>Login</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login — 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">
<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 class="login-page">
<div class="login-card">
<div class="login-icon">
<i class="fa-solid fa-birthday-cake"></i>
<span class="material-symbols-outlined" style="font-size:40px">cake</span>
</div>
<h1>Zaloguj się</h1>
<form method="post">

159
inspiration/stitch_bakery_order_management_system(1)/DESIGN.md Normal file
View file

@ -0,0 +1,159 @@
---
name: Bakery Operations Interface
colors:
surface: '#f8f9ff'
surface-dim: '#cbdbf5'
surface-bright: '#f8f9ff'
surface-container-lowest: '#ffffff'
surface-container-low: '#eff4ff'
surface-container: '#e5eeff'
surface-container-high: '#dce9ff'
surface-container-highest: '#d3e4fe'
on-surface: '#0b1c30'
on-surface-variant: '#45464d'
inverse-surface: '#213145'
inverse-on-surface: '#eaf1ff'
outline: '#76777d'
outline-variant: '#c6c6cd'
surface-tint: '#565e74'
primary: '#000000'
on-primary: '#ffffff'
primary-container: '#131b2e'
on-primary-container: '#7c839b'
inverse-primary: '#bec6e0'
secondary: '#9b4500'
on-secondary: '#ffffff'
secondary-container: '#fd8a42'
on-secondary-container: '#682c00'
tertiary: '#000000'
on-tertiary: '#ffffff'
tertiary-container: '#271901'
on-tertiary-container: '#98805d'
error: '#ba1a1a'
on-error: '#ffffff'
error-container: '#ffdad6'
on-error-container: '#93000a'
primary-fixed: '#dae2fd'
primary-fixed-dim: '#bec6e0'
on-primary-fixed: '#131b2e'
on-primary-fixed-variant: '#3f465c'
secondary-fixed: '#ffdbca'
secondary-fixed-dim: '#ffb68e'
on-secondary-fixed: '#331200'
on-secondary-fixed-variant: '#763300'
tertiary-fixed: '#fcdeb5'
tertiary-fixed-dim: '#dec29a'
on-tertiary-fixed: '#271901'
on-tertiary-fixed-variant: '#574425'
background: '#f8f9ff'
on-background: '#0b1c30'
surface-variant: '#d3e4fe'
typography:
headline-lg:
fontFamily: Inter
fontSize: 24px
fontWeight: '600'
lineHeight: 32px
letterSpacing: -0.02em
headline-md:
fontFamily: Inter
fontSize: 20px
fontWeight: '600'
lineHeight: 28px
letterSpacing: -0.01em
headline-sm:
fontFamily: Inter
fontSize: 16px
fontWeight: '600'
lineHeight: 24px
body-md:
fontFamily: Inter
fontSize: 14px
fontWeight: '400'
lineHeight: 20px
body-sm:
fontFamily: Inter
fontSize: 13px
fontWeight: '400'
lineHeight: 18px
label-md:
fontFamily: Inter
fontSize: 12px
fontWeight: '500'
lineHeight: 16px
letterSpacing: 0.05em
label-sm:
fontFamily: Inter
fontSize: 11px
fontWeight: '600'
lineHeight: 14px
table-data:
fontFamily: Inter
fontSize: 13px
fontWeight: '400'
lineHeight: 16px
rounded:
sm: 0.125rem
DEFAULT: 0.25rem
md: 0.375rem
lg: 0.5rem
xl: 0.75rem
full: 9999px
spacing:
unit: 4px
container-margin: 16px
gutter: 8px
row-padding: 8px 12px
cell-padding: 4px 8px
stack-gap-sm: 4px
stack-gap-md: 12px
---
## Brand & Style
The design system is engineered for high-efficiency internal operations. It prioritizes "Culinary Precision" and "Operational Speed," ensuring that shop managers and bakers can manage complex orders, inventory, and logistics without visual fatigue.
The aesthetic is **Corporate / Modern** with a lean toward **Minimalism**. It avoids decorative elements in favor of a data-dense, "functional-first" layout. The interface should feel like a precision tool—reliable, unobtrusive, and systematic. Visual hierarchy is achieved through subtle tonal shifts and strict typographic alignment rather than heavy shadows or vibrant colors.
## Colors
The palette is anchored in professional neutrality to keep the focus on data.
- **Primary:** A deep Navy (`#0F172A`) used for navigation, primary action buttons, and high-level headers. It conveys authority and stability.
- **Secondary:** A warm, muted "Bakery Brown" (`#B45309`) used sparingly for status indicators (e.g., "In Oven") or to highlight specific bakery-related callouts without breaking the professional tone.
- **Neutrals:** A spectrum of Slates and Grays manages the UI scaffolding. The background uses a very light off-white to reduce glare during long shifts, while borders provide crisp definition between high-density data cells.
## Typography
This design system utilizes **Inter** for all roles to ensure maximum legibility and a systematic feel.
- **Density:** Line heights are kept tight (1.2x to 1.5x) to allow more rows of data to be visible on-screen.
- **Hierarchy:** We use weight (SemiBold 600) and case (Uppercase labels) to distinguish headers from interactive data.
- **Scaling:** Font sizes are capped at 24px for desktop to prevent excessive scrolling. On mobile, headlines scale down slightly, but the core body size remains at 14px for touch-target legibility.
## Layout & Spacing
The layout follows a **Fluid Grid** model with a 4px base increment.
- **Density:** Margins and gutters are kept tight (16px and 8px respectively) to maximize the horizontal space available for multi-column tables.
- **Structure:** Content is organized into "Panes" or "Modules." Use a 12-column grid for dashboard views, but shift to a "List-Detail" view for order management where the left list is fixed-width (320px) and the right detail area is fluid.
- **Responsiveness:** On tablet and mobile, hide non-essential table columns (e.g., "SKU" or "Date Created") in favor of primary status and customer names to maintain clarity.
## Elevation & Depth
This design system uses **Low-Contrast Outlines** and **Tonal Layers** rather than shadows.
- **Borders:** Use 1px solid borders (`#E2E8F0`) to define cards, table cells, and input fields.
- **Surfaces:** Depth is communicated by darkening the background of "containers" (`#F1F5F9`) and keeping active "items" or "cards" on pure white (`#FFFFFF`).
- **Interaction:** A subtle 2px blur shadow is permitted only for dropdown menus or modals to lift them slightly from the dense background data. Otherwise, the UI remains flat to emphasize its utilitarian nature.
## Shapes
The design system uses a **Soft (Level 1)** roundedness profile.
- **Standard Elements:** 0.25rem (4px) radius for buttons, input fields, and small cards. This provides a professional, modern look without being too "playful" or "sharp."
- **Data Indicators:** Status tags (e.g., "Ready for Pickup") may use a slightly higher radius (8px) to distinguish them from clickable buttons.
## Components
- **High-Density Tables:** The core of the system. Rows should have a fixed height (approx 40px). Use zebra-striping (alternating `#F8FAFC`) only when tables exceed 10 columns.
- **Buttons:** Primary buttons are Solid Navy with White text. Secondary buttons are Outline-only. Sizes should be "Compact" (32px height) for toolbar actions and "Default" (40px) for primary form submissions.
- **Input Fields:** Use "Inline" labels or "Floating" labels to save vertical space. Borders are 1px gray, turning Navy on focus.
- **Status Chips:** Small, condensed pills with low-opacity background tints (e.g., light green background with dark green text for "Delivered").
- **Cards:** Minimalist with no padding on the outer container. Headers are separated by a 1px horizontal rule.
- **Inventory Thumbnails:** 32x32px squares with 4px radius, used only for quick cake-type identification in list views.

398
inspiration/stitch_bakery_order_management_system(1)/code.html Normal file
View file

@ -0,0 +1,398 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Catalogue Management</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"outline-variant": "#c6c6cd",
"on-tertiary-container": "#98805d",
"on-secondary": "#ffffff",
"tertiary": "#000000",
"surface-container-highest": "#d3e4fe",
"on-tertiary-fixed-variant": "#574425",
"secondary-container": "#fd8a42",
"surface-tint": "#565e74",
"on-secondary-fixed": "#331200",
"on-primary-container": "#7c839b",
"inverse-on-surface": "#eaf1ff",
"on-primary-fixed": "#131b2e",
"on-surface": "#0b1c30",
"on-primary-fixed-variant": "#3f465c",
"surface": "#f8f9ff",
"on-background": "#0b1c30",
"on-error-container": "#93000a",
"surface-container-low": "#eff4ff",
"surface-container-lowest": "#ffffff",
"primary-fixed-dim": "#bec6e0",
"outline": "#76777d",
"surface-container-high": "#dce9ff",
"on-primary": "#ffffff",
"inverse-primary": "#bec6e0",
"primary-container": "#131b2e",
"secondary-fixed": "#ffdbca",
"tertiary-fixed-dim": "#dec29a",
"secondary": "#9b4500",
"primary": "#000000",
"surface-container": "#e5eeff",
"background": "#f8f9ff",
"surface-variant": "#d3e4fe",
"on-error": "#ffffff",
"on-secondary-container": "#682c00",
"inverse-surface": "#213145",
"primary-fixed": "#dae2fd",
"on-secondary-fixed-variant": "#763300",
"on-surface-variant": "#45464d",
"error": "#ba1a1a",
"surface-dim": "#cbdbf5",
"secondary-fixed-dim": "#ffb68e",
"tertiary-container": "#271901",
"surface-bright": "#f8f9ff",
"error-container": "#ffdad6",
"on-tertiary-fixed": "#271901",
"on-tertiary": "#ffffff",
"tertiary-fixed": "#fcdeb5"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"stack-gap-md": "12px",
"row-padding": "8px 12px",
"container-margin": "16px",
"unit": "4px",
"stack-gap-sm": "4px",
"cell-padding": "4px 8px",
"gutter": "8px"
},
"fontFamily": {
"body-md": ["Inter", "sans-serif"],
"label-md": ["Inter", "sans-serif"],
"label-sm": ["Inter", "sans-serif"],
"headline-md": ["Inter", "sans-serif"],
"headline-sm": ["Inter", "sans-serif"],
"body-sm": ["Inter", "sans-serif"],
"table-data": ["Inter", "sans-serif"],
"headline-lg": ["Inter", "sans-serif"]
},
"fontSize": {
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
"label-sm": ["11px", {"lineHeight": "14px", "fontWeight": "600"}],
"headline-md": ["20px", {"lineHeight": "28px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
"headline-sm": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
"table-data": ["13px", {"lineHeight": "16px", "fontWeight": "400"}],
"headline-lg": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "600"}]
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
/* Utility for Material Symbols */
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 20px;
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
/* Custom scrollbar for high-density data areas */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c6c6cd; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #76777d; }
</style>
</head>
<body class="bg-background text-on-background min-h-screen font-body-md overflow-hidden flex">
<!-- SideNavBar Component -->
<nav class="fixed left-0 top-0 bottom-0 flex flex-col p-4 z-40 w-[280px] h-full border-r border-outline-variant bg-surface-container-lowest dark:bg-surface-container-lowest">
<!-- Brand Header -->
<div class="flex items-center gap-3 px-4 py-6 mb-4">
<div class="w-10 h-10 rounded-full bg-primary-container text-on-primary-container flex items-center justify-center font-bold">
C
</div>
<div class="flex flex-col">
<span class="font-headline-sm text-headline-sm font-bold text-primary">Crumbs &amp; Co.</span>
<span class="font-label-sm text-label-sm text-on-surface-variant">Production Hub</span>
</div>
</div>
<!-- Primary CTA -->
<div class="px-4 mb-6">
<button class="w-full flex items-center justify-center gap-2 h-10 rounded bg-primary text-on-primary font-label-md hover:opacity-90 transition-opacity">
<span class="material-symbols-outlined text-[18px]">add</span>
New Order
</button>
</div>
<!-- Main Navigation -->
<ul class="flex flex-col gap-1 flex-1">
<li>
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors rounded-lg cursor-pointer active:opacity-80 font-label-md text-label-md" href="#">
<span class="material-symbols-outlined">dashboard</span>
Dashboard
</a>
</li>
<li>
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors rounded-lg cursor-pointer active:opacity-80 font-label-md text-label-md" href="#">
<span class="material-symbols-outlined">shopping_cart</span>
Orders
</a>
</li>
<!-- Active Tab: Catalogue -->
<li>
<a class="flex items-center gap-3 px-4 py-3 bg-secondary-container text-on-secondary-container rounded-lg font-bold transition-colors cursor-pointer active:opacity-80 font-label-md text-label-md" href="#">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">inventory_2</span>
Catalogue
</a>
</li>
</ul>
<!-- Footer Navigation -->
<ul class="flex flex-col gap-1 mt-auto border-t border-outline-variant pt-4">
<li>
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors rounded-lg cursor-pointer active:opacity-80 font-label-md text-label-md" href="#">
<span class="material-symbols-outlined">settings</span>
Settings
</a>
</li>
</ul>
</nav>
<!-- TopNavBar Component -->
<header class="fixed top-0 right-0 left-[280px] flex justify-between items-center px-6 z-30 h-14 w-full border-b border-outline-variant bg-surface dark:bg-surface">
<!-- Left Side: Product Name & Search -->
<div class="flex items-center gap-6">
<h1 class="font-headline-md text-headline-md font-black text-primary">Order Tracker</h1>
<div class="relative flex items-center">
<span class="material-symbols-outlined absolute left-3 text-on-surface-variant text-[18px]">search</span>
<input class="h-8 w-64 pl-9 pr-3 rounded border border-outline-variant bg-surface-container-lowest font-body-sm text-body-sm focus:border-primary focus:outline-none focus:ring-0 text-on-surface transition-colors placeholder:text-on-surface-variant" placeholder="Search orders..." type="text"/>
</div>
</div>
<!-- Center: Navigation Links (Optional/Contextual, kept for structural fidelity) -->
<nav class="hidden lg:flex items-center gap-6 font-body-sm text-body-sm">
<a class="text-on-surface-variant pb-1 hover:text-primary transition-colors cursor-pointer active:scale-95" href="#">Today</a>
<a class="text-on-surface-variant pb-1 hover:text-primary transition-colors cursor-pointer active:scale-95" href="#">This Week</a>
<a class="text-on-surface-variant pb-1 hover:text-primary transition-colors cursor-pointer active:scale-95" href="#">Monthly</a>
</nav>
<!-- Right Side: Actions -->
<div class="flex items-center gap-4">
<button class="h-8 px-4 border border-primary text-primary font-label-md rounded hover:bg-surface-container-low transition-colors cursor-pointer active:scale-95">
Sync Data
</button>
<div class="flex items-center gap-2 text-on-surface-variant">
<button class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-surface-container-low transition-colors cursor-pointer active:scale-95">
<span class="material-symbols-outlined">notifications</span>
</button>
<button class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-surface-container-low transition-colors cursor-pointer active:scale-95">
<span class="material-symbols-outlined">account_circle</span>
</button>
</div>
</div>
</header>
<!-- Main Content Canvas (List-Detail Pattern) -->
<main class="ml-[280px] mt-14 flex-1 flex flex-col sm:flex-row h-[calc(100vh-56px)] bg-background">
<!-- Left Pane: Catalogue Table (Fluid) -->
<section class="flex-1 flex flex-col min-w-0 bg-surface-container-lowest border-r border-outline-variant overflow-hidden">
<!-- Pane Header -->
<div class="px-6 py-5 border-b border-outline-variant flex items-center justify-between bg-surface-container-lowest shrink-0">
<h2 class="font-headline-lg text-headline-lg text-on-surface">Catalogue Management</h2>
<div class="flex items-center gap-3">
<div class="relative">
<span class="material-symbols-outlined absolute left-2 top-1.5 text-on-surface-variant text-[16px]">filter_list</span>
<select class="h-8 pl-8 pr-8 rounded border border-outline-variant bg-surface-container-lowest font-body-sm text-body-sm focus:border-primary focus:outline-none appearance-none text-on-surface">
<option>All Categories</option>
<option>Signature</option>
<option>Seasonal</option>
</select>
</div>
</div>
</div>
<!-- High-Density Table Container -->
<div class="flex-1 overflow-auto bg-surface-container-lowest">
<table class="w-full text-left border-collapse whitespace-nowrap">
<thead class="sticky top-0 bg-surface z-10 shadow-[0_1px_0_0_#c6c6cd]">
<tr>
<th class="py-2.5 px-4 font-label-sm text-label-sm text-on-surface-variant font-medium w-12"></th>
<th class="py-2.5 px-4 font-label-sm text-label-sm text-on-surface-variant font-medium">Cake Name</th>
<th class="py-2.5 px-4 font-label-sm text-label-sm text-on-surface-variant font-medium">SKU</th>
<th class="py-2.5 px-4 font-label-sm text-label-sm text-on-surface-variant font-medium text-right">Base Price</th>
<th class="py-2.5 px-4 font-label-sm text-label-sm text-on-surface-variant font-medium">Category</th>
<th class="py-2.5 px-4 font-label-sm text-label-sm text-on-surface-variant font-medium text-right">Actions</th>
</tr>
</thead>
<tbody class="font-table-data text-table-data text-on-surface divide-y divide-outline-variant/30">
<!-- Table Row 1 -->
<tr class="hover:bg-surface-container-low transition-colors h-[40px] group">
<td class="px-4 py-1">
<div class="w-6 h-6 rounded bg-primary-container/20 flex items-center justify-center">
<span class="material-symbols-outlined text-[14px] text-primary">cake</span>
</div>
</td>
<td class="px-4 py-1 font-medium">Classic Vanilla Bean</td>
<td class="px-4 py-1 text-on-surface-variant">VB-1001</td>
<td class="px-4 py-1 text-right">$45.00</td>
<td class="px-4 py-1">
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-primary-container text-on-primary-container font-label-sm text-[10px]">Signature</span>
</td>
<td class="px-4 py-1 text-right opacity-0 group-hover:opacity-100 transition-opacity">
<button class="text-on-surface-variant hover:text-primary p-1"><span class="material-symbols-outlined text-[16px]">edit</span></button>
</td>
</tr>
<!-- Table Row 2 -->
<tr class="hover:bg-surface-container-low transition-colors h-[40px] group">
<td class="px-4 py-1">
<div class="w-6 h-6 rounded bg-secondary-container/20 flex items-center justify-center">
<span class="material-symbols-outlined text-[14px] text-secondary">cake</span>
</div>
</td>
<td class="px-4 py-1 font-medium">Decadent Chocolate Fudge</td>
<td class="px-4 py-1 text-on-surface-variant">CF-1002</td>
<td class="px-4 py-1 text-right">$55.00</td>
<td class="px-4 py-1">
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-primary-container text-on-primary-container font-label-sm text-[10px]">Signature</span>
</td>
<td class="px-4 py-1 text-right opacity-0 group-hover:opacity-100 transition-opacity">
<button class="text-on-surface-variant hover:text-primary p-1"><span class="material-symbols-outlined text-[16px]">edit</span></button>
</td>
</tr>
<!-- Table Row 3 -->
<tr class="hover:bg-surface-container-low transition-colors h-[40px] group bg-surface-container-highest/20">
<td class="px-4 py-1">
<div class="w-6 h-6 rounded bg-surface-variant flex items-center justify-center">
<span class="material-symbols-outlined text-[14px] text-on-surface-variant">cake</span>
</div>
</td>
<td class="px-4 py-1 font-medium">Autumn Spiced Carrot</td>
<td class="px-4 py-1 text-on-surface-variant">SC-2001</td>
<td class="px-4 py-1 text-right">$48.00</td>
<td class="px-4 py-1">
<span class="inline-flex items-center px-2 py-0.5 rounded-full bg-surface-variant text-on-surface font-label-sm text-[10px]">Seasonal</span>
</td>
<td class="px-4 py-1 text-right opacity-0 group-hover:opacity-100 transition-opacity">
<button class="text-on-surface-variant hover:text-primary p-1"><span class="material-symbols-outlined text-[16px]">edit</span></button>
</td>
</tr>
<!-- More rows appended to show density -->
<tr class="hover:bg-surface-container-low transition-colors h-[40px] group">
<td class="px-4 py-1"><div class="w-6 h-6 rounded bg-surface-variant flex items-center justify-center"><span class="material-symbols-outlined text-[14px] text-on-surface-variant">cake</span></div></td>
<td class="px-4 py-1 font-medium">Lemon Raspberry Delight</td>
<td class="px-4 py-1 text-on-surface-variant">LR-1004</td>
<td class="px-4 py-1 text-right">$50.00</td>
<td class="px-4 py-1"><span class="inline-flex items-center px-2 py-0.5 rounded-full bg-primary-container text-on-primary-container font-label-sm text-[10px]">Signature</span></td>
<td class="px-4 py-1 text-right opacity-0 group-hover:opacity-100 transition-opacity"><button class="text-on-surface-variant hover:text-primary p-1"><span class="material-symbols-outlined text-[16px]">edit</span></button></td>
</tr>
<tr class="hover:bg-surface-container-low transition-colors h-[40px] group">
<td class="px-4 py-1"><div class="w-6 h-6 rounded bg-surface-variant flex items-center justify-center"><span class="material-symbols-outlined text-[14px] text-on-surface-variant">cake</span></div></td>
<td class="px-4 py-1 font-medium">Strawberry Shortcake</td>
<td class="px-4 py-1 text-on-surface-variant">SS-1005</td>
<td class="px-4 py-1 text-right">$42.00</td>
<td class="px-4 py-1"><span class="inline-flex items-center px-2 py-0.5 rounded-full bg-primary-container text-on-primary-container font-label-sm text-[10px]">Signature</span></td>
<td class="px-4 py-1 text-right opacity-0 group-hover:opacity-100 transition-opacity"><button class="text-on-surface-variant hover:text-primary p-1"><span class="material-symbols-outlined text-[16px]">edit</span></button></td>
</tr>
<tr class="hover:bg-surface-container-low transition-colors h-[40px] group">
<td class="px-4 py-1"><div class="w-6 h-6 rounded bg-surface-variant flex items-center justify-center"><span class="material-symbols-outlined text-[14px] text-on-surface-variant">cake</span></div></td>
<td class="px-4 py-1 font-medium">Winter Peppermint Mocha</td>
<td class="px-4 py-1 text-on-surface-variant">PM-2002</td>
<td class="px-4 py-1 text-right">$52.00</td>
<td class="px-4 py-1"><span class="inline-flex items-center px-2 py-0.5 rounded-full bg-surface-variant text-on-surface font-label-sm text-[10px]">Seasonal</span></td>
<td class="px-4 py-1 text-right opacity-0 group-hover:opacity-100 transition-opacity"><button class="text-on-surface-variant hover:text-primary p-1"><span class="material-symbols-outlined text-[16px]">edit</span></button></td>
</tr>
</tbody>
</table>
</div>
<!-- Table Footer / Pagination -->
<div class="p-3 border-t border-outline-variant bg-surface flex items-center justify-between shrink-0 font-body-sm text-body-sm text-on-surface-variant">
<span>Showing 1 to 6 of 24 entries</span>
<div class="flex items-center gap-1">
<button class="w-8 h-8 rounded hover:bg-surface-container-highest flex items-center justify-center disabled:opacity-50"><span class="material-symbols-outlined text-[18px]">chevron_left</span></button>
<button class="w-8 h-8 rounded bg-primary text-on-primary flex items-center justify-center font-medium">1</button>
<button class="w-8 h-8 rounded hover:bg-surface-container-highest flex items-center justify-center">2</button>
<button class="w-8 h-8 rounded hover:bg-surface-container-highest flex items-center justify-center">3</button>
<button class="w-8 h-8 rounded hover:bg-surface-container-highest flex items-center justify-center"><span class="material-symbols-outlined text-[18px]">chevron_right</span></button>
</div>
</div>
</section>
<!-- Right Pane: Add/Edit Form (Fixed Width) -->
<aside class="w-[320px] bg-surface flex flex-col shrink-0 overflow-y-auto border-l border-outline-variant">
<div class="p-5 border-b border-outline-variant bg-surface-container-lowest sticky top-0 z-10 flex items-center justify-between">
<h3 class="font-headline-sm text-headline-sm text-on-surface">Add New Cake</h3>
<button class="text-on-surface-variant hover:text-primary"><span class="material-symbols-outlined text-[20px]">close</span></button>
</div>
<form class="p-5 flex flex-col gap-5 flex-1">
<!-- Input Group -->
<div class="flex flex-col gap-1.5">
<label class="font-label-md text-label-md text-on-surface">Cake Name <span class="text-error">*</span></label>
<input class="h-9 px-3 rounded border border-outline-variant bg-surface-container-lowest font-body-sm text-body-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary w-full text-on-surface" placeholder="e.g. Red Velvet Dream" type="text"/>
</div>
<!-- Input Group -->
<div class="flex flex-col gap-1.5">
<label class="font-label-md text-label-md text-on-surface">SKU <span class="text-on-surface-variant font-normal">(Auto-generated)</span></label>
<input class="h-9 px-3 rounded border border-outline-variant bg-surface font-body-sm text-body-sm text-on-surface-variant w-full cursor-not-allowed" disabled="" type="text" value="RV-1006"/>
</div>
<!-- Split Row -->
<div class="grid grid-cols-2 gap-4">
<div class="flex flex-col gap-1.5">
<label class="font-label-md text-label-md text-on-surface">Base Price</label>
<div class="relative">
<span class="absolute left-3 top-2 text-on-surface-variant font-body-sm">$</span>
<input class="h-9 pl-7 pr-3 rounded border border-outline-variant bg-surface-container-lowest font-body-sm text-body-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary w-full text-on-surface" placeholder="0.00" type="number"/>
</div>
</div>
<div class="flex flex-col gap-1.5">
<label class="font-label-md text-label-md text-on-surface">Category</label>
<select class="h-9 px-3 rounded border border-outline-variant bg-surface-container-lowest font-body-sm text-body-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary w-full text-on-surface">
<option>Signature</option>
<option>Seasonal</option>
<option>Custom</option>
</select>
</div>
</div>
<!-- Textarea -->
<div class="flex flex-col gap-1.5 mt-2">
<label class="font-label-md text-label-md text-on-surface">Internal Notes</label>
<textarea class="p-3 rounded border border-outline-variant bg-surface-container-lowest font-body-sm text-body-sm focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary w-full text-on-surface resize-none" placeholder="Production instructions or special alerts..." rows="3"></textarea>
</div>
<!-- Toggles / Checklist -->
<div class="flex flex-col gap-3 mt-2 border border-outline-variant rounded p-3 bg-surface-container-lowest">
<label class="flex items-center gap-2 cursor-pointer">
<input checked="" class="rounded border-outline-variant text-primary focus:ring-primary w-4 h-4" type="checkbox"/>
<span class="font-body-sm text-body-sm text-on-surface">Available for Order</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input class="rounded border-outline-variant text-primary focus:ring-primary w-4 h-4" type="checkbox"/>
<span class="font-body-sm text-body-sm text-on-surface">Requires 48hr Notice</span>
</label>
</div>
</form>
<!-- Form Actions -->
<div class="p-5 border-t border-outline-variant bg-surface-container-lowest sticky bottom-0 z-10 flex items-center justify-end gap-3 mt-auto">
<button class="h-10 px-4 rounded border border-outline-variant text-on-surface font-label-md hover:bg-surface-container-highest transition-colors">
Cancel
</button>
<button class="h-10 px-6 rounded bg-primary text-on-primary font-label-md hover:opacity-90 transition-opacity flex items-center gap-2">
<span class="material-symbols-outlined text-[18px]">save</span>
Save Cake
</button>
</div>
</aside>
</main>
</body></html>

BIN
inspiration/stitch_bakery_order_management_system(1)/screen.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 147 KiB

159
inspiration/stitch_bakery_order_management_system(2)/DESIGN.md Normal file
View file

@ -0,0 +1,159 @@
---
name: Bakery Operations Interface
colors:
surface: '#f8f9ff'
surface-dim: '#cbdbf5'
surface-bright: '#f8f9ff'
surface-container-lowest: '#ffffff'
surface-container-low: '#eff4ff'
surface-container: '#e5eeff'
surface-container-high: '#dce9ff'
surface-container-highest: '#d3e4fe'
on-surface: '#0b1c30'
on-surface-variant: '#45464d'
inverse-surface: '#213145'
inverse-on-surface: '#eaf1ff'
outline: '#76777d'
outline-variant: '#c6c6cd'
surface-tint: '#565e74'
primary: '#000000'
on-primary: '#ffffff'
primary-container: '#131b2e'
on-primary-container: '#7c839b'
inverse-primary: '#bec6e0'
secondary: '#9b4500'
on-secondary: '#ffffff'
secondary-container: '#fd8a42'
on-secondary-container: '#682c00'
tertiary: '#000000'
on-tertiary: '#ffffff'
tertiary-container: '#271901'
on-tertiary-container: '#98805d'
error: '#ba1a1a'
on-error: '#ffffff'
error-container: '#ffdad6'
on-error-container: '#93000a'
primary-fixed: '#dae2fd'
primary-fixed-dim: '#bec6e0'
on-primary-fixed: '#131b2e'
on-primary-fixed-variant: '#3f465c'
secondary-fixed: '#ffdbca'
secondary-fixed-dim: '#ffb68e'
on-secondary-fixed: '#331200'
on-secondary-fixed-variant: '#763300'
tertiary-fixed: '#fcdeb5'
tertiary-fixed-dim: '#dec29a'
on-tertiary-fixed: '#271901'
on-tertiary-fixed-variant: '#574425'
background: '#f8f9ff'
on-background: '#0b1c30'
surface-variant: '#d3e4fe'
typography:
headline-lg:
fontFamily: Inter
fontSize: 24px
fontWeight: '600'
lineHeight: 32px
letterSpacing: -0.02em
headline-md:
fontFamily: Inter
fontSize: 20px
fontWeight: '600'
lineHeight: 28px
letterSpacing: -0.01em
headline-sm:
fontFamily: Inter
fontSize: 16px
fontWeight: '600'
lineHeight: 24px
body-md:
fontFamily: Inter
fontSize: 14px
fontWeight: '400'
lineHeight: 20px
body-sm:
fontFamily: Inter
fontSize: 13px
fontWeight: '400'
lineHeight: 18px
label-md:
fontFamily: Inter
fontSize: 12px
fontWeight: '500'
lineHeight: 16px
letterSpacing: 0.05em
label-sm:
fontFamily: Inter
fontSize: 11px
fontWeight: '600'
lineHeight: 14px
table-data:
fontFamily: Inter
fontSize: 13px
fontWeight: '400'
lineHeight: 16px
rounded:
sm: 0.125rem
DEFAULT: 0.25rem
md: 0.375rem
lg: 0.5rem
xl: 0.75rem
full: 9999px
spacing:
unit: 4px
container-margin: 16px
gutter: 8px
row-padding: 8px 12px
cell-padding: 4px 8px
stack-gap-sm: 4px
stack-gap-md: 12px
---
## Brand & Style
The design system is engineered for high-efficiency internal operations. It prioritizes "Culinary Precision" and "Operational Speed," ensuring that shop managers and bakers can manage complex orders, inventory, and logistics without visual fatigue.
The aesthetic is **Corporate / Modern** with a lean toward **Minimalism**. It avoids decorative elements in favor of a data-dense, "functional-first" layout. The interface should feel like a precision tool—reliable, unobtrusive, and systematic. Visual hierarchy is achieved through subtle tonal shifts and strict typographic alignment rather than heavy shadows or vibrant colors.
## Colors
The palette is anchored in professional neutrality to keep the focus on data.
- **Primary:** A deep Navy (`#0F172A`) used for navigation, primary action buttons, and high-level headers. It conveys authority and stability.
- **Secondary:** A warm, muted "Bakery Brown" (`#B45309`) used sparingly for status indicators (e.g., "In Oven") or to highlight specific bakery-related callouts without breaking the professional tone.
- **Neutrals:** A spectrum of Slates and Grays manages the UI scaffolding. The background uses a very light off-white to reduce glare during long shifts, while borders provide crisp definition between high-density data cells.
## Typography
This design system utilizes **Inter** for all roles to ensure maximum legibility and a systematic feel.
- **Density:** Line heights are kept tight (1.2x to 1.5x) to allow more rows of data to be visible on-screen.
- **Hierarchy:** We use weight (SemiBold 600) and case (Uppercase labels) to distinguish headers from interactive data.
- **Scaling:** Font sizes are capped at 24px for desktop to prevent excessive scrolling. On mobile, headlines scale down slightly, but the core body size remains at 14px for touch-target legibility.
## Layout & Spacing
The layout follows a **Fluid Grid** model with a 4px base increment.
- **Density:** Margins and gutters are kept tight (16px and 8px respectively) to maximize the horizontal space available for multi-column tables.
- **Structure:** Content is organized into "Panes" or "Modules." Use a 12-column grid for dashboard views, but shift to a "List-Detail" view for order management where the left list is fixed-width (320px) and the right detail area is fluid.
- **Responsiveness:** On tablet and mobile, hide non-essential table columns (e.g., "SKU" or "Date Created") in favor of primary status and customer names to maintain clarity.
## Elevation & Depth
This design system uses **Low-Contrast Outlines** and **Tonal Layers** rather than shadows.
- **Borders:** Use 1px solid borders (`#E2E8F0`) to define cards, table cells, and input fields.
- **Surfaces:** Depth is communicated by darkening the background of "containers" (`#F1F5F9`) and keeping active "items" or "cards" on pure white (`#FFFFFF`).
- **Interaction:** A subtle 2px blur shadow is permitted only for dropdown menus or modals to lift them slightly from the dense background data. Otherwise, the UI remains flat to emphasize its utilitarian nature.
## Shapes
The design system uses a **Soft (Level 1)** roundedness profile.
- **Standard Elements:** 0.25rem (4px) radius for buttons, input fields, and small cards. This provides a professional, modern look without being too "playful" or "sharp."
- **Data Indicators:** Status tags (e.g., "Ready for Pickup") may use a slightly higher radius (8px) to distinguish them from clickable buttons.
## Components
- **High-Density Tables:** The core of the system. Rows should have a fixed height (approx 40px). Use zebra-striping (alternating `#F8FAFC`) only when tables exceed 10 columns.
- **Buttons:** Primary buttons are Solid Navy with White text. Secondary buttons are Outline-only. Sizes should be "Compact" (32px height) for toolbar actions and "Default" (40px) for primary form submissions.
- **Input Fields:** Use "Inline" labels or "Floating" labels to save vertical space. Borders are 1px gray, turning Navy on focus.
- **Status Chips:** Small, condensed pills with low-opacity background tints (e.g., light green background with dark green text for "Delivered").
- **Cards:** Minimalist with no padding on the outer container. Headers are separated by a 1px horizontal rule.
- **Inventory Thumbnails:** 32x32px squares with 4px radius, used only for quick cake-type identification in list views.

455
inspiration/stitch_bakery_order_management_system(2)/code.html Normal file
View file

@ -0,0 +1,455 @@
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Production Dashboard - Crumbs &amp; Co.</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"outline-variant": "#c6c6cd",
"on-tertiary-container": "#98805d",
"on-secondary": "#ffffff",
"tertiary": "#000000",
"surface-container-highest": "#d3e4fe",
"on-tertiary-fixed-variant": "#574425",
"secondary-container": "#fd8a42",
"surface-tint": "#565e74",
"on-secondary-fixed": "#331200",
"on-primary-container": "#7c839b",
"inverse-on-surface": "#eaf1ff",
"on-primary-fixed": "#131b2e",
"on-surface": "#0b1c30",
"on-primary-fixed-variant": "#3f465c",
"surface": "#f8f9ff",
"on-background": "#0b1c30",
"on-error-container": "#93000a",
"surface-container-low": "#eff4ff",
"surface-container-lowest": "#ffffff",
"primary-fixed-dim": "#bec6e0",
"outline": "#76777d",
"surface-container-high": "#dce9ff",
"on-primary": "#ffffff",
"inverse-primary": "#bec6e0",
"primary-container": "#131b2e",
"secondary-fixed": "#ffdbca",
"tertiary-fixed-dim": "#dec29a",
"secondary": "#9b4500",
"primary": "#000000",
"surface-container": "#e5eeff",
"background": "#f8f9ff",
"surface-variant": "#d3e4fe",
"on-error": "#ffffff",
"on-secondary-container": "#682c00",
"inverse-surface": "#213145",
"primary-fixed": "#dae2fd",
"on-secondary-fixed-variant": "#763300",
"on-surface-variant": "#45464d",
"error": "#ba1a1a",
"surface-dim": "#cbdbf5",
"secondary-fixed-dim": "#ffb68e",
"tertiary-container": "#271901",
"surface-bright": "#f8f9ff",
"error-container": "#ffdad6",
"on-tertiary-fixed": "#271901",
"on-tertiary": "#ffffff",
"tertiary-fixed": "#fcdeb5"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"stack-gap-md": "12px",
"row-padding": "8px 12px",
"container-margin": "16px",
"unit": "4px",
"stack-gap-sm": "4px",
"cell-padding": "4px 8px",
"gutter": "8px"
},
"fontFamily": {
"body-md": [
"Inter"
],
"label-md": [
"Inter"
],
"label-sm": [
"Inter"
],
"headline-md": [
"Inter"
],
"headline-sm": [
"Inter"
],
"body-sm": [
"Inter"
],
"table-data": [
"Inter"
],
"headline-lg": [
"Inter"
]
},
"fontSize": {
"body-md": [
"14px",
{
"lineHeight": "20px",
"fontWeight": "400"
}
],
"label-md": [
"12px",
{
"lineHeight": "16px",
"letterSpacing": "0.05em",
"fontWeight": "500"
}
],
"label-sm": [
"11px",
{
"lineHeight": "14px",
"fontWeight": "600"
}
],
"headline-md": [
"20px",
{
"lineHeight": "28px",
"letterSpacing": "-0.01em",
"fontWeight": "600"
}
],
"headline-sm": [
"16px",
{
"lineHeight": "24px",
"fontWeight": "600"
}
],
"body-sm": [
"13px",
{
"lineHeight": "18px",
"fontWeight": "400"
}
],
"table-data": [
"13px",
{
"lineHeight": "16px",
"fontWeight": "400"
}
],
"headline-lg": [
"24px",
{
"lineHeight": "32px",
"letterSpacing": "-0.02em",
"fontWeight": "600"
}
]
}
},
},
}
</script>
</head>
<body class="bg-background text-on-background font-body-md text-body-md overflow-hidden">
<!-- TopNavBar -->
<nav class="fixed top-0 right-0 left-[280px] flex justify-between items-center px-6 z-30 h-14 w-full border-b border-outline-variant bg-surface text-primary flat no shadows" style="width: calc(100% - 280px);">
<div class="flex items-center gap-6 flex-1">
<span class="font-headline-md text-headline-md font-black text-primary">Order Tracker</span>
<div class="relative w-96 flex items-center">
<span class="material-symbols-outlined absolute left-3 text-on-surface-variant text-sm">search</span>
<input class="w-full h-8 pl-9 pr-3 rounded border border-outline-variant bg-surface-container-lowest text-body-sm font-body-sm focus:border-primary focus:ring-1 focus:ring-primary outline-none placeholder:text-on-surface-variant transition-colors" placeholder="Search orders, customers, or SKUs..." type="text"/>
</div>
</div>
<div class="flex items-center gap-6">
<div class="flex gap-4">
<button class="text-primary font-bold border-b-2 border-secondary pb-1 cursor-pointer active:scale-95 font-body-sm text-body-sm transition-colors">Today</button>
<button class="text-on-surface-variant pb-1 cursor-pointer active:scale-95 hover:text-primary font-body-sm text-body-sm transition-colors">This Week</button>
<button class="text-on-surface-variant pb-1 cursor-pointer active:scale-95 hover:text-primary font-body-sm text-body-sm transition-colors">Monthly</button>
</div>
<div class="h-6 w-px bg-outline-variant mx-2"></div>
<button class="h-8 px-4 bg-primary text-on-primary rounded flex items-center gap-2 hover:opacity-90 transition-opacity font-label-md text-label-md active:scale-95">
<span class="material-symbols-outlined text-[18px]">sync</span>
Sync Data
</button>
<div class="flex items-center gap-3 text-on-surface-variant">
<button class="hover:text-primary transition-colors active:scale-95 p-1 rounded hover:bg-surface-container">
<span class="material-symbols-outlined">notifications</span>
</button>
<button class="hover:text-primary transition-colors active:scale-95 p-1 rounded hover:bg-surface-container">
<span class="material-symbols-outlined">account_circle</span>
</button>
</div>
</div>
</nav>
<!-- SideNavBar -->
<aside class="fixed left-0 top-0 bottom-0 flex flex-col p-4 z-40 w-[280px] h-full border-r border-outline-variant bg-surface-container-lowest text-primary flat no shadows">
<div class="mb-8 mt-2 px-2">
<h1 class="font-headline-sm text-headline-sm font-bold text-primary">Crumbs &amp; Co.</h1>
<p class="font-label-md text-label-md text-on-surface-variant mt-1">Production Hub</p>
</div>
<button class="mb-8 w-full h-10 bg-primary text-on-primary rounded flex justify-center items-center gap-2 hover:opacity-90 transition-opacity font-label-md text-label-md font-bold active:scale-95">
<span class="material-symbols-outlined text-[18px]">add</span>
New Order
</button>
<div class="flex flex-col gap-1 flex-1">
<button class="flex items-center gap-3 px-4 py-3 bg-secondary-container text-on-secondary-container rounded-lg font-bold font-label-md text-label-md cursor-pointer active:opacity-80 w-full text-left">
<span class="material-symbols-outlined text-[20px]" style="font-variation-settings: 'FILL' 1;">dashboard</span>
Dashboard
</button>
<button class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors font-label-md text-label-md cursor-pointer active:opacity-80 rounded w-full text-left">
<span class="material-symbols-outlined text-[20px]">shopping_cart</span>
Orders
</button>
<button class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors font-label-md text-label-md cursor-pointer active:opacity-80 rounded w-full text-left">
<span class="material-symbols-outlined text-[20px]">inventory_2</span>
Catalogue
</button>
</div>
<div class="mt-auto pt-4 border-t border-outline-variant">
<button class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors font-label-md text-label-md cursor-pointer active:opacity-80 rounded w-full text-left">
<span class="material-symbols-outlined text-[20px]">settings</span>
Settings
</button>
<div class="mt-4 px-4 flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-surface-container-highest flex items-center justify-center text-primary font-bold font-label-sm text-label-sm">
BM
</div>
<div class="flex flex-col">
<span class="font-label-md text-label-md font-bold text-primary">Bakery Manager</span>
<span class="font-label-sm text-label-sm text-on-surface-variant">Active</span>
</div>
</div>
</div>
</aside>
<!-- Main Content Canvas -->
<main class="ml-[280px] mt-14 p-6 h-[calc(100vh-56px)] overflow-y-auto bg-background">
<div class="max-w-[1400px] mx-auto flex flex-col gap-6">
<!-- Key Metrics Grid -->
<div class="grid grid-cols-4 gap-4">
<div class="bg-surface-container-lowest border border-outline-variant rounded p-4 flex flex-col gap-2 relative overflow-hidden group">
<div class="absolute right-0 top-0 w-16 h-16 bg-surface-container-highest rounded-bl-full -mr-8 -mt-8 opacity-50 transition-transform group-hover:scale-110"></div>
<span class="font-label-md text-label-md text-on-surface-variant flex items-center gap-1">
<span class="material-symbols-outlined text-[16px]">receipt_long</span> Total Orders Today
</span>
<span class="font-headline-lg text-headline-lg font-bold text-primary">142</span>
<span class="font-label-sm text-label-sm text-[#16a34a] flex items-center">
<span class="material-symbols-outlined text-[14px]">arrow_upward</span> 12% vs yesterday
</span>
</div>
<div class="bg-surface-container-lowest border border-outline-variant rounded p-4 flex flex-col gap-2 relative overflow-hidden group">
<div class="absolute right-0 top-0 w-16 h-16 bg-surface-container-highest rounded-bl-full -mr-8 -mt-8 opacity-50 transition-transform group-hover:scale-110"></div>
<span class="font-label-md text-label-md text-on-surface-variant flex items-center gap-1">
<span class="material-symbols-outlined text-[16px]">cake</span> Cakes to Decorate
</span>
<span class="font-headline-lg text-headline-lg font-bold text-primary">87</span>
<span class="font-label-sm text-label-sm text-[#ca8a04] flex items-center">
<span class="material-symbols-outlined text-[14px]">priority_high</span> 24 Rush Orders
</span>
</div>
<div class="bg-surface-container-lowest border border-outline-variant rounded p-4 flex flex-col gap-2 relative overflow-hidden group">
<div class="absolute right-0 top-0 w-16 h-16 bg-surface-container-highest rounded-bl-full -mr-8 -mt-8 opacity-50 transition-transform group-hover:scale-110"></div>
<span class="font-label-md text-label-md text-on-surface-variant flex items-center gap-1">
<span class="material-symbols-outlined text-[16px]">check_circle</span> Ready for Pickup
</span>
<span class="font-headline-lg text-headline-lg font-bold text-primary">34</span>
<span class="font-label-sm text-label-sm text-on-surface-variant flex items-center">
Next pickup in 15m
</span>
</div>
<div class="bg-surface-container-lowest border border-outline-variant rounded p-4 flex flex-col gap-2 relative overflow-hidden group">
<div class="absolute right-0 top-0 w-16 h-16 bg-surface-container-highest rounded-bl-full -mr-8 -mt-8 opacity-50 transition-transform group-hover:scale-110"></div>
<span class="font-label-md text-label-md text-on-surface-variant flex items-center gap-1">
<span class="material-symbols-outlined text-[16px]">payments</span> Revenue (Est)
</span>
<span class="font-headline-lg text-headline-lg font-bold text-primary">$4,250</span>
<span class="font-label-sm text-label-sm text-[#16a34a] flex items-center">
<span class="material-symbols-outlined text-[14px]">trending_up</span> On target
</span>
</div>
</div>
<div class="grid grid-cols-12 gap-6 items-start">
<!-- Production View (Left Pane) -->
<div class="col-span-3 flex flex-col gap-4">
<div class="bg-surface-container-lowest border border-outline-variant rounded flex flex-col">
<div class="p-3 border-b border-outline-variant flex justify-between items-center bg-surface-container-low">
<h2 class="font-headline-sm text-headline-sm font-bold text-primary">Production Queue</h2>
<button class="p-1 text-on-surface-variant hover:text-primary transition-colors"><span class="material-symbols-outlined text-[18px]">filter_list</span></button>
</div>
<div class="p-0 flex flex-col">
<div class="flex items-center justify-between p-3 border-b border-outline-variant hover:bg-surface-container-low transition-colors cursor-pointer">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded bg-[#3b2f2f] flex items-center justify-center text-white font-bold font-label-sm text-label-sm">CF</div>
<div class="flex flex-col">
<span class="font-body-sm text-body-sm font-bold text-primary">Chocolate Fudge</span>
<span class="font-label-sm text-label-sm text-on-surface-variant">Standard 8"</span>
</div>
</div>
<span class="font-headline-sm text-headline-sm font-bold text-primary bg-surface-container-highest px-2 py-0.5 rounded">12</span>
</div>
<div class="flex items-center justify-between p-3 border-b border-outline-variant hover:bg-surface-container-low transition-colors cursor-pointer bg-surface-container-lowest">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded bg-[#a22a2a] flex items-center justify-center text-white font-bold font-label-sm text-label-sm">RV</div>
<div class="flex flex-col">
<span class="font-body-sm text-body-sm font-bold text-primary">Red Velvet</span>
<span class="font-label-sm text-label-sm text-on-surface-variant">Custom Inscriptions</span>
</div>
</div>
<span class="font-headline-sm text-headline-sm font-bold text-primary bg-surface-container-highest px-2 py-0.5 rounded">5</span>
</div>
<div class="flex items-center justify-between p-3 border-b border-outline-variant hover:bg-surface-container-low transition-colors cursor-pointer">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded bg-[#f3e5ab] flex items-center justify-center text-[#5c4033] font-bold font-label-sm text-label-sm">VB</div>
<div class="flex flex-col">
<span class="font-body-sm text-body-sm font-bold text-primary">Vanilla Bean</span>
<span class="font-label-sm text-label-sm text-on-surface-variant">Tiered</span>
</div>
</div>
<span class="font-headline-sm text-headline-sm font-bold text-primary bg-surface-container-highest px-2 py-0.5 rounded">8</span>
</div>
<div class="flex items-center justify-between p-3 hover:bg-surface-container-low transition-colors cursor-pointer">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded bg-[#e8a365] flex items-center justify-center text-white font-bold font-label-sm text-label-sm">CC</div>
<div class="flex flex-col">
<span class="font-body-sm text-body-sm font-bold text-primary">Carrot Cake</span>
<span class="font-label-sm text-label-sm text-on-surface-variant">Nut-Free</span>
</div>
</div>
<span class="font-headline-sm text-headline-sm font-bold text-primary bg-surface-container-highest px-2 py-0.5 rounded">3</span>
</div>
</div>
<div class="p-2 border-t border-outline-variant bg-surface-container-low text-center">
<button class="font-label-md text-label-md text-secondary font-bold hover:underline">View Full Inventory</button>
</div>
</div>
</div>
<!-- Order Table (Right Pane) -->
<div class="col-span-9 flex flex-col gap-4">
<div class="bg-surface-container-lowest border border-outline-variant rounded flex flex-col h-[500px]">
<div class="p-3 border-b border-outline-variant flex justify-between items-center bg-surface-container-low">
<div class="flex items-center gap-4">
<h2 class="font-headline-sm text-headline-sm font-bold text-primary">Active Orders</h2>
<span class="px-2 py-0.5 bg-secondary-container text-on-secondary-container rounded font-label-sm text-label-sm font-bold">142 Total</span>
</div>
<div class="flex items-center gap-2">
<button class="h-8 px-3 border border-outline-variant rounded flex items-center gap-1 font-label-md text-label-md text-on-surface-variant hover:bg-surface-container-low transition-colors">
<span class="material-symbols-outlined text-[16px]">tune</span> Filter
</button>
<button class="h-8 px-3 border border-outline-variant rounded flex items-center gap-1 font-label-md text-label-md text-on-surface-variant hover:bg-surface-container-low transition-colors">
<span class="material-symbols-outlined text-[16px]">ios_share</span> Export
</button>
</div>
</div>
<div class="flex-1 overflow-auto">
<table class="w-full text-left border-collapse">
<thead class="sticky top-0 bg-surface-container-lowest border-b border-outline-variant z-10">
<tr>
<th class="p-cell-padding font-label-md text-label-md font-bold text-on-surface-variant">Order ID</th>
<th class="p-cell-padding font-label-md text-label-md font-bold text-on-surface-variant">Customer</th>
<th class="p-cell-padding font-label-md text-label-md font-bold text-on-surface-variant">Pickup Time</th>
<th class="p-cell-padding font-label-md text-label-md font-bold text-on-surface-variant w-1/3">Items</th>
<th class="p-cell-padding font-label-md text-label-md font-bold text-on-surface-variant text-right">Total</th>
<th class="p-cell-padding font-label-md text-label-md font-bold text-on-surface-variant text-center">Status</th>
<th class="p-cell-padding font-label-md text-label-md font-bold text-on-surface-variant w-8"></th>
</tr>
</thead>
<tbody>
<tr class="border-b border-outline-variant hover:bg-surface-container-low transition-colors h-[40px]">
<td class="p-cell-padding font-table-data text-table-data font-bold text-primary">#ORD-9921</td>
<td class="p-cell-padding font-table-data text-table-data text-on-surface">Sarah Jenkins</td>
<td class="p-cell-padding font-table-data text-table-data text-on-surface-variant">10:30 AM</td>
<td class="p-cell-padding font-table-data text-table-data text-on-surface truncate max-w-[200px]" title='1x Chocolate Fudge (8"), 12x Macarons'>1x Chocolate Fudge (8"), 12x Macarons</td>
<td class="p-cell-padding font-table-data text-table-data text-on-surface font-bold text-right">$65.00</td>
<td class="p-cell-padding text-center">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-[#dcfce7] text-[#166534]">Ready</span>
</td>
<td class="p-cell-padding text-center">
<button class="text-on-surface-variant hover:text-primary"><span class="material-symbols-outlined text-[18px]">more_vert</span></button>
</td>
</tr>
<tr class="border-b border-outline-variant hover:bg-surface-container-low transition-colors bg-[#F8FAFC] h-[40px]">
<td class="p-cell-padding font-table-data text-table-data font-bold text-primary">#ORD-9922</td>
<td class="p-cell-padding font-table-data text-table-data text-on-surface">Michael Chang</td>
<td class="p-cell-padding font-table-data text-table-data text-on-surface-variant text-[#ca8a04] font-bold">11:00 AM (Rush)</td>
<td class="p-cell-padding font-table-data text-table-data text-on-surface truncate max-w-[200px]" title="2x Red Velvet (Tiered), 1x Custom Inscription">2x Red Velvet (Tiered), 1x Custom In...</td>
<td class="p-cell-padding font-table-data text-table-data text-on-surface font-bold text-right">$145.50</td>
<td class="p-cell-padding text-center">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-[#fef08a] text-[#854d0e]">Decorating</span>
</td>
<td class="p-cell-padding text-center">
<button class="text-on-surface-variant hover:text-primary"><span class="material-symbols-outlined text-[18px]">more_vert</span></button>
</td>
</tr>
<tr class="border-b border-outline-variant hover:bg-surface-container-low transition-colors h-[40px]">
<td class="p-cell-padding font-table-data text-table-data font-bold text-primary">#ORD-9923</td>
<td class="p-cell-padding font-table-data text-table-data text-on-surface">Elena Rodriguez</td>
<td class="p-cell-padding font-table-data text-table-data text-on-surface-variant">1:00 PM</td>
<td class="p-cell-padding font-table-data text-table-data text-on-surface truncate max-w-[200px]" title='1x Vanilla Bean (10")'>1x Vanilla Bean (10")</td>
<td class="p-cell-padding font-table-data text-table-data text-on-surface font-bold text-right">$45.00</td>
<td class="p-cell-padding text-center">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-[#fee2e2] text-[#991b1b]">Baking</span>
</td>
<td class="p-cell-padding text-center">
<button class="text-on-surface-variant hover:text-primary"><span class="material-symbols-outlined text-[18px]">more_vert</span></button>
</td>
</tr>
<tr class="border-b border-outline-variant hover:bg-surface-container-low transition-colors bg-[#F8FAFC] h-[40px]">
<td class="p-cell-padding font-table-data text-table-data font-bold text-primary">#ORD-9924</td>
<td class="p-cell-padding font-table-data text-table-data text-on-surface">David Kim</td>
<td class="p-cell-padding font-table-data text-table-data text-on-surface-variant">2:30 PM</td>
<td class="p-cell-padding font-table-data text-table-data text-on-surface truncate max-w-[200px]" title="1x Carrot Cake (Nut-Free)">1x Carrot Cake (Nut-Free)</td>
<td class="p-cell-padding font-table-data text-table-data text-on-surface font-bold text-right">$50.00</td>
<td class="p-cell-padding text-center">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-[#f1f5f9] text-[#475569]">Queued</span>
</td>
<td class="p-cell-padding text-center">
<button class="text-on-surface-variant hover:text-primary"><span class="material-symbols-outlined text-[18px]">more_vert</span></button>
</td>
</tr>
<tr class="border-b border-outline-variant hover:bg-surface-container-low transition-colors h-[40px]">
<td class="p-cell-padding font-table-data text-table-data font-bold text-primary">#ORD-9925</td>
<td class="p-cell-padding font-table-data text-table-data text-on-surface">Corporate Event Inc.</td>
<td class="p-cell-padding font-table-data text-table-data text-on-surface-variant">4:00 PM</td>
<td class="p-cell-padding font-table-data text-table-data text-on-surface truncate max-w-[200px]" title="5x Chocolate Fudge (Sheet), 100x Cookies">5x Chocolate Fudge (Sheet), 100x C...</td>
<td class="p-cell-padding font-table-data text-table-data text-on-surface font-bold text-right">$450.00</td>
<td class="p-cell-padding text-center">
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-[#f1f5f9] text-[#475569]">Queued</span>
</td>
<td class="p-cell-padding text-center">
<button class="text-on-surface-variant hover:text-primary"><span class="material-symbols-outlined text-[18px]">more_vert</span></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="p-2 border-t border-outline-variant bg-surface-container-lowest flex justify-between items-center text-on-surface-variant">
<span class="font-label-sm text-label-sm">Showing 1-5 of 142</span>
<div class="flex gap-1">
<button class="w-6 h-6 rounded flex items-center justify-center border border-outline-variant hover:bg-surface-container-low disabled:opacity-50"><span class="material-symbols-outlined text-[16px]">chevron_left</span></button>
<button class="w-6 h-6 rounded flex items-center justify-center border border-outline-variant hover:bg-surface-container-low"><span class="material-symbols-outlined text-[16px]">chevron_right</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body></html>

BIN
inspiration/stitch_bakery_order_management_system(2)/screen.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 215 KiB

159
inspiration/stitch_bakery_order_management_system/DESIGN.md Normal file
View file

@ -0,0 +1,159 @@
---
name: Bakery Operations Interface
colors:
surface: '#f8f9ff'
surface-dim: '#cbdbf5'
surface-bright: '#f8f9ff'
surface-container-lowest: '#ffffff'
surface-container-low: '#eff4ff'
surface-container: '#e5eeff'
surface-container-high: '#dce9ff'
surface-container-highest: '#d3e4fe'
on-surface: '#0b1c30'
on-surface-variant: '#45464d'
inverse-surface: '#213145'
inverse-on-surface: '#eaf1ff'
outline: '#76777d'
outline-variant: '#c6c6cd'
surface-tint: '#565e74'
primary: '#000000'
on-primary: '#ffffff'
primary-container: '#131b2e'
on-primary-container: '#7c839b'
inverse-primary: '#bec6e0'
secondary: '#9b4500'
on-secondary: '#ffffff'
secondary-container: '#fd8a42'
on-secondary-container: '#682c00'
tertiary: '#000000'
on-tertiary: '#ffffff'
tertiary-container: '#271901'
on-tertiary-container: '#98805d'
error: '#ba1a1a'
on-error: '#ffffff'
error-container: '#ffdad6'
on-error-container: '#93000a'
primary-fixed: '#dae2fd'
primary-fixed-dim: '#bec6e0'
on-primary-fixed: '#131b2e'
on-primary-fixed-variant: '#3f465c'
secondary-fixed: '#ffdbca'
secondary-fixed-dim: '#ffb68e'
on-secondary-fixed: '#331200'
on-secondary-fixed-variant: '#763300'
tertiary-fixed: '#fcdeb5'
tertiary-fixed-dim: '#dec29a'
on-tertiary-fixed: '#271901'
on-tertiary-fixed-variant: '#574425'
background: '#f8f9ff'
on-background: '#0b1c30'
surface-variant: '#d3e4fe'
typography:
headline-lg:
fontFamily: Inter
fontSize: 24px
fontWeight: '600'
lineHeight: 32px
letterSpacing: -0.02em
headline-md:
fontFamily: Inter
fontSize: 20px
fontWeight: '600'
lineHeight: 28px
letterSpacing: -0.01em
headline-sm:
fontFamily: Inter
fontSize: 16px
fontWeight: '600'
lineHeight: 24px
body-md:
fontFamily: Inter
fontSize: 14px
fontWeight: '400'
lineHeight: 20px
body-sm:
fontFamily: Inter
fontSize: 13px
fontWeight: '400'
lineHeight: 18px
label-md:
fontFamily: Inter
fontSize: 12px
fontWeight: '500'
lineHeight: 16px
letterSpacing: 0.05em
label-sm:
fontFamily: Inter
fontSize: 11px
fontWeight: '600'
lineHeight: 14px
table-data:
fontFamily: Inter
fontSize: 13px
fontWeight: '400'
lineHeight: 16px
rounded:
sm: 0.125rem
DEFAULT: 0.25rem
md: 0.375rem
lg: 0.5rem
xl: 0.75rem
full: 9999px
spacing:
unit: 4px
container-margin: 16px
gutter: 8px
row-padding: 8px 12px
cell-padding: 4px 8px
stack-gap-sm: 4px
stack-gap-md: 12px
---
## Brand & Style
The design system is engineered for high-efficiency internal operations. It prioritizes "Culinary Precision" and "Operational Speed," ensuring that shop managers and bakers can manage complex orders, inventory, and logistics without visual fatigue.
The aesthetic is **Corporate / Modern** with a lean toward **Minimalism**. It avoids decorative elements in favor of a data-dense, "functional-first" layout. The interface should feel like a precision tool—reliable, unobtrusive, and systematic. Visual hierarchy is achieved through subtle tonal shifts and strict typographic alignment rather than heavy shadows or vibrant colors.
## Colors
The palette is anchored in professional neutrality to keep the focus on data.
- **Primary:** A deep Navy (`#0F172A`) used for navigation, primary action buttons, and high-level headers. It conveys authority and stability.
- **Secondary:** A warm, muted "Bakery Brown" (`#B45309`) used sparingly for status indicators (e.g., "In Oven") or to highlight specific bakery-related callouts without breaking the professional tone.
- **Neutrals:** A spectrum of Slates and Grays manages the UI scaffolding. The background uses a very light off-white to reduce glare during long shifts, while borders provide crisp definition between high-density data cells.
## Typography
This design system utilizes **Inter** for all roles to ensure maximum legibility and a systematic feel.
- **Density:** Line heights are kept tight (1.2x to 1.5x) to allow more rows of data to be visible on-screen.
- **Hierarchy:** We use weight (SemiBold 600) and case (Uppercase labels) to distinguish headers from interactive data.
- **Scaling:** Font sizes are capped at 24px for desktop to prevent excessive scrolling. On mobile, headlines scale down slightly, but the core body size remains at 14px for touch-target legibility.
## Layout & Spacing
The layout follows a **Fluid Grid** model with a 4px base increment.
- **Density:** Margins and gutters are kept tight (16px and 8px respectively) to maximize the horizontal space available for multi-column tables.
- **Structure:** Content is organized into "Panes" or "Modules." Use a 12-column grid for dashboard views, but shift to a "List-Detail" view for order management where the left list is fixed-width (320px) and the right detail area is fluid.
- **Responsiveness:** On tablet and mobile, hide non-essential table columns (e.g., "SKU" or "Date Created") in favor of primary status and customer names to maintain clarity.
## Elevation & Depth
This design system uses **Low-Contrast Outlines** and **Tonal Layers** rather than shadows.
- **Borders:** Use 1px solid borders (`#E2E8F0`) to define cards, table cells, and input fields.
- **Surfaces:** Depth is communicated by darkening the background of "containers" (`#F1F5F9`) and keeping active "items" or "cards" on pure white (`#FFFFFF`).
- **Interaction:** A subtle 2px blur shadow is permitted only for dropdown menus or modals to lift them slightly from the dense background data. Otherwise, the UI remains flat to emphasize its utilitarian nature.
## Shapes
The design system uses a **Soft (Level 1)** roundedness profile.
- **Standard Elements:** 0.25rem (4px) radius for buttons, input fields, and small cards. This provides a professional, modern look without being too "playful" or "sharp."
- **Data Indicators:** Status tags (e.g., "Ready for Pickup") may use a slightly higher radius (8px) to distinguish them from clickable buttons.
## Components
- **High-Density Tables:** The core of the system. Rows should have a fixed height (approx 40px). Use zebra-striping (alternating `#F8FAFC`) only when tables exceed 10 columns.
- **Buttons:** Primary buttons are Solid Navy with White text. Secondary buttons are Outline-only. Sizes should be "Compact" (32px height) for toolbar actions and "Default" (40px) for primary form submissions.
- **Input Fields:** Use "Inline" labels or "Floating" labels to save vertical space. Borders are 1px gray, turning Navy on focus.
- **Status Chips:** Small, condensed pills with low-opacity background tints (e.g., light green background with dark green text for "Delivered").
- **Cards:** Minimalist with no padding on the outer container. Headers are separated by a 1px horizontal rule.
- **Inventory Thumbnails:** 32x32px squares with 4px radius, used only for quick cake-type identification in list views.

443
inspiration/stitch_bakery_order_management_system/code.html Normal file
View file

@ -0,0 +1,443 @@
<!DOCTYPE html>
<html class="h-full bg-background antialiased" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Order Tracker - Dashboard</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"outline-variant": "#c6c6cd",
"on-tertiary-container": "#98805d",
"on-secondary": "#ffffff",
"tertiary": "#000000",
"surface-container-highest": "#d3e4fe",
"on-tertiary-fixed-variant": "#574425",
"secondary-container": "#fd8a42",
"surface-tint": "#565e74",
"on-secondary-fixed": "#331200",
"on-primary-container": "#7c839b",
"inverse-on-surface": "#eaf1ff",
"on-primary-fixed": "#131b2e",
"on-surface": "#0b1c30",
"on-primary-fixed-variant": "#3f465c",
"surface": "#f8f9ff",
"on-background": "#0b1c30",
"on-error-container": "#93000a",
"surface-container-low": "#eff4ff",
"surface-container-lowest": "#ffffff",
"primary-fixed-dim": "#bec6e0",
"outline": "#76777d",
"surface-container-high": "#dce9ff",
"on-primary": "#ffffff",
"inverse-primary": "#bec6e0",
"primary-container": "#131b2e",
"secondary-fixed": "#ffdbca",
"tertiary-fixed-dim": "#dec29a",
"secondary": "#9b4500",
"primary": "#000000",
"surface-container": "#e5eeff",
"background": "#f8f9ff",
"surface-variant": "#d3e4fe",
"on-error": "#ffffff",
"on-secondary-container": "#682c00",
"inverse-surface": "#213145",
"primary-fixed": "#dae2fd",
"on-secondary-fixed-variant": "#763300",
"on-surface-variant": "#45464d",
"error": "#ba1a1a",
"surface-dim": "#cbdbf5",
"secondary-fixed-dim": "#ffb68e",
"tertiary-container": "#271901",
"surface-bright": "#f8f9ff",
"error-container": "#ffdad6",
"on-tertiary-fixed": "#271901",
"on-tertiary": "#ffffff",
"tertiary-fixed": "#fcdeb5"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"stack-gap-md": "12px",
"row-padding": "8px 12px",
"container-margin": "16px",
"unit": "4px",
"stack-gap-sm": "4px",
"cell-padding": "4px 8px",
"gutter": "8px"
},
"fontFamily": {
"body-md": ["Inter"],
"label-md": ["Inter"],
"label-sm": ["Inter"],
"headline-md": ["Inter"],
"headline-sm": ["Inter"],
"body-sm": ["Inter"],
"table-data": ["Inter"],
"headline-lg": ["Inter"]
},
"fontSize": {
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
"label-sm": ["11px", {"lineHeight": "14px", "fontWeight": "600"}],
"headline-md": ["20px", {"lineHeight": "28px", "letterSpacing": "-0.01em", "fontWeight": "600"}],
"headline-sm": ["16px", {"lineHeight": "24px", "fontWeight": "600"}],
"body-sm": ["13px", {"lineHeight": "18px", "fontWeight": "400"}],
"table-data": ["13px", {"lineHeight": "16px", "fontWeight": "400"}],
"headline-lg": ["24px", {"lineHeight": "32px", "letterSpacing": "-0.02em", "fontWeight": "600"}]
}
}
}
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.fill {
font-variation-settings: 'FILL' 1;
}
/* Custom scrollbar for dense data areas */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #c6c6cd;
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background: #76777d;
}
</style>
</head>
<body class="h-full flex overflow-hidden">
<!-- SideNavBar (Shared Component) -->
<nav class="hidden md:flex flex-col w-[280px] h-full border-r border-outline-variant bg-surface-container-lowest fixed left-0 top-0 bottom-0 p-4 z-40">
<div class="mb-8">
<h1 class="font-headline-sm text-headline-sm font-bold text-primary truncate">Crumbs &amp; Co.</h1>
<p class="font-body-sm text-body-sm text-on-surface-variant truncate mt-1">Production Hub</p>
</div>
<button class="w-full flex items-center justify-center gap-2 bg-primary text-on-primary py-2 px-4 rounded mb-6 font-label-md text-label-md hover:opacity-90 transition-opacity">
<span class="material-symbols-outlined text-[18px]">add</span>
New Order
</button>
<div class="flex-1 flex flex-col gap-1">
<!-- Active Tab: Dashboard -->
<a class="flex items-center gap-3 px-4 py-3 bg-secondary-container text-on-secondary-container rounded-lg font-label-md text-label-md font-bold cursor-pointer active:opacity-80" href="#">
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
Dashboard
</a>
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors rounded-lg font-label-md text-label-md cursor-pointer active:opacity-80" href="#">
<span class="material-symbols-outlined" data-icon="shopping_cart">shopping_cart</span>
Orders
</a>
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors rounded-lg font-label-md text-label-md cursor-pointer active:opacity-80" href="#">
<span class="material-symbols-outlined" data-icon="inventory_2">inventory_2</span>
Catalogue
</a>
</div>
<div class="mt-auto border-t border-outline-variant pt-4">
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant hover:bg-surface-container-low transition-colors rounded-lg font-label-md text-label-md cursor-pointer active:opacity-80" href="#">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
Settings
</a>
<div class="mt-4 flex items-center gap-3 px-4">
<div class="w-8 h-8 rounded-full bg-surface-container-high overflow-hidden border border-outline-variant flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-on-surface-variant text-[20px]">person</span>
</div>
<div class="truncate">
<p class="font-label-sm text-label-sm text-on-surface">Bakery Manager</p>
</div>
</div>
</div>
</nav>
<!-- Main Content Area -->
<div class="flex-1 flex flex-col md:ml-[280px] w-full min-w-0 bg-background">
<!-- TopNavBar (Shared Component) -->
<header class="h-14 w-full border-b border-outline-variant bg-surface flex justify-between items-center px-6 z-30 sticky top-0 shrink-0">
<div class="flex items-center gap-8">
<div class="font-headline-md text-headline-md font-black text-primary">Order Tracker</div>
<!-- Search Bar -->
<div class="relative w-64 hidden lg:block">
<span class="material-symbols-outlined absolute left-2.5 top-1.5 text-on-surface-variant text-[20px]">search</span>
<input class="w-full h-8 pl-9 pr-3 border border-outline-variant rounded bg-surface-container-lowest text-body-sm focus:border-primary focus:ring-0 placeholder:text-on-surface-variant/60" placeholder="Search orders..." type="text"/>
</div>
</div>
<nav class="hidden lg:flex items-center gap-6 font-body-sm text-body-sm">
<a class="text-primary font-bold border-b-2 border-secondary pb-1 cursor-pointer active:scale-95 transition-transform hover:text-primary" href="#">Today</a>
<a class="text-on-surface-variant pb-1 cursor-pointer active:scale-95 transition-transform hover:text-primary" href="#">This Week</a>
<a class="text-on-surface-variant pb-1 cursor-pointer active:scale-95 transition-transform hover:text-primary" href="#">Monthly</a>
</nav>
<div class="flex items-center gap-4">
<button class="hidden sm:flex h-8 px-4 border border-outline-variant rounded items-center justify-center font-label-md text-label-md text-on-surface hover:bg-surface-container-low transition-colors active:scale-95">
Sync Data
</button>
<button class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:scale-95">
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
</button>
<button class="text-on-surface-variant hover:text-primary transition-colors cursor-pointer active:scale-95 md:hidden">
<span class="material-symbols-outlined" data-icon="account_circle">account_circle</span>
</button>
</div>
</header>
<!-- Canvas / Dashboard Layout -->
<main class="flex-1 overflow-auto p-4 flex flex-col gap-4">
<div class="flex flex-col lg:flex-row gap-4 h-full min-h-[600px]">
<!-- Left Pane: Order Entry Form & Catalogue -->
<div class="flex-1 flex flex-col gap-4 min-w-0">
<!-- Customer Info Form -->
<section class="bg-surface-container-lowest border border-outline-variant rounded flex flex-col">
<div class="px-4 py-3 border-b border-outline-variant flex items-center justify-between bg-surface-container-low/50">
<h2 class="font-headline-sm text-headline-sm text-on-surface flex items-center gap-2">
<span class="material-symbols-outlined text-[18px] text-on-surface-variant">person_add</span>
Customer Details
</h2>
</div>
<div class="p-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-4 gap-y-4">
<!-- Input Fields -->
<div class="flex flex-col gap-1">
<label class="font-label-sm text-label-sm text-on-surface-variant">Customer Name *</label>
<input class="h-8 border border-outline-variant rounded px-2 font-body-sm text-body-sm focus:border-primary focus:ring-0 w-full" placeholder="John Doe" type="text"/>
</div>
<div class="flex flex-col gap-1">
<label class="font-label-sm text-label-sm text-on-surface-variant">Phone</label>
<input class="h-8 border border-outline-variant rounded px-2 font-body-sm text-body-sm focus:border-primary focus:ring-0 w-full" placeholder="(555) 123-4567" type="tel"/>
</div>
<div class="flex flex-col gap-1">
<label class="font-label-sm text-label-sm text-on-surface-variant">Email</label>
<input class="h-8 border border-outline-variant rounded px-2 font-body-sm text-body-sm focus:border-primary focus:ring-0 w-full" placeholder="john@example.com" type="email"/>
</div>
<div class="flex flex-col gap-1">
<label class="font-label-sm text-label-sm text-on-surface-variant">Pickup Date *</label>
<input class="h-8 border border-outline-variant rounded px-2 font-body-sm text-body-sm focus:border-primary focus:ring-0 w-full" type="date"/>
</div>
<div class="flex flex-col gap-1">
<label class="font-label-sm text-label-sm text-on-surface-variant">Pickup Time</label>
<input class="h-8 border border-outline-variant rounded px-2 font-body-sm text-body-sm focus:border-primary focus:ring-0 w-full" type="time"/>
</div>
<div class="flex flex-col gap-1 md:col-span-2 lg:col-span-1">
<label class="font-label-sm text-label-sm text-on-surface-variant">Order Notes</label>
<input class="h-8 border border-outline-variant rounded px-2 font-body-sm text-body-sm focus:border-primary focus:ring-0 w-full" placeholder="Allergies, special requests..." type="text"/>
</div>
</div>
</section>
<!-- Catalogue Selection Grid -->
<section class="bg-surface-container-lowest border border-outline-variant rounded flex flex-col flex-1 min-h-[300px]">
<div class="px-4 py-3 border-b border-outline-variant flex items-center justify-between bg-surface-container-low/50">
<h2 class="font-headline-sm text-headline-sm text-on-surface flex items-center gap-2">
<span class="material-symbols-outlined text-[18px] text-on-surface-variant">inventory_2</span>
Catalogue Items
</h2>
<div class="relative w-48">
<span class="material-symbols-outlined absolute left-2 top-1.5 text-on-surface-variant text-[16px]">filter_list</span>
<input class="w-full h-7 pl-8 pr-2 border border-outline-variant rounded bg-surface font-body-sm text-body-sm focus:border-primary focus:ring-0 placeholder:text-on-surface-variant/60" placeholder="Filter items..." type="text"/>
</div>
</div>
<div class="p-4 overflow-y-auto flex-1">
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
<!-- Item Card 1 -->
<div class="border border-outline-variant rounded p-2 flex flex-col justify-between hover:border-outline transition-colors bg-surface-bright h-24">
<div class="flex items-start gap-2">
<div class="w-8 h-8 bg-secondary-container/20 rounded border border-secondary-container/30 flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-secondary-container text-[16px]">cake</span>
</div>
<div class="min-w-0">
<div class="font-label-sm text-label-sm text-on-surface truncate">Classic Vanilla</div>
<div class="font-table-data text-table-data text-on-surface-variant">$35.00</div>
</div>
</div>
<div class="flex items-center justify-between mt-2 border-t border-outline-variant/50 pt-2">
<button class="w-6 h-6 flex items-center justify-center rounded bg-surface-container-low text-on-surface-variant hover:bg-outline-variant hover:text-on-surface transition-colors disabled:opacity-50">-</button>
<span class="font-label-md text-label-md text-on-surface w-6 text-center">0</span>
<button class="w-6 h-6 flex items-center justify-center rounded bg-surface-container-high text-on-surface hover:bg-primary hover:text-on-primary transition-colors">+</button>
</div>
</div>
<!-- Item Card 2 -->
<div class="border border-outline-variant rounded p-2 flex flex-col justify-between hover:border-outline transition-colors bg-surface-bright h-24">
<div class="flex items-start gap-2">
<div class="w-8 h-8 bg-tertiary-fixed-dim/20 rounded border border-tertiary-fixed-dim/30 flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-on-tertiary-container text-[16px]">cake</span>
</div>
<div class="min-w-0">
<div class="font-label-sm text-label-sm text-on-surface truncate">Rich Chocolate</div>
<div class="font-table-data text-table-data text-on-surface-variant">$40.00</div>
</div>
</div>
<div class="flex items-center justify-between mt-2 border-t border-outline-variant/50 pt-2">
<button class="w-6 h-6 flex items-center justify-center rounded bg-surface-container-low text-on-surface-variant hover:bg-outline-variant hover:text-on-surface transition-colors">-</button>
<span class="font-label-md text-label-md text-on-surface w-6 text-center">1</span>
<button class="w-6 h-6 flex items-center justify-center rounded bg-surface-container-high text-on-surface hover:bg-primary hover:text-on-primary transition-colors">+</button>
</div>
</div>
<!-- Placeholder Items to simulate density -->
<div class="border border-outline-variant rounded p-2 flex flex-col justify-between opacity-70 bg-surface-bright h-24">
<div class="flex items-start gap-2">
<div class="w-8 h-8 bg-surface-variant rounded border border-outline-variant flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-on-surface-variant text-[16px]">cake</span>
</div>
<div class="min-w-0">
<div class="font-label-sm text-label-sm text-on-surface truncate">Red Velvet</div>
<div class="font-table-data text-table-data text-on-surface-variant">$42.00</div>
</div>
</div>
<div class="flex items-center justify-between mt-2 border-t border-outline-variant/50 pt-2">
<button class="w-6 h-6 flex items-center justify-center rounded bg-surface-container-low text-on-surface-variant">-</button>
<span class="font-label-md text-label-md text-on-surface w-6 text-center">0</span>
<button class="w-6 h-6 flex items-center justify-center rounded bg-surface-container-high text-on-surface">+</button>
</div>
</div>
<div class="border border-outline-variant rounded p-2 flex flex-col justify-between opacity-70 bg-surface-bright h-24">
<div class="flex items-start gap-2">
<div class="w-8 h-8 bg-surface-variant rounded border border-outline-variant flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-on-surface-variant text-[16px]">cookie</span>
</div>
<div class="min-w-0">
<div class="font-label-sm text-label-sm text-on-surface truncate">Choc Chip Box</div>
<div class="font-table-data text-table-data text-on-surface-variant">$15.00</div>
</div>
</div>
<div class="flex items-center justify-between mt-2 border-t border-outline-variant/50 pt-2">
<button class="w-6 h-6 flex items-center justify-center rounded bg-surface-container-low text-on-surface-variant">-</button>
<span class="font-label-md text-label-md text-on-surface w-6 text-center">0</span>
<button class="w-6 h-6 flex items-center justify-center rounded bg-surface-container-high text-on-surface">+</button>
</div>
</div>
<div class="border border-outline-variant rounded p-2 flex flex-col justify-between opacity-70 bg-surface-bright h-24">
<div class="flex items-start gap-2">
<div class="w-8 h-8 bg-surface-variant rounded border border-outline-variant flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-on-surface-variant text-[16px]">bakery_dining</span>
</div>
<div class="min-w-0">
<div class="font-label-sm text-label-sm text-on-surface truncate">Sourdough Loaf</div>
<div class="font-table-data text-table-data text-on-surface-variant">$8.00</div>
</div>
</div>
<div class="flex items-center justify-between mt-2 border-t border-outline-variant/50 pt-2">
<button class="w-6 h-6 flex items-center justify-center rounded bg-surface-container-low text-on-surface-variant">-</button>
<span class="font-label-md text-label-md text-on-surface w-6 text-center">0</span>
<button class="w-6 h-6 flex items-center justify-center rounded bg-surface-container-high text-on-surface">+</button>
</div>
</div>
<div class="border border-outline-variant rounded p-2 flex flex-col justify-between opacity-70 bg-surface-bright h-24">
<div class="flex items-start gap-2">
<div class="w-8 h-8 bg-surface-variant rounded border border-outline-variant flex items-center justify-center shrink-0">
<span class="material-symbols-outlined text-on-surface-variant text-[16px]">breakfast_dining</span>
</div>
<div class="min-w-0">
<div class="font-label-sm text-label-sm text-on-surface truncate">Croissant Box</div>
<div class="font-table-data text-table-data text-on-surface-variant">$24.00</div>
</div>
</div>
<div class="flex items-center justify-between mt-2 border-t border-outline-variant/50 pt-2">
<button class="w-6 h-6 flex items-center justify-center rounded bg-surface-container-low text-on-surface-variant">-</button>
<span class="font-label-md text-label-md text-on-surface w-6 text-center">0</span>
<button class="w-6 h-6 flex items-center justify-center rounded bg-surface-container-high text-on-surface">+</button>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Right Pane: Order Summary -->
<aside class="w-full lg:w-[320px] flex flex-col bg-surface-container-lowest border border-outline-variant rounded shrink-0">
<div class="px-4 py-3 border-b border-outline-variant bg-surface-container-low/50">
<h2 class="font-headline-sm text-headline-sm text-on-surface flex items-center gap-2">
<span class="material-symbols-outlined text-[18px] text-on-surface-variant">receipt_long</span>
Order Summary
</h2>
</div>
<!-- Line Items -->
<div class="flex-1 overflow-y-auto p-4 flex flex-col gap-3">
<div class="flex justify-between items-start border-b border-outline-variant/50 pb-2">
<div class="min-w-0 flex-1 pr-2">
<div class="font-label-sm text-label-sm text-on-surface">1x Rich Chocolate</div>
<div class="font-table-data text-table-data text-on-surface-variant truncate">No substitutions</div>
</div>
<div class="font-label-sm text-label-sm text-on-surface whitespace-nowrap">$40.00</div>
<button class="ml-2 text-error hover:text-error/80">
<span class="material-symbols-outlined text-[16px]">close</span>
</button>
</div>
</div>
<!-- Totals & Actions -->
<div class="p-4 border-t border-outline-variant bg-surface-bright flex flex-col gap-3">
<div class="flex justify-between items-center font-body-sm text-body-sm text-on-surface-variant">
<span>Subtotal</span>
<span>$40.00</span>
</div>
<div class="flex justify-between items-center font-body-sm text-body-sm text-on-surface-variant">
<span>Tax (8%)</span>
<span>$3.20</span>
</div>
<div class="flex justify-between items-center font-headline-sm text-headline-sm text-on-surface pt-2 border-t border-outline-variant/50">
<span>Total</span>
<span>$43.20</span>
</div>
<button class="w-full h-10 mt-2 bg-primary text-on-primary rounded font-label-md text-label-md flex items-center justify-center gap-2 hover:opacity-90 transition-opacity active:scale-[0.98]">
<span class="material-symbols-outlined text-[18px]">check_circle</span>
Finalize Order
</button>
</div>
</aside>
</div>
<!-- Bottom List View: Recent Orders -->
<section class="bg-surface-container-lowest border border-outline-variant rounded flex flex-col shrink-0 mt-2">
<div class="px-4 py-2 border-b border-outline-variant flex items-center justify-between bg-surface-container-low/30">
<h3 class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Recent Orders</h3>
<button class="text-on-surface-variant hover:text-primary p-1">
<span class="material-symbols-outlined text-[16px]">expand_less</span>
</button>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="border-b border-outline-variant bg-surface">
<th class="p-cell-padding font-label-sm text-label-sm text-on-surface-variant font-medium">Order ID</th>
<th class="p-cell-padding font-label-sm text-label-sm text-on-surface-variant font-medium">Customer</th>
<th class="p-cell-padding font-label-sm text-label-sm text-on-surface-variant font-medium">Date</th>
<th class="p-cell-padding font-label-sm text-label-sm text-on-surface-variant font-medium">Status</th>
<th class="p-cell-padding font-label-sm text-label-sm text-on-surface-variant font-medium text-right">Total</th>
</tr>
</thead>
<tbody class="font-table-data text-table-data text-on-surface">
<tr class="border-b border-outline-variant/50 hover:bg-surface-container-low transition-colors">
<td class="p-cell-padding">#ORD-092</td>
<td class="p-cell-padding font-medium">Alice Smith</td>
<td class="p-cell-padding text-on-surface-variant">Today, 09:30 AM</td>
<td class="p-cell-padding">
<span class="inline-flex items-center px-1.5 py-0.5 rounded bg-surface-container text-on-surface-variant text-[10px] font-bold uppercase">Preparing</span>
</td>
<td class="p-cell-padding text-right">$125.50</td>
</tr>
<tr class="border-b border-outline-variant/50 hover:bg-surface-container-low transition-colors">
<td class="p-cell-padding">#ORD-091</td>
<td class="p-cell-padding font-medium">Bob Jones</td>
<td class="p-cell-padding text-on-surface-variant">Today, 08:15 AM</td>
<td class="p-cell-padding">
<span class="inline-flex items-center px-1.5 py-0.5 rounded bg-surface-variant text-on-surface text-[10px] font-bold uppercase">Ready</span>
</td>
<td class="p-cell-padding text-right">$45.00</td>
</tr>
</tbody>
</table>
</div>
</section>
</main>
</div>
</body></html>

BIN
inspiration/stitch_bakery_order_management_system/screen.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 172 KiB

9
server/static/fontawesome/css/fontawesome.min.css vendored
View file

File diff suppressed because one or more lines are too long

19
server/static/fontawesome/css/solid.css vendored
View file

@ -1,19 +0,0 @@
/*!
* Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
* Copyright 2024 Fonticons, Inc.
*/
:root, :host {
--fa-style-family-classic: 'Font Awesome 6 Free';
--fa-font-solid: normal 900 1em/1 'Font Awesome 6 Free'; }
@font-face {
font-family: 'Font Awesome 6 Free';
font-style: normal;
font-weight: 900;
font-display: block;
src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }
.fas,
.fa-solid {
font-weight: 900; }

BIN
server/static/fontawesome/webfonts/fa-solid-900.ttf
View file

Binary file not shown.

BIN
server/static/fontawesome/webfonts/fa-solid-900.woff2
View file

Binary file not shown.

121
server/static/order.js
View file

@ -1,55 +1,74 @@
function addCake(id, name, price, amount) {
const cake = document.querySelector(`[name="cake[${id}]"]`);
if (cake != null) {
cake.value = Number(cake.value) + 1;
let tr = cake.parentElement.parentElement.parentElement;
console.log(tr);
tr.querySelector(".cake-total").innerText =
`${price * Number(cake.value)}PLN`;
updateTotalPrice();
return;
}
let template = document.getElementById("basket_element_template");
let tr = template.content.querySelector("tr").cloneNode(true);
tr.querySelector(".cake-name").innerText = name;
tr.querySelector(".cake-price").innerText = `${price}PLN`;
tr.querySelector(".cake-total").innerText = `${price * amount}PLN`;
tr.querySelector("button").onclick = () => {
tr.remove();
};
let input = tr.querySelector("input");
input.onchange = () => {
if (input.value == 0) {
tr.remove();
function changeCake(id, name, price, delta) {
var input = document.querySelector('[name="cake[' + id + ']"]');
if (input != null) {
var qty = Number(input.value) + delta;
if (qty <= 0) {
var item = input.closest('.summary-item');
if (item) item.remove();
updateTotals();
updateCatalogueQty(id, 0);
return;
}
tr.querySelector(".cake-total").innerText = `${price * input.value}PLN`;
updateTotalPrice();
};
input.value = amount;
input.name = `cake[${id}]`;
document.querySelector("#basket_table").appendChild(tr);
updateTotalPrice();
}
function updateTotalPrice() {
document.querySelector("#total-price").innerText = `${totalPrice()}PLN`;
}
function totalPrice() {
let out = 0;
const cakes = document.querySelectorAll("#basket_table>tr");
cakes.forEach((e) => {
let priceString = e.querySelector(".cake-price").innerText;
let price = Number(priceString.substring(0, priceString.length - 3));
let amount = Number(e.querySelector("input").value);
out += price * amount;
console.log(out);
});
return out;
}
function toggleDetails(row) {
const detailsRow = row.nextElementSibling;
if (detailsRow.classList.contains("hidden")) {
detailsRow.classList.remove("hidden");
input.value = qty;
var item = input.closest('.summary-item');
item.querySelector('.cake-qty').innerText = qty;
item.querySelector('.cake-total').innerText = (price * qty) + ' PLN';
updateTotals();
updateCatalogueQty(id, qty);
return;
}
detailsRow.classList.add("hidden");
if (delta <= 0) return;
var item = document.createElement('div');
item.className = 'summary-item';
item.setAttribute('data-cake-id', id);
item.innerHTML =
'<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">1</span></div>' +
'</div>' +
'<div class="summary-item-price cake-total">' + price + ' 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="1">';
document.getElementById('basket_items').appendChild(item);
updateTotals();
updateCatalogueQty(id, 1);
}
function removeCake(btn) {
var item = btn.closest('.summary-item');
var id = item.getAttribute('data-cake-id');
item.remove();
updateTotals();
updateCatalogueQty(id, 0);
}
function updateTotals() {
var subtotal = 0;
var items = document.querySelectorAll('#basket_items .summary-item');
items.forEach(function(item) {
var priceText = item.querySelector('.cake-price').innerText;
var price = Number(priceText.split(' ')[0]);
var qty = Number(item.querySelector('.cake-qty').innerText);
subtotal += price * qty;
});
var paid = Number(document.querySelector('[name="paid"]')?.value || 0);
document.getElementById('subtotal-price').innerText = subtotal + ' PLN';
document.getElementById('paid-amount').innerText = paid + ' PLN';
document.getElementById('total-price').innerText = (subtotal - paid) + ' PLN';
}
function updateCatalogueQty(id, qty) {
var el = document.getElementById('qty-' + id);
if (el) el.innerText = qty;
}
function filterCatalogue(input) {
var query = input.value.toLowerCase();
var items = document.querySelectorAll('.catalogue-item');
items.forEach(function(item) {
var name = item.getAttribute('data-name').toLowerCase();
item.style.display = name.includes(query) ? '' : 'none';
});
}

1689
server/static/style.css
View file

File diff suppressed because it is too large Load diff

6
server/template.go
View file

@ -14,8 +14,12 @@ var templates embed.FS
func (h *Server) loadTemplates() {
h.tmpl = make(map[string]*template.Template)
funcs := template.FuncMap{
"add": func(a, b int) int { return a + b },
"mult": func(a, b int) int { return a * b },
}
for _, page := range h.routes {
tmpl, err := template.ParseFS(templates,
tmpl, err := template.New("").Funcs(funcs).ParseFS(templates,
"templates/layout/*.gohtml",
"templates/"+page.template+".gohtml",
)

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