alumnos_ti/LauckCycles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPDATE:

Browse Source 
- Mejorados los graficos en la parte de reportes.
- Agregados 3 nuevos charts para mayor utilidad de la pagina.
This commit is contained in:
Bryam105
2026-06-05 08:44:32 -03:00
parent bc9e327913
commit 2b3b87b0ba
3 changed files with 236 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/reports/index.blade.php
+100
View File
@@ -69,6 +69,48 @@
</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">
<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>
<!-- 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">
@forelse($topClients as $clientSale)
<li class="flex items-center justify-between border-b border-gray-300 dark:border-neutral-700 pb-2">
<div>
<p class="text-sm font-bold text-neutral-900 dark:text-white">{{ $clientSale->client->name ?? 'Cliente Eliminado' }}</p>
<p class="text-xs text-gray-500">{{ $clientSale->client->phone ?? 'Sin teléfono' }}</p>
</div>
<div class="text-right">
<span class="px-2 py-1 bg-green-200 text-green-800 dark:bg-green-900/50 dark:text-neon-lime text-xs font-bold rounded-lg border border-green-400 dark:border-green-600">
${{ number_format($clientSale->total_spent, 2, ',', '.') }}
</span>
</div>
</li>
@empty
<li class="text-sm text-gray-500 italic">No hay ventas registradas aún.</li>
@endforelse
</ul>
</div>
</div>
</div>
<!-- Cargar Chart.js desde CDN -->
@@ -168,6 +210,64 @@
cutout: '60%'
}
});
// --- GRÁFICO DE TOP PRODUCTOS ---
const ctxTopProducts = document.getElementById('topProductsChart').getContext('2d');
const rawTopProducts = @json($topProducts);
new Chart(ctxTopProducts, {
type: 'bar',
data: {
labels: rawTopProducts.map(i => i.product ? i.product.name : 'Eliminado'),
datasets: [{
label: 'Cantidad Vendida',
data: rawTopProducts.map(i => i.total_qty),
backgroundColor: 'rgba(59, 130, 246, 0.7)', // blue-500
borderColor: 'rgb(37, 99, 235)',
borderWidth: 1,
borderRadius: 4
}]
},
options: {
indexAxis: 'y', // barras horizontales
responsive: true,
maintainAspectRatio: false,
plugins: { legend: { display: false } },
scales: {
x: { ticks: { color: textColor }, grid: { color: gridColor, drawBorder: false } },
y: { ticks: { color: textColor }, grid: { display: false } }
}
}
});
// --- GRÁFICO DE TOP REPUESTOS ---
const ctxTopSpares = document.getElementById('topSparesChart').getContext('2d');
const rawTopSpares = @json($topSpares);
new Chart(ctxTopSpares, {
type: 'bar',
data: {
labels: rawTopSpares.map(i => i.product ? i.product.name : 'Eliminado'),
datasets: [{
label: 'Cantidad Usada/Vendida',
data: rawTopSpares.map(i => i.total_qty),
backgroundColor: 'rgba(245, 158, 11, 0.7)', // amber-500
borderColor: 'rgb(217, 119, 6)',
borderWidth: 1,
borderRadius: 4
}]
},
options: {
indexAxis: 'y', // barras horizontales
responsive: true,
maintainAspectRatio: false,
plugins: { legend: { display: false } },
scales: {
x: { ticks: { color: textColor }, grid: { color: gridColor, drawBorder: false } },
y: { ticks: { color: textColor }, grid: { display: false } }
}
}
});
});
</script>