Add react-tabs for improved report visualization and integrate Supabase for sales data fetching

ventaboletos/package-lock.json

@@ -23,6 +23,7 @@
         "next": "15.1.7",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-tabs": "^6.1.0",
         "recharts": "^2.15.1",
         "tailwind-merge": "^3.0.2",
         "tailwindcss-animate": "^1.0.7",
@@ -5400,6 +5401,18 @@
         }
       }
     },
+    "node_modules/react-tabs": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-6.1.0.tgz",
+      "integrity": "sha512-6QtbTRDKM+jA/MZTTefvigNxo0zz+gnBTVFw2CFVvq+f2BuH0nF0vDLNClL045nuTAdOoK/IL1vTP0ZLX0DAyQ==",
+      "dependencies": {
+        "clsx": "^2.0.0",
+        "prop-types": "^15.5.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-transition-group": {
       "version": "4.4.5",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",

ventaboletos/package.json

@@ -24,6 +24,7 @@
     "next": "15.1.7",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-tabs": "^6.1.0",
     "recharts": "^2.15.1",
     "tailwind-merge": "^3.0.2",
     "tailwindcss-animate": "^1.0.7",

ventaboletos/src/components/vistas/Reporte.jsx

@@ -1,106 +1,138 @@
-import React, { useState, useRef } from "react";
+import { useState, useEffect } from "react";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { createClient } from "@supabase/supabase-js";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+import "react-tabs/style/react-tabs.css";
 import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";
-import jsPDF from "jspdf";
 import html2canvas from "html2canvas";
+import jsPDF from "jspdf";
 
-const Reporte = () => {
+const supabase = createClient(
-  const chartRef = useRef(null); // Referencia para capturar la gráfica
+  process.env.NEXT_PUBLIC_SUPABASE_URL,
+  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
+);
 
-  // Datos simulados de ventas
+export default function Reporte() {
-  const ventasDiarias = [
+  const [ventas, setVentas] = useState([]);
-    { fecha: "2025-03-01", boletos: 20 },
+  const [filtro, setFiltro] = useState("diario"); // Estado para el filtro de fecha (diario, semanal, mensual)
-    { fecha: "2025-03-02", boletos: 35 },
-    { fecha: "2025-03-03", boletos: 50 },
-  ];
 
-  const ventasSemanales = [
+  // Función para obtener los datos de ventas de Supabase
-    { semana: "Semana 1", boletos: 120 },
+  useEffect(() => {
-    { semana: "Semana 2", boletos: 150 },
+    const fetchVentas = async () => {
-    { semana: "Semana 3", boletos: 170 },
+      const { data, error } = await supabase.from("ventas").select("*");
-  ];
+      if (error) {
+        console.error("Error al obtener las ventas:", error.message);
+      } else {
+        console.log("Datos obtenidos:", data);
+        setVentas(data);
+      }
+    };
 
-  const ventasMensuales = [
+    fetchVentas();
-    { mes: "Enero", boletos: 500 },
+  }, []);
-    { mes: "Febrero", boletos: 650 },
-    { mes: "Marzo", boletos: 700 },
-  ];
 
-  const [selectedTab, setSelectedTab] = useState("diario");
+  // Función para filtrar las ventas según el rango de fechas
+  const filtrarVentas = () => {
+    const hoy = new Date();
+    let fechaInicio;
 
-  // Obtener datos según la pestaña activa
+    switch (filtro) {
-  const getData = () => {
-    switch (selectedTab) {
       case "diario":
-        return ventasDiarias;
+        fechaInicio = new Date(hoy.setHours(0, 0, 0, 0)); // Inicio del día
+        return ventas.filter((venta) => {
+          const fechaVenta = new Date(venta.fecha_venta);
+          return fechaVenta >= fechaInicio;
+        });
       case "semanal":
-        return ventasSemanales;
+        const inicioSemana = hoy.getDate() - hoy.getDay(); // Día lunes de esta semana
+        fechaInicio = new Date(hoy.setDate(inicioSemana));
+        return ventas.filter((venta) => {
+          const fechaVenta = new Date(venta.fecha_venta);
+          return fechaVenta >= fechaInicio;
+        });
       case "mensual":
-        return ventasMensuales;
+        fechaInicio = new Date(hoy.getFullYear(), hoy.getMonth(), 1); // Primer día del mes
+        return ventas.filter((venta) => {
+          const fechaVenta = new Date(venta.fecha_venta);
+          return fechaVenta >= fechaInicio;
+        });
       default:
-        return [];
+        return ventas;
     }
   };
 
-  // Calcular el total de boletos vendidos
+  // Función para generar el PDF
-  const totalBoletos = getData().reduce((acc, item) => acc + item.boletos, 0);
-
-  // Función para generar y descargar el PDF
   const generarPDF = async () => {
-    const pdf = new jsPDF();
+    const input = document.getElementById("reporte");
-    pdf.setFontSize(18);
+    const canvas = await html2canvas(input);
-    pdf.text("Reporte de Ventas", 10, 10);
+    const imgData = canvas.toDataURL("image/png");
-    pdf.setFontSize(14);
+    const pdf = new jsPDF("p", "mm", "a4");
-    pdf.text(`Tipo de Reporte: ${selectedTab.toUpperCase()}`, 10, 20);
+    pdf.addImage(imgData, "PNG", 10, 10, 190, 0);
-    pdf.text(`Total de Boletos Vendidos: ${totalBoletos}`, 10, 30);
+    pdf.save("Reporte_Ventas.pdf");
-
-    // Capturar la gráfica como imagen
-    if (chartRef.current) {
-      const canvas = await html2canvas(chartRef.current);
-      const imgData = canvas.toDataURL("image/png");
-      pdf.addImage(imgData, "PNG", 10, 40, 180, 90);
-    }
-
-    pdf.save(`reporte_${selectedTab}.pdf`);
   };
 
+  // Datos filtrados según el filtro seleccionado
+  const ventasFiltradas = filtrarVentas();
+
   return (
-    <div className="w-full max-w-3xl mx-auto p-4">
+    <div>
-      <h2 className="text-2xl font-bold mb-4">Reporte de Ventas</h2>
+      <h1>Reporte de Ventas</h1>
-      <Tabs defaultValue="diario" onValueChange={setSelectedTab} className="w-full">
-        <TabsList className="flex space-x-2 mb-4">
-          <TabsTrigger value="diario">Diario</TabsTrigger>
-          <TabsTrigger value="semanal">Semanal</TabsTrigger>
-          <TabsTrigger value="mensual">Mensual</TabsTrigger>
-          <img
-            src="/pdf.svg"
-            alt="pdf"
-            className="h-7 w-7 cursor-pointer"
-            onClick={generarPDF}
-          />
-        </TabsList>
 
-        <Card>
+      {/* Botón para generar PDF */}
-          <CardHeader>
+      <button onClick={generarPDF}>Descargar PDF</button>
-            <CardTitle>
+
-              Total de Boletos Vendidos: <span className="text-blue-600">{totalBoletos}</span>
+      {/* Filtros de fechas */}
-            </CardTitle>
+      <div>
-          </CardHeader>
+        <button onClick={() => setFiltro("diario")}>Diario</button>
-          <CardContent ref={chartRef}>
+        <button onClick={() => setFiltro("semanal")}>Semanal</button>
-            <ResponsiveContainer width="100%" height={300}>
+        <button onClick={() => setFiltro("mensual")}>Mensual</button>
-              <BarChart data={getData()}>
+      </div>
-                <XAxis dataKey={selectedTab === "diario" ? "fecha" : selectedTab === "semanal" ? "semana" : "mes"} />
+
-                <YAxis />
+      <Tabs>
-                <Tooltip />
+        <TabList>
-                <Bar dataKey="boletos" fill="#3b82f6" />
+          <Tab>Tabla</Tab>
-              </BarChart>
+          <Tab>Gráfico de Ventas</Tab>
-            </ResponsiveContainer>
+        </TabList>
-          </CardContent>
+
-        </Card>
+        {/* Sección de Tabla */}
+        <TabPanel>
+          <div id="reporte">
+            <table border="1">
+              <thead>
+                <tr>
+                  <th>ID Venta</th>
+                  <th>ID Boleto</th>
+                  <th>ID Vendedor</th>
+                  <th>Fecha Venta</th>
+                  <th>Monto</th>
+                </tr>
+              </thead>
+              <tbody>
+                {ventasFiltradas.map((venta) => (
+                  <tr key={venta.venta_id}>
+                    <td>{venta.venta_id}</td>
+                    <td>{venta.boleto_id}</td>
+                    <td>{venta.vendedor_id}</td>
+                    <td>{new Date(venta.fecha_venta).toLocaleString()}</td>
+                    <td>${venta.monto}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </TabPanel>
+
+        {/* Sección de Gráfico */}
+        <TabPanel>
+          <ResponsiveContainer width="100%" height={300}>
+            <BarChart data={ventasFiltradas} margin={{ top: 20, right: 30, left: 20, bottom: 5 }}>
+              <XAxis dataKey="venta_id" />
+              <YAxis />
+              <Tooltip />
+              <Bar dataKey="monto" fill="#8884d8" />
+            </BarChart>
+          </ResponsiveContainer>
+        </TabPanel>
       </Tabs>
     </div>
   );
-};
+}
-
-export default Reporte;

ventaboletos/src/pages/api/comprar-boletos.js

@@ -1,24 +1,31 @@
-import { supabaseClient } from "@/utils/supabase";
+import { createClient } from "@supabase/supabase-js";
+
+const supabase = createClient(
+  process.env.NEXT_PUBLIC_SUPABASE_URL,
+  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
+);
 
 export default async function handler(req, res) {
-  if (req.method === "POST") {
+  if (req.method !== "POST") {
+    return res.status(405).json({ error: "Método no permitido" });
+  }
+
+  try {
     const { boletos } = req.body;
 
-    try {
+    if (!boletos || boletos.length === 0) {
-      const { data, error } = await supabaseClient
+      return res.status(400).json({ error: "No hay boletos para procesar" });
-        .from("boletos_comprados")
-        .insert(boletos);
-
-      if (error) {
-        throw error;
-      }
-
-      res.status(200).json({ message: "Compra realizada con éxito", data });
-    } catch (error) {
-      console.error("Error al insertar boletos:", error);
-      res.status(500).json({ message: "Error al procesar la compra", error });
     }
-  } else {
+
-    res.status(405).json({ message: "Método no permitido" });
+    const { data, error } = await supabase.from("ventas").insert(boletos);
+
+    if (error) {
+      throw error;
+    }
+
+    res.status(200).json({ message: "Boletos comprados con éxito", data });
+  } catch (error) {
+    console.error("Error en la API de compra:", error.message);
+    res.status(500).json({ error: error.message });
   }
-}
+}