Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Unit Management Center - UnitFlow Nexus</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| * { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .module-tab { | |
| transition: all 0.3s ease; | |
| } | |
| .module-tab:hover { | |
| transform: translateY(-2px); | |
| } | |
| .module-tab.active { | |
| background: rgba(255, 255, 255, 0.2); | |
| border-bottom: 3px solid #667eea; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen gradient-bg"> | |
| <div id="vanta-bg" class="fixed inset-0 z-0"></div> | |
| <div class="relative z-10 min-h-screen"> | |
| <!-- Header --> | |
| <header class="glass-effect rounded-b-2xl shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-3 mb-4 md:mb-0"> | |
| <a href="index.html" class="flex items-center space-x-3"> | |
| <div class="w-12 h-12 bg-white rounded-xl flex items-center justify-center shadow-lg"> | |
| <i data-feather="briefcase" class="text-purple-600"></i> | |
| </div> | |
| <div> | |
| <h1 class="text-2xl font-bold text-white">UnitFlow Nexus</h1> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <i data-feather="bell" class="text-white cursor-pointer hover:text-purple-200 transition-colors"></i> | |
| <span class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></span> | |
| </div> | |
| <div class="flex items-center space-x-2 bg-white/20 rounded-full px-4 py-2"> | |
| <i data-feather="user" class="text-white"></i> | |
| <span class="text-white font-medium">Admin</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <!-- Page Title --> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-3xl font-bold text-white mb-2">Unit Management Center</h2> | |
| <p class="text-purple-100">Manage customers, suppliers, third parties, and contacts</p> | |
| </div> | |
| <!-- Module Tabs --> | |
| <div class="flex flex-wrap justify-center mb-8"> | |
| <button class="module-tab active glass-effect rounded-t-lg px-6 py-3 text-white font-medium mx-1 mb-2" onclick="showModule('customer')"> | |
| <i data-feather="user-check" class="inline w-4 h-4 mr-2"></i>Customer Management | |
| </button> | |
| <button class="module-tab glass-effect rounded-t-lg px-6 py-3 text-white font-medium mx-1 mb-2" onclick="showModule('supplier')"> | |
| <i data-feather="truck" class="inline w-4 h-4 mr-2"></i>Supplier Management | |
| </button> | |
| <button class="module-tab glass-effect rounded-t-lg px-6 py-3 text-white font-medium mx-1 mb-2" onclick="showModule('thirdparty')"> | |
| <i data-feather="globe" class="inline w-4 h-4 mr-2"></i>Third Party Management | |
| </button> | |
| <button class="module-tab glass-effect rounded-t-lg px-6 py-3 text-white font-medium mx-1 mb-2" onclick="showModule('contact')"> | |
| <i data-feather="credit-card" class="inline w-4 h-4 mr-2"></i>Contact Management | |
| </button> | |
| </div> | |
| <!-- Customer Management Module --> | |
| <div id="customer-module" class="module-content"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Customer Info Section --> | |
| <div class="lg:col-span-2 bg-white rounded-2xl p-6 shadow-lg"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-semibold text-gray-800">Customer Information</h3> | |
| <button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors"> | |
| <i data-feather="plus" class="inline w-4 h-4 mr-2"></i>Add Customer | |
| </button> | |
| </div> | |
| <!-- Company Account Selection --> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Company Account</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"> | |
| <option>舒适护理</option> | |
| <option>舒适实业</option> | |
| <option>舒适医疗</option> | |
| </select> | |
| </div> | |
| <!-- Customer List --> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="border-b"> | |
| <th class="text-left py-3 px-2">Customer Name</th> | |
| <th class="text-left py-3 px-2">Contact</th> | |
| <th class="text-left py-3 px-2">Phone</th> | |
| <th class="text-left py-3 px-2">Outstanding</th> | |
| <th class="text-left py-3 px-2">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-3 px-2">ABC Medical Supplies</td> | |
| <td class="py-3 px-2">John Smith</td> | |
| <td class="py-3 px-2">+86 138 0000 0001</td> | |
| <td class="py-3 px-2 text-red-600">¥45,000</td> | |
| <td class="py-3 px-2"> | |
| <button class="text-blue-600 hover:text-blue-800 mr-2"> | |
| <i data-feather="eye" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-3 px-2">Global Healthcare Inc.</td> | |
| <td class="py-3 px-2">Sarah Johnson</td> | |
| <td class="py-3 px-2">+86 138 0000 0002</td> | |
| <td class="py-3 px-2 text-green-600">¥0</td> | |
| <td class="py-3 px-2"> | |
| <button class="text-blue-600 hover:text-blue-800 mr-2"> | |
| <i data-feather="eye" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Customer Debt Section --> | |
| <div class="bg-white rounded-2xl p-6 shadow-lg"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Customer Debt Overview</h3> | |
| <div class="space-y-4"> | |
| <div class="bg-red-50 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-600">Total Outstanding</span> | |
| <span class="text-2xl font-bold text-red-600">¥125,000</span> | |
| </div> | |
| </div> | |
| <div class="bg-orange-50 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-600">Overdue Amount</span> | |
| <span class="text-xl font-bold text-orange-600">¥45,000</span> | |
| </div> | |
| <div class="text-sm text-gray-500">3 customers overdue</div> | |
| </div> | |
| <div class="bg-green-50 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-600">Due This Month</span> | |
| <span class="text-xl font-bold text-green-600">¥80,000</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition-colors"> | |
| <i data-feather="download" class="inline w-4 h-4 mr-2"></i>Export Report | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Supplier Management Module --> | |
| <div id="supplier-module" class="module-content hidden"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Supplier Info Section --> | |
| <div class="lg:col-span-2 bg-white rounded-2xl p-6 shadow-lg"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-semibold text-gray-800">Supplier Information</h3> | |
| <button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors"> | |
| <i data-feather="plus" class="inline w-4 h-4 mr-2"></i>Add Supplier | |
| </button> | |
| </div> | |
| <!-- Company Account Selection --> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Company Account</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"> | |
| <option>舒适护理</option> | |
| <option>舒适实业</option> | |
| <option>舒适医疗</option> | |
| </select> | |
| </div> | |
| <!-- Supplier List --> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="border-b"> | |
| <th class="text-left py-3 px-2">Supplier Name</th> | |
| <th class="text-left py-3 px-2">Contact</th> | |
| <th class="text-left py-3 px-2">Phone</th> | |
| <th class="text-left py-3 px-2">Outstanding</th> | |
| <th class="text-left py-3 px-2">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-3 px-2">Raw Materials Co.</td> | |
| <td class="py-3 px-2">Mike Chen</td> | |
| <td class="py-3 px-2">+86 138 0000 0003</td> | |
| <td class="py-3 px-2 text-red-600">¥78,000</td> | |
| <td class="py-3 px-2"> | |
| <button class="text-blue-600 hover:text-blue-800 mr-2"> | |
| <i data-feather="eye" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-3 px-2">Packaging Supplies Ltd.</td> | |
| <td class="py-3 px-2">Lisa Wang</td> | |
| <td class="py-3 px-2">+86 138 0000 0004</td> | |
| <td class="py-3 px-2 text-green-600">¥0</td> | |
| <td class="py-3 px-2"> | |
| <button class="text-blue-600 hover:text-blue-800 mr-2"> | |
| <i data-feather="eye" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Supplier Debt Section --> | |
| <div class="bg-white rounded-2xl p-6 shadow-lg"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Supplier Debt Overview</h3> | |
| <div class="space-y-4"> | |
| <div class="bg-red-50 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-600">Total Outstanding</span> | |
| <span class="text-2xl font-bold text-red-600">¥156,000</span> | |
| </div> | |
| </div> | |
| <div class="bg-orange-50 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-600">Overdue Amount</span> | |
| <span class="text-xl font-bold text-orange-600">¥78,000</span> | |
| </div> | |
| <div class="text-sm text-gray-500">2 suppliers overdue</div> | |
| </div> | |
| <div class="bg-green-50 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-600">Due This Month</span> | |
| <span class="text-xl font-bold text-green-600">¥78,000</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition-colors"> | |
| <i data-feather="download" class="inline w-4 h-4 mr-2"></i>Export Report | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Third Party Management Module --> | |
| <div id="thirdparty-module" class="module-content hidden"> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Third Party Info Section --> | |
| <div class="lg:col-span-2 bg-white rounded-2xl p-6 shadow-lg"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-semibold text-gray-800">Third Party Information</h3> | |
| <button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors"> | |
| <i data-feather="plus" class="inline w-4 h-4 mr-2"></i>Add Third Party | |
| </button> | |
| </div> | |
| <!-- Company Account Selection --> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Company Account</label> | |
| <select class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"> | |
| <option>舒适护理</option> | |
| <option>舒适实业</option> | |
| <option>舒适医疗</option> | |
| </select> | |
| </div> | |
| <!-- Third Party List --> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="border-b"> | |
| <th class="text-left py-3 px-2">Third Party Name</th> | |
| <th class="text-left py-3 px-2">Contact</th> | |
| <th class="text-left py-3 px-2">Phone</th> | |
| <th class="text-left py-3 px-2">Outstanding</th> | |
| <th class="text-left py-3 px-2">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-3 px-2">Logistics Partner Inc.</td> | |
| <td class="py-3 px-2">Tom Liu</td> | |
| <td class="py-3 px-2">+86 138 0000 0005</td> | |
| <td class="py-3 px-2 text-green-600">¥0</td> | |
| <td class="py-3 px-2"> | |
| <button class="text-blue-600 hover:text-blue-800 mr-2"> | |
| <i data-feather="eye" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-3 px-2">Quality Inspection Service</td> | |
| <td class="py-3 px-2">Amy Zhang</td> | |
| <td class="py-3 px-2">+86 138 0000 0006</td> | |
| <td class="py-3 px-2 text-orange-600">¥12,000</td> | |
| <td class="py-3 px-2"> | |
| <button class="text-blue-600 hover:text-blue-800 mr-2"> | |
| <i data-feather="eye" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Third Party Debt Section --> | |
| <div class="bg-white rounded-2xl p-6 shadow-lg"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Third Party Debt Overview</h3> | |
| <div class="space-y-4"> | |
| <div class="bg-blue-50 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-600">Total Outstanding</span> | |
| <span class="text-2xl font-bold text-blue-600">¥12,000</span> | |
| </div> | |
| </div> | |
| <div class="bg-orange-50 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-600">Overdue Amount</span> | |
| <span class="text-xl font-bold text-orange-600">¥0</span> | |
| </div> | |
| <div class="text-sm text-gray-500">No overdue payments</div> | |
| </div> | |
| <div class="bg-green-50 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="text-gray-600">Due This Month</span> | |
| <span class="text-xl font-bold text-green-600">¥12,000</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 bg-purple-600 text-white py-2 rounded-lg hover:bg-purple-700 transition-colors"> | |
| <i data-feather="download" class="inline w-4 h-4 mr-2"></i>Export Report | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contact Management Module --> | |
| <div id="contact-module" class="module-content hidden"> | |
| <div class="bg-white rounded-2xl p-6 shadow-lg"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-xl font-semibold text-gray-800">Contact Management</h3> | |
| <button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors"> | |
| <i data-feather="plus" class="inline w-4 h-4 mr-2"></i>Add Contact | |
| </button> | |
| </div> | |
| <!-- Contact Search --> | |
| <div class="mb-6"> | |
| <div class="flex flex-col md:flex-row gap-4"> | |
| <input type="text" placeholder="Search contacts..." class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"> | |
| <select class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"> | |
| <option>All Types</option> | |
| <option>Customer</option> | |
| <option>Supplier</option> | |
| <option>Third Party</option> | |
| </select> | |
| <button class="bg-purple-600 text-white px-6 py-2 rounded-lg hover:bg-purple-700 transition-colors"> | |
| <i data-feather="search" class="inline w-4 h-4 mr-2"></i>Search | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Contact List --> | |
| <div class="overflow-x-auto"> | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="border-b"> | |
| <th class="text-left py-3 px-2">Name</th> | |
| <th class="text-left py-3 px-2">Company</th> | |
| <th class="text-left py-3 px-2">Type</th> | |
| <th class="text-left py-3 px-2">Phone</th> | |
| <th class="text-left py-3 px-2">Email</th> | |
| <th class="text-left py-3 px-2">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-3 px-2">John Smith</td> | |
| <td class="py-3 px-2">ABC Medical Supplies</td> | |
| <td class="py-3 px-2"><span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm">Customer</span></td> | |
| <td class="py-3 px-2">+86 138 0000 0001</td> | |
| <td class="py-3 px-2">john@abcmed.com</td> | |
| <td class="py-3 px-2"> | |
| <button class="text-blue-600 hover:text-blue-800 mr-2"> | |
| <i data-feather="eye" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-3 px-2">Mike Chen</td> | |
| <td class="py-3 px-2">Raw Materials Co.</td> | |
| <td class="py-3 px-2"><span class="bg-green-100 text-green-800 px-2 py-1 rounded text-sm">Supplier</span></td> | |
| <td class="py-3 px-2">+86 138 0000 0003</td> | |
| <td class="py-3 px-2">mike@rawmat.com</td> | |
| <td class="py-3 px-2"> | |
| <button class="text-blue-600 hover:text-blue-800 mr-2"> | |
| <i data-feather="eye" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| <tr class="border-b hover:bg-gray-50"> | |
| <td class="py-3 px-2">Tom Liu</td> | |
| <td class="py-3 px-2">Logistics Partner Inc.</td> | |
| <td class="py-3 px-2"><span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-sm">Third Party</span></td> | |
| <td class="py-3 px-2">+86 138 0000 0005</td> | |
| <td class="py-3 px-2">tom@logistics.com</td> | |
| <td class="py-3 px-2"> | |
| <button class="text-blue-600 hover:text-blue-800 mr-2"> | |
| <i data-feather="eye" class="w-4 h-4"></i> | |
| </button> | |
| <button class="text-green-600 hover:text-green-800"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| // Initialize Vanta.js background | |
| VANTA.GLOBE({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x667eea, | |
| backgroundColor: 0x764ba2, | |
| size: 0.8 | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Module switching function | |
| function showModule(moduleName) { | |
| // Hide all modules | |
| document.querySelectorAll('.module-content').forEach(module => { | |
| module.classList.add('hidden'); | |
| }); | |
| // Remove active class from all tabs | |
| document.querySelectorAll('.module-tab').forEach(tab => { | |
| tab.classList.remove('active'); | |
| }); | |
| // Show selected module | |
| document.getElementById(moduleName + '-module').classList.remove('hidden'); | |
| // Add active class to clicked tab | |
| event.target.closest('.module-tab').classList.add('active'); | |
| // Re-initialize feather icons for the new content | |
| feather.replace(); | |
| } | |
| </script> | |
| </body> | |
| </html> |