Add concert images and implement seat pricing in Informacion component

ventaboletos/src/components/vistas/Informacion.jsx

@@ -14,21 +14,34 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label"; // Import Label component
 
 function Informacion() {
   const [open, setOpen] = useState(false);
   const [conciertos, setConciertos] = useState([]);
+  const [filteredConciertos, setFilteredConciertos] = useState([]);
   const [selectedConcierto, setSelectedConcierto] = useState(null);
   const [tipoAsiento, setTipoAsiento] = useState([]);
   const [numeroAsiento, setNumeroAsiento] = useState([]);
   const [selectedCategoria, setSelectedCategoria] = useState("");
   const [asientoSeleccionado, setAsientoSeleccionado] = useState("");
+  const [searchTerm, setSearchTerm] = useState("");
+  const [precioAsiento, setPrecioAsiento] = useState(null); // Add state for seat price
 
   useEffect(() => {
     fetchConciertos();
     fetchAsientos();
   }, []);
 
+  useEffect(() => {
+    setFilteredConciertos(
+      conciertos.filter((concierto) =>
+        concierto.nombre.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    );
+  }, [searchTerm, conciertos]);
+
   const fetchConciertos = async () => {
     let { data, error } = await supabaseClient.from("conciertos").select("*");
     if (error) {
@@ -39,11 +52,15 @@ function Informacion() {
   };
 
   const fetchAsientos = async () => {
-    let { data, error } = await supabaseClient.from("asientos").select("numero_asiento, categoria");
+    let { data, error } = await supabaseClient
+      .from("asientos")
+      .select("numero_asiento, categoria, precio"); // Include price in the select
     if (error) {
       console.error(error);
     } else {
-      const uniqueCategories = [...new Set(data.map((asiento) => asiento.categoria))];
+      const uniqueCategories = [
+        ...new Set(data.map((asiento) => asiento.categoria)),
+      ];
       setTipoAsiento(uniqueCategories);
       setNumeroAsiento(data);
     }
@@ -57,6 +74,15 @@ function Informacion() {
   const handleCategoriaChange = (categoria) => {
     setSelectedCategoria(categoria);
     setAsientoSeleccionado("");
+    setPrecioAsiento(null); // Reset price when category changes
+  };
+
+  const handleAsientoChange = (asiento) => {
+    setAsientoSeleccionado(asiento);
+    const selectedAsiento = numeroAsiento.find(
+      (item) => item.numero_asiento === asiento
+    );
+    setPrecioAsiento(selectedAsiento?.precio || null); // Set the price of the selected seat
   };
 
   const handleAgregarAlCarrito = () => {
@@ -64,13 +90,13 @@ function Informacion() {
       alert("Selecciona un tipo de asiento antes de continuar.");
       return;
     }
-
+  
     const carritoActual = JSON.parse(localStorage.getItem("carrito")) || [];
     const nuevoCarrito = [
       ...carritoActual,
-      { ...selectedConcierto, asiento: asientoSeleccionado },
+      { ...selectedConcierto, asiento: asientoSeleccionado, precio: precioAsiento },
     ];
-
+  
     localStorage.setItem("carrito", JSON.stringify(nuevoCarrito));
     setOpen(false);
   };
@@ -82,9 +108,27 @@ function Informacion() {
   return (
     <>
       <div className="space-y-4">
-        {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 className="w-full flex items-end">
+          <div className="flex">
+            <Input
+              placeholder="Búsqueda por nombre"
+              className="w-60"
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+            <img src="/search.jpg" alt="search" className="h-7 w-7" />
+          </div>
+        </div>
+        {filteredConciertos.map((concierto) => (
+          <div
+            key={concierto.id}
+            className="flex items-center gap-4 p-4 border rounded-lg"
+          > 
+            <img
+              src={`/images/${concierto.imagen || "default.jpeg"}`}
+              alt={concierto.nombre}
+              className="w-24 h-24 rounded-lg object-cover"
+            />
             <div>
               <p className="text-lg font-semibold">{concierto.nombre}</p>
               <p className="text-sm text-gray-600">{concierto.fecha}</p>
@@ -117,19 +161,27 @@ function Informacion() {
             </Select>
           </div>
           <div className="space-y-4">
-            <Select onValueChange={setAsientoSeleccionado}>
+            <Select onValueChange={handleAsientoChange}>
               <SelectTrigger>
                 <SelectValue placeholder="Selecciona un asiento" />
               </SelectTrigger>
               <SelectContent>
                 {filteredAsientos.map((asiento) => (
-                  <SelectItem key={asiento.numero_asiento} value={asiento.numero_asiento}>
+                  <SelectItem
+                    key={asiento.numero_asiento}
+                    value={asiento.numero_asiento}
+                  >
                     {asiento.numero_asiento}
                   </SelectItem>
                 ))}
               </SelectContent>
             </Select>
           </div>
+          <div>
+            <Label>
+              {precioAsiento !== null ? `Precio: $${precioAsiento}` : "Selecciona un asiento para ver el precio"}
+            </Label>
+          </div>
           <div className="flex justify-end gap-2 mt-4">
             <Button variant="outline" onClick={() => setOpen(false)}>
               Cancelar

ventaboletos/src/pages/carrito.jsx

@@ -3,12 +3,6 @@ import { useRouter } from "next/router";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 
-const PRECIOS_BOLETO = {
-  VIP: 100,
-  Intermedio: 75,
-  General: 25,
-};
-
 export default function Carrito() {
   const [carrito, setCarrito] = useState([]);
   const [showDialog, setShowDialog] = useState(false);
@@ -17,12 +11,7 @@ export default function Carrito() {
 
   useEffect(() => {
     const carritoGuardado = JSON.parse(localStorage.getItem("carrito")) || [];
-    // Asigna el precio basado en el tipo de boleto si no tiene un precio definido
-    const carritoConPrecios = carritoGuardado.map(item => ({
-      ...item,
-      precio: PRECIOS_BOLETO[item.tipoBoleto] || 0,
-    }));
-    setCarrito(carritoConPrecios);
+    setCarrito(carritoGuardado);
   }, []);
 
   const eliminarConcierto = () => {
@@ -38,6 +27,30 @@ export default function Carrito() {
     return carrito.reduce((total, item) => total + (item.precio || 0), 0);
   };
 
+  const pagar = async () => {
+    try {
+      const response = await fetch("/api/comprar-boletos", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ boletos: carrito }),
+      });
+
+      if (!response.ok) {
+        throw new Error("Error al procesar el pago");
+      }
+
+      alert("Compra realizada con éxito");
+      localStorage.removeItem("carrito");
+      setCarrito([]);
+      router.push("/");
+    } catch (error) {
+      console.error("Error en la compra:", error);
+      alert("Hubo un problema al realizar la compra");
+    }
+  };
+
   return (
     <div className="p-4 max-w-3xl mx-auto bg-gray-900 text-white rounded-lg shadow-lg">
       <h2 className="text-2xl font-bold mb-4">Carrito de Compras</h2>
@@ -73,7 +86,7 @@ export default function Carrito() {
             >
               Cancelar
             </Button>
-            <Button className="bg-green-500 hover:bg-green-600">Pagar</Button>
+            <Button className="bg-green-500 hover:bg-green-600" onClick={pagar}>Pagar</Button>
           </div>
         </>
       )}
@@ -95,4 +108,4 @@ export default function Carrito() {
       </Dialog>
     </div>
   );
-}
+}

ventaboletos/src/pages/index.js

@@ -19,13 +19,13 @@ export default function ConcertList() {
       <div className="flex flex-col items-center w-[80%]">
         <Tabs defaultValue="account" className="w-full">
           <div className="w-full flex">
-          <TabsList className="grid w-full grid-cols-2">
-            <TabsTrigger value="info">Información</TabsTrigger>
-            <TabsTrigger value="reportes">Reportes</TabsTrigger>
-          </TabsList>
-          <Link href="/carrito">
-          <img src="/carrito.svg" alt="carrito" className="h-10 w-10"/>
-          </Link>
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="info">Información</TabsTrigger>
+              <TabsTrigger value="reportes">Reportes</TabsTrigger>
+            </TabsList>
+            <Link href="/carrito">
+              <img src="/carrito.svg" alt="carrito" className="h-10 w-10" />
+            </Link>
           </div>
           <TabsContent value="info">
             <Card>
@@ -34,12 +34,6 @@ export default function ConcertList() {
                 <CardDescription></CardDescription>
               </CardHeader>
               <CardContent className="space-y-2">
-                <div className="w-full flex items-end">
-                  <div className="flex">
-                  <Input placeholder="Búsqueda por nombre" className="w-60"></Input>
-                  <img src="/search.jpg" alt="search" className="h-7 w-7"/>
-                  </div>
-                </div>
                 <Informacion />
               </CardContent>
               <CardFooter></CardFooter>