Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ConstructoStock Pro - Dashboard</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> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#3b82f6', | |
| secondary: '#10b981' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar.collapsed { | |
| width: 80px; | |
| } | |
| .sidebar.collapsed .nav-text { | |
| display: none; | |
| } | |
| .main-content { | |
| transition: all 0.3s ease; | |
| } | |
| .stat-card { | |
| transition: transform 0.2s ease; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-2px); | |
| } | |
| #vanta-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen flex"> | |
| <!-- Vanta.js Background --> | |
| <div id="vanta-bg"></div> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-white shadow-lg h-screen fixed left-0 top-0 z-40 w-64"> | |
| <div class="p-6 border-b border-gray-200"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center"> | |
| <i data-feather="tool" class="text-white"></i> | |
| </div> | |
| <span class="text-xl font-bold text-gray-800">ConstructoStock</span> | |
| </div> | |
| </div> | |
| <nav class="mt-8"> | |
| <a href="index.html" class="flex items-center px-6 py-3 text-primary bg-primary/10 border-r-4 border-primary"> | |
| <i data-feather="home" class="w-5 h-5"></i> | |
| <span class="nav-text ml-3 font-medium">Dashboard</span> | |
| </a> | |
| <a href="projects.html" class="flex items-center px-6 py-3 text-gray-600 hover:bg-gray-100"> | |
| <i data-feather="clipboard" class="w-5 h-5"></i> | |
| <span class="nav-text ml-3 font-medium">Projects</span> | |
| </a> | |
| <a href="inventory.html" class="flex items-center px-6 py-3 text-gray-600 hover:bg-gray-100"> | |
| <i data-feather="package" class="w-5 h-5"></i> | |
| <span class="nav-text ml-3 font-medium">Inventory</span> | |
| </a> | |
| <a href="warehouse.html" class="flex items-center px-6 py-3 text-gray-600 hover:bg-gray-100"> | |
| <i data-feather="warehouse" class="w-5 h-5"></i> | |
| <span class="nav-text ml-3 font-medium">Warehouse</span> | |
| </a> | |
| <a href="reports.html" class="flex items-center px-6 py-3 text-gray-600 hover:bg-gray-100"> | |
| <i data-feather="bar-chart-2" class="w-5 h-5"></i> | |
| <span class="nav-text ml-3 font-medium">Reports</span> | |
| </a> | |
| <a href="users.html" class="flex items-center px-6 py-3 text-gray-600 hover:bg-gray-100"> | |
| <i data-feather="users" class="w-5 h-5"></i> | |
| <span class="nav-text ml-3 font-medium">Users</span> | |
| </a> | |
| </nav> | |
| <div class="absolute bottom-0 w-full p-6 border-t border-gray-200"> | |
| <div class="flex items-center space-x-3"> | |
| <img src="http://static.photos/people/40x40/1" alt="Profile" class="w-8 h-8 rounded-full"> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900 truncate">John Contractor</p> | |
| <p class="text-xs text-gray-500 truncate">Admin</p> | |
| </div> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i data-feather="settings" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="main-content flex-1 ml-64 p-8"> | |
| <!-- Header --> | |
| <div class="flex justify-between items-center mb-8"> | |
| <div> | |
| <h1 class="text-3xl font-bold text-gray-900">Dashboard Overview</h1> | |
| <p class="text-gray-600">Real-time inventory and project status across all sites</p> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400 w-4 h-4"></i> | |
| </div> | |
| <button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors"> | |
| <i data-feather="plus" class="w-4 h-4 inline mr-2"></i> | |
| New Project | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Stats Grid --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"> | |
| <div class="stat-card bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-600">Active Projects</p> | |
| <p class="text-2xl font-bold text-gray-900 mt-1">12</p> | |
| </div> | |
| <div class="p-3 bg-blue-50 rounded-lg"> | |
| <i data-feather="clipboard" class="w-6 h-6 text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-sm text-green-600"> | |
| <i data-feather="trending-up" class="w-4 h-4 mr-1"></i> | |
| <span>+2 from last month</span> | |
| </div> | |
| </div> | |
| <div class="stat-card bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-600">Total Inventory</p> | |
| <p class="text-2xl font-bold text-gray-900 mt-1">1,247</p> | |
| </div> | |
| <div class="p-3 bg-green-50 rounded-lg"> | |
| <i data-feather="package" class="w-6 h-6 text-secondary"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-sm text-red-600"> | |
| <i data-feather="trending-down" class="w-4 h-4 mr-1"></i> | |
| <span>-5% from last week</span> | |
| </div> | |
| </div> | |
| <div class="stat-card bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-600">Low Stock Items</p> | |
| <p class="text-2xl font-bold text-gray-900 mt-1">23</p> | |
| </div> | |
| <div class="p-3 bg-yellow-50 rounded-lg"> | |
| <i data-feather="alert-triangle" class="w-6 h-6 text-yellow-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-sm text-red-600"> | |
| <i data-feather="alert-circle" class="w-4 h-4 mr-1"></i> | |
| <span>Needs immediate attention</span> | |
| </div> | |
| </div> | |
| <div class="stat-card bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-600">Warehouse Capacity</p> | |
| <p class="text-2xl font-bold text-gray-900 mt-1">78%</p> | |
| </div> | |
| <div class="p-3 bg-purple-50 rounded-lg"> | |
| <i data-feather="warehouse" class="w-6 h-6 text-purple-600"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-purple-600 h-2 rounded-full" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts and Recent Activity --> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-8"> | |
| <!-- Inventory Chart --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-4">Inventory Levels by Category</h3> | |
| <div class="h-64 flex items-end space-x-2"> | |
| <div class="flex-1 flex flex-col items-center"> | |
| <div class="w-full bg-primary rounded-t-lg" style="height: 80%"></div> | |
| <span class="text-xs text-gray-600 mt-2">Lumber</span> | |
| </div> | |
| <div class="flex-1 flex flex-col items-center"> | |
| <div class="w-full bg-secondary rounded-t-lg" style="height: 65%"></div> | |
| <span class="text-xs text-gray-600 mt-2">Hardware</span> | |
| </div> | |
| <div class="flex-1 flex flex-col items-center"> | |
| <div class="w-full bg-yellow-500 rounded-t-lg" style="height: 45%"></div> | |
| <span class="text-xs text-gray-600 mt-2">Electrical</span> | |
| </div> | |
| <div class="flex-1 flex flex-col items-center"> | |
| <div class="w-full bg-purple-500 rounded-t-lg" style="height: 90%"></div> | |
| <span class="text-xs text-gray-600 mt-2">Plumbing</span> | |
| </div> | |
| <div class="flex-1 flex flex-col items-center"> | |
| <div class="w-full bg-red-500 rounded-t-lg" style="height: 30%"></div> | |
| <span class="text-xs text-gray-600 mt-2">Concrete</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100"> | |
| <h3 class="text-lg font-semibold text-gray-900 mb-4">Recent Activity</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="check-circle" class="w-4 h-4 text-green-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium text-gray-900">Delivery received</p> | |
| <p class="text-xs text-gray-500">500 units of 2x4 lumber at Warehouse A</p> | |
| </div> | |
| <span class="text-xs text-gray-400">2 min ago</span> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="truck" class="w-4 h-4 text-blue-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium text-gray-900">Transfer initiated</p> | |
| <p class="text-xs text-gray-500">Electrical supplies to Downtown Tower project</p> | |
| </div> | |
| <span class="text-xs text-gray-400">1 hour ago</span> | |
| </div> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center"> | |
| <i data-feather="alert-triangle" class="w-4 h-4 text-yellow-600"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm font-medium text-gray-900">Low stock alert</p> | |
| <p class="text-xs text-gray-500">Concrete mix running low at Warehouse B</p> | |
| </div> | |
| <span class="text-xs text-gray-400">3 hours ago</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </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: '#3b82f6', | |
| backgroundColor: '#f8fafc' | |
| }); | |
| // Initialize Feather Icons | |
| feather.replace(); | |
| // Add some animations | |
| document.addEventListener('DOMContentLoaded', function() { | |
| anime({ | |
| targets: '.stat-card', | |
| translateY: [20, 0], | |
| opacity: [0, 1], | |
| delay: anime.stagger(100), | |
| easing: 'easeOutExpo' | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |