Merge branch 'Axel' of repositorio.acatlan.unam.mx:IO/front-AT into develop

app/(private)/Periodo-Graficas/page.tsx

@@ -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
+        <select value={periodoInicio} onChange={(e) => setPeriodoInicio(e.target.value)}>
-          value={periodoInicio}
+          <option value="">Periodo inicio</option>
-          onChange={(e) => setPeriodoInicio(e.target.value)}
-        >
-          <option value="">Periodo inicio (todos)</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
+        <select value={periodoFin} onChange={(e) => setPeriodoFin(e.target.value)}>
-          value={periodoFin}
+          <option value="">Periodo fin</option>
-          onChange={(e) => setPeriodoFin(e.target.value)}
-        >
-          <option value="">Periodo fin (todos)</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
+        <select value={servicioId} onChange={(e) => setServicioId(e.target.value)}>
-          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" }}>
+        <div style={{ display: "flex", gap: "50px", flexWrap: "wrap" }}>
-          <table>
+          
-            <thead>
+          {/* TABLA */}
-              <tr>
+          <div style={{ flex: 1, minWidth: "500px", maxHeight: "500px", overflow: "auto" }}>
-                <th>Servicio</th>
+            <table style={{ width: "100%" }}>
-                <th>Periodo</th>
+              <thead>
-                <th>Monto Total</th>
+                <tr>
-              </tr>
+                  <th>Servicio</th>
-            </thead>
+                  <th>Periodo</th>
-            <tbody>
+                  <th>Monto</th>
-              {totales.map((item, index) => (
-                <tr key={index}>
-                  <td>{item.nombre_servicio}</td>
-                  <td>{item.periodo}</td>
-                  <td>${item.monto_total.toFixed(2)}</td>
                 </tr>
-              ))}
+              </thead>
-            </tbody>
+              <tbody>
-          </table>
+                {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>

package.json

@@ -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",