Componente Reporte

ventaboletos/src/components/reportes/Reporte.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+
+function Reporte() {
+  return (
+    <div className="w-full max-w-2xl mx-auto p-4">
+      <h2 className="text-xl font-semibold mb-4">Reporte de Ventas</h2>
+      <Tabs defaultValue="diario" className="w-full">
+        <TabsList className="flex space-x-2">
+          <TabsTrigger value="diario">Diario</TabsTrigger>
+          <TabsTrigger value="semanal">Semanal</TabsTrigger>
+          <TabsTrigger value="mensual">Mensual</TabsTrigger>
+        </TabsList>
+        <TabsContent value="diario">
+          <div className="p-4 border rounded-md">Reporte Diario: Aquí se mostrarán los boletos vendidos por día.</div>
+        </TabsContent>
+        <TabsContent value="semanal">
+          <div className="p-4 border rounded-md">Reporte Semanal: Aquí se mostrarán los boletos vendidos por semana.</div>
+        </TabsContent>
+        <TabsContent value="mensual">
+          <div className="p-4 border rounded-md">Reporte Mensual: Aquí se mostrarán los boletos vendidos por mes.</div>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
+
+export default Reporte;

ventaboletos/src/pages/index.js

@@ -1,21 +1,50 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { supabaseClient } from "@/utils/supabase";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
-const concerts = [
+/*const concerts = [
   { id: 1, name: "Concierto Fake", location: "Arena Xalapa" },
   { id: 2, name: "Concierto Fake", location: "Arena Xalapa" },
   { id: 3, name: "Concierto Fake", location: "Arena Xalapa" },
-];
+];*/
 
 export default function ConcertList() {
   const [open, setOpen] = useState(false);
-  const [selectedConcert, setSelectedConcert] = useState(null);
+  const [conciertos, setConciertos] = useState([]);
+  const [selectedConcierto, setSelectedConcierto] = useState(null);
   const [seatType, setSeatType] = useState("");
 
-  const handleSelect = (concert) => {
-    setSelectedConcert(concert);
+  useEffect(() => {
+    fetchConciertos();
+  }, []);
+
+  const fetchConciertos = async () => {
+    let { data: conciertos, error } = await supabaseClient
+      .from("conciertos")
+      .select("*");
+    if (error) {
+      console.error(error);
+    } else {
+      setConciertos(conciertos);
+      console.log(conciertos);
+    }
+  };
+
+  const handleSelect = (concierto) => {
+    setSelectedConcierto(concierto);
     setOpen(true);
   };
 
@@ -27,14 +56,17 @@ export default function ConcertList() {
         <Button variant="outline">Reportes</Button>
       </div>
       <div className="space-y-4">
-        {concerts.map((concert) => (
-          <div key={concert.id} className="flex items-center gap-4 p-4 border rounded-lg">
+        {conciertos.map((concierto) => (
+          <div
+            key={concierto.id}
+            className="flex items-center gap-4 p-4 border rounded-lg"
+          >
             <div className="w-16 h-16 bg-gray-300" />
             <div>
-              <p className="text-lg font-semibold">{concert.name}</p>
-              <p className="text-sm text-gray-600">{concert.location}</p>
+              <p className="text-lg font-semibold">{concierto.nombre}</p>
+              <p className="text-sm text-gray-600">{concierto.fecha}</p>
             </div>
-            <Button className="ml-auto" onClick={() => handleSelect(concert)}>
+            <Button className="ml-auto" onClick={() => handleSelect(concierto)}>
               Seleccionar
             </Button>
           </div>
@@ -43,8 +75,10 @@ export default function ConcertList() {
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent>
           <DialogHeader>
-            <DialogTitle>{selectedConcert?.name}</DialogTitle>
-            <p className="text-sm text-gray-600">{selectedConcert?.location}</p>
+            <DialogTitle>{selectedConcierto?.name}</DialogTitle>
+            <p className="text-sm text-gray-600">
+              {selectedConcierto?.location}
+            </p>
           </DialogHeader>
           <div className="space-y-4">
             <Select onValueChange={setSeatType}>
@@ -58,7 +92,9 @@ export default function ConcertList() {
             </Select>
           </div>
           <div className="flex justify-end gap-2 mt-4">
-            <Button variant="outline" onClick={() => setOpen(false)}>Cancelar</Button>
+            <Button variant="outline" onClick={() => setOpen(false)}>
+              Cancelar
+            </Button>
             <Button> Aceptar</Button>
           </div>
         </DialogContent>