From c4690847609a649460ed1435cb94fdc545caa5c4 Mon Sep 17 00:00:00 2001
From: CarlosssFlores <307100636@pcpuma.acatlan.unam.mx>
Date: Fri, 10 Oct 2025 10:46:48 -0600
Subject: [PATCH 1/6] added sing

---
 app/Components/InformacionEquipos/ProgramSelector.tsx | 2 --
 app/Components/{SelectAreas.jsx => SelectAreas.tsx}   | 6 ++----
 2 files changed, 2 insertions(+), 6 deletions(-)
 rename app/Components/{SelectAreas.jsx => SelectAreas.tsx} (85%)

diff --git a/app/Components/InformacionEquipos/ProgramSelector.tsx b/app/Components/InformacionEquipos/ProgramSelector.tsx
index 0459d34..102381c 100644
--- a/app/Components/InformacionEquipos/ProgramSelector.tsx
+++ b/app/Components/InformacionEquipos/ProgramSelector.tsx
@@ -78,8 +78,6 @@ function ProgramSelector({ titulo, opcion }: DatosEquipo) {
     <form className="form-container" onSubmit={handleSubmit}>
       <label>{titulo}</label>
 
-      <SelectAreas />
-
       <select value={equipoSeleccionado} onChange={handleChangeEquipo}>
         <option value="">-- Selecciona un equipo --</option>
         {opcion.map((eq, i) => (
diff --git a/app/Components/SelectAreas.jsx b/app/Components/SelectAreas.tsx
similarity index 85%
rename from app/Components/SelectAreas.jsx
rename to app/Components/SelectAreas.tsx
index 380f1dc..5568397 100644
--- a/app/Components/SelectAreas.jsx
+++ b/app/Components/SelectAreas.tsx
@@ -27,11 +27,9 @@ export default function SelectAreas() {
     <div>
       <label htmlFor="areaSelect">Selecciona un área:</label>
       <select id="areaSelect" value={selectedArea} onChange={handleChange}>
-        <option value="">-- Selecciona una opción --</option>
+        <option value="">-- Selecciona una opción  --</option>
         {areas.map((area) => (
-          <option key={area.id_area} value={area.id_area}>
-            {area.nombre_area}
-          </option>
+          
         ))}
       </select>
     </div>

From 82dc1575495dc554382cbc5accb637c0414744f8 Mon Sep 17 00:00:00 2001
From: CarlosssFlores <307100636@pcpuma.acatlan.unam.mx>
Date: Tue, 14 Oct 2025 11:48:43 -0600
Subject: [PATCH 2/6] components

---
 app/(private)/InformacionEquipo/page.tsx      | 13 ++--
 .../InformacionEquipos/ProgramSelector.tsx    | 59 ++++++++-----------
 app/Components/ProgramList.tsx                |  0
 app/Components/SelectAreas.tsx                | 16 ++---
 app/Components/SelectEquipo.tsx               | 37 ++++++++++++
 5 files changed, 74 insertions(+), 51 deletions(-)
 create mode 100644 app/Components/ProgramList.tsx
 create mode 100644 app/Components/SelectEquipo.tsx

diff --git a/app/(private)/InformacionEquipo/page.tsx b/app/(private)/InformacionEquipo/page.tsx
index 9645f0e..a6da985 100644
--- a/app/(private)/InformacionEquipo/page.tsx
+++ b/app/(private)/InformacionEquipo/page.tsx
@@ -1,7 +1,6 @@
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
 import Equipos from "@/app/Components/Equipos/equipos";
 import ProgramSelector from "@/app/Components/InformacionEquipos/ProgramSelector";
-
 import "./informacionequipo.css";
 
 export default async function Page(props: {
@@ -16,7 +15,6 @@ export default async function Page(props: {
 
   return (
     <section className="containerSection">
-
       <h2 className="title"> INFORMACION DE EQUIPOS </h2>
 
       <Toggle
@@ -25,7 +23,7 @@ export default async function Page(props: {
           {
             key: "Equipos",
             label: "Equipos",
-            content: <Equipos />,
+            content: <Equipos />, // ✅ Aquí solo se muestran los equipos
           },
           {
             key: "Equipo",
@@ -33,7 +31,8 @@ export default async function Page(props: {
             content: (
               <ProgramSelector
                 key={1}
-                titulo="Programas de Equipo"
+                titulo="Programas por equipo"
+                tipo="equipo"
                 opcion={["", "Equipo 1", "Equipo 2", "Equipo 3", "Equipo 4"]}
               />
             ),
@@ -44,8 +43,9 @@ export default async function Page(props: {
             content: (
               <ProgramSelector
                 key={2}
-                titulo="Programas por Sala"
-                opcion={["", "PCNET1", "PCNET2", "PCNET3", "PCNET4", "PCNET4"]}
+                titulo="Programas por sala"
+                tipo="sala"
+                opcion={["", "PCNET1", "PCNET2", "PCNET3", "PCNET4"]}
               />
             ),
           },
@@ -54,4 +54,3 @@ export default async function Page(props: {
     </section>
   );
 }
-//IO
diff --git a/app/Components/InformacionEquipos/ProgramSelector.tsx b/app/Components/InformacionEquipos/ProgramSelector.tsx
index 3629fd8..0c7f563 100644
--- a/app/Components/InformacionEquipos/ProgramSelector.tsx
+++ b/app/Components/InformacionEquipos/ProgramSelector.tsx
@@ -1,13 +1,16 @@
 "use client";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import SelectAreas from "../SelectAreas";
+import { url } from "inspector";
+import SelectEquipo from "../SelectEquipo";
+import axios from "axios";
 
 interface DatosEquipo {
   titulo: string;
   opcion: string[];
+  tipo: "equipo" | "sala"; // Nuevo prop para diferenciar
 }
 
-// Lista de programas disponibles
 const programas = [
   "3D MAX STUDIO 2014",
   "ADOBE CREATIVE SUITE",
@@ -35,42 +38,28 @@ const programas = [
   "STATGRAOHICS Centurion XVI",
 ];
 
-// Mapear cada equipo a sus programas (checkboxes que deberían seleccionarse)
-const caracteristicasPorEquipo: Record<string, string[]> = {
-  "Equipo 1": ["3D MAX STUDIO 2014", "AUTOCAD", "MATLAB"],
-  "Equipo 2": ["ADOBE CREATIVE SUITE", "COREL DRAW", "R Studio"],
-  "Equipo 3": ["ARCHICAD 20", "EVIEWS Enterprise", "SPPS Statiscs"],
-  "Equipo 4": ["MATHEMATICA", "MAPLE", "Maxima"],
-  // Agrega más equipos según necesites
-};
-
-export default function ProgramSelector({ titulo, opcion }: DatosEquipo) {
-  // Estado del equipo seleccionado
-  const [equipoSeleccionado, setEquipoSeleccionado] = useState("");
-  // Estado de los checkboxes (programas)
+export default function ProgramSelector({ titulo, opcion, tipo }: DatosEquipo) {
+  const [seleccion, setSeleccion] = useState("");
   const [checkboxes, setCheckboxes] = useState<Record<string, boolean>>(
     programas.reduce((acc, prog) => ({ ...acc, [prog]: false }), {})
   );
 
-  const handleChangeEquipo = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const equipo = e.target.value;
-    setEquipoSeleccionado(equipo);
+  useEffect(() => {
+    const response = axios.get(
+      "https://venus.acatlan.unam.mx/asignacionTiempo_test/equipo"
+    );
+  });
 
-    // Actualizar checkboxes según características del equipo
-    const nuevosCheckboxes: Record<string, boolean> = {};
-    programas.forEach((prog) => {
-      nuevosCheckboxes[prog] =
-        caracteristicasPorEquipo[equipo]?.includes(prog) || false;
-    });
-    setCheckboxes(nuevosCheckboxes);
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    setSeleccion(e.target.value);
   };
 
-  // Guardar cambios (ejemplo)
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    console.log("Equipo:", equipoSeleccionado);
     console.log(
-      "Programas seleccionados:",
+      tipo === "sala" ? "Sala:" : "Equipo:",
+      seleccion,
+      "\nProgramas seleccionados:",
       Object.keys(checkboxes).filter((p) => checkboxes[p])
     );
   };
@@ -79,14 +68,12 @@ export default function ProgramSelector({ titulo, opcion }: DatosEquipo) {
     <form className="form-container" onSubmit={handleSubmit}>
       <label>{titulo}</label>
 
-      <select value={equipoSeleccionado} onChange={handleChangeEquipo}>
-        <option value="">-- Selecciona un equipo --</option>
-        {opcion.map((eq, i) => (
-          <option key={i} value={eq}>
-            {eq}
-          </option>
-        ))}
-      </select>
+      {/* 👇 Mostrar Select diferente según el tipo */}
+      {tipo === "sala" ? (
+        <SelectAreas url="https://venus.acatlan.unam.mx/asignacionTiempo_test/area-ubicacion" />
+      ) : (
+        <SelectEquipo url="https://venus.acatlan.unam.mx/asignacionTiempo_test/equipo" />
+      )}
 
       <div className="checkbox-grid">
         {programas.map((prog) => (
diff --git a/app/Components/ProgramList.tsx b/app/Components/ProgramList.tsx
new file mode 100644
index 0000000..e69de29
diff --git a/app/Components/SelectAreas.tsx b/app/Components/SelectAreas.tsx
index 0dc8ea8..144fd5c 100644
--- a/app/Components/SelectAreas.tsx
+++ b/app/Components/SelectAreas.tsx
@@ -2,19 +2,19 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
 
-export default function SelectAreas() {
+interface proms {
+  url: string;
+}
+
+export default function SelectAreas(props: proms) {
   const [areas, setAreas] = useState([]);
   const [selectedArea, setSelectedArea] = useState("");
 
   useEffect(() => {
     axios
-      .get("https://venus.acatlan.unam.mx/asignacionTiempo_test/area-ubicacion")
-      .then((data) => {
-        setAreas(data.data);
-      })
-      .catch((error) => {
-        console.error("Error al traer las áreas:", error);
-      });
+      .get(props.url)
+      .then((data) => setAreas(data.data))
+      .catch((error) => console.error("Error al traer las áreas:", error));
   }, []);
 
   return (
diff --git a/app/Components/SelectEquipo.tsx b/app/Components/SelectEquipo.tsx
new file mode 100644
index 0000000..f47fc83
--- /dev/null
+++ b/app/Components/SelectEquipo.tsx
@@ -0,0 +1,37 @@
+"use client";
+import axios from "axios";
+import { useEffect, useState } from "react";
+
+interface proms {
+  url: string;
+}
+
+export default function SelectEquipo(props: proms) {
+  const [areas, setAreas] = useState([]);
+  const [selectedArea, setSelectedArea] = useState("");
+
+  useEffect(() => {
+    axios
+      .get(props.url)
+      .then((data) => setAreas(data.data))
+      .catch((error) => console.error("Error al traer las áreas:", error));
+  }, []);
+
+  return (
+    <div>
+      <label htmlFor="areaSelect">Selecciona un equipo:</label>
+      <select
+        id="areaSelect"
+        value={selectedArea}
+        onChange={(e) => setSelectedArea(e.target.value)}
+      >
+        <option value="">-- Selecciona una opción --</option>
+        {areas.map((area: any, index) => (
+          <option key={index} value={area.nombre_equipo}>
+            {area.nombre_equipo}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

From 426624e0de0f823a7110f10cfe977556e7dea2a9 Mon Sep 17 00:00:00 2001
From: CarlosssFlores <307100636@pcpuma.acatlan.unam.mx>
Date: Wed, 5 Nov 2025 14:51:47 -0600
Subject: [PATCH 3/6] notfound

---
 .../InformacionEquipos/ProgramSelector.tsx    |  2 +
 app/NotFound.css                              | 44 +++++++++++++++++++
 app/not-found.tsx                             | 23 ++++------
 3 files changed, 55 insertions(+), 14 deletions(-)
 create mode 100644 app/NotFound.css

diff --git a/app/Components/InformacionEquipos/ProgramSelector.tsx b/app/Components/InformacionEquipos/ProgramSelector.tsx
index 0c7f563..c265e62 100644
--- a/app/Components/InformacionEquipos/ProgramSelector.tsx
+++ b/app/Components/InformacionEquipos/ProgramSelector.tsx
@@ -40,6 +40,7 @@ const programas = [
 
 export default function ProgramSelector({ titulo, opcion, tipo }: DatosEquipo) {
   const [seleccion, setSeleccion] = useState("");
+  const [programas, setPrograma] = useState("");
   const [checkboxes, setCheckboxes] = useState<Record<string, boolean>>(
     programas.reduce((acc, prog) => ({ ...acc, [prog]: false }), {})
   );
@@ -48,6 +49,7 @@ export default function ProgramSelector({ titulo, opcion, tipo }: DatosEquipo) {
     const response = axios.get(
       "https://venus.acatlan.unam.mx/asignacionTiempo_test/equipo"
     );
+    setPrograma(response)
   });
 
   const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
diff --git a/app/NotFound.css b/app/NotFound.css
new file mode 100644
index 0000000..727e6ac
--- /dev/null
+++ b/app/NotFound.css
@@ -0,0 +1,44 @@
+.notfound {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: linear-gradient(135deg, #f3f4f5, #f3f4f5);
+  color: #fff;
+  text-align: center;
+  font-family: "Inter", sans-serif;
+  padding: 2rem;
+}
+
+.notfound h1 {
+  font-size: 6rem;
+  color: #ff4d4d;
+  margin-bottom: 0.5rem;
+}
+
+.notfound h2 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+.notfound p {
+  color: #050505;
+  max-width: 500px;
+  margin-bottom: 2rem;
+}
+
+.notfound button {
+  background: #ff4d4d;
+  border: none;
+  color: white;
+  padding: 0.8rem 2rem;
+  border-radius: 10px;
+  font-size: 1rem;
+  cursor: pointer;
+  transition: background 0.3s ease;
+}
+
+.notfound button:hover {
+  background: #e60000;
+}
diff --git a/app/not-found.tsx b/app/not-found.tsx
index 6e292db..308a276 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -1,25 +1,20 @@
 "use client";
 
 import { useRouter } from "next/navigation";
+import "./NotFound.css";
 
 export default function NotFound() {
   const router = useRouter();
 
-  const handleButton = () => {
-    router.push("/Impresiones");
-  };
-
   return (
-    <section>
-      <img src="/404-bg.png" alt="Página no encontrada" />
-
-      {/* Título */}
-      <h1>404 - Página no encontrada</h1>
-
-      {/* Texto */}
-      <p>Lo sentimos, la página que buscas no existe.</p>
-      <p>Por favor, verifica la URL o regresa a la página principal.</p>
-      <button className="button buttonSearch"> regresa al inicio</button>
+    <section className="notfound">
+      <h1>404</h1>
+      <h2>Página no encontrada</h2>
+      <p>
+        Lo sentimos, la página que buscas no existe o ha sido movida. Verifica
+        la URL o regresa a la página principal.
+      </p>
+      <button onClick={() => router.push("/")}>Regresar al inicio</button>
     </section>
   );
 }

From 8084addb1e847b2e27e7e1fa566747e468f41c07 Mon Sep 17 00:00:00 2001
From: frcarlos <307100636@pcpuma.acatlan.unam.mx>
Date: Wed, 14 Jan 2026 14:37:19 -0500
Subject: [PATCH 4/6] Recibo

---
 app/(private)/Reportes/ReportesClient.tsx     | 58 +++++++++++++++
 app/(private)/Reportes/page.tsx               | 41 +----------
 app/Components/Reportes/porRecibo.tsx         | 61 +++++++++++++---
 .../SearchDateBetween/SearchDateBetween.tsx   | 73 +++++++++----------
 tsconfig.json                                 |  2 +-
 5 files changed, 146 insertions(+), 89 deletions(-)
 create mode 100644 app/(private)/Reportes/ReportesClient.tsx

diff --git a/app/(private)/Reportes/ReportesClient.tsx b/app/(private)/Reportes/ReportesClient.tsx
new file mode 100644
index 0000000..65e838a
--- /dev/null
+++ b/app/(private)/Reportes/ReportesClient.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import { useState } from 'react';
+import Toggle from '@/app/Components/Global/Toggle/Toggle';
+import SearchDateBetween from '@/app/Components/SearchDateBetween/SearchDateBetween';
+import PorServicios from '@/app/Components/Reportes/porServicio';
+import PorRecibos from '@/app/Components/Reportes/porRecibo';
+
+export default function ReportesClient({
+  defaultKey,
+}: {
+  defaultKey?: string;
+}) {
+  const [desde, setDesde] = useState<string | null>(null);
+  const [hasta, setHasta] = useState<string | null>(null);
+
+  return (
+    <section className="containerSection">
+      <h2 className="title">REPORTES</h2>
+
+      <Toggle
+        defaultView={defaultKey}
+        options={[
+          {
+            key: 'Por recibo',
+            label: 'Por recibo',
+            content: (
+              <>
+                <SearchDateBetween
+                  onSearch={(d, h) => {
+                    setDesde(d);
+                    setHasta(h);
+                  }}
+                />
+                <PorRecibos desde={desde} hasta={hasta} />
+              </>
+            ),
+          },
+          {
+            key: 'Por Servicio',
+            label: 'Por Servicio',
+            content: (
+              <>
+                <SearchDateBetween
+                  onSearch={(d, h) => {
+                    setDesde(d);
+                    setHasta(h);
+                  }}
+                />
+                {/* <PorServicios desde={desde} hasta={hasta} /> */}
+              </>
+            ),
+          },
+        ]}
+      />
+    </section>
+  );
+}
diff --git a/app/(private)/Reportes/page.tsx b/app/(private)/Reportes/page.tsx
index a328a07..b361760 100644
--- a/app/(private)/Reportes/page.tsx
+++ b/app/(private)/Reportes/page.tsx
@@ -1,48 +1,11 @@
-import Toggle from "@/app/Components/Global/Toggle/Toggle";
-import SearchDateBetween from "@/app/Components/SearchDateBetween/SearchDateBetween";
-import PorServicios from "@/app/Components/Reportes/porServicio";
-import PorRecibos from "@/app/Components/Reportes/porRecibo";
+import ReportesClient from './ReportesClient';
 
 export default async function Page(props: {
   searchParams?: Promise<{
     key: string;
-    numAcount: string;
   }>;
 }) {
   const params = await props.searchParams;
-  const key = params?.key && params.key;
 
-  return (
-    <section className="containerSection">
-      <h2 className="title"> REPORTES </h2>
-
-      <Toggle
-        defaultView={key}
-        options={[
-          {
-            key: "Por recibo",
-            label: "Por recibo",
-            content: (
-              <>
-                <SearchDateBetween />
-                <PorServicios />
-              </>
-            ),
-          },
-
-          {
-            key: "Por Servicio",
-            label: "Por Servicio",
-            content: (
-              <>
-                <SearchDateBetween />
-                <PorRecibos />
-              </>
-            ),
-          },
-        ]}
-      />
-    </section>
-  );
+  return <ReportesClient defaultKey={params?.key} />;
 }
-//IO
diff --git a/app/Components/Reportes/porRecibo.tsx b/app/Components/Reportes/porRecibo.tsx
index 8590296..0b8fc60 100644
--- a/app/Components/Reportes/porRecibo.tsx
+++ b/app/Components/Reportes/porRecibo.tsx
@@ -1,17 +1,52 @@
-"use client";
-import { useState } from "react";
-import styles from "./Page.module.css";
+'use client';
 
-interface reportes {
-  Servicio: "Plotter";
-  Total: "$1440.00";
+import { useEffect, useState } from 'react';
+import axios from 'axios';
+
+interface ReporteRecibo {
+  Servicio: string;
+  Total: string;
 }
 
-function PorRecibos() {
-  const [reportes, SetQuitarSanciones] = useState<reportes[]>([]);
+interface Props {
+  desde: string | null;
+  hasta: string | null;
+}
+
+function PorRecibos({ desde, hasta }: Props) {
+  const [reportes, setReportes] = useState<ReporteRecibo[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!desde || !hasta) return;
+
+    const fetchRecibos = async () => {
+      setLoading(true);
+      try {
+        const res = await axios.post(
+          `${process.env.NEXT_PUBLIC_API_URL}/recibo/rango`,
+          {
+            desde,
+            hasta,
+          }
+        );
+
+        setReportes(res.data);
+      } catch (error) {
+        console.error('Error al obtener recibos', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchRecibos();
+  }, [desde, hasta]);
+
   return (
-    <div className={styles.tableContainer}>
-      <table className={styles.machineTable}>
+    <div>
+      {loading && <p>Cargando...</p>}
+
+      <table>
         <thead>
           <tr>
             <th>Servicio</th>
@@ -19,6 +54,12 @@ function PorRecibos() {
           </tr>
         </thead>
         <tbody>
+          {reportes.length === 0 && !loading && (
+            <tr>
+              <td colSpan={2}>No hay resultados</td>
+            </tr>
+          )}
+
           {reportes.map((reporte, index) => (
             <tr key={index}>
               <td>{reporte.Servicio}</td>
diff --git a/app/Components/SearchDateBetween/SearchDateBetween.tsx b/app/Components/SearchDateBetween/SearchDateBetween.tsx
index 38102bb..d88ce18 100644
--- a/app/Components/SearchDateBetween/SearchDateBetween.tsx
+++ b/app/Components/SearchDateBetween/SearchDateBetween.tsx
@@ -1,51 +1,46 @@
-"use client";
+'use client';
 
-import { useState } from "react";
+import { useState } from 'react';
 
-function SearchDateBetween() {
-  const [startDate, setStartDate] = useState("");
-  const [endDate, setEndDate] = useState("");
+interface Props {
+  onSearch: (desde: string, hasta: string) => void;
+}
+
+function SearchDateBetween({ onSearch }: Props) {
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    console.log("Fecha inicio:", startDate);
-    console.log("Fecha fin:", endDate);
-    // Aquí puedes hacer la lógica para buscar entre fechas
+    if (!startDate || !endDate) return;
+    onSearch(startDate, endDate);
   };
 
   return (
-    <>
-      <form className="containerForm" onSubmit={handleSubmit}>
-        <label className="label">Desde</label>
-        <div className="groupInput">
-          <input
-            type="date"
-            value={startDate}
-            onChange={(e) => setStartDate(e.target.value)}
-            placeholder="Fecha inicio"
-          />
-        </div>
-        <label className="label">Hasta</label>
-        <div className="groupInput">
-          <input
-            type="date"
-            value={endDate}
-            onChange={(e) => setEndDate(e.target.value)}
-            placeholder="Fecha fin"
-          />
-        </div>
-        <button
-          className="button buttonSearch "
-          type="submit"
-          style={{ margin: "1rem 0 " }}
-        >
-          Buscar
-        </button>
-      </form>
-    </>
+    <form className="containerForm" onSubmit={handleSubmit}>
+      <label className="label">Desde</label>
+      <div className="groupInput">
+        <input
+          type="date"
+          value={startDate}
+          onChange={(e) => setStartDate(e.target.value)}
+        />
+      </div>
+
+      <label className="label">Hasta</label>
+      <div className="groupInput">
+        <input
+          type="date"
+          value={endDate}
+          onChange={(e) => setEndDate(e.target.value)}
+        />
+      </div>
+
+      <button className="button buttonSearch" type="submit">
+        Buscar
+      </button>
+    </form>
   );
 }
 
 export default SearchDateBetween;
-
-// By Tyrannuss
diff --git a/tsconfig.json b/tsconfig.json
index d8b9323..00978ef 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,7 +11,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {

From b33ee92682a40b5642e27ac9555a0ff1a6698aa6 Mon Sep 17 00:00:00 2001
From: IO420 <320154041@pcpuma.acatlan.unam.mx>
Date: Fri, 16 Jan 2026 14:06:08 -0600
Subject: [PATCH 5/6] reporte servicio date

---
 app/(private)/Reportes/ReportesClient.tsx |   2 +-
 app/Components/Reportes/porServicio.tsx   | 108 +++++++++++++++-------
 tsconfig.json                             |   2 +-
 3 files changed, 78 insertions(+), 34 deletions(-)

diff --git a/app/(private)/Reportes/ReportesClient.tsx b/app/(private)/Reportes/ReportesClient.tsx
index 9d7fc17..e6004fb 100644
--- a/app/(private)/Reportes/ReportesClient.tsx
+++ b/app/(private)/Reportes/ReportesClient.tsx
@@ -48,7 +48,7 @@ export default function ReportesClient({
                     setHasta(h);
                   }}
                 />
-                {/* <PorServicios desde={desde} hasta={hasta} /> */}
+                <PorServicios desde={desde} hasta={hasta} />
               </>
             ),
           },
diff --git a/app/Components/Reportes/porServicio.tsx b/app/Components/Reportes/porServicio.tsx
index 73ef7b5..0f1e2cb 100644
--- a/app/Components/Reportes/porServicio.tsx
+++ b/app/Components/Reportes/porServicio.tsx
@@ -1,42 +1,86 @@
 "use client";
-import { useState } from "react";
 
-interface servicios {
-  folio_recibo: "100255";
-  monto: "40.00";
-  fecha_recibo: "10/10/2025";
-  fecha_registro: "10/10/2025 05:32:20 pm";
-  usuario: "modulo1";
+import { useEffect, useState } from "react";
+import axios from "axios";
+import DownloadReporteXLSX from "../Dowload/Reporte";
+
+
+interface ServicioReporte {
+  id_servicio: number;
+  servicio: string;
+  total: string;
 }
 
-function PorServicios() {
-  const [recibos, setRecibos] = useState<servicios[]>([]);
+interface Props {
+  desde: string | null;
+  hasta: string | null;
+}
+
+function PorServicio({ desde, hasta }: Props) {
+  const [servicios, setServicios] = useState<ServicioReporte[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    if (!desde || !hasta) return;
+
+    const fetchServicios = async () => {
+      setLoading(true);
+      try {
+        const res = await axios.post(
+          `${process.env.NEXT_PUBLIC_API_URL}/detalle-servicio/rango`,
+          { desde, hasta }
+        );
+
+        setServicios(res.data);
+      } catch (error) {
+        console.error("Error al obtener reporte por servicio", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchServicios();
+  }, [desde, hasta]);
+
   return (
-    <div>
-      <table>
-        <thead>
-          <tr>
-            <th>Folio Recibo</th>
-            <th>Monto</th>
-            <th>Fecha Recibo</th>
-            <th>Fecha Registro</th>
-            <th>Usuario</th>
-          </tr>
-        </thead>
-        <tbody>
-          {recibos.map((recibo, index) => (
-            <tr key={index}>
-              <td>{recibo.folio_recibo}</td>
-              <td>{recibo.monto}</td>
-              <td>{recibo.fecha_recibo}</td>
-              <td>{recibo.fecha_registro}</td>
-              <td>{recibo.usuario}</td>
+    <div style={{ position: "relative" }}>
+      {servicios.length > 0 && <DownloadReporteXLSX />}
+
+      <div
+        style={{
+          overflow: "auto",
+          height: "270px",
+          scrollbarColor: "#2563eb white",
+        }}
+      >
+        {loading && <p>Cargando...</p>}
+
+        <table>
+          <thead>
+            <tr>
+              <th>Servicio</th>
+              <th>Monto total</th>
             </tr>
-          ))}
-        </tbody>
-      </table>
+          </thead>
+
+          <tbody>
+            {!loading && servicios.length === 0 && (
+              <tr>
+                <td colSpan={2}>No hay servicios en este rango</td>
+              </tr>
+            )}
+
+            {servicios.map((servicio) => (
+              <tr key={servicio.id_servicio}>
+                <td>{servicio.servicio}</td>
+                <td>${Number(servicio.total).toFixed(2)}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 }
 
-export default PorServicios;
+export default PorServicio;
diff --git a/tsconfig.json b/tsconfig.json
index 74f6560..e7ff3a2 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {

From 1e9fb6613646136d1978f0855596a0d8d9b52218 Mon Sep 17 00:00:00 2001
From: IO420 <320154041@pcpuma.acatlan.unam.mx>
Date: Fri, 16 Jan 2026 14:11:03 -0600
Subject: [PATCH 6/6] merge lino

---
 app/(private)/InformacionEquipo/page.tsx         |  5 ++++-
 .../InformacionEquipos/ProgramSelector.tsx       | 16 ++++++----------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/app/(private)/InformacionEquipo/page.tsx b/app/(private)/InformacionEquipo/page.tsx
index 4705192..9f2d02c 100644
--- a/app/(private)/InformacionEquipo/page.tsx
+++ b/app/(private)/InformacionEquipo/page.tsx
@@ -1,6 +1,7 @@
 import Toggle from "@/app/Components/Global/Toggle/Toggle";
 import Equipos from "@/app/Components/Equipos/equipos";
 import ProgramSelector from "@/app/Components/InformacionEquipos/ProgramSelector";
+
 import "./informacionequipo.css";
 
 export default async function Page(props: {
@@ -15,6 +16,7 @@ export default async function Page(props: {
 
   return (
     <section className="containerSection">
+
       <h2 className="title"> INFORMACION DE EQUIPOS </h2>
 
       <Toggle
@@ -23,7 +25,7 @@ export default async function Page(props: {
           {
             key: "Equipos",
             label: "Equipos",
-            content: <Equipos />, // ✅ Aquí solo se muestran los equipos
+            content: <Equipos />,
           },
           {
             key: "Equipo",
@@ -48,3 +50,4 @@ export default async function Page(props: {
     </section>
   );
 }
+//IO
\ No newline at end of file
diff --git a/app/Components/InformacionEquipos/ProgramSelector.tsx b/app/Components/InformacionEquipos/ProgramSelector.tsx
index de8700c..fd56aed 100644
--- a/app/Components/InformacionEquipos/ProgramSelector.tsx
+++ b/app/Components/InformacionEquipos/ProgramSelector.tsx
@@ -62,12 +62,9 @@ export default function ProgramSelector() {
     getEquipos();
   }, []);
 
-  useEffect(() => {
-    const response = axios.get(
-      "https://venus.acatlan.unam.mx/asignacionTiempo_test/equipo"
-    );
-    setPrograma(response)
-  });
+  const handleChangeEquipo = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const equipo = e.target.value;
+    setEquipoSeleccionado(equipo);
 
     const nuevosCheckboxes: Record<string, boolean> = {};
     programas.forEach((prog) => {
@@ -79,10 +76,9 @@ export default function ProgramSelector() {
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
+    console.log("Equipo:", equipoSeleccionado);
     console.log(
-      tipo === "sala" ? "Sala:" : "Equipo:",
-      seleccion,
-      "\nProgramas seleccionados:",
+      "Programas seleccionados:",
       Object.keys(checkboxes).filter((p) => checkboxes[p])
     );
   };
@@ -119,4 +115,4 @@ export default function ProgramSelector() {
       </button>
     </form>
   );
-}
+}
\ No newline at end of file