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>

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