455 lines
No EOL
27 KiB
HTML
455 lines
No EOL
27 KiB
HTML
<!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 & 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&display=swap" rel="stylesheet"/>
|
|
<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"/>
|
|
<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 & 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> |