You are a seasoned software developer specializing in offline retail management systems. Please outline a detailed step-by-step process to build "Askari Store Manager," a Windows-based .exe application with Pakistani Army theme, including sales tracking, inventory management, bilingual support, barcode generation/scanning (offline mobile integration), and local data storage—ensuring a polished UI.also add a feature of scanning barcode with laptop webcam and also and genrate barcodes and add barcode make optional and add logo that i give you and aslo the theme of software is on pakistani army and make this sotware for offline use and add some other features yourself for enchances software.add that logo that i give you..also add connect barcode scanner device and also give setting option and the theme should be on pakistani army. and ui should be best and imprescuve. also add bill printting optional and also add a billing option pos and add bill printing to pos. allow sidebar buuttons to shift to other option and ui should be best and green like pakistani flag. its a local store not army - Initial Deployment
5936595 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Askari Store Manager</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'army-green': '#4B5320', | |
| 'pak-green': '#01411C', | |
| 'pak-white': '#FFFFFF', | |
| 'pak-red': '#C1272D', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Jomhuria&family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background-color: #f0f0f0; | |
| overflow-x: hidden; | |
| } | |
| .logo-font { | |
| font-family: 'Jomhuria', cursive; | |
| } | |
| .sidebar-item:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| transform: translateX(5px); | |
| } | |
| .sidebar-item.active { | |
| background-color: rgba(255, 255, 255, 0.2); | |
| border-left: 4px solid #C1272D; | |
| } | |
| .barcode-scanner { | |
| border: 2px dashed #4B5320; | |
| } | |
| .product-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .print-btn:hover { | |
| background-color: #01411C; | |
| } | |
| .tab-active { | |
| border-bottom: 3px solid #C1272D; | |
| color: #01411C; | |
| font-weight: 600; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #4B5320; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #3a4119; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 bg-pak-green text-pak-white"> | |
| <div class="flex items-center justify-center h-20 px-4 border-b border-army-green"> | |
| <div class="flex items-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/3/32/Pakistan_Army_Logo.svg" alt="Pak Army Logo" class="h-12 w-12 mr-2"> | |
| <span class="logo-font text-3xl text-white">Askari Store</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow overflow-y-auto"> | |
| <div class="px-4 py-6"> | |
| <div class="flex items-center px-4 py-3 rounded-lg sidebar-item active" id="dashboardBtn"> | |
| <i class="fas fa-tachometer-alt mr-3"></i> | |
| <span>Dashboard</span> | |
| </div> | |
| <div class="flex items-center px-4 py-3 rounded-lg sidebar-item mt-2" id="posBtn"> | |
| <i class="fas fa-cash-register mr-3"></i> | |
| <span>POS System</span> | |
| </div> | |
| <div class="flex items-center px-4 py-3 rounded-lg sidebar-item mt-2" id="inventoryBtn"> | |
| <i class="fas fa-boxes mr-3"></i> | |
| <span>Inventory</span> | |
| </div> | |
| <div class="flex items-center px-4 py-3 rounded-lg sidebar-item mt-2" id="salesBtn"> | |
| <i class="fas fa-chart-line mr-3"></i> | |
| <span>Sales Reports</span> | |
| </div> | |
| <div class="flex items-center px-4 py-3 rounded-lg sidebar-item mt-2" id="customersBtn"> | |
| <i class="fas fa-users mr-3"></i> | |
| <span>Customers</span> | |
| </div> | |
| <div class="flex items-center px-4 py-3 rounded-lg sidebar-item mt-2" id="barcodeBtn"> | |
| <i class="fas fa-barcode mr-3"></i> | |
| <span>Barcode Tools</span> | |
| </div> | |
| <div class="flex items-center px-4 py-3 rounded-lg sidebar-item mt-2" id="settingsBtn"> | |
| <i class="fas fa-cog mr-3"></i> | |
| <span>Settings</span> | |
| </div> | |
| </div> | |
| <div class="mt-auto px-4 py-6"> | |
| <div class="bg-army-green rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-white">Admin User</p> | |
| <p class="text-xs font-medium text-gray-300">Store Manager</p> | |
| </div> | |
| </div> | |
| <button class="mt-3 w-full bg-pak-red text-white py-2 px-4 rounded-md text-sm font-medium hover:bg-red-700"> | |
| <i class="fas fa-sign-out-alt mr-2"></i> Logout | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex flex-col flex-1 overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <div class="flex items-center justify-between h-16 bg-white border-b border-gray-200 px-4"> | |
| <div class="flex items-center md:hidden"> | |
| <button class="text-gray-500 focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-full focus:outline-none focus:ring-2 focus:ring-army-green focus:border-transparent w-64"> | |
| <div class="absolute left-3 top-2.5 text-gray-400"> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none mr-4"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <div class="flex items-center"> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt=""> | |
| <span class="ml-2 text-sm font-medium hidden md:block">Admin User</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Content Area --> | |
| <div class="flex-1 overflow-auto p-4 bg-gray-50"> | |
| <!-- Dashboard Content --> | |
| <div id="dashboardContent" class="content-section"> | |
| <div class="mb-6"> | |
| <h1 class="text-2xl font-bold text-army-green">Dashboard Overview</h1> | |
| <p class="text-gray-600">Welcome to Askari Store Management System</p> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="bg-white rounded-lg shadow p-6 border-l-4 border-pak-red"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100 text-pak-green mr-4"> | |
| <i class="fas fa-rupee-sign text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Today's Sales</p> | |
| <p class="text-2xl font-semibold text-gray-800">Rs. 24,560</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 border-l-4 border-pak-green"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-shopping-cart text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Today's Orders</p> | |
| <p class="text-2xl font-semibold text-gray-800">42</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 border-l-4 border-army-green"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4"> | |
| <i class="fas fa-box-open text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Low Stock Items</p> | |
| <p class="text-2xl font-semibold text-gray-800">15</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 border-l-4 border-yellow-500"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4"> | |
| <i class="fas fa-users text-xl"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">New Customers</p> | |
| <p class="text-2xl font-semibold text-gray-800">8</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Sales and Inventory Alerts --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h3 class="text-lg font-medium text-army-green">Recent Sales</h3> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-50"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-900">#ORD-2023-001</p> | |
| <p class="text-sm text-gray-500">5 items</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-medium text-gray-900">Rs. 1,250</p> | |
| <p class="text-xs text-gray-500">10 min ago</p> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-50"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-900">#ORD-2023-002</p> | |
| <p class="text-sm text-gray-500">3 items</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-medium text-gray-900">Rs. 850</p> | |
| <p class="text-xs text-gray-500">25 min ago</p> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-50"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-900">#ORD-2023-003</p> | |
| <p class="text-sm text-gray-500">7 items</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-medium text-gray-900">Rs. 2,150</p> | |
| <p class="text-xs text-gray-500">1 hour ago</p> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 flex items-center justify-between hover:bg-gray-50"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-900">#ORD-2023-004</p> | |
| <p class="text-sm text-gray-500">2 items</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-medium text-gray-900">Rs. 650</p> | |
| <p class="text-xs text-gray-500">2 hours ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-3 bg-gray-50 text-right"> | |
| <a href="#" class="text-sm font-medium text-pak-green hover:text-pak-red">View all sales</a> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h3 class="text-lg font-medium text-army-green">Inventory Alerts</h3> | |
| </div> | |
| <div class="divide-y divide-gray-200"> | |
| <div class="px-6 py-4 flex items-center hover:bg-gray-50"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded" src="https://via.placeholder.com/40" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-900">Lays Chips (10g)</p> | |
| <p class="text-sm text-gray-500">Stock: 5 (Reorder at 10)</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Low</span> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 flex items-center hover:bg-gray-50"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded" src="https://via.placeholder.com/40" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-900">Coca Cola (1.5L)</p> | |
| <p class="text-sm text-gray-500">Stock: 8 (Reorder at 15)</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Medium</span> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 flex items-center hover:bg-gray-50"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded" src="https://via.placeholder.com/40" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-900">Dairy Milk Chocolate</p> | |
| <p class="text-sm text-gray-500">Stock: 3 (Reorder at 20)</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Low</span> | |
| </div> | |
| </div> | |
| <div class="px-6 py-4 flex items-center hover:bg-gray-50"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded" src="https://via.placeholder.com/40" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <p class="text-sm font-medium text-gray-900">Pepsi (250ml)</p> | |
| <p class="text-sm text-gray-500">Stock: 12 (Reorder at 25)</p> | |
| </div> | |
| <div class="ml-auto"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Medium</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 py-3 bg-gray-50 text-right"> | |
| <a href="#" class="text-sm font-medium text-pak-green hover:text-pak-red">View all inventory</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- POS System Content --> | |
| <div id="posContent" class="content-section hidden"> | |
| <div class="mb-6"> | |
| <h1 class="text-2xl font-bold text-army-green">Point of Sale (POS)</h1> | |
| <p class="text-gray-600">Process customer orders and generate bills</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white rounded-lg shadow p-4 mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="flex space-x-2"> | |
| <button class="px-4 py-2 bg-pak-green text-white rounded-md hover:bg-green-800">New Order</button> | |
| <button class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100">Hold Orders</button> | |
| </div> | |
| <div class="relative"> | |
| <input type="text" placeholder="Scan/Search product..." class="pl-10 pr-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-army-green focus:border-transparent w-64"> | |
| <div class="absolute left-3 top-2.5 text-gray-400"> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"> | |
| <div class="product-card bg-white border border-gray-200 rounded-lg p-3 cursor-pointer hover:shadow-md transition duration-300"> | |
| <div class="flex justify-center mb-2"> | |
| <img src="https://via.placeholder.com/80" alt="Product" class="h-20 w-20 object-contain"> | |
| </div> | |
| <p class="text-sm font-medium text-gray-900 truncate">Lays Chips (10g)</p> | |
| <p class="text-xs text-gray-500">Stock: 15</p> | |
| <p class="text-sm font-bold text-pak-green mt-1">Rs. 20</p> | |
| </div> | |
| <div class="product-card bg-white border border-gray-200 rounded-lg p-3 cursor-pointer hover:shadow-md transition duration-300"> | |
| <div class="flex justify-center mb-2"> | |
| <img src="https://via.placeholder.com/80" alt="Product" class="h-20 w-20 object-contain"> | |
| </div> | |
| <p class="text-sm font-medium text-gray-900 truncate">Coca Cola (1.5L)</p> | |
| <p class="text-xs text-gray-500">Stock: 8</p> | |
| <p class="text-sm font-bold text-pak-green mt-1">Rs. 120</p> | |
| </div> | |
| <div class="product-card bg-white border border-gray-200 rounded-lg p-3 cursor-pointer hover:shadow-md transition duration-300"> | |
| <div class="flex justify-center mb-2"> | |
| <img src="https://via.placeholder.com/80" alt="Product" class="h-20 w-20 object-contain"> | |
| </div> | |
| <p class="text-sm font-medium text-gray-900 truncate">Dairy Milk Chocolate</p> | |
| <p class="text-xs text-gray-500">Stock: 3</p> | |
| <p class="text-sm font-bold text-pak-green mt-1">Rs. 50</p> | |
| </div> | |
| <div class="product-card bg-white border border-gray-200 rounded-lg p-3 cursor-pointer hover:shadow-md transition duration-300"> | |
| <div class="flex justify-center mb-2"> | |
| <img src="https://via.placeholder.com/80" alt="Product" class="h-20 w-20 object-contain"> | |
| </div> | |
| <p class="text-sm font-medium text-gray-900 truncate">Pepsi (250ml)</p> | |
| <p class="text-xs text-gray-500">Stock: 12</p> | |
| <p class="text-sm font-bold text-pak-green mt-1">Rs. 40</p> | |
| </div> | |
| <div class="product-card bg-white border border-gray-200 rounded-lg p-3 cursor-pointer hover:shadow-md transition duration-300"> | |
| <div class="flex justify-center mb-2"> | |
| <img src="https://via.placeholder.com/80" alt="Product" class="h-20 w-20 object-contain"> | |
| </div> | |
| <p class="text-sm font-medium text-gray-900 truncate">Sprite (1L)</p> | |
| <p class="text-xs text-gray-500">Stock: 10</p> | |
| <p class="text-sm font-bold text-pak-green mt-1">Rs. 90</p> | |
| </div> | |
| <div class="product-card bg-white border border-gray-200 rounded-lg p-3 cursor-pointer hover:shadow-md transition duration-300"> | |
| <div class="flex justify-center mb-2"> | |
| <img src="https://via.placeholder.com/80" alt="Product" class="h-20 w-20 object-contain"> | |
| </div> | |
| <p class="text-sm font-medium text-gray-900 truncate">Mineral Water (500ml)</p> | |
| <p class="text-xs text-gray-500">Stock: 25</p> | |
| <p class="text-sm font-bold text-pak-green mt-1">Rs. 30</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:col-span-1"> | |
| <div class="bg-white rounded-lg shadow p-4 sticky top-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-medium text-army-green">Current Order</h3> | |
| <span class="text-sm bg-pak-green text-white px-2 py-1 rounded">#ORD-2023-005</span> | |
| </div> | |
| <div class="border-b border-gray-200 pb-4 mb-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <div> | |
| <p class="text-sm font-medium">Customer</p> | |
| <select class="mt-1 block w-full border border-gray-300 rounded-md py-1 px-2 focus:outline-none focus:ring-2 focus:ring-army-green focus:border-transparent text-sm"> | |
| <option>Walk-in Customer</option> | |
| <option>Regular Customer</option> | |
| <option>New Customer</option> | |
| </select> | |
| </div> | |
| <button class="text-pak-green hover:text-pak-red"> | |
| <i class="fas fa-plus-circle"></i> | |
| </button> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="text" placeholder="Customer Name" class="flex-1 border border-gray-300 rounded-md py-1 px-2 focus:outline-none focus:ring-2 focus:ring-army-green focus:border-transparent text-sm"> | |
| </div> | |
| </div> | |
| <div class="max-h-64 overflow-y-auto mb-4"> | |
| <div class="flex justify-between items-center py-2 border-b border-gray-200"> | |
| <div> | |
| <p class="text-sm font-medium">Lays Chips (10g)</p> | |
| <p class="text-xs text-gray-500">Rs. 20 x 2</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-sm font-medium mr-4">Rs. 40</span> | |
| <button class="text-red-500 hover:text-red-700"> | |
| <i class="fas fa-trash-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center py-2 border-b border-gray-200"> | |
| <div> | |
| <p class="text-sm font-medium">Coca Cola (1.5L)</p> | |
| <p class="text-xs text-gray-500">Rs. 120 x 1</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-sm font-medium mr-4">Rs. 120</span> | |
| <button class="text-red-500 hover:text-red-700"> | |
| <i class="fas fa-trash-alt"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 pt-4 mb-4"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm font-medium">Subtotal</span> | |
| <span class="text-sm font-medium">Rs. 160</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm font-medium">Tax (5%)</span> | |
| <span class="text-sm font-medium">Rs. 8</span> | |
| </div> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm font-medium">Discount</span> | |
| <span class="text-sm font-medium">Rs. 0</span> | |
| </div> | |
| <div class="flex justify-between font-bold text-lg"> | |
| <span>Total</span> | |
| <span>Rs. 168</span> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-2 gap-2"> | |
| <button class="bg-pak-red text-white py-2 px-4 rounded-md hover:bg-red-700"> | |
| <i class="fas fa-print mr-2"></i> Print | |
| </button> | |
| <button class="bg-pak-green text-white py-2 px-4 rounded-md hover:bg-green-800"> | |
| <i class="fas fa-check-circle mr-2"></i> Complete | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Inventory Content --> | |
| <div id="inventoryContent" class="content-section hidden"> | |
| <div class="mb-6"> | |
| <h1 class="text-2xl font-bold text-army-green">Inventory Management</h1> | |
| <p class="text-gray-600">Manage your store products and stock levels</p> | |
| </div> | |
| <div class="bg-white rounded-lg shadow overflow-hidden mb-6"> | |
| <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <button class="px-4 py-2 bg-pak-green text-white rounded-md hover:bg-green-800"> | |
| <i class="fas fa-plus mr-2"></i> Add Product | |
| </button> | |
| <button class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100"> | |
| <i class="fas fa-file-import mr-2"></i> Import | |
| </button> | |
| <button class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100"> | |
| <i class="fas fa-file-export mr-2"></i> Export | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search products..." class="pl-10 pr-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-army-green focus:border-transparent w-64"> | |
| <div class="absolute left-3 top-2.5 text-gray-400"> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Category</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stock</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded" src="https://via.placeholder.com/40" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Lays Chips (10g)</div> | |
| <div class="text-sm text-gray-500">SKU: PRD-001</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Snacks</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Rs. 20</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">15</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">In Stock</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded" src="https://via.placeholder.com/40" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Coca Cola (1.5L)</div> | |
| <div class="text-sm text-gray-500">SKU: PRD-002</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Beverages</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Rs. 120</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">8</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Low Stock</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded" src="https://via.placeholder.com/40" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Dairy Milk Chocolate</div> | |
| <div class="text-sm text-gray-500">SKU: PRD-003</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Chocolates</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Rs. 50</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">3</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Out of Stock</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded" src="https://via.placeholder.com/40" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Pepsi (250ml)</div> | |
| <div class="text-sm text-gray-500">SKU: PRD-004</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Beverages</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Rs. 40</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">12</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">In Stock</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="px-6 py-3 bg-gray-50 border-t border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-700"> | |
| Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">24</span> results | |
| </p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">Previous</button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-white bg-pak-green hover:bg-green-800">1</button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">2</button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">3</button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">Next</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sales Reports Content --> | |
| <div id="salesContent" class="content-section hidden"> | |
| <div class="mb-6"> | |
| <h1 class="text-2xl font-bold text-army-green">Sales Reports</h1> | |
| <p class="text-gray-600">Analyze your store sales performance</p> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 mb-6"> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-6"> | |
| <div> | |
| <h3 class="text-lg font-medium text-army-green">Sales Overview</h3> | |
| <p class="text-sm text-gray-500">Last 30 days performance</p> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <div class="flex space-x-2"> | |
| <select class="border border-gray-300 rounded-md py-1 px-2 focus:outline-none focus:ring-2 focus:ring-army-green focus:border-transparent text-sm"> | |
| <option>Last 7 Days</option> | |
| <option selected>Last 30 Days</option> | |
| <option>Last 90 Days</option> | |
| <option>This Year</option> | |
| </select> | |
| <button class="px-3 py-1 bg-pak-green text-white rounded-md text-sm hover:bg-green-800"> | |
| <i class="fas fa-download mr-1"></i> Export | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6"> | |
| <div class="bg-gray-50 rounded-lg p-4"> | |
| <p class="text-sm font-medium text-gray-500 mb-1">Total Sales</p> | |
| <p class="text-2xl font-bold text-army-green">Rs. 45,680</p> | |
| <p class="text-xs text-green-600 mt-1"><i class="fas fa-arrow-up mr-1"></i> 12.5% from last period</p> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-4"> | |
| <p class="text-sm font-medium text-gray-500 mb-1">Total Orders</p> | |
| <p class="text-2xl font-bold text-army-green">156</p> | |
| <p class="text-xs text-green-600 mt-1"><i class="fas fa-arrow-up mr-1"></i> 8.3% from last period</p> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-4"> | |
| <p class="text-sm font-medium text-gray-500 mb-1">Average Order Value</p> | |
| <p class="text-2xl font-bold text-army-green">Rs. 293</p> | |
| <p class="text-xs text-green-600 mt-1"><i class="fas fa-arrow-up mr-1"></i> 3.9% from last period</p> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-4 mb-6"> | |
| <div class="h-64"> | |
| <!-- Chart would go here --> | |
| <div class="flex items-center justify-center h-full text-gray-400"> | |
| <i class="fas fa-chart-line text-4xl mr-3"></i> | |
| <span>Sales Chart Visualization</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order ID</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Items</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 Jun 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">#ORD-2023-042</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Regular Customer</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5 items</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Rs. 1,250</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">14 Jun 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">#ORD-2023-041</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Walk-in Customer</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3 items</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Rs. 850</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">14 Jun 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">#ORD-2023-040</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">New Customer</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">7 items</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Rs. 2,150</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">13 Jun 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-blue-600">#ORD-2023-039</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Walk-in Customer</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 items</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Rs. 650</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Completed</span> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="px-6 py-3 bg-gray-50 border-t border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-700"> | |
| Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">156</span> results | |
| </p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">Previous</button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-white bg-pak-green hover:bg-green-800">1</button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">2</button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">3</button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">Next</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Customers Content --> | |
| <div id="customersContent" class="content-section hidden"> | |
| <div class="mb-6"> | |
| <h1 class="text-2xl font-bold text-army-green">Customer Management</h1> | |
| <p class="text-gray-600">Manage your store customers and loyalty programs</p> | |
| </div> | |
| <div class="bg-white rounded-lg shadow overflow-hidden mb-6"> | |
| <div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"> | |
| <div class="flex space-x-2"> | |
| <button class="px-4 py-2 bg-pak-green text-white rounded-md hover:bg-green-800"> | |
| <i class="fas fa-plus mr-2"></i> Add Customer | |
| </button> | |
| <button class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-100"> | |
| <i class="fas fa-tags mr-2"></i> Loyalty Program | |
| </button> | |
| </div> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search customers..." class="pl-10 pr-4 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-army-green focus:border-transparent w-64"> | |
| <div class="absolute left-3 top-2.5 text-gray-400"> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contact</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Orders</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total Spent</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Order</th> | |
| <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Muhammad Ali</div> | |
| <div class="text-sm text-gray-500">Regular Customer</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">ali@example.com</div> | |
| <div class="text-sm text-gray-500">+92 300 1234567</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">24</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Rs. 12,450</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">15 Jun 2023</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Fatima Khan</div> | |
| <div class="text-sm text-gray-500">Gold Member</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">fatima@example.com</div> | |
| <div class="text-sm text-gray-500">+92 301 2345678</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">18</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Rs. 9,850</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">14 Jun 2023</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Ahmed Raza</div> | |
| <div class="text-sm text-gray-500">Silver Member</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">ahmed@example.com</div> | |
| <div class="text-sm text-gray-500">+92 302 3456789</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">12</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Rs. 7,200</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">12 Jun 2023</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10"> | |
| <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Ayesha Malik</div> | |
| <div class="text-sm text-gray-500">New Customer</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">ayesha@example.com</div> | |
| <div class="text-sm text-gray-500">+92 303 4567890</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">2</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Rs. 1,450</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">10 Jun 2023</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3"><i class="fas fa-edit"></i></button> | |
| <button class="text-red-600 hover:text-red-900"><i class="fas fa-trash-alt"></i></button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="px-6 py-3 bg-gray-50 border-t border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-700"> | |
| Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">24</span> results | |
| </p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">Previous</button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-white bg-pak-green hover:bg-green-800">1</button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">2</button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">3</button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">Next</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Barcode Tools Content --> | |
| <div id="barcodeContent" class="content-section hidden"> | |
| <div class="mb-6"> | |
| <h1 class="text-2xl font-bold text-army-green">Barcode Tools</h1> | |
| <p class="text-gray-600">Generate and scan barcodes for your products</p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="text-lg font-medium text-army-green mb-4">Generate Barcode</h3> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Product Information</label> | |
| <input type="text" placeholder="Enter product name or SKU" class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-army-green focus:border-transparent"> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Barcode Type</label> | |
| <select class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-army-green focus:border-transparent"> | |
| <option>Code 128</option> | |
| <option>UPC-A</option> | |
| <option>EAN-13</option> | |
| <option>QR Code</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Barcode Value</label> | |
| <input type="text" placeholder="Enter barcode value" class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-army-green focus:border-transparent"> | |
| </div> | |
| <div class="flex justify-center mb-4 p-4 bg-gray-50 rounded-lg"> | |
| <!-- Barcode preview would go here --> | |
| <div class="text-center text-gray-400"> | |
| <i class="fas fa-barcode text-4xl mb-2"></i> | |
| <p>Barcode Preview</p> | |
| </div> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="flex-1 bg-pak-green text-white py-2 px-4 rounded-md hover:bg-green-800"> | |
| <i class="fas fa-download mr-2"></i> Download | |
| </button> | |
| <button class="flex-1 bg-army-green text-white py-2 px-4 rounded-md hover:bg-green-900"> | |
| <i class="fas fa-print mr-2"></i> Print | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <h3 class="text-lg font-medium text-army-green mb-4">Scan Barcode</h3> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Scan Source</label> | |
| <div class="flex space-x-3"> | |
| <button class="flex-1 py-2 px-4 border border-gray-300 rounded-md hover:bg-gray-100 tab-active"> | |
| <i class="fas fa-camera mr-2"></i> Webcam | |
| </button> | |
| <button class="flex-1 py-2 px-4 border border-gray-300 rounded-md hover:bg-gray-100"> | |
| <i class="fas fa-barcode mr-2"></i> Scanner | |
| </button> | |
| <button class="flex-1 py-2 px-4 border border-gray-300 rounded-md hover:bg-gray-100"> | |
| <i class="fas fa-mobile-alt mr-2"></i> Mobile | |
| </button> | |
| </div> | |
| </div> | |
| <div class="barcode-scanner flex items-center justify-center h-64 mb-4 rounded-lg"> | |
| <!-- Webcam feed would go here --> | |
| <div class="text-center text-gray-400"> | |
| <i class="fas fa-camera text-4xl mb-2"></i> | |
| <p>Webcam Scanner</p> | |
| <p class="text-xs mt-2">Allow access to your webcam to scan barcodes</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Scanned Code</label> | |
| <input type="text" placeholder="Scanned barcode will appear here" class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-army-green focus:border-transparent"> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="flex-1 bg-pak-green text-white py-2 px-4 rounded-md hover:bg-green-800"> | |
| <i class="fas fa-search mr-2"></i> Lookup Product | |
| </button> | |
| <button class="flex-1 bg-pak-red text-white py-2 px-4 rounded-md hover:bg-red-700"> | |
| <i class="fas fa-sync-alt mr-2"></i> Reset | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6 mt-6"> | |
| <h3 class="text-lg font-medium text-army-green mb-4">Barcode Scanner Settings</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Scanner Device</label> | |
| <select class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-army-green focus:border-transparent"> | |
| <option>Auto-detect</option> | |
| <option>USB Scanner (Honeywell)</option> | |
| <option>Bluetooth Scanner</option> | |
| <option>Serial Port Scanner</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Beep Sound</label> | |
| <select class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-army-green focus:border-transparent"> | |
| <option>Enabled</option> | |
| <option>Disabled</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Scan Mode</label> | |
| <select class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-army-green focus:border-transparent"> | |
| <option>Continuous</option> | |
| <option>Single</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Prefix/Suffix</label> | |
| <input type="text" placeholder="Optional" class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-army-green focus:border-transparent"> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <button class="bg-pak-green text-white py-2 px-6 rounded-md hover:bg-green-800"> | |
| <i class="fas fa-save mr-2"></i> Save Settings | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Settings Content --> | |
| <div id="settingsContent" class="content-section hidden"> | |
| <div class="mb-6"> | |
| <h1 class="text-2xl font-bold text-army-green">System Settings</h1> | |
| <p class="text-gray-600">Configure your store management system</p> | |
| </div> | |
| <div class="bg-white rounded-lg shadow overflow-hidden mb-6"> | |
| <div class="border-b border-gray-200"> | |
| <nav class="flex -mb-px"> | |
| <button class="py-4 px-6 text-center border-b-2 font-medium text-sm tab-active"> | |
| General | |
| </button> | |
| <button class="py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"> | |
| Store | |
| </button> | |
| <button class="py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"> | |
| Receipt | |
| </button> | |
| <button class="py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"> | |
| Users | |
| </button> | |
| <button class="py-4 px-6 text-center border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"> | |
| Backup | |
| </button> | |
| </nav> | |
| </div> | |
| <div class="p-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Language</label> | |
| <select class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-army-green focus:border-transparent"> | |
| <option>English</option> | |
| <option>Urdu</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Theme Color</label> | |
| <select class="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-army-green focus:border-transparent"> | |
| <option>Pak Army Green</option> | |
| <option>Dark</option> | |
| <option>Light</option> | |
| <option>Blue</option> | |
| </select> | |
| </ | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=saim11255/my" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |