Merge branch 'benito' of https://git.gumoio.com/benito.rodriguez/Venta.De.Boletos.De.Un.Concierto into rvg-frontend

ventaboletos/src/components/vistas/Informacion.jsx

@@ -70,13 +70,27 @@ function Informacion() {
     setOpen(true);
   };
 
-  const handleCategoriaChange = (categoria) => {
-    setSelectedCategoria(categoria);
-  };
+  const handleAgregarAlCarrito = () => {
+    if (!selectedConcierto || !asientoSeleccionado) {
+      alert("Selecciona un tipo de asiento antes de continuar.");
+      return;
+    }
 
-  const filteredAsientos = numeroAsiento
-    .filter((asiento) => asiento.categoria === selectedCategoria)
-    .sort((a, b) => a.numero_asiento - b.numero_asiento);
+    // Obtener carrito actual desde localStorage
+    const carritoActual = JSON.parse(localStorage.getItem("carrito")) || [];
+
+    // Agregar el concierto con el tipo de asiento seleccionado
+    const nuevoCarrito = [
+      ...carritoActual,
+      { ...selectedConcierto, asiento: asientoSeleccionado },
+    ];
+
+    // Guardar en localStorage
+    localStorage.setItem("carrito", JSON.stringify(nuevoCarrito));
+
+    // Cerrar el modal
+    setOpen(false);
+  };
 
   return (
     <>
@@ -97,6 +111,7 @@ function Informacion() {
           </div>
         ))}
       </div>
+
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent>
           <DialogHeader>
@@ -138,7 +153,7 @@ function Informacion() {
             <Button variant="outline" onClick={() => setOpen(false)}>
               Cancelar
             </Button>
-            <Button>Aceptar</Button>
+            <Button onClick={handleAgregarAlCarrito}>Aceptar</Button>
           </div>
         </DialogContent>
       </Dialog>

ventaboletos/src/pages/carrito.jsx

@@ -1,7 +1,87 @@
-import React from 'react'
+import { useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 
 export default function Carrito() {
+  const [carrito, setCarrito] = useState([]);
+  const [showDialog, setShowDialog] = useState(false);
+  const [conciertoAEliminar, setConciertoAEliminar] = useState(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    const carritoGuardado = JSON.parse(localStorage.getItem("carrito")) || [];
+    setCarrito(carritoGuardado);
+  }, []);
+
+  const eliminarConcierto = () => {
+    if (conciertoAEliminar !== null) {
+      const nuevoCarrito = carrito.filter((_, index) => index !== conciertoAEliminar);
+      localStorage.setItem("carrito", JSON.stringify(nuevoCarrito));
+      setCarrito(nuevoCarrito);
+      setShowDialog(false);
+    }
+  };
+
+  const calcularTotal = () => {
+    return carrito.reduce((total, item) => total + (item.precio || 0), 0);
+  };
+
   return (
-    <div>carrito</div>
-  )
+    <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>
+      {carrito.length === 0 ? (
+        <p className="text-gray-400">No hay conciertos en el carrito.</p>
+      ) : (
+        carrito.map((item, index) => (
+          <div key={index} className="border p-4 mb-2 rounded-lg bg-gray-800">
+            <p className="text-lg font-semibold text-white">{item.nombre}</p>
+            <p className="text-sm text-gray-300">Fecha: {item.fecha}</p>
+            <p className="text-sm text-gray-300">Asiento: {item.asiento}</p>
+            <p className="text-sm text-gray-300">Precio: ${item.precio}</p>
+            <Button
+              className="mt-2 bg-red-500 hover:bg-red-600"
+              onClick={() => {
+                setConciertoAEliminar(index);
+                setShowDialog(true);
+              }}
+            >
+              Eliminar
+            </Button>
+          </div>
+        ))
+      )}
+
+      {carrito.length > 0 && (
+        <>
+          <p className="text-xl font-bold text-white mt-4">Total: ${calcularTotal()}</p>
+          <div className="flex justify-between mt-4">
+            <Button
+              className="bg-gray-500 hover:bg-gray-600"
+              onClick={() => router.push("/")} 
+            >
+              Cancelar
+            </Button>
+            <Button className="bg-green-500 hover:bg-green-600">Pagar</Button>
+          </div>
+        </>
+      )}
+
+      <Dialog open={showDialog} onOpenChange={setShowDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>¿Estás seguro de eliminar este concierto?</DialogTitle>
+          </DialogHeader>
+          <div className="flex justify-end gap-2 mt-4">
+            <Button variant="outline" onClick={() => setShowDialog(false)}>
+              Cancelar
+            </Button>
+            <Button className="bg-red-500 hover:bg-red-600" onClick={eliminarConcierto}>
+              Eliminar
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
 }