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": [
       {