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:
@@ -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>
|
||||
Reference in New Issue
Block a user