|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Crafty Configurator Hub | Admin 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> |
|
|
<style> |
|
|
.request-card:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
|
|
} |
|
|
.request-card { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.status-pending { |
|
|
background-color: #fef3c7; |
|
|
color: #d97706; |
|
|
} |
|
|
.status-processing { |
|
|
background-color: #dbeafe; |
|
|
color: #1d4ed8; |
|
|
} |
|
|
.status-completed { |
|
|
background-color: #dcfce7; |
|
|
color: #15803d; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100"> |
|
|
<div class="min-h-screen"> |
|
|
|
|
|
<div class="fixed inset-y-0 left-0 w-64 bg-white shadow-md"> |
|
|
<div class="flex items-center justify-center h-16 bg-indigo-600"> |
|
|
<div class="flex items-center"> |
|
|
<i data-feather="settings" class="text-white"></i> |
|
|
<span class="ml-2 text-xl font-semibold text-white">Admin Dashboard</span> |
|
|
</div> |
|
|
</div> |
|
|
<nav class="mt-8"> |
|
|
<div class="px-4 space-y-1"> |
|
|
<a href="#" class="bg-gray-100 text-indigo-600 group flex items-center px-4 py-3 text-sm font-medium rounded-md"> |
|
|
<i data-feather="inbox" class="text-indigo-600 mr-3"></i> |
|
|
Custom Requests |
|
|
</a> |
|
|
<a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-4 py-3 text-sm font-medium rounded-md"> |
|
|
<i data-feather="users" class="text-gray-400 group-hover:text-gray-500 mr-3"></i> |
|
|
Customers |
|
|
</a> |
|
|
<a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-4 py-3 text-sm font-medium rounded-md"> |
|
|
<i data-feather="package" class="text-gray-400 group-hover:text-gray-500 mr-3"></i> |
|
|
Products |
|
|
</a> |
|
|
<a href="#" class="text-gray-600 hover:bg-gray-50 hover:text-gray-900 group flex items-center px-4 py-3 text-sm font-medium rounded-md"> |
|
|
<i data-feather="settings" class="text-gray-400 group-hover:text-gray-500 mr-3"></i> |
|
|
Settings |
|
|
</a> |
|
|
</div> |
|
|
<div class="mt-8 px-4"> |
|
|
<button id="adminLogoutBtn" class="w-full flex items-center justify-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700"> |
|
|
<i data-feather="log-out" class="mr-2"></i> Logout |
|
|
</button> |
|
|
</div> |
|
|
</nav> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="pl-64"> |
|
|
|
|
|
<header class="bg-white shadow-sm"> |
|
|
<div class="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h1 class="text-2xl font-bold text-gray-900">Customization Requests</h1> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div class="relative"> |
|
|
<input type="text" placeholder="Search requests..." |
|
|
class="pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
|
|
<i data-feather="search" class="text-gray-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
<button class="p-2 rounded-full bg-gray-100 text-gray-500 hover:text-gray-600"> |
|
|
<i data-feather="bell"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
|
|
<div class="flex justify-between items-center mb-6"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<h2 class="text-lg font-medium text-gray-900">All Requests</h2> |
|
|
<span class="px-2 py-1 text-xs font-medium rounded-full bg-indigo-100 text-indigo-800">24 New</span> |
|
|
</div> |
|
|
<div class="flex space-x-3"> |
|
|
<select class="border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"> |
|
|
<option>Filter by Status</option> |
|
|
<option>Pending</option> |
|
|
<option>Processing</option> |
|
|
<option>Completed</option> |
|
|
</select> |
|
|
<button class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"> |
|
|
Export Data |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white shadow rounded-lg overflow-hidden"> |
|
|
<div class="divide-y divide-gray-200"> |
|
|
|
|
|
<div class="request-card p-6 hover:bg-gray-50"> |
|
|
<div class="flex justify-between"> |
|
|
<div> |
|
|
<div class="flex items-center"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Premium Watch</h3> |
|
|
<span class="ml-3 px-2 py-1 text-xs font-medium rounded-full status-pending">Pending</span> |
|
|
</div> |
|
|
<p class="mt-1 text-sm text-gray-600">Custom color: Blue | Material: Metal</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="text-sm text-gray-500">Requested on <time datetime="2023-05-15">May 15, 2023</time></p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 flex justify-between items-center"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-600">John Doe • [email protected]</p> |
|
|
<p class="mt-1 text-sm text-gray-500">"Please include initials 'JD' engraved on the back"</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
|
View Details |
|
|
</button> |
|
|
<button class="px-3 py-1 border border-transparent rounded-md text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
|
Assign |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="request-card p-6 hover:bg-gray-50"> |
|
|
<div class="flex justify-between"> |
|
|
<div> |
|
|
<div class="flex items-center"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Designer Bag</h3> |
|
|
<span class="ml-3 px-2 py-1 text-xs font-medium rounded-full status-processing">Processing</span> |
|
|
</div> |
|
|
<p class="mt-1 text-sm text-gray-600">Custom color: Red | Material: Leather</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="text-sm text-gray-500">Requested on <time datetime="2023-05-14">May 14, 2023</time></p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 flex justify-between items-center"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-600">Jane Smith • [email protected]</p> |
|
|
<p class="mt-1 text-sm text-gray-500">"Need this before May 20th for a gift"</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
|
View Details |
|
|
</button> |
|
|
<button class="px-3 py-1 border border-transparent rounded-md text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"> |
|
|
Complete |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="request-card p-6 hover:bg-gray-50"> |
|
|
<div class="flex justify-between"> |
|
|
<div> |
|
|
<div class="flex items-center"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Custom Sneakers</h3> |
|
|
<span class="ml-3 px-2 py-1 text-xs font-medium rounded-full status-completed">Completed</span> |
|
|
</div> |
|
|
<p class="mt-1 text-sm text-gray-600">Custom color: Black/White | Material: Canvas</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<p class="text-sm text-gray-500">Requested on <time datetime="2023-05-10">May 10, 2023</time></p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 flex justify-between items-center"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-600">Michael Brown • [email protected]</p> |
|
|
<p class="mt-1 text-sm text-gray-500">"Please use premium packaging for gift"</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
|
View Details |
|
|
</button> |
|
|
<button class="px-3 py-1 border border-transparent rounded-md text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
|
|
Re-open |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-6 flex justify-between items-center"> |
|
|
<div> |
|
|
<p class="text-sm text-gray-700"> |
|
|
Showing <span class="font-medium">1</span> to <span class="font-medium">3</span> of <span class="font-medium">24</span> results |
|
|
</p> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" disabled> |
|
|
Previous |
|
|
</button> |
|
|
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"> |
|
|
1 |
|
|
</button> |
|
|
<button class="px-3 py-1 border border-transparent rounded-md text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700"> |
|
|
2 |
|
|
</button> |
|
|
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"> |
|
|
3 |
|
|
</button> |
|
|
<button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"> |
|
|
Next |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
document.getElementById('adminLogoutBtn').addEventListener('click', function() { |
|
|
window.location.href = 'index.html'; |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
