Refactor shuttle and route management: price separation, premium preview design, and simplified route creation form

backend/app/api/shuttles/__init__.py

@@ -18,11 +18,14 @@ async def get_shuttles(
     destination: Optional[str] = Query(None),
     company_name: Optional[str] = Query(None),
     trip_type: Optional[str] = Query(None),
-    is_active: bool = Query(True),
+    is_active: Optional[bool] = Query(None),
     session: Session = Depends(get_session)
 ):
     """Get all shuttles with optional filters."""
-    statement = select(Shuttle).where(Shuttle.is_active == is_active)
+    statement = select(Shuttle)
+    
+    if is_active is not None:
+        statement = statement.where(Shuttle.is_active == is_active)
     
     if origin:
         statement = statement.where(Shuttle.origin.contains(origin))
@@ -159,3 +162,21 @@ async def delete_shuttle(
     session.delete(db_shuttle)
     session.commit()
     return {"ok": True}
+
+@router.patch("/{shuttle_id}/status")
+async def update_shuttle_status(
+    shuttle_id: UUID,
+    is_active: bool = Query(...),
+    session: Session = Depends(get_session),
+    _: bool = Depends(get_current_admin)
+):
+    """Update shuttle active status (Admin only)."""
+    db_shuttle = session.get(Shuttle, shuttle_id)
+    if not db_shuttle:
+        raise HTTPException(status_code=404, detail="Shuttle not found")
+    
+    db_shuttle.is_active = is_active
+    session.add(db_shuttle)
+    session.commit()
+    session.refresh(db_shuttle)
+    return db_shuttle

frontend/src/components/AppHeader.vue

@@ -42,13 +42,13 @@
                 <span class="material-icons">shield_person</span>
                 <span class="link-text">Panel Control</span>
               </div>
-              <div v-if="authStore.isDriver" class="sidebar-link" @click="navigateTo('/driver')">
+              <div v-if="authStore.isDriver && !authStore.isAdmin" class="sidebar-link" @click="navigateTo('/driver')">
                 <span class="material-icons">minor_crash</span>
                 <span class="link-text">Taxi Panel</span>
               </div>
             </div>
 
-            <div class="sidebar-group">
+            <div v-if="!authStore.isAdmin" class="sidebar-group">
               <div class="group-label">OPERACIONES</div>
               <div class="sidebar-link" @click="navigateTo('/favorites')">
                 <span class="material-icons">favorite</span>
@@ -65,7 +65,7 @@
                 <span class="link-text">{{ themeStore.isDarkMode ? 'Modo Claro' : 'Modo Oscuro' }}</span>
               </div>
 
-            <div class="sidebar-group">
+            <div v-if="!authStore.isAdmin" class="sidebar-group">
               <div class="group-label">SOPORTE</div>
               <div class="sidebar-link report-link-solid" @click="openReportModal">
                 <span class="material-icons">report_problem</span>

frontend/src/views/AdminRoutes.vue

@@ -20,8 +20,39 @@
 
         <!-- CONTENT SIDE -->
         <div class="content-side">
-            <!-- Route List -->
+            <!-- Route List & Create Form -->
             <div v-if="!selectedRoute" class="route-list">
+                <!-- Create Form (Simplified) -->
+                <div v-if="isCreating" class="create-route-form nexus-glass">
+                    <div class="form-header">
+                        <span class="material-icons">route</span>
+                        <h3>Nueva Ruta</h3>
+                    </div>
+                    
+                    <div class="form-body">
+                        <div class="form-group">
+                            <label>Punto de Salida</label>
+                            <input v-model="newRouteForm.origin" type="text" placeholder="Ej: David">
+                        </div>
+                        <div class="form-group">
+                            <label>Punto de Llegada</label>
+                            <input v-model="newRouteForm.destination" type="text" placeholder="Ej: Boquete">
+                        </div>
+                        <div class="form-group">
+                            <label>Nombre de Ruta (Auto)</label>
+                            <input :value="computedRouteName" disabled type="text" placeholder="Salida - Llegada">
+                        </div>
+                    </div>
+
+                    <div class="form-footer">
+                        <button class="cancel-btn" @click="isCreating = false">Cancelar</button>
+                        <button class="save-btn" :disabled="!isFormValid" @click="confirmCreateRoute">
+                            <span class="material-icons">save</span> Guardar Ruta
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Existing List -->
                 <div v-for="route in routes" :key="route.id" class="route-card" @click="selectRoute(route)">
                     <div class="route-info">
                         <h3>{{ route.name }}</h3>
@@ -30,7 +61,7 @@
                     </div>
                     <span class="material-icons">chevron_right</span>
                 </div>
-                <div v-if="routes.length === 0" class="empty-state">No hay rutas registradas.</div>
+                <div v-if="routes.length === 0 && !isCreating" class="empty-state">No hay rutas registradas.</div>
             </div>
 
             <!-- Single Route Editor -->
@@ -152,6 +183,20 @@ const allStops = ref<BusStop[]>([])
 const selectedRoute = ref<Route | null>(null)
 const routeStops = ref<BusStop[]>([])
 const newStopId = ref('')
+const isCreating = ref(false)
+const newRouteForm = ref({
+    origin: '',
+    destination: ''
+})
+
+const computedRouteName = computed(() => {
+    if (!newRouteForm.value.origin || !newRouteForm.value.destination) return ''
+    return `${newRouteForm.value.origin} - ${newRouteForm.value.destination}`
+})
+
+const isFormValid = computed(() => {
+    return newRouteForm.value.origin.trim() !== '' && newRouteForm.value.destination.trim() !== ''
+})
 
 // Map integration
 const { initMap, addNumberedMarker, addMarker, addPolyline, clearAllOverlays, isLoaded: mapsLoaded, map: gmap } = useGoogleMaps()
@@ -291,19 +336,22 @@ function handleBack() {
 }
 
 async function createRoute() {
-    const name = prompt("Nombre de la nueva ruta:")
+    isCreating.value = true
-    if (!name) return
+    newRouteForm.value = { origin: '', destination: '' }
+}
+
+async function confirmCreateRoute() {
     try {
-        const route = await routesService.createRoute({
+        await routesService.createRoute({
-            name,
+            name: computedRouteName.value,
-            origin_city: 'David',
+            origin_city: newRouteForm.value.origin,
-            destination_city: 'Boquete',
+            destination_city: newRouteForm.value.destination,
             status: 'active',
             color: '#FEE715',
             direction: 'outbound'
         })
         routes.value = await routesService.getAllRoutes()
-        selectRoute(route)
+        isCreating.value = false
     } catch (err: any) {
         console.error('Error creating route:', err)
         alert('No se pudo crear la ruta: ' + (err.response?.data?.detail || err.message))
@@ -480,6 +528,74 @@ h1 { font-size: 1.5rem; font-weight: 800; color: #FEE715; margin: 0; }
 .status.active { background: rgba(34, 197, 94, 0.1); color: #4ade80; }
 .status.inactive { background: rgba(239, 68, 68, 0.1); color: #f87171; }
 
+/* Nexus Create Form */
+.create-route-form {
+    margin-bottom: 24px;
+    padding: 24px;
+    border-radius: 20px;
+    background: rgba(30, 41, 59, 0.5);
+}
+
+.nexus-glass {
+    backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.form-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 20px;
+    color: #FEE715;
+}
+
+.form-header h3 {
+    margin: 0;
+    font-size: 1.1rem;
+    font-weight: 800;
+}
+
+.form-body {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    margin-bottom: 24px;
+}
+
+.form-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 12px;
+}
+
+.cancel-btn {
+    background: transparent;
+    border: 1px solid rgba(255,255,255,0.2);
+    color: white;
+    padding: 10px 20px;
+    border-radius: 10px;
+    font-weight: 700;
+    cursor: pointer;
+}
+
+.save-btn {
+    background: #FEE715;
+    color: #101820;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 10px;
+    font-weight: 800;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.save-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
 /* Editor View */
 .route-editor {
     background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.1);

frontend/src/views/AdminShuttles.vue

@@ -209,62 +209,85 @@ async function saveShuttle() {
           <h2>Previsualización en Directo</h2>
         </div>
 
-        <div class="preview-container">
+          <!-- PREVIEW PANEL -->
-          <!-- LA TARJETA TAL CUAL LA IMAGEN DEL USUARIO -->
+          <div class="shuttle-card-preview" :class="{ expanded: true }" :style="{ backgroundImage: `url(${previewImageUrl})` }">
-          <div class="shuttle-card-preview" :style="{ backgroundImage: `url(${shuttleForm.image_url})` }">
+            <div class="shuttle-main-info">
-            <div class="card-header">
+              <div class="shuttle-header-mini">
                 <div class="company-badge">
                   <span class="material-icons">business</span>
                   {{ shuttleForm.company_name }}
                 </div>
-              <div class="price-badge-top">
+                <div class="price-pill">
-                ${{ shuttleForm.price_per_person }}
+                  <span class="currency">$</span>
+                  <span class="amount">{{ shuttleForm.price_per_person }}</span>
+                  <span class="price-pill-label">/p</span>
                 </div>
               </div>
 
-            <div class="route-display">
+              <div class="shuttle-route-compact">
-              <span class="city">{{ shuttleForm.origin }}</span>
+                <span class="route-text">{{ shuttleForm.origin }}</span>
-              <span class="material-icons arrow">arrow_forward</span>
+                <span class="material-icons route-arrow">arrow_forward</span>
-              <span class="city">{{ shuttleForm.destination }}</span>
+                <span class="route-text">{{ shuttleForm.destination }}</span>
               </div>
 
-            <div class="vehicle-tag">
+              <div class="shuttle-tags">
+                <div class="vehicle-tag-mini">
                   <span class="material-icons">directions_bus</span>
                   {{ shuttleForm.vehicle_type }}
                 </div>
-
+                <div class="expand-indicator">
-            <div class="card-details-box">
+                  <span class="material-icons">expand_less</span>
-              <div class="detail-item">
-                <span class="material-icons icon-yellow">schedule</span>
-                <div class="texts">
-                  <span class="label">DURACIÓN ESTIMADA</span>
-                  <span class="val">{{ shuttleForm.estimated_duration }}</span>
-                </div>
-              </div>
-              <div class="detail-item">
-                <span class="material-icons icon-yellow">calendar_today</span>
-                <div class="texts">
-                  <span class="label">SALIDAS</span>
-                  <span class="val">{{ shuttleForm.departure_times }}</span>
                 </div>
               </div>
             </div>
 
-            <div class="card-footer-preview">
+            <!-- EXPANDED CONTENT PREVIEW -->
-              <div class="price-info">
+            <div class="shuttle-details">
-                <span class="main-price">${{ shuttleForm.price_per_person }} <small>por persona</small></span>
+              <div class="shuttle-separator"></div>
-                <div class="lang-indicator" v-if="shuttleForm.english_speaking">
+
+              <div class="shuttle-body">
+                <div class="info-row">
+                  <span class="material-icons">schedule</span>
+                  <div>
+                    <p class="label">DURACIÓN ESTIMADA</p>
+                    <p class="value">{{ shuttleForm.estimated_duration }}</p>
+                  </div>
+                </div>
+                <div class="info-row">
+                  <span class="material-icons">event</span>
+                  <div>
+                    <p class="label">SALIDAS</p>
+                    <p class="value">{{ shuttleForm.departure_times }}</p>
+                  </div>
+                </div>
+                <div class="info-row" v-if="shuttleForm.english_speaking">
                   <span class="material-icons">g_translate</span>
-                   ENGLISH
+                  <div>
+                    <p class="label">IDIOMA</p>
+                    <p class="value">Español · English</p>
                   </div>
                 </div>
-              <div class="contact-actions">
-                <div class="mini-contact-btn phone">
-                  <span class="material-icons">phone</span>
               </div>
-                <div class="mini-contact-btn wa">
+
+              <!-- Precios prominentes -->
+              <div class="price-block">
+                <div class="price-row-main">
+                  <span class="price-amount-big">${{ shuttleForm.price_per_person }}</span>
+                  <span class="price-label-big">por persona</span>
+                </div>
+                <div class="price-row-secondary" v-if="shuttleForm.price_private_trip">
+                  <span class="material-icons price-icon-secondary">directions_car</span>
+                  <span class="price-amount-secondary">${{ shuttleForm.price_private_trip }}</span>
+                  <span class="price-label-secondary">viaje privado</span>
+                </div>
+              </div>
+
+              <!-- Botones de contacto -->
+              <div class="contact-buttons-preview">
+                <button class="btn-whatsapp-preview">
                   <span class="material-icons">chat</span>
-                </div>
+                  WhatsApp
+                </button>
               </div>
             </div>
           </div>
@@ -486,18 +509,17 @@ async function saveShuttle() {
   cursor: not-allowed;
 }
 
-/* SHUTTLE PREVIEW CARD STYLES */
+/* SHUTTLE PREVIEW CARD PREMIUM STYLES */
 .shuttle-card-preview {
   width: 100%;
-  aspect-ratio: 1.2;
+  border-radius: 20px;
+  overflow: hidden;
+  border: 1px solid rgba(255,255,255,0.12);
   background-size: cover;
   background-position: center;
-  border-radius: 24px;
   position: relative;
-  overflow: hidden;
   display: flex;
   flex-direction: column;
-  padding: 20px;
   box-shadow: 0 30px 60px rgba(0,0,0,0.5);
 }
 
@@ -505,125 +527,214 @@ async function saveShuttle() {
   content: "";
   position: absolute;
   inset: 0;
-  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 60%, rgba(0,0,0,0.4) 100%);
+  background: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.93) 0%,
+    rgba(0, 0, 0, 0.65) 55%,
+    rgba(0, 0, 0, 0.30) 100%
+  );
+  z-index: 0;
 }
 
-.card-header, .route-display, .vehicle-tag, .card-details-box, .card-footer-preview {
+.shuttle-card-preview.expanded {
+  border: 2px solid #FEE715;
+}
+
+.shuttle-card-preview.expanded::before {
+  background: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.97) 0%,
+    rgba(0, 0, 0, 0.80) 45%,
+    rgba(0, 0, 0, 0.40) 100%
+  );
+}
+
+.shuttle-main-info,
+.shuttle-details {
   position: relative;
   z-index: 1;
+  padding: 18px 20px;
 }
 
-.company-badge {
+.shuttle-main-info {
-  background: rgba(254, 231, 21, 0.2);
+  padding-bottom: 14px;
-  backdrop-filter: blur(8px);
+}
-  color: #fee715;
+
-  padding: 6px 12px;
+.shuttle-header-mini {
-  border-radius: 8px;
+  display: flex;
-  display: inline-flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 14px;
+}
+
+.shuttle-card-preview .company-badge {
+  display: flex;
   align-items: center;
   gap: 6px;
-  font-size: 0.8rem;
+  background: rgba(0, 0, 0, 0.60);
+  color: #FEE715;
+  padding: 5px 11px;
+  border-radius: 10px;
+  font-size: 0.75rem;
   font-weight: 800;
-  border: 1px solid rgba(254, 231, 21, 0.3);
+  border: 1px solid rgba(254, 231, 21, 0.45);
+  backdrop-filter: blur(8px);
 }
 
-.price-badge-top {
+.price-pill {
-  position: absolute;
+  background: #FEE715;
-  top: 0;
-  right: 0;
-  background: #fee715;
   color: #101820;
-  padding: 8px 16px;
+  padding: 5px 11px;
-  border-radius: 12px;
+  border-radius: 10px;
   font-weight: 900;
-  font-size: 1.1rem;
+  font-size: 1rem;
-}
-
-.route-display {
-  margin-top: 20px;
   display: flex;
-  align-items: center;
+  align-items: baseline;
-  gap: 12px;
+  gap: 1px;
-  font-size: 1.5rem;
+  box-shadow: 0 4px 12px rgba(254, 231, 21, 0.35);
-  font-weight: 900;
 }
 
-.route-display .arrow {
+.price-pill .currency { font-size: 0.8rem; }
-  color: #fee715;
+.price-pill .amount { font-size: 1rem; }
-}
+.price-pill-label { font-size: 0.7rem; font-weight: 700; opacity: 0.75; }
 
-.vehicle-tag {
+.shuttle-route-compact {
-  margin-top: 12px;
+  display: flex;
-  background: rgba(0,0,0,0.6);
-  padding: 8px 16px;
-  border-radius: 12px;
-  display: inline-flex;
   align-items: center;
   gap: 10px;
-  width: fit-content;
+  font-size: 1.1rem;
-  font-weight: 700;
+  font-weight: 900;
-  font-size: 0.9rem;
+  color: #ffffff;
+  margin-bottom: 14px;
 }
 
-.card-details-box {
+.route-arrow {
-  margin-top: auto;
+  color: #FEE715;
-  margin-bottom: 20px;
+  font-size: 20px;
+}
+
+.shuttle-tags {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.vehicle-tag-mini {
+  padding: 5px 10px;
+  background: rgba(255, 255, 255, 0.12);
+  border-radius: 8px;
+  font-size: 0.72rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #ffffff;
+  border: 1px solid rgba(255, 255, 255, 0.20);
+}
+
+.vehicle-tag-mini .material-icons { font-size: 15px; color: #FEE715; }
+.expand-indicator { color: #FEE715; }
+
+.shuttle-separator {
+  height: 1px;
+  background: linear-gradient(to right, transparent, rgba(255,255,255,0.25), transparent);
+  margin: 0 0 16px;
+}
+
+.shuttle-body {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 14px;
+  margin-bottom: 20px;
 }
 
-.detail-item {
+.info-row {
   display: flex;
   align-items: center;
   gap: 12px;
 }
 
-.icon-yellow { color: #fee715; font-size: 20px; }
+.info-row .material-icons { color: #FEE715; font-size: 22px; }
 
-.lang-indicator {
+.info-row .label {
-  display: flex;
+  font-size: 0.65rem;
-  align-items: center;
+  color: rgba(255, 255, 255, 0.55);
-  gap: 4px;
+  margin: 0;
-  background: rgba(254, 231, 21, 0.2);
+  text-transform: uppercase;
-  color: #fee715;
+  font-weight: 700;
-  padding: 2px 8px;
-  border-radius: 6px;
-  font-size: 0.6rem;
-  font-weight: 800;
-  margin-top: 4px;
-  width: fit-content;
 }
 
-.lang-indicator .material-icons { font-size: 10px; }
+.info-row .value {
+  font-size: 0.95rem;
+  color: #ffffff;
+  margin: 2px 0 0;
+  font-weight: 700;
+}
 
-.card-footer-preview {
+.price-block {
+  padding: 14px 0;
+  border-top: 1px solid rgba(255,255,255,0.08);
+  border-bottom: 1px solid rgba(255,255,255,0.08);
+  margin-bottom: 16px;
   display: flex;
-  align-items: flex-end;
+  flex-direction: column;
-  justify-content: space-between;
+  gap: 8px;
+}
+
+.price-row-main {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.price-amount-big {
+  font-size: 2rem;
+  font-weight: 900;
+  color: #FEE715;
+  line-height: 1;
+}
+
+.price-label-big {
+  font-size: 0.85rem;
+  color: rgba(255,255,255,0.75);
+  font-weight: 600;
+}
+
+.price-row-secondary {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.price-icon-secondary { font-size: 16px; color: rgba(255,255,255,0.55); }
+.price-amount-secondary { font-size: 1rem; font-weight: 800; color: rgba(255,255,255,0.85); }
+.price-label-secondary { font-size: 0.75rem; color: rgba(255,255,255,0.5); }
+
+.contact-buttons-preview {
   width: 100%;
 }
 
-.contact-actions {
+.btn-whatsapp-preview {
-  display: flex;
+  width: 100%;
-  gap: 12px;
+  background: #25d366;
-  margin-left: auto;
+  color: white;
-}
+  border: none;
-
+  padding: 14px;
-.mini-contact-btn {
+  border-radius: 12px;
-  width: 50px;
+  font-weight: 800;
-  height: 50px;
-  border-radius: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.3s;
+  gap: 8px;
+  font-size: 1rem;
 }
 
-.mini-contact-btn.phone { background: rgba(255,255,255,0.1); color: white; border: 1px solid rgba(255,255,255,0.2); }
+.preview-hint {
-.mini-contact-btn.wa { background: #25d366; color: white; box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3); }
+  text-align: center;
-
+  color: #94a3b8;
-.mini-contact-btn .material-icons { font-size: 24px; }
+  font-size: 0.85rem;
+  margin-top: 20px;
+}
 
 .toggle-container {
   display: flex;
@@ -677,13 +788,6 @@ async function saveShuttle() {
 .nexus-switch input:checked + .slider { background-color: #fee715; }
 .nexus-switch input:checked + .slider:before { transform: translateX(20px); background-color: #101820; }
 
-.preview-hint {
-  text-align: center;
-  color: #94a3b8;
-  font-size: 0.85rem;
-  margin-top: 20px;
-}
-
 .message {
   text-align: center;
   padding: 12px;

frontend/src/views/PromoterDashboard.vue

@@ -1,19 +1,21 @@
 <script setup lang="ts">
 import { ref, onMounted, watch, computed } from 'vue'
 import { useRoute } from 'vue-router'
-import { couponsService } from '@/services/couponsService'
 import { businessService } from '@/services/businessService'
+import { couponsService } from '@/services/couponsService'
+import { shuttlesService } from '@/services/shuttlesService'
 import { useAuthStore } from '@/stores/auth'
 import { API_URL } from '@/services/apiClient'
-import type { Coupon, Business } from '@/types'
+import type { Coupon, Business, Shuttle } from '@/types'
 
 const route = useRoute()
 const authStore = useAuthStore()
 
 // State
-const activeTab = ref<'promotions' | 'businesses'>('promotions')
+const activeTab = ref<'promotions' | 'businesses' | 'shuttles'>('promotions')
 const coupons = ref<Coupon[]>([])
 const businesses = ref<Business[]>([])
+const shuttles = ref<Shuttle[]>([])
 const isLoading = ref(true)
 const searchQuery = ref('')
 const categoryFilter = ref('Todas')
@@ -61,7 +63,7 @@ const currentBusiness = ref<Partial<Business>>({
 const userName = localStorage.getItem('user_name') || 'Promotor'
 
 onMounted(async () => {
-  await Promise.all([loadCoupons(), loadBusinesses()])
+  await Promise.all([loadCoupons(), loadBusinesses(), loadShuttles()])
   checkHash()
 })
 
@@ -70,6 +72,8 @@ watch(() => route.hash, () => checkHash())
 function checkHash() {
   if (route.hash === '#businesses') {
     activeTab.value = 'businesses'
+  } else if (route.hash === '#shuttles') {
+    activeTab.value = 'shuttles'
   } else {
     activeTab.value = 'promotions'
   }
@@ -85,6 +89,16 @@ const filteredCoupons = computed(() => {
   })
 })
 
+const filteredShuttles = computed(() => {
+  return shuttles.value.filter(s => {
+    const matchesSearch = s.route_name.toLowerCase().includes(searchQuery.value.toLowerCase()) || 
+                          (s.company_name?.toLowerCase().includes(searchQuery.value.toLowerCase()) ?? false) ||
+                          s.origin.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
+                          s.destination.toLowerCase().includes(searchQuery.value.toLowerCase())
+    return matchesSearch
+  })
+})
+
 const filteredBusinesses = computed(() => {
   return businesses.value.filter(b => {
     const matchesSearch = b.name.toLowerCase().includes(searchQuery.value.toLowerCase()) || 
@@ -115,6 +129,49 @@ async function loadBusinesses() {
   }
 }
 
+async function loadShuttles() {
+  try {
+    shuttles.value = await shuttlesService.getAllShuttles()
+  } catch (e) {
+    console.error('Failed to load shuttles', e)
+  }
+}
+
+// Shuttle Methods
+async function toggleShuttleStatus(shuttle: Shuttle) {
+  try {
+    const token = localStorage.getItem('auth_token')
+    const response = await fetch(`${API_URL}/api/shuttles/${shuttle.id}/status?is_active=${!shuttle.is_active}`, {
+      method: 'PATCH',
+      headers: { 'Authorization': `Bearer ${token}` }
+    })
+    if (response.ok) {
+      await loadShuttles()
+    }
+  } catch (e) {
+    alert('Error al actualizar estado del shuttle')
+  }
+}
+
+async function deleteShuttle(id: string) {
+  if (confirm('¿Estás seguro de eliminar este transporte turístico?')) {
+    try {
+      const token = localStorage.getItem('auth_token')
+      const response = await fetch(`${API_URL}/api/shuttles/${id}`, {
+        method: 'DELETE',
+        headers: { 'Authorization': `Bearer ${token}` }
+      })
+      if (response.ok) {
+        await loadShuttles()
+      } else {
+        alert('No se pudo eliminar el shuttle')
+      }
+    } catch (e) {
+      alert('Error al eliminar shuttle')
+    }
+  }
+}
+
 // Business Methods
 function openCreateBusinessModal() {
   isEditingBusiness.value = false
@@ -316,10 +373,14 @@ async function toggleCouponStatus(coupon: Coupon) {
         <button :class="['tab-btn', { active: activeTab === 'businesses' }]" @click="activeTab = 'businesses'">
           Mis Negocios
         </button>
+        <button :class="['tab-btn', { active: activeTab === 'shuttles' }]" @click="activeTab = 'shuttles'">
+          Viajes Turísticos
+        </button>
       </div>
       
       <div class="tabs-actions">
         <div class="stats-header">
+          <div v-if="activeTab === 'promotions'" class="stats-group">
             <div class="stat-mini">
               <div class="stat-value">{{ coupons.length }}</div>
               <div class="stat-label">Total Cupones</div>
@@ -329,6 +390,17 @@ async function toggleCouponStatus(coupon: Coupon) {
               <div class="stat-label">Activos</div>
             </div>
           </div>
+          <div v-else-if="activeTab === 'shuttles'" class="stats-group">
+            <div class="stat-mini">
+              <div class="stat-value">{{ shuttles.length }}</div>
+              <div class="stat-label">Total Shuttles</div>
+            </div>
+            <div class="stat-mini">
+              <div class="stat-value active">{{ shuttles.filter(s => s.is_active).length }}</div>
+              <div class="stat-label">Activos</div>
+            </div>
+          </div>
+        </div>
 
         <button v-if="activeTab === 'promotions'" class="primary-btn" @click="openCreateModal">
           <span class="material-icons">add</span>
@@ -338,6 +410,10 @@ async function toggleCouponStatus(coupon: Coupon) {
           <span class="material-icons">add</span>
           Nuevo Negocio
         </button>
+        <button v-if="activeTab === 'shuttles'" class="primary-btn" @click="$router.push('/admin/shuttles')">
+          <span class="material-icons">rocket_launch</span>
+          Nuevo Shuttle
+        </button>
       </div>
     </div>
 
@@ -345,7 +421,7 @@ async function toggleCouponStatus(coupon: Coupon) {
     <div class="search-filter-bar">
         <div class="search-box">
             <span class="material-icons">search</span>
-            <input v-model="searchQuery" type="text" :placeholder="activeTab === 'promotions' ? 'Buscar promoción...' : 'Buscar negocio...'">
+            <input v-model="searchQuery" type="text" :placeholder="activeTab === 'promotions' ? 'Buscar promoción...' : (activeTab === 'businesses' ? 'Buscar negocio...' : 'Buscar shuttle...')">
         </div>
         <div class="filter-box">
             <span class="material-icons">filter_alt</span>
@@ -478,6 +554,64 @@ async function toggleCouponStatus(coupon: Coupon) {
       </div>
     </div>
 
+    <!-- Shuttles Tab -->
+    <div v-if="activeTab === 'shuttles'">
+      <div v-if="shuttles.length === 0" class="empty-state">
+        <span class="material-icons">directions_bus</span>
+        <p>No hay shuttles turísticos registrados.</p>
+      </div>
+      <div v-else class="table-card">
+        <table class="coupons-table">
+          <thead>
+            <tr>
+              <th>Ruta / Empresa</th>
+              <th class="text-center">Tipo Vehículo</th>
+              <th class="text-center">Precio (Persona)</th>
+              <th class="text-center">Estado</th>
+              <th class="text-center">Acciones</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="shuttle in filteredShuttles" :key="shuttle.id">
+              <td>
+                <div class="title-cell">
+                  <div class="coupon-header-cell">
+                    <img :src="getImageUrl(shuttle.image_url)" class="coupon-mini-img" />
+                    <div>
+                      <strong>{{ shuttle.route_name }}</strong>
+                      <div class="business-tag">
+                        <span class="material-icons">business</span>
+                        {{ shuttle.company_name }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </td>
+              <td class="text-center"><span class="badge">{{ shuttle.vehicle_type }}</span></td>
+              <td class="text-center">
+                <span class="discount-label">${{ shuttle.price_per_person }}</span>
+              </td>
+              <td class="text-center">
+                <button 
+                  :class="['status-toggle', { active: shuttle.is_active }]"
+                  @click="toggleShuttleStatus(shuttle)"
+                >
+                  {{ shuttle.is_active ? 'Activo' : 'Inactivo' }}
+                </button>
+              </td>
+              <td class="text-center">
+                <div class="action-buttons justify-center">
+                  <button class="icon-btn delete" @click="deleteShuttle(shuttle.id)">
+                    <span class="material-icons">delete</span>
+                  </button>
+                </div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
 
 
     <!-- Coupon Modal -->