364 lines
21 KiB
HTML
364 lines
21 KiB
HTML
<!DOCTYPE html>
|
|
<html class="light" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>WMS - Batch Add Inventory Items</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&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>
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"primary": "#137fec",
|
|
"background-light": "#f6f7f8",
|
|
"background-dark": "#101922",
|
|
},
|
|
fontFamily: {
|
|
"display": ["Inter", "sans-serif"]
|
|
},
|
|
borderRadius: {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style type="text/tailwindcss">
|
|
@layer utilities {
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background-light dark:bg-background-dark font-display text-gray-800 dark:text-gray-200 overflow-hidden">
|
|
<div class="flex h-screen w-full relative">
|
|
<aside class="flex w-64 flex-col border-r border-gray-200 dark:border-gray-800 bg-white dark:bg-background-dark">
|
|
<div class="flex h-full flex-col justify-between p-4">
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex items-center gap-3 p-2">
|
|
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCztlHhjKvu2qkn2Xi2zFHagNsNToKwcTg3vQr0KtTqBCo13dK1yyz9HzB2uLCiciLyDfnrf7pREvdblPqCcUiN0HqlSbkFwY1dpQLMbJ4hmpVgHVWaLaUCMXju06qyGQSdg2ChGVcbTQIrk-RNI2-hDOFnfrI1PD89RNSsByXGRsdkYWSyEYFOFk7bT4l7aIaasB6cdVxDfNwJdvVx15wb7-qOHZHFTPMbrkkzmjGec-f7iVqTi5U1ykNDclBSezBM97TfXajTwRJE");'></div>
|
|
<div class="flex flex-col">
|
|
<h1 class="text-gray-900 dark:text-white text-base font-medium leading-normal">Admin User</h1>
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm font-normal leading-normal">Warehouse Manager</p>
|
|
</div>
|
|
</div>
|
|
<nav class="flex flex-col gap-2">
|
|
<a class="flex items-center gap-3 px-3 py-2 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800" href="#">
|
|
<span class="material-symbols-outlined">dashboard</span>
|
|
<p class="text-sm font-medium leading-normal">Dashboard</p>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 rounded-lg bg-primary/10 text-primary dark:bg-primary/20" href="#">
|
|
<span class="material-symbols-outlined">warehouse</span>
|
|
<p class="text-sm font-medium leading-normal">Inventory</p>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800" href="#">
|
|
<span class="material-symbols-outlined">receipt_long</span>
|
|
<p class="text-sm font-medium leading-normal">Orders</p>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800" href="#">
|
|
<span class="material-symbols-outlined">local_shipping</span>
|
|
<p class="text-sm font-medium leading-normal">Suppliers</p>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800" href="#">
|
|
<span class="material-symbols-outlined">pie_chart</span>
|
|
<p class="text-sm font-medium leading-normal">Reports</p>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<nav class="flex flex-col gap-1">
|
|
<a class="flex items-center gap-3 px-3 py-2 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800" href="#">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
<p class="text-sm font-medium leading-normal">Settings</p>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800" href="#">
|
|
<span class="material-symbols-outlined">help</span>
|
|
<p class="text-sm font-medium leading-normal">Help</p>
|
|
</a>
|
|
</nav>
|
|
<button class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 text-sm font-bold leading-normal hover:bg-gray-300 dark:hover:bg-gray-700">
|
|
<span class="truncate">Logout</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<main class="flex-1 flex flex-col h-screen overflow-hidden">
|
|
<header class="flex flex-none items-center justify-between whitespace-nowrap border-b border-solid border-gray-200 dark:border-gray-800 px-10 py-3 bg-white dark:bg-background-dark z-10">
|
|
<div class="flex items-center gap-4 text-gray-900 dark:text-white">
|
|
<div class="size-6 text-primary">
|
|
<svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M21.435 7.182a.75.75 0 0 0-.87-.11L12 10.435 3.435 7.072a.75.75 0 0 0-.87.11.75.75 0 0 0-.11.87l2.122 7.878a.75.75 0 0 0 .869.59l6-1.635a.75.75 0 0 0 .108 0l6 1.635a.75.75 0 0 0 .87-.59l2.12-7.878a.75.75 0 0 0-.11-.87zM12 12.18l-5.693-1.55L12 4.288l5.693 6.342L12 12.18z"></path>
|
|
</svg>
|
|
</div>
|
|
<h2 class="text-lg font-bold leading-tight tracking-[-0.015em]">WMS Dashboard</h2>
|
|
</div>
|
|
<div class="flex flex-1 justify-end items-center gap-4">
|
|
<label class="relative grow max-w-sm">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">search</span>
|
|
<input class="form-input w-full rounded-lg border-none bg-gray-100 dark:bg-gray-800 h-10 pl-10 pr-4 text-sm text-gray-900 dark:text-white placeholder:text-gray-500 focus:ring-primary" placeholder="Search items, orders..." value=""/>
|
|
</label>
|
|
<div class="flex gap-2">
|
|
<button class="flex items-center justify-center rounded-lg h-10 w-10 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">
|
|
<span class="material-symbols-outlined text-xl">notifications</span>
|
|
</button>
|
|
<button class="flex items-center justify-center rounded-lg h-10 w-10 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">
|
|
<span class="material-symbols-outlined text-xl">help_outline</span>
|
|
</button>
|
|
</div>
|
|
<div class="bg-center bg-no-repeat aspect-square bg-cover rounded-full size-10" style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBNpxncwdjcD3fLZbRbit_NZyuFBZhcpV-Bvdlu6NiZL3kb65hsFRsDkTNHtC0zJxG3HGV1TInl_DCfafj3axNGSwW4-UNj1sZWhiHCYE2aK9hm-FYjrNGiEh0UqKya1EAYMTM5Z4k8qKOWPEPdIaZz9X98tPC5FIn5lbRRusCTuQmgRL-QxK9SdIMA3TflImwA1vyh3zq44j8EkkNTQWf94-e82GDHs5MwHIkK0S-Gg4d950IyRTpoABSa9qXA5yPzoaT9jCGjCodL");'></div>
|
|
</div>
|
|
</header>
|
|
<div class="flex-1 overflow-y-auto p-6 lg:p-10 pb-24">
|
|
<div class="mx-auto max-w-7xl">
|
|
<div class="flex flex-wrap gap-2 mb-6">
|
|
<a class="text-gray-500 dark:text-gray-400 text-sm font-medium leading-normal" href="#">Dashboard</a>
|
|
<span class="text-gray-500 dark:text-gray-400 text-sm font-medium leading-normal">/</span>
|
|
<a class="text-gray-500 dark:text-gray-400 text-sm font-medium leading-normal" href="#">Inventory</a>
|
|
<span class="text-gray-500 dark:text-gray-400 text-sm font-medium leading-normal">/</span>
|
|
<span class="text-gray-800 dark:text-gray-200 text-sm font-medium leading-normal">Batch Add Items</span>
|
|
</div>
|
|
<div class="flex flex-wrap justify-between items-center gap-4 mb-8">
|
|
<div class="flex flex-col gap-2">
|
|
<h1 class="text-gray-900 dark:text-white text-3xl font-bold tracking-tight">Add Items to Inventory</h1>
|
|
<p class="text-gray-500 dark:text-gray-400 text-base font-normal leading-normal">Manage your batch inventory addition list here.</p>
|
|
</div>
|
|
<button class="flex items-center justify-center gap-2 bg-primary text-white px-6 py-3 rounded-xl font-bold hover:bg-primary/90 transition-all shadow-lg shadow-primary/20">
|
|
<span class="material-symbols-outlined">add_circle</span>
|
|
Select Product to Add
|
|
</button>
|
|
</div>
|
|
<div class="bg-white dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden shadow-sm">
|
|
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-800 flex justify-between items-center">
|
|
<h2 class="text-lg font-bold text-gray-900 dark:text-white">Queued Items (4)</h2>
|
|
<button class="text-sm font-medium text-red-500 hover:text-red-600">Clear All</button>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="bg-gray-50 dark:bg-gray-800/50">
|
|
<th class="px-6 py-4 text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Product Name</th>
|
|
<th class="px-6 py-4 text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider">SKU</th>
|
|
<th class="px-6 py-4 text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Variant</th>
|
|
<th class="px-6 py-4 text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Quantity</th>
|
|
<th class="px-6 py-4 text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Unit</th>
|
|
<th class="px-6 py-4 text-xs font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider text-right">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100 dark:divide-gray-800">
|
|
<tr class="hover:bg-gray-50/50 dark:hover:bg-gray-800/30 transition-colors">
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded bg-gray-100 dark:bg-gray-800 overflow-hidden">
|
|
<img alt="product" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBMbZhSSPYoHEi3akXSqZXm-T6EghACuHJJ5NYeJ8g4XJIKtqXRhCSQ1kFcvo7Txk01ryR-r6RJ61NzPLENWMywvUVnCkQglsizZG0NKPBwRFQjXvtDULkGbGFm6EPocyHGfuzKJ0EoDr601zMBI34mfPCgn9AAaRkTMj2Ize2nCUcanlGn7QJEp6BdNcmf3JFlk-51jPTXj1-mM4Pw6AGIvarhxnZqtEAji6qRF7evVTR_56c48h5if21S3jD-wVhNVp8AltVn8KEH"/>
|
|
</div>
|
|
<span class="font-medium">Smart Display Panel</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-gray-500">DISP-PNL-SD-001</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex flex-wrap gap-1">
|
|
<span class="px-2.5 py-1 text-[10px] font-semibold bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-full border border-blue-100 dark:border-blue-800/50 uppercase tracking-tight">Medida: 85</span>
|
|
<span class="px-2.5 py-1 text-[10px] font-semibold bg-purple-50 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 rounded-full border border-purple-100 dark:border-purple-800/50 uppercase tracking-tight">Resolución: 4K</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<input class="w-20 form-input h-8 rounded border-gray-300 dark:border-gray-700 bg-transparent text-sm" type="number" value="25"/>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm">pcs</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="text-gray-400 hover:text-red-500 transition-colors">
|
|
<span class="material-symbols-outlined text-xl">delete</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50/50 dark:hover:bg-gray-800/30 transition-colors">
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded bg-gray-100 dark:bg-gray-800 overflow-hidden">
|
|
<img alt="product" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBBMBDEGh1exdBX1lU--TOCsUwfsFkYhrl8DxxvxgH-hKLkcuVtuGP_ZhRS5l_YXFWls08Ecr-Ic748cVHqHexFMMzYTPH8YL2s9OISDgsMIwcDOPxitrPUn3RBCD_krFC8SrBXBeNC8ilcFdg_JCwD5BW5gaYjAAEUMFXyM1vd-YT27KyubBk1IKATsMdDkH-NtwAHcrPgNoXsRaAcubBQiebCG1hmxKVW3fAXoDoSqywrxhwZ7cmIuo7BTThJJ1KcczxQh1jYh_w4"/>
|
|
</div>
|
|
<span class="font-medium">Mechanical Keyboard RGB</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-gray-500">KYBD-RGB-US-02</td>
|
|
<td class="px-6 py-4">
|
|
<span class="px-2.5 py-1 text-xs font-medium bg-gray-100 dark:bg-gray-800 rounded-full border border-gray-200 dark:border-gray-700">Red Switch</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<input class="w-20 form-input h-8 rounded border-gray-300 dark:border-gray-700 bg-transparent text-sm" type="number" value="12"/>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm">pcs</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="text-gray-400 hover:text-red-500 transition-colors">
|
|
<span class="material-symbols-outlined text-xl">delete</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50/50 dark:hover:bg-gray-800/30 transition-colors">
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded bg-gray-100 dark:bg-gray-800 overflow-hidden">
|
|
<img alt="product" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAsb9nqDON7PeKGYYAU8hmHn7B2l3waP_ewMQTpsgnpJe2vFiY-k-zncE5VEf186tDzlTwVPA6-1SgAFagugq9Anw2WXloUFTNwOrOHgAi-MNhgs0FuxRKF8XMLk6W_u6YLF5xWh3K2q317JXFSUWtURtxCi8pYM4YtHYEyuT2aIrhbAnI2LQ7ja8DvSdvpO6t1IJ6HE9RqlnAFXuLG22igxiekKT2NjRpuK5Zzu_90rBPEjb0KitG9DwiBjzKa702pccHPRqupgXke"/>
|
|
</div>
|
|
<span class="font-medium">USB-C Charging Cable 2m</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-gray-500">CBL-USBC-2M</td>
|
|
<td class="px-6 py-4">
|
|
<span class="px-2.5 py-1 text-xs font-medium bg-gray-100 dark:bg-gray-800 rounded-full border border-gray-200 dark:border-gray-700">Braided</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<input class="w-20 form-input h-8 rounded border-gray-300 dark:border-gray-700 bg-transparent text-sm" type="number" value="100"/>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm">pcs</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="text-gray-400 hover:text-red-500 transition-colors">
|
|
<span class="material-symbols-outlined text-xl">delete</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50/50 dark:hover:bg-gray-800/30 transition-colors">
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded bg-gray-100 dark:bg-gray-800 overflow-hidden">
|
|
<img alt="product" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD1PtrsyrvB9KtL5DHjKotvi92lM1NsfdzyEkoW5DAEfSYoPI8MNsCJZDBMtrz6rXnIWApiymAIlp7Yq5P6JTQqpwaNJVw5I4G3KiefVME-D_jR_0iTDtPBxljmlcohkhIrSfK77wV9Wq1KL0yvjCB2UuDewIxBOs0RUl7_RbISQxYaSzVe9GbqnwI5cpj_N_1faxUA89ATStV6GovMDXFA881MUGKd4_ox_CzEG5zzPZYRe9JF7M33YH-rRHdxlpQWtRH9yw4X8sKp"/>
|
|
</div>
|
|
<span class="font-medium">Smart Display Panel</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm text-gray-500">DISP-PNL-SD-001</td>
|
|
<td class="px-6 py-4">
|
|
<div class="flex flex-wrap gap-1">
|
|
<span class="px-2.5 py-1 text-[10px] font-semibold bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-full border border-blue-100 dark:border-blue-800/50 uppercase tracking-tight">Medida: 36</span>
|
|
<span class="px-2.5 py-1 text-[10px] font-semibold bg-purple-50 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 rounded-full border border-purple-100 dark:border-purple-800/50 uppercase tracking-tight">Resolución: 1080</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<input class="w-20 form-input h-8 rounded border-gray-300 dark:border-gray-700 bg-transparent text-sm" type="number" value="5"/>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm">pcs</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="text-gray-400 hover:text-red-500 transition-colors">
|
|
<span class="material-symbols-outlined text-xl">delete</span>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="p-6 bg-gray-50/50 dark:bg-gray-800/50 border-t border-gray-200 dark:border-gray-800 text-sm text-gray-500 dark:text-gray-400">
|
|
Total items to be added: <span class="font-bold text-gray-900 dark:text-white">142 units</span> across 4 unique products.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<footer class="fixed bottom-0 right-0 left-64 bg-white dark:bg-background-dark border-t border-gray-200 dark:border-gray-800 p-4 px-10 flex justify-between items-center z-20 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)]">
|
|
<div class="flex items-center gap-6">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xs font-medium text-gray-500 uppercase tracking-widest">Storage Location</span>
|
|
<select class="form-select text-sm rounded-lg border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 focus:ring-primary h-9">
|
|
<option>Main Warehouse (A1)</option>
|
|
<option>South Storage (B4)</option>
|
|
<option>Cold Storage (C2)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<button class="flex min-w-[100px] cursor-pointer items-center justify-center rounded-lg h-11 px-6 bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-gray-200 text-sm font-bold leading-normal hover:bg-gray-300 dark:hover:bg-gray-700 transition-all">
|
|
Cancel
|
|
</button>
|
|
<button class="flex min-w-[200px] cursor-pointer items-center justify-center rounded-lg h-11 px-8 bg-primary text-white text-sm font-bold leading-normal tracking-[0.015em] hover:bg-primary/90 shadow-lg shadow-primary/20 transition-all">
|
|
Confirm and Save Inventory
|
|
</button>
|
|
</div>
|
|
</footer>
|
|
</main>
|
|
<div class="fixed inset-0 z-100 flex items-center justify-center">
|
|
<div class="absolute inset-0 bg-gray-900/60 backdrop-blur-sm"></div>
|
|
<div class="relative bg-white dark:bg-background-dark w-full max-w-2xl mx-4 rounded-2xl shadow-2xl border border-gray-200 dark:border-gray-800 overflow-hidden flex flex-col max-h-[90vh]">
|
|
<div class="p-6 border-b border-gray-100 dark:border-gray-800 flex justify-between items-center">
|
|
<div>
|
|
<h3 class="text-xl font-bold text-gray-900 dark:text-white">Add Product to Batch</h3>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Search and configure the product variant</p>
|
|
</div>
|
|
<button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
|
|
<span class="material-symbols-outlined text-2xl">close</span>
|
|
</button>
|
|
</div>
|
|
<div class="p-6 overflow-y-auto space-y-8">
|
|
<div class="space-y-3">
|
|
<label class="block text-sm font-semibold text-gray-700 dark:text-gray-300">Search Catalog</label>
|
|
<div class="relative">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-gray-500">search</span>
|
|
<input class="form-input w-full rounded-xl border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 text-gray-900 dark:text-white pl-11 h-12 focus:ring-primary focus:border-primary" placeholder="Type Product Name or SKU..." type="text" value="Smart Display Panel"/>
|
|
</div>
|
|
</div>
|
|
<div class="bg-gray-50 dark:bg-gray-800/30 rounded-xl p-5 border border-gray-100 dark:border-gray-700 space-y-6">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-16 h-16 rounded-lg bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 flex items-center justify-center shadow-sm">
|
|
<span class="material-symbols-outlined text-3xl text-gray-400">image</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-lg font-bold text-gray-900 dark:text-white">Smart Display Panel</p>
|
|
<p class="text-sm text-gray-500 font-medium tracking-tight">SKU: DISP-PNL-SD-001</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="space-y-2">
|
|
<label class="block text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">Medida</label>
|
|
<select class="form-select w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm focus:ring-primary focus:border-primary h-11">
|
|
<option value="24">24</option>
|
|
<option value="36">36</option>
|
|
<option value="64">64</option>
|
|
<option selected="" value="85">85</option>
|
|
</select>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="block text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">Resolución</label>
|
|
<select class="form-select w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm focus:ring-primary focus:border-primary h-11">
|
|
<option value="1080">1080</option>
|
|
<option value="2K">2K</option>
|
|
<option selected="" value="4K">4K</option>
|
|
<option value="8K">8K</option>
|
|
</select>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<label class="block text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">Quantity</label>
|
|
<div class="flex items-center gap-2">
|
|
<input class="form-input flex-1 rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm focus:ring-primary focus:border-primary h-11" type="number" value="10"/>
|
|
<span class="text-sm font-medium text-gray-500">pcs</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-end pb-1">
|
|
<div class="bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 px-3 py-2 rounded-lg border border-blue-100 dark:border-blue-800/50 w-full flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-lg">info</span>
|
|
<span class="text-xs font-medium">Current Stock: 420 units</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 bg-gray-50 dark:bg-gray-800/50 border-t border-gray-100 dark:border-gray-800 flex justify-end gap-3">
|
|
<button class="px-5 py-2.5 rounded-lg text-sm font-bold text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
|
|
Cancel
|
|
</button>
|
|
<button class="bg-primary text-white px-8 py-2.5 rounded-lg text-sm font-bold hover:bg-primary/90 transition-all shadow-lg shadow-primary/20 flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-lg">add_task</span>
|
|
Confirm and Add to List
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body></html> |