|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>LabByte - Computer Inventory</title> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen flex flex-col"> |
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
<main class="flex-grow container mx-auto px-4 py-8"> |
|
|
<div class="flex justify-between items-center mb-8"> |
|
|
<h1 class="text-3xl font-bold text-gray-800">Computer Inventory</h1> |
|
|
<button id="add-machine-btn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center transition"> |
|
|
<i data-feather="plus" class="mr-2"></i> Add Machine |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<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"> |
|
|
<div class="p-3 rounded-full bg-blue-100 text-blue-600"> |
|
|
<i data-feather="monitor"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-gray-500">Total Machines</h3> |
|
|
<p class="text-2xl font-semibold" id="total-machines">0</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-green-100 text-green-600"> |
|
|
<i data-feather="cpu"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-gray-500">Windows PCs</h3> |
|
|
<p class="text-2xl font-semibold" id="total-pcs">0</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="p-3 rounded-full bg-purple-100 text-purple-600"> |
|
|
<i data-feather="cpu"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-gray-500">Mac Computers</h3> |
|
|
<p class="text-2xl font-semibold" id="total-macs">0</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 bg-white rounded-lg shadow overflow-hidden"> |
|
|
<div class="px-6 py-4 border-b border-gray-200"> |
|
|
<h2 class="text-xl font-semibold text-gray-800">All Machines</h2> |
|
|
</div> |
|
|
<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">ID</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">Model</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
|
|
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody id="inventory-table" class="bg-white divide-y divide-gray-200"> |
|
|
|
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div id="machine-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center p-4 z-50"> |
|
|
<div class="bg-white rounded-lg shadow-xl w-full max-w-md"> |
|
|
<div class="px-6 py-4 border-b border-gray-200 flex justify-between items-center"> |
|
|
<h3 class="text-lg font-semibold" id="modal-title">Add New Machine</h3> |
|
|
<button id="close-modal" class="text-gray-500 hover:text-gray-700"> |
|
|
<i data-feather="x"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<form id="machine-form"> |
|
|
<input type="hidden" id="machine-id"> |
|
|
<div class="mb-4"> |
|
|
<label for="machine-type" class="block text-sm font-medium text-gray-700 mb-1">Type</label> |
|
|
<select id="machine-type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option value="windows">Windows PC</option> |
|
|
<option value="mac">Mac Computer</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="machine-model" class="block text-sm font-medium text-gray-700 mb-1">Model</label> |
|
|
<input type="text" id="machine-model" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="machine-serial" class="block text-sm font-medium text-gray-700 mb-1">Serial Number</label> |
|
|
<input type="text" id="machine-serial" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="machine-location" class="block text-sm font-medium text-gray-700 mb-1">Location</label> |
|
|
<select id="machine-location" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option value="Lab A">Lab A</option> |
|
|
<option value="Lab B">Lab B</option> |
|
|
<option value="Lab C">Lab C</option> |
|
|
<option value="Lab D">Lab D</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label for="machine-status" class="block text-sm font-medium text-gray-700 mb-1">Status</label> |
|
|
<select id="machine-status" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<option value="Operational">Operational</option> |
|
|
<option value="Maintenance">Maintenance</option> |
|
|
<option value="Retired">Retired</option> |
|
|
</select> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
<div class="px-6 py-4 border-t border-gray-200 flex justify-end space-x-3"> |
|
|
<button id="cancel-modal" class="px-4 py-2 text-sm text-gray-600 hover:text-gray-800">Cancel</button> |
|
|
<button id="save-machine" class="px-4 py-2 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700">Save</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<custom-footer></custom-footer> |
|
|
|
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
<script src="script.js"></script> |
|
|
<script> |
|
|
feather.replace(); |
|
|
</script> |
|
|
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
|
|
</body> |
|
|
</html> |
