This commit is contained in:
SirRobert-1 2025-03-12 20:09:44 -06:00
commit 2c6cd9ba78
4 changed files with 155 additions and 102 deletions
ventaboletos

View File

@ -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",

View File

@ -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",

View File

@ -1,106 +1,138 @@
import React, { useState, useRef } from "react";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useState, useEffect } from "react";
import { createClient } from "@supabase/supabase-js";
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 chartRef = useRef(null); // Referencia para capturar la gráfica
const supabase = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
);
export default function Reporte() {
const [ventas, setVentas] = useState([]);
const [filtro, setFiltro] = useState("diario"); // Estado para el filtro de fecha (diario, semanal, mensual)
// Datos simulados de ventas
const ventasDiarias = [
{ fecha: "2025-03-01", boletos: 20 },
{ fecha: "2025-03-02", boletos: 35 },
{ fecha: "2025-03-03", boletos: 50 },
];
// Función para obtener los datos de ventas de Supabase
useEffect(() => {
const fetchVentas = async () => {
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 ventasSemanales = [
{ semana: "Semana 1", boletos: 120 },
{ semana: "Semana 2", boletos: 150 },
{ semana: "Semana 3", boletos: 170 },
];
fetchVentas();
}, []);
const ventasMensuales = [
{ mes: "Enero", boletos: 500 },
{ mes: "Febrero", boletos: 650 },
{ mes: "Marzo", boletos: 700 },
];
// Función para filtrar las ventas según el rango de fechas
const filtrarVentas = () => {
const hoy = new Date();
let fechaInicio;
const [selectedTab, setSelectedTab] = useState("diario");
// Obtener datos según la pestaña activa
const getData = () => {
switch (selectedTab) {
switch (filtro) {
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
const totalBoletos = getData().reduce((acc, item) => acc + item.boletos, 0);
// Función para generar y descargar el PDF
// Función para generar el PDF
const generarPDF = async () => {
const pdf = new jsPDF();
pdf.setFontSize(18);
pdf.text("Reporte de Ventas", 10, 10);
pdf.setFontSize(14);
pdf.text(`Tipo de Reporte: ${selectedTab.toUpperCase()}`, 10, 20);
pdf.text(`Total de Boletos Vendidos: ${totalBoletos}`, 10, 30);
// 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`);
const input = document.getElementById("reporte");
const canvas = await html2canvas(input);
const imgData = canvas.toDataURL("image/png");
const pdf = new jsPDF("p", "mm", "a4");
pdf.addImage(imgData, "PNG", 10, 10, 190, 0);
pdf.save("Reporte_Ventas.pdf");
};
// Datos filtrados según el filtro seleccionado
const ventasFiltradas = filtrarVentas();
return (
<div className="w-full max-w-3xl mx-auto p-4">
<h2 className="text-2xl font-bold mb-4">Reporte de Ventas</h2>
<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>
<div>
<h1>Reporte de Ventas</h1>
<Card>
<CardHeader>
<CardTitle>
Total de Boletos Vendidos: <span className="text-blue-600">{totalBoletos}</span>
</CardTitle>
</CardHeader>
<CardContent ref={chartRef}>
<ResponsiveContainer width="100%" height={300}>
<BarChart data={getData()}>
<XAxis dataKey={selectedTab === "diario" ? "fecha" : selectedTab === "semanal" ? "semana" : "mes"} />
<YAxis />
<Tooltip />
<Bar dataKey="boletos" fill="#3b82f6" />
</BarChart>
</ResponsiveContainer>
</CardContent>
</Card>
{/* Botón para generar PDF */}
<button onClick={generarPDF}>Descargar PDF</button>
{/* Filtros de fechas */}
<div>
<button onClick={() => setFiltro("diario")}>Diario</button>
<button onClick={() => setFiltro("semanal")}>Semanal</button>
<button onClick={() => setFiltro("mensual")}>Mensual</button>
</div>
<Tabs>
<TabList>
<Tab>Tabla</Tab>
<Tab>Gráfico de Ventas</Tab>
</TabList>
{/* 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;
}

View File

@ -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 {
const { data, error } = await supabaseClient
.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 });
if (!boletos || boletos.length === 0) {
return res.status(400).json({ error: "No hay boletos para procesar" });
}
} 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 });
}
}
}