543 lines
32 KiB
HTML
543 lines
32 KiB
HTML
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>WarehouseTrack Pro - Inventory & Transportation Management</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
'roboto': ['Roboto', 'sans-serif'],
|
|
},
|
|
colors: {
|
|
primary: '#1976D2',
|
|
'primary-dark': '#1565C0',
|
|
secondary: '#388E3C',
|
|
warning: '#F57C00',
|
|
error: '#D32F2F',
|
|
surface: '#FFFFFF',
|
|
background: '#FAFAFA'
|
|
},
|
|
spacing: {
|
|
'18': '4.5rem',
|
|
'22': '5.5rem'
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
@media print {
|
|
.no-print { display: none !important; }
|
|
.print-only { display: block !important; }
|
|
body { background: white !important; }
|
|
}
|
|
.print-only { display: none; }
|
|
</style>
|
|
</head>
|
|
<body class="font-roboto bg-background text-gray-900 min-h-screen">
|
|
<!-- @COMPONENT: AppHeader -->
|
|
<header class="bg-primary text-white shadow-lg sticky top-0 z-50">
|
|
<div class="container mx-auto px-4 py-3">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center space-x-3">
|
|
<i class="fas fa-warehouse text-2xl"></i>
|
|
<h1 class="text-xl font-bold">WarehouseTrack Pro</h1>
|
|
</div>
|
|
<div class="flex items-center space-x-2">
|
|
<!-- @STATE: notificationCount:number = 3 -->
|
|
<div class="relative">
|
|
<button class="p-2 rounded-full hover:bg-primary-dark transition-colors" data-event="click:toggleNotifications">
|
|
<i class="fas fa-bell text-lg"></i>
|
|
<span class="absolute -top-1 -right-1 bg-error text-white text-xs rounded-full w-5 h-5 flex items-center justify-center" data-bind="notificationCount">3</span>
|
|
</button>
|
|
</div>
|
|
<button class="p-2 rounded-full hover:bg-primary-dark transition-colors" data-event="click:toggleMenu">
|
|
<i class="fas fa-user-circle text-lg"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- @END_COMPONENT: AppHeader -->
|
|
|
|
<!-- @COMPONENT: BottomNavigation -->
|
|
<nav class="no-print fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 shadow-lg md:hidden">
|
|
<div class="flex justify-around py-2">
|
|
<button class="flex flex-col items-center p-2 text-primary" data-event="click:navigateTo" data-route="dashboard">
|
|
<i class="fas fa-home text-xl mb-1"></i>
|
|
<span class="text-xs font-medium">Home</span>
|
|
</button>
|
|
<button class="flex flex-col items-center p-2 text-gray-500 hover:text-primary" data-event="click:navigateTo" data-route="inventory">
|
|
<i class="fas fa-boxes text-xl mb-1"></i>
|
|
<span class="text-xs font-medium">Inventory</span>
|
|
</button>
|
|
<button class="flex flex-col items-center p-2 text-gray-500 hover:text-primary" data-event="click:navigateTo" data-route="scan">
|
|
<i class="fas fa-qrcode text-xl mb-1"></i>
|
|
<span class="text-xs font-medium">Scan</span>
|
|
</button>
|
|
<button class="flex flex-col items-center p-2 text-gray-500 hover:text-primary" data-event="click:navigateTo" data-route="documents">
|
|
<i class="fas fa-file-alt text-xl mb-1"></i>
|
|
<span class="text-xs font-medium">Documents</span>
|
|
</button>
|
|
<button class="flex flex-col items-center p-2 text-gray-500 hover:text-primary" data-event="click:navigateTo" data-route="reports">
|
|
<i class="fas fa-chart-bar text-xl mb-1"></i>
|
|
<span class="text-xs font-medium">Reports</span>
|
|
</button>
|
|
</div>
|
|
</nav>
|
|
<!-- @END_COMPONENT: BottomNavigation -->
|
|
|
|
<!-- @COMPONENT: MainContent -->
|
|
<main class="container mx-auto px-4 py-6 pb-20 md:pb-6">
|
|
<!-- @COMPONENT: AlertBanner -->
|
|
<div class="mb-6 bg-warning text-white p-4 rounded-lg shadow-md flex items-center justify-between" data-mock="true">
|
|
<div class="flex items-center space-x-3">
|
|
<i class="fas fa-exclamation-triangle text-xl"></i>
|
|
<div>
|
|
<p class="font-semibold">Low Stock Alert</p>
|
|
<p class="text-sm opacity-90">5 items are running low on inventory</p>
|
|
</div>
|
|
</div>
|
|
<button class="p-1 hover:bg-orange-600 rounded" data-event="click:dismissAlert">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
<!-- @END_COMPONENT: AlertBanner -->
|
|
|
|
<!-- @COMPONENT: QuickActions -->
|
|
<section class="mb-8">
|
|
<h2 class="text-2xl font-bold mb-4 text-gray-800">Quick Actions</h2>
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
|
|
<button class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-200 border border-gray-100 touch-manipulation min-h-[120px]" data-event="click:openScanner">
|
|
<div class="flex flex-col items-center space-y-3">
|
|
<i class="fas fa-qrcode text-3xl text-primary"></i>
|
|
<span class="font-semibold text-gray-800">Scan Product</span>
|
|
</div>
|
|
</button>
|
|
|
|
<button class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-200 border border-gray-100 touch-manipulation min-h-[120px]" data-event="click:addStock">
|
|
<div class="flex flex-col items-center space-y-3">
|
|
<i class="fas fa-plus-circle text-3xl text-secondary"></i>
|
|
<span class="font-semibold text-gray-800">Add Stock</span>
|
|
</div>
|
|
</button>
|
|
|
|
<button class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-200 border border-gray-100 touch-manipulation min-h-[120px]" data-event="click:createDocument">
|
|
<div class="flex flex-col items-center space-y-3">
|
|
<i class="fas fa-file-plus text-3xl text-primary"></i>
|
|
<span class="font-semibold text-gray-800">New Document</span>
|
|
</div>
|
|
</button>
|
|
|
|
<button class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all duration-200 border border-gray-100 touch-manipulation min-h-[120px]" data-event="click:viewReports">
|
|
<div class="flex flex-col items-center space-y-3">
|
|
<i class="fas fa-chart-line text-3xl text-secondary"></i>
|
|
<span class="font-semibold text-gray-800">View Reports</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
<!-- @END_COMPONENT: QuickActions -->
|
|
|
|
<!-- @COMPONENT: StockOverview -->
|
|
<section class="mb-8">
|
|
<div class="bg-white rounded-xl shadow-md p-6">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-2xl font-bold text-gray-800">Stock Overview</h2>
|
|
<button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark transition-colors font-medium" data-event="click:refreshStock">
|
|
<i class="fas fa-sync-alt mr-2"></i>Refresh
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
|
<div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-blue-600 text-sm font-medium uppercase tracking-wide">Total Items</p>
|
|
<p class="text-2xl font-bold text-blue-800" data-bind="totalItems" data-mock="true">1,247</p>
|
|
</div>
|
|
<i class="fas fa-boxes text-blue-400 text-2xl"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-green-50 p-4 rounded-lg border border-green-100">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-green-600 text-sm font-medium uppercase tracking-wide">In Stock</p>
|
|
<p class="text-2xl font-bold text-green-800" data-bind="inStockItems" data-mock="true">1,089</p>
|
|
</div>
|
|
<i class="fas fa-check-circle text-green-400 text-2xl"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-orange-50 p-4 rounded-lg border border-orange-100">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-orange-600 text-sm font-medium uppercase tracking-wide">Low Stock</p>
|
|
<p class="text-2xl font-bold text-orange-800" data-bind="lowStockItems" data-mock="true">23</p>
|
|
</div>
|
|
<i class="fas fa-exclamation-triangle text-orange-400 text-2xl"></i>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-red-50 p-4 rounded-lg border border-red-100">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-red-600 text-sm font-medium uppercase tracking-wide">Out of Stock</p>
|
|
<p class="text-2xl font-bold text-red-800" data-bind="outOfStockItems" data-mock="true">8</p>
|
|
</div>
|
|
<i class="fas fa-times-circle text-red-400 text-2xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- @COMPONENT: ProductSearchBar -->
|
|
<div class="mb-6">
|
|
<div class="relative">
|
|
<input type="text" placeholder="Search products by name, SKU, or barcode..."
|
|
class="w-full pl-12 pr-4 py-4 text-lg border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
|
|
data-event="input:searchProducts" data-mock="true">
|
|
<i class="fas fa-search absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400 text-lg"></i>
|
|
</div>
|
|
</div>
|
|
<!-- @END_COMPONENT: ProductSearchBar -->
|
|
</div>
|
|
</section>
|
|
<!-- @END_COMPONENT: StockOverview -->
|
|
|
|
<!-- @COMPONENT: RecentActivity -->
|
|
<section class="mb-8">
|
|
<div class="bg-white rounded-xl shadow-md p-6">
|
|
<h2 class="text-2xl font-bold mb-4 text-gray-800">Recent Activity</h2>
|
|
|
|
<!-- @MAP: recentActivities.map(activity => ( -->
|
|
<div class="space-y-4" data-mock="true">
|
|
<div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
|
|
<div class="w-10 h-10 bg-secondary text-white rounded-full flex items-center justify-center">
|
|
<i class="fas fa-plus text-sm"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="font-semibold text-gray-800">Stock Added</p>
|
|
<p class="text-sm text-gray-600">50 units of <span class="font-medium">Safety Helmets (SKU: SH-001)</span></p>
|
|
<p class="text-xs text-gray-500">2 minutes ago</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
|
|
<div class="w-10 h-10 bg-primary text-white rounded-full flex items-center justify-center">
|
|
<i class="fas fa-truck text-sm"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="font-semibold text-gray-800">Shipment Created</p>
|
|
<p class="text-sm text-gray-600">Delivery note #DN-2024-001 generated</p>
|
|
<p class="text-xs text-gray-500">15 minutes ago</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-4 p-4 bg-gray-50 rounded-lg">
|
|
<div class="w-10 h-10 bg-orange-500 text-white rounded-full flex items-center justify-center">
|
|
<i class="fas fa-exclamation text-sm"></i>
|
|
</div>
|
|
<div class="flex-1">
|
|
<p class="font-semibold text-gray-800">Low Stock Alert</p>
|
|
<p class="text-sm text-gray-600"><span class="font-medium">Work Gloves (SKU: WG-003)</span> below minimum threshold</p>
|
|
<p class="text-xs text-gray-500">1 hour ago</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- @END_MAP )) -->
|
|
</div>
|
|
</section>
|
|
<!-- @END_COMPONENT: RecentActivity -->
|
|
|
|
<!-- @COMPONENT: DocumentTemplates -->
|
|
<section class="mb-8">
|
|
<div class="bg-white rounded-xl shadow-md p-6">
|
|
<h2 class="text-2xl font-bold mb-4 text-gray-800">Document Templates</h2>
|
|
<p class="text-gray-600 mb-6">Generate transportation and inventory documents quickly using pre-configured templates</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<button class="text-left p-4 border border-gray-200 rounded-lg hover:border-primary hover:bg-blue-50 transition-all duration-200 touch-manipulation" data-event="click:createDeliveryNote">
|
|
<div class="flex items-center space-x-3 mb-2">
|
|
<i class="fas fa-truck text-primary text-xl"></i>
|
|
<h3 class="font-semibold text-gray-800">Delivery Note</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600">Create delivery documentation for outbound shipments</p>
|
|
</button>
|
|
|
|
<button class="text-left p-4 border border-gray-200 rounded-lg hover:border-primary hover:bg-blue-50 transition-all duration-200 touch-manipulation" data-event="click:createPackingList">
|
|
<div class="flex items-center space-x-3 mb-2">
|
|
<i class="fas fa-list text-primary text-xl"></i>
|
|
<h3 class="font-semibold text-gray-800">Packing List</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600">Generate detailed packing lists for shipments</p>
|
|
</button>
|
|
|
|
<button class="text-left p-4 border border-gray-200 rounded-lg hover:border-primary hover:bg-blue-50 transition-all duration-200 touch-manipulation" data-event="click:createShippingLabel">
|
|
<div class="flex items-center space-x-3 mb-2">
|
|
<i class="fas fa-tag text-primary text-xl"></i>
|
|
<h3 class="font-semibold text-gray-800">Shipping Label</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600">Print shipping labels with tracking information</p>
|
|
</button>
|
|
|
|
<button class="text-left p-4 border border-gray-200 rounded-lg hover:border-primary hover:bg-blue-50 transition-all duration-200 touch-manipulation" data-event="click:createGoodsReceipt">
|
|
<div class="flex items-center space-x-3 mb-2">
|
|
<i class="fas fa-clipboard-check text-primary text-xl"></i>
|
|
<h3 class="font-semibold text-gray-800">Goods Receipt</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600">Document incoming inventory and deliveries</p>
|
|
</button>
|
|
|
|
<button class="text-left p-4 border border-gray-200 rounded-lg hover:border-primary hover:bg-blue-50 transition-all duration-200 touch-manipulation" data-event="click:createStockReport">
|
|
<div class="flex items-center space-x-3 mb-2">
|
|
<i class="fas fa-chart-bar text-primary text-xl"></i>
|
|
<h3 class="font-semibold text-gray-800">Stock Report</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600">Generate comprehensive inventory reports</p>
|
|
</button>
|
|
|
|
<button class="text-left p-4 border border-gray-200 rounded-lg hover:border-primary hover:bg-blue-50 transition-all duration-200 touch-manipulation" data-event="click:createDispatchNote">
|
|
<div class="flex items-center space-x-3 mb-2">
|
|
<i class="fas fa-shipping-fast text-primary text-xl"></i>
|
|
<h3 class="font-semibold text-gray-800">Dispatch Note</h3>
|
|
</div>
|
|
<p class="text-sm text-gray-600">Create dispatch documentation for outbound goods</p>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
<!-- @END_COMPONENT: DocumentTemplates -->
|
|
|
|
<!-- @COMPONENT: InventoryTable -->
|
|
<section class="mb-8">
|
|
<div class="bg-white rounded-xl shadow-md p-6">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h2 class="text-2xl font-bold text-gray-800">Current Inventory</h2>
|
|
<div class="flex space-x-2">
|
|
<button class="bg-secondary text-white px-4 py-2 rounded-lg hover:bg-green-600 transition-colors font-medium" data-event="click:exportInventory">
|
|
<i class="fas fa-download mr-2"></i>Export
|
|
</button>
|
|
<button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary-dark transition-colors font-medium" data-event="click:addNewItem">
|
|
<i class="fas fa-plus mr-2"></i>Add Item
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full border-collapse">
|
|
<thead>
|
|
<tr class="bg-gray-50 border-b border-gray-200">
|
|
<th class="text-left p-4 font-semibold text-gray-700">SKU</th>
|
|
<th class="text-left p-4 font-semibold text-gray-700">Product Name</th>
|
|
<th class="text-left p-4 font-semibold text-gray-700">Current Stock</th>
|
|
<th class="text-left p-4 font-semibold text-gray-700">Min Threshold</th>
|
|
<th class="text-left p-4 font-semibold text-gray-700">Status</th>
|
|
<th class="text-left p-4 font-semibold text-gray-700">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody data-mock="true">
|
|
<!-- @MAP: inventoryItems.map(item => ( -->
|
|
<tr class="border-b border-gray-100 hover:bg-gray-50">
|
|
<td class="p-4 font-mono text-sm">SH-001</td>
|
|
<td class="p-4 font-medium">Safety Helmets - White</td>
|
|
<td class="p-4">
|
|
<span class="text-lg font-semibold">125</span>
|
|
<span class="text-sm text-gray-500 ml-1">units</span>
|
|
</td>
|
|
<td class="p-4 text-gray-600">20</td>
|
|
<td class="p-4">
|
|
<span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium">In Stock</span>
|
|
</td>
|
|
<td class="p-4">
|
|
<div class="flex space-x-2">
|
|
<button class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" data-event="click:editItem" title="Edit">
|
|
<i class="fas fa-edit"></i>
|
|
</button>
|
|
<button class="p-2 text-green-600 hover:bg-green-50 rounded-lg transition-colors" data-event="click:addStock" title="Add Stock">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
<button class="p-2 text-orange-600 hover:bg-orange-50 rounded-lg transition-colors" data-event="click:viewHistory" title="View History">
|
|
<i class="fas fa-history"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="border-b border-gray-100 hover:bg-gray-50">
|
|
<td class="p-4 font-mono text-sm">WG-003</td>
|
|
<td class="p-4 font-medium">Work Gloves - Medium</td>
|
|
<td class="p-4">
|
|
<span class="text-lg font-semibold">8</span>
|
|
<span class="text-sm text-gray-500 ml-1">pairs</span>
|
|
</td>
|
|
<td class="p-4 text-gray-600">15</td>
|
|
<td class="p-4">
|
|
<span class="px-3 py-1 bg-orange-100 text-orange-800 rounded-full text-sm font-medium">Low Stock</span>
|
|
</td>
|
|
<td class="p-4">
|
|
<div class="flex space-x-2">
|
|
<button class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" data-event="click:editItem" title="Edit">
|
|
<i class="fas fa-edit"></i>
|
|
</button>
|
|
<button class="p-2 text-green-600 hover:bg-green-50 rounded-lg transition-colors" data-event="click:addStock" title="Add Stock">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
<button class="p-2 text-orange-600 hover:bg-orange-50 rounded-lg transition-colors" data-event="click:viewHistory" title="View History">
|
|
<i class="fas fa-history"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr class="border-b border-gray-100 hover:bg-gray-50">
|
|
<td class="p-4 font-mono text-sm">HV-005</td>
|
|
<td class="p-4 font-medium">Hi-Vis Vests - Large</td>
|
|
<td class="p-4">
|
|
<span class="text-lg font-semibold">0</span>
|
|
<span class="text-sm text-gray-500 ml-1">units</span>
|
|
</td>
|
|
<td class="p-4 text-gray-600">10</td>
|
|
<td class="p-4">
|
|
<span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm font-medium">Out of Stock</span>
|
|
</td>
|
|
<td class="p-4">
|
|
<div class="flex space-x-2">
|
|
<button class="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" data-event="click:editItem" title="Edit">
|
|
<i class="fas fa-edit"></i>
|
|
</button>
|
|
<button class="p-2 text-green-600 hover:bg-green-50 rounded-lg transition-colors" data-event="click:addStock" title="Add Stock">
|
|
<i class="fas fa-plus"></i>
|
|
</button>
|
|
<button class="p-2 text-orange-600 hover:bg-orange-50 rounded-lg transition-colors" data-event="click:viewHistory" title="View History">
|
|
<i class="fas fa-history"></i>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- @END_MAP )) -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="flex items-center justify-between mt-6 pt-4 border-t border-gray-200">
|
|
<p class="text-sm text-gray-600">Showing 1-3 of 1,247 items</p>
|
|
<div class="flex space-x-2">
|
|
<button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors" data-event="click:previousPage">
|
|
<i class="fas fa-chevron-left mr-2"></i>Previous
|
|
</button>
|
|
<button class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors" data-event="click:nextPage">
|
|
Next<i class="fas fa-chevron-right ml-2"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- @END_COMPONENT: InventoryTable -->
|
|
|
|
<!-- @COMPONENT: Scanner Modal (Hidden by default) -->
|
|
<div id="scannerModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4" data-mock="true">
|
|
<div class="bg-white rounded-xl p-6 w-full max-w-md">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-xl font-bold">Scan Product</h3>
|
|
<button class="p-2 hover:bg-gray-100 rounded-lg" data-event="click:closeScannerModal">
|
|
<i class="fas fa-times text-xl"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- @FUNCTIONALITY: This should implement camera-based barcode scanning -->
|
|
<div class="bg-gray-100 rounded-lg p-8 mb-4 text-center">
|
|
<i class="fas fa-camera text-4xl text-gray-400 mb-4"></i>
|
|
<p class="text-gray-600">Position barcode within frame</p>
|
|
<p class="text-sm text-gray-500 mt-2">Camera will activate automatically</p>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<button class="w-full bg-primary text-white py-3 rounded-lg font-medium hover:bg-primary-dark transition-colors" data-event="click:startScanning">
|
|
<i class="fas fa-camera mr-2"></i>Start Camera
|
|
</button>
|
|
<button class="w-full border border-gray-300 py-3 rounded-lg font-medium hover:bg-gray-50 transition-colors" data-event="click:manualEntry">
|
|
<i class="fas fa-keyboard mr-2"></i>Manual Entry
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- @END_COMPONENT: Scanner Modal -->
|
|
</main>
|
|
<!-- @END_COMPONENT: MainContent -->
|
|
|
|
<!-- @COMPONENT: FloatingActionButton (Mobile Only) -->
|
|
<button class="no-print fixed bottom-20 right-4 w-14 h-14 bg-primary text-white rounded-full shadow-lg hover:bg-primary-dark transition-all duration-200 flex items-center justify-center md:hidden" data-event="click:quickAdd">
|
|
<i class="fas fa-plus text-xl"></i>
|
|
</button>
|
|
<!-- @END_COMPONENT: FloatingActionButton -->
|
|
|
|
<script>
|
|
(function() {
|
|
// TODO: Implement business logic, API calls, or state management
|
|
|
|
// Demo functionality for showing scanner modal
|
|
const scannerButtons = document.querySelectorAll('[data-event*="openScanner"]');
|
|
const scannerModal = document.getElementById('scannerModal');
|
|
const closeModalButtons = document.querySelectorAll('[data-event*="closeScannerModal"]');
|
|
|
|
scannerButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
scannerModal.classList.remove('hidden');
|
|
});
|
|
});
|
|
|
|
closeModalButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
scannerModal.classList.add('hidden');
|
|
});
|
|
});
|
|
|
|
// Close modal when clicking outside
|
|
scannerModal.addEventListener('click', (e) => {
|
|
if (e.target === scannerModal) {
|
|
scannerModal.classList.add('hidden');
|
|
}
|
|
});
|
|
|
|
// Demo navigation for bottom nav
|
|
const navButtons = document.querySelectorAll('[data-route]');
|
|
navButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
// Remove active class from all buttons
|
|
navButtons.forEach(btn => {
|
|
btn.classList.remove('text-primary');
|
|
btn.classList.add('text-gray-500');
|
|
});
|
|
|
|
// Add active class to clicked button
|
|
button.classList.remove('text-gray-500');
|
|
button.classList.add('text-primary');
|
|
});
|
|
});
|
|
|
|
// Demo alert dismissal
|
|
const alertDismissButtons = document.querySelectorAll('[data-event*="dismissAlert"]');
|
|
alertDismissButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
button.closest('.bg-warning').style.display = 'none';
|
|
});
|
|
});
|
|
|
|
// Demo print functionality
|
|
window.addEventListener('beforeprint', () => {
|
|
document.body.classList.add('printing');
|
|
});
|
|
|
|
window.addEventListener('afterprint', () => {
|
|
document.body.classList.remove('printing');
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html> |