Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Products | StockSync Pro</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| </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 bg-indigo-700 rounded-lg text-white"> | |
| <i data-feather="box" class="mr-3"></i> Products | |
| </a> | |
| <a href="locations.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="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 products..." | |
| 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">Product Inventory</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 Product | |
| </button> | |
| <button class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center"> | |
| <i data-feather="download" class="mr-2"></i> Export | |
| </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> | |
| <!-- Filters --> | |
| <div class="bg-white rounded-xl shadow-sm p-4 mb-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Category</label> | |
| <select class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option>All Categories</option> | |
| <option>Electronics</option> | |
| <option>Mechanical</option> | |
| <option>Packaging</option> | |
| <option>Raw Materials</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Status</label> | |
| <select class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option>All Statuses</option> | |
| <option>In Stock</option> | |
| <option>Low Stock</option> | |
| <option>Out of Stock</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Location</label> | |
| <select class="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <option>All Locations</option> | |
| <option>Warehouse A</option> | |
| <option>Warehouse B</option> | |
| <option>Production Line</option> | |
| </select> | |
| </div> | |
| <div class="flex items-end"> | |
| <button class="w-full px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700"> | |
| Apply Filters | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Products Table --> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden"> | |
| <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">SKU</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">Location</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-full" src="http://static.photos/technology/200x200/1" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Premium Widget</div> | |
| <div class="text-sm text-gray-500">Model: PW-2023</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">SKU-PW-2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Electronics</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Warehouse A</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">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">In Stock</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a> | |
| <a href="#" class="text-red-600 hover:text-red-900">Delete</a> | |
| </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="http://static.photos/industry/200x200/2" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Basic Component</div> | |
| <div class="text-sm text-gray-500">Model: BC-100</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">SKU-BC-100</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Mechanical</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Warehouse B</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">50</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"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a> | |
| <a href="#" class="text-red-600 hover:text-red-900">Delete</a> | |
| </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="http://static.photos/office/200x200/3" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">LCD Display 7"</div> | |
| <div class="text-sm text-gray-500">Model: LCD-7-IN</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">SKU-LCD-7-IN</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Electronics</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Production Line</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15</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">Critical</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a> | |
| <a href="#" class="text-red-600 hover:text-red-900">Delete</a> | |
| </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="http://static.photos/retail/200x200/4" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Power Adapter 12V</div> | |
| <div class="text-sm text-gray-500">Model: PWR-ADP-12</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">SKU-PWR-ADP-12</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Electronics</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Warehouse A</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8</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">Critical</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a> | |
| <a href="#" class="text-red-600 hover:text-red-900">Delete</a> | |
| </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="http://static.photos/minimal/200x200/5" alt=""> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">Rubber Feet (4-pack)</div> | |
| <div class="text-sm text-gray-500">Model: RB-FT-4PK</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">SKU-RB-FT-4PK</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Mechanical</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Warehouse B</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">22</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"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">Edit</a> | |
| <a href="#" class="text-red-600 hover:text-red-900">Delete</a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="bg-gray-50 px-6 py-3 flex items-center justify-between border-t border-gray-200"> | |
| <div class="flex-1 flex justify-between sm:hidden"> | |
| <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">Previous</a> | |
| <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">Next</a> | |
| </div> | |
| <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> | |
| <div> | |
| <p class="text-sm text-gray-700"> | |
| Showing <span class="font-medium">1</span> to <span class="font-medium">5</span> of <span class="font-medium">1248</span> results | |
| </p> | |
| </div> | |
| <div> | |
| <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Previous</span> | |
| <i data-feather="chevron-left" class="h-5 w-5"></i> | |
| </a> | |
| <a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">1</a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">2</a> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">3</a> | |
| <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">...</span> | |
| <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">25</a> | |
| <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"> | |
| <span class="sr-only">Next</span> | |
| <i data-feather="chevron-right" class="h-5 w-5"></i> | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |