Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>UnitFlow Nexus - Enterprise Management Dashboard</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> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></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-card { | |
| transition: all 0.3s ease; | |
| border-left: 4px solid transparent; | |
| } | |
| .module-card:hover { | |
| transform: translateY(-5px); | |
| border-left-color: #667eea; | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| } | |
| </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"> | |
| <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> | |
| </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"> | |
| <!-- Welcome Section --> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-4xl font-bold text-white mb-4">Enterprise Management Dashboard</h2> | |
| <p class="text-purple-100 text-lg max-w-2xl mx-auto"> | |
| Comprehensive business management platform integrating all operational modules for seamless enterprise workflow | |
| </p> | |
| </div> | |
| <!-- Quick Stats --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12"> | |
| <div class="glass-effect rounded-xl p-6 text-white"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <i data-feather="users" class="w-8 h-8"></i> | |
| <span class="text-2xl font-bold">1,234</span> | |
| </div> | |
| <p class="text-purple-100">Total Units</p> | |
| </div> | |
| <div class="glass-effect rounded-xl p-6 text-white"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <i data-feather="package" class="w-8 h-8"></i> | |
| <span class="text-2xl font-bold">567</span> | |
| </div> | |
| <p class="text-purple-100">Active Products</p> | |
| </div> | |
| <div class="glass-effect rounded-xl p-6 text-white"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <i data-feather="shopping-cart" class="w-8 h-8"></i> | |
| <span class="text-2xl font-bold">89</span> | |
| </div> | |
| <p class="text-purple-100">Pending Orders</p> | |
| </div> | |
| <div class="glass-effect rounded-xl p-6 text-white"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <i data-feather="dollar-sign" class="w-8 h-8"></i> | |
| <span class="text-2xl font-bold">¥2.3M</span> | |
| </div> | |
| <p class="text-purple-100">Monthly Revenue</p> | |
| </div> | |
| </div> | |
| <!-- Modules Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"> | |
| <!-- Unit Management Center --> | |
| <div class="module-card bg-white rounded-2xl p-6 shadow-lg cursor-pointer" onclick="window.location.href='unit-management.html'"> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center"> | |
| <i data-feather="users" class="text-purple-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Unit Management Center</h3> | |
| </div> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="user-check" class="w-4 h-4 text-green-500"></i> | |
| <span>Customer Management</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="truck" class="w-4 h-4 text-blue-500"></i> | |
| <span>Supplier Management</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="globe" class="w-4 h-4 text-orange-500"></i> | |
| <span>Third Party Management</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="credit-card" class="w-4 h-4 text-red-500"></i> | |
| <span>Contact Management</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Product Center --> | |
| <div class="module-card bg-white rounded-2xl p-6 shadow-lg cursor-pointer" onclick="window.location.href='product-center.html'"> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center"> | |
| <i data-feather="package" class="text-blue-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Product Center</h3> | |
| </div> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="file-text" class="w-4 h-4 text-blue-500"></i> | |
| <span>Sample Management</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="box" class="w-4 h-4 text-green-500"></i> | |
| <span>Product Management</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="layers" class="w-4 h-4 text-purple-500"></i> | |
| <span>Material Management</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="settings" class="w-4 h-4 text-orange-500"></i> | |
| <span>Process Management</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="list" class="w-4 h-4 text-red-500"></i> | |
| <span>BOM Management</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Sales Center --> | |
| <div class="module-card bg-white rounded-2xl p-6 shadow-lg cursor-pointer" onclick="window.location.href='sales-center.html'"> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center"> | |
| <i data-feather="shopping-cart" class="text-green-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Sales Center</h3> | |
| </div> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="clipboard" class="w-4 h-4 text-green-500"></i> | |
| <span>Order Management</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="dollar-sign" class="w-4 h-4 text-yellow-500"></i> | |
| <span>Account Management</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="bar-chart-2" class="w-4 h-4 text-blue-500"></i> | |
| <span>Sales Overview</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Planning Center --> | |
| <div class="module-card bg-white rounded-2xl p-6 shadow-lg cursor-pointer" onclick="window.location.href='planning-center.html'"> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <div class="w-10 h-10 bg-orange-100 rounded-lg flex items-center justify-center"> | |
| <i data-feather="calendar" class="text-orange-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Planning Center</h3> | |
| </div> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="clipboard" class="w-4 h-4 text-blue-500"></i> | |
| <span>Material Control</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="cpu" class="w-4 h-4 text-green-500"></i> | |
| <span>Production Control</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Purchase Center --> | |
| <div class="module-card bg-white rounded-2xl p-6 shadow-lg cursor-pointer" onclick="window.location.href='purchase-center.html'"> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <div class="w-10 h-10 bg-red-100 rounded-lg flex items-center justify-center"> | |
| <i data-feather="shopping-bag" class="text-red-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Purchase Center</h3> | |
| </div> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="file-text" class="w-4 h-4 text-blue-500"></i> | |
| <span>Purchase Order</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="dollar-sign" class="w-4 h-4 text-yellow-500"></i> | |
| <span>Account Management</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="bar-chart-2" class="w-4 h-4 text-green-500"></i> | |
| <span>Purchase Overview</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Production Center --> | |
| <div class="module-card bg-white rounded-2xl p-6 shadow-lg cursor-pointer" onclick="window.location.href='production-center.html'"> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center"> | |
| <i data-feather="tool" class="text-indigo-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Production Center</h3> | |
| </div> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="play-circle" class="w-4 h-4 text-blue-500"></i> | |
| <span>Production Progress</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="trending-up" class="w-4 h-4 text-green-500"></i> | |
| <span>Production Statistics</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="monitor" class="w-4 h-4 text-purple-500"></i> | |
| <span>Production Overview</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Warehouse Center --> | |
| <div class="module-card bg-white rounded-2xl p-6 shadow-lg cursor-pointer" onclick="window.location.href='warehouse-center.html'"> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <div class="w-10 h-10 bg-teal-100 rounded-lg flex items-center justify-center"> | |
| <i data-feather="archive" class="text-teal-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Warehouse Center</h3> | |
| </div> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="settings" class="w-4 h-4 text-blue-500"></i> | |
| <span>Warehouse Setup</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="database" class="w-4 h-4 text-green-500"></i> | |
| <span>Inventory Management</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="activity" class="w-4 h-4 text-purple-500"></i> | |
| <span>Warehouse Statistics</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Quality Center --> | |
| <div class="module-card bg-white rounded-2xl p-6 shadow-lg cursor-pointer" onclick="window.location.href='quality-center.html'"> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <div class="w-10 h-10 bg-yellow-100 rounded-lg flex items-center justify-center"> | |
| <i data-feather="award" class="text-yellow-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Quality Center</h3> | |
| </div> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="check-circle" class="w-4 h-4 text-green-500"></i> | |
| <span>Quality Inspection</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="alert-triangle" class="w-4 h-4 text-red-500"></i> | |
| <span>Quality Management</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="file-text" class="w-4 h-4 text-blue-500"></i> | |
| <span>System Management</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- HR Center --> | |
| <div class="module-card bg-white rounded-2xl p-6 shadow-lg cursor-pointer" onclick="window.location.href='hr-center.html'"> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <div class="w-10 h-10 bg-pink-100 rounded-lg flex items-center justify-center"> | |
| <i data-feather="users" class="text-pink-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">HR Center</h3> | |
| </div> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="users" class="w-4 h-4 text-blue-500"></i> | |
| <span>Personnel Management</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="shield" class="w-4 h-4 text-green-500"></i> | |
| <span>Permission Settings</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Finance Center --> | |
| <div class="module-card bg-white rounded-2xl p-6 shadow-lg cursor-pointer" onclick="window.location.href='finance-center.html'"> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <div class="w-10 h-10 bg-emerald-100 rounded-lg flex items-center justify-center"> | |
| <i data-feather="dollar-sign" class="text-emerald-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Finance Center</h3> | |
| </div> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="home" class="w-4 h-4 text-blue-500"></i> | |
| <span>Fixed Assets</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="credit-card" class="w-4 h-4 text-green-500"></i> | |
| <span>Payment Management</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="file-text" class="w-4 h-4 text-purple-500"></i> | |
| <span>Invoice Management</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="pie-chart" class="w-4 h-4 text-orange-500"></i> | |
| <span>Cost Statistics</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Notification Center --> | |
| <div class="module-card bg-white rounded-2xl p-6 shadow-lg cursor-pointer" onclick="window.location.href='notification-center.html'"> | |
| <div class="flex items-center space-x-3 mb-4"> | |
| <div class="w-10 h-10 bg-gray-100 rounded-lg flex items-center justify-center"> | |
| <i data-feather="bell" class="text-gray-600"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Notification Center</h3> | |
| </div> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="bell" class="w-4 h-4 text-blue-500"></i> | |
| <span>Notification Management</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="clock" class="w-4 h-4 text-green-500"></i> | |
| <span>Operation Logs</span> | |
| </li> | |
| <li class="flex items-center space-x-2"> | |
| <i data-feather="trash-2" class="w-4 h-4 text-red-500"></i> | |
| <span>Recycle Bin</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </body> | |
| <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(); | |
| </script> | |
| </html> |