Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Tyrannuss
|
3dfc092e98 | ||
 IO
|
c2e392f3d8 | ||
|
Tyrannuss
|
35245a9195 | ||
|
Tyrannuss
|
c4f68aa1e0 |
@@ -48,6 +48,8 @@ export default function Inscripciones() {
|
||||
const [anio, setAnio] = useState<number | null>(null);
|
||||
|
||||
const [tablaData, setTablaData] = useState<TablaRow[]>([]);
|
||||
const [periodosUnicos, setPeriodosUnicos] = useState<string[]>([]);
|
||||
const [tablaResumen, setTablaResumen] = useState<any[]>([]);
|
||||
const [rawData, setRawData] = useState<ApiResponse[]>([]);
|
||||
|
||||
const token = Cookies.get("token");
|
||||
@@ -139,50 +141,80 @@ export default function Inscripciones() {
|
||||
});
|
||||
|
||||
setTablaData(Object.values(agrupado));
|
||||
|
||||
const periodosUnicosList = Array.from(new Set(data.map((t) => t.semestre)));
|
||||
setPeriodosUnicos(periodosUnicosList);
|
||||
|
||||
const carrerasUnicas = Array.from(new Set(data.map((t) => t.carrera)));
|
||||
|
||||
const resumen = carrerasUnicas.map((carrera) => {
|
||||
const fila: any = { Carrera: carrera };
|
||||
let totalFila = 0;
|
||||
periodosUnicosList.forEach((periodo) => {
|
||||
const items = data.filter((t) => t.carrera === carrera && t.semestre === periodo);
|
||||
const totalPeriodo = items.reduce((acc, item) => acc + Number(item.total), 0);
|
||||
fila[periodo] = totalPeriodo;
|
||||
totalFila += totalPeriodo;
|
||||
});
|
||||
fila["Total"] = totalFila;
|
||||
return fila;
|
||||
});
|
||||
|
||||
setTablaResumen(resumen);
|
||||
} catch (error) {
|
||||
console.error("Error al obtener inscritos", error);
|
||||
}
|
||||
};
|
||||
|
||||
const exportarExcel = () => {
|
||||
if (!rawData.length) return;
|
||||
if (!rawData.length || !tablaResumen.length) return;
|
||||
|
||||
const periodosUnicos = Array.from(
|
||||
new Set(rawData.map((t) => t.semestre))
|
||||
);
|
||||
// HOJA 1: Inscritos (resumen)
|
||||
const worksheet1 = XLSX.utils.json_to_sheet(tablaResumen);
|
||||
|
||||
const carrerasUnicas = Array.from(
|
||||
new Set(rawData.map((t) => t.carrera))
|
||||
);
|
||||
const carrerasUnicas = Array.from(new Set(rawData.map((t) => t.carrera)));
|
||||
|
||||
const dataExcel = carrerasUnicas.map((carrera) => {
|
||||
// HOJA 2: genero
|
||||
const dataGenero = carrerasUnicas.map((carrera) => {
|
||||
const fila: any = { Carrera: carrera };
|
||||
|
||||
let totalFila = 0;
|
||||
|
||||
periodosUnicos.forEach((periodo) => {
|
||||
const items = rawData.filter(
|
||||
(t) => t.carrera === carrera && t.semestre === periodo
|
||||
);
|
||||
|
||||
const totalPeriodo = items.reduce(
|
||||
(acc, item) => acc + Number(item.total),
|
||||
0
|
||||
);
|
||||
|
||||
fila[periodo] = totalPeriodo;
|
||||
totalFila += totalPeriodo;
|
||||
const items = rawData.filter((t) => t.carrera === carrera && t.semestre === periodo);
|
||||
const masc = items.reduce((acc, item) => acc + Number(item.masculino), 0);
|
||||
const fem = items.reduce((acc, item) => acc + Number(item.femenino), 0);
|
||||
fila[`Masculino - ${periodo}`] = masc;
|
||||
fila[`Femenino - ${periodo}`] = fem;
|
||||
});
|
||||
|
||||
fila["Total"] = totalFila;
|
||||
|
||||
return fila;
|
||||
});
|
||||
const worksheet2 = XLSX.utils.json_to_sheet(dataGenero);
|
||||
|
||||
// HOJA 3: areas
|
||||
const dataAreas = carrerasUnicas.map((carrera) => {
|
||||
const fila: any = { Carrera: carrera };
|
||||
periodosUnicos.forEach((periodo) => {
|
||||
const items = rawData.filter((t) => t.carrera === carrera && t.semestre === periodo);
|
||||
let windows = 0, mac = 0, linux = 0, profes = 0;
|
||||
|
||||
items.forEach((item) => {
|
||||
if (item.profesor === "WINDOWS") windows += Number(item.total);
|
||||
if (item.profesor === "MACINTOSH") mac += Number(item.total);
|
||||
if (item.profesor === "LINUX") linux += Number(item.total);
|
||||
if (item.profesor === "PROFESORES") profes += Number(item.total);
|
||||
});
|
||||
|
||||
fila[`WINDOWS - ${periodo}`] = windows;
|
||||
fila[`MACINTOSH - ${periodo}`] = mac;
|
||||
fila[`LINUX - ${periodo}`] = linux;
|
||||
fila[`PROFESORES - ${periodo}`] = profes;
|
||||
});
|
||||
return fila;
|
||||
});
|
||||
const worksheet3 = XLSX.utils.json_to_sheet(dataAreas);
|
||||
|
||||
const worksheet = XLSX.utils.json_to_sheet(dataExcel);
|
||||
const workbook = XLSX.utils.book_new();
|
||||
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet, "Inscritos");
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet1, "Inscritos");
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet2, "genero");
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet3, "areas");
|
||||
|
||||
const excelBuffer = XLSX.write(workbook, {
|
||||
bookType: "xlsx",
|
||||
|
||||
@@ -1,272 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { envConfig } from "@/app/lib/config";
|
||||
import axios from "axios";
|
||||
import Cookies from "js-cookie";
|
||||
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;
|
||||
periodo: string;
|
||||
monto_total: number;
|
||||
}
|
||||
|
||||
interface Servicio {
|
||||
id_servicio: number;
|
||||
servicio: string;
|
||||
}
|
||||
|
||||
interface Periodo {
|
||||
id_periodo: number;
|
||||
semestre: string;
|
||||
}
|
||||
|
||||
export default function ReporteTotalesPage() {
|
||||
const [totales, setTotales] = useState<TotalServicioPeriodo[]>([]);
|
||||
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>("");
|
||||
|
||||
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_periodo.xlsx");
|
||||
};
|
||||
|
||||
// FETCH
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
const [serviciosRes, periodosRes] = await Promise.all([
|
||||
axios.get(`${envConfig.apiUrl}/servicio`, { headers }),
|
||||
axios.get(`${envConfig.apiUrl}/periodo`, { headers }),
|
||||
]);
|
||||
setServicios(serviciosRes.data);
|
||||
setPeriodos(periodosRes.data);
|
||||
} catch (error) {
|
||||
console.error("Error al cargar datos", error);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const obtenerTotales = async () => {
|
||||
setCargando(true);
|
||||
try {
|
||||
const params = new URLSearchParams();
|
||||
if (periodoInicio) params.append("periodoInicio", periodoInicio);
|
||||
if (periodoFin) params.append("periodoFin", periodoFin);
|
||||
if (servicioId) params.append("servicioId", servicioId);
|
||||
|
||||
const url = `${envConfig.apiUrl}/detalle-servicio/totales-por-periodo?${params.toString()}`;
|
||||
const res = await axios.get(url, { headers });
|
||||
setTotales(res.data);
|
||||
} catch (error) {
|
||||
console.error("Error al obtener totales", error);
|
||||
} finally {
|
||||
setCargando(false);
|
||||
}
|
||||
};
|
||||
|
||||
const aplicarFiltros = () => {
|
||||
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)", 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</option>
|
||||
{periodos.map((p) => (
|
||||
<option key={p.id_periodo} value={p.id_periodo}>
|
||||
{p.semestre}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<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}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<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}>
|
||||
{s.servicio}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<button onClick={aplicarFiltros}>Filtrar</button>
|
||||
<button onClick={exportarExcelPivot}>Exportar Excel</button>
|
||||
</div>
|
||||
|
||||
{cargando ? (
|
||||
<p>Cargando...</p>
|
||||
) : (
|
||||
<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>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,395 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import axios from "axios";
|
||||
import Cookies from "js-cookie";
|
||||
|
||||
import {
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
ResponsiveContainer,
|
||||
Line,
|
||||
LineChart,
|
||||
} from "recharts";
|
||||
import PeriodoPicker from "@/app/Components/PeriodoPicker/periodoPicker";
|
||||
import * as XLSX from "xlsx";
|
||||
|
||||
interface Periodo {
|
||||
id_periodo: number;
|
||||
semestre: string;
|
||||
fecha_inicio_servicio: string;
|
||||
fecha_fin_servicio: string;
|
||||
}
|
||||
|
||||
|
||||
export default function PorServicio() {
|
||||
const [data, setData] = useState<any[]>([]);
|
||||
const [periodos, setPeriodos] = useState<Periodo[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [serviciosSeleccionados, setServiciosSeleccionados] = useState<string[]>([]);
|
||||
|
||||
const [periodo1, setPeriodo1] = useState<Periodo | null>(null);
|
||||
const [periodo2, setPeriodo2] = useState<Periodo | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!periodo1 || !periodo2) return;
|
||||
|
||||
const fetchServicios = async () => {
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const token = Cookies.get("token");
|
||||
const headers = { Authorization: `Bearer ${token}` };
|
||||
|
||||
// 🔥 1. traer TODOS los periodos en rango
|
||||
const resPeriodos = await axios.get(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/periodo/range?p1=${periodo1.id_periodo}&p2=${periodo2.id_periodo}`,
|
||||
{ headers }
|
||||
);
|
||||
|
||||
const periodosRango = resPeriodos.data;
|
||||
setPeriodos(periodosRango);
|
||||
|
||||
// 🔥 2. hacer requests por cada periodo
|
||||
const resultados = await Promise.all(
|
||||
periodosRango.map((p: Periodo) =>
|
||||
axios.post(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/detalle-servicio/rango`,
|
||||
{
|
||||
desde: p.fecha_inicio_servicio,
|
||||
hasta: p.fecha_fin_servicio,
|
||||
},
|
||||
{ headers }
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
// 🔥 3. merge dinámico
|
||||
const map = new Map();
|
||||
|
||||
periodosRango.forEach((p: Periodo, index: number) => {
|
||||
resultados[index].data.forEach((item: any) => {
|
||||
if (!map.has(item.servicio)) {
|
||||
map.set(item.servicio, {
|
||||
servicio: item.servicio,
|
||||
});
|
||||
}
|
||||
|
||||
map.get(item.servicio)[p.semestre] = Number(item.total);
|
||||
});
|
||||
});
|
||||
|
||||
const finalData = Array.from(map.values());
|
||||
setData(finalData);
|
||||
setServiciosSeleccionados(finalData.map((item: any) => item.servicio));
|
||||
} catch (error) {
|
||||
console.error("Error comparando servicios", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchServicios();
|
||||
}, [periodo1, periodo2]);
|
||||
|
||||
// 🔥 TRANSFORMAR DATA PARA GRAFICA
|
||||
const transformDataForChart = () => {
|
||||
if (!data.length || !periodos.length) return [];
|
||||
|
||||
return periodos.map((p) => {
|
||||
const row: any = { periodo: p.semestre };
|
||||
|
||||
data.forEach((servicio) => {
|
||||
row[servicio.servicio] = servicio[p.semestre] || 0;
|
||||
});
|
||||
|
||||
return row;
|
||||
});
|
||||
};
|
||||
|
||||
// EXPORTAR A EXCEL
|
||||
const exportToExcel = () => {
|
||||
if (!data || data.length === 0) return;
|
||||
|
||||
const exportData = data.map((row) => {
|
||||
const newRow: any = { Servicio: row.servicio };
|
||||
periodos.forEach((p) => {
|
||||
newRow[p.semestre] = row[p.semestre] || 0;
|
||||
});
|
||||
return newRow;
|
||||
});
|
||||
|
||||
const worksheet = XLSX.utils.json_to_sheet(exportData);
|
||||
const workbook = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(workbook, worksheet, "Ingresos");
|
||||
|
||||
XLSX.writeFile(workbook, "Reporte_Ingresos_Servicio.xlsx");
|
||||
};
|
||||
|
||||
// FORMATO DE NUMEROS
|
||||
const formatNumber = (value: number) => {
|
||||
return value.toLocaleString("en-US", {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
});
|
||||
};
|
||||
|
||||
// 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}: ${formatNumber(entry.value)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
|
||||
const chartData = transformDataForChart();
|
||||
|
||||
const colors = ["black", "red", "blue", "orange", "purple", "green"];
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "30px" }}>
|
||||
|
||||
<PeriodoPicker
|
||||
onChange={(p1, p2) => {
|
||||
setPeriodo1(p1);
|
||||
setPeriodo2(p2);
|
||||
}}
|
||||
/>
|
||||
|
||||
{!periodo1 || !periodo2 ? (
|
||||
<p>Seleccione un rango de periodos</p>
|
||||
) : (
|
||||
<>
|
||||
{/* CONTROLES SUPERIORES */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "20px",
|
||||
flexWrap: "wrap",
|
||||
padding: "10px 0",
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={exportToExcel}
|
||||
disabled={data.length === 0}
|
||||
style={{
|
||||
padding: "8px 16px",
|
||||
backgroundColor:
|
||||
data.length === 0 ? "#ccc" : "#10b981",
|
||||
color: "white",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
cursor:
|
||||
data.length === 0
|
||||
? "not-allowed"
|
||||
: "pointer",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Exportar a Excel
|
||||
</button>
|
||||
|
||||
{data.map((servicio) => (
|
||||
<label
|
||||
key={servicio.servicio}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "5px",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={serviciosSeleccionados.includes(
|
||||
servicio.servicio
|
||||
)}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setServiciosSeleccionados((prev) => [
|
||||
...prev,
|
||||
servicio.servicio,
|
||||
]);
|
||||
} else {
|
||||
setServiciosSeleccionados((prev) =>
|
||||
prev.filter(
|
||||
(s) =>
|
||||
s !==
|
||||
servicio.servicio
|
||||
)
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
{servicio.servicio}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* TABLA Y GRÁFICA */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "30px",
|
||||
alignItems: "flex-start",
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
{/* COLUMNA IZQUIERDA: TABLA */}
|
||||
<div
|
||||
style={{
|
||||
flex: "1 1 300px",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "20px",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
overflow: "auto",
|
||||
maxHeight: "400px",
|
||||
}}
|
||||
>
|
||||
{loading && <p>Cargando...</p>}
|
||||
|
||||
<table style={{ width: "100%" }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Servicio</th>
|
||||
|
||||
{periodos.map((p) => (
|
||||
<th key={p.id_periodo}>
|
||||
{p.semestre}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{!loading && data.length === 0 && (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={
|
||||
periodos.length + 1
|
||||
}
|
||||
>
|
||||
No hay datos en este rango
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{data.map((row) => (
|
||||
<tr key={row.servicio}>
|
||||
<td>{row.servicio}</td>
|
||||
|
||||
{periodos.map((p) => (
|
||||
<td
|
||||
key={p.id_periodo}
|
||||
>
|
||||
$
|
||||
{formatNumber(
|
||||
row[
|
||||
p.semestre
|
||||
] || 0
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* COLUMNA DERECHA: GRÁFICA */}
|
||||
<div
|
||||
style={{
|
||||
flex: "2 1 500px",
|
||||
minWidth: "500px",
|
||||
background: "white",
|
||||
}}
|
||||
>
|
||||
{chartData.length > 0 && (
|
||||
<ResponsiveContainer
|
||||
width="100%"
|
||||
height={400}
|
||||
>
|
||||
<LineChart data={chartData}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
|
||||
<XAxis dataKey="periodo" />
|
||||
|
||||
<YAxis
|
||||
tickFormatter={(value) =>
|
||||
value.toLocaleString()
|
||||
}
|
||||
/>
|
||||
|
||||
<Tooltip
|
||||
content={<CustomTooltip />}
|
||||
/>
|
||||
|
||||
<Legend />
|
||||
|
||||
{data
|
||||
.filter((servicio) =>
|
||||
serviciosSeleccionados.includes(
|
||||
servicio.servicio
|
||||
)
|
||||
)
|
||||
.map((servicio, i) => (
|
||||
<Line
|
||||
key={
|
||||
servicio.servicio
|
||||
}
|
||||
dataKey={
|
||||
servicio.servicio
|
||||
}
|
||||
stroke={
|
||||
colors[
|
||||
i %
|
||||
colors.length
|
||||
]
|
||||
}
|
||||
type="monotone"
|
||||
/>
|
||||
))}
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -6,6 +6,7 @@ import SearchDateBetween from "@/app/Components/SearchDateBetween/SearchDateBetw
|
||||
import PorServicios from "@/app/Components/Reportes/porServicio";
|
||||
import PorRecibos from "@/app/Components/Reportes/porRecibo";
|
||||
import MonthYearPicker from "@/app/Components/MonthYearPicker/MonthYearPicker";
|
||||
import PeriodoPicker from "@/app/Components/PeriodoPicker/periodoPicker";
|
||||
|
||||
export default function ReportesClient({
|
||||
defaultKey,
|
||||
@@ -14,9 +15,11 @@ export default function ReportesClient({
|
||||
}) {
|
||||
const [desde, setDesde] = useState<string | null>(null);
|
||||
const [hasta, setHasta] = useState<string | null>(null);
|
||||
const [periodo1, setPeriodo1] = useState<any>(null);
|
||||
const [periodo2, setPeriodo2] = useState<any>(null);
|
||||
|
||||
return (
|
||||
<section className="containerSection">
|
||||
<section className="containerSection" style={{ overflow: "visible", }}>
|
||||
<h2 className="title">REPORTES</h2>
|
||||
|
||||
<Toggle
|
||||
@@ -41,17 +44,23 @@ export default function ReportesClient({
|
||||
key: "Por Servicio",
|
||||
label: "Por Servicio",
|
||||
content: (
|
||||
<>
|
||||
<MonthYearPicker
|
||||
onChange={(d, h) => {
|
||||
setDesde(d);
|
||||
setHasta(h);
|
||||
<div style={{ maxHeight: "400px", width: "100%", overflow: "visible" }}>
|
||||
<PeriodoPicker
|
||||
onChange={(p1, p2) => {
|
||||
setPeriodo1(p1);
|
||||
setPeriodo2(p2);
|
||||
}}
|
||||
/>
|
||||
<PorServicios desde={desde} hasta={hasta} />
|
||||
</>
|
||||
{periodo1 && periodo2 && (
|
||||
<PorServicios
|
||||
key={`${periodo1?.id_periodo}-${periodo2?.id_periodo}`}
|
||||
periodo1={periodo1}
|
||||
periodo2={periodo2}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</section>
|
||||
|
||||
@@ -0,0 +1,65 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import axios from "axios";
|
||||
import Cookies from "js-cookie";
|
||||
import { envConfig } from "@/app/lib/config";
|
||||
interface Periodo {
|
||||
id_periodo: number;
|
||||
semestre: string;
|
||||
fecha_inicio_servicio: string;
|
||||
fecha_fin_servicio: string;
|
||||
}
|
||||
|
||||
export default function PeriodoPicker({
|
||||
onChange,
|
||||
}: {
|
||||
onChange: (p1: Periodo | null, p2: Periodo | null) => void;
|
||||
}) {
|
||||
const [periodos, setPeriodos] = useState<Periodo[]>([]);
|
||||
const [p1, setP1] = useState<number | null>(null);
|
||||
const [p2, setP2] = useState<number | null>(null);
|
||||
|
||||
|
||||
const token = Cookies.get("token");
|
||||
const headers = { Authorization: `Bearer ${token}` };
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPeriodos = async () => {
|
||||
const res = await axios.get(`${envConfig.apiUrl}/periodo`, { headers });
|
||||
setPeriodos(res.data);
|
||||
};
|
||||
fetchPeriodos();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const periodo1 = periodos.find(p => p.id_periodo === p1) || null;
|
||||
const periodo2 = periodos.find(p => p.id_periodo === p2) || null;
|
||||
|
||||
onChange(periodo1, periodo2);
|
||||
}, [p1, p2]);
|
||||
|
||||
return (
|
||||
<div className="flex gap-4">
|
||||
{/* Periodo 1 */}
|
||||
<select onChange={(e) => setP1(Number(e.target.value))}>
|
||||
<option value="">Periodo 1</option>
|
||||
{periodos.map(p => (
|
||||
<option key={p.id_periodo} value={p.id_periodo}>
|
||||
{p.semestre}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{/* Periodo 2 */}
|
||||
<select onChange={(e) => setP2(Number(e.target.value))}>
|
||||
<option value="">Periodo 2</option>
|
||||
{periodos.map(p => (
|
||||
<option key={p.id_periodo} value={p.id_periodo}>
|
||||
{p.semestre}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -4,84 +4,269 @@ import { useEffect, useState } from "react";
|
||||
import axios from "axios";
|
||||
import Cookies from "js-cookie";
|
||||
|
||||
interface ServicioReporte {
|
||||
id_servicio: number;
|
||||
servicio: string;
|
||||
total: string;
|
||||
import {
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend,
|
||||
ResponsiveContainer,
|
||||
Line,
|
||||
LineChart,
|
||||
} from "recharts";
|
||||
|
||||
interface Periodo {
|
||||
id_periodo: number;
|
||||
semestre: string;
|
||||
fecha_inicio_servicio: string;
|
||||
fecha_fin_servicio: string;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
desde: string | null;
|
||||
hasta: string | null;
|
||||
periodo1: Periodo | null;
|
||||
periodo2: Periodo | null;
|
||||
}
|
||||
|
||||
export default function PorServicio({ desde, hasta }: Props) {
|
||||
const [servicios, setServicios] = useState<ServicioReporte[]>([]);
|
||||
export default function PorServicio({ periodo1, periodo2 }: Props) {
|
||||
const [data, setData] = useState<any[]>([]);
|
||||
const [periodos, setPeriodos] = useState<Periodo[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [serviciosSeleccionados, setServiciosSeleccionados] = useState<string[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!desde || !hasta) return;
|
||||
if (!periodo1 || !periodo2) return;
|
||||
|
||||
const fetchServicios = async () => {
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const token = Cookies.get("token");
|
||||
const headers = { Authorization: `Bearer ${token}` };
|
||||
|
||||
const res = await axios.post(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/detalle-servicio/rango`,
|
||||
{ desde, hasta },
|
||||
{ headers },
|
||||
// 🔥 1. traer TODOS los periodos en rango
|
||||
const resPeriodos = await axios.get(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/periodo/range?p1=${periodo1.id_periodo}&p2=${periodo2.id_periodo}`,
|
||||
{ headers }
|
||||
);
|
||||
|
||||
setServicios(res.data);
|
||||
const periodosRango = resPeriodos.data;
|
||||
setPeriodos(periodosRango);
|
||||
|
||||
// 🔥 2. hacer requests por cada periodo
|
||||
const resultados = await Promise.all(
|
||||
periodosRango.map((p: Periodo) =>
|
||||
axios.post(
|
||||
`${process.env.NEXT_PUBLIC_API_URL}/detalle-servicio/rango`,
|
||||
{
|
||||
desde: p.fecha_inicio_servicio,
|
||||
hasta: p.fecha_fin_servicio,
|
||||
},
|
||||
{ headers }
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
// 🔥 3. merge dinámico
|
||||
const map = new Map();
|
||||
|
||||
periodosRango.forEach((p: Periodo, index: number) => {
|
||||
resultados[index].data.forEach((item: any) => {
|
||||
if (!map.has(item.servicio)) {
|
||||
map.set(item.servicio, {
|
||||
servicio: item.servicio,
|
||||
});
|
||||
}
|
||||
|
||||
map.get(item.servicio)[p.semestre] = Number(item.total);
|
||||
});
|
||||
});
|
||||
|
||||
const finalData = Array.from(map.values());
|
||||
setData(finalData);
|
||||
setServiciosSeleccionados(finalData.map((item: any) => item.servicio));
|
||||
} catch (error) {
|
||||
console.error("Error al obtener reporte por servicio", error);
|
||||
console.error("Error comparando servicios", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchServicios();
|
||||
}, [desde, hasta]);
|
||||
}, [periodo1, periodo2]);
|
||||
|
||||
// 🔥 TRANSFORMAR DATA PARA GRAFICA
|
||||
const transformDataForChart = () => {
|
||||
if (!data.length || !periodos.length) return [];
|
||||
|
||||
return periodos.map((p) => {
|
||||
const row: any = { periodo: p.semestre };
|
||||
|
||||
data.forEach((servicio) => {
|
||||
row[servicio.servicio] = servicio[p.semestre] || 0;
|
||||
});
|
||||
|
||||
return row;
|
||||
});
|
||||
};
|
||||
|
||||
// FORMATO DE NUMEROS
|
||||
const formatNumber = (value: number) => {
|
||||
return value.toLocaleString("en-US", {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
});
|
||||
};
|
||||
|
||||
// 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}: ${formatNumber(entry.value)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const chartData = transformDataForChart();
|
||||
|
||||
const colors = ["black", "red", "blue", "orange", "purple", "green"];
|
||||
|
||||
return (
|
||||
<div style={{ position: "relative" }}>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "30px" }}>
|
||||
|
||||
<div
|
||||
style={{
|
||||
overflow: "auto",
|
||||
height: "270px",
|
||||
scrollbarColor: "#2563eb white",
|
||||
}}
|
||||
>
|
||||
{/* TABLA */}
|
||||
<div style={{ overflow: "auto", maxHeight: "300px" }}>
|
||||
{loading && <p>Cargando...</p>}
|
||||
|
||||
<table>
|
||||
<table style={{ width: "100%" }}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Servicio</th>
|
||||
<th>Monto total</th>
|
||||
|
||||
{periodos.map((p) => (
|
||||
<th key={p.id_periodo}>{p.semestre}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{!loading && servicios.length === 0 && (
|
||||
{!loading && data.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={2}>No hay servicios en este rango</td>
|
||||
<td colSpan={periodos.length + 1}>
|
||||
No hay datos en este rango
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{servicios.map((servicio) => (
|
||||
<tr key={servicio.id_servicio}>
|
||||
<td>{servicio.servicio}</td>
|
||||
<td>${Number(servicio.total).toFixed(2)}</td>
|
||||
{data.map((row) => (
|
||||
<tr key={row.servicio}>
|
||||
<td>{row.servicio}</td>
|
||||
|
||||
{periodos.map((p) => (
|
||||
<td key={p.id_periodo}>
|
||||
${formatNumber(row[p.semestre] || 0)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
gap: "10px",
|
||||
marginBottom: "20px",
|
||||
}}
|
||||
>
|
||||
{data.map((servicio) => (
|
||||
<label
|
||||
key={servicio.servicio}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "5px",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={serviciosSeleccionados.includes(servicio.servicio)}
|
||||
onChange={(e) => {
|
||||
if (e.target.checked) {
|
||||
setServiciosSeleccionados((prev) => [
|
||||
...prev,
|
||||
servicio.servicio,
|
||||
]);
|
||||
} else {
|
||||
setServiciosSeleccionados((prev) =>
|
||||
prev.filter((s) => s !== servicio.servicio)
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{servicio.servicio}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
{/* GRAFICA */}
|
||||
<div
|
||||
style={{
|
||||
flex: 1,
|
||||
minWidth: "700px",
|
||||
background: "white",
|
||||
}}
|
||||
>
|
||||
{chartData.length > 0 && (
|
||||
<ResponsiveContainer width="100%" height={400}>
|
||||
<LineChart data={chartData}>
|
||||
<CartesianGrid strokeDasharray="3 3" />
|
||||
<XAxis dataKey="periodo" />
|
||||
<YAxis tickFormatter={(value) => value.toLocaleString()} />
|
||||
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
|
||||
<Legend />
|
||||
|
||||
{data
|
||||
.filter((servicio) =>
|
||||
serviciosSeleccionados.includes(servicio.servicio)
|
||||
)
|
||||
.map((servicio, i) => (
|
||||
<Line
|
||||
key={servicio.servicio}
|
||||
dataKey={servicio.servicio}
|
||||
stroke={colors[i % colors.length]}
|
||||
type="monotone"
|
||||
/>
|
||||
))}
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
//IO
|
||||
}
|
||||
+2
-1
@@ -109,7 +109,7 @@ footer p {
|
||||
height: 600px;
|
||||
min-height: 520px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
overflow: auto;
|
||||
background-color: #f9f9f9;
|
||||
z-index: 0;
|
||||
animation: fadeInUp 1s ease forwards;
|
||||
@@ -121,6 +121,7 @@ footer p {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.containerForm {
|
||||
|
||||
Reference in New Issue
Block a user