| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>FloorMaster Pro - Flooring & Carpet Management</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#3a5a78', |
| secondary: '#f59e0b', |
| accent: '#10b981', |
| dark: '#1f2937', |
| light: '#f9fafb' |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| .sidebar { |
| transition: all 0.3s ease; |
| } |
| .dashboard-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); |
| } |
| .chart-container { |
| height: 300px; |
| } |
| @media (max-width: 768px) { |
| .sidebar { |
| position: fixed; |
| left: -100%; |
| top: 0; |
| z-index: 50; |
| height: 100vh; |
| } |
| .sidebar.active { |
| left: 0; |
| } |
| .overlay { |
| display: none; |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: rgba(0,0,0,0.5); |
| z-index: 40; |
| } |
| .overlay.active { |
| display: block; |
| } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 font-sans"> |
| <div class="flex h-screen overflow-hidden"> |
| |
| <button id="mobileMenuButton" class="md:hidden fixed top-4 left-4 z-50 bg-primary text-white p-2 rounded-lg"> |
| <i class="fas fa-bars text-xl"></i> |
| </button> |
|
|
| |
| <div id="overlay" class="overlay"></div> |
|
|
| |
| <div id="sidebar" class="sidebar bg-primary text-white w-64 flex-shrink-0"> |
| <div class="p-4 flex items-center justify-between border-b border-primary-light"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-home text-2xl text-secondary"></i> |
| <span class="text-xl font-bold">FloorMaster Pro</span> |
| </div> |
| <button id="closeSidebar" class="md:hidden text-white"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div class="p-4"> |
| <div class="flex items-center space-x-3 mb-6"> |
| <div class="w-12 h-12 rounded-full bg-primary-light flex items-center justify-center"> |
| <i class="fas fa-user text-xl"></i> |
| </div> |
| <div> |
| <p class="font-medium">Admin User</p> |
| <p class="text-xs text-primary-light">Administrator</p> |
| </div> |
| </div> |
| <nav> |
| <ul class="space-y-2"> |
| <li> |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg bg-primary-dark text-white"> |
| <i class="fas fa-tachometer-alt"></i> |
| <span>Dashboard</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-primary-dark text-white"> |
| <i class="fas fa-boxes"></i> |
| <span>Inventory</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-primary-dark text-white"> |
| <i class="fas fa-users"></i> |
| <span>Customers</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-primary-dark text-white"> |
| <i class="fas fa-file-invoice-dollar"></i> |
| <span>Orders</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-primary-dark text-white"> |
| <i class="fas fa-project-diagram"></i> |
| <span>Projects</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-primary-dark text-white"> |
| <i class="fas fa-tools"></i> |
| <span>Fitters</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-primary-dark text-white"> |
| <i class="fas fa-truck"></i> |
| <span>Suppliers</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-primary-dark text-white"> |
| <i class="fas fa-chart-line"></i> |
| <span>Financial</span> |
| </a> |
| </li> |
| <li> |
| <a href="#" class="flex items-center space-x-3 p-3 rounded-lg hover:bg-primary-dark text-white"> |
| <i class="fas fa-cog"></i> |
| <span>Settings</span> |
| </a> |
| </li> |
| </ul> |
| </nav> |
| </div> |
| <div class="absolute bottom-0 w-full p-4 border-t border-primary-light"> |
| <div class="flex items-center space-x-3 p-3 rounded-lg hover:bg-primary-dark text-white"> |
| <i class="fas fa-sign-out-alt"></i> |
| <span>Logout</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex-1 overflow-auto"> |
| <header class="bg-white shadow-sm"> |
| <div class="px-6 py-4 flex items-center justify-between"> |
| <h1 class="text-2xl font-bold text-dark">Dashboard Overview</h1> |
| <div class="flex items-center space-x-4"> |
| <div class="relative"> |
| <i class="fas fa-bell text-gray-500 text-xl"></i> |
| <span class="absolute -top-1 -right-1 bg-secondary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">3</span> |
| </div> |
| <div class="relative"> |
| <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-accent"> |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| <main class="p-6"> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"> |
| <div class="dashboard-card bg-white rounded-xl shadow-md p-6 transition duration-300"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500">Total Inventory</p> |
| <h3 class="text-2xl font-bold text-dark">1,248</h3> |
| <p class="text-sm text-accent flex items-center"> |
| <i class="fas fa-arrow-up mr-1"></i> 12% from last week |
| </p> |
| </div> |
| <div class="bg-accent bg-opacity-10 p-3 rounded-full"> |
| <i class="fas fa-boxes text-accent text-xl"></i> |
| </div> |
| </div> |
| </div> |
| <div class="dashboard-card bg-white rounded-xl shadow-md p-6 transition duration-300"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500">Active Projects</p> |
| <h3 class="text-2xl font-bold text-dark">24</h3> |
| <p class="text-sm text-secondary flex items-center"> |
| <i class="fas fa-arrow-up mr-1"></i> 3 new today |
| </p> |
| </div> |
| <div class="bg-secondary bg-opacity-10 p-3 rounded-full"> |
| <i class="fas fa-project-diagram text-secondary text-xl"></i> |
| </div> |
| </div> |
| </div> |
| <div class="dashboard-card bg-white rounded-xl shadow-md p-6 transition duration-300"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500">Pending Orders</p> |
| <h3 class="text-2xl font-bold text-dark">18</h3> |
| <p class="text-sm text-red-500 flex items-center"> |
| <i class="fas fa-arrow-down mr-1"></i> 2 overdue |
| </p> |
| </div> |
| <div class="bg-red-500 bg-opacity-10 p-3 rounded-full"> |
| <i class="fas fa-file-invoice-dollar text-red-500 text-xl"></i> |
| </div> |
| </div> |
| </div> |
| <div class="dashboard-card bg-white rounded-xl shadow-md p-6 transition duration-300"> |
| <div class="flex items-center justify-between"> |
| <div> |
| <p class="text-gray-500">Monthly Revenue</p> |
| <h3 class="text-2xl font-bold text-dark">$42,580</h3> |
| <p class="text-sm text-green-500 flex items-center"> |
| <i class="fas fa-arrow-up mr-1"></i> 8% from last month |
| </p> |
| </div> |
| <div class="bg-green-500 bg-opacity-10 p-3 rounded-full"> |
| <i class="fas fa-dollar-sign text-green-500 text-xl"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"> |
| |
| <div class="lg:col-span-2 bg-white rounded-xl shadow-md p-6"> |
| <div class="flex items-center justify-between mb-4"> |
| <h2 class="text-lg font-semibold text-dark">Financial Overview</h2> |
| <select class="border rounded-lg px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-accent"> |
| <option>Last 7 Days</option> |
| <option>Last 30 Days</option> |
| <option selected>Last 90 Days</option> |
| <option>This Year</option> |
| </select> |
| </div> |
| <div class="chart-container"> |
| <canvas id="financialChart"></canvas> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <h2 class="text-lg font-semibold text-dark mb-4">Recent Activity</h2> |
| <div class="space-y-4"> |
| <div class="flex items-start space-x-3"> |
| <div class="bg-accent bg-opacity-10 p-2 rounded-full"> |
| <i class="fas fa-project-diagram text-accent"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium">New project created</p> |
| <p class="text-xs text-gray-500">Commercial flooring for TechCorp</p> |
| <p class="text-xs text-gray-400">2 hours ago</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-3"> |
| <div class="bg-blue-500 bg-opacity-10 p-2 rounded-full"> |
| <i class="fas fa-truck text-blue-500"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium">Inventory received</p> |
| <p class="text-xs text-gray-500">500 sqm of hardwood flooring</p> |
| <p class="text-xs text-gray-400">5 hours ago</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-3"> |
| <div class="bg-secondary bg-opacity-10 p-2 rounded-full"> |
| <i class="fas fa-file-invoice-dollar text-secondary"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium">Order completed</p> |
| <p class="text-xs text-gray-500">Order #4582 for $3,250</p> |
| <p class="text-xs text-gray-400">Yesterday</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-3"> |
| <div class="bg-green-500 bg-opacity-10 p-2 rounded-full"> |
| <i class="fas fa-users text-green-500"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium">New customer added</p> |
| <p class="text-xs text-gray-500">Smith Residence - Residential project</p> |
| <p class="text-xs text-gray-400">Yesterday</p> |
| </div> |
| </div> |
| <div class="flex items-start space-x-3"> |
| <div class="bg-red-500 bg-opacity-10 p-2 rounded-full"> |
| <i class="fas fa-exclamation-triangle text-red-500"></i> |
| </div> |
| <div> |
| <p class="text-sm font-medium">Project delayed</p> |
| <p class="text-xs text-gray-500">Johnson Office - Carpet installation</p> |
| <p class="text-xs text-gray-400">2 days ago</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-6"> |
| |
| <div class="bg-white rounded-xl shadow-md p-6"> |
| <h2 class="text-lg font-semibold text-dark mb-4">Inventory Status</h2> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Product</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Type</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Stock</th> |
| <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
| </tr> |
| </thead> |
| <tbody class="bg-white divide-y divide-gray-200"> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-dark">Oak Hardwood</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Hardwood</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">320 sqm</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">In Stock</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-dark">Berber Carpet</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Carpet</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">85 sqm</td> |
| <td class="px-6 py-4 whitespace-nowrap"> |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Low Stock</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-dark">Vinyl Plank</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Luxury Vinyl</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">420 sqm</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">In Stock</span> |
| </td> |
| </tr> |
| <tr> |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-dark">Laminate Flooring</td> |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Lam |
| </html> |
