Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Locations | StockSync Pro</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> | |
| <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> | |
| <style> | |
| #map { height: 400px; } | |
| .leaflet-container { z-index: 0 ; } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans text-gray-800"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0 hidden md:block"> | |
| <div class="p-4 border-b border-indigo-700"> | |
| <h1 class="text-2xl font-bold flex items-center"> | |
| <i data-feather="package" class="mr-2"></i> StockSync Pro | |
| </h1> | |
| </div> | |
| <nav class="p-4"> | |
| <div class="mb-6"> | |
| <p class="text-xs uppercase text-indigo-300 mb-2">Dashboard</p> | |
| <a href="index.html" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg mb-2"> | |
| <i data-feather="home" class="mr-3"></i> Overview | |
| </a> | |
| </div> | |
| <div class="mb-6"> | |
| <p class="text-xs uppercase text-indigo-300 mb-2">Inventory</p> | |
| <a href="products.html" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg mb-2"> | |
| <i data-feather="box" class="mr-3"></i> Products | |
| </a> | |
| <a href="locations.html" class="flex items-center py-2 px-3 bg-indigo-700 rounded-lg text-white"> | |
| <i data-feather="map-pin" class="mr-3"></i> Locations | |
| </a> | |
| <a href="transfers.html" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg"> | |
| <i data-feather="move" class="mr-3"></i> Transfers | |
| </a> | |
| </div> | |
| <div class="mb-6"> | |
| <p class="text-xs uppercase text-indigo-300 mb-2">Manufacturing</p> | |
| <a href="boms.html" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg mb-2"> | |
| <i data-feather="layers" class="mr-3"></i> BOMs | |
| </a> | |
| <a href="#" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg"> | |
| <i data-feather="clipboard" class="mr-3"></i> Work Orders | |
| </a> | |
| </div> | |
| <div class="mb-6"> | |
| <p class="text-xs uppercase text-indigo-300 mb-2">Reports</p> | |
| <a href="#" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg mb-2"> | |
| <i data-feather="bar-chart-2" class="mr-3"></i> Analytics | |
| </a> | |
| <a href="#" class="flex items-center py-2 px-3 text-indigo-200 hover:bg-indigo-700 hover:text-white rounded-lg"> | |
| <i data-feather="file-text" class="mr-3"></i> Inventory Report | |
| </a> | |
| </div> | |
| </nav> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white border-b border-gray-200 flex items-center justify-between px-6 py-4"> | |
| <button class="md:hidden text-gray-500"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| <div class="flex-1 mx-4"> | |
| <div class="relative max-w-md"> | |
| <input type="text" placeholder="Search locations..." | |
| class="w-full pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="relative p-2 text-gray-500 hover:text-gray-700"> | |
| <i data-feather="bell"></i> | |
| <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span> | |
| </button> | |
| <div class="flex items-center"> | |
| <img src="http://static.photos/people/200x200/1" alt="User" class="h-8 w-8 rounded-full"> | |
| <span class="ml-2 text-sm font-medium hidden md:inline">Admin User</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 overflow-y-auto p-6"> | |
| <div class="mb-6 flex justify-between items-center"> | |
| <h2 class="text-2xl font-bold text-gray-800">Warehouse Locations</h2> | |
| <div class="flex space-x-2"> | |
| <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 flex items-center"> | |
| <i data-feather="plus" class="mr-2"></i> New Location | |
| </button> | |
| <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center"> | |
| <i data-feather="refresh-cw" class="mr-2"></i> Refresh | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Map View --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 mb-6"> | |
| <h3 class="font-medium text-lg mb-4">Locations Map</h3> | |
| <div id="map" class="rounded-lg overflow-hidden"></div> | |
| </div> | |
| <!-- Locations Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Warehouse A --> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300"> | |
| <div class="h-48 bg-indigo-100 flex items-center justify-center"> | |
| <i data-feather="warehouse" class="text-indigo-600 w-16 h-16"></i> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Warehouse A</h3> | |
| <span class="px-3 py-1 bg-indigo-100 text-indigo-800 text-xs font-medium rounded-full">Primary</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Main inventory storage with climate control</p> | |
| <div class="space-y-2"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i data-feather="map-pin" class="mr-2 w-4 h-4"></i> | |
| <span>123 Industrial Way, San Francisco, CA</span> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i data-feather="box" class="mr-2 w-4 h-4"></i> | |
| <span>876 items • 85% capacity</span> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i data-feather="users" class="mr-2 w-4 h-4"></i> | |
| <span>Managed by: John Smith</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between"> | |
| <button class="px-3 py-1 bg-indigo-600 text-white text-sm rounded-lg hover:bg-indigo-700"> | |
| View Products | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 text-gray-700 text-sm rounded-lg hover:bg-gray-50"> | |
| Edit | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Warehouse B --> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300"> | |
| <div class="h-48 bg-blue-100 flex items-center justify-center"> | |
| <i data-feather="warehouse" class="text-blue-600 w-16 h-16"></i> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Warehouse B</h3> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">Secondary</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Bulk storage for raw materials</p> | |
| <div class="space-y-2"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i data-feather="map-pin" class="mr-2 w-4 h-4"></i> | |
| <span>456 Commerce St, Oakland, CA</span> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i data-feather="box" class="mr-2 w-4 h-4"></i> | |
| <span>542 items • 65% capacity</span> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i data-feather="users" class="mr-2 w-4 h-4"></i> | |
| <span>Managed by: Sarah Johnson</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between"> | |
| <button class="px-3 py-1 bg-blue-600 text-white text-sm rounded-lg hover:bg-blue-700"> | |
| View Products | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 text-gray-700 text-sm rounded-lg hover:bg-gray-50"> | |
| Edit | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Production Line --> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300"> | |
| <div class="h-48 bg-green-100 flex items-center justify-center"> | |
| <i data-feather="package" class="text-green-600 w-16 h-16"></i> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="text-xl font-bold">Production Line</h3> | |
| <span class="px-3 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">Active</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Assembly and manufacturing area</p> | |
| <div class="space-y-2"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i data-feather="map-pin" class="mr-2 w-4 h-4"></i> | |
| <span>789 Factory Ave, San Francisco, CA</span> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i data-feather="box" class="mr-2 w-4 h-4"></i> | |
| <span>312 items • 40% capacity</span> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i data-feather="users" class="mr-2 w-4 h-4"></i> | |
| <span>Managed by: Mike Chen</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between"> | |
| <button class="px-3 py-1 bg-green-600 text-white text-sm rounded-lg hover:bg-green-700"> | |
| View Products | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 text-gray-700 text-sm rounded-lg hover:bg-gray-50"> | |
| Edit | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize map | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const map = L.map('map').setView([37.7749, -122.4194], 11); | |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' | |
| }).addTo(map); | |
| // Add markers for locations | |
| L.marker([37.7749, -122.4194]).addTo(map) | |
| .bindPopup('Warehouse A') | |
| .openPopup(); | |
| L.marker([37.8044, -122.2711]).addTo(map) | |
| .bindPopup('Warehouse B'); | |
| L.marker([37.7649, -122.4194]).addTo(map) | |
| .bindPopup('Production Line'); | |
| }); | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |