fix: critical bug fixes - routes UUID, image paths, favorites loading, bottom nav debounce

frontend/src/views/TaxiView.vue

@@ -4,9 +4,9 @@ import { useI18n } from 'vue-i18n'
 import { useTaxiStore } from '@/stores/taxi'
 import { useShuttleStore } from '@/stores/shuttle'
 import { analyticsService } from '@/services/analyticsService'
-import { API_URL } from '@/services/apiClient'
 import type { Taxi, Shuttle } from '@/types'
 import FavoriteButton from '@/components/FavoriteButton.vue'
+import { getImageUrl } from '@/utils/imageUrl'
 
 const { t } = useI18n()
 const taxiStore = useTaxiStore()
@@ -74,11 +74,6 @@ const filteredTaxis = computed(() => {
   })
 })
 
-function getImageUrl(path?: string) {
-  if (!path) return `https://ui-avatars.com/api/?name=Taxi&background=fee715&color=101820`
-  if (path.startsWith('http')) return path
-  return `${API_URL}${path.startsWith('/') ? '' : '/'}${path}`
-}
 
 const handleCall = (taxi: Taxi) => {
   analyticsService.logEvent({ 
@@ -195,7 +190,11 @@ function getShiftLabel(shift: string) {
         <div v-for="taxi in filteredTaxis" :key="taxi.id" class="taxi-card-new">
           <div class="card-top">
             <div class="driver-avatar">
-              <img :src="getImageUrl(taxi.image_url)" alt="Driver">
+              <img 
+                :src="getImageUrl(taxi.image_url, 'taxi')" 
+                alt="Driver"
+                @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'taxi')"
+              >
             </div>
             <div class="driver-info">
               <h3>{{ taxi.owner_name }}</h3>
@@ -288,7 +287,6 @@ function getShiftLabel(shift: string) {
           :ref="el => setShuttleRef(el, shuttle.id)"
           class="shuttle-card"
           :class="{ expanded: expandedShuttleId === shuttle.id }"
-          :style="{ backgroundImage: `url(${getImageUrl(shuttle.image_url)})` }"
           @click="() => { 
             expandedShuttleId = expandedShuttleId === shuttle.id ? null : shuttle.id;
             if (expandedShuttleId === shuttle.id) {
@@ -296,6 +294,11 @@ function getShiftLabel(shift: string) {
             }
           }"
         >
+          <img 
+            :src="getImageUrl(shuttle.image_url, 'shuttle')" 
+            class="shuttle-card-bg"
+            @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'shuttle')"
+          />
           <!-- Collapsed info (always visible) -->
           <div class="shuttle-main-info">
             <div class="shuttle-header-mini">
@@ -502,16 +505,24 @@ function getShiftLabel(shift: string) {
 /* ---- La tarjeta base ---- */
 .shuttle-card {
   border-radius: 20px;
-  overflow: hidden;
   border: 1px solid rgba(255,255,255,0.12);
-  background-size: cover;
-  background-position: center;
   position: relative;
   min-height: 170px;
   display: flex;
   flex-direction: column;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
+  overflow: hidden;
+  background: linear-gradient(135deg, #0d1b2a 0%, #1a2a40 50%, #101820 100%);
+}
+
+.shuttle-card-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 0;
 }
 
 /* Overlay oscuro base (compacto) */
@@ -525,7 +536,7 @@ function getShiftLabel(shift: string) {
     rgba(0, 0, 0, 0.65) 55%,
     rgba(0, 0, 0, 0.30) 100%
   );
-  z-index: 0;
+  z-index: 1;
   transition: background 0.4s ease;
 }
 
@@ -550,7 +561,7 @@ function getShiftLabel(shift: string) {
 .shuttle-main-info,
 .shuttle-details {
   position: relative;
-  z-index: 1;
+  z-index: 2;
   padding: 18px 20px;
 }