Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AssetNinja Tracker - 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> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#3B82F6', | |
| secondary: '#10B981', | |
| warning: '#F59E0B' | |
| } | |
| } | |
| } | |
| } | |
| function highlightSolutionType(type) { | |
| const rows = document.querySelectorAll('#itemsTable tr'); | |
| rows.forEach(row => row.classList.remove('highlight-row')); | |
| document.querySelectorAll(`#itemsTable tr[data-solution-type="${type}"]`) | |
| .forEach(row => row.classList.add('highlight-row')); | |
| } | |
| // Toggle user dropdown | |
| document.getElementById('userDropdownBtn')?.addEventListener('click', function() { | |
| const dropdown = document.getElementById('userDropdown'); | |
| dropdown.classList.toggle('hidden'); | |
| }); | |
| // Close dropdown when clicking outside | |
| document.addEventListener('click', function(event) { | |
| const dropdownBtn = document.getElementById('userDropdownBtn'); | |
| const dropdown = document.getElementById('userDropdown'); | |
| if (!dropdownBtn.contains(event.target) && !dropdown.contains(event.target)) { | |
| dropdown.classList.add('hidden'); | |
| } | |
| }); | |
| </script> | |
| <style> | |
| .highlight-row { | |
| background-color: rgba(59, 130, 246, 0.1); | |
| } | |
| .highlight-location { | |
| background-color: rgba(16, 185, 129, 0.1); | |
| } | |
| .highlight-user { | |
| background-color: rgba(249, 168, 37, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <div class="min-h-screen flex flex-col"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="package" class="text-primary"></i> | |
| <h1 class="text-xl font-bold text-gray-800">AssetNinja Tracker</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button id="userDropdownBtn" class="flex items-center space-x-2 focus:outline-none"> | |
| <span class="text-sm font-medium text-gray-700">John Doe</span> | |
| <i data-feather="chevron-down" class="w-4 h-4 text-gray-500"></i> | |
| </button> | |
| <div id="userDropdown" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Jane Smith</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Mike Johnson</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sarah Williams</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">David Brown</a> | |
| </div> | |
| </div> | |
| <button class="p-2 rounded-full bg-gray-100 text-gray-500 hover:bg-gray-200"> | |
| <i data-feather="bell"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main class="flex-grow"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="mb-8"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Dashboard Overview</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Total Assets</p> | |
| <p class="text-2xl font-bold text-primary mt-1">42</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-blue-50 text-primary"> | |
| <i data-feather="box"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Inventory Items</p> | |
| <p class="text-2xl font-bold text-secondary mt-1">28</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-green-50 text-secondary"> | |
| <i data-feather="clipboard"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-6"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Work Orders</p> | |
| <p class="text-2xl font-bold text-yellow-500 mt-1">15</p> | |
| </div> | |
| <div class="p-3 rounded-full bg-yellow-50 text-yellow-500"> | |
| <i data-feather="tool"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-6 py-4 border-b border-gray-200"> | |
| <h3 class="text-lg font-medium text-gray-900">Items List</h3> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Solution Type</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Location</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200" id="itemsTable"> | |
| <!-- Asset Items --> | |
| <tr class="asset-row hover:bg-gray-50" data-solution-type="asset" onclick="highlightSolutionType('asset')"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Laptop Dell XPS</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Asset</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Office Floor 3</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <a href="details.html?type=asset&id=1" class="text-primary hover:text-primary-600">View Details</a> | |
| </td> | |
| </tr> | |
| <tr class="asset-row hover:bg-gray-50" data-solution-type="asset" onclick="highlightSolutionType('asset')"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Projector Epson</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Asset</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Conference Room B</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <a href="details.html?type=asset&id=2" class="text-primary hover:text-primary-600">View Details</a> | |
| </td> | |
| </tr> | |
| <tr class="asset-row hover:bg-gray-50" data-solution-type="asset" onclick="highlightSolutionType('asset')"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">MacBook Pro</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Asset</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Office Floor 1</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <a href="details.html?type=asset&id=3" class="text-primary hover:text-primary-600">View Details</a> | |
| </td> | |
| </tr> | |
| <tr class="asset-row hover:bg-gray-50" data-solution-type="asset" onclick="highlightSolutionType('asset')"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Monitor Dell 24"</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Asset</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Office Floor 2</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <a href="details.html?type=asset&id=4" class="text-primary hover:text-primary-600">View Details</a> | |
| </td> | |
| </tr> | |
| <!-- Inventory Items --> | |
| <tr class="inventory-row hover:bg-gray-50" data-solution-type="inventory" onclick="highlightSolutionType('inventory')"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">AA Batteries</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Inventory</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Storage Room</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <a href="details.html?type=inventory&id=1" class="text-secondary hover:text-secondary-600">View Details</a> | |
| </td> | |
| </tr> | |
| <tr class="inventory-row hover:bg-gray-50" data-solution-type="inventory" onclick="highlightSolutionType('inventory')"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">HDMI Cables</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Inventory</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">IT Closet</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <a href="details.html?type=inventory&id=2" class="text-secondary hover:text-secondary-600">View Details</a> | |
| </td> | |
| </tr> | |
| <tr class="inventory-row hover:bg-gray-50" data-solution-type="inventory" onclick="highlightSolutionType('inventory')"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">USB Hubs</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Inventory</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Office Floor 2</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <a href="details.html?type=inventory&id=3" class="text-secondary hover:text-secondary-600">View Details</a> | |
| </td> | |
| </tr> | |
| <tr class="inventory-row hover:bg-gray-50" data-solution-type="inventory" onclick="highlightSolutionType('inventory')"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Notebooks</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Inventory</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Supply Cabinet</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <a href="details.html?type=inventory&id=4" class="text-secondary hover:text-secondary-600">View Details</a> | |
| </td> | |
| </tr> | |
| <!-- Work Order Items --> | |
| <tr class="workorder-row hover:bg-gray-50" data-solution-type="workorder" onclick="highlightSolutionType('workorder')"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Printer Maintenance</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Work Order</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Office Floor 1</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <a href="details.html?type=workorder&id=1" class="text-yellow-500 hover:text-yellow-600">View Details</a> | |
| </td> | |
| </tr> | |
| <tr class="workorder-row hover:bg-gray-50" data-solution-type="workorder" onclick="highlightSolutionType('workorder')"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Network Setup</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Work Order</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Conference Room A</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <a href="details.html?type=workorder&id=2" class="text-yellow-500 hover:text-yellow-600">View Details</a> | |
| </td> | |
| </tr> | |
| <tr class="workorder-row hover:bg-gray-50" data-solution-type="workorder" onclick="highlightSolutionType('workorder')"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Desk Assembly</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Work Order</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Office Floor 3</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <a href="details.html?type=workorder&id=3" class="text-yellow-500 hover:text-yellow-600">View Details</a> | |
| </td> | |
| </tr> | |
| <tr class="workorder-row hover:bg-gray-50" data-solution-type="workorder" onclick="highlightSolutionType('workorder')"> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Software Installation</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Work Order</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Office Floor 2</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"> | |
| <a href="details.html?type=workorder&id=4" class="text-yellow-500 hover:text-yellow-600">View Details</a> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |