Refactor Reporte component to enhance data fetching and improve PDF generation; implement ShadcnTabs for date filtering

ventaboletos/src/components/vistas/Reporte.jsx

@@ -2,7 +2,7 @@ import { useState, useEffect } from "react";
 import { supabaseClient } from "@/utils/supabase";
 import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
 import "react-tabs/style/react-tabs.css";
-import dynamic from "next/dynamic";
+import { Tabs as ShadcnTabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import {
   BarChart,
   Bar,
@@ -13,10 +13,6 @@ import {
 } from "recharts";
 import { Button } from "@/components/ui/button";
 
-const html2canvas = dynamic(() => import("html2canvas"), {
-  ssr: false,
-});
-
 export default function Reporte() {
   const [ventas, setVentas] = useState([]);
   const [filtro, setFiltro] = useState("diario"); // Estado para el filtro de fecha (diario, semanal, mensual)
@@ -24,7 +20,27 @@ export default function Reporte() {
   // Función para obtener los datos de ventas de Supabase
   useEffect(() => {
     const fetchVentas = async () => {
-      const { data, error } = await supabaseClient.from("ventas").select("*");
+      const { data, error } = await supabaseClient.from("ventas").select(`
+        venta_id,
+        fecha_venta,
+        monto,
+        boletos (
+          boleto_id,
+          comprador_nombre,
+          comprador_email,
+          conciertos (
+            nombre,
+            fecha,
+            salas (
+              nombre
+            )
+          ),
+          asientos (
+            numero,
+            categoria
+          )
+        )
+      `);
       if (error) {
         console.error("Error al obtener las ventas:", error.message);
       } else {
@@ -69,17 +85,24 @@ export default function Reporte() {
   // Función para generar el PDF
   const generarPDF = async () => {
     try {
-      const input = document.getElementById("reporte");
+      // Dynamic imports for both libraries
-      const canvas = await html2canvas(input);
+      const html2canvas = (await import('html2canvas')).default;
-      const imgData = canvas.toDataURL("image/png");
+      const jsPDF = (await import('jspdf')).default;
 
-      // Dynamic import of jsPDF
+      const element = document.getElementById("reporte");
-      const { default: jsPDF } = await import("jspdf");
+      const canvas = await html2canvas(element);
-      const pdf = new jsPDF("p", "mm", "a4");
+      const data = canvas.toDataURL('image/png');
-      pdf.addImage(imgData, "PNG", 10, 10, 190, 0);
+
+      const pdf = new jsPDF();
+      const imgProperties = pdf.getImageProperties(data);
+      const pdfWidth = pdf.internal.pageSize.getWidth();
+      const pdfHeight = (imgProperties.height * pdfWidth) / imgProperties.width;
+
+      pdf.addImage(data, 'PNG', 0, 0, pdfWidth, pdfHeight);
       pdf.save("Reporte_Ventas.pdf");
     } catch (error) {
-      console.error("Error generating PDF:", error);
+      console.error("Error al generar PDF:", error);
+      alert("Error al generar el PDF");
     }
   };
 
@@ -96,60 +119,50 @@ export default function Reporte() {
       </Button>
 
       {/* Filtros de fechas */}
-      <div>
+      <ShadcnTabs
-        <button onClick={() => setFiltro("diario")}>Diario</button>
+        defaultValue="diario"
-        <button onClick={() => setFiltro("semanal")}>Semanal</button>
+        className="w-[400px] mb-4"
-        <button onClick={() => setFiltro("mensual")}>Mensual</button>
+        onValueChange={(value) => setFiltro(value)}
-      </div>
+        >
+          <TabsList className="grid w-full grid-cols-3">
+            <TabsTrigger value="diario">Diario</TabsTrigger>
+            <TabsTrigger value="semanal">Semanal</TabsTrigger>
+            <TabsTrigger value="mensual">Mensual</TabsTrigger>
+          </TabsList>
+      </ShadcnTabs>
 
       <Tabs>
         <TabList>
           <Tab>Tabla</Tab>
-          <Tab>Gráfico de Ventas</Tab>
         </TabList>
 
         {/* Sección de Tabla */}
         <TabPanel>
           <div id="reporte">
-            <table border="1">
+            <table border="1" className="m-10">
               <thead>
                 <tr>
-                  <th>ID Venta</th>
+                <th className="pr-5">ID Venta</th>
-                  <th>ID Boleto</th>
+                <th className="pr-5">Fecha Venta</th>
-                  <th>ID Vendedor</th>
+                <th className="pr-5">Asiento</th>
-                  <th>Fecha Venta</th>
+                <th className="pr-5">Categoría</th>
-                  <th>Monto</th>
+                <th className="pr-5">Monto</th>
                 </tr>
               </thead>
               <tbody>
                 {ventasFiltradas.map((venta) => (
                   <tr key={venta.venta_id}>
-                    <td>{venta.venta_id}</td>
+                  <td className="pr-5">{venta.venta_id}</td>
-                    <td>{venta.boleto_id}</td>
+                  <td className="pr-5">{new Date(venta.fecha_venta).toLocaleString()}</td>
-                    <td>{venta.vendedor_id}</td>
+                  <td className="pr-5">{venta.boletos.asientos.numero}</td>
-                    <td>{new Date(venta.fecha_venta).toLocaleString()}</td>
+                  <td className="pr-5">{venta.boletos.asientos.categoria}</td>
-                    <td>${venta.monto}</td>
+                  <td className="pr-5">${venta.monto}</td>
-                  </tr>
+                </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>
   );

ventaboletos/src/pages/carrito.jsx

@@ -52,37 +52,43 @@ export default function Carrito() {
     }
 
     try {
-      // Create sales records for each item in cart
+      // Create sales and ticket records for each item in cart
-      const ventasData = carrito.map((item) => ({
+      for (const item of carrito) {
-        concierto_id: item.id,
+        // First create the ticket record
-        asiento_numero: parseInt(item.asiento),
+        const { data: boletoData, error: boletoError } = await supabaseClient
-        precio: item.precio,
+          .from("boletos")
-        metodo_pago: selectedPaymentMethod,
+          .insert({
-        fecha_venta: new Date().toISOString(),
+            concierto_id: item.id,
-        estado: "completado",
+            categoria: "General", // You might want to make this dynamic
-      }));
+            comprador_nombre: "Usuario", // Add form fields for this
+            comprador_email: "usuario@example.com", // Add form fields for this
+            asiento_id: item.asiento,
+            estado: "disponible",
+          })
+          .select()
+          .single();
 
-      const { data, error } = await supabaseClient
+        if (boletoError) throw boletoError;
-        .from("ventas")
-        .insert(ventasData)
-        .select();
 
-      if (error) {
+        // Then create the sale record
-        throw error;
+        const { data: ventaData, error: ventaError } = await supabaseClient
-      }
+          .from("ventas")
+          .insert({
+            boleto_id: boletoData.boleto_id,
+            fecha_venta: new Date().toISOString(),
+            monto: item.precio,
+          })
+          .select();
 
-      // Update asientos estado to 'ocupado'
+        if (ventaError) throw ventaError;
-      const asientosUpdates = carrito.map((item) => ({
-        numero: parseInt(item.asiento),
-        estado: "ocupado",
-      }));
 
-      const { error: asientosError } = await supabaseClient
+        // Update asiento status
-        .from("asientos")
+        const { error: asientoError } = await supabaseClient
-        .upsert(asientosUpdates, { onConflict: "numero" });
+          .from("asientos")
+          .update({ estado: "ocupado" })
+          .eq("numero", item.asiento);
 
-      if (asientosError) {
+        if (asientoError) throw asientoError;
-        throw asientosError;
       }
 
       alert("Pago realizado con éxito");