Merge branch 'Axel' of repositorio.acatlan.unam.mx:IO/front-AT into develop
This commit is contained in:
@@ -4,7 +4,19 @@ import { useState, useEffect } from "react";
|
||||
import { envConfig } from "@/app/lib/config";
|
||||
import axios from "axios";
|
||||
import Cookies from "js-cookie";
|
||||
import { Metadata } from "next";
|
||||
import * as XLSX from "xlsx";
|
||||
import { saveAs } from "file-saver";
|
||||
|
||||
import {
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
ResponsiveContainer,
|
||||
Line,
|
||||
LineChart,
|
||||
} from "recharts";
|
||||
|
||||
interface TotalServicioPeriodo {
|
||||
nombre_servicio: string;
|
||||
@@ -27,7 +39,6 @@ export default function ReporteTotalesPage() {
|
||||
const [servicios, setServicios] = useState<Servicio[]>([]);
|
||||
const [periodos, setPeriodos] = useState<Periodo[]>([]);
|
||||
const [cargando, setCargando] = useState(true);
|
||||
|
||||
const [periodoInicio, setPeriodoInicio] = useState<string>("");
|
||||
const [periodoFin, setPeriodoFin] = useState<string>("");
|
||||
const [servicioId, setServicioId] = useState<string>("");
|
||||
@@ -35,6 +46,77 @@ export default function ReporteTotalesPage() {
|
||||
const token = Cookies.get("token");
|
||||
const headers = { Authorization: `Bearer ${token}` };
|
||||
|
||||
// TOOLTIP ORDENADO
|
||||
const CustomTooltip = ({ active, payload, label }: any) => {
|
||||
if (active && payload && payload.length) {
|
||||
const sorted = [...payload]
|
||||
.filter((item) => item.value > 0)
|
||||
.sort((a, b) => b.value - a.value);
|
||||
|
||||
return (
|
||||
<div style={{ background: "white", padding: "10px", border: "1px solid #ccc", borderRadius: "8px" }}>
|
||||
<p style={{ fontWeight: "bold" }}>Periodo: {label}</p>
|
||||
{sorted.map((entry: any, index: number) => (
|
||||
<div key={index} style={{ color: entry.color }}>
|
||||
{entry.name}: ${entry.value.toFixed(2)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
// EXPORTAR EXCEL PIVOT
|
||||
const exportarExcelPivot = () => {
|
||||
if (!totales.length) return;
|
||||
|
||||
const periodosUnicos = Array.from(new Set(totales.map((t) => t.periodo))).sort();
|
||||
const serviciosUnicos = Array.from(new Set(totales.map((t) => t.nombre_servicio)));
|
||||
|
||||
const dataExcel = serviciosUnicos.map((servicio) => {
|
||||
const fila: any = { Servicio: servicio };
|
||||
|
||||
periodosUnicos.forEach((periodo) => {
|
||||
const item = totales.find(
|
||||
(t) => t.nombre_servicio === servicio && t.periodo === periodo
|
||||
);
|
||||
fila[periodo] = item ? item.monto_total : 0;
|
||||
});
|
||||
|
||||
// total por fila
|
||||
fila["Total"] = periodosUnicos.reduce(
|
||||
(acc, periodo) => acc + (fila[periodo] || 0),
|
||||
0
|
||||
);
|
||||
|
||||
return fila;
|
||||
});
|
||||
|
||||
const worksheet = XLSX.utils.json_to_sheet(dataExcel);
|
||||
|
||||
worksheet["!cols"] = [
|
||||
{ wch: 30 },
|
||||
...periodosUnicos.map(() => ({ wch: 15 })),
|
||||
{ wch: 15 },
|
||||
];
|
||||
|
||||
const workbook = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet, "Pivot");
|
||||
|
||||
const excelBuffer = XLSX.write(workbook, {
|
||||
bookType: "xlsx",
|
||||
type: "array",
|
||||
});
|
||||
|
||||
const data = new Blob([excelBuffer], {
|
||||
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
|
||||
});
|
||||
|
||||
saveAs(data, "reporte_pivot.xlsx");
|
||||
};
|
||||
|
||||
// FETCH
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
@@ -45,7 +127,7 @@ export default function ReporteTotalesPage() {
|
||||
setServicios(serviciosRes.data);
|
||||
setPeriodos(periodosRes.data);
|
||||
} catch (error) {
|
||||
console.error("Error al cargar servicios o periodos", error);
|
||||
console.error("Error al cargar datos", error);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
@@ -54,7 +136,6 @@ export default function ReporteTotalesPage() {
|
||||
const obtenerTotales = async () => {
|
||||
setCargando(true);
|
||||
try {
|
||||
// Construir query params
|
||||
const params = new URLSearchParams();
|
||||
if (periodoInicio) params.append("periodoInicio", periodoInicio);
|
||||
if (periodoFin) params.append("periodoFin", periodoFin);
|
||||
@@ -74,16 +155,38 @@ export default function ReporteTotalesPage() {
|
||||
obtenerTotales();
|
||||
};
|
||||
|
||||
// DATA PARA GRAFICA
|
||||
const transformDataForChart = () => {
|
||||
const periodosUnicos = Array.from(new Set(totales.map((t) => t.periodo))).sort();
|
||||
const serviciosUnicos = Array.from(new Set(totales.map((t) => t.nombre_servicio)));
|
||||
|
||||
const data = periodosUnicos.map((periodo) => {
|
||||
const row: any = { periodo };
|
||||
serviciosUnicos.forEach((servicio) => {
|
||||
const item = totales.find(
|
||||
(t) => t.periodo === periodo && t.nombre_servicio === servicio
|
||||
);
|
||||
row[servicio] = item ? item.monto_total : 0;
|
||||
});
|
||||
return row;
|
||||
});
|
||||
|
||||
return { data, serviciosUnicos };
|
||||
};
|
||||
|
||||
const { data: chartData, serviciosUnicos } = transformDataForChart();
|
||||
|
||||
const colors = ["black", "red", "blue", "orange", "purple", "green"];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1 style={{ color: "rgb(3, 1, 72)" }}>REPORTE DE TOTALES POR SERVICIO Y PERIODO</h1>
|
||||
<h1 style={{ color: "rgb(3, 1, 72)", marginBottom: "20px" }}>
|
||||
REPORTE DE TOTALES POR SERVICIO Y PERIODO
|
||||
</h1>
|
||||
|
||||
<div style={{ marginBottom: "20px", display: "flex", gap: "10px", flexWrap: "wrap" }}>
|
||||
<select
|
||||
value={periodoInicio}
|
||||
onChange={(e) => setPeriodoInicio(e.target.value)}
|
||||
>
|
||||
<option value="">Periodo inicio (todos)</option>
|
||||
<select value={periodoInicio} onChange={(e) => setPeriodoInicio(e.target.value)}>
|
||||
<option value="">Periodo inicio</option>
|
||||
{periodos.map((p) => (
|
||||
<option key={p.id_periodo} value={p.id_periodo}>
|
||||
{p.semestre}
|
||||
@@ -91,11 +194,8 @@ export default function ReporteTotalesPage() {
|
||||
))}
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={periodoFin}
|
||||
onChange={(e) => setPeriodoFin(e.target.value)}
|
||||
>
|
||||
<option value="">Periodo fin (todos)</option>
|
||||
<select value={periodoFin} onChange={(e) => setPeriodoFin(e.target.value)}>
|
||||
<option value="">Periodo fin</option>
|
||||
{periodos.map((p) => (
|
||||
<option key={p.id_periodo} value={p.id_periodo}>
|
||||
{p.semestre}
|
||||
@@ -103,10 +203,7 @@ export default function ReporteTotalesPage() {
|
||||
))}
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={servicioId}
|
||||
onChange={(e) => setServicioId(e.target.value)}
|
||||
>
|
||||
<select value={servicioId} onChange={(e) => setServicioId(e.target.value)}>
|
||||
<option value="">Todos los servicios</option>
|
||||
{servicios.map((s) => (
|
||||
<option key={s.id_servicio} value={s.id_servicio}>
|
||||
@@ -116,30 +213,58 @@ export default function ReporteTotalesPage() {
|
||||
</select>
|
||||
|
||||
<button onClick={aplicarFiltros}>Filtrar</button>
|
||||
<button onClick={exportarExcelPivot}>Exportar Excel</button>
|
||||
</div>
|
||||
|
||||
{cargando ? (
|
||||
<p>Cargando...</p>
|
||||
) : (
|
||||
<div style={{ overflow: "auto", maxHeight: "500px" }}>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Servicio</th>
|
||||
<th>Periodo</th>
|
||||
<th>Monto Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{totales.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td>{item.nombre_servicio}</td>
|
||||
<td>{item.periodo}</td>
|
||||
<td>${item.monto_total.toFixed(2)}</td>
|
||||
<div style={{ display: "flex", gap: "50px", flexWrap: "wrap" }}>
|
||||
|
||||
{/* TABLA */}
|
||||
<div style={{ flex: 1, minWidth: "500px", maxHeight: "500px", overflow: "auto" }}>
|
||||
<table style={{ width: "100%" }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Servicio</th>
|
||||
<th>Periodo</th>
|
||||
<th>Monto</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
{totales.map((item, i) => (
|
||||
<tr key={i}>
|
||||
<td>{item.nombre_servicio}</td>
|
||||
<td>{item.periodo}</td>
|
||||
<td>${item.monto_total.toFixed(2)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* GRAFICA */}
|
||||
<div style={{ flex: 1, minWidth: "700px", background: "white" }}>
|
||||
<ResponsiveContainer width="100%" height={400}>
|
||||
<LineChart data={chartData}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="periodo" />
|
||||
<YAxis />
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Legend />
|
||||
|
||||
{serviciosUnicos.map((servicio, i) => (
|
||||
<Line
|
||||
key={servicio}
|
||||
dataKey={servicio}
|
||||
stroke={colors[i % colors.length]}
|
||||
type="monotone"
|
||||
/>
|
||||
))}
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Generated
+1655
-5
File diff suppressed because it is too large
Load Diff
+4
-1
@@ -10,6 +10,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.11.0",
|
||||
"date": "^2.0.6",
|
||||
"exceljs": "^4.4.0",
|
||||
"file-saver": "^2.0.5",
|
||||
"jose": "^6.1.3",
|
||||
@@ -19,8 +20,10 @@
|
||||
"react-dom": "19.1.0",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-toastify": "^11.0.5",
|
||||
"recharts": "^3.8.0",
|
||||
"sweetalert2": "^11.26.18",
|
||||
"sweetalert2-react-content": "^5.1.1"
|
||||
"sweetalert2-react-content": "^5.1.1",
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/file-saver": "^2.0.7",
|
||||
|
||||
Reference in New Issue
Block a user