feat(ui): update manager interface and remove full stock display from /manage
Build and Push Fridger Container / Build & Push Fridger Image (push) Successful in 1m21s
Build and Push Fridger Container / Build & Push Fridger Image (push) Successful in 1m21s
This commit is contained in:
+26
-29
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Fridger - Current Stock & Tablet Manager</title>
|
||||
<title>Fridger - Current Stock & Manager</title>
|
||||
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
@@ -62,14 +62,14 @@
|
||||
<span>Current Stock</span>
|
||||
</button>
|
||||
|
||||
<!-- 2. Tablet Manage (/manage) -->
|
||||
<!-- 2. Manager (/manage) -->
|
||||
<button
|
||||
id="nav-manage-btn"
|
||||
onclick="navigateTo('/manage')"
|
||||
class="flex items-center justify-center gap-2 px-3.5 sm:px-6 py-2.5 sm:py-3 rounded-xl text-xs sm:text-sm font-bold transition-all text-slate-300 hover:text-white hover:bg-slate-800/80 active:scale-95 touch-manipulation min-h-[44px]"
|
||||
>
|
||||
<i data-lucide="tablet" class="w-4 h-4 sm:w-5 sm:h-5 text-teal-400"></i>
|
||||
<span>Tablet Manage</span>
|
||||
<i data-lucide="sliders-horizontal" class="w-4 h-4 sm:w-5 sm:h-5 text-teal-400"></i>
|
||||
<span>Manager</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -148,10 +148,10 @@
|
||||
🧊
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-white mb-1">No items in stock</h3>
|
||||
<p class="text-xs sm:text-sm text-slate-400 max-w-xs mx-auto mb-6">Use the tablet manage station to scan or add items.</p>
|
||||
<p class="text-xs sm:text-sm text-slate-400 max-w-xs mx-auto mb-6">Use Manager to scan or add items.</p>
|
||||
<button onclick="navigateTo('/manage')" class="px-6 py-3 rounded-xl bg-teal-500 hover:bg-teal-400 text-white text-sm font-bold flex items-center gap-2 shadow-lg shadow-teal-500/20 active:scale-95 touch-manipulation mx-auto">
|
||||
<i data-lucide="tablet" class="w-5 h-5"></i>
|
||||
<span>Go to Tablet Manage (/manage)</span>
|
||||
<i data-lucide="sliders-horizontal" class="w-5 h-5"></i>
|
||||
<span>Go to Manager (/manage)</span>
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
@@ -160,28 +160,25 @@
|
||||
|
||||
|
||||
<!-- ======================================================== -->
|
||||
<!-- 2. TABLET STATION: /manage -->
|
||||
<!-- 2. MANAGER: /manage -->
|
||||
<!-- ======================================================== -->
|
||||
<div id="manage-view-page" class="hidden flex-1 flex flex-col">
|
||||
|
||||
<main class="flex-1 max-w-4xl mx-auto px-3 sm:px-6 py-4 w-full space-y-4">
|
||||
<main class="flex-1 max-w-3xl mx-auto px-3 sm:px-6 py-4 sm:py-6 w-full space-y-4">
|
||||
|
||||
<!-- STEP 1: SCAN / SEARCH / ADD MANUALLY -->
|
||||
<div id="tablet-step-select" class="bg-slate-900 border border-slate-800 rounded-3xl p-4 sm:p-6 shadow-xl space-y-4">
|
||||
<div id="tablet-step-select" class="bg-slate-900 border border-slate-800 rounded-3xl p-5 sm:p-7 shadow-xl space-y-5">
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-xl bg-teal-500/20 text-teal-300 flex items-center justify-center text-sm font-black">1</div>
|
||||
<div>
|
||||
<h2 class="text-base sm:text-lg font-extrabold text-white">Tablet Scanner & Product Finder</h2>
|
||||
<p class="text-xs text-slate-400">Scan product barcode, search display, or add manually</p>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<div>
|
||||
<h2 class="text-lg sm:text-xl font-extrabold text-white">Manager</h2>
|
||||
<p class="text-xs sm:text-sm text-slate-400">Scan barcode, search product, or add manually</p>
|
||||
</div>
|
||||
|
||||
<!-- Add Manually Button (Prominent when scan or search don't work) -->
|
||||
<!-- Add Manually Button -->
|
||||
<button
|
||||
onclick="openItemModal()"
|
||||
class="px-3.5 sm:px-4 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-teal-300 border border-teal-500/30 text-xs sm:text-sm font-bold flex items-center gap-1.5 active:scale-95 touch-manipulation shadow-sm shrink-0"
|
||||
class="px-4 py-2.5 rounded-xl bg-slate-800 hover:bg-slate-700 text-teal-300 border border-teal-500/30 text-xs sm:text-sm font-bold flex items-center gap-1.5 active:scale-95 touch-manipulation shadow-sm shrink-0"
|
||||
>
|
||||
<i data-lucide="plus" class="w-4 h-4"></i>
|
||||
<span>Add Manually</span>
|
||||
@@ -193,7 +190,7 @@
|
||||
<!-- Big Camera Scanner Touch Launch -->
|
||||
<button
|
||||
onclick="openScannerModal()"
|
||||
class="sm:col-span-1 p-4 rounded-2xl bg-gradient-to-r from-teal-500 to-emerald-600 hover:from-teal-400 hover:to-emerald-500 text-white font-extrabold flex items-center justify-center gap-3 shadow-lg shadow-teal-500/25 active:scale-95 touch-manipulation min-h-[58px]"
|
||||
class="sm:col-span-1 p-4 rounded-2xl bg-gradient-to-r from-teal-500 to-emerald-600 hover:from-teal-400 hover:to-emerald-500 text-white font-extrabold flex items-center justify-center gap-3 shadow-lg shadow-teal-500/25 active:scale-95 touch-manipulation min-h-[60px]"
|
||||
>
|
||||
<i data-lucide="scan-barcode" class="w-6 h-6"></i>
|
||||
<span class="text-sm sm:text-base">Scan Barcode</span>
|
||||
@@ -205,18 +202,18 @@
|
||||
<input
|
||||
type="text"
|
||||
id="tablet-search-input"
|
||||
placeholder="Type product name, brand, or barcode..."
|
||||
placeholder="Search product name, brand, or barcode..."
|
||||
oninput="handleTabletSearch(this.value)"
|
||||
class="w-full bg-slate-950 border border-slate-800 focus:border-teal-500 rounded-2xl pl-12 pr-4 py-3.5 text-sm sm:text-base text-white placeholder-slate-500 outline-none transition min-h-[58px]"
|
||||
class="w-full bg-slate-950 border border-slate-800 focus:border-teal-500 rounded-2xl pl-12 pr-4 py-3.5 text-sm sm:text-base text-white placeholder-slate-500 outline-none transition min-h-[60px]"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Touch Display Product Picker -->
|
||||
<div class="space-y-1.5 pt-2">
|
||||
<label class="text-xs font-bold text-slate-400 uppercase tracking-wider block">Or tap a product from stock:</label>
|
||||
<div id="tablet-product-picker" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2.5 max-h-56 overflow-y-auto p-1 scrollbar-none">
|
||||
<!-- Populated dynamically -->
|
||||
<!-- Matching Search Results Container (Only shows when searching) -->
|
||||
<div id="tablet-search-results-container" class="hidden space-y-2 pt-3 border-t border-slate-800">
|
||||
<label class="text-xs font-bold text-teal-400 uppercase tracking-wider block">Search Results:</label>
|
||||
<div id="tablet-product-picker" class="grid grid-cols-1 sm:grid-cols-2 gap-2.5 max-h-64 overflow-y-auto p-1 scrollbar-none">
|
||||
<!-- Populated dynamically when user searches -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -474,7 +471,7 @@
|
||||
<div class="w-8 h-8 rounded-xl bg-teal-500/10 text-teal-400 flex items-center justify-center">
|
||||
<i data-lucide="scan-barcode" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<span class="font-extrabold text-white text-base">Tablet Barcode Scanner</span>
|
||||
<span class="font-extrabold text-white text-base">Barcode Scanner</span>
|
||||
</div>
|
||||
<button onclick="closeScannerModal()" class="text-slate-400 hover:text-white p-2 rounded-xl bg-slate-800/60 touch-manipulation">
|
||||
<i data-lucide="x" class="w-5 h-5"></i>
|
||||
@@ -492,7 +489,7 @@
|
||||
<!-- Status & Manual fallback -->
|
||||
<div class="p-4 bg-slate-900 space-y-3">
|
||||
<div id="scanner-status" class="text-xs sm:text-sm text-center text-slate-400 font-medium">
|
||||
Hold product barcode in front of tablet camera
|
||||
Hold product barcode in front of camera
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
|
||||
Reference in New Issue
Block a user