<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Admin Prize & Inventory Manager</title>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script>
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#5b13ec",
"background-light": "#f6f6f8",
"background-dark": "#161022",
"surface-dark": "#1f1a2e",
"surface-dark-lighter": "#2a243d",
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" },
},
},
}
</script>
<style>
body {
font-family: "Spline Sans", sans-serif;
}
/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #161022;
}
::-webkit-scrollbar-thumb {
background: #433b54;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #5b13ec;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark text-slate-900 dark:text-slate-100 h-screen overflow-hidden flex font-display selection:bg-primary/30">
<!-- Sidebar -->
<aside class="w-64 h-full bg-[#131118] border-r border-[#2e2839] flex flex-col flex-shrink-0 z-20">
<div class="p-6">
<div class="flex items-center gap-3 mb-8">
<div class="bg-primary/20 bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10 border border-primary/40 flex items-center justify-center text-primary font-bold text-xl">
A
</div>
<div class="flex flex-col">
<h1 class="text-white text-base font-bold leading-normal tracking-wide">Admin Portal</h1>
<p class="text-slate-400 text-xs font-normal leading-normal">Super Admin</p>
</div>
</div>
<nav class="flex flex-col gap-2">
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-colors group" href="#">
<span class="material-symbols-outlined text-slate-400 group-hover:text-white transition-colors">bar_chart</span>
<span class="text-sm font-medium">Dashboard</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg bg-primary text-white shadow-lg shadow-primary/25" href="#">
<span class="material-symbols-outlined fill-1">redeem</span>
<span class="text-sm font-bold">Prize Hub</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-colors group" href="#">
<span class="material-symbols-outlined text-slate-400 group-hover:text-white transition-colors">group</span>
<span class="text-sm font-medium">Users</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-colors group" href="#">
<span class="material-symbols-outlined text-slate-400 group-hover:text-white transition-colors">sports_esports</span>
<span class="text-sm font-medium">Quizzes</span>
</a>
<a class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-slate-400 hover:text-white hover:bg-white/5 transition-colors group" href="#">
<span class="material-symbols-outlined text-slate-400 group-hover:text-white transition-colors">settings</span>
<span class="text-sm font-medium">Settings</span>
</a>
</nav>
</div>
<div class="mt-auto p-6">
<button class="flex w-full items-center justify-center gap-2 rounded-lg h-10 px-4 border border-[#2e2839] hover:bg-[#2e2839] text-slate-300 text-sm font-semibold transition-colors">
<span class="material-symbols-outlined text-[18px]">logout</span>
<span>Log Out</span>
</button>
</div>
</aside>
<!-- Main Content Area -->
<main class="flex-1 h-full overflow-y-auto relative">
<div class="max-w-[1400px] mx-auto p-6 lg:p-10 flex flex-col gap-8">
<!-- Header & KPI Section -->
<div class="flex flex-col gap-6">
<div class="flex flex-wrap items-end justify-between gap-4">
<div class="flex flex-col gap-1">
<h1 class="text-3xl font-bold tracking-tight text-white">Prize Hub Management</h1>
<p class="text-slate-400">Monitor inventory health and approve user redemptions.</p>
</div>
<div class="flex gap-3">
<button class="flex items-center gap-2 bg-surface-dark border border-[#433b54] hover:bg-surface-dark-lighter text-white px-4 py-2.5 rounded-lg text-sm font-medium transition-colors">
<span class="material-symbols-outlined text-[20px]">history</span>
History Log
</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-surface-dark border border-[#2e2839] rounded-xl p-6 relative overflow-hidden group">
<div class="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-6xl text-primary">shopping_bag</span>
</div>
<p class="text-slate-400 text-sm font-medium mb-1">Total Claims</p>
<div class="flex items-baseline gap-3">
<h3 class="text-3xl font-bold text-white">1,245</h3>
<span class="text-emerald-400 text-sm font-bold flex items-center bg-emerald-400/10 px-1.5 py-0.5 rounded">
<span class="material-symbols-outlined text-sm mr-0.5">trending_up</span> 12%
</span>
</div>
</div>
<div class="bg-surface-dark border border-[#2e2839] rounded-xl p-6 relative overflow-hidden group">
<div class="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-6xl text-orange-500">inventory_2</span>
</div>
<p class="text-slate-400 text-sm font-medium mb-1">Low Stock Items</p>
<div class="flex items-baseline gap-3">
<h3 class="text-3xl font-bold text-white">8</h3>
<span class="text-orange-400 text-sm font-bold flex items-center bg-orange-400/10 px-1.5 py-0.5 rounded">
<span class="material-symbols-outlined text-sm mr-0.5">warning</span> Alert
</span>
</div>
</div>
<div class="bg-surface-dark border border-[#2e2839] rounded-xl p-6 relative overflow-hidden group">
<div class="absolute right-0 top-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-6xl text-purple-500">loyalty</span>
</div>
<p class="text-slate-400 text-sm font-medium mb-1">Points Redeemed</p>
<div class="flex items-baseline gap-3">
<h3 class="text-3xl font-bold text-white">850k</h3>
<span class="text-rose-400 text-sm font-bold flex items-center bg-rose-400/10 px-1.5 py-0.5 rounded">
<span class="material-symbols-outlined text-sm mr-0.5">trending_down</span> 5%
</span>
</div>
</div>
</div>
</div>
<!-- Content Split: Queue & Inventory -->
<div class="flex flex-col xl:flex-row gap-6 h-full">
<!-- Pending Claims Queue (Left/Top) -->
<div class="flex flex-col gap-4 w-full xl:w-[35%] min-w-[320px]">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<h2 class="text-xl font-bold text-white">Pending Queue</h2>
<span class="bg-primary text-white text-xs font-bold px-2 py-0.5 rounded-full">3</span>
</div>
<button class="text-primary hover:text-primary/80 text-sm font-semibold">View All</button>
</div>
<div class="flex flex-col gap-3">
<!-- Claim Card 1 -->
<div class="bg-surface-dark border border-[#433b54] p-4 rounded-xl shadow-lg hover:border-primary/50 transition-colors">
<div class="flex justify-between items-start mb-3">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-slate-700 bg-cover bg-center" data-alt="User avatar" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDLfu784VDorauZoQl4GzEr3WEgqZfG6WHsN1znvsO-V1htaKCq7s3_7PQQJrqbd-6y2V9TYkYqtemNbfq8KcgYJP5e1lwRHSREFGgkB_lLRCtzTjWf2qWwBkj5UQmSvk0kV8fZtvXPTk_xQr9A03f-jRJk5_bFVGFUwWgvQzsy0qRIddZ5qUWi5rmNtyUU_kV3EYm1RQRTVNkYBM4JRoyE774eao2PerxpDUQwkYzWUOsmdrMhkNOuoRcPe40d9im_6TWPzab7Fo23');"></div>
<div>
<h4 class="text-white font-bold text-sm">Gamer123</h4>
<p class="text-slate-400 text-xs">Requested 2h ago</p>
</div>
</div>
<span class="text-xs font-medium px-2 py-1 rounded bg-slate-800 text-slate-300 border border-slate-700">Digital</span>
</div>
<div class="mb-4">
<div class="flex items-center gap-2 mb-1">
<span class="material-symbols-outlined text-primary text-lg">local_mall</span>
<span class="text-white font-medium">$50 Steam Card</span>
</div>
<p class="text-slate-500 text-xs ml-7">Cost: <span class="text-slate-300">5,000 pts</span> • High Value</p>
</div>
<div class="grid grid-cols-2 gap-3">
<button class="flex items-center justify-center gap-2 bg-[#2a243d] hover:bg-[#362e4d] text-rose-400 py-2 rounded-lg text-sm font-bold transition-colors">
<span class="material-symbols-outlined text-lg">close</span> Reject
</button>
<button class="flex items-center justify-center gap-2 bg-primary hover:bg-primary/90 text-white py-2 rounded-lg text-sm font-bold transition-colors shadow-lg shadow-primary/20">
<span class="material-symbols-outlined text-lg">check</span> Approve
</button>
</div>
</div>
<!-- Claim Card 2 -->
<div class="bg-surface-dark border border-[#433b54] p-4 rounded-xl shadow-lg hover:border-primary/50 transition-colors">
<div class="flex justify-between items-start mb-3">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-slate-700 bg-cover bg-center" data-alt="User avatar" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCdeNXLHH0EUhHCks5AZpZ2hW4tA9DzItta4nrUkrxtDGrO7o1FYdvaQwKSqjFxeDjDHN0zdZSwSrM_UMBBQVhq8XGIxulvl2ZaCdmAR3XBLLfVM3dzsmAYDJOTwbYVEG6Bi66GZOvOIR_Ul3b1ojx2TeRkLdFQ02mEY7SiM4wKKE1c4QfMwL4Kp348deMQ0EO9JiwvYCG22yguHlPMUPB636xSfWVJ9kg8KcsioJXTP0tEl_g1hvbikkiV0ROEUOLdjC9vGDIpkkhW');"></div>
<div>
<h4 class="text-white font-bold text-sm">ProPlayer99</h4>
<p class="text-slate-400 text-xs">Requested 5h ago</p>
</div>
</div>
<span class="text-xs font-medium px-2 py-1 rounded bg-slate-800 text-slate-300 border border-slate-700">Physical</span>
</div>
<div class="mb-4">
<div class="flex items-center gap-2 mb-1">
<span class="material-symbols-outlined text-primary text-lg">headphones</span>
<span class="text-white font-medium">Neon Headset</span>
</div>
<p class="text-slate-500 text-xs ml-7 truncate">Ship to: 123 Main St, New York, NY 10001</p>
</div>
<div class="grid grid-cols-2 gap-3">
<button class="flex items-center justify-center gap-2 bg-[#2a243d] hover:bg-[#362e4d] text-rose-400 py-2 rounded-lg text-sm font-bold transition-colors">
<span class="material-symbols-outlined text-lg">close</span> Reject
</button>
<button class="flex items-center justify-center gap-2 bg-primary hover:bg-primary/90 text-white py-2 rounded-lg text-sm font-bold transition-colors shadow-lg shadow-primary/20">
<span class="material-symbols-outlined text-lg">check</span> Approve
</button>
</div>
</div>
<!-- Claim Card 3 -->
<div class="bg-surface-dark border border-[#433b54] p-4 rounded-xl shadow-lg hover:border-primary/50 transition-colors opacity-75">
<div class="flex justify-between items-start mb-3">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-slate-700 bg-cover bg-center" data-alt="User avatar" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDK2sHEXSYrMgaotWRtDjwbSRJ32xGLawWEm9fdpn-Z7gXbn-6K4S9feyQtgC0LzkfBOxLSJ_5ObKh97NknBPBntPdbMYDFi-BrWoitDSe4pqLTP4jlswhfWXVZMphDsvd8pd7N2TNZfJ-DH15l5TUxSgd2hHOVmJXBmeV3Yibw1SkEU6P38kwW1svCQsYhWS9Ov1oKjfdKJTjOWSNAbsEiIhi0bOesv_mcBxHDbRHPDZoJJ-oTAmcdOL9vWmfZ3e620zsnjaSyclhI');"></div>
<div>
<h4 class="text-white font-bold text-sm">QuizMaster</h4>
<p class="text-slate-400 text-xs">Requested 12h ago</p>
</div>
</div>
<span class="text-xs font-medium px-2 py-1 rounded bg-slate-800 text-slate-300 border border-slate-700">Physical</span>
</div>
<div class="mb-4">
<div class="flex items-center gap-2 mb-1">
<span class="material-symbols-outlined text-primary text-lg">mouse</span>
<span class="text-white font-medium">Gaming Mouse</span>
</div>
<p class="text-slate-500 text-xs ml-7 truncate">Ship to: 456 Elm St, San Francisco, CA</p>
</div>
<div class="grid grid-cols-2 gap-3">
<button class="flex items-center justify-center gap-2 bg-[#2a243d] hover:bg-[#362e4d] text-rose-400 py-2 rounded-lg text-sm font-bold transition-colors">
<span class="material-symbols-outlined text-lg">close</span> Reject
</button>
<button class="flex items-center justify-center gap-2 bg-primary hover:bg-primary/90 text-white py-2 rounded-lg text-sm font-bold transition-colors shadow-lg shadow-primary/20">
<span class="material-symbols-outlined text-lg">check</span> Approve
</button>
</div>
</div>
</div>
</div>
<!-- Inventory Table (Right/Bottom) -->
<div class="flex flex-col gap-4 flex-1 w-full">
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
<h2 class="text-xl font-bold text-white">Prize Inventory</h2>
<div class="flex items-center gap-2 w-full sm:w-auto">
<div class="relative flex-1 sm:w-64">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-500 text-[20px]">search</span>
<input class="w-full bg-surface-dark border border-[#433b54] rounded-lg py-2 pl-10 pr-4 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary" placeholder="Search products..." type="text"/>
</div>
<button class="flex items-center justify-center gap-2 bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg text-sm font-bold transition-colors shadow-lg shadow-primary/20 whitespace-nowrap" onclick="document.getElementById('addProductModal').showModal()">
<span class="material-symbols-outlined text-[20px]">add</span>
<span class="hidden sm:inline">Add Product</span>
</button>
</div>
</div>
<div class="bg-surface-dark border border-[#433b54] rounded-xl overflow-hidden shadow-xl flex-1">
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-[#2a243d] text-slate-400 text-sm border-b border-[#433b54]">
<th class="px-6 py-4 font-semibold w-16">Image</th>
<th class="px-6 py-4 font-semibold">Product Name</th>
<th class="px-6 py-4 font-semibold">Point Cost</th>
<th class="px-6 py-4 font-semibold w-64">Stock Level</th>
<th class="px-6 py-4 font-semibold text-center">Status</th>
<th class="px-6 py-4 font-semibold text-right">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-[#433b54]">
<!-- Row 1 -->
<tr class="group hover:bg-[#2a243d]/50 transition-colors">
<td class="px-6 py-4">
<div class="w-12 h-12 rounded-lg bg-slate-800 bg-cover bg-center border border-[#433b54]" data-alt="Gaming Mouse Product Image" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuC6XSFLZMWbZa3OhSdjxFbz1gOpbqpwbxWB1kFl4j-8-s1xQeZL7H53GXUbaBR_a3Qe5p7ayFR8dajzWEPzBxU_pzGrJq4znK4LVYiOJuWoasxyrAGApdSO0OY_IkEAfhkGg_rJRJX6iGgP4R2sr_nKXi3P_sAcW5wh77vPJ66zFYq8ZAbaMlprtME4z2fs_5vwEJHtvUdAHjuqKzo5D8-iNtAQX8lwesUDZTu1SbKuinKUC0gOOpli9lL1VPHjFkz50cTBzeTYY69w');"></div>
</td>
<td class="px-6 py-4">
<div class="font-medium text-white">Razor Pro Gaming Mouse</div>
<div class="text-xs text-slate-500">Hardware • RGB</div>
</td>
<td class="px-6 py-4">
<span class="text-slate-200 font-mono font-medium">2,500</span> pts
</td>
<td class="px-6 py-4">
<div class="flex flex-col gap-1.5">
<div class="flex justify-between text-xs mb-0.5">
<span class="text-slate-300 font-medium">50 left</span>
<span class="text-slate-500">Target: 100</span>
</div>
<div class="w-full h-1.5 bg-slate-700 rounded-full overflow-hidden">
<div class="h-full bg-emerald-500 rounded-full" style="width: 50%"></div>
</div>
</div>
</td>
<td class="px-6 py-4 text-center">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
Active
</span>
</td>
<td class="px-6 py-4 text-right">
<div class="flex items-center justify-end gap-2 opacity-60 group-hover:opacity-100 transition-opacity">
<button class="p-2 hover:bg-white/10 rounded-lg text-slate-400 hover:text-white transition-colors">
<span class="material-symbols-outlined text-[20px]">edit</span>
</button>
<button class="p-2 hover:bg-rose-500/20 rounded-lg text-slate-400 hover:text-rose-400 transition-colors">
<span class="material-symbols-outlined text-[20px]">delete</span>
</button>
</div>
</td>
</tr>
<!-- Row 2 -->
<tr class="group hover:bg-[#2a243d]/50 transition-colors">
<td class="px-6 py-4">
<div class="w-12 h-12 rounded-lg bg-slate-800 bg-cover bg-center border border-[#433b54]" data-alt="Steam Gift Card Image" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBY5HisF7TgIw4hqpOpwi4Y9jkw9QJt6jux7k2wcqsrkc_KLbiJ05N2eWI9w56J3FZLokYVabzzSLHZbbSUdWxdEb06ac2UCY-lWl5nE92k-tMXTNhv5Y2rX_H5Al4bH-oGn-4j0OIaMb9OQreYo-qBkCWjIsl96zDuHvbK4vVpceqm1m18njtyb13etJTsVHq60tAvcI6j9AYRSlT5i2w3Mdt-2Czs_YTJVdX10Tn0UbeRum4oZU4fKpzlXppy2o_g9cC8lgNUb_EB');"></div>
</td>
<td class="px-6 py-4">
<div class="font-medium text-white">$10 Steam Card</div>
<div class="text-xs text-slate-500">Digital Code</div>
</td>
<td class="px-6 py-4">
<span class="text-slate-200 font-mono font-medium">1,000</span> pts
</td>
<td class="px-6 py-4">
<div class="flex flex-col gap-1.5">
<div class="flex justify-between text-xs mb-0.5">
<span class="text-slate-300 font-medium">420 left</span>
<span class="text-slate-500">Target: 500</span>
</div>
<div class="w-full h-1.5 bg-slate-700 rounded-full overflow-hidden">
<div class="h-full bg-primary rounded-full" style="width: 84%"></div>
</div>
</div>
</td>
<td class="px-6 py-4 text-center">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
Active
</span>
</td>
<td class="px-6 py-4 text-right">
<div class="flex items-center justify-end gap-2 opacity-60 group-hover:opacity-100 transition-opacity">
<button class="p-2 hover:bg-white/10 rounded-lg text-slate-400 hover:text-white transition-colors">
<span class="material-symbols-outlined text-[20px]">edit</span>
</button>
<button class="p-2 hover:bg-rose-500/20 rounded-lg text-slate-400 hover:text-rose-400 transition-colors">
<span class="material-symbols-outlined text-[20px]">delete</span>
</button>
</div>
</td>
</tr>
<!-- Row 3 -->
<tr class="group hover:bg-[#2a243d]/50 transition-colors">
<td class="px-6 py-4">
<div class="w-12 h-12 rounded-lg bg-slate-800 bg-cover bg-center border border-[#433b54]" data-alt="Headset Product Image" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCwmwCEzuM8HjyNfzN5G2dmehrCIjNBxdacAV_6BnmWbVbRhxQ1yVN5xy2pZIfaAvN4O5RCABm27Qu0DOBlTIATxX6zMgqH29X-aBooQ819qB6Ep5oBA7GUeuCURtv87iPPQFBqVwT1VmQVl9qY2SLs5a8f4_xnndkg8t-3KchLg8vH__pfdCmkZyZzfXwMdbWYMHt3iu0ZiOJIKDF13uDkwbKIOwvU4-B-oo7Jol2wf8er7cc85QSXVq6IxLhEm-dXPK5DeZE-1wv_');"></div>
</td>
<td class="px-6 py-4">
<div class="font-medium text-white">Neon Pulse Headset</div>
<div class="text-xs text-slate-500">Hardware • Wireless</div>
</td>
<td class="px-6 py-4">
<span class="text-slate-200 font-mono font-medium">8,500</span> pts
</td>
<td class="px-6 py-4">
<div class="flex flex-col gap-1.5">
<div class="flex justify-between text-xs mb-0.5">
<span class="text-orange-400 font-medium">4 left</span>
<span class="text-slate-500">Target: 20</span>
</div>
<div class="w-full h-1.5 bg-slate-700 rounded-full overflow-hidden">
<div class="h-full bg-orange-500 rounded-full" style="width: 20%"></div>
</div>
</div>
</td>
<td class="px-6 py-4 text-center">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-500/10 text-orange-400 border border-orange-500/20">
Low Stock
</span>
</td>
<td class="px-6 py-4 text-right">
<div class="flex items-center justify-end gap-2 opacity-60 group-hover:opacity-100 transition-opacity">
<button class="p-2 hover:bg-white/10 rounded-lg text-slate-400 hover:text-white transition-colors">
<span class="material-symbols-outlined text-[20px]">edit</span>
</button>
<button class="p-2 hover:bg-rose-500/20 rounded-lg text-slate-400 hover:text-rose-400 transition-colors">
<span class="material-symbols-outlined text-[20px]">delete</span>
</button>
</div>
</td>
</tr>
<!-- Row 4 -->
<tr class="group hover:bg-[#2a243d]/50 transition-colors">
<td class="px-6 py-4">
<div class="w-12 h-12 rounded-lg bg-slate-800 bg-cover bg-center border border-[#433b54]" data-alt="Mechanical Keyboard Image" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuA6ExwPjKwasaOAm5K0UhjRzBgxdMIYMaJdzqe8qm2lc3tGL5FoBVgZeZiQzJ2Nglla1Hwa6kgZsJfHVYuZAQWZHU5h6SktG4F_lartPAs7nd-DOO-VtypM1iwADUUeI-7N76P8nFKnjRY0hgd2_Lc4kLJQ1rB9O77oYXRr2b2W80_nFMfKDm5Uj6J0ZWAe_OwDpoejpLyaww--HyW-YF16Igm5Gikb2bMaIE8DQGkv6jZU3KOlsI33YVl5wMk8kLl6k6U13w9vB6kH');"></div>
</td>
<td class="px-6 py-4">
<div class="font-medium text-white">MK-80 Keyboard</div>
<div class="text-xs text-slate-500">Hardware • Clicky</div>
</td>
<td class="px-6 py-4">
<span class="text-slate-200 font-mono font-medium">12,000</span> pts
</td>
<td class="px-6 py-4">
<div class="flex flex-col gap-1.5">
<div class="flex justify-between text-xs mb-0.5">
<span class="text-rose-400 font-medium">0 left</span>
<span class="text-slate-500">Target: 15</span>
</div>
<div class="w-full h-1.5 bg-slate-700 rounded-full overflow-hidden">
<div class="h-full bg-rose-500 rounded-full" style="width: 0%"></div>
</div>
</div>
</td>
<td class="px-6 py-4 text-center">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-rose-500/10 text-rose-400 border border-rose-500/20">
Sold Out
</span>
</td>
<td class="px-6 py-4 text-right">
<div class="flex items-center justify-end gap-2 opacity-60 group-hover:opacity-100 transition-opacity">
<button class="p-2 hover:bg-white/10 rounded-lg text-slate-400 hover:text-white transition-colors">
<span class="material-symbols-outlined text-[20px]">edit</span>
</button>
<button class="p-2 hover:bg-rose-500/20 rounded-lg text-slate-400 hover:text-rose-400 transition-colors">
<span class="material-symbols-outlined text-[20px]">delete</span>
</button>
</div>
</td>
</tr>
<!-- Row 5 -->
<tr class="group hover:bg-[#2a243d]/50 transition-colors">
<td class="px-6 py-4">
<div class="w-12 h-12 rounded-lg bg-slate-800 bg-cover bg-center border border-[#433b54]" data-alt="T-Shirt Image" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBWipmrxS7ZDpj6-WvZ2H_RlcQWKttJ_tB5AiKWp09l4E1XkH-CdyMK47Lgr279bbQO-XK8p_B3aeuiyn0-JtxUBEcbkaW03Il1FmUVuWk6YP3d8x771Ny304cZCcxsqYyumZ-1VhCjG_JCjcdGvEWopjyth_5kDsW_KlmZ5-ZWELIAG0oGESrVWEaQm6pFLr8lnOnEo60_gtrj7d4cz4fGQZSIbz5G9JoZBAN_MoLauzLRHkDl3VmX5UT0IZB-enp6bsQRqvXXDcO1');"></div>
</td>
<td class="px-6 py-4">
<div class="font-medium text-white">Logo T-Shirt</div>
<div class="text-xs text-slate-500">Merch • Unisex</div>
</td>
<td class="px-6 py-4">
<span class="text-slate-200 font-mono font-medium">1,500</span> pts
</td>
<td class="px-6 py-4">
<div class="flex flex-col gap-1.5">
<div class="flex justify-between text-xs mb-0.5">
<span class="text-slate-300 font-medium">100 left</span>
<span class="text-slate-500">Target: 100</span>
</div>
<div class="w-full h-1.5 bg-slate-700 rounded-full overflow-hidden">
<div class="h-full bg-emerald-500 rounded-full" style="width: 100%"></div>
</div>
</div>
</td>
<td class="px-6 py-4 text-center">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">
Active
</span>
</td>
<td class="px-6 py-4 text-right">
<div class="flex items-center justify-end gap-2 opacity-60 group-hover:opacity-100 transition-opacity">
<button class="p-2 hover:bg-white/10 rounded-lg text-slate-400 hover:text-white transition-colors">
<span class="material-symbols-outlined text-[20px]">edit</span>
</button>
<button class="p-2 hover:bg-rose-500/20 rounded-lg text-slate-400 hover:text-rose-400 transition-colors">
<span class="material-symbols-outlined text-[20px]">delete</span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="px-6 py-4 border-t border-[#433b54] bg-[#1a1726] flex items-center justify-between">
<p class="text-xs text-slate-500">Showing <span class="text-white font-medium">1-5</span> of <span class="text-white font-medium">48</span> products</p>
<div class="flex gap-2">
<button class="w-8 h-8 flex items-center justify-center rounded bg-[#2e2839] text-slate-400 hover:text-white hover:bg-[#3d354d] transition-colors disabled:opacity-50">
<span class="material-symbols-outlined text-sm">chevron_left</span>
</button>
<button class="w-8 h-8 flex items-center justify-center rounded bg-[#2e2839] text-slate-400 hover:text-white hover:bg-[#3d354d] transition-colors">
<span class="material-symbols-outlined text-sm">chevron_right</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Add Product Modal Dialog -->
<dialog class="backdrop:bg-black/60 backdrop:backdrop-blur-sm bg-transparent p-0 open:animate-fade-in w-full max-w-lg m-auto rounded-xl shadow-2xl" id="addProductModal">
<form class="bg-surface-dark border border-[#433b54] text-white rounded-xl shadow-2xl flex flex-col w-full" method="dialog">
<div class="p-6 border-b border-[#433b54] flex justify-between items-center bg-[#241f33]">
<h3 class="text-xl font-bold text-white flex items-center gap-2">
<span class="material-symbols-outlined text-primary">add_circle</span>
Add New Product
</h3>
<button class="text-slate-400 hover:text-white transition-colors p-1">
<span class="material-symbols-outlined">close</span>
</button>
</div>
<div class="p-6 flex flex-col gap-5">
<!-- Image Upload -->
<div class="flex flex-col gap-2">
<label class="text-sm font-medium text-slate-300">Product Image</label>
<div class="h-32 rounded-lg border-2 border-dashed border-[#433b54] hover:border-primary/50 hover:bg-[#2a243d] transition-colors flex flex-col items-center justify-center gap-2 cursor-pointer group bg-[#161022]">
<span class="material-symbols-outlined text-slate-500 group-hover:text-primary transition-colors text-3xl">cloud_upload</span>
<p class="text-xs text-slate-500 group-hover:text-slate-300">Click to upload or drag & drop</p>
</div>
</div>
<!-- Basic Info -->
<div class="grid grid-cols-1 gap-4">
<div class="flex flex-col gap-1.5">
<label class="text-sm font-medium text-slate-300">Product Name</label>
<input class="bg-[#161022] border border-[#433b54] rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary placeholder-slate-600" placeholder="e.g. Neon Headset" type="text"/>
</div>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="flex flex-col gap-1.5">
<label class="text-sm font-medium text-slate-300">Point Cost</label>
<div class="relative">
<input class="w-full bg-[#161022] border border-[#433b54] rounded-lg pl-4 pr-10 py-2.5 text-sm focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary placeholder-slate-600" placeholder="5000" type="number"/>
<span class="absolute right-3 top-2.5 text-xs text-slate-500 font-bold">PTS</span>
</div>
</div>
<div class="flex flex-col gap-1.5">
<label class="text-sm font-medium text-slate-300">Initial Stock</label>
<input class="bg-[#161022] border border-[#433b54] rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary placeholder-slate-600" placeholder="0" type="number"/>
</div>
</div>
<div class="flex flex-col gap-1.5">
<label class="text-sm font-medium text-slate-300">Status</label>
<div class="flex items-center gap-4 bg-[#161022] p-3 rounded-lg border border-[#433b54]">
<label class="flex items-center gap-2 cursor-pointer">
<input checked="" class="text-primary focus:ring-primary bg-[#2a243d] border-slate-600" name="status" type="radio"/>
<span class="text-sm">Active</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input class="text-primary focus:ring-primary bg-[#2a243d] border-slate-600" name="status" type="radio"/>
<span class="text-sm">Draft</span>
</label>
</div>
</div>
</div>
<div class="p-6 pt-2 flex justify-end gap-3">
<button class="px-5 py-2.5 rounded-lg text-sm font-medium text-slate-300 hover:text-white hover:bg-[#2a243d] transition-colors" onclick="document.getElementById('addProductModal').close()" type="button">Cancel</button>
<button class="px-5 py-2.5 rounded-lg text-sm font-bold bg-primary hover:bg-primary/90 text-white shadow-lg shadow-primary/25 transition-all transform active:scale-95" type="submit">Save Product</button>
</div>
</form>
</dialog>
</body></html>