feat: Add Stores management component and routing to sidebar
This commit is contained in:
Edgar Mendez Mendoza
parent
f98c2ba580
commit
1b64767aac
@ -39,6 +39,11 @@ const menuItems = ref<MenuItem[]>([
|
|||||||
icon: 'pi pi-shopping-cart',
|
icon: 'pi pi-shopping-cart',
|
||||||
to: '/products'
|
to: '/products'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
label: 'Puntos de venta',
|
||||||
|
icon: 'pi pi-cog',
|
||||||
|
to: '/stores'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: 'Configuración',
|
label: 'Configuración',
|
||||||
icon: 'pi pi-cog',
|
icon: 'pi pi-cog',
|
||||||
|
|||||||
@ -1,364 +0,0 @@
|
|||||||
<!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 - Add New Product</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" 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>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body class="bg-background-light dark:bg-background-dark font-display text-gray-800 dark:text-gray-200">
|
|
||||||
<div class="flex h-screen w-full">
|
|
||||||
<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"
|
|
||||||
data-alt="Admin user avatar"
|
|
||||||
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 text-gray-800 dark:text-gray-200">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 text-gray-800 dark:text-gray-200">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 text-gray-800 dark:text-gray-200">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 text-gray-800 dark:text-gray-200">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 text-gray-800 dark:text-gray-200">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 text-gray-800 dark:text-gray-200">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 tracking-[0.015em] 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-y-auto">
|
|
||||||
<header
|
|
||||||
class="flex sticky top-0 items-center justify-between whitespace-nowrap border-b border-solid border-gray-200 dark:border-gray-800 px-10 py-3 bg-white/80 dark:bg-background-dark/80 backdrop-blur-sm 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 flex-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"
|
|
||||||
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"
|
|
||||||
data-alt="Admin user avatar"
|
|
||||||
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 p-6 lg:p-10">
|
|
||||||
<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">Add New
|
|
||||||
Product</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-wrap justify-between items-center gap-4 mb-8">
|
|
||||||
<div class="flex min-w-72 flex-col gap-2">
|
|
||||||
<h1 class="text-gray-900 dark:text-white text-3xl font-bold tracking-tight">Add New Product
|
|
||||||
</h1>
|
|
||||||
<p class="text-gray-500 dark:text-gray-400 text-base font-normal leading-normal">Fill in the
|
|
||||||
details below to add a new product to the catalog.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
|
||||||
<div class="lg:col-span-2 flex flex-col gap-8">
|
|
||||||
<div
|
|
||||||
class="bg-white dark:bg-gray-900/50 p-6 rounded-xl border border-gray-200 dark:border-gray-800">
|
|
||||||
<h2 class="text-lg font-bold text-gray-900 dark:text-white mb-6">Product Information
|
|
||||||
</h2>
|
|
||||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
|
||||||
<div class="sm:col-span-2">
|
|
||||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
|
|
||||||
for="product-name">Product Name *</label>
|
|
||||||
<input
|
|
||||||
class="form-input w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-primary focus:border-primary"
|
|
||||||
id="product-name" placeholder="e.g., Premium Wireless Mouse" type="text" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
|
|
||||||
for="sku">SKU (Stock Keeping Unit) *</label>
|
|
||||||
<input
|
|
||||||
class="form-input w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-primary focus:border-primary"
|
|
||||||
id="sku" placeholder="e.g., WRLS-MSE-BLK-01" type="text" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
|
|
||||||
for="supplier-id">Supplier ID</label>
|
|
||||||
<input
|
|
||||||
class="form-input w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-primary focus:border-primary"
|
|
||||||
id="supplier-id" placeholder="e.g., SUP-ACME-45" type="text" />
|
|
||||||
</div>
|
|
||||||
<div class="sm:col-span-2">
|
|
||||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
|
|
||||||
for="description">Product Description</label>
|
|
||||||
<textarea
|
|
||||||
class="form-textarea w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-primary focus:border-primary"
|
|
||||||
id="description"
|
|
||||||
placeholder="Enter a detailed description of the product..."
|
|
||||||
rows="4"></textarea>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="bg-white dark:bg-gray-900/50 p-6 rounded-xl border border-gray-200 dark:border-gray-800">
|
|
||||||
<h2 class="text-lg font-bold text-gray-900 dark:text-white mb-6">Product Attributes</h2>
|
|
||||||
<div class="space-y-6" id="attributes-container">
|
|
||||||
<div class="p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
|
|
||||||
<div class="flex items-center justify-between mb-4">
|
|
||||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
|
||||||
for="attribute-name-1">Attribute Name</label>
|
|
||||||
<button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400">
|
|
||||||
<span class="material-symbols-outlined text-xl">delete</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
class="form-input w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-primary focus:border-primary mb-4"
|
|
||||||
id="attribute-name-1" placeholder="e.g., resolucion" type="text"
|
|
||||||
value="resolucion" />
|
|
||||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
|
|
||||||
for="attribute-values-1">Attribute Values</label>
|
|
||||||
<div class="flex items-center gap-2 mb-2">
|
|
||||||
<input
|
|
||||||
class="form-input w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-primary focus:border-primary"
|
|
||||||
id="attribute-values-1" placeholder="e.g., 1080" type="text"
|
|
||||||
value="1080" />
|
|
||||||
<button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400">
|
|
||||||
<span
|
|
||||||
class="material-symbols-outlined text-xl">remove_circle_outline</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mb-2">
|
|
||||||
<input
|
|
||||||
class="form-input w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-primary focus:border-primary"
|
|
||||||
placeholder="e.g., 4K" type="text" value="4K" />
|
|
||||||
<button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400">
|
|
||||||
<span
|
|
||||||
class="material-symbols-outlined text-xl">remove_circle_outline</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mb-4">
|
|
||||||
<input
|
|
||||||
class="form-input w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-primary focus:border-primary"
|
|
||||||
placeholder="e.g., 2K" type="text" value="2K" />
|
|
||||||
<button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400">
|
|
||||||
<span
|
|
||||||
class="material-symbols-outlined text-xl">remove_circle_outline</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
class="flex items-center gap-2 text-sm font-medium text-primary hover:text-primary/90">
|
|
||||||
<span class="material-symbols-outlined">add_circle_outline</span>
|
|
||||||
<span>Add Value</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="p-4 border border-gray-200 dark:border-gray-700 rounded-lg">
|
|
||||||
<div class="flex items-center justify-between mb-4">
|
|
||||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300"
|
|
||||||
for="attribute-name-2">Attribute Name</label>
|
|
||||||
<button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400">
|
|
||||||
<span class="material-symbols-outlined text-xl">delete</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<input
|
|
||||||
class="form-input w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-primary focus:border-primary mb-4"
|
|
||||||
id="attribute-name-2" placeholder="e.g., medida" type="text"
|
|
||||||
value="medida" />
|
|
||||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
|
|
||||||
for="attribute-values-2">Attribute Values</label>
|
|
||||||
<div class="flex items-center gap-2 mb-2">
|
|
||||||
<input
|
|
||||||
class="form-input w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-primary focus:border-primary"
|
|
||||||
id="attribute-values-2" placeholder="e.g., 24" type="text" value="24" />
|
|
||||||
<button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400">
|
|
||||||
<span
|
|
||||||
class="material-symbols-outlined text-xl">remove_circle_outline</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2 mb-4">
|
|
||||||
<input
|
|
||||||
class="form-input w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-primary focus:border-primary"
|
|
||||||
placeholder="e.g., 36" type="text" value="36" />
|
|
||||||
<button class="text-gray-400 hover:text-red-500 dark:hover:text-red-400">
|
|
||||||
<span
|
|
||||||
class="material-symbols-outlined text-xl">remove_circle_outline</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
class="flex items-center gap-2 text-sm font-medium text-primary hover:text-primary/90">
|
|
||||||
<span class="material-symbols-outlined">add_circle_outline</span>
|
|
||||||
<span>Add Value</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 bg-primary/10 dark:bg-primary/20 text-primary text-sm font-bold leading-normal tracking-[0.015em] hover:bg-primary/20 dark:hover:bg-primary/30 w-full mt-4">
|
|
||||||
<span class="material-symbols-outlined mr-2">add</span>
|
|
||||||
<span class="truncate">Add Another Attribute</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="lg:col-span-1 flex flex-col gap-8">
|
|
||||||
<div
|
|
||||||
class="bg-white dark:bg-gray-900/50 p-6 rounded-xl border border-gray-200 dark:border-gray-800">
|
|
||||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-4">Product Image</h3>
|
|
||||||
<div
|
|
||||||
class="flex flex-col items-center justify-center p-6 border-2 border-dashed border-gray-300 dark:border-gray-700 rounded-lg text-center cursor-pointer hover:border-primary dark:hover:border-primary transition-colors">
|
|
||||||
<div class="mb-2 text-gray-400 dark:text-gray-500">
|
|
||||||
<span class="material-symbols-outlined text-5xl">upload_file</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-sm text-gray-500 dark:text-gray-400"><span
|
|
||||||
class="font-semibold text-primary">Click to upload</span> or drag and drop
|
|
||||||
</p>
|
|
||||||
<p class="text-xs text-gray-400 dark:text-gray-500 mt-1">SVG, PNG, JPG or GIF (max.
|
|
||||||
800x400px)</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="bg-white dark:bg-gray-900/50 p-6 rounded-xl border border-gray-200 dark:border-gray-800">
|
|
||||||
<h3 class="text-lg font-bold text-gray-900 dark:text-white mb-6">Organization</h3>
|
|
||||||
<div class="space-y-6">
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
|
|
||||||
for="category">Category</label>
|
|
||||||
<select
|
|
||||||
class="form-select w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-primary focus:border-primary"
|
|
||||||
id="category">
|
|
||||||
<option>Select a category</option>
|
|
||||||
<option>Electronics</option>
|
|
||||||
<option>Apparel</option>
|
|
||||||
<option>Home Goods</option>
|
|
||||||
<option>Office Supplies</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
|
|
||||||
for="subcategory">Subcategory</label>
|
|
||||||
<select
|
|
||||||
class="form-select w-full rounded-lg border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-primary focus:border-primary"
|
|
||||||
id="subcategory">
|
|
||||||
<option>Select a subcategory</option>
|
|
||||||
<option>Mice & Keyboards</option>
|
|
||||||
<option>Monitors</option>
|
|
||||||
<option>Cables & Adapters</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-800 flex justify-end items-center gap-4">
|
|
||||||
<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">Cancel</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="flex min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-lg h-10 px-4 bg-primary text-white text-sm font-bold leading-normal tracking-[0.015em] hover:bg-primary/90">
|
|
||||||
<span class="truncate">Save Product</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
5
src/modules/stores/components/StoresIndex.vue
Normal file
5
src/modules/stores/components/StoresIndex.vue
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<template>
|
||||||
|
<p>
|
||||||
|
Stores Index Component
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
@ -12,6 +12,7 @@ import UnitOfMeasure from '../modules/catalog/components/UnitOfMeasure.vue';
|
|||||||
import ComercialClassification from '../modules/catalog/components/ComercialClassification.vue';
|
import ComercialClassification from '../modules/catalog/components/ComercialClassification.vue';
|
||||||
import ProductsIndex from '../modules/products/components/ProductsIndex.vue';
|
import ProductsIndex from '../modules/products/components/ProductsIndex.vue';
|
||||||
import ProductForm from '../modules/products/components/ProductForm.vue';
|
import ProductForm from '../modules/products/components/ProductForm.vue';
|
||||||
|
import StoresIndex from '../modules/stores/components/StoresIndex.vue';
|
||||||
|
|
||||||
const routes: RouteRecordRaw[] = [
|
const routes: RouteRecordRaw[] = [
|
||||||
{
|
{
|
||||||
@ -141,6 +142,15 @@ const routes: RouteRecordRaw[] = [
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'stores',
|
||||||
|
name: 'Stores',
|
||||||
|
component: StoresIndex,
|
||||||
|
meta: {
|
||||||
|
title: 'Tiendas',
|
||||||
|
requiresAuth: true
|
||||||
|
},
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user