443 lines
No EOL
25 KiB
HTML
443 lines
No EOL
25 KiB
HTML
<!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&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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 & 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> |