Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>StockSage | Inventory Dashboard</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <link rel="stylesheet" href="/css/tailwind.css"> | |
| <script src="/js/feather.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 100: '#f5f5f4', | |
| 200: '#e7e5e4', | |
| 300: '#d6d3d1', | |
| 400: '#a8a29e', | |
| 500: '#78716c', | |
| 600: '#57534e', | |
| 700: '#44403c', | |
| 800: '#292524', | |
| 900: '#1c1917', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .progress-bar { | |
| transition: width 1s ease-in-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-primary-100 min-h-screen font-sans"> | |
| <div class="flex"> | |
| <!-- Sidebar --> | |
| <div class="sidebar w-64 bg-primary-800 text-white h-screen fixed overflow-y-auto"> | |
| <div class="p-4 flex items-center space-x-2 border-b border-primary-700"> | |
| <i data-feather="box" class="text-primary-400"></i> | |
| <h1 class="text-xl font-bold">StockSage</h1> | |
| </div> | |
| <nav class="p-4"> | |
| <div class="space-y-2"> | |
| <a href="#" class="flex items-center space-x-2 p-2 rounded bg-primary-700 text-white"> | |
| <i data-feather="home"></i> | |
| <span>Dashboard</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-primary-700 text-primary-200"> | |
| <i data-feather="package"></i> | |
| <span>Inventory</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-primary-700 text-primary-200"> | |
| <i data-feather="shopping-cart"></i> | |
| <span>Orders</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-primary-700 text-primary-200"> | |
| <i data-feather="users"></i> | |
| <span>Suppliers</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-primary-700 text-primary-200"> | |
| <i data-feather="bar-chart-2"></i> | |
| <span>Reports</span> | |
| </a> | |
| <a href="#" class="flex items-center space-x-2 p-2 rounded hover:bg-primary-700 text-primary-200"> | |
| <i data-feather="settings"></i> | |
| <span>Settings</span> | |
| </a> | |
| </div> | |
| </nav> | |
| <div class="absolute bottom-0 p-4 w-full border-t border-primary-700"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-primary-600 flex items-center justify-center"> | |
| <i data-feather="user" class="text-sm"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">Admin User</p> | |
| <p class="text-xs text-primary-300">admin@stocksage.com</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="ml-64 flex-1 p-8"> | |
| <header class="flex justify-between items-center mb-8"> | |
| <h2 class="text-2xl font-bold text-primary-800">Dashboard Overview</h2> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-primary-400"></i> | |
| <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 rounded-lg border border-primary-300 focus:outline-none focus:ring-2 focus:ring-primary-500"> | |
| </div> | |
| <div class="relative"> | |
| <i data-feather="bell" class="text-primary-500"></i> | |
| <span class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-white text-xs flex items-center justify-center">3</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="card bg-white rounded-xl shadow-md p-6 flex items-center space-x-4"> | |
| <div class="p-3 rounded-full bg-primary-100 text-primary-600"> | |
| <i data-feather="package" class="w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-primary-500">Total Products</p> | |
| <h3 class="text-2xl font-bold text-primary-800">1,248</h3> | |
| <p class="text-xs text-green-500 flex items-center"> | |
| <i data-feather="trending-up" class="w-3 h-3 mr-1"></i> 12% from last month | |
| </p> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-xl shadow-md p-6 flex items-center space-x-4"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600"> | |
| <i data-feather="shopping-cart" class="w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-primary-500">Today's Orders</p> | |
| <h3 class="text-2xl font-bold text-primary-800">64</h3> | |
| <p class="text-xs text-green-500 flex items-center"> | |
| <i data-feather="trending-up" class="w-3 h-3 mr-1"></i> 8% from yesterday | |
| </p> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-xl shadow-md p-6 flex items-center space-x-4"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600"> | |
| <i data-feather="dollar-sign" class="w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-primary-500">Revenue</p> | |
| <h3 class="text-2xl font-bold text-primary-800">$12,845</h3> | |
| <p class="text-xs text-red-500 flex items-center"> | |
| <i data-feather="trending-down" class="w-3 h-3 mr-1"></i> 5% from last week | |
| </p> | |
| </div> | |
| </div> | |
| <div class="card bg-white rounded-xl shadow-md p-6 flex items-center space-x-4"> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600"> | |
| <i data-feather="alert-circle" class="w-6 h-6"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-primary-500">Low Stock</p> | |
| <h3 class="text-2xl font-bold text-primary-800">27</h3> | |
| <p class="text-xs text-yellow-500 flex items-center"> | |
| <i data-feather="alert-triangle" class="w-3 h-3 mr-1"></i> Needs attention | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Recent Orders --> | |
| <div class="lg:col-span-2 bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6 border-b border-primary-200"> | |
| <h3 class="font-bold text-primary-800 flex items-center"> | |
| <i data-feather="list" class="mr-2"></i> Recent Orders | |
| </h3> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead class="bg-primary-50"> | |
| <tr> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-primary-500 uppercase">Order #</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-primary-500 uppercase">Customer</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-primary-500 uppercase">Status</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-primary-500 uppercase">Amount</th> | |
| <th class="px-6 py-3 text-left text-xs font-medium text-primary-500 uppercase">Date</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-primary-200"> | |
| <tr class="hover:bg-primary-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary-800">#ORD-4829</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-primary-600">Acme Corporation</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Completed</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-primary-600">$1,245</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-primary-600">Today, 10:45 AM</td> | |
| </tr> | |
| <tr class="hover:bg-primary-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary-800">#ORD-4828</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-primary-600">Beta Solutions</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-blue-100 text-blue-800">Processing</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-primary-600">$845</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-primary-600">Today, 09:30 AM</td> | |
| </tr> | |
| <tr class="hover:bg-primary-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary-800">#ORD-4827</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-primary-600">Gamma Industries</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-yellow-100 text-yellow-800">Pending</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-primary-600">$2,145</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-primary-600">Yesterday, 4:20 PM</td> | |
| </tr> | |
| <tr class="hover:bg-primary-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary-800">#ORD-4826</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-primary-600">Delta Systems</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 py-1 text-xs rounded-full bg-green-100 text-green-800">Completed</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-primary-600">$560</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-primary-600">Yesterday, 2:15 PM</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="p-4 border-t border-primary-200 text-center"> | |
| <a href="#" class="text-sm font-medium text-primary-600 hover:text-primary-800">View All Orders</a> | |
| </div> | |
| </div> | |
| <!-- Inventory Status --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6 border-b border-primary-200"> | |
| <h3 class="font-bold text-primary-800 flex items-center"> | |
| <i data-feather="alert-circle" class="mr-2"></i> Low Stock Alert | |
| </h3> | |
| </div> | |
| <div class="divide-y divide-primary-200"> | |
| <div class="p-4 hover:bg-primary-50 flex items-center space-x-3"> | |
| <div class="flex-shrink-0"> | |
| <img src="http://static.photos/technology/200x200/1" alt="Product" class="w-10 h-10 rounded-lg object-cover"> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-primary-800 truncate">Wireless Earbuds Pro</p> | |
| <p class="text-xs text-primary-500">SKU: WB-001</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-medium text-red-600">3 left</p> | |
| <p class="text-xs text-primary-500">Reorder at 5</p> | |
| </div> | |
| </div> | |
| <div class="p-4 hover:bg-primary-50 flex items-center space-x-3"> | |
| <div class="flex-shrink-0"> | |
| <img src="http://static.photos/technology/200x200/2" alt="Product" class="w-10 h-10 rounded-lg object-cover"> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-primary-800 truncate">Bluetooth Speaker X7</p> | |
| <p class="text-xs text-primary-500">SKU: BS-007</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-medium text-yellow-600">5 left</p> | |
| <p class="text-xs text-primary-500">Reorder at 10</p> | |
| </div> | |
| </div> | |
| <div class="p-4 hover:bg-primary-50 flex items-center space-x-3"> | |
| <div class="flex-shrink-0"> | |
| <img src="http://static.photos/technology/200x200/3" alt="Product" class="w-10 h-10 rounded-lg object-cover"> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-primary-800 truncate">USB-C Charging Cable</p> | |
| <p class="text-xs text-primary-500">SKU: CC-102</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-medium text-red-600">2 left</p> | |
| <p class="text-xs text-primary-500">Reorder at 15</p> | |
| </div> | |
| </div> | |
| <div class="p-4 hover:bg-primary-50 flex items-center space-x-3"> | |
| <div class="flex-shrink-0"> | |
| <img src="http://static.photos/technology/200x200/4" alt="Product" class="w-10 h-10 rounded-lg object-cover"> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-primary-800 truncate">Wireless Mouse M300</p> | |
| <p class="text-xs text-primary-500">SKU: WM-300</p> | |
| </div> | |
| <div class="text-right"> | |
| <p class="text-sm font-medium text-yellow-600">7 left</p> | |
| <p class="text-xs text-primary-500">Reorder at 12</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-primary-200 text-center"> | |
| <a href="#" class="text-sm font-medium text-primary-600 hover:text-primary-800">View All Alerts</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bottom Section --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6"> | |
| <!-- Category Distribution --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold text-primary-800 flex items-center"> | |
| <i data-feather="pie-chart" class="mr-2"></i> Category Distribution | |
| </h3> | |
| <select class="text-sm border border-primary-300 rounded px-3 py-1 focus:outline-none focus:ring-1 focus:ring-primary-500"> | |
| <option>This Month</option> | |
| <option>Last Month</option> | |
| <option>This Quarter</option> | |
| </select> | |
| </div> | |
| <div class="h-64"> | |
| <canvas id="categoryChart"></canvas> | |
| </div> | |
| </div> | |
| <!-- Recent Activities --> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="font-bold text-primary-800 flex items-center"> | |
| <i data-feather="activity" class="mr-2"></i> Recent Activities | |
| </h3> | |
| <a href="#" class="text-sm text-primary-600 hover:text-primary-800">View All</a> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="flex-shrink-0 p-2 rounded-full bg-primary-100 text-primary-600"> | |
| <i data-feather="plus" class="w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-primary-800">New product added</p> | |
| <p class="text-xs text-primary-500">"Wireless Charging Pad" was added to inventory</p> | |
| <p class="text-xs text-primary-400 mt-1">10 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <div class="flex-shrink-0 p-2 rounded-full bg-green-100 text-green-600"> | |
| <i data-feather="check" class="w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-primary-800">Order completed</p> | |
| <p class="text-xs text-primary-500">Order #ORD-4829 was marked as completed</p> | |
| <p class="text-xs text-primary-400 mt-1">35 minutes ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <div class="flex-shrink-0 p-2 rounded-full bg-blue-100 text-blue-600"> | |
| <i data-feather="truck" class="w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-primary-800">Shipment received</p> | |
| <p class="text-xs text-primary-500">Received 50 units of "Bluetooth Headphones"</p> | |
| <p class="text-xs text-primary-400 mt-1">2 hours ago</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start space-x-3"> | |
| <div class="flex-shrink-0 p-2 rounded-full bg-yellow-100 text-yellow-600"> | |
| <i data-feather="alert-triangle" class="w-4 h-4"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-primary-800">Low stock warning</p> | |
| <p class="text-xs text-primary-500">"USB-C Cable" stock is below threshold</p> | |
| <p class="text-xs text-primary-400 mt-1">4 hours ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Fetch inventory data | |
| async function fetchInventoryData() { | |
| try { | |
| const response = await fetch('/api/inventory'); | |
| const data = await response.json(); | |
| updateDashboard(data); | |
| } catch (error) { | |
| console.error('Error fetching inventory data:', error); | |
| } | |
| } | |
| // Update dashboard with real data | |
| function updateDashboard(data) { | |
| // Update your UI elements here with real data | |
| console.log('Dashboard updated with:', data); | |
| } | |
| // Initialize charts and data | |
| document.addEventListener('DOMContentLoaded', function() { | |
| fetchInventoryData(); | |
| // Category Distribution Chart | |
| const ctx = document.getElementById('categoryChart').getContext('2d'); | |
| const categoryChart = new Chart(ctx, { | |
| type: 'doughnut', | |
| data: { | |
| labels: ['Electronics', 'Furniture', 'Office Supplies', 'Appliances', 'Other'], | |
| datasets: [{ | |
| data: [35, 25, 20, 15, 5], | |
| backgroundColor: [ | |
| '#78716c', | |
| '#a8a29e', | |
| '#d6d3d1', | |
| '#e7e5e4', | |
| '#f5f5f4' | |
| ], | |
| borderWidth: 0 | |
| }] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| position: 'right', | |
| } | |
| } | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |