Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Suppliers | EUROHINCA Business Hub</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css"> | |
| <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script> | |
| <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .card { | |
| background: rgba(255, 255, 255, 0.05); | |
| backdrop-filter: blur(5px); | |
| border-radius: 12px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .nav-link { | |
| transition: all 0.2s ease; | |
| } | |
| .nav-link:hover { | |
| background: rgba(255, 255, 255, 0.05); | |
| } | |
| .nav-link.active { | |
| background: rgba(59, 130, 246, 0.2); | |
| border-left: 3px solid #3b82f6; | |
| } | |
| .rotate-180 { | |
| transform: rotate(180deg); | |
| } | |
| .dataTables_wrapper .dataTables_filter input { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| color: white; | |
| padding: 0.5rem; | |
| border-radius: 0.375rem; | |
| } | |
| .dataTables_wrapper .dataTables_length select { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| color: white; | |
| padding: 0.25rem; | |
| border-radius: 0.25rem; | |
| } | |
| .dataTables_wrapper .dataTables_paginate .paginate_button { | |
| color: white ; | |
| border: 1px solid transparent ; | |
| } | |
| .dataTables_wrapper .dataTables_paginate .paginate_button:hover { | |
| background: rgba(255, 255, 255, 0.1) ; | |
| border: 1px solid rgba(255, 255, 255, 0.2) ; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white flex"> | |
| <!-- Sidebar --> | |
| <div class="sidebar w-64 bg-gray-800 h-screen fixed transform -translate-x-64 lg:translate-x-0 transition-transform duration-300 z-50" id="sidebar"> | |
| <div class="p-4 border-b border-gray-700"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="briefcase" class="text-blue-300"></i> | |
| <span class="text-lg font-semibold">EUROHINCA Hub</span> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="mb-6"> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center"> | |
| <span class="font-medium">JD</span> | |
| </div> | |
| <div> | |
| <p class="font-medium">John Doe</p> | |
| <p class="text-xs text-gray-400">Purchase Department</p> | |
| </div> | |
| </div> | |
| </div> | |
| <nav class="space-y-1"> | |
| <a href="dashboard.html" class="nav-link block px-3 py-2 text-sm rounded-lg"> | |
| <i data-feather="home" class="w-4 h-4 inline mr-2"></i> | |
| Dashboard | |
| </a> | |
| <div class="relative"> | |
| <button class="nav-link active w-full text-left px-3 py-2 text-sm rounded-lg flex items-center justify-between purchasing-menu-toggle"> | |
| <span class="flex items-center"> | |
| <i data-feather="shopping-cart" class="w-4 h-4 inline mr-2"></i> | |
| Purchasing | |
| </span> | |
| <i data-feather="chevron-down" class="w-4 h-4 transition-transform duration-200 purchasing-menu-icon rotate-180"></i> | |
| </button> | |
| <div class="mt-1 ml-6 submenu"> | |
| <a href="suppliers.html" class="nav-link active block px-3 py-2 text-sm rounded-lg"> | |
| <i data-feather="users" class="w-4 h-4 inline mr-2"></i> | |
| Suppliers | |
| </a> | |
| <a href="#" class="nav-link block px-3 py-2 text-sm rounded-lg"> | |
| <i data-feather="file-text" class="w-4 h-4 inline mr-2"></i> | |
| Purchase Orders | |
| </a> | |
| </div> | |
| </div> | |
| <a href="#" class="nav-link block px-3 py-2 text-sm rounded-lg"> | |
| <i data-feather="truck" class="w-4 h-4 inline mr-2"></i> | |
| Logistics | |
| </a> | |
| <a href="#" class="nav-link block px-3 py-2 text-sm rounded-lg"> | |
| <i data-feather="dollar-sign" class="w-4 h-4 inline mr-2"></i> | |
| Finance | |
| </a> | |
| <a href="#" class="nav-link block px-3 py-2 text-sm rounded-lg"> | |
| <i data-feather="file-text" class="w-4 h-4 inline mr-2"></i> | |
| Documents | |
| </a> | |
| <a href="#" class="nav-link block px-3 py-2 text-sm rounded-lg"> | |
| <i data-feather="settings" class="w-4 h-4 inline mr-2"></i> | |
| Settings | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 lg:ml-64"> | |
| <!-- Top Navigation --> | |
| <header class="bg-gray-800 p-4 flex justify-between items-center border-b border-gray-700"> | |
| <div class="flex items-center space-x-2"> | |
| <button class="lg:hidden" id="sidebarToggle"> | |
| <i data-feather="menu" class="w-5 h-5"></i> | |
| </button> | |
| <h1 class="text-xl font-semibold">Suppliers Management</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-2 rounded-full hover:bg-gray-700"> | |
| <i data-feather="bell" class="w-5 h-5"></i> | |
| </button> | |
| <a href="login.html" class="p-2 rounded-full hover:bg-gray-700"> | |
| <i data-feather="log-out" class="w-5 h-5"></i> | |
| </a> | |
| </div> | |
| </header> | |
| <!-- Content --> | |
| <main class="p-4 lg:p-6"> | |
| <!-- Fixed Action Bar --> | |
| <div class="sticky top-16 z-10 bg-gray-800 p-4 border-b border-gray-700 mb-6 flex flex-col md:flex-row justify-between items-start md:items-center gap-4"> | |
| <div class="flex flex-wrap gap-3"> | |
| <button id="newSupplierBtn" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg flex items-center"> | |
| <i data-feather="plus" class="w-4 h-4 mr-2"></i> | |
| New Supplier | |
| </button> | |
| <button id="exportBtn" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center"> | |
| <i data-feather="download" class="w-4 h-4 mr-2"></i> | |
| Export | |
| </button> | |
| <button id="importAllBtn" class="px-4 py-2 bg-green-600 hover:bg-green-500 rounded-lg flex items-center"> | |
| <i data-feather="upload" class="w-4 h-4 mr-2"></i> | |
| Bulk Import | |
| </button> | |
| </div> | |
| <div class="w-full md:w-64"> | |
| <div class="relative"> | |
| <input type="text" id="searchInput" placeholder="Search suppliers..." class="w-full px-4 py-2 pl-10 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500"> | |
| <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Suppliers Table --> | |
| <div class="card p-4 overflow-x-auto"> | |
| <table id="suppliersTable" class="w-full stripe hover" style="width:100%"> | |
| <thead> | |
| <tr class="border-b border-gray-700"> | |
| <th class="px-4 py-3"></th> | |
| <th class="px-4 py-3">Supplier ID</th> | |
| <th class="px-4 py-3">Name</th> | |
| <th class="px-4 py-3">Contact</th> | |
| <th class="px-4 py-3">Status</th> | |
| <th class="px-4 py-3">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr data-toggle="collapse" data-target="#supplier-details-1" class="cursor-pointer hover:bg-gray-800"> | |
| <td class="px-4 py-3"><i data-feather="chevron-down" class="w-4 h-4 text-gray-400"></i></td> | |
| <td class="px-4 py-3">SUP-001</td> | |
| <td class="px-4 py-3">ABC Supplies</td> | |
| <td class="px-4 py-3">John Smith</td> | |
| <td class="px-4 py-3"><span class="px-2 py-1 rounded-full text-xs bg-green-900 text-green-300">Active</span></td> | |
| <td class="px-4 py-3"> | |
| <button class="p-1 text-blue-400 hover:text-blue-300 edit-btn"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-1 text-red-400 hover:text-red-300 delete-btn"> | |
| <i data-feather="trash" class="w-4 h-4"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr id="supplier-details-1" class="hidden"> | |
| <td colspan="6" class="px-4 py-3 bg-gray-800"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4"> | |
| <div><strong>ICE:</strong> 123456789</div> | |
| <div><strong>IF:</strong> 987654321</div> | |
| <div><strong>TP:</strong> 0612345678</div> | |
| <div><strong>RC:</strong> RC12345</div> | |
| <div><strong>CNSS:</strong> CNSS123</div> | |
| <div><strong>RIB:</strong> RIB123456789</div> | |
| <div><strong>Email:</strong> john@abcsupplies.com</div> | |
| <div><strong>Phone:</strong> +212 123 456 789</div> | |
| <div><strong>Country:</strong> Morocco</div> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr data-toggle="collapse" data-target="#supplier-details-2" class="cursor-pointer hover:bg-gray-800"> | |
| <td class="px-4 py-3"><i data-feather="chevron-down" class="w-4 h-4 text-gray-400"></i></td> | |
| <td class="px-4 py-3">SUP-002</td> | |
| <td class="px-4 py-3">XYZ Imports</td> | |
| <td class="px-4 py-3">Sarah Johnson</td> | |
| <td class="px-4 py-3"><span class="px-2 py-1 rounded-full text-xs bg-green-900 text-green-300">Active</span></td> | |
| <td class="px-4 py-3 text-right"> | |
| <button class="p-1 text-blue-400 hover:text-blue-300 edit-btn"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-1 text-red-400 hover:text-red-300 delete-btn"> | |
| <i data-feather="trash" class="w-4 h-4"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr id="supplier-details-2" class="hidden"> | |
| <td colspan="6" class="px-4 py-3 bg-gray-800"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4"> | |
| <div><strong>ICE:</strong> 987654321</div> | |
| <div><strong>IF:</strong> 123456789</div> | |
| <div><strong>TP:</strong> 0623456789</div> | |
| <div><strong>RC:</strong> RC54321</div> | |
| <div><strong>CNSS:</strong> CNSS456</div> | |
| <div><strong>RIB:</strong> RIB987654321</div> | |
| <div><strong>Email:</strong> sarah@xyzimports.com</div> | |
| <div><strong>Phone:</strong> +212 234 567 890</div> | |
| <div><strong>Country:</strong> Morocco</div> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr data-toggle="collapse" data-target="#supplier-details-3" class="cursor-pointer hover:bg-gray-800"> | |
| <td class="px-4 py-3"><i data-feather="chevron-down" class="w-4 h-4 text-gray-400"></i></td> | |
| <td class="px-4 py-3">SUP-003</td> | |
| <td class="px-4 py-3">Global Parts</td> | |
| <td class="px-4 py-3">Michael Brown</td> | |
| <td class="px-4 py-3"><span class="px-2 py-1 rounded-full text-xs bg-green-900 text-green-300">Active</span></td> | |
| <td class="px-4 py-3 text-right"> | |
| <button class="p-1 text-blue-400 hover:text-blue-300 edit-btn"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-1 text-red-400 hover:text-red-300 delete-btn"> | |
| <i data-feather="trash" class="w-4 h-4"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr id="supplier-details-3" class="hidden"> | |
| <td colspan="6" class="px-4 py-3 bg-gray-800"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4"> | |
| <div><strong>ICE:</strong> 456789123</div> | |
| <div><strong>IF:</strong> 789123456</div> | |
| <div><strong>TP:</strong> 0634567890</div> | |
| <div><strong>RC:</strong> RC67890</div> | |
| <div><strong>CNSS:</strong> CNSS789</div> | |
| <div><strong>RIB:</strong> RIB456789123</div> | |
| <div><strong>Email:</strong> michael@globalparts.com</div> | |
| <div><strong>Phone:</strong> +212 345 678 901</div> | |
| <div><strong>Country:</strong> France</div> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr data-toggle="collapse" data-target="#supplier-details-4" class="cursor-pointer hover:bg-gray-800"> | |
| <td class="px-4 py-3"><i data-feather="chevron-down" class="w-4 h-4 text-gray-400"></i></td> | |
| <td class="px-4 py-3">SUP-004</td> | |
| <td class="px-4 py-3">EuroTech</td> | |
| <td class="px-4 py-3">David Wilson</td> | |
| <td class="px-4 py-3"><span class="px-2 py-1 rounded-full text-xs bg-yellow-900 text-yellow-300">Pending</span></td> | |
| <td class="px-4 py-3 text-right"> | |
| <button class="p-1 text-blue-400 hover:text-blue-300 edit-btn"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-1 text-red-400 hover:text-red-300 delete-btn"> | |
| <i data-feather="trash" class="w-4 h-4"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr id="supplier-details-4" class="hidden"> | |
| <td colspan="6" class="px-4 py-3 bg-gray-800"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4"> | |
| <div><strong>ICE:</strong> 789123456</div> | |
| <div><strong>IF:</strong> 456789123</div> | |
| <div><strong>TP:</strong> 0645678901</div> | |
| <div><strong>RC:</strong> RC09876</div> | |
| <div><strong>CNSS:</strong> CNSS012</div> | |
| <div><strong>RIB:</strong> RIB789123456</div> | |
| <div><strong>Email:</strong> david@eurotech.com</div> | |
| <div><strong>Phone:</strong> +212 456 789 012</div> | |
| <div><strong>Country:</strong> Germany</div> | |
| </div> | |
| </td> | |
| </tr> | |
| <tr data-toggle="collapse" data-target="#supplier-details-5" class="cursor-pointer hover:bg-gray-800"> | |
| <td class="px-4 py-3"><i data-feather="chevron-down" class="w-4 h-4 text-gray-400"></i></td> | |
| <td class="px-4 py-3">SUP-005</td> | |
| <td class="px-4 py-3">Maroc Logistics</td> | |
| <td class="px-4 py-3">Ahmed Alami</td> | |
| <td class="px-4 py-3"><span class="px-2 py-1 rounded-full text-xs bg-red-900 text-red-300">Inactive</span></td> | |
| <td class="px-4 py-3 text-right"> | |
| <button class="p-1 text-blue-400 hover:text-blue-300 edit-btn"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| <button class="p-1 text-red-400 hover:text-red-300 delete-btn"> | |
| <i data-feather="trash" class="w-4 h-4"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr id="supplier-details-5" class="hidden"> | |
| <td colspan="6" class="px-4 py-3 bg-gray-800"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4"> | |
| <div><strong>ICE:</strong> 321654987</div> | |
| <div><strong>IF:</strong> 654987321</div> | |
| <div><strong>TP:</strong> 0656789012</div> | |
| <div><strong>RC:</strong> RC54321</div> | |
| <div><strong>CNSS:</strong> CNSS345</div> | |
| <div><strong>RIB:</strong> RIB321654987</div> | |
| <div><strong>Email:</strong> ahmed@maroclogistics.com</div> | |
| <div><strong>Phone:</strong> +212 567 890 123</div> | |
| <div><strong>Country:</strong> Morocco</div> | |
| </div> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <script> | |
| // Toggle row details | |
| document.querySelectorAll('[data-toggle="collapse"]').forEach(row => { | |
| row.addEventListener('click', (e) => { | |
| // Check if clicked on an action button | |
| if (e.target.closest('button') || e.target.closest('a')) { | |
| return; | |
| } | |
| const target = row.getAttribute('data-target'); | |
| const detailsRow = document.querySelector(target); | |
| const icon = row.querySelector('i[data-feather="chevron-down"]'); | |
| detailsRow.classList.toggle('hidden'); | |
| row.classList.toggle('bg-gray-800'); | |
| if (detailsRow.classList.contains('hidden')) { | |
| feather.replace(); | |
| } else { | |
| icon.setAttribute('data-feather', 'chevron-up'); | |
| feather.replace(); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </main> | |
| </div> | |
| <!-- New Supplier Modal --> | |
| <div id="supplierModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4"> | |
| <div class="bg-gray-800 rounded-lg w-full max-w-2xl"> | |
| <div class="flex justify-between items-center p-4 border-b border-gray-700"> | |
| <h3 class="text-lg font-semibold">Add New Supplier</h3> | |
| <button id="closeModal" class="text-gray-400 hover:text-white"> | |
| <i data-feather="x" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| <div class="p-6"> | |
| <form id="supplierForm"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label for="supplierName" class="block text-sm font-medium mb-1">Supplier Name</label> | |
| <input type="text" id="supplierName" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="supplierId" class="block text-sm font-medium mb-1">Supplier ID</label> | |
| <input type="text" id="supplierId" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500" value="SUP-006" disabled> | |
| </div> | |
| <div> | |
| <label for="ice" class="block text-sm font-medium mb-1">ICE</label> | |
| <input type="text" id="ice" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="if" class="block text-sm font-medium mb-1">IF</label> | |
| <input type="text" id="if" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="tp" class="block text-sm font-medium mb-1">TP</label> | |
| <input type="text" id="tp" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="rc" class="block text-sm font-medium mb-1">RC</label> | |
| <input type="text" id="rc" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="cnss" class="block text-sm font-medium mb-1">CNSS</label> | |
| <input type="text" id="cnss" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="rib" class="block text-sm font-medium mb-1">RIB</label> | |
| <input type="text" id="rib" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="contactPerson" class="block text-sm font-medium mb-1">Contact Person</label> | |
| <input type="text" id="contactPerson" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium mb-1">Email</label> | |
| <input type="email" id="email" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-sm font-medium mb-1">Phone</label> | |
| <input type="tel" id="phone" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="country" class="block text-sm font-medium mb-1">Country</label> | |
| <select id="country" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500"> | |
| <option value="Morocco">Morocco</option> | |
| <option value="France">France</option> | |
| <option value="Germany">Germany</option> | |
| <option value="Spain">Spain</option> | |
| <option value="Italy">Italy</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="address" class="block text-sm font-medium mb-1">Address</label> | |
| <input type="text" id="address" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="status" class="block text-sm font-medium mb-1">Status</label> | |
| <select id="status" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500"> | |
| <option value="Active">Active</option> | |
| <option value="Pending">Pending</option> | |
| <option value="Inactive">Inactive</option> | |
| </select> | |
| </div> | |
| <div class="md:col-span-2"> | |
| <label for="ribFile" class="block text-sm font-medium mb-1">RIB File (PDF)</label> | |
| <input type="file" id="ribFile" accept=".pdf" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500"> | |
| </div> | |
| </div> | |
| <div class="flex justify-between mt-6"> | |
| <div class="space-x-3 ml-auto"> | |
| <button type="button" id="cancelBtn" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg"> | |
| Cancel | |
| </button> | |
| <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg"> | |
| Save Supplier | |
| </button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Bulk Import functionality | |
| document.getElementById('importAllBtn').addEventListener('click', () => { | |
| // Create file input for multiple PDF imports | |
| const fileInput = document.createElement('input'); | |
| fileInput.type = 'file'; | |
| fileInput.accept = '.pdf'; | |
| fileInput.multiple = true; | |
| fileInput.click(); | |
| fileInput.addEventListener('change', (e) => { | |
| const files = e.target.files; | |
| if (files.length > 0) { | |
| alert(`Importing ${files.length} PDF files...`); | |
| // In a real app, upload files to server and process | |
| } | |
| }); | |
| }); | |
| // Initialize DataTable | |
| $(document).ready(function() { | |
| $('#suppliersTable').DataTable({ | |
| columnDefs: [ | |
| { targets: -1, orderable: false, searchable: false } | |
| ], | |
| responsive: true, | |
| dom: '<"flex flex-col md:flex-row justify-between"lf>rt<"flex justify-between"ip>', | |
| language: { | |
| search: "", | |
| searchPlaceholder: "Search suppliers..." | |
| } | |
| }); | |
| // Search functionality | |
| $('#searchInput').on('keyup', function() { | |
| $('#suppliersTable').DataTable().search(this.value).draw(); | |
| }); | |
| }); | |
| // Modal handling | |
| const newSupplierBtn = document.getElementById('newSupplierBtn'); | |
| const supplierModal = document.getElementById('supplierModal'); | |
| const closeModal = document.getElementById('closeModal'); | |
| const cancelBtn = document.getElementById('cancelBtn'); | |
| const exportBtn = document.getElementById('exportBtn'); | |
| newSupplierBtn.addEventListener('click', () => { | |
| supplierModal.classList.remove('hidden'); | |
| }); | |
| closeModal.addEventListener('click', () => { | |
| supplierModal.classList.add('hidden'); | |
| }); | |
| cancelBtn.addEventListener('click', () => { | |
| supplierModal.classList.add('hidden'); | |
| }); | |
| // Export functionality | |
| exportBtn.addEventListener('click', () => { | |
| // In a real app, this would export the data | |
| alert('Exporting suppliers data...'); | |
| }); | |
| // Reset form when opening for new supplier | |
| newSupplierBtn.addEventListener('click', () => { | |
| document.getElementById('supplierForm').reset(); | |
| document.getElementById('supplierId').value = 'SUP-' + (Math.floor(Math.random() * 900) + 100).toString(); | |
| document.querySelector('#supplierModal h3').textContent = 'Add New Supplier'; | |
| }); | |
| // Form submission | |
| document.getElementById('supplierForm').addEventListener('submit', (e) => { | |
| e.preventDefault(); | |
| // In a real app, this would save the data | |
| alert('Supplier saved successfully!'); | |
| supplierModal.classList.add('hidden'); | |
| }); | |
| // Edit functionality to populate form with row data | |
| document.querySelectorAll('.edit-btn').forEach(btn => { | |
| btn.addEventListener('click', (e) => { | |
| const row = e.target.closest('tr'); | |
| const cells = row.querySelectorAll('td'); | |
| document.getElementById('supplierId').value = cells[0].textContent; | |
| document.getElementById('supplierName').value = cells[1].textContent; | |
| document.getElementById('ice').value = cells[2].textContent; | |
| document.getElementById('if').value = cells[3].textContent; | |
| document.getElementById('tp').value = cells[4].textContent; | |
| document.getElementById('rc').value = cells[5].textContent; | |
| document.getElementById('cnss').value = cells[6].textContent; | |
| document.getElementById('rib').value = cells[7].textContent; | |
| document.getElementById('contactPerson').value = cells[8].textContent; | |
| document.getElementById('email').value = cells[9].textContent; | |
| document.getElementById('phone').value = cells[10].textContent; | |
| document.getElementById('country').value = cells[11].textContent; | |
| const statusText = cells[6].textContent.trim(); | |
| document.getElementById('status').value = | |
| statusText.includes('Active') ? 'Active' : | |
| statusText.includes('Pending') ? 'Pending' : 'Inactive'; | |
| supplierModal.classList.remove('hidden'); | |
| document.querySelector('#supplierModal h3').textContent = 'Edit Supplier'; | |
| }); | |
| }); | |