Recibo

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>
+  );
+}

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

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

tsconfig.json

@@ -11,7 +11,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {