Recibo

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>