Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Resource Utilization Tracker</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #4361ee; | |
| --secondary-color: #3f37c9; | |
| --accent-color: #4895ef; | |
| --light-color: #f8f9fa; | |
| --dark-color: #212529; | |
| --success-color: #4cc9f0; | |
| --warning-color: #f8961e; | |
| --danger-color: #f94144; | |
| --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| --border-radius: 12px; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: #f5f7ff; | |
| color: var(--dark-color); | |
| line-height: 1.6; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* Header */ | |
| header { | |
| background-color: white; | |
| box-shadow: var(--shadow); | |
| padding: 15px 0; | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .header-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 24px; | |
| font-weight: 700; | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| } | |
| .logo-icon { | |
| font-size: 32px; | |
| color: var(--primary-color); | |
| } | |
| .header-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| } | |
| .anycoder-link { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| .user-profile { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .user-avatar { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background-color: var(--primary-color); | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| } | |
| /* Main Content */ | |
| main { | |
| padding: 30px 0; | |
| } | |
| .dashboard-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .card { | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| padding: 25px; | |
| box-shadow: var(--shadow); | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .card-title { | |
| font-size: 18px; | |
| font-weight: 600; | |
| margin-bottom: 15px; | |
| color: var(--dark-color); | |
| } | |
| .card-value { | |
| font-size: 32px; | |
| font-weight: 700; | |
| color: var(--primary-color); | |
| margin-bottom: 10px; | |
| } | |
| .card-subtitle { | |
| font-size: 14px; | |
| color: #6c757d; | |
| } | |
| .progress-bar { | |
| height: 8px; | |
| background-color: #e9ecef; | |
| border-radius: 4px; | |
| margin-top: 15px; | |
| overflow: hidden; | |
| } | |
| .progress { | |
| height: 100%; | |
| border-radius: 4px; | |
| background-color: var(--success-color); | |
| transition: width 0.5s ease; | |
| } | |
| /* Charts Section */ | |
| .charts-section { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .chart-card { | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| padding: 25px; | |
| box-shadow: var(--shadow); | |
| } | |
| .chart-container { | |
| height: 300px; | |
| margin-top: 20px; | |
| } | |
| /* Resource Table */ | |
| .resource-table { | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| padding: 25px; | |
| box-shadow: var(--shadow); | |
| overflow-x: auto; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| th, td { | |
| padding: 15px; | |
| text-align: left; | |
| border-bottom: 1px solid #e9ecef; | |
| } | |
| th { | |
| background-color: var(--light-color); | |
| font-weight: 600; | |
| color: var(--dark-color); | |
| } | |
| tr:hover { | |
| background-color: #f8f9fa; | |
| } | |
| .status { | |
| display: inline-block; | |
| padding: 5px 10px; | |
| border-radius: 20px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| text-transform: capitalize; | |
| } | |
| .status.available { | |
| background-color: #e7faf0; | |
| color: var(--success-color); | |
| } | |
| .status.allocated { | |
| background-color: #fff3e0; | |
| color: var(--warning-color); | |
| } | |
| .status.overloaded { | |
| background-color: #ffebee; | |
| color: var(--danger-color); | |
| } | |
| /* Filter Section */ | |
| .filter-section { | |
| background-color: white; | |
| border-radius: var(--border-radius); | |
| padding: 25px; | |
| box-shadow: var(--shadow); | |
| margin-bottom: 30px; | |
| } | |
| .filter-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .filter-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .filter-label { | |
| font-size: 14px; | |
| font-weight: 600; | |
| color: var(--dark-color); | |
| } | |
| select, input { | |
| padding: 10px 15px; | |
| border: 1px solid #e9ecef; | |
| border-radius: 8px; | |
| font-size: 14px; | |
| transition: border-color 0.3s ease; | |
| } | |
| select:focus, input:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| } | |
| .filter-actions { | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 10px; | |
| } | |
| .btn { | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 8px; | |
| font-size: 14px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary-color); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--secondary-color); | |
| } | |
| .btn-secondary { | |
| background-color: #e9ecef; | |
| color: var(--dark-color); | |
| } | |
| .btn-secondary:hover { | |
| background-color: #dee2e6; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 768px) { | |
| .header-content { | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .charts-section { | |
| grid-template-columns: 1fr; | |
| } | |
| .filter-actions { | |
| justify-content: flex-start; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .filter-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="container"> | |
| <div class="header-content"> | |
| <a href="#" class="logo"> | |
| <i class="fas fa-chart-line logo-icon"></i> | |
| <span>Resource Tracker</span> | |
| </a> | |
| <div class="header-right"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank">Built with anycoder</a> | |
| <div class="user-profile"> | |
| <div class="user-avatar">JD</div> | |
| <div> | |
| <div class="user-name">John Doe</div> | |
| <div class="user-role" style="font-size: 12px; color: #6c757d;">Admin</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main> | |
| <div class="container"> | |
| <!-- Dashboard Cards --> | |
| <div class="dashboard-grid"> | |
| <div class="card"> | |
| <div class="card-title">Total Resources</div> | |
| <div class="card-value">42</div> | |
| <div class="card-subtitle">Across all departments</div> | |
| <div class="progress-bar"> | |
| <div class="progress" style="width: 100%;"></div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-title">Utilization Rate</div> | |
| <div class="card-value">78%</div> | |
| <div class="card-subtitle">Average across resources</div> | |
| <div class="progress-bar"> | |
| <div class="progress" style="width: 78%; background-color: var(--warning-color);"></div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-title">Available Resources</div> | |
| <div class="card-value">9</div> | |
| <div class="card-subtitle">Ready for allocation</div> | |
| <div class="progress-bar"> | |
| <div class="progress" style="width: 21%; background-color: var(--success-color);"></div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-title">Overloaded Resources</div> | |
| <div class="card-value">3</div> | |
| <div class="card-subtitle">Need attention</div> | |
| <div class="progress-bar"> | |
| <div class="progress" style="width: 7%; background-color: var(--danger-color);"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Charts Section --> | |
| <div class="charts-section"> | |
| <div class="chart-card"> | |
| <div class="card-title">Department Utilization</div> | |
| <div class="chart-container" id="departmentChart"></div> | |
| </div> | |
| <div class="chart-card"> | |
| <div class="card-title">Resource Type Distribution</div> | |
| <div class="chart-container" id="resourceTypeChart"></div> | |
| </div> | |
| </div> | |
| <!-- Filter Section --> | |
| <div class="filter-section"> | |
| <h2 style="margin-bottom: 20px;">Filter Resources</h2> | |
| <div class="filter-grid"> | |
| <div class="filter-group"> | |
| <label class="filter-label">Department</label> | |
| <select id="departmentFilter"> | |
| <option value="all">All Departments</option> | |
| <option value="engineering">Engineering</option> | |
| <option value="marketing">Marketing</option> | |
| <option value="sales">Sales</option> | |
| <option value="hr">Human Resources</option> | |
| </select> | |
| </div> | |
| <div class="filter-group"> | |
| <label class="filter-label">Resource Type</label> | |
| <select id="resourceTypeFilter"> | |
| <option value="all">All Types</option> | |
| <option value="human">Human Resources</option> | |
| <option value="equipment">Equipment</option> | |
| <option value="software">Software Licenses</option> | |
| <option value="facility">Facilities</option> | |
| </select> | |
| </div> | |
| <div class="filter-group"> | |
| <label class="filter-label">Status</label> | |
| <select id="statusFilter"> | |
| <option value="all">All Statuses</option> | |
| <option value="available">Available</option> | |
| <option value="allocated">Allocated</option> | |
| <option value="overloaded">Overloaded</option> | |
| </select> | |
| </div> | |
| <div class="filter-group"> | |
| <label class="filter-label">Search</label> | |
| <input type="text" id="searchInput" placeholder="Search resources..."> | |
| </div> | |
| </div> | |
| <div class="filter-actions"> | |
| <button class="btn btn-secondary" id="resetBtn">Reset</button> | |
| <button class="btn btn-primary" id="applyBtn">Apply Filters</button> | |
| </div> | |
| </div> | |
| <!-- Resource Table --> | |
| <div class="resource-table"> | |
| <h2 style="margin-bottom: 20px;">Resource Details</h2> | |
| <table id="resourceTable"> | |
| <thead> | |
| <tr> | |
| <th>Resource ID</th> | |
| <th>Name</th> | |
| <th>Type</th> | |
| <th>Department</th> | |
| <th>Utilization</th> | |
| <th>Status</th> | |
| <th>Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody id="resourceTableBody"> | |
| <!-- Table content will be populated by JavaScript --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| // Sample data for resources | |
| const resources = [ | |
| { id: 'RES-001', name: 'John Smith', type: 'human', department: 'engineering', utilization: 85, status: 'overloaded' }, | |
| { id: 'RES-002', name: 'Sarah Johnson', type: 'human', department: 'marketing', utilization: 65, status: 'allocated' }, | |
| { id: 'RES-003', name: 'Development Server', type: 'equipment', department: 'engineering', utilization: 92, status: 'overloaded' }, | |
| { id: 'RES-004', name: 'Adobe Creative Suite', type: 'software', department: 'marketing', utilization: 45, status: 'available' }, | |
| { id: 'RES-005', name: 'Meeting Room A', type: 'facility', department: 'hr', utilization: 30, status: 'available' }, | |
| { id: 'RES-006', name: 'Jane Doe', type: 'human', department: 'sales', utilization: 72, status: 'allocated' }, | |
| { id: 'RES-007', name: 'Testing Lab', type: 'equipment', department: 'engineering', utilization: 58, status: 'allocated' }, | |
| { id: 'RES-008', name: 'CRM Software', type: 'software', department: 'sales', utilization: 88, status: 'overloaded' }, | |
| { id: 'RES-009', name: 'Training Room', type: 'facility', department: 'hr', utilization: 15, status: 'available' }, | |
| { id: 'RES-010', name: 'Michael Brown', type: 'human', department: 'engineering', utilization: 68, status: 'allocated' } | |
| ]; | |
| // Initialize the application | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Populate the resource table | |
| populateResourceTable(resources); | |
| // Set up event listeners for filters | |
| document.getElementById('applyBtn').addEventListener('click', applyFilters); | |
| document.getElementById('resetBtn').addEventListener('click', resetFilters); | |
| // Initialize charts | |
| initCharts(); | |
| }); | |
| // Populate the resource table with data | |
| function populateResourceTable(data) { | |
| const tableBody = document.getElementById('resourceTableBody'); | |
| tableBody.innerHTML = ''; | |
| data.forEach(resource => { | |
| const row = document.createElement('tr'); | |
| row.innerHTML = ` | |
| <td>${resource.id}</td> | |
| <td>${resource.name}</td> | |
| <td>${resource.type}</td> | |
| <td>${resource.department}</td> | |
| <td> | |
| <div class="progress-bar" style="height: 6px; margin: 0;"> | |
| <div class="progress" style="width: ${resource.utilization}%; background-color: ${getUtilizationColor(resource.utilization)};"></div> | |
| </div> | |
| <span style="font-size: 12px; color: #6c757d;">${resource.utilization}%</span> | |
| </td> | |
| <td><span class="status ${resource.status}">${resource.status}</span></td> | |
| <td> | |
| <button class="btn" style="padding: 5px 10px; font-size: 12px; background-color: #e9ecef; color: var(--dark-color);" title="View Details"> | |
| <i class="fas fa-eye"></i> | |
| </button> | |
| <button class="btn" style="padding: 5px 10px; font-size: 12px; background-color: var(--primary-color); color: white;" title="Edit"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| </td> | |
| `; | |
| tableBody.appendChild(row); | |
| }); | |
| } | |
| // Get color based on utilization percentage | |
| function getUtilizationColor(utilization) { | |
| if (utilization < 50) return 'var(--success-color)'; | |
| if (utilization < 80) return 'var(--warning-color)'; | |
| return 'var(--danger-color)'; | |
| } | |
| // Apply filters to the resource table | |
| function applyFilters() { | |
| const department = document.getElementById('departmentFilter').value; | |
| const resourceType = document.getElementById('resourceTypeFilter').value; | |
| const status = document.getElementById('statusFilter').value; | |
| const searchTerm = document.getElementById('searchInput').value.toLowerCase(); | |
| const filteredResources = resources.filter(resource => { | |
| const matchesDepartment = department === 'all' || resource.department === department; | |
| const matchesType = resourceType === 'all' || resource.type === resourceType; | |
| const matchesStatus = status === 'all' || resource.status === status; | |
| const matchesSearch = resource.name.toLowerCase().includes(searchTerm) || | |
| resource.id.toLowerCase().includes(searchTerm) || | |
| resource.department.toLowerCase().includes(searchTerm); | |
| return matchesDepartment && matchesType && matchesStatus && matchesSearch; | |
| }); | |
| populateResourceTable(filteredResources); | |
| } | |
| // Reset all filters | |
| function resetFilters() { | |
| document.getElementById('departmentFilter').value = 'all'; | |
| document.getElementById('resourceTypeFilter').value = 'all'; | |
| document.getElementById('statusFilter').value = 'all'; | |
| document.getElementById('searchInput').value = ''; | |
| populateResourceTable(resources); | |
| } | |
| // Initialize charts (simplified representation) | |
| function initCharts() { | |
| // Department Utilization Chart | |
| const departmentChart = document.getElementById('departmentChart'); | |
| departmentChart.innerHTML = ` | |
| <div style="display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 20px;"> | |
| <div style="display: flex; align-items: center; margin-bottom: 15px;"> | |
| <div style="width: 20px; height: 20px; background-color: var(--primary-color); margin-right: 10px;"></div> | |
| <span>Engineering: 82%</span> | |
| </div> | |
| <div style="display: flex; align-items: center; margin-bottom: 15px;"> | |
| <div style="width: 20px; height: 20px; background-color: var(--success-color); margin-right: 10px;"></div> | |
| <span>Marketing: 55%</span> | |
| </div> | |
| <div style="display: flex; align-items: center; margin-bottom: 15px;"> | |
| <div style="width: 20px; height: 20px; background-color: var(--warning-color); margin-right: 10px;"></div> | |
| <span>Sales: 78%</span> | |
| </div> | |
| <div style="display: flex; align-items: center;"> | |
| <div style="width: 20px; height: 20px; background-color: var(--danger-color); margin-right: 10px;"></div> | |
| <span>HR: 25%</span> | |
| </div> | |
| </div> | |
| `; | |
| // Resource Type Distribution Chart | |
| const resourceTypeChart = document.getElementById('resourceTypeChart'); | |
| resourceTypeChart.innerHTML = ` | |
| <div style="display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 20px;"> | |
| <div style="display: flex; align-items: center; margin-bottom: 15px;"> | |
| <div style="width: 20px; height: 20px; background-color: var(--primary-color); margin-right: 10px;"></div> | |
| <span>Human Resources: 40%</span> | |
| </div> | |
| <div style="display: flex; align-items: center; margin-bottom: 15px;"> | |
| <div style="width: 20px; height: 20px; background-color: var(--success-color); margin-right: 10px;"></div> | |
| <span>Equipment: 30%</span> | |
| </div> | |
| <div style="display: flex; align-items: center; margin-bottom: 15px;"> | |
| <div style="width: 20px; height: 20px; background-color: var(--warning-color); margin-right: 10px;"></div> | |
| <span>Software: 20%</span> | |
| </div> | |
| <div style="display: flex; align-items: center;"> | |
| <div style="width: 20px; height: 20px; background-color: var(--danger-color); margin-right: 10px;"></div> | |
| <span>Facilities: 10%</span> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| </script> | |
| </body> | |
| </html> |