Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Transfers | 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 bg-indigo-700 rounded-lg text-white"> | |
| <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 transfers..." | |
| 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">Inventory Transfers</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 Transfer | |
| </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">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>Pending</option> | |
| <option>In Transit</option> | |
| <option>Completed</option> | |
| <option>Cancelled</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">From 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> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">To 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> | |
| <!-- Transfers 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">Transfer ID</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">From</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">To</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">Date</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 text-sm font-medium text-gray-900">TR-2023-0452</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">Production Line</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-500">Today, 08:15 AM</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">In Transit</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">View</a> | |
| <a href="#" class="text-red-600 hover:text-red-900">Cancel</a> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">TR-2023-0451</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">Warehouse A</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">12 items</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 03:45 PM</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> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900">View</a> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">TR-2023-0450</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">Warehouse B</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-500">2 days ago</td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">Cancelled</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">View</a> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">TR-2023-0449</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">Warehouse A</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8 items</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3 days ago</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> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900">View</a> | |
| </td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">TR-2023-0448</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">Production Line</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15 items</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5 days ago</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> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900">View</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">42</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">9</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> |