From 239e345dc18306047222311b3f579833c87ed3fa Mon Sep 17 00:00:00 2001
From: DiegoAndresMejia <diegomejiasobsu@gmail.com>
Date: Sat, 7 Dec 2024 23:29:09 -0500
Subject: [PATCH 1/6] fix: fix the height in the testimonial section to the
 dashboard page, and delete the last chance raffles section

---
 resources/js/Components/Dashboard/UserTestimonials.vue | 3 ++-
 resources/js/Pages/Dashboard.vue                       | 2 --
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/resources/js/Components/Dashboard/UserTestimonials.vue b/resources/js/Components/Dashboard/UserTestimonials.vue
index 0ee6411..a3028db 100644
--- a/resources/js/Components/Dashboard/UserTestimonials.vue
+++ b/resources/js/Components/Dashboard/UserTestimonials.vue
@@ -92,7 +92,7 @@
   
   <style scoped>
   .testimonials-section {
-    padding: 3rem;
+    padding: 5rem;
     min-height: 300px; /* Incrementamos la altura mínima para evitar mezcla con los controles */
     border-radius: 12px;
     transition: background-color 0.3s ease-in-out;
@@ -100,6 +100,7 @@
   
   .testimonials-slider {
     overflow: hidden;
+    height: 15rem;
   }
   
   .testimonial-slide {
diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue
index 1b0f5fb..f921e0c 100644
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -9,7 +9,6 @@
         >
           <HeroBanner />
           <ActiveRaffles />
-          <LastChanceRaffles />
           <UserTestimonials />
           <OrganizerRegisterSection />
           <Footer  />
@@ -23,7 +22,6 @@
 import Navbar from '../Components/Dashboard/NavBar.vue';
 import HeroBanner from '../Components/Dashboard/HeroBanner.vue';
 import ActiveRaffles from '../Components/Dashboard/ActiveRaffles.vue';
-import LastChanceRaffles from '../Components/Dashboard/LastChanceRaffles.vue';
 import { useDarkMode } from '@/composables/useDarkMode';
 import { computed } from 'vue';
 import UserTestimonials from '@/Components/Dashboard/UserTestimonials.vue';

From 815e20ab38f0d59316c0b79f5c2789bbc88cae5d Mon Sep 17 00:00:00 2001
From: DiegoAndresMejia <diegomejiasobsu@gmail.com>
Date: Sun, 8 Dec 2024 00:24:21 -0500
Subject: [PATCH 2/6] fix: modify the navbar to delete an unnecessaries links
 and add news styles

---
 resources/css/app.css                         |   4 -
 resources/js/Components/Dashboard/NavBar.vue  | 185 +++++++-----------
 .../js/Components/Dashboard/RaffleCard.vue    | 121 ++----------
 resources/js/Pages/ActiveRaffles.vue          |  12 +-
 routes/web.php                                |   2 +-
 5 files changed, 93 insertions(+), 231 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 0de2120..b5c61c9 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -1,7 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-[x-cloak] {
-    display: none;
-}
diff --git a/resources/js/Components/Dashboard/NavBar.vue b/resources/js/Components/Dashboard/NavBar.vue
index 78654f6..b3c65bb 100644
--- a/resources/js/Components/Dashboard/NavBar.vue
+++ b/resources/js/Components/Dashboard/NavBar.vue
@@ -1,69 +1,41 @@
 <template>
-  <header :style="{ background: theme.gradient }" class="navbar p-4 border-b">
+  <header :class="['navbar p-4 border-b', theme.backgroundGradient]">
     <div class="container mx-auto flex justify-between items-center">
-      <!-- Logo -->
       <div class="flex items-center gap-4">
         <img :src="isDarkMode ? '/assets/media/auth/Logo-Gananza1.svg' : '/assets/media/auth/Logo-Gananza2.svg'"
-          alt="Logo Gananza" class="h-8 logo" />
+          alt="Logo Gananza" class="h-12 logo" />
       </div>
-
-      <!-- Menú Hamburguesa para móvil -->
-      <button class="menu-toggle md:hidden btn-icon glow-effect" @click="toggleMenu">
-        <img :src="isDarkMode ? '/assets/media/gananza/bars-light.svg' : '/assets/media/gananza/bars-dark.svg'"
-          alt="Menú" class="icon-img" />
-      </button>
-
-      <!-- Búsqueda -->
-      <div class="header-search hidden md:flex">
-        <form class="search-form">
-          <input type="text" class="search-input" placeholder="Buscar..."
-            :style="{ background: theme.cardBackground, color: theme.textPrimary, borderColor: theme.border }" />
-          <button type="submit" class="search-button">
-            <img :src="isDarkMode ? '/assets/media/gananza/search-light.svg' : '/assets/media/gananza/search-dark.svg'"
-              alt="Buscar" class="icon-img" />
-          </button>
-        </form>
-      </div>
-
-      <!-- Links de Navegación -->
-      <nav :class="['nav-links', { 'open': isMenuOpen }]"
-        :style="{ background: theme.navBackground, boxShadow: theme.navShadow }">
-        <!-- Botón para cerrar el menú -->
-        <button class="close-btn" @click="toggleMenu" :style="{ color: theme.textPrimary }">✖</button>
-        <h3 class="menu-title" :style="{ color: theme.textPrimary }">Navegación</h3>
-        <a href="/profile" class="nav-link" :style="{ color: theme.textPrimary, borderColor: theme.border }">Profile</a>
-        <a href="/admin" class="nav-link" :style="{ color: theme.textPrimary, borderColor: theme.border }">Panel de
-          Administrador</a>
-        <a href="/settings" class="nav-link"
-          :style="{ color: theme.textPrimary, borderColor: theme.border }">Settings</a>
-        <a href="/raffles" class="nav-link" :style="{ color: theme.textPrimary, borderColor: theme.border }">Rifas</a>
-        <a href="/points" class="nav-link" :style="{ color: theme.textPrimary, borderColor: theme.border }">Puntos</a>
-        <a @click.prevent="logout" class="nav-link logout-link"
-          :style="{ color: theme.textPrimary, borderColor: theme.border, cursor: 'pointer', zIndex: 1000 }">
-          Logout
-        </a>
-      </nav>
-      <!-- Iconos y Botones -->
       <div class="flex items-center gap-3">
         <button @click="toggleDarkMode" class="btn-icon glow-effect" :style="{ background: theme.cardBackground }">
           <Sun v-if="isDarkMode" :size="20" :color="theme.emphasis" />
           <Moon v-else :size="20" :color="theme.primary" />
         </button>
-
-        <button class="btn-icon glow-effect">
-          <img
-            :src="isDarkMode ? '/assets/media/gananza/notification-light.svg' : '/assets/media/gananza/notification-dark.svg'"
-            alt="Notificaciones" class="icon-img" />
-        </button>
-
         <button class="btn-icon glow-effect">
           <a :href="`/profile/${authUser.id}`">
             <img :src="isDarkMode ? '/assets/media/gananza/user-light.svg' : '/assets/media/gananza/user-dark.svg'"
               alt="Perfil" class="icon-img" />
           </a>
         </button>
+        <button
+          @click="handleExploreRaffles"
+          :class="['hidden md:block font-semibold py-2 px-6 rounded-lg transition', theme.primaryButton]"
+        >
+          Organizar Rifas
+        </button>
+        <button class="menu-toggle btn-icon glow-effect" @click="toggleMenu">
+          <img :src="isDarkMode ? '/assets/media/gananza/bars-light.svg' : '/assets/media/gananza/bars-dark.svg'"
+            alt="Menú" class="icon-img" />
+        </button>
       </div>
     </div>
+    <nav :class="['nav-links', { 'open': isMenuOpen }]">
+      <button class="close-btn" @click="toggleMenu" :style="{ color: theme.textPrimary }">✖</button>
+      <h3 class="menu-title" :style="{ color: theme.textPrimary }">Navegación</h3>
+      <a href="/profile" class="nav-link" :style="{ color: theme.textPrimary, borderColor: theme.border }">Perfil</a>
+      <a @click.prevent="handleExploreRaffles" class="nav-link" :style="{ color: theme.textPrimary, borderColor: theme.border }">
+        Organizar Rifas
+      </a>
+    </nav>
   </header>
 </template>
 
@@ -74,7 +46,6 @@ import { router } from '@inertiajs/vue3';
 import { useDarkMode } from '@/composables/useDarkMode';
 import { usePage } from '@inertiajs/vue3';
 
-
 const authUser = computed(() => usePage().props.auth.user);
 
 const { isDarkMode, toggleDarkMode } = useDarkMode();
@@ -84,10 +55,22 @@ const toggleMenu = () => {
   isMenuOpen.value = !isMenuOpen.value;
 };
 
+const handleExploreRaffles = () => {
+  window.location.href = '/raffles/admin/rifas';
+};
+
 const theme = computed(() => ({
-  primary: isDarkMode.value ? '#42A5F5' : '#1565C0',
-  textPrimary: isDarkMode.value ? '#E0E0E0' : '#212121',
-  textSecondary: isDarkMode.value ? '#B0BEC5' : '#757575',
+  backgroundGradient: isDarkMode.value
+    ? 'bg-[#1a1a1c] shadow-lg'
+    : 'bg-[#F5F5F7] shadow-sm',
+  textPrimary: isDarkMode.value ? 'text-white' : 'text-gray-900',
+  textSecondary: isDarkMode.value ? 'text-gray-300' : 'text-gray-700',
+  primaryButton: isDarkMode.value
+    ? 'bg-blue-700 text-white hover:bg-blue-800'
+    : 'bg-blue-600 text-white hover:bg-blue-700',
+  secondaryButton: isDarkMode.value
+    ? 'bg-gray-800 text-blue-400 hover:bg-gray-700'
+    : 'bg-gray-100 text-blue-600 hover:bg-gray-200',
   cardBackground: isDarkMode.value ? '#242526' : '#FFFFFF',
   navBackground: isDarkMode.value ? '#1E1E1E' : '#FFFFFF',
   navShadow: isDarkMode.value ? '0 8px 20px rgba(0, 0, 0, 0.8)' : '0 8px 20px rgba(0, 191, 255, 0.2)',
@@ -97,7 +80,6 @@ const theme = computed(() => ({
 }));
 
 const logout = () => {
-  console.log("Logout clickeado"); // Verificar si el clic está funcionando
   router.post(route('logout'), {}, {
     onFinish: () => {
       window.location.href = '/login';
@@ -107,13 +89,14 @@ const logout = () => {
 </script>
 
 <style scoped>
-/* Navbar */
 .navbar {
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   z-index: 1001;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-/* Logo */
 .logo {
   transition: transform 0.2s;
 }
@@ -122,44 +105,20 @@ const logout = () => {
   transform: scale(1.05);
 }
 
-/* Búsqueda */
-.search-form {
-  position: relative;
-}
-
-.search-input {
-  width: 250px;
-  padding: 8px 12px;
-  border-radius: 20px;
-  border: 1px solid;
-  transition: all 0.3s;
-}
-
-.search-input:focus {
-  outline: none;
-  box-shadow: 0 0 10px rgba(0, 191, 255, 0.3);
-}
-
-.search-button {
-  position: absolute;
-  right: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-}
-
-/* Menú de Navegación */
 .nav-links {
   display: none;
   flex-direction: column;
   align-items: center;
-  gap: 1.5rem;
-  position: absolute;
-  top: 60px;
-  right: 10px;
+  justify-content: center;
+  gap: 2rem;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   padding: 20px;
-  border-radius: 15px;
-  width: 350px;
-  height: 600px;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(10px);
   transition: all 0.3s ease;
   z-index: 1002;
 }
@@ -169,15 +128,14 @@ const logout = () => {
   animation: slideIn 0.3s ease-out forwards;
 }
 
-/* Botón para cerrar el menú */
 .close-btn {
   align-self: flex-end;
-  font-size: 1.8rem;
+  font-size: 2rem;
   font-weight: bold;
   background: none;
   border: none;
   cursor: pointer;
-  margin-bottom: 15px;
+  margin-bottom: 20px;
   transition: transform 0.2s;
 }
 
@@ -185,45 +143,36 @@ const logout = () => {
   transform: scale(1.1) rotate(90deg);
 }
 
-/* Título del Menú */
 .menu-title {
-  font-size: 1.2rem;
+  font-size: 1.5rem;
   font-weight: bold;
   margin-bottom: 20px;
   text-align: center;
+  color: #fff;
 }
 
-/* Enlaces de Navegación */
 .nav-link {
   text-decoration: none;
-  font-size: 1.1rem;
-  padding: 10px 15px;
+  font-size: 1.2rem;
+  padding: 15px 20px;
   border-radius: 10px;
   border: 1px solid;
-  width: 100%;
+  width: 80%;
   text-align: center;
   transition: color 0.2s, background-color 0.3s, transform 0.2s;
+  color: #fff;
+  border-color: #fff;
 }
 
 .nav-link:hover {
   color: var(--emphasis);
-  background-color: rgba(0, 191, 255, 0.1);
+  background-color: rgba(255, 255, 255, 0.1);
   transform: scale(1.05);
 }
 
-/* Media Query para pantallas pequeñas */
 @media (max-width: 768px) {
   .nav-links {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
     padding: 40px 20px;
-    border-radius: 0;
-    justify-content: center;
-    align-items: center;
-    overflow-y: auto;
   }
 
   .close-btn {
@@ -236,9 +185,18 @@ const logout = () => {
     font-size: 1.3rem;
     padding: 20px;
   }
+
+  .menu-toggle {
+    display: block;
+  }
+}
+
+@media (min-width: 769px) {
+  .menu-toggle {
+    display: none;
+  }
 }
 
-/* Animaciones */
 @keyframes slideIn {
   from {
     opacity: 0;
@@ -251,12 +209,6 @@ const logout = () => {
   }
 }
 
-/* Menú Hamburguesa */
-.menu-toggle {
-  display: block;
-}
-
-/* Iconos */
 .icon-img {
   width: 24px;
   height: 24px;
@@ -267,7 +219,6 @@ const logout = () => {
   transform: rotate(10deg) scale(1.1);
 }
 
-/* Botones */
 .btn-icon {
   padding: 8px;
   border-radius: 50%;
@@ -287,4 +238,4 @@ const logout = () => {
   padding: 10px;
   text-decoration: none;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/resources/js/Components/Dashboard/RaffleCard.vue b/resources/js/Components/Dashboard/RaffleCard.vue
index aacf29c..fc2c6a0 100644
--- a/resources/js/Components/Dashboard/RaffleCard.vue
+++ b/resources/js/Components/Dashboard/RaffleCard.vue
@@ -1,19 +1,15 @@
 <template>
-  <!-- Main Container -->
   <div :class="['raffle-card shadow-lg rounded-lg p-4 flex flex-col items-center gap-4 mx-auto', theme.cardBackground]">
-    <!-- Raffle Image -->
     <img
       src="../../../../public/assets/media/auth/Letra-Gananza.svg"
       alt="Prize"
       class="h-32 w-32 object-cover rounded-lg mb-3"
     />
-    <!-- Raffle Title and Organizer -->
     <h3 :class="['text-lg font-semibold', theme.textPrimary]">{{ raffle.name }}</h3>
     <p :class="theme.textSecondary">Organizador: {{ raffle.organizer.name }}</p>
     <p :class="theme.textSecondary">
       Ticket de precios <span :class="theme.textHighlight">${{ raffle.ticket_price }}</span>
     </p>
-    <!-- Buy Button -->
     <button
       @click.prevent="openSelectionModal"
       :class="theme.buttonPrimary"
@@ -22,24 +18,10 @@
       Comprar
     </button>
 
-    <!-- Modal for Selecting Numbers -->
-    <TransitionRoot
-      appear
-      :show="showSelectionModal"
-      as="template"
-    >
-      <Dialog
-        as="div"
-        @close="closeSelectionModal"
-        class="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm"
-      >
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          leave="ease-in duration-200"
-        >
+    <TransitionRoot appear :show="showSelectionModal" as="template">
+      <Dialog as="div" @close="closeSelectionModal" class="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm">
+        <TransitionChild as="template" enter="ease-out duration-300" leave="ease-in duration-200">
           <DialogPanel :class="[theme.modalBackground, 'w-full max-w-3xl p-8 rounded-2xl shadow-2xl flex gap-8']">
-            <!-- Number Selection -->
             <div class="w-2/3 flex flex-col items-center gap-4">
               <div class="grid grid-cols-5 gap-4 mb-4">
                 <button
@@ -51,27 +33,16 @@
                   {{ number }}
                 </button>
               </div>
-              <!-- Pagination for Numbers -->
               <div class="flex justify-center items-center w-full">
-                <button
-                  @click="goToPreviousPage"
-                  :disabled="currentPage === 1"
-                  class="px-4 py-2 bg-gray-300 rounded-lg mx-2"
-                >
+                <button @click="goToPreviousPage" :disabled="currentPage === 1" class="px-4 py-2 bg-gray-300 rounded-lg mx-2">
                   Atras
                 </button>
                 <span :class="[theme.textPrimary]">Página {{ currentPage }} de {{ totalPages }}</span>
-                <button
-                  @click="goToNextPage"
-                  :disabled="currentPage === totalPages"
-                  class="px-4 py-2 bg-gray-300 rounded-lg mx-2"
-                >
+                <button @click="goToNextPage" :disabled="currentPage === totalPages" class="px-4 py-2 bg-gray-300 rounded-lg mx-2">
                   Siguiente
                 </button>
               </div>
             </div>
-
-            <!-- Invoice Section -->
             <div class="w-1/3 flex flex-col items-center justify-center bg-white p-4 rounded-lg shadow-lg">
               <h3 class="text-lg font-semibold mb-4">Factura</h3>
               <div class="w-full mb-4">
@@ -80,13 +51,9 @@
               </div>
               <div class="w-full mb-4">
                 <label class="text-gray-700">Numeros Seleccionados</label>
-                <div class="py-2 px-4 bg-gray-200 rounded-lg text-center">{{ selectedNumber.join(', ') || 'Ninguno' }}
-                </div>
+                <div class="py-2 px-4 bg-gray-200 rounded-lg text-center">{{ selectedNumber.join(', ') || 'Ninguno' }}</div>
               </div>
-              <button
-                @click="proceedToPaymentModal"
-                :class="[theme.buttonPrimary, 'px-4 py-2 rounded-lg']"
-              >
+              <button @click="proceedToPaymentModal" :class="[theme.buttonPrimary, 'px-4 py-2 rounded-lg']">
                 Comprar
               </button>
             </div>
@@ -95,30 +62,12 @@
       </Dialog>
     </TransitionRoot>
 
-    <!-- Modal for Invoice -->
-    <TransitionRoot
-      appear
-      :show="showModal"
-      as="template"
-    >
-      <Dialog
-        as="div"
-        @close="closeModal"
-        class="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm"
-      >
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          leave="ease-in duration-200"
-        >
+    <TransitionRoot appear :show="showModal" as="template">
+      <Dialog as="div" @close="closeModal" class="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm">
+        <TransitionChild as="template" enter="ease-out duration-300" leave="ease-in duration-200">
           <DialogPanel :class="[theme.modalBackground, 'w-full max-w-lg p-8 rounded-2xl shadow-2xl']">
             <div>
-              <!-- Invoice Table -->
-              <table
-                cellspacing="0"
-                cellpadding="10"
-                class="w-full text-left border-collapse"
-              >
+              <table cellspacing="0" cellpadding="10" class="w-full text-left border-collapse">
                 <thead>
                   <tr>
                     <th class="border-b-2 py-2">Nombre</th>
@@ -131,24 +80,16 @@
                     <td class="border-t py-2">{{ userName }}</td>
                     <td class="border-t py-2">{{ selectedNumber.join(', ') || 'None' }}</td>
                     <td class="border-t py-2">
-                      ${{ selectedNumber.length > 0 ? (raffle.ticket_price * selectedNumber.length).toFixed(2) : '0.00'
-                      }}
+                      ${{ selectedNumber.length > 0 ? (raffle.ticket_price * selectedNumber.length).toFixed(2) : '0.00' }}
                     </td>
                   </tr>
                 </tbody>
               </table>
             </div>
-            <!-- Payment and Close Buttons -->
-            <button
-              @click="openVerificationModal"
-              :class="[theme.buttonPrimary, 'px-4 py-2 rounded-lg mr-2']"
-            >
+            <button @click="openVerificationModal" :class="[theme.buttonPrimary, 'px-4 py-2 rounded-lg mr-2']">
               Ir a pagar
             </button>
-            <button
-              @click="closeModal"
-              :class="[theme.buttonDanger, 'px-4 py-2 rounded-lg']"
-            >
+            <button @click="closeModal" :class="[theme.buttonDanger, 'px-4 py-2 rounded-lg']">
               Cerrar
             </button>
           </DialogPanel>
@@ -156,29 +97,12 @@
       </Dialog>
     </TransitionRoot>
 
-    <!-- Payment Verification Modal -->
-    <TransitionRoot
-      appear
-      :show="showVerificationModal"
-      as="template"
-    >
-      <Dialog
-        as="div"
-        @close="closeVerificationModal"
-        class="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm"
-      >
-        <TransitionChild
-          as="template"
-          enter="ease-out duration-300"
-          leave="ease-in duration-200"
-        >
+    <TransitionRoot appear :show="showVerificationModal" as="template">
+      <Dialog as="div" @close="closeVerificationModal" class="fixed inset-0 z-50 flex items-center justify-center backdrop-blur-sm">
+        <TransitionChild as="template" enter="ease-out duration-300" leave="ease-in duration-200">
           <DialogPanel :class="[theme.modalBackground, 'w-full max-w-lg p-8 rounded-2xl shadow-2xl']">
             <h2>Aquí va la pasarela de pagos</h2>
-            <!-- Receipt Validation Form -->
-            <button
-              @click="closeVerificationModal"
-              :class="[theme.buttonDanger, 'px-4 py-2 rounded-lg mt-4']"
-            >
+            <button @click="closeVerificationModal" :class="[theme.buttonDanger, 'px-4 py-2 rounded-lg mt-4']">
               Cerrar
             </button>
           </DialogPanel>
@@ -189,13 +113,11 @@
 </template>
 
 <script setup>
-/* Imports and Setup */
 import { ref, computed } from 'vue';
 import { usePage } from '@inertiajs/vue3';
 import { useDarkMode } from '@/composables/useDarkMode';
 import { TransitionRoot, TransitionChild, Dialog, DialogPanel } from '@headlessui/vue';
 
-/* Props and Reactive Data */
 const raffleProps = defineProps({ raffle: Object });
 const showSelectionModal = ref(false);
 const showModal = ref(false);
@@ -205,12 +127,10 @@ const referenceNumber = ref('');
 const numbers = ref([]);
 const selectedNumber = ref([]);
 
-/* Pagination Variables */
 const currentPage = ref(1);
 const itemsPerPage = 15;
 const totalPages = computed(() => Math.ceil(totalTickets.value / itemsPerPage));
 
-/* User and Theme Settings */
 const user = usePage().props.auth?.user || null;
 const userName = ref(user ? user.name : 'Unauthenticated User');
 const { isDarkMode } = useDarkMode();
@@ -222,7 +142,6 @@ const theme = computed(() => ({
   buttonDanger: 'bg-red-500 text-white',
 }));
 
-/* Number Selection Logic */
 const initializeNumbers = () => {
   numbers.value = Array.from({ length: totalTickets.value }, (_, i) => i + 1);
 };
@@ -254,7 +173,6 @@ const handleNumberClick = (number) => {
   }
 };
 
-/* Modal Logic */
 const openSelectionModal = () => {
   initializeNumbers();
   showSelectionModal.value = true;
@@ -292,7 +210,6 @@ const closeVerificationModal = () => {
 </script>
 
 <style scoped>
-/* Button Styles */
 .number-button {
   transition: transform 0.2s, box-shadow 0.2s;
 }
@@ -320,4 +237,4 @@ const closeVerificationModal = () => {
 .number-button.selected {
   background-color: #2563eb;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/resources/js/Pages/ActiveRaffles.vue b/resources/js/Pages/ActiveRaffles.vue
index 5e3032d..98a7ce5 100644
--- a/resources/js/Pages/ActiveRaffles.vue
+++ b/resources/js/Pages/ActiveRaffles.vue
@@ -38,15 +38,15 @@
                 @click="fetchRaffles(section.filter)">
                 <div class="flex flex-col items-center">
                     <div v-if="section.title === 'Rifas Populares'" class="mb-6">
-                        <img src="../../../public/assets/media/auth/custom-filter.webp" alt="custom-image"
+                        <img src="/assets/media/auth/custom-filter.webp" alt="custom-image"
                             class="w-48 h-48 object-cover rounded-lg">
                     </div>
                     <div v-else-if="section.title === 'Rifas Recientes'" class="mb-6">
-                        <img src="../../../public/assets/media/auth/cash-salary.webp" alt="cash-image"
+                        <img src="/assets/media/auth/cash-salary.webp" alt="cash-image"
                             class="w-48 h-48 object-cover rounded-lg">
                     </div>
                     <div v-else class="mb-6">
-                        <img src="../../../public/assets/media/auth/business-research.webp" alt="business-image"
+                        <img src="/assets/media/auth/business-research.webp" alt="business-image"
                             class="w-48 h-48 object-cover rounded-lg">
                     </div>
                     <h3 :style="{ color: theme.textPrimary }" class="text-2xl font-semibold mb-2">{{ section.title }}
@@ -116,7 +116,7 @@
 
                         <!-- Slider de rifas con Splide -->
                         <Splide :options="splideOptions" class="splide-slider">
-                            <SplideSlide v-for="raffle in raffles" :key="raffle.id" class="raffle-slide">
+                            <SplideSlide v-for="raffle in raffles" :key="raffle.id" class="raffle-slide" :style="{ color: theme.textPrimary }">
                                 <RaffleCard :raffle="raffle" />
                             </SplideSlide>
                         </Splide>
@@ -165,8 +165,6 @@ const sections = [
     { title: 'Última Oportunidad', description: 'Rifas por cerrar.', filter: 'last_chance' },
 ];
 
-
-
 const splideOptions = {
     type: 'loop',
     perPage: 2,
@@ -195,7 +193,7 @@ const applyManualFilter = async () => {
     loading.value = true;
     raffles.value = [];
     try {
-        const response = await axios.get(`/raffles-filtered?filter=${selectedFilter.value}&date=${selectedDate.value}`);
+        const response = await axios.get(`/raffles-filtered?filter=${selectedFilter}&date=${selectedDate}`);
         raffles.value = response.data.data;
         isModalOpen.value = true;
     } catch (error) {
diff --git a/routes/web.php b/routes/web.php
index 9af8533..12830fc 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -52,7 +52,7 @@
 Route::middleware(['auth', 'role:admin'])->group(function () {
     Route::get('/users', [UserController::class, 'index'])->name('users.index');
     Route::get('/users/create', [UserController::class, 'create'])->name('users.create');
-    Route::get('/users/{user}/edit', [UserController::class, 'edit'])->name('users.edit');
+    Route::get('/users/{user}/edit', [UserController::class, 'edit']    )->name('users.edit');
     Route::put('/users/{user}', [UserController::class, 'update'])->name('users.update');
     Route::delete('/users/{user}', [UserController::class, 'destroy'])->name('users.destroy');
 });

From feef6d63803d1431d0394a609f40b41353667313 Mon Sep 17 00:00:00 2001
From: DiegoAndresMejia <diegomejiasobsu@gmail.com>
Date: Sun, 8 Dec 2024 00:49:34 -0500
Subject: [PATCH 3/6] add: create the button to access to the admin panel, and
 add conditionals with the user role

---
 app/Http/Controllers/UserController.php       |  2 +
 app/Http/Middleware/HandleInertiaRequests.php |  1 +
 resources/js/Components/Dashboard/NavBar.vue  | 44 ++++++++++++++-----
 3 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php
index 827b637..78e91f1 100644
--- a/app/Http/Controllers/UserController.php
+++ b/app/Http/Controllers/UserController.php
@@ -100,6 +100,8 @@ public function update(Request $request, User $user)
         ]);
     }
     
+    
+
 
     /**
      * Remove the specified resource from storage.
diff --git a/app/Http/Middleware/HandleInertiaRequests.php b/app/Http/Middleware/HandleInertiaRequests.php
index 2c56cff..c9ffb0a 100644
--- a/app/Http/Middleware/HandleInertiaRequests.php
+++ b/app/Http/Middleware/HandleInertiaRequests.php
@@ -42,6 +42,7 @@ public function share(Request $request): array
                     'id' => $request->user()->id,
                     'name' => $request->user()->name,
                     'email' => $request->user()->email,
+                    'roles' => $request->user()->roles->pluck('name'), // Incluye los roles del usuario
                 ] : null,
             ],
         ]);
diff --git a/resources/js/Components/Dashboard/NavBar.vue b/resources/js/Components/Dashboard/NavBar.vue
index b3c65bb..3109e7d 100644
--- a/resources/js/Components/Dashboard/NavBar.vue
+++ b/resources/js/Components/Dashboard/NavBar.vue
@@ -5,7 +5,7 @@
         <img :src="isDarkMode ? '/assets/media/auth/Logo-Gananza1.svg' : '/assets/media/auth/Logo-Gananza2.svg'"
           alt="Logo Gananza" class="h-12 logo" />
       </div>
-      <div class="flex items-center gap-3">
+      <div class="flex items-center gap-2">
         <button @click="toggleDarkMode" class="btn-icon glow-effect" :style="{ background: theme.cardBackground }">
           <Sun v-if="isDarkMode" :size="20" :color="theme.emphasis" />
           <Moon v-else :size="20" :color="theme.primary" />
@@ -18,10 +18,19 @@
         </button>
         <button
           @click="handleExploreRaffles"
-          :class="['hidden md:block font-semibold py-2 px-6 rounded-lg transition', theme.primaryButton]"
+          :class="['hidden md:block font-semibold py-2 px-4 rounded-lg transition', theme.primaryButton]"
         >
           Organizar Rifas
         </button>
+        <button v-if="isAdmin"
+          @click="handleAdminPanel"
+          :class="['hidden md:block font-semibold py-2 px-4 rounded-lg transition', theme.secondaryButton]"
+        >
+          Panel de Administrador
+        </button>
+        <button @click="logout" :class="['hidden md:block font-semibold py-2 px-4 rounded-lg transition', theme.secondaryButton]">
+          Logout
+        </button>
         <button class="menu-toggle btn-icon glow-effect" @click="toggleMenu">
           <img :src="isDarkMode ? '/assets/media/gananza/bars-light.svg' : '/assets/media/gananza/bars-dark.svg'"
             alt="Menú" class="icon-img" />
@@ -35,6 +44,12 @@
       <a @click.prevent="handleExploreRaffles" class="nav-link" :style="{ color: theme.textPrimary, borderColor: theme.border }">
         Organizar Rifas
       </a>
+      <a v-if="isAdmin" @click.prevent="handleAdminPanel" class="nav-link" :style="{ color: theme.textPrimary, borderColor: theme.border }">
+        Panel de Administrador
+      </a>
+      <a @click.prevent="logout" class="nav-link" :style="{ color: theme.textPrimary, borderColor: theme.border }">
+        Logout
+      </a>
     </nav>
   </header>
 </template>
@@ -47,6 +62,7 @@ import { useDarkMode } from '@/composables/useDarkMode';
 import { usePage } from '@inertiajs/vue3';
 
 const authUser = computed(() => usePage().props.auth.user);
+const isAdmin = computed(() => authUser.value.roles && authUser.value.roles.includes('admin'));
 
 const { isDarkMode, toggleDarkMode } = useDarkMode();
 const isMenuOpen = ref(false);
@@ -59,6 +75,18 @@ const handleExploreRaffles = () => {
   window.location.href = '/raffles/admin/rifas';
 };
 
+const handleAdminPanel = () => {
+  window.location.href = '/admin';
+};
+
+const logout = () => {
+  router.post(route('logout'), {}, {
+    onFinish: () => {
+      window.location.href = '/login';
+    },
+  });
+};
+
 const theme = computed(() => ({
   backgroundGradient: isDarkMode.value
     ? 'bg-[#1a1a1c] shadow-lg'
@@ -69,8 +97,8 @@ const theme = computed(() => ({
     ? 'bg-blue-700 text-white hover:bg-blue-800'
     : 'bg-blue-600 text-white hover:bg-blue-700',
   secondaryButton: isDarkMode.value
-    ? 'bg-gray-800 text-blue-400 hover:bg-gray-700'
-    : 'bg-gray-100 text-blue-600 hover:bg-gray-200',
+    ? 'bg-red-700 text-white hover:bg-red-800'
+    : 'bg-red-600 text-white hover:bg-red-700',
   cardBackground: isDarkMode.value ? '#242526' : '#FFFFFF',
   navBackground: isDarkMode.value ? '#1E1E1E' : '#FFFFFF',
   navShadow: isDarkMode.value ? '0 8px 20px rgba(0, 0, 0, 0.8)' : '0 8px 20px rgba(0, 191, 255, 0.2)',
@@ -78,14 +106,6 @@ const theme = computed(() => ({
   gradient: isDarkMode.value ? 'linear-gradient(135deg, #1E1E1E 0%, #2A2A2A 100%)' : 'linear-gradient(135deg, #FFFFFF 0%, #F5F5F5 100%)',
   emphasis: isDarkMode.value ? '#FFCA28' : '#FFC107',
 }));
-
-const logout = () => {
-  router.post(route('logout'), {}, {
-    onFinish: () => {
-      window.location.href = '/login';
-    },
-  });
-};
 </script>
 
 <style scoped>

From 15a6492e72f73f7360cf89d9fa043fbcc5934e59 Mon Sep 17 00:00:00 2001
From: DiegoAndresMejia <diegomejiasobsu@gmail.com>
Date: Sun, 8 Dec 2024 01:23:41 -0500
Subject: [PATCH 4/6] fix: fix errors in the profile page to show the profile
 image

---
 app/Http/Controllers/UserController.php       | 2 --
 app/Http/Middleware/HandleInertiaRequests.php | 6 +++++-
 resources/js/Pages/Users/Profile.vue          | 2 +-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php
index 78e91f1..827b637 100644
--- a/app/Http/Controllers/UserController.php
+++ b/app/Http/Controllers/UserController.php
@@ -100,8 +100,6 @@ public function update(Request $request, User $user)
         ]);
     }
     
-    
-
 
     /**
      * Remove the specified resource from storage.
diff --git a/app/Http/Middleware/HandleInertiaRequests.php b/app/Http/Middleware/HandleInertiaRequests.php
index c9ffb0a..e140a93 100644
--- a/app/Http/Middleware/HandleInertiaRequests.php
+++ b/app/Http/Middleware/HandleInertiaRequests.php
@@ -4,6 +4,7 @@
 
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Storage;
 use Inertia\Middleware;
 
 class HandleInertiaRequests extends Middleware
@@ -42,7 +43,10 @@ public function share(Request $request): array
                     'id' => $request->user()->id,
                     'name' => $request->user()->name,
                     'email' => $request->user()->email,
-                    'roles' => $request->user()->roles->pluck('name'), // Incluye los roles del usuario
+                    'roles' => $request->user()->roles->pluck('name'), 
+                    'profile_photo_url' => $request->user()->profile_photo_path 
+                    ? Storage::url($request->user()->profile_photo_path) 
+                    : null,
                 ] : null,
             ],
         ]);
diff --git a/resources/js/Pages/Users/Profile.vue b/resources/js/Pages/Users/Profile.vue
index e199737..3dced19 100644
--- a/resources/js/Pages/Users/Profile.vue
+++ b/resources/js/Pages/Users/Profile.vue
@@ -19,7 +19,7 @@
         </h2>
         <p class="user-email" :style="{ color: isDarkMode ? '#B0BEC5' : '#757575' }">{{ form.email }}</p>
         <div class="user-role"
-          :style="{ background: isDarkMode ? '#333333' : '#E0F7FA', color: isDarkMode ? '#82C7C7' : '#00796B' }">Cliente
+          :style="{ background: isDarkMode ? '#333333' : '#E0F7FA', color: isDarkMode ? '#82C7C7' : '#00796B' }">{{ authUser.roles[0] }}
         </div>
         <button @click="showModal = true" :style="{ background: isDarkMode ? '#42A5F5' : '#1565C0', color: '#FFFFFF' }"
           class="btn-edit update">Actualizar Perfil</button>

From 6c6a7e8847eb84e5ca64cf952ae57f9a6895f1ac Mon Sep 17 00:00:00 2001
From: DiegoAndresMejia <diegomejiasobsu@gmail.com>
Date: Sun, 8 Dec 2024 01:36:33 -0500
Subject: [PATCH 5/6] fix: adjust the buttons in the navbar

---
 resources/js/Components/Dashboard/NavBar.vue | 21 ++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/resources/js/Components/Dashboard/NavBar.vue b/resources/js/Components/Dashboard/NavBar.vue
index 3109e7d..09de721 100644
--- a/resources/js/Components/Dashboard/NavBar.vue
+++ b/resources/js/Components/Dashboard/NavBar.vue
@@ -6,15 +6,8 @@
           alt="Logo Gananza" class="h-12 logo" />
       </div>
       <div class="flex items-center gap-2">
-        <button @click="toggleDarkMode" class="btn-icon glow-effect" :style="{ background: theme.cardBackground }">
-          <Sun v-if="isDarkMode" :size="20" :color="theme.emphasis" />
-          <Moon v-else :size="20" :color="theme.primary" />
-        </button>
-        <button class="btn-icon glow-effect">
-          <a :href="`/profile/${authUser.id}`">
-            <img :src="isDarkMode ? '/assets/media/gananza/user-light.svg' : '/assets/media/gananza/user-dark.svg'"
-              alt="Perfil" class="icon-img" />
-          </a>
+        <button @click="goToProfile" :class="['hidden md:block font-semibold py-2 px-4 rounded-lg transition', theme.primaryButton]">
+          Perfil
         </button>
         <button
           @click="handleExploreRaffles"
@@ -35,12 +28,16 @@
           <img :src="isDarkMode ? '/assets/media/gananza/bars-light.svg' : '/assets/media/gananza/bars-dark.svg'"
             alt="Menú" class="icon-img" />
         </button>
+        <button @click="toggleDarkMode" class="btn-icon glow-effect" :style="{ background: theme.cardBackground }">
+          <Sun v-if="isDarkMode" :size="20" :color="theme.emphasis" />
+          <Moon v-else :size="20" :color="theme.primary" />
+        </button>
       </div>
     </div>
     <nav :class="['nav-links', { 'open': isMenuOpen }]">
       <button class="close-btn" @click="toggleMenu" :style="{ color: theme.textPrimary }">✖</button>
       <h3 class="menu-title" :style="{ color: theme.textPrimary }">Navegación</h3>
-      <a href="/profile" class="nav-link" :style="{ color: theme.textPrimary, borderColor: theme.border }">Perfil</a>
+      <a @click.prevent="goToProfile" class="nav-link" :style="{ color: theme.textPrimary, borderColor: theme.border }">Perfil</a>
       <a @click.prevent="handleExploreRaffles" class="nav-link" :style="{ color: theme.textPrimary, borderColor: theme.border }">
         Organizar Rifas
       </a>
@@ -79,6 +76,10 @@ const handleAdminPanel = () => {
   window.location.href = '/admin';
 };
 
+const goToProfile = () => {
+  window.location.href = `/profile/${authUser.value.id}`;
+};
+
 const logout = () => {
   router.post(route('logout'), {}, {
     onFinish: () => {

From 65b817529e4d21c090568ecddbd03cbab8d6cd13 Mon Sep 17 00:00:00 2001
From: DiegoAndresMejia <diegomejiasobsu@gmail.com>
Date: Sun, 8 Dec 2024 01:56:40 -0500
Subject: [PATCH 6/6] fix: fix errors in the profile page

---
 resources/js/Pages/Users/Profile.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/resources/js/Pages/Users/Profile.vue b/resources/js/Pages/Users/Profile.vue
index 3dced19..1af11f1 100644
--- a/resources/js/Pages/Users/Profile.vue
+++ b/resources/js/Pages/Users/Profile.vue
@@ -607,4 +607,5 @@ export default {
 .hidden-file-input {
   display: none;
 }
+
 </style>