Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BOMs | 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 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 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 bg-indigo-700 rounded-lg text-white"> | |
| <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 BOMs..." | |
| 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">Bill of Materials</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 BOM | |
| </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> | |
| <!-- BOMs Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Deluxe Model BOM --> | |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300"> | |
| <div class="h-48 bg-purple-100 flex items-center justify-center"> | |
| <i data-feather="layers" class="text-purple-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">Deluxe Model 2024</h3> | |
| <span class="px-3 py-1 bg-purple-100 text-purple-800 text-xs font-medium rounded-full">Active</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Premium product with advanced features</p> | |
| <div class="space-y-2"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i data-feather="hash" class="mr-2 w-4 h-4"></i> | |
| <span>BOM-2024-DLX</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>15 components</span> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i data-feather="clock" class="mr-2 w-4 h-4"></i> | |
| <span>Last updated: 3 days ago</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex justify-between"> | |
| <button class="px-3 py-1 bg-purple-600 text-white text-sm rounded-lg hover:bg-purple-700"> | |
| View Details | |
| </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> | |
| <!-- Standard Model BOM --> | |
| <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="layers" 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">Standard Model 2024</h3> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">Active</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Base model with essential features</p> | |
| <div class="space-y-2"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i data-feather="hash" class="mr-2 w-4 h-4"></i> | |
| <span>BOM-2024-STD</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>9 components</span> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i data-feather="clock" class="mr-2 w-4 h-4"></i> | |
| <span>Last updated: 1 week ago</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 Details | |
| </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> | |
| <!-- Budget Model BOM --> | |
| <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="layers" 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">Budget Model 2024</h3> | |
| <span class="px-3 py-1 bg-green-100 text-green-800 text-xs font-medium rounded-full">Draft</span> | |
| </div> | |
| <p class="text-gray-600 mb-4">Cost-effective entry-level product</p> | |
| <div class="space-y-2"> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i data-feather="hash" class="mr-2 w-4 h-4"></i> | |
| <span>BOM-2024-BGT</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>7 components</span> | |
| </div> | |
| <div class="flex items-center text-sm text-gray-500"> | |
| <i data-feather="clock" class="mr-2 w-4 h-4"></i> | |
| <span>Last updated: 2 weeks ago</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 Details | |
| </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> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |