cambios imagenes en el catalogo, permisos al empleado para que pued agregar clientes y arreglos en la vista del report

This commit is contained in:
gianella
2026-06-12 13:09:25 -03:00
parent 8ed7abc5fe
commit eab0698979
5 changed files with 54 additions and 35 deletions
+29 -22
View File
@@ -3,9 +3,7 @@
<div class="w-full mx-auto pb-10">
<!-- Tarjetas de Resumen -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<!-- Ingresos -->
<div class="bg-gray-200 dark:bg-panel-bg border border-neutral-400 dark:border-neutral-800 rounded-xl p-6 shadow-lg">
<div class="flex justify-between items-start">
<div>
@@ -19,7 +17,6 @@
</div>
</div>
<!-- Egresos -->
<div class="bg-gray-200 dark:bg-panel-bg border border-neutral-400 dark:border-neutral-800 rounded-xl p-6 shadow-lg">
<div class="flex justify-between items-start">
<div>
@@ -33,7 +30,6 @@
</div>
</div>
<!-- Balance -->
<div class="bg-gray-200 dark:bg-panel-bg border border-neutral-400 dark:border-neutral-800 rounded-xl p-6 shadow-lg">
<div class="flex justify-between items-start">
<div>
@@ -50,7 +46,6 @@
</div>
</div>
<!-- Gráfico de Evolución -->
<div class="mb-6 bg-gray-200 dark:bg-panel-bg border border-neutral-400 dark:border-neutral-800 rounded-xl p-6 shadow-lg">
<h3 class="text-lg font-bold text-neutral-900 dark:text-white mb-4">Evolución de Ingresos y Egresos (Últimos 6 meses)</h3>
<div class="relative h-72 w-full">
@@ -58,9 +53,7 @@
</div>
</div>
<!-- Gráficos de Torta (Distribución) -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Gráfico de Torta Ingresos -->
<div class="bg-gray-200 dark:bg-panel-bg border border-neutral-400 dark:border-neutral-800 rounded-xl p-6 shadow-lg">
<h3 class="text-lg font-bold text-neutral-900 dark:text-white mb-4">Ingresos por Categoría</h3>
<div class="relative h-72 w-full flex justify-center">
@@ -68,7 +61,6 @@
</div>
</div>
<!-- Gráfico de Torta Gastos -->
<div class="bg-gray-200 dark:bg-panel-bg border border-neutral-400 dark:border-neutral-800 rounded-xl p-6 shadow-lg">
<h3 class="text-lg font-bold text-neutral-900 dark:text-white mb-4">Gastos por Categoría</h3>
<div class="relative h-72 w-full flex justify-center">
@@ -77,26 +69,21 @@
</div>
</div>
<!-- Nuevas Métricas -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-6">
<!-- Top 5 Productos -->
<div class="bg-gray-200 dark:bg-panel-bg border border-neutral-400 dark:border-neutral-800 rounded-xl p-6 shadow-lg">
<h3 class="text-lg font-bold text-neutral-900 dark:text-white mb-4">Top 5 Productos Vendidos</h3>
<div class="relative h-64 w-full">
<div class="relative h-96 w-full">
<canvas id="topProductsChart"></canvas>
</div>
</div>
<!-- Top 5 Repuestos -->
<div class="bg-gray-200 dark:bg-panel-bg border border-neutral-400 dark:border-neutral-800 rounded-xl p-6 shadow-lg">
<h3 class="text-lg font-bold text-neutral-900 dark:text-white mb-4">Top 5 Repuestos Usados</h3>
<div class="relative h-64 w-full">
<canvas id="topSparesChart"></canvas>
</div>
<div class="relative h-96 w-full">
<canvas id="topSparesChart"></canvas> </div>
</div>
<!-- Top Clientes -->
<div class="bg-gray-200 dark:bg-panel-bg border border-neutral-400 dark:border-neutral-800 rounded-xl p-6 shadow-lg">
<h3 class="text-lg font-bold text-neutral-900 dark:text-white mb-4">Mejores Clientes</h3>
<ul class="space-y-4">
@@ -121,7 +108,6 @@
</div>
<!-- Cargar Chart.js desde CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
@@ -131,6 +117,27 @@
const textColor = isDark ? '#e5e7eb' : '#111827';
const gridColor = isDark ? '#374151' : '#d1d5db';
// NUEVA FUNCIÓN: Agrupa textos largos en múltiples líneas
const agruparTexto = (texto, maxCaracteres = 22) => {
if (!texto) return 'Eliminado';
if (texto.length <= maxCaracteres) return texto;
let palabras = texto.split(' ');
let lineas = [];
let lineaActual = '';
palabras.forEach(palabra => {
if ((lineaActual + palabra).length > maxCaracteres) {
lineas.push(lineaActual.trim());
lineaActual = palabra + ' ';
} else {
lineaActual += palabra + ' ';
}
});
if (lineaActual) lineas.push(lineaActual.trim());
return lineas;
};
// --- GRÁFICO DE BALANCE (Barras) ---
const ctxBalance = document.getElementById('balanceChart').getContext('2d');
const months = @json($months);
@@ -269,7 +276,7 @@
new Chart(ctxTopProducts, {
type: 'bar',
data: {
labels: rawTopProducts.map(i => i.product ? i.product.name : 'Eliminado'),
labels: rawTopProducts.map(i => agruparTexto(i.product ? i.product.name : 'Eliminado')),
datasets: [{
label: 'Cantidad Vendida',
data: rawTopProducts.map(i => i.total_qty),
@@ -286,7 +293,7 @@
plugins: { legend: { display: false } },
scales: {
x: { ticks: { color: textColor }, grid: { color: gridColor, drawBorder: false } },
y: { ticks: { color: textColor }, grid: { display: false } }
y: { ticks: { color: textColor, autoSkip: false }, grid: { display: false } }
}
}
});
@@ -298,7 +305,7 @@
new Chart(ctxTopSpares, {
type: 'bar',
data: {
labels: rawTopSpares.map(i => i.product ? i.product.name : 'Eliminado'),
labels: rawTopSpares.map(i => agruparTexto(i.product ? i.product.name : 'Eliminado')),
datasets: [{
label: 'Cantidad Usada/Vendida',
data: rawTopSpares.map(i => i.total_qty),
@@ -315,11 +322,11 @@
plugins: { legend: { display: false } },
scales: {
x: { ticks: { color: textColor }, grid: { color: gridColor, drawBorder: false } },
y: { ticks: { color: textColor }, grid: { display: false } }
y: { ticks: { color: textColor, autoSkip: false }, grid: { display: false } }
}
}
});
});
</script>
</x-layout>
</x-layout>