Spaces:

tnnguyen2404
/

assetninja-tracker

Running

App Files Files Community

assetninja-tracker / details.html

tnnguyen2404

The web portal should have the following functionalities:

5cb3a81 verified 2 months ago

raw

history blame contribute delete

17.1 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AssetNinja Tracker - Details</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'
	}
	}
	}
	}

	document.addEventListener('DOMContentLoaded', function() {
	feather.replace();

	// Get solution type from URL
	const urlParams = new URLSearchParams(window.location.search);
	const solutionType = urlParams.get('type');
	const itemId = urlParams.get('id');

	// Highlight solution type indicator
	document.getElementById('solutionTypeIndicator').classList.add(
	solutionType === 'asset' ? 'bg-primary' :
	solutionType === 'inventory' ? 'bg-secondary' : 'bg-warning'
	);

	// Set appropriate action buttons based on solution type
	const actionForm = document.getElementById('actionForm');
	if (solutionType === 'asset') {
	actionForm.innerHTML = `
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Action</label>
	<select id="actionSelect" class="w-full border-gray-300 rounded-md shadow-sm focus:border-primary focus:ring-primary">
	<option value="moved">Moved to</option>
	<option value="missing">Mark as Missing</option>
	</select>
	</div>
	<div id="locationField" class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Select Location</label>
	<select class="w-full border-gray-300 rounded-md shadow-sm focus:border-primary focus:ring-primary">
	<option>Office Floor 1</option>
	<option>Office Floor 2</option>
	<option>Conference Room A</option>
	<option>Storage Room</option>
	</select>
	</div>
	<button type="submit" class="w-full bg-primary text-white py-2 px-4 rounded-md hover:bg-primary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">
	Submit Action
	</button>
	`;
	} else if (solutionType === 'inventory') {
	actionForm.innerHTML = `
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Action</label>
	<select id="actionSelect" class="w-full border-gray-300 rounded-md shadow-sm focus:border-primary focus:ring-primary">
	<option value="scanned">Scanned at</option>
	<option value="consumed">Mark as Consumed</option>
	</select>
	</div>
	<div id="locationField" class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Select Location</label>
	<select class="w-full border-gray-300 rounded-md shadow-sm focus:border-primary focus:ring-primary">
	<option>Office Floor 1</option>
	<option>Office Floor 2</option>
	<option>Conference Room A</option>
	<option>Storage Room</option>
	</select>
	</div>
	<button type="submit" class="w-full bg-secondary text-white py-2 px-4 rounded-md hover:bg-secondary-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-secondary">
	Submit Action
	</button>
	`;
	} else {
	actionForm.innerHTML = `
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Action</label>
	<select id="actionSelect" class="w-full border-gray-300 rounded-md shadow-sm focus:border-primary focus:ring-primary">
	<option value="received">Received at</option>
	<option value="complete">Mark as Complete</option>
	</select>
	</div>
	<div id="locationField" class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Select Location</label>
	<select class="w-full border-gray-300 rounded-md shadow-sm focus:border-primary focus:ring-primary">
	<option>Office Floor 1</option>
	<option>Office Floor 2</option>
	<option>Conference Room A</option>
	<option>Storage Room</option>
	</select>
	</div>
	<button type="submit" class="w-full bg-warning text-white py-2 px-4 rounded-md hover:bg-warning-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-warning">
	Submit Action
	</button>
	`;
	}

	// Toggle location field based on action
	document.getElementById('actionSelect')?.addEventListener('change', function(e) {
	const locationField = document.getElementById('locationField');
	if (['moved', 'scanned', 'received'].includes(e.target.value)) {
	locationField.style.display = 'block';
	} else {
	locationField.style.display = 'none';
	}
	});

	// Highlight rows in tables
	function setupTableHighlight(tableClass, highlightClass) {
	const rows = document.querySelectorAll(`.${tableClass} tbody tr`);
	rows.forEach(row => {
	row.addEventListener('click', function() {
	const key = this.getAttribute('data-key');
	rows.forEach(r => r.classList.remove(highlightClass));
	document.querySelectorAll(`.${tableClass} tbody tr[data-key="${key}"]`)
	.forEach(r => r.classList.add(highlightClass));
	});
	});
	}

	setupTableHighlight('location-history', 'highlight-location');
	setupTableHighlight('action-history', 'highlight-user');
	});
	</script>
	<style>
	.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">
	<!-- Back button -->
	<a href="index.html" class="inline-flex items-center text-primary hover:text-primary-600 mb-6">
	<i data-feather="arrow-left" class="w-4 h-4 mr-2"></i>
	Back to Dashboard
	</a>

	<!-- Detail Summary and Action -->
	<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-8">
	<!-- Item Details -->
	<div class="lg:col-span-2 bg-white rounded-lg shadow p-6">
	<div class="flex items-start justify-between mb-4">
	<div>
	<div class="flex items-center space-x-3 mb-2">
	<span id="solutionTypeIndicator" class="w-3 h-3 rounded-full"></span>
	<span id="solutionTypeText" class="text-sm font-medium text-gray-500">Asset</span>
	</div>
	<h2 id="itemName" class="text-2xl font-bold text-gray-800">Laptop Dell XPS</h2>
	<p id="currentLocation" class="text-gray-600 mt-2">Current Location: Office Floor 3</p>
	</div>
	<div class="flex space-x-2">
	<button class="p-2 rounded-full bg-gray-100 text-gray-500 hover:bg-gray-200">
	<i data-feather="edit"></i>
	</button>
	</div>
	</div>
	</div>

	<!-- Action Form -->
	<div class="bg-white rounded-lg shadow p-6">
	<h3 class="text-lg font-medium text-gray-900 mb-4">Item Actions</h3>
	<form id="actionForm"></form>
	</div>
	</div>

	<!-- Location History -->
	<div class="bg-white rounded-lg shadow overflow-hidden mb-8">
	<div class="px-6 py-4 border-b border-gray-200">
	<h3 class="text-lg font-medium text-gray-900">Location History</h3>
	</div>
	<div class="overflow-x-auto">
	<table class="location-history 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">Location</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<tr data-key="floor3" class="cursor-pointer hover:bg-gray-50">
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Office Floor 3</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today, 10:30 AM</td>
	</tr>
	<tr data-key="confA" class="cursor-pointer hover:bg-gray-50">
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Conference Room A</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 2:15 PM</td>
	</tr>
	<tr data-key="floor2" class="cursor-pointer hover:bg-gray-50">
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Office Floor 2</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Monday, 9:00 AM</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>

	<!-- Action History -->
	<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">Action History</h3>
	</div>
	<div class="overflow-x-auto">
	<table class="action-history 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">User</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Time</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<tr data-key="john" class="cursor-pointer hover:bg-gray-50">
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">John Doe</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Moved to Office Floor 3</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today, 10:30 AM</td>
	</tr>
	<tr data-key="sarah" class="cursor-pointer hover:bg-gray-50">
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Sarah Williams</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Moved to Conference Room A</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 2:15 PM</td>
	</tr>
	<tr data-key="mike" class="cursor-pointer hover:bg-gray-50">
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">Mike Johnson</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Moved to Office Floor 2</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Monday, 9:00 AM</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>
	</div>
	</main>
	</div>

	<script>
	// 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>
	</body>
	</html>