feat(auth): implement permission checks for product management and sidebar menu items
This commit is contained in:
edgar.mendez
parent
1cf8cc3aa5
commit
97b91013dd
@ -68,7 +68,14 @@ const menuItems = ref<MenuItem[]>([
|
||||
{
|
||||
label: 'Productos',
|
||||
icon: 'pi pi-shopping-cart',
|
||||
to: '/products'
|
||||
to: '/products',
|
||||
permission: [
|
||||
'products.index',
|
||||
'products.show',
|
||||
'products.store',
|
||||
'products.update',
|
||||
'products.destroy',
|
||||
],
|
||||
},
|
||||
{
|
||||
label: 'Requisiciones',
|
||||
|
||||
@ -1,449 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="es">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
||||
<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&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 id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
"outline-variant": "#c3c6d7",
|
||||
"tertiary-fixed": "#ffdbcd",
|
||||
"on-secondary-fixed": "#00174b",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-primary": "#ffffff",
|
||||
"error-container": "#ffdad6",
|
||||
"on-error": "#ffffff",
|
||||
"inverse-on-surface": "#f0f0fb",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-secondary-container": "#394c84",
|
||||
"surface-container": "#ededf9",
|
||||
"tertiary-container": "#bc4800",
|
||||
"on-tertiary-fixed-variant": "#7d2d00",
|
||||
"on-surface": "#191b23",
|
||||
"on-tertiary-fixed": "#360f00",
|
||||
"outline": "#737686",
|
||||
"secondary-fixed-dim": "#b4c5ff",
|
||||
"surface-tint": "#0053db",
|
||||
"surface-container-low": "#f3f3fe",
|
||||
"background": "#faf8ff",
|
||||
"inverse-primary": "#b4c5ff",
|
||||
"on-primary-fixed": "#00174b",
|
||||
"on-tertiary-container": "#ffede6",
|
||||
"tertiary": "#943700",
|
||||
"primary-fixed": "#dbe1ff",
|
||||
"surface-container-high": "#e7e7f3",
|
||||
"on-surface-variant": "#434655",
|
||||
"on-secondary-fixed-variant": "#31447b",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-dim": "#d9d9e5",
|
||||
"inverse-surface": "#2e3039",
|
||||
"surface-container-highest": "#e1e2ed",
|
||||
"primary": "#004ac6",
|
||||
"secondary-container": "#acbfff",
|
||||
"surface-bright": "#faf8ff",
|
||||
"on-background": "#191b23",
|
||||
"primary-container": "#2563eb",
|
||||
"error": "#ba1a1a",
|
||||
"secondary": "#495c95",
|
||||
"secondary-fixed": "#dbe1ff",
|
||||
"surface": "#faf8ff",
|
||||
"on-primary-container": "#eeefff",
|
||||
"primary-fixed-dim": "#b4c5ff",
|
||||
"on-primary-fixed-variant": "#003ea8",
|
||||
"tertiary-fixed-dim": "#ffb596",
|
||||
"surface-variant": "#e1e2ed"
|
||||
},
|
||||
fontFamily: {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
},
|
||||
borderRadius: { "DEFAULT": "0.125rem", "lg": "0.25rem", "xl": "0.5rem", "full": "0.75rem" },
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.glass-panel {
|
||||
background: rgba(250, 248, 255, 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body class="bg-background text-on-surface min-h-screen flex">
|
||||
<!-- SideNavBar Shell -->
|
||||
<aside class="h-screen w-64 fixed left-0 top-0 z-50 bg-[#ffffff] dark:bg-slate-900 flex flex-col p-4 gap-2">
|
||||
<div class="mb-8 px-2">
|
||||
<h1 class="text-lg font-bold text-[#191b23] dark:text-white">The Precise Curator</h1>
|
||||
<p class="text-xs text-slate-500 font-medium uppercase tracking-wider">Management Suite</p>
|
||||
</div>
|
||||
<nav class="flex-grow space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#004ac6] hover:bg-[#ededf9] rounded-lg transition-all font-medium text-sm"
|
||||
href="#">
|
||||
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 bg-[#f3f3fe] text-[#004ac6] font-semibold rounded-lg text-sm"
|
||||
href="#">
|
||||
<span class="material-symbols-outlined" data-icon="inventory_2">inventory_2</span>
|
||||
<span>Warehouse</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#004ac6] hover:bg-[#ededf9] rounded-lg transition-all font-medium text-sm"
|
||||
href="#">
|
||||
<span class="material-symbols-outlined" data-icon="inventory">inventory</span>
|
||||
<span>Products</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#004ac6] hover:bg-[#ededf9] rounded-lg transition-all font-medium text-sm"
|
||||
href="#">
|
||||
<span class="material-symbols-outlined" data-icon="group">group</span>
|
||||
<span>HR</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#004ac6] hover:bg-[#ededf9] rounded-lg transition-all font-medium text-sm"
|
||||
href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span>Settings</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto pt-4 border-t border-surface-container space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#004ac6] hover:bg-[#ededf9] rounded-lg transition-all font-medium text-sm"
|
||||
href="#">
|
||||
<span class="material-symbols-outlined" data-icon="contact_support">contact_support</span>
|
||||
<span>Support</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 hover:text-[#004ac6] hover:bg-[#ededf9] rounded-lg transition-all font-medium text-sm"
|
||||
href="#">
|
||||
<span class="material-symbols-outlined" data-icon="logout">logout</span>
|
||||
<span>Logout</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Area -->
|
||||
<main class="ml-64 flex-grow flex flex-col min-h-screen">
|
||||
<!-- TopAppBar Shell -->
|
||||
<header class="w-full h-16 sticky top-0 z-40 bg-[#faf8ff] flex justify-between items-center px-8">
|
||||
<div class="flex items-center gap-8">
|
||||
<span class="text-xl font-bold text-[#004ac6]">Architectural ERP</span>
|
||||
<div class="hidden md:flex gap-6 items-center">
|
||||
<a class="text-slate-600 font-medium hover:text-[#004ac6] transition-colors text-sm"
|
||||
href="#">Inventario</a>
|
||||
<a class="text-[#004ac6] font-bold border-b-2 border-[#004ac6] text-sm py-5"
|
||||
href="#">Configuración</a>
|
||||
<a class="text-slate-600 font-medium hover:text-[#004ac6] transition-colors text-sm"
|
||||
href="#">Reportes</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<button class="p-2 text-slate-600 hover:bg-slate-100 rounded-full transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-600 hover:bg-slate-100 rounded-full transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
</button>
|
||||
<div class="h-8 w-8 rounded-full overflow-hidden bg-primary-container flex items-center justify-center">
|
||||
<img alt="User Profile Avatar"
|
||||
data-alt="professional headshot of a middle-aged architect in a minimalist workspace with soft natural lighting"
|
||||
src="https://lh3.googleusercontent.com/aida-public/AB6AXuBWBuLM7PNHJEV0FZ_f5K3-vmg--FVfXa5_kQAbfarkJeDejtpvXC6TJQTC2geDqYJDl8GYz3QSAA1HpQr3fYwelTpFgvnSQTUPRXSgK-H38In03m51WsW1PP00_4cdEErO6dgAGN_BVReJr3-L6eKpYOiA8BZmDKerxWs4YYgffqz9bmIVybVi1bin083ZBZy0LgQGaDVCru_hs46OonyQHM4qWbyYgmVUTRcCaevGZ68ag6vo2eCXt5fwFknLVpplpZd-ccf0L26n" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Canvas -->
|
||||
<div class="p-8 space-y-8 max-w-7xl mx-auto w-full">
|
||||
<!-- Header Section -->
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
|
||||
<div class="space-y-1">
|
||||
<h2 class="text-3xl font-bold text-on-surface tracking-tight">Gestión de Equivalencias</h2>
|
||||
<p class="text-on-surface-variant text-sm">Configura las relaciones entre diferentes unidades de
|
||||
medida para el control de stock.</p>
|
||||
</div>
|
||||
<button
|
||||
class="bg-gradient-to-br from-primary to-primary-container text-white px-5 py-2.5 rounded-md flex items-center gap-2 font-semibold shadow-sm hover:opacity-90 transition-all active:scale-95">
|
||||
<span class="material-symbols-outlined text-lg" data-icon="add">add</span>
|
||||
Nueva Equivalencia
|
||||
</button>
|
||||
</div>
|
||||
<!-- Dashboard Layout (Bento Style) -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||
<!-- Filters & Search Bento Box -->
|
||||
<div class="lg:col-span-12 bg-surface-container-lowest p-6 rounded-xl space-y-6">
|
||||
<div class="flex flex-col md:flex-row gap-4">
|
||||
<div class="flex-grow relative">
|
||||
<span
|
||||
class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline"
|
||||
data-icon="search">search</span>
|
||||
<input
|
||||
class="w-full pl-10 pr-4 py-2 bg-surface-container-low border-b border-outline-variant focus:border-primary focus:ring-0 transition-all text-sm outline-none"
|
||||
placeholder="Buscar unidades..." type="text" />
|
||||
</div>
|
||||
<div class="flex gap-2 items-center overflow-x-auto pb-2 md:pb-0">
|
||||
<button
|
||||
class="bg-secondary-container text-on-secondary-container px-4 py-1.5 rounded-full text-xs font-bold whitespace-nowrap">Todas</button>
|
||||
<button
|
||||
class="bg-surface-container-low text-on-surface-variant hover:bg-surface-container-high px-4 py-1.5 rounded-full text-xs font-semibold transition-colors whitespace-nowrap">Peso</button>
|
||||
<button
|
||||
class="bg-surface-container-low text-on-surface-variant hover:bg-surface-container-high px-4 py-1.5 rounded-full text-xs font-semibold transition-colors whitespace-nowrap">Volumen</button>
|
||||
<button
|
||||
class="bg-surface-container-low text-on-surface-variant hover:bg-surface-container-high px-4 py-1.5 rounded-full text-xs font-semibold transition-colors whitespace-nowrap">Longitud</button>
|
||||
<button
|
||||
class="bg-surface-container-low text-on-surface-variant hover:bg-surface-container-high px-4 py-1.5 rounded-full text-xs font-semibold transition-colors whitespace-nowrap">Unidades</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Table Section -->
|
||||
<div class="lg:col-span-8 bg-surface-container-lowest rounded-xl overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-surface-container-high">
|
||||
<th
|
||||
class="px-6 py-4 text-[10px] uppercase font-bold text-on-surface-variant tracking-widest">
|
||||
Unidad Origen</th>
|
||||
<th
|
||||
class="px-6 py-4 text-[10px] uppercase font-bold text-on-surface-variant tracking-widest text-center">
|
||||
Operador</th>
|
||||
<th
|
||||
class="px-6 py-4 text-[10px] uppercase font-bold text-on-surface-variant tracking-widest text-center">
|
||||
Factor</th>
|
||||
<th
|
||||
class="px-6 py-4 text-[10px] uppercase font-bold text-on-surface-variant tracking-widest">
|
||||
Unidad Destino</th>
|
||||
<th
|
||||
class="px-6 py-4 text-[10px] uppercase font-bold text-on-surface-variant tracking-widest text-right">
|
||||
Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y-2 divide-surface">
|
||||
<tr
|
||||
class="bg-surface-container-lowest hover:bg-surface-container-low transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="h-8 w-8 bg-surface-container-low flex items-center justify-center rounded text-primary">
|
||||
<span class="material-symbols-outlined text-sm"
|
||||
data-icon="inventory_2">inventory_2</span>
|
||||
</div>
|
||||
<span class="font-semibold text-sm">Caja (Master)</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center font-bold text-primary">x</td>
|
||||
<td class="px-6 py-4 text-center font-mono text-sm">12.00</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
class="bg-secondary-container/30 text-secondary px-2 py-1 rounded text-xs font-bold">Pieza</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<div
|
||||
class="flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
class="p-2 text-primary hover:bg-primary-fixed rounded-lg transition-colors"><span
|
||||
class="material-symbols-outlined text-lg"
|
||||
data-icon="edit">edit</span></button>
|
||||
<button
|
||||
class="p-2 text-error hover:bg-error-container rounded-lg transition-colors"><span
|
||||
class="material-symbols-outlined text-lg"
|
||||
data-icon="delete">delete</span></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="bg-surface-container-low hover:bg-surface-container-high transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="h-8 w-8 bg-surface-container-lowest flex items-center justify-center rounded text-primary">
|
||||
<span class="material-symbols-outlined text-sm"
|
||||
data-icon="scale">scale</span>
|
||||
</div>
|
||||
<span class="font-semibold text-sm">Kilogramo</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center font-bold text-primary">/</td>
|
||||
<td class="px-6 py-4 text-center font-mono text-sm">1000.00</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
class="bg-secondary-container/30 text-secondary px-2 py-1 rounded text-xs font-bold">Gramo</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<div
|
||||
class="flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
class="p-2 text-primary hover:bg-primary-fixed rounded-lg transition-colors"><span
|
||||
class="material-symbols-outlined text-lg"
|
||||
data-icon="edit">edit</span></button>
|
||||
<button
|
||||
class="p-2 text-error hover:bg-error-container rounded-lg transition-colors"><span
|
||||
class="material-symbols-outlined text-lg"
|
||||
data-icon="delete">delete</span></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
class="bg-surface-container-lowest hover:bg-surface-container-low transition-colors group">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="h-8 w-8 bg-surface-container-low flex items-center justify-center rounded text-primary">
|
||||
<span class="material-symbols-outlined text-sm"
|
||||
data-icon="widgets">widgets</span>
|
||||
</div>
|
||||
<span class="font-semibold text-sm">Pallet</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-center font-bold text-primary">x</td>
|
||||
<td class="px-6 py-4 text-center font-mono text-sm">48.00</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span
|
||||
class="bg-secondary-container/30 text-secondary px-2 py-1 rounded text-xs font-bold">Caja</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<div
|
||||
class="flex justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button
|
||||
class="p-2 text-primary hover:bg-primary-fixed rounded-lg transition-colors"><span
|
||||
class="material-symbols-outlined text-lg"
|
||||
data-icon="edit">edit</span></button>
|
||||
<button
|
||||
class="p-2 text-error hover:bg-error-container rounded-lg transition-colors"><span
|
||||
class="material-symbols-outlined text-lg"
|
||||
data-icon="delete">delete</span></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Pagination -->
|
||||
<div class="px-6 py-4 bg-surface-container-low flex items-center justify-between">
|
||||
<span class="text-xs text-on-surface-variant">Mostrando 1 a 3 de 24 entradas</span>
|
||||
<div class="flex gap-1">
|
||||
<button
|
||||
class="p-1 text-on-surface-variant hover:bg-surface-container-highest rounded transition-colors"><span
|
||||
class="material-symbols-outlined text-sm"
|
||||
data-icon="chevron_left">chevron_left</span></button>
|
||||
<button class="px-2.5 py-1 text-xs font-bold bg-primary text-white rounded">1</button>
|
||||
<button
|
||||
class="px-2.5 py-1 text-xs font-semibold text-on-surface-variant hover:bg-surface-container-highest rounded transition-colors">2</button>
|
||||
<button
|
||||
class="px-2.5 py-1 text-xs font-semibold text-on-surface-variant hover:bg-surface-container-highest rounded transition-colors">3</button>
|
||||
<button
|
||||
class="p-1 text-on-surface-variant hover:bg-surface-container-highest rounded transition-colors"><span
|
||||
class="material-symbols-outlined text-sm"
|
||||
data-icon="chevron_right">chevron_right</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Form Bento Box -->
|
||||
<div class="lg:col-span-4 space-y-6">
|
||||
<div
|
||||
class="bg-surface-container-lowest p-6 rounded-xl shadow-sm border border-outline-variant border-opacity-10">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="add_box">add_box</span>
|
||||
<h3 class="text-sm font-bold text-on-surface uppercase tracking-tight">Agregar Nueva
|
||||
Equivalencia</h3>
|
||||
</div>
|
||||
<form class="space-y-6">
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-[10px] font-bold text-on-surface-variant uppercase">Unidad
|
||||
Base</label>
|
||||
<select
|
||||
class="w-full bg-surface-container-low border-b border-outline-variant py-2 text-sm focus:border-primary outline-none transition-all appearance-none">
|
||||
<option>Seleccionar unidad...</option>
|
||||
<option>Caja</option>
|
||||
<option>Kilogramo</option>
|
||||
<option>Litro</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="space-y-1.5">
|
||||
<label
|
||||
class="text-[10px] font-bold text-on-surface-variant uppercase">Operador</label>
|
||||
<select
|
||||
class="w-full bg-surface-container-low border-b border-outline-variant py-2 text-sm focus:border-primary outline-none transition-all appearance-none">
|
||||
<option>Multiplicar (x)</option>
|
||||
<option>Dividir (/)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label
|
||||
class="text-[10px] font-bold text-on-surface-variant uppercase">Factor</label>
|
||||
<input
|
||||
class="w-full bg-surface-container-low border-b border-outline-variant py-2 text-sm focus:border-primary outline-none transition-all"
|
||||
placeholder="1.00" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-1.5">
|
||||
<label class="text-[10px] font-bold text-on-surface-variant uppercase">Unidad
|
||||
Destino</label>
|
||||
<select
|
||||
class="w-full bg-surface-container-low border-b border-outline-variant py-2 text-sm focus:border-primary outline-none transition-all appearance-none">
|
||||
<option>Seleccionar unidad...</option>
|
||||
<option>Pieza</option>
|
||||
<option>Gramo</option>
|
||||
<option>Mililitro</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="pt-4 flex gap-3">
|
||||
<button
|
||||
class="flex-grow bg-surface-container-high text-on-surface-variant font-semibold py-2 rounded-md hover:bg-surface-dim transition-colors text-sm"
|
||||
type="button">Cancelar</button>
|
||||
<button
|
||||
class="flex-grow bg-primary text-white font-semibold py-2 rounded-md hover:opacity-90 transition-all text-sm shadow-sm"
|
||||
type="submit">Guardar</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- Quick Insights Bento -->
|
||||
<div
|
||||
class="bg-gradient-to-br from-secondary-container to-primary-container p-6 rounded-xl text-on-secondary-container">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<span class="text-[10px] font-bold uppercase tracking-widest opacity-80">Info Rápida</span>
|
||||
<span class="material-symbols-outlined text-lg" data-icon="info">info</span>
|
||||
</div>
|
||||
<p class="text-sm font-medium leading-relaxed">
|
||||
Asegúrese de que las unidades base correspondan a las medidas de inventario físico para
|
||||
mantener la precisión en los conteos cíclicos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- FAB for Mobile (Contextual suppression on larger screens as per logic) -->
|
||||
<button
|
||||
class="md:hidden fixed bottom-6 right-6 h-14 w-14 bg-primary text-white rounded-full shadow-2xl flex items-center justify-center z-50">
|
||||
<span class="material-symbols-outlined" data-icon="add">add</span>
|
||||
</button>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -10,6 +10,10 @@ import { useComercialClassificationStore } from '../../catalog/stores/comercialC
|
||||
import { useUnitOfMeasureStore } from '../../catalog/stores/unitOfMeasureStore';
|
||||
import { satCodeProductsService, type SatCodeProduct } from '../../catalog/services/sat-code-products.services';
|
||||
import type { Product, CreateProductData } from '../types/product';
|
||||
import { useAuth } from '@/modules/auth/composables/useAuth';
|
||||
|
||||
// Auth/Permissions
|
||||
const { hasPermission } = useAuth();
|
||||
|
||||
// Props
|
||||
interface Props {
|
||||
@ -32,6 +36,11 @@ const emit = defineEmits<{
|
||||
const clasificationsStore = useComercialClassificationStore();
|
||||
const unitOfMeasureStore = useUnitOfMeasureStore();
|
||||
|
||||
// Computed permission to store or update
|
||||
const canSaveProduct = computed(() => {
|
||||
return props.isEditing ? hasPermission('products.update') : hasPermission('products.store');
|
||||
});
|
||||
|
||||
// Form data
|
||||
const formData = ref<CreateProductData>({
|
||||
code: '',
|
||||
@ -700,11 +709,12 @@ const onUpload = (event: any) => {
|
||||
outlined
|
||||
@click="handleCancel"
|
||||
/>
|
||||
<Button
|
||||
<Button
|
||||
v-if="canSaveProduct"
|
||||
:label="isEditing ? 'Actualizar Producto' : 'Guardar Producto'"
|
||||
:disabled="!isFormValid"
|
||||
@click="handleSubmit"
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import { useAuth } from '@/modules/auth/composables/useAuth';
|
||||
import { useToast } from 'primevue/usetoast';
|
||||
import { useConfirm } from 'primevue/useconfirm';
|
||||
import Breadcrumb from 'primevue/breadcrumb';
|
||||
@ -38,6 +39,13 @@ const isEditing = ref(false);
|
||||
const searchTerm = ref('');
|
||||
const selectedProduct = ref<Product | null>(null);
|
||||
|
||||
// Auth/Permissions
|
||||
const { hasPermission } = useAuth();
|
||||
const canCreateProduct = computed(() => hasPermission('products.store'));
|
||||
const canUpdateProduct = computed(() => hasPermission('products.update'));
|
||||
const canDeleteProduct = computed(() => hasPermission('products.destroy'));
|
||||
const canViewProduct = computed(() => hasPermission('products.index'));
|
||||
|
||||
// Computed
|
||||
const products = computed(() => productStore.products);
|
||||
const loading = computed(() => productStore.loading);
|
||||
@ -167,7 +175,12 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<div v-if="!canViewProduct" class="flex flex-col items-center py-16">
|
||||
<i class="pi pi-ban text-red-400 text-5xl mb-4"></i>
|
||||
<p class="text-lg text-red-600 font-semibold">No tienes permisos para visualizar este módulo.</p>
|
||||
</div>
|
||||
<div v-else class="space-y-6">
|
||||
<!-- Toast Notifications -->
|
||||
<Toast position="bottom-right" />
|
||||
|
||||
@ -182,11 +195,12 @@ onMounted(() => {
|
||||
<h1 class="text-2xl font-bold leading-tight tracking-tight text-surface-900 dark:text-white">
|
||||
Catálogo de Productos
|
||||
</h1>
|
||||
<Button
|
||||
<Button
|
||||
v-if="canCreateProduct"
|
||||
label="Nuevo Producto"
|
||||
icon="pi pi-plus"
|
||||
@click="openCreateDialog"
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Filters & Search -->
|
||||
@ -296,15 +310,17 @@ onMounted(() => {
|
||||
<Column header="Acciones" headerStyle="text-align: right" bodyStyle="text-align: right" style="min-width: 120px">
|
||||
<template #body="slotProps">
|
||||
<div class="flex items-center justify-end gap-2">
|
||||
<Button
|
||||
<Button
|
||||
v-if="canUpdateProduct"
|
||||
icon="pi pi-pencil"
|
||||
text
|
||||
rounded
|
||||
size="small"
|
||||
@click="editProduct(slotProps.data)"
|
||||
v-tooltip.top="'Editar'"
|
||||
/>
|
||||
<Button
|
||||
/>
|
||||
<Button
|
||||
v-if="canDeleteProduct"
|
||||
icon="pi pi-trash"
|
||||
text
|
||||
rounded
|
||||
@ -312,7 +328,7 @@ onMounted(() => {
|
||||
severity="danger"
|
||||
@click="deleteProductConfirm(slotProps.data)"
|
||||
v-tooltip.top="'Eliminar'"
|
||||
/>
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Column>
|
||||
@ -363,6 +379,7 @@ onMounted(() => {
|
||||
@save="handleSaveProduct"
|
||||
@cancel="handleCancelForm"
|
||||
/>
|
||||
</Dialog>
|
||||
</Dialog>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
x
Reference in New Issue
Block a user