- Aggiornamento Viaggi

quasar.config.ts

@@ -158,7 +158,10 @@ export default defineConfig((ctx) => {
     },
 
     framework: {
-      config: {},
+      config: {
+        notify: { position: 'top' },
+        loading: { delay: 200 },
+      },
       components: [
         'QLayout',
         'QDrawer',

src-pwa/custom-service-worker.js

@@ -117,7 +117,7 @@ self.addEventListener('activate', (event) => {
       );
     })
   );
-  self.clients.claim(); // SERVE? OPPURE NO ?
+  self.clients.claim();
 });
 
 const USASYNC = false;
@@ -263,39 +263,39 @@ if (workbox) {
       networkTimeoutSeconds: 10, // timeout rapido
       plugins: [
         new CacheableResponsePlugin({ statuses: [0, 200] }),
-        new ExpirationPlugin({ maxEntries: 20, maxAgeSeconds: 24 * 60 * 60 }), // 1 giorno
+        new ExpirationPlugin({ maxEntries: 50, maxAgeSeconds: 24 * 60 * 60 }), // 1 giorno
       ],
     })
   );
 
-  // API calls - NetworkFirst con fallback cache e timeout veloce
+  // API calls - NetworkFirst con timeout breve
   registerRoute(
     ({ url }) => url.hostname === API_DOMAIN,
     new NetworkFirst({
       cacheName: `${CACHE_PREFIX}-api-cache-${CACHE_VERSION}`,
-      networkTimeoutSeconds: 10,
+      networkTimeoutSeconds: 5,
-      fetchOptions: { credentials: 'include' },
       plugins: [
         new CacheableResponsePlugin({ statuses: [0, 200] }),
-        new ExpirationPlugin({ maxEntries: 50, maxAgeSeconds: 5 * 60 }), // 5 minuti
+        new ExpirationPlugin({ maxEntries: 100, maxAgeSeconds: 5 * 60 }), // 5 minuti
       ],
     })
   );
-
-  registerRoute(new RegExp('/admin/'), new NetworkOnly());
-
-  function generateUUID() {
-    return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
-      (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
-    );
 }
 
-  const syncStore = {};
+// Generate UUID per sync
+function generateUUID() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0,
+      v = c === 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
+
+let syncStore = {};
+
+// Message event handler
 self.addEventListener('message', (event) => {
-    if (
+  if (event.data && event.data.type === 'SKIP_WAITING') {
-      event.data &&
-      (event.data.type === 'SKIP_WAITING' || event.data.action === 'skipWaiting')
-    ) {
     self.skipWaiting();
     // Opzionale: rispondi al client
     if (event.ports && event.ports[0]) {
@@ -436,13 +436,7 @@ if (workbox) {
   console.error('[Service Worker] Global error ❌:', event.error);
 });
 
-  // Funzione di utilità per il logging (decommentare se necessario)
+// Background Sync event
-  // function logFetchDetails(request) {
-  //   console.log('[Service Worker] Fetching:', request.url);
-  //   console.log('Cache mode:', request.cache);
-  //   console.log('Request mode:', request.mode);
-  // }
-
 self.addEventListener('sync', (event) => {
   console.log('[Service Worker V5] Background syncing', event);
 
@@ -503,57 +497,338 @@ if (workbox) {
       );
     }
   }
-  });
 
-  // Notifications
+  // Sync per notifiche (se necessario)
-  self.addEventListener('notificationclick', (event) => {
+  if (event.tag === 'sync-notifications') {
-    const { notification } = event;
-    const { action } = event;
-
-    if (action === 'confirm') {
-      notification.close();
-    } else {
     event.waitUntil(
-        self.clients.matchAll().then((clis) => {
+      Promise.resolve().then(() => {
-          const client = clis.find((c) => c.visibilityState === 'visible');
+        console.log('[SW] Syncing notifications');
-          if (client) {
-            client.navigate(notification.data.url);
-            client.focus();
-          } else {
-            self.clients.openWindow(notification.data.url);
-          }
-          notification.close();
       })
     );
   }
 });
 
-  self.addEventListener('notificationclose', (event) => {
+// ========================================
-    console.log('Notification was closed', event);
+// 🔔 PUSH NOTIFICATIONS - BACKWARD COMPATIBLE VERSION
-  });
+// ========================================
 
+// Push event - BACKWARD COMPATIBLE con formato vecchio E nuovo
 self.addEventListener('push', (event) => {
-    console.log('Push Notification received', event);
+  console.log('[Service Worker] 🔔 Push notification received:', event);
-    let data = event.data
-      ? event.data.json()
-      : { title: 'New!', content: 'Something new happened!', url: '/' };
 
-    const options = {
+  // Default data - supporta ENTRAMBI i formati (vecchio e nuovo)
-      body: data.content,
+  let data = {
-      icon: data.icon ? data.icon : '/images/android-chrome-192x192.png',
+    title: 'New!',
-      badge: data.badge ? data.badge : '/images/badge-96x96.png',
+    body: 'Something new happened!',
-      data: { url: data.url },
+    content: 'Something new happened!', // VECCHIO formato
-      tag: data.tag,
+    icon: '/images/android-chrome-192x192.png', // VECCHIO path
+    badge: '/images/badge-96x96.png', // VECCHIO path
+    tag: 'default',
+    url: '/',
+    requireInteraction: false,
+    notificationType: null,
+    rideId: null,
+    fromUser: null,
+    actions: []
   };
 
-    event.waitUntil(self.registration.showNotification(data.title, options));
+  // Parse del payload se presente
+  if (event.data) {
+    try {
+      const payload = event.data.json();
+      data = { ...data, ...payload };
 
-    const myid = data.id || '0';
+      // BACKWARD COMPATIBILITY: Se c'è 'content' ma non 'body', usa 'content'
-    self.registration.sync.register(myid);
+      if (payload.content && !payload.body) {
-    writeData('notifications', { _id: myid, tag: options.tag });
+        data.body = payload.content;
-  });
+      }
-} else {
+      // Se c'è 'body' ma non 'content', sincronizza
-  console.warn('Workbox could not be loaded.');
+      if (payload.body && !payload.content) {
+        data.content = payload.body;
       }
 
-console.log('***** FINE CUSTOM-SERVICE-WORKER.JS ***** ');
+      console.log('[SW] 📦 Parsed notification payload:', data);
+    } catch (e) {
+      console.warn('[SW] ⚠️ Failed to parse push payload as JSON, using text');
+      const textData = event.data.text();
+      data.body = textData;
+      data.content = textData;
+    }
+  }
+
+  // Configura le actions SOLO se c'è un notificationType (nuovo formato)
+  if (data.notificationType && (!data.actions || data.actions.length === 0)) {
+    data.actions = getNotificationActions(data.notificationType, data.rideId);
+  }
+
+  // Opzioni della notifica - supporta ENTRAMBI i path delle icone
+  const options = {
+    body: data.body || data.content, // Fallback a 'content' se 'body' non c'è
+    icon: data.icon,
+    badge: data.badge,
+    tag: data.tag,
+    requireInteraction: data.requireInteraction || false,
+    vibrate: data.vibrate || [200, 100, 200],
+    data: {
+      dateOfArrival: Date.now(),
+      url: data.url || '/',
+      rideId: data.rideId,
+      notificationType: data.notificationType,
+      fromUser: data.fromUser,
+      // BACKWARD COMPATIBILITY: mantieni anche il formato vecchio
+      legacyFormat: !data.notificationType // true se è formato vecchio
+    },
+    actions: data.actions || []
+  };
+
+  // Mostra la notifica
+  event.waitUntil(
+    self.registration.showNotification(data.title, options).then(() => {
+      console.log('[SW] ✅ Notification displayed successfully');
+
+      // Salva la notifica in IndexedDB - BACKWARD COMPATIBLE
+      const myid = data.id || generateUUID();
+      self.registration.sync.register(myid);
+
+      // Formato compatibile: se è vecchio formato usa solo _id e tag
+      const notificationData = options.data.legacyFormat
+        ? { _id: myid, tag: options.tag }
+        : {
+            _id: myid,
+            tag: options.tag,
+            type: data.notificationType,
+            timestamp: Date.now()
+          };
+
+      writeData('notifications', notificationData).catch(err => {
+        console.error('[SW] Failed to save notification to IndexedDB:', err);
+      });
+    })
+  );
+});
+
+// Funzione helper per generare actions (SOLO per nuovo formato)
+function getNotificationActions(notificationType, rideId) {
+  const actions = [];
+
+  switch (notificationType) {
+    case 'newRideRequest':
+      actions.push(
+        { action: 'view-requests', title: '👀 Visualizza richieste' },
+        { action: 'dismiss', title: '❌ Ignora' }
+      );
+      break;
+
+    case 'requestAccepted':
+      actions.push(
+        { action: 'view-ride', title: '🚗 Vedi viaggio' },
+        { action: 'message', title: '💬 Messaggio' }
+      );
+      break;
+
+    case 'requestRejected':
+      actions.push(
+        { action: 'search-rides', title: '🔍 Cerca altri viaggi' }
+      );
+      break;
+
+    case 'newMessage':
+      actions.push(
+        { action: 'open-chat', title: '💬 Apri chat' },
+        { action: 'dismiss', title: '✓ OK' }
+      );
+      break;
+
+    case 'rideReminder':
+      actions.push(
+        { action: 'view-ride', title: '📍 Vedi dettagli' },
+        { action: 'dismiss', title: '✓ OK' }
+      );
+      break;
+
+    case 'rideCancelled':
+      actions.push(
+        { action: 'search-rides', title: '🔍 Cerca alternativa' }
+      );
+      break;
+
+    case 'feedbackRequest':
+      actions.push(
+        { action: 'leave-feedback', title: '⭐ Lascia feedback' },
+        { action: 'dismiss', title: 'Dopo' }
+      );
+      break;
+
+    case 'newFeedbackReceived':
+      actions.push(
+        { action: 'view-feedback', title: '⭐ Vedi feedback' }
+      );
+      break;
+
+    default:
+      actions.push(
+        { action: 'open-app', title: '📱 Apri app' }
+      );
+  }
+
+  return actions;
+}
+
+// Notification click event - BACKWARD COMPATIBLE
+self.addEventListener('notificationclick', (event) => {
+  console.log('[Service Worker] 🖱️ Notification clicked:', event);
+  console.log('[SW] Action:', event.action);
+  console.log('[SW] Notification data:', event.notification.data);
+
+  // Chiudi la notifica
+  event.notification.close();
+
+  // Estrai i dati dalla notifica
+  const notificationData = event.notification.data || {};
+  const isLegacyFormat = notificationData.legacyFormat || false;
+
+  let finalUrl;
+
+  // BACKWARD COMPATIBILITY: Se è formato vecchio, usa solo notification.data.url
+  if (isLegacyFormat || !notificationData.notificationType) {
+    console.log('[SW] 📜 Using legacy notification format');
+    finalUrl = notificationData.url || '/';
+  } else {
+    // NUOVO formato: usa il routing intelligente
+    console.log('[SW] 🆕 Using new notification format with smart routing');
+    const rideId = notificationData.rideId;
+    const notificationType = notificationData.notificationType;
+    const action = event.action;
+
+    finalUrl = determineUrlFromNotification(action, notificationType, rideId);
+  }
+
+  console.log('[SW] 🎯 Navigating to:', finalUrl);
+
+  // Se finalUrl è null (action 'dismiss'), non fare nulla
+  if (!finalUrl) {
+    console.log('[SW] Action dismissed, no navigation');
+    return;
+  }
+
+  // Apri l'URL appropriato
+  event.waitUntil(
+    clients.matchAll({ type: 'window', includeUncontrolled: true })
+      .then((clientList) => {
+        console.log('[SW] Found', clientList.length, 'open windows');
+
+        // Cerca una finestra già aperta con l'URL desiderato
+        for (const client of clientList) {
+          if (client.url.includes(finalUrl.split('?')[0]) && 'focus' in client) {
+            console.log('[SW] ✅ Focusing existing window');
+            return client.focus();
+          }
+        }
+
+        // Cerca una finestra dell'app aperta e naviga lì
+        for (const client of clientList) {
+          if (client.url.includes(self.location.origin) && 'navigate' in client) {
+            console.log('[SW] ✅ Navigating existing window to:', finalUrl);
+            return client.navigate(finalUrl).then(client => client.focus());
+          }
+        }
+
+        // Altrimenti apri una nuova finestra
+        if (clients.openWindow) {
+          console.log('[SW] 🆕 Opening new window');
+          return clients.openWindow(finalUrl);
+        }
+      })
+      .catch((error) => {
+        console.error('[SW] ❌ Error handling notification click:', error);
+      })
+  );
+});
+
+// Funzione per determinare l'URL (SOLO per nuovo formato)
+function determineUrlFromNotification(action, notificationType, rideId) {
+  // Gestisci prima le actions specifiche
+  if (action) {
+    switch (action) {
+      case 'view-requests':
+        return '/trasporti/miei-viaggi?tab=requests';
+
+      case 'view-ride':
+        return rideId ? `/trasporti/viaggio/${rideId}` : '/trasporti/miei-viaggi';
+
+      case 'message':
+      case 'open-chat':
+        return rideId ? `/trasporti/chat?ride=${rideId}` : '/trasporti/chat';
+
+      case 'search-rides':
+        return '/trasporti?view=search';
+
+      case 'leave-feedback':
+        return rideId ? `/trasporti/feedback/${rideId}` : '/trasporti/feedback';
+
+      case 'view-feedback':
+        return '/trasporti/miei-feedback';
+
+      case 'open-app':
+        return '/trasporti';
+
+      case 'dismiss':
+        return null; // Non fare nulla
+
+      default:
+        break;
+    }
+  }
+
+  // Se non c'è action, usa il tipo di notifica
+  if (notificationType) {
+    switch (notificationType) {
+      case 'newRideRequest':
+        return '/trasporti/miei-viaggi?tab=requests';
+
+      case 'requestAccepted':
+      case 'requestRejected':
+      case 'rideReminder':
+        return rideId ? `/trasporti/viaggio/${rideId}` : '/trasporti/miei-viaggi';
+
+      case 'newMessage':
+        return '/trasporti/chat';
+
+      case 'rideCancelled':
+        return '/trasporti/miei-viaggi?tab=cancelled';
+
+      case 'feedbackRequest':
+        return rideId ? `/trasporti/feedback/${rideId}` : '/trasporti/feedback';
+
+      case 'newFeedbackReceived':
+        return '/trasporti/miei-feedback';
+
+      default:
+        return '/trasporti';
+    }
+  }
+
+  // Fallback
+  return '/trasporti';
+}
+
+// Notification close event - tracking opzionale
+self.addEventListener('notificationclose', (event) => {
+  console.log('[Service Worker] 🔕 Notification closed:', event);
+
+  const notificationData = event.notification.data || {};
+
+  // Solo per nuovo formato, traccia le dismissioni
+  if (!notificationData.legacyFormat && notificationData.notificationType) {
+    writeData('notification-dismissals', {
+      _id: generateUUID(),
+      type: notificationData.notificationType,
+      timestamp: Date.now(),
+      tag: event.notification.tag
+    }).catch(err => {
+      console.error('[SW] Failed to track notification dismissal:', err);
+    });
+  }
+});
+
+console.log('***** 🚀 CUSTOM-SERVICE-WORKER.JS - BACKWARD COMPATIBLE VERSION ***** ');

src/components/CMyElem/CMyElem.ts

@@ -34,7 +34,7 @@ import { CMyActivities } from '@/components/CMyActivities';
 import { CECommerce } from '@/components/CECommerce';
 import { EventPosterGenerator } from '@/components/EventPosterGenerator';
 import { RideWidget } from 'app/src/modules/viaggi/components/widgets/RideWidget';
-import { CheckEmail } from '@/components/CheckEmail';
+import { CheckEmail } from '@/components/checkemail';
 import { HomeRiso } from '@/components/HomeRiso';
 import mycircuits from '@/views/user/mycircuits/mycircuits.vue';
 import PageRis from '@/components/pageris/pageris.vue';

src/components/CMyElem/CMyElem.vue

@@ -144,7 +144,6 @@
           v-else-if="myel.type === shared_consts.ELEMTYPE.CREA_VOLANTINO"
           class="myElemBase"
         >
-          ˚
           <div
             v-if="editOn"
             class="elemEdit"
@@ -158,7 +157,6 @@
           v-else-if="myel.type === shared_consts.ELEMTYPE.VIAGGI_WIDGET"
           class="myElemBase"
         >
-          ˚
           <div
             v-if="editOn"
             class="elemEdit"

src/components/checkemail/checkemail.ts

@@ -9,7 +9,7 @@ import { Api } from '@api';
 
 const RESEND_COOLDOWN_MINUTES = 1;
 const RESEND_COOLDOWN_MS = RESEND_COOLDOWN_MINUTES * 60 * 1000;
-const STORAGE_KEY = 'lastVerificationEmailSent';
+const STOR_LAST_EMAIL_SENT = 'lastVerificationEmailSent';
 
 export default defineComponent({
   name: 'CheckEmail',
@@ -38,12 +38,12 @@ export default defineComponent({
 
     // Methods
     const getLastSentTime = (): number => {
-      const stored = localStorage.getItem(STORAGE_KEY);
+      const stored = localStorage.getItem(STOR_LAST_EMAIL_SENT);
       return stored ? parseInt(stored, 10) : 0;
     };
 
     const setLastSentTime = () => {
-      localStorage.setItem(STORAGE_KEY, Date.now().toString());
+      localStorage.setItem(STOR_LAST_EMAIL_SENT, Date.now().toString());
     };
 
     const calculateTimeLeft = (): number => {

src/model/GlobalStore.ts

@@ -622,6 +622,7 @@ export interface IListRoutes {
   inmenu?: boolean
   solotitle?: boolean
   infooter?: boolean
+  badge?: any
   submenu?: boolean
   noroute?: boolean
   onlyAdmin?: boolean

src/modules/viaggi/components/ride/CommunityFilters.vue

@@ -0,0 +1,561 @@
+<!-- components/ride/CommunityFilters.vue -->
+<template>
+  <div class="community-filters">
+    <!-- Quick Filters Chips -->
+    <div
+      v-if="hasActiveFilters"
+      class="community-filters__active"
+    >
+      <q-chip
+        v-for="filter in activeFiltersList"
+        :key="filter.key"
+        removable
+        color="primary"
+        text-color="white"
+        size="sm"
+        @remove="removeFilter(filter.key)"
+      >
+        {{ filter.label }}
+      </q-chip>
+      <q-btn
+        flat
+        dense
+        label="Cancella tutti"
+        color="negative"
+        size="sm"
+        @click="$emit('clear')"
+      />
+    </div>
+
+    <!-- Filter Form -->
+    <div class="community-filters__form">
+      <q-input
+        v-model="localFilters.departure"
+        label="Partenza"
+        outlined
+        dense
+        clearable
+        @update:model-value="debouncedEmit"
+      >
+        <template v-slot:prepend>
+          <q-icon
+            name="trip_origin"
+            color="positive"
+          />
+        </template>
+      </q-input>
+
+      <!-- Destination -->
+      <q-input
+        v-model="localFilters.destination"
+        label="Destinazione"
+        outlined
+        dense
+        clearable
+        @update:model-value="debouncedEmit"
+      >
+        <template v-slot:prepend>
+          <q-icon
+            name="place"
+            color="negative"
+          />
+        </template>
+      </q-input>
+
+      <!-- Date From -->
+      <q-input
+        v-model="localFilters.dateFrom"
+        label="Data da"
+        outlined
+        dense
+        clearable
+        @update:model-value="debouncedEmit"
+      >
+        <template v-slot:prepend>
+          <q-icon name="event" />
+        </template>
+        <template v-slot:append>
+          <q-icon
+            name="event"
+            class="cursor-pointer"
+          >
+            <q-popup-proxy
+              cover
+              transition-show="scale"
+              transition-hide="scale"
+            >
+              <q-date
+                v-model="localFilters.dateFrom"
+                mask="YYYY-MM-DD"
+                :options="dateFromOptions"
+                @update:model-value="debouncedEmit"
+              >
+                <div class="row items-center justify-end">
+                  <q-btn
+                    v-close-popup
+                    label="OK"
+                    color="primary"
+                    flat
+                  />
+                </div>
+              </q-date>
+            </q-popup-proxy>
+          </q-icon>
+        </template>
+      </q-input>
+
+      <!-- Date To -->
+      <q-input
+        v-model="localFilters.dateTo"
+        label="Data a"
+        outlined
+        dense
+        clearable
+        @update:model-value="debouncedEmit"
+      >
+        <template v-slot:prepend>
+          <q-icon name="event" />
+        </template>
+        <template v-slot:append>
+          <q-icon
+            name="event"
+            class="cursor-pointer"
+          >
+            <q-popup-proxy
+              cover
+              transition-show="scale"
+              transition-hide="scale"
+            >
+              <q-date
+                v-model="localFilters.dateTo"
+                mask="YYYY-MM-DD"
+                :options="dateToOptions"
+                @update:model-value="debouncedEmit"
+              >
+                <div class="row items-center justify-end">
+                  <q-btn
+                    v-close-popup
+                    label="OK"
+                    color="primary"
+                    flat
+                  />
+                </div>
+              </q-date>
+            </q-popup-proxy>
+          </q-icon>
+        </template>
+      </q-input>
+
+      <!-- Max Price -->
+      <div class="community-filters__slider-wrapper">
+        <label class="community-filters__slider-label">
+          Prezzo massimo: €{{ localFilters.maxPrice || 100 }}
+        </label>
+        <q-slider
+          v-model="localFilters.maxPrice"
+          :min="0"
+          :max="100"
+          :step="5"
+          label
+          color="positive"
+          @change="debouncedEmit"
+        />
+      </div>
+
+      <q-select
+        v-model="localFilters.vehicleType"
+        :options="VEHICLE_TYPES"
+        label="Tipo veicolo"
+        outlined
+        dense
+        clearable
+        emit-value
+        map-options
+        @update:model-value="debouncedEmit"
+      >
+        <template v-slot:prepend>
+          <q-icon name="directions_car" />
+        </template>
+      </q-select>
+
+      <!-- Min Seats -->
+      <q-select
+        v-model="localFilters.minSeats"
+        :options="seatsOptions"
+        label="Posti minimi disponibili"
+        outlined
+        dense
+        clearable
+        emit-value
+        map-options
+        @update:model-value="debouncedEmit"
+      >
+        <template v-slot:prepend>
+          <q-icon name="event_seat" />
+        </template>
+      </q-select>
+
+      <!-- Sort By -->
+      <q-select
+        v-model="localFilters.sortBy"
+        :options="sortOptions"
+        label="Ordina per"
+        outlined
+        dense
+        emit-value
+        map-options
+        @update:model-value="debouncedEmit"
+      >
+        <template v-slot:prepend>
+          <q-icon name="sort" />
+        </template>
+      </q-select>
+    </div>
+
+    <!-- Quick Date Filters -->
+    <div class="community-filters__quick-dates">
+      <div class="community-filters__quick-dates-label">Filtri rapidi:</div>
+      <q-btn
+        outline
+        dense
+        label="Oggi"
+        color="primary"
+        size="sm"
+        @click="setToday"
+      />
+      <q-btn
+        outline
+        dense
+        label="Domani"
+        color="primary"
+        size="sm"
+        @click="setTomorrow"
+      />
+      <q-btn
+        outline
+        dense
+        label="Questa settimana"
+        color="primary"
+        size="sm"
+        @click="setThisWeek"
+      />
+      <q-btn
+        outline
+        dense
+        label="Weekend"
+        color="primary"
+        size="sm"
+        @click="setWeekend"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, watch, PropType } from 'vue';
+import { date as qdate } from 'quasar';
+import type { CommunityFilters } from '../../composables/useCommunityRides';
+import { VEHICLE_TYPES } from '../../types';
+import { useRecentCities } from '../../composables/useRecentCities';
+
+let debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+export default defineComponent({
+  name: 'CommunityFilters',
+
+  props: {
+    filters: {
+      type: Object as PropType<CommunityFilters>,
+      required: true,
+    },
+  },
+
+  emits: ['update', 'clear'],
+
+  setup(props, { emit }) {
+    // Local copy of filters for immediate UI updates
+    const localFilters = ref<CommunityFilters>({ ...props.filters });
+
+    const { addRecentSearch, getRecentSearches } = useRecentCities();
+
+    // Sync local filters with prop changes
+    watch(
+      () => props.filters,
+      (newFilters) => {
+        localFilters.value = { ...newFilters };
+      },
+      { deep: true }
+    );
+
+    // Options
+    const seatsOptions = [
+      { label: '1+ posto', value: 1 },
+      { label: '2+ posti', value: 2 },
+      { label: '3+ posti', value: 3 },
+      { label: '4+ posti', value: 4 },
+    ];
+
+    const sortOptions = [
+      { label: 'Data (prima i più vicini)', value: 'date' },
+      { label: 'Prezzo (crescente)', value: 'price_asc' },
+      { label: 'Prezzo (decrescente)', value: 'price_desc' },
+      { label: 'Posti disponibili', value: 'seats' },
+      { label: 'Valutazione conducente', value: 'rating' },
+    ];
+
+    // Computed
+    const hasActiveFilters = computed(() => {
+      return !!(
+        localFilters.value.departure ||
+        localFilters.value.destination ||
+        localFilters.value.dateFrom ||
+        localFilters.value.dateTo ||
+        localFilters.value.maxPrice ||
+        localFilters.value.minSeats
+      );
+    });
+
+    const activeFiltersList = computed(() => {
+      const filters: Array<{ key: string; label: string }> = [];
+
+      if (localFilters.value.departure) {
+        filters.push({
+          key: 'departure',
+          label: `Da: ${localFilters.value.departure}`,
+        });
+      }
+
+      if (localFilters.value.destination) {
+        filters.push({
+          key: 'destination',
+          label: `A: ${localFilters.value.destination}`,
+        });
+      }
+
+      if (localFilters.value.dateFrom) {
+        filters.push({
+          key: 'dateFrom',
+          label: `Dal: ${qdate.formatDate(localFilters.value.dateFrom, 'DD/MM/YYYY')}`,
+        });
+      }
+
+      if (localFilters.value.dateTo) {
+        filters.push({
+          key: 'dateTo',
+          label: `Al: ${qdate.formatDate(localFilters.value.dateTo, 'DD/MM/YYYY')}`,
+        });
+      }
+
+      if (localFilters.value.maxPrice) {
+        filters.push({
+          key: 'maxPrice',
+          label: `Max: €${localFilters.value.maxPrice}`,
+        });
+      }
+
+      if (localFilters.value.minSeats) {
+        filters.push({
+          key: 'minSeats',
+          label: `${localFilters.value.minSeats}+ posti`,
+        });
+      }
+
+      return filters;
+    });
+
+    // Date options
+    const dateFromOptions = (date: string) => {
+      // Only allow dates from today onwards
+      return date >= qdate.formatDate(new Date(), 'YYYY/MM/DD');
+    };
+
+    const dateToOptions = (date: string) => {
+      // Only allow dates from today onwards
+      if (date < qdate.formatDate(new Date(), 'YYYY/MM/DD')) {
+        return false;
+      }
+      // If dateFrom is set, only allow dates after dateFrom
+      if (localFilters.value.dateFrom) {
+        return date >= localFilters.value.dateFrom;
+      }
+      return true;
+    };
+
+    // Methods
+    const debouncedEmit = () => {
+      if (debounceTimer) {
+        clearTimeout(debounceTimer);
+      }
+
+      debounceTimer = setTimeout(() => {
+        // Salva città recenti
+        if (localFilters.value.departure) {
+          addRecentSearch({ city: localFilters.value.departure });
+        }
+        if (localFilters.value.destination) {
+          addRecentSearch({ city: localFilters.value.destination });
+        }
+
+        emit('update', { ...localFilters.value });
+      }, 500);
+    };
+
+    const removeFilter = (key: string) => {
+      (localFilters.value as any)[key] =
+        key === 'sortBy'
+          ? 'date'
+          : key === 'maxPrice'
+            ? null
+            : key === 'minSeats'
+              ? null
+              : '';
+      emit('update', { ...localFilters.value });
+    };
+
+    const setToday = () => {
+      const today = qdate.formatDate(new Date(), 'YYYY-MM-DD');
+      localFilters.value.dateFrom = today;
+      localFilters.value.dateTo = today;
+      emit('update', { ...localFilters.value });
+    };
+
+    const setTomorrow = () => {
+      const tomorrow = qdate.addToDate(new Date(), { days: 1 });
+      const tomorrowStr = qdate.formatDate(tomorrow, 'YYYY-MM-DD');
+      localFilters.value.dateFrom = tomorrowStr;
+      localFilters.value.dateTo = tomorrowStr;
+      emit('update', { ...localFilters.value });
+    };
+
+    const setThisWeek = () => {
+      const today = new Date();
+      const endOfWeek = qdate.addToDate(today, { days: 7 });
+      localFilters.value.dateFrom = qdate.formatDate(today, 'YYYY-MM-DD');
+      localFilters.value.dateTo = qdate.formatDate(endOfWeek, 'YYYY-MM-DD');
+      emit('update', { ...localFilters.value });
+    };
+
+    const setWeekend = () => {
+      const today = new Date();
+      const dayOfWeek = today.getDay();
+
+      // Calculate next Saturday (6) and Sunday (0)
+      let daysUntilSaturday = (6 - dayOfWeek + 7) % 7;
+      if (daysUntilSaturday === 0 && dayOfWeek !== 6) {
+        daysUntilSaturday = 7;
+      }
+
+      const saturday = qdate.addToDate(today, { days: daysUntilSaturday });
+      const sunday = qdate.addToDate(saturday, { days: 1 });
+
+      localFilters.value.dateFrom = qdate.formatDate(saturday, 'YYYY-MM-DD');
+      localFilters.value.dateTo = qdate.formatDate(sunday, 'YYYY-MM-DD');
+      emit('update', { ...localFilters.value });
+    };
+
+    return {
+      localFilters,
+      seatsOptions,
+      sortOptions,
+      hasActiveFilters,
+      activeFiltersList,
+      dateFromOptions,
+      dateToOptions,
+      debouncedEmit,
+      removeFilter,
+      setToday,
+      setTomorrow,
+      setThisWeek,
+      setWeekend,
+      VEHICLE_TYPES,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.community-filters {
+  background: white;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+
+  // Active Filters
+  &__active {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-bottom: 16px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  // Form
+  &__form {
+    display: grid;
+    gap: 12px;
+    margin-bottom: 16px;
+
+    @media (min-width: 768px) {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  &__slider-wrapper {
+    padding: 8px 12px;
+    background: #f8f9fa;
+    border-radius: 8px;
+
+    @media (min-width: 768px) {
+      grid-column: 1 / -1;
+    }
+  }
+
+  &__slider-label {
+    display: block;
+    font-size: 13px;
+    color: #555;
+    margin-bottom: 8px;
+    font-weight: 500;
+  }
+
+  // Quick Dates
+  &__quick-dates {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    padding-top: 16px;
+    border-top: 1px solid #f0f0f0;
+  }
+
+  &__quick-dates-label {
+    font-size: 13px;
+    color: #888;
+    font-weight: 500;
+    width: 100%;
+    margin-bottom: 4px;
+
+    @media (min-width: 768px) {
+      width: auto;
+      margin-bottom: 0;
+    }
+  }
+}
+
+// Dark Mode
+.body--dark {
+  .community-filters {
+    background: #1e1e30;
+
+    &__active,
+    &__quick-dates {
+      border-color: rgba(255, 255, 255, 0.1);
+    }
+
+    &__slider-wrapper {
+      background: rgba(255, 255, 255, 0.05);
+    }
+  }
+}
+</style>

src/modules/viaggi/components/ride/CommunityRideCard.vue

@@ -0,0 +1,655 @@
+<!-- components/ride/CommunityRideCard.vue -->
+<template>
+  <div
+    class="community-ride-card"
+    @click="$emit('view', ride._id)"
+  >
+    <!-- Header: Driver Info -->
+    <div class="community-ride-card__header">
+      <div
+        class="community-ride-card__driver"
+        @click.stop="$emit('view-driver', ride.userId._id)"
+      >
+        <q-avatar size="48px">
+          <img
+            v-if="ride.userId.profile?.img"
+            :src="ride.userId.profile.img"
+            :alt="`${ride.userId.name} ${ride.userId.surname}`"
+          />
+          <div
+            v-else
+            class="community-ride-card__avatar-placeholder"
+          >
+            {{ getInitials(ride.userId) }}
+          </div>
+        </q-avatar>
+
+        <div class="community-ride-card__driver-info">
+          <div class="community-ride-card__driver-name">
+            {{ ride.userId.name }} {{ ride.userId.surname }}
+          </div>
+          <div class="community-ride-card__driver-stats">
+            <q-icon
+              v-if="ride.userId.stats?.averageRating"
+              name="star"
+              color="amber"
+              size="14px"
+            />
+            <span v-if="ride.userId.stats?.averageRating">
+              {{ ride.userId.stats.averageRating.toFixed(1) }}
+            </span>
+            <span
+              v-if="ride.userId.stats?.completedRides"
+              class="community-ride-card__driver-trips"
+            >
+              • {{ ride.userId.stats.completedRides }}
+              {{ ride.userId.stats.completedRides === 1 ? 'viaggio' : 'viaggi' }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Request Status Badge -->
+      <q-badge
+        v-if="ride.userRequestStatus"
+        :color="getRequestStatusColor(ride.userRequestStatus)"
+        :label="getRequestStatusLabel(ride.userRequestStatus)"
+        class="community-ride-card__status-badge"
+      />
+    </div>
+
+    <!-- Route Info -->
+    <div class="community-ride-card__route">
+      <div class="community-ride-card__route-point">
+        <q-icon
+          name="trip_origin"
+          color="positive"
+          size="20px"
+        />
+        <div class="community-ride-card__route-city">{{ ride.departure.city }}</div>
+      </div>
+
+      <div class="community-ride-card__route-line">
+        <q-icon
+          name="more_vert"
+          color="grey-4"
+          size="16px"
+        />
+      </div>
+
+      <div class="community-ride-card__route-point">
+        <q-icon
+          name="place"
+          color="negative"
+          size="20px"
+        />
+        <div class="community-ride-card__route-city">{{ ride.destination.city }}</div>
+      </div>
+    </div>
+
+    <!-- Date & Time -->
+    <div class="community-ride-card__datetime">
+      <div class="community-ride-card__date">
+        <q-icon
+          name="event"
+          size="18px"
+          color="primary"
+        />
+        <span>{{ formatDate(displayDate) }}</span>
+      </div>
+      <div class="community-ride-card__time">
+        <q-icon
+          name="schedule"
+          size="18px"
+          color="primary"
+        />
+        <span>{{ formatTime(displayDate) }}</span>
+      </div>
+    </div>
+
+    <!-- Details Grid -->
+    <div class="community-ride-card__details">
+      <!-- Price -->
+      <div class="community-ride-card__detail">
+        <q-icon
+          name="euro"
+          color="positive"
+          size="20px"
+        />
+        <div class="community-ride-card__detail-content">
+          <div class="community-ride-card__detail-value">
+            €{{ ride.price.toFixed(2) }}
+          </div>
+          <div class="community-ride-card__detail-label">a persona</div>
+        </div>
+      </div>
+
+      <!-- Available Seats -->
+      <div class="community-ride-card__detail">
+        <q-icon
+          name="event_seat"
+          color="info"
+          size="20px"
+        />
+        <div class="community-ride-card__detail-content">
+          <div class="community-ride-card__detail-value">
+            {{ ride.passengers.available }}/{{ ride.passengers.total }}
+          </div>
+          <div class="community-ride-card__detail-label">posti liberi</div>
+        </div>
+      </div>
+
+      <!-- Vehicle (if available) -->
+      <div
+        v-if="ride.vehicleId"
+        class="community-ride-card__detail"
+      >
+        <q-icon
+          name="directions_car"
+          color="grey-7"
+          size="20px"
+        />
+        <div class="community-ride-card__detail-content">
+          <div class="community-ride-card__detail-value">
+            {{ ride.vehicleId.brand }}
+          </div>
+          <div class="community-ride-card__detail-label">{{ ride.vehicleId.model }}</div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Preferences -->
+    <div
+      v-if="hasPreferences"
+      class="community-ride-card__preferences"
+    >
+      <q-chip
+        v-if="ride.preferences?.smoking === false"
+        size="sm"
+        color="positive"
+        text-color="white"
+        icon="smoke_free"
+        dense
+      >
+        No fumo
+      </q-chip>
+      <q-chip
+        v-if="ride.preferences?.pets"
+        size="sm"
+        color="info"
+        text-color="white"
+        icon="pets"
+        dense
+      >
+        Animali OK
+      </q-chip>
+      <q-chip
+        v-if="ride.preferences?.music"
+        size="sm"
+        color="purple"
+        text-color="white"
+        icon="music_note"
+        dense
+      >
+        Musica
+      </q-chip>
+      <q-chip
+        v-if="ride.preferences?.chatter"
+        size="sm"
+        color="orange"
+        text-color="white"
+        icon="chat"
+        dense
+      >
+        {{ getChatterLabel(ride.preferences.chatter) }}
+      </q-chip>
+    </div>
+
+    <!-- Notes -->
+    <div
+      v-if="ride.notes"
+      class="community-ride-card__notes"
+    >
+      <q-icon
+        name="info_outline"
+        size="16px"
+        color="grey-6"
+      />
+      <p>{{ ride.notes }}</p>
+    </div>
+
+    <!-- Actions -->
+    <div
+      class="community-ride-card__actions"
+      @click.stop
+    >
+      <q-btn
+        v-if="!ride.userRequestStatus"
+        color="primary"
+        label="Richiedi Posto"
+        icon="add"
+        unelevated
+        rounded
+        :loading="requesting"
+        @click="$emit('request', ride._id)"
+      />
+
+      <q-btn
+        v-else-if="ride.userRequestStatus === 'pending'"
+        color="orange"
+        label="Richiesta Inviata"
+        icon="schedule"
+        disable
+        unelevated
+        rounded
+      />
+
+      <q-btn
+        v-else-if="ride.userRequestStatus === 'accepted'"
+        color="positive"
+        label="Accettata"
+        icon="check_circle"
+        disable
+        unelevated
+        rounded
+      />
+
+      <q-btn
+        v-else-if="ride.userRequestStatus === 'rejected'"
+        color="negative"
+        label="Rifiutata"
+        icon="cancel"
+        disable
+        unelevated
+        rounded
+      />
+
+      <q-btn
+        flat
+        round
+        icon="share"
+        color="grey-7"
+        @click="$emit('share', ride)"
+      >
+        <q-tooltip>Condividi</q-tooltip>
+      </q-btn>
+
+      <q-btn
+        flat
+        round
+        :icon="isFavorite ? 'favorite' : 'favorite_border'"
+        :color="isFavorite ? 'red' : 'grey-7'"
+        :loading="togglingFavorite"
+        @click="toggleFavorite"
+      >
+        <q-tooltip>{{ isFavorite ? 'Rimuovi dai' : 'Aggiungi ai' }} preferiti</q-tooltip>
+      </q-btn>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, ref, PropType } from 'vue';
+import { date as qdate, useQuasar } from 'quasar';
+import { Api } from '@api';
+import type { CommunityRide } from '../../composables/useCommunityRides';
+
+export default defineComponent({
+  name: 'CommunityRideCard',
+
+  props: {
+    ride: {
+      type: Object as PropType<CommunityRide>,
+      required: true,
+    },
+    requesting: {
+      type: Boolean,
+      default: false,
+    },
+    isFavorite: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: ['view', 'view-driver', 'request', 'share', 'favorite-toggled'],
+
+  setup(props, { emit }) {
+    const $q = useQuasar();
+
+    // State
+    const togglingFavorite = ref(false);
+
+    // Computed
+    const hasPreferences = computed(() => {
+      return !!(
+        props.ride.preferences?.smoking !== undefined ||
+        props.ride.preferences?.pets ||
+        props.ride.preferences?.music ||
+        props.ride.preferences?.chatter
+      );
+    });
+
+    const displayDate = computed(() => {
+      return props.ride._displayDate || props.ride.departureDate;
+    });
+
+    // Methods
+    const getInitials = (user: any) => {
+      if (!user) return '?';
+      const name = user.name || '';
+      const surname = user.surname || '';
+      return `${name.charAt(0)}${surname.charAt(0)}`.toUpperCase();
+    };
+
+    const formatDate = (dateStr: string) => {
+      const date = new Date(dateStr);
+      const today = new Date();
+      const tomorrow = new Date(today);
+      tomorrow.setDate(tomorrow.getDate() + 1);
+
+      if (qdate.isSameDate(date, today, 'day')) {
+        return 'Oggi';
+      } else if (qdate.isSameDate(date, tomorrow, 'day')) {
+        return 'Domani';
+      }
+
+      return qdate.formatDate(dateStr, 'ddd DD MMM YYYY');
+    };
+
+    const formatTime = (dateStr: string) => {
+      return qdate.formatDate(dateStr, 'HH:mm');
+    };
+
+    const getRequestStatusColor = (status: string) => {
+      const colors: Record<string, string> = {
+        pending: 'orange',
+        accepted: 'positive',
+        rejected: 'negative',
+      };
+      return colors[status] || 'grey';
+    };
+
+    const getRequestStatusLabel = (status: string) => {
+      const labels: Record<string, string> = {
+        pending: 'In attesa',
+        accepted: 'Accettata',
+        rejected: 'Rifiutata',
+      };
+      return labels[status] || status;
+    };
+
+    const getChatterLabel = (level: string) => {
+      const labels: Record<string, string> = {
+        none: 'Silenzioso',
+        little: 'Poco',
+        normal: 'Normale',
+        much: 'Chiacchierone',
+      };
+      return labels[level] || level;
+    };
+
+    const toggleFavorite = async () => {
+      togglingFavorite.value = true;
+
+      try {
+        const response = await Api.SendReq(
+          `/api/viaggi/rides/${props.ride._id}/favorite`,
+          'POST'
+        );
+
+        if (response.success) {
+          emit('favorite-toggled', response.data.isFavorite);
+
+          $q.notify({
+            type: response.data.isFavorite ? 'positive' : 'info',
+            message: response.data.isFavorite
+              ? 'Aggiunto ai preferiti'
+              : 'Rimosso dai preferiti',
+          });
+        }
+      } catch (error: any) {
+        $q.notify({
+          type: 'negative',
+          message: error.message || 'Errore nel salvare il preferito',
+        });
+      } finally {
+        togglingFavorite.value = false;
+      }
+    };
+
+    return {
+      // State
+      togglingFavorite,
+
+      // Computed
+      hasPreferences,
+
+      // Methods
+      getInitials,
+      formatDate,
+      formatTime,
+      getRequestStatusColor,
+      getRequestStatusLabel,
+      getChatterLabel,
+      toggleFavorite,
+      displayDate,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.community-ride-card {
+  background: white;
+  border-radius: 16px;
+  padding: 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
+    transform: translateY(-2px);
+  }
+
+  // Header
+  &__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 16px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  &__driver {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+
+  &__avatar-placeholder {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    font-weight: 600;
+    border-radius: 50%;
+  }
+
+  &__driver-info {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__driver-name {
+    font-weight: 600;
+    color: #333;
+    font-size: 15px;
+  }
+
+  &__driver-stats {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 13px;
+    color: #888;
+  }
+
+  &__driver-trips {
+    color: #888;
+  }
+
+  &__status-badge {
+    flex-shrink: 0;
+  }
+
+  // Route
+  &__route {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    margin-bottom: 12px;
+  }
+
+  &__route-point {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__route-city {
+    font-weight: 600;
+    color: #333;
+    font-size: 15px;
+  }
+
+  &__route-line {
+    display: flex;
+    padding-left: 2px;
+  }
+
+  // DateTime
+  &__datetime {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 12px;
+    padding: 10px 12px;
+    background: #f8f9fa;
+    border-radius: 8px;
+  }
+
+  &__date,
+  &__time {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 14px;
+    color: #555;
+    font-weight: 500;
+  }
+
+  // Details
+  &__details {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    gap: 12px;
+    margin-bottom: 12px;
+  }
+
+  &__detail {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__detail-content {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__detail-value {
+    font-weight: 700;
+    color: #333;
+    font-size: 15px;
+    line-height: 1.2;
+  }
+
+  &__detail-label {
+    font-size: 11px;
+    color: #888;
+    line-height: 1.2;
+  }
+
+  // Preferences
+  &__preferences {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-bottom: 12px;
+  }
+
+  // Notes
+  &__notes {
+    display: flex;
+    gap: 8px;
+    padding: 10px 12px;
+    background: #fafafa;
+    border-radius: 8px;
+    margin-bottom: 12px;
+
+    p {
+      margin: 0;
+      font-size: 13px;
+      color: #555;
+      line-height: 1.5;
+    }
+  }
+
+  // Actions
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding-top: 12px;
+    border-top: 1px solid #f0f0f0;
+
+    > :first-child {
+      flex: 1;
+    }
+  }
+}
+
+// Dark Mode
+.body--dark {
+  .community-ride-card {
+    background: #1e1e30;
+
+    &__header,
+    &__actions {
+      border-color: rgba(255, 255, 255, 0.1);
+    }
+
+    &__driver-name,
+    &__route-city,
+    &__detail-value {
+      color: #fff;
+    }
+
+    &__datetime,
+    &__notes {
+      background: rgba(255, 255, 255, 0.05);
+    }
+  }
+}
+</style>

src/modules/viaggi/components/ride/ContribTypeSelector.ts

@@ -154,7 +154,7 @@ export default defineComponent({
 
     const requiresPrice = (contribType: ContribType): boolean => {
       const label = contribType.label.toLowerCase();
-      const noPriceTypes = ['dono', 'baratto', 'scambio lavoro'];
+      const noPriceTypes = ['dono', 'Offerta Libera', 'baratto', 'scambio lavoro'];
       return !noPriceTypes.includes(label);
     };
 

src/modules/viaggi/components/ride/MyRideCard.vue

@@ -74,7 +74,7 @@
           icon="notifications_active"
           size="sm"
           unelevated
-          @click.stop="$emit('manage-requests')"
+          @click.stop="$emit('manage-requests', ride)"
         />
       </div>
 
@@ -87,7 +87,7 @@
           icon="star"
           size="sm"
           unelevated
-          @click.stop="$emit('leave-feedback')"
+          @click.stop="$emit('leave-feedback', ride)"
         />
       </div>
     </q-card-section>
@@ -102,7 +102,7 @@
         color="primary"
         label="Modifica"
         icon="edit"
-        @click.stop="$emit('edit')"
+        @click.stop="$emit('edit', ride._id)"
       />
       <q-btn
         v-if="canComplete"
@@ -112,7 +112,7 @@
         color="positive"
         label="Completa"
         icon="check_circle"
-        @click.stop="$emit('complete')"
+        @click.stop="$emit('complete', ride)"
       />
       <q-space />
       <q-btn
@@ -123,7 +123,7 @@
         color="negative"
         label="Cancella"
         icon="cancel"
-        @click.stop="$emit('cancel')"
+        @click.stop="$emit('cancel', ride)"
       />
     </q-card-actions>
   </q-card>
@@ -162,7 +162,7 @@ export default defineComponent({
     const { formatRideDate, getStatusColor, getStatusLabel } = useRides();
 
     const formattedDate = computed(() => {
-      const date = new Date(props.ride.dateTime);
+      const date = new Date(props.ride.departureDate);
       return date.toLocaleDateString('it-IT', {
         weekday: 'short',
         day: 'numeric',
@@ -171,7 +171,7 @@ export default defineComponent({
     });
 
     const formattedTime = computed(() => {
-      const date = new Date(props.ride.dateTime);
+      const date = new Date(props.ride.departureDate);
       return date.toLocaleTimeString('it-IT', {
         hour: '2-digit',
         minute: '2-digit'

src/modules/viaggi/components/ride/RecurrenceSelector.ts

@@ -8,8 +8,8 @@ export default defineComponent({
   props: {
     modelValue: {
       type: Object as PropType<Recurrence>,
-      default: () => ({ type: 'once' })
+      default: () => ({ type: 'once' }),
-    }
+    },
   },
 
   emits: ['update:modelValue'],
@@ -22,44 +22,72 @@ export default defineComponent({
       customDates: [],
       startDate: '',
       endDate: '',
-      excludedDates: []
+      excludedDates: [],
     });
 
     const selectedDates = ref<string[]>([]);
     const excludedDates = ref<string[]>([]);
 
     // Opzioni
-    const recurrenceTypes = RECURRENCE_TYPE_OPTIONS.map(opt => ({
+    const recurrenceTypes = RECURRENCE_TYPE_OPTIONS.map((opt) => ({
       label: opt.label,
       value: opt.value,
-      icon: opt.icon
+      icon: opt.icon,
     }));
 
     const daysOfWeek = DAYS_OF_WEEK;
 
+    const formattedStartDate = computed({
+      get: () => {
+        if (!localRecurrence.startDate) return '';
+        // Estrae solo YYYY-MM-DD dalla stringa ISO
+        return localRecurrence.startDate.substring(0, 10);
+      },
+      set: (val: string) => {
+        localRecurrence.startDate = val ? `${val}T00:00:00.000Z` : '';
+      },
+    });
+
+    const formattedEndDate = computed({
+      get: () => {
+        if (!localRecurrence.endDate) return '';
+        // Estrae solo YYYY-MM-DD dalla stringa ISO
+        return localRecurrence.endDate.substring(0, 10);
+      },
+      set: (val: string) => {
+        localRecurrence.endDate = val ? `${val}T00:00:00.000Z` : '';
+      },
+    });
+
     // Watch per sincronizzare con modelValue
-    watch(() => props.modelValue, (newVal) => {
+    watch(
+      () => props.modelValue,
+      (newVal) => {
         if (newVal) {
           Object.assign(localRecurrence, newVal);
 
           if (newVal.customDates) {
-          selectedDates.value = newVal.customDates.map(d =>
+            selectedDates.value = newVal.customDates.map((d) =>
               typeof d === 'string' ? d : new Date(d).toISOString().split('T')[0]
             );
           }
 
           if (newVal.excludedDates) {
-          excludedDates.value = newVal.excludedDates.map(d =>
+            excludedDates.value = newVal.excludedDates.map((d) =>
               typeof d === 'string' ? d : new Date(d).toISOString().split('T')[0]
             );
           }
         }
-    }, { immediate: true, deep: true });
+      },
+      { immediate: true, deep: true }
+    );
 
     // Watch per emettere update
-    watch([localRecurrence, selectedDates, excludedDates], () => {
+    watch(
+      [localRecurrence, selectedDates, excludedDates],
+      () => {
         const result: Recurrence = {
-        type: localRecurrence.type
+          type: localRecurrence.type,
         };
 
         if (localRecurrence.type !== 'once') {
@@ -80,7 +108,9 @@ export default defineComponent({
         }
 
         emit('update:modelValue', result);
-    }, { deep: true });
+      },
+      { deep: true }
+    );
 
     // Methods
     const isDaySelected = (day: number): boolean => {
@@ -116,7 +146,7 @@ export default defineComponent({
       return date.toLocaleDateString('it-IT', {
         weekday: 'short',
         day: 'numeric',
-        month: 'short'
+        month: 'short',
       });
     };
 
@@ -149,7 +179,7 @@ export default defineComponent({
             return 'Seleziona i giorni della settimana';
           }
           const weeklyDays = localRecurrence.daysOfWeek
-            .map(d => daysOfWeek.find(day => day.value === d)?.label)
+            .map((d) => daysOfWeek.find((day) => day.value === d)?.label)
             .join(', ');
           return `Ogni settimana: ${weeklyDays}`;
 
@@ -158,7 +188,7 @@ export default defineComponent({
             return 'Seleziona i giorni della settimana';
           }
           const customDays = localRecurrence.daysOfWeek
-            .map(d => daysOfWeek.find(day => day.value === d)?.label)
+            .map((d) => daysOfWeek.find((day) => day.value === d)?.label)
             .join(', ');
           return `Giorni selezionati: ${customDays}`;
 
@@ -193,7 +223,9 @@ export default defineComponent({
       removeExcludedDate,
       formatDate,
       dateOptions,
-      exclusionDateOptions
+      exclusionDateOptions,
+      formattedStartDate,
+      formattedEndDate,
     };
-  }
+  },
 });

src/modules/viaggi/components/ride/RecurrenceSelector.vue

@@ -1,7 +1,11 @@
 <template>
   <div class="recurrence-selector">
     <div class="recurrence-selector__header">
-      <q-icon name="repeat" size="20px" color="primary" />
+      <q-icon
+        name="repeat"
+        size="20px"
+        color="primary"
+      />
       <span class="recurrence-selector__title">Ripetizione Percorso</span>
     </div>
 
@@ -20,7 +24,10 @@
     </div>
 
     <!-- Opzioni specifiche per tipo -->
-    <transition name="slide-fade" mode="out-in">
+    <transition
+      name="slide-fade"
+      mode="out-in"
+    >
       <!-- Weekly: Giorni della settimana -->
       <div
         v-if="localRecurrence.type === 'weekly'"
@@ -86,7 +93,10 @@
         />
 
         <!-- Chips date selezionate -->
-        <div v-if="selectedDates.length > 0" class="recurrence-selector__selected-dates">
+        <div
+          v-if="selectedDates.length > 0"
+          class="recurrence-selector__selected-dates"
+        >
           <q-chip
             v-for="(date, index) in selectedDates"
             :key="date"
@@ -114,30 +124,42 @@
 
         <div class="row q-gutter-md">
           <q-input
-            v-model="localRecurrence.startDate"
+            v-model="formattedStartDate"
             type="date"
             label="Data inizio"
             outlined
             dense
             class="col"
-            :rules="[val => !!val || 'Data inizio richiesta']"
+            :rules="[(val) => !!val || 'Data inizio richiesta']"
           >
             <template v-slot:prepend>
-              <q-icon name="event" color="positive" />
+              <q-icon
+                name="event"
+                color="positive"
+              />
             </template>
           </q-input>
 
           <q-input
-            v-model="localRecurrence.endDate"
+            v-model="formattedEndDate"
             type="date"
             label="Data fine"
             outlined
             dense
             class="col"
-            :rules="[val => !!val || 'Data fine richiesta', val => !localRecurrence.startDate || val >= localRecurrence.startDate || 'Data fine deve essere dopo data inizio']"
+            :rules="[
+              (val) => !!val || 'Data fine richiesta',
+              (val) =>
+                !localRecurrence.startDate ||
+                val >= localRecurrence.startDate ||
+                'Data fine deve essere dopo data inizio',
+            ]"
           >
             <template v-slot:prepend>
-              <q-icon name="event" color="negative" />
+              <q-icon
+                name="event"
+                color="negative"
+              />
             </template>
           </q-input>
         </div>
@@ -161,7 +183,10 @@
                   color="negative"
                 />
 
-                <div v-if="excludedDates.length > 0" class="q-mt-sm">
+                <div
+                  v-if="excludedDates.length > 0"
+                  class="q-mt-sm"
+                >
                   <q-chip
                     v-for="(date, index) in excludedDates"
                     :key="date"
@@ -183,8 +208,14 @@
     </transition>
 
     <!-- Riepilogo -->
-    <div v-if="summaryText" class="recurrence-selector__summary">
+    <div
-      <q-icon name="info" color="info" />
+      v-if="summaryText"
+      class="recurrence-selector__summary"
+    >
+      <q-icon
+        name="info"
+        color="info"
+      />
       <span>{{ summaryText }}</span>
     </div>
   </div>

src/modules/viaggi/components/ride/RideCalendar.vue

@@ -0,0 +1,920 @@
+<!-- components/ride/RideCalendar.vue -->
+<template>
+  <div class="ride-calendar">
+    <!-- Calendar Header -->
+    <div class="ride-calendar__header">
+      <q-btn
+        flat
+        round
+        icon="chevron_left"
+        color="primary"
+        @click="previousMonth"
+      />
+
+      <div class="ride-calendar__month-year">
+        <h2>{{ currentMonthName }} {{ currentYear }}</h2>
+        <p v-if="stats">
+          {{ stats.totalRides }} {{ stats.totalRides === 1 ? 'viaggio' : 'viaggi' }}
+        </p>
+      </div>
+
+      <q-btn
+        flat
+        round
+        icon="chevron_right"
+        color="primary"
+        @click="nextMonth"
+      />
+    </div>
+
+    <!-- Quick Navigation -->
+    <div class="ride-calendar__quick-nav">
+      <q-btn
+        flat
+        dense
+        label="Oggi"
+        color="primary"
+        size="sm"
+        @click="goToToday"
+      />
+      <q-btn
+        flat
+        dense
+        label="Questo Mese"
+        color="primary"
+        size="sm"
+        @click="goToCurrentMonth"
+      />
+    </div>
+
+    <!-- Loading -->
+    <div
+      v-if="loading"
+      class="ride-calendar__loading"
+    >
+      <q-spinner-dots
+        size="50px"
+        color="primary"
+      />
+      <p>Caricamento calendario...</p>
+    </div>
+
+    <!-- Calendar Grid -->
+    <div
+      v-else
+      class="ride-calendar__grid"
+    >
+      <!-- Weekday Headers -->
+      <div class="ride-calendar__weekdays">
+        <div
+          v-for="day in weekdays"
+          :key="day"
+          class="ride-calendar__weekday"
+        >
+          {{ day }}
+        </div>
+      </div>
+
+      <!-- Calendar Days -->
+      <div class="ride-calendar__days">
+        <!-- Empty cells for days before month starts -->
+        <div
+          v-for="n in startDayOffset"
+          :key="`empty-${n}`"
+          class="ride-calendar__day ride-calendar__day--empty"
+        />
+
+        <!-- Actual days -->
+        <div
+          v-for="day in daysInMonth"
+          :key="day"
+          :class="getDayClasses(day)"
+          @click="selectDay(day)"
+        >
+          <div class="ride-calendar__day-number">{{ day }}</div>
+
+          <div
+            v-if="getDayData(day)"
+            class="ride-calendar__day-info"
+          >
+            <div class="ride-calendar__day-rides">
+              {{ getDayData(day).count }}
+            </div>
+            <div class="ride-calendar__day-seats">
+              <q-icon
+                name="event_seat"
+                size="10px"
+              />
+              {{ getDayData(day).totalSeats }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Legend -->
+    <div class="ride-calendar__legend">
+      <div class="ride-calendar__legend-item">
+        <div class="ride-calendar__legend-box ride-calendar__legend-box--today" />
+        <span>Oggi</span>
+      </div>
+      <div class="ride-calendar__legend-item">
+        <div class="ride-calendar__legend-box ride-calendar__legend-box--selected" />
+        <span>Selezionato</span>
+      </div>
+      <div class="ride-calendar__legend-item">
+        <div class="ride-calendar__legend-box ride-calendar__legend-box--has-rides" />
+        <span>Con viaggi</span>
+      </div>
+      <div class="ride-calendar__legend-item">
+        <div class="ride-calendar__legend-box ride-calendar__legend-box--past" />
+        <span>Passato</span>
+      </div>
+    </div>
+
+    <!-- Selected Day Details Drawer -->
+    <q-dialog
+      v-model="showDayDetails"
+      position="bottom"
+      :maximized="$q.screen.lt.sm"
+    >
+      <q-card class="ride-calendar__day-details">
+        <q-card-section class="row items-center q-pb-none">
+          <div class="text-h6">
+            {{ selectedDateFormatted }}
+          </div>
+          <q-space />
+          <q-btn
+            icon="close"
+            flat
+            round
+            dense
+            v-close-popup
+          />
+        </q-card-section>
+
+        <q-card-section v-if="selectedDayRides && selectedDayRides.length > 0">
+          <div class="ride-calendar__day-summary">
+            <div class="ride-calendar__summary-item">
+              <q-icon
+                name="directions_car"
+                color="primary"
+                size="24px"
+              />
+              <div>
+                <div class="ride-calendar__summary-value">
+                  {{ selectedDayRides.length }}
+                </div>
+                <div class="ride-calendar__summary-label">
+                  {{ selectedDayRides.length === 1 ? 'Viaggio' : 'Viaggi' }}
+                </div>
+              </div>
+            </div>
+            <div class="ride-calendar__summary-item">
+              <q-icon
+                name="event_seat"
+                color="positive"
+                size="24px"
+              />
+              <div>
+                <div class="ride-calendar__summary-value">
+                  {{ selectedDayTotalSeats }}
+                </div>
+                <div class="ride-calendar__summary-label">Posti disponibili</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Rides List -->
+          <div class="ride-calendar__rides-list">
+            <div
+              v-for="ride in selectedDayRides"
+              :key="ride._id"
+              class="ride-calendar__ride-item"
+              @click="viewRide(ride._id)"
+            >
+              <div class="ride-calendar__ride-time">
+                {{ ride.time }}
+                <q-icon
+                  v-if="ride._isRecurrence"
+                  name="repeat"
+                  size="12px"
+                  color="primary"
+                  class="q-ml-xs"
+                >
+                  <q-tooltip>Viaggio ricorrente</q-tooltip>
+                </q-icon>
+              </div>
+              <div class="ride-calendar__ride-info">
+                <div class="ride-calendar__ride-route">
+                  <span>{{ ride.departure }}</span>
+                  <q-icon
+                    name="arrow_forward"
+                    size="14px"
+                  />
+                  <span>{{ ride.destination }}</span>
+                </div>
+                <div class="ride-calendar__ride-meta">
+                  <q-avatar size="20px">
+                    <img
+                      v-if="ride.driver?.profile?.img"
+                      :src="ride.driver.profile.img"
+                    />
+                    <div
+                      v-else
+                      class="ride-calendar__avatar-mini"
+                    >
+                      {{ getDriverInitials(ride.driver) }}
+                    </div>
+                  </q-avatar>
+                  <span>{{ ride.driver?.name }} {{ ride.driver?.surname }}</span>
+                </div>
+              </div>
+              <div class="ride-calendar__ride-details">
+                <q-chip
+                  size="sm"
+                  color="positive"
+                  text-color="white"
+                  dense
+                >
+                  €{{ ride.price }}
+                </q-chip>
+                <q-chip
+                  size="sm"
+                  color="info"
+                  text-color="white"
+                  dense
+                >
+                  {{ ride.availableSeats }} posti
+                </q-chip>
+              </div>
+              <q-icon
+                name="chevron_right"
+                color="grey-5"
+              />
+            </div>
+          </div>
+
+          <q-btn
+            color="primary"
+            label="Vedi tutti in lista"
+            icon="list"
+            unelevated
+            rounded
+            class="full-width q-mt-md"
+            @click="viewAllDayRides"
+          />
+        </q-card-section>
+
+        <q-card-section v-else>
+          <div class="text-center q-pa-lg">
+            <q-icon
+              name="event_busy"
+              size="48px"
+              color="grey-4"
+            />
+            <p class="text-grey-6 q-mt-md">Nessun viaggio disponibile per questa data</p>
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, watch, PropType } from 'vue';
+import { useRouter } from 'vue-router';
+import { useQuasar, date as qdate } from 'quasar';
+import type { CalendarData } from '../../composables/useCommunityRides';
+
+export default defineComponent({
+  name: 'RideCalendar',
+
+  props: {
+    calendarData: {
+      type: Object as PropType<CalendarData | null>,
+      default: null,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: ['month-change', 'day-select', 'view-ride'],
+
+  setup(props, { emit }) {
+    const router = useRouter();
+    const $q = useQuasar();
+
+    // State
+    const currentMonth = ref(new Date().getMonth());
+    const currentYear = ref(new Date().getFullYear());
+    const selectedDay = ref<number | null>(null);
+    const showDayDetails = ref(false);
+
+    const weekdays = ['Lun', 'Mar', 'Mer', 'Gio', 'Ven', 'Sab', 'Dom'];
+
+    // Computed
+    const currentMonthName = computed(() => {
+      const monthNames = [
+        'Gennaio',
+        'Febbraio',
+        'Marzo',
+        'Aprile',
+        'Maggio',
+        'Giugno',
+        'Luglio',
+        'Agosto',
+        'Settembre',
+        'Ottobre',
+        'Novembre',
+        'Dicembre',
+      ];
+      return monthNames[currentMonth.value];
+    });
+
+    const daysInMonth = computed(() => {
+      return new Date(currentYear.value, currentMonth.value + 1, 0).getDate();
+    });
+
+    const startDayOffset = computed(() => {
+      const firstDay = new Date(currentYear.value, currentMonth.value, 1).getDay();
+      // Convert Sunday (0) to 7, and shift so Monday is 0
+      return firstDay === 0 ? 6 : firstDay - 1;
+    });
+
+    const stats = computed(() => {
+      if (!props.calendarData) return null;
+      return {
+        totalRides: props.calendarData.totalRides,
+        datesWithRides: props.calendarData.datesWithRides,
+      };
+    });
+
+    const selectedDateFormatted = computed(() => {
+      if (!selectedDay.value) return '';
+      const date = new Date(currentYear.value, currentMonth.value, selectedDay.value);
+      return qdate.formatDate(date, 'dddd DD MMMM YYYY');
+    });
+
+    const selectedDayRides = computed(() => {
+      if (!selectedDay.value || !props.calendarData) return [];
+      const dateKey = getDateKey(selectedDay.value);
+      return props.calendarData.ridesByDate[dateKey]?.rides || [];
+    });
+
+    const selectedDayTotalSeats = computed(() => {
+      if (!selectedDay.value || !props.calendarData) return 0;
+      const dateKey = getDateKey(selectedDay.value);
+      return props.calendarData.ridesByDate[dateKey]?.totalSeats || 0;
+    });
+
+    // Methods
+    const getDateKey = (day: number): string => {
+      const date = new Date(currentYear.value, currentMonth.value, day);
+      return qdate.formatDate(date, 'YYYY-MM-DD');
+    };
+
+    const getDayData = (day: number) => {
+      if (!props.calendarData) return null;
+      const dateKey = getDateKey(day);
+      return props.calendarData.ridesByDate[dateKey] || null;
+    };
+
+    const isToday = (day: number): boolean => {
+      const today = new Date();
+      return (
+        day === today.getDate() &&
+        currentMonth.value === today.getMonth() &&
+        currentYear.value === today.getFullYear()
+      );
+    };
+
+    const isPast = (day: number): boolean => {
+      const date = new Date(currentYear.value, currentMonth.value, day);
+      const today = new Date();
+      today.setHours(0, 0, 0, 0);
+      return date < today;
+    };
+
+    const getDayClasses = (day: number) => {
+      return {
+        'ride-calendar__day': true,
+        'ride-calendar__day--today': isToday(day),
+        'ride-calendar__day--selected': selectedDay.value === day,
+        'ride-calendar__day--has-rides': !!getDayData(day),
+        'ride-calendar__day--past': isPast(day),
+      };
+    };
+
+    const selectDay = (day: number) => {
+      if (isPast(day)) return;
+
+      selectedDay.value = day;
+      showDayDetails.value = true;
+
+      const dateKey = getDateKey(day);
+      emit('day-select', dateKey);
+    };
+
+    const previousMonth = () => {
+      if (currentMonth.value === 0) {
+        currentMonth.value = 11;
+        currentYear.value--;
+      } else {
+        currentMonth.value--;
+      }
+    };
+
+    const nextMonth = () => {
+      if (currentMonth.value === 11) {
+        currentMonth.value = 0;
+        currentYear.value++;
+      } else {
+        currentMonth.value++;
+      }
+    };
+
+    const goToToday = () => {
+      const today = new Date();
+      currentMonth.value = today.getMonth();
+      currentYear.value = today.getFullYear();
+      selectedDay.value = today.getDate();
+      showDayDetails.value = true;
+    };
+
+    const goToCurrentMonth = () => {
+      const today = new Date();
+      currentMonth.value = today.getMonth();
+      currentYear.value = today.getFullYear();
+      selectedDay.value = null;
+    };
+
+    const viewRide = (rideId: string) => {
+      showDayDetails.value = false;
+      emit('view-ride', rideId);
+    };
+
+    const viewAllDayRides = () => {
+      showDayDetails.value = false;
+      const dateKey = getDateKey(selectedDay.value!);
+      emit('day-select', dateKey);
+    };
+
+    const getDriverInitials = (driver: any) => {
+      if (!driver) return '?';
+      const name = driver.name || '';
+      const surname = driver.surname || '';
+      return `${name.charAt(0)}${surname.charAt(0)}`.toUpperCase();
+    };
+
+    // Watch for month/year changes
+    watch([currentMonth, currentYear], () => {
+      emit('month-change', currentMonth.value, currentYear.value);
+    });
+
+    const getRecurrenceDatesForRide = (
+      ride: any,
+      startRange: Date,
+      endRange: Date
+    ): Date[] => {
+      const { recurrence, departureDate } = ride;
+
+      if (!recurrence || recurrence.type === 'once') {
+        const date = new Date(departureDate);
+        if (date >= startRange && date <= endRange) {
+          return [date];
+        }
+        return [];
+      }
+
+      const dates: Date[] = [];
+      const excludedSet = new Set(
+        (recurrence.excludedDates || []).map(
+          (d: any) => new Date(d).toISOString().split('T')[0]
+        )
+      );
+
+      if (recurrence.type === 'weekly' || recurrence.type === 'custom_days') {
+        if (!recurrence.daysOfWeek?.length) return [new Date(departureDate)];
+
+        let current = new Date(startRange);
+        while (current <= endRange) {
+          if (recurrence.daysOfWeek.includes(current.getDay())) {
+            const dateStr = current.toISOString().split('T')[0];
+            if (!excludedSet.has(dateStr)) {
+              dates.push(new Date(current));
+            }
+          }
+          current.setDate(current.getDate() + 1);
+        }
+      } else if (recurrence.type === 'custom_dates') {
+        (recurrence.customDates || []).forEach((date: any) => {
+          const d = new Date(date);
+          if (d >= startRange && d <= endRange) {
+            const dateStr = d.toISOString().split('T')[0];
+            if (!excludedSet.has(dateStr)) {
+              dates.push(d);
+            }
+          }
+        });
+      }
+
+      return dates;
+    };
+
+    return {
+      // State
+      currentMonth,
+      currentYear,
+      selectedDay,
+      showDayDetails,
+      weekdays,
+
+      // Computed
+      currentMonthName,
+      daysInMonth,
+      startDayOffset,
+      stats,
+      selectedDateFormatted,
+      selectedDayRides,
+      selectedDayTotalSeats,
+
+      // Methods
+      getDayData,
+      getDayClasses,
+      selectDay,
+      previousMonth,
+      nextMonth,
+      goToToday,
+      goToCurrentMonth,
+      viewRide,
+      viewAllDayRides,
+      getDriverInitials,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.ride-calendar {
+  background: white;
+  border-radius: 16px;
+  padding: 16px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+
+  // Header
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+  }
+
+  &__month-year {
+    text-align: center;
+
+    h2 {
+      font-size: 20px;
+      font-weight: 600;
+      margin: 0;
+      color: #333;
+    }
+
+    p {
+      margin: 4px 0 0;
+      font-size: 13px;
+      color: #888;
+    }
+  }
+
+  // Quick Nav
+  &__quick-nav {
+    display: flex;
+    gap: 8px;
+    justify-content: center;
+    margin-bottom: 16px;
+  }
+
+  // Loading
+  &__loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 40px 20px;
+
+    p {
+      margin-top: 12px;
+      color: #888;
+    }
+  }
+
+  // Grid
+  &__grid {
+    margin-bottom: 16px;
+  }
+
+  &__weekdays {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 4px;
+    margin-bottom: 8px;
+  }
+
+  &__weekday {
+    text-align: center;
+    font-size: 12px;
+    font-weight: 600;
+    color: #666;
+    padding: 8px 4px;
+  }
+
+  &__days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 4px;
+  }
+
+  &__day {
+    aspect-ratio: 1;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    padding: 4px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    transition: all 0.2s;
+    background: white;
+
+    &:hover:not(&--past):not(&--empty) {
+      background: #f5f5f5;
+      border-color: #667eea;
+    }
+
+    &--empty {
+      border: none;
+      cursor: default;
+    }
+
+    &--today {
+      border: 2px solid #667eea;
+      font-weight: 700;
+    }
+
+    &--selected {
+      background: #667eea;
+      border-color: #667eea;
+
+      .ride-calendar__day-number {
+        color: white;
+      }
+
+      .ride-calendar__day-info {
+        color: white;
+      }
+    }
+
+    &--has-rides {
+      background: #f0f4ff;
+      border-color: #667eea;
+    }
+
+    &--past {
+      opacity: 0.4;
+      cursor: not-allowed;
+
+      &:hover {
+        background: white;
+        border-color: #e0e0e0;
+      }
+    }
+  }
+
+  &__day-number {
+    font-size: 14px;
+    font-weight: 600;
+    color: #333;
+  }
+
+  &__day-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+    font-size: 10px;
+    color: #667eea;
+  }
+
+  &__day-rides {
+    font-weight: 700;
+  }
+
+  &__day-seats {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  // Legend
+  &__legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+    justify-content: center;
+    padding-top: 16px;
+    border-top: 1px solid #f0f0f0;
+  }
+
+  &__legend-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: #666;
+  }
+
+  &__legend-box {
+    width: 16px;
+    height: 16px;
+    border-radius: 4px;
+
+    &--today {
+      border: 2px solid #667eea;
+      background: white;
+    }
+
+    &--selected {
+      background: #667eea;
+    }
+
+    &--has-rides {
+      background: #f0f4ff;
+      border: 1px solid #667eea;
+    }
+
+    &--past {
+      background: #f5f5f5;
+      opacity: 0.4;
+    }
+  }
+
+  // Day Details
+  &__day-details {
+    max-width: 600px;
+    margin: 0 auto;
+  }
+
+  &__day-summary {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+    margin-bottom: 20px;
+  }
+
+  &__summary-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    background: #f8f9fa;
+    border-radius: 12px;
+  }
+
+  &__summary-value {
+    font-size: 24px;
+    font-weight: 700;
+    color: #333;
+    line-height: 1;
+  }
+
+  &__summary-label {
+    font-size: 12px;
+    color: #888;
+  }
+
+  &__rides-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    max-height: 400px;
+    overflow-y: auto;
+  }
+
+  &__ride-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px;
+    background: #f8f9fa;
+    border-radius: 12px;
+    cursor: pointer;
+    transition: all 0.2s;
+
+    &:hover {
+      background: #e9ecef;
+      transform: translateX(4px);
+    }
+  }
+
+  &__ride-time {
+    font-weight: 700;
+    color: #667eea;
+    min-width: 50px;
+  }
+
+  &__ride-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__ride-route {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-weight: 600;
+    font-size: 14px;
+    color: #333;
+  }
+
+  &__ride-meta {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: #888;
+  }
+
+  &__avatar-mini {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    font-weight: 600;
+    font-size: 10px;
+    border-radius: 50%;
+  }
+
+  &__ride-details {
+    display: flex;
+    gap: 4px;
+  }
+}
+
+// Dark Mode
+.body--dark {
+  .ride-calendar {
+    background: #1e1e30;
+
+    &__month-year h2 {
+      color: #fff;
+    }
+
+    &__day {
+      background: #2a2a40;
+      border-color: rgba(255, 255, 255, 0.1);
+
+      &:hover:not(&--past):not(&--empty) {
+        background: rgba(255, 255, 255, 0.1);
+      }
+
+      &--has-rides {
+        background: rgba(102, 126, 234, 0.2);
+      }
+
+      &--selected {
+        background: #667eea;
+      }
+    }
+
+    &__day-number {
+      color: #fff;
+    }
+
+    &__legend {
+      border-color: rgba(255, 255, 255, 0.1);
+    }
+
+    &__summary-item,
+    &__ride-item {
+      background: rgba(255, 255, 255, 0.05);
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.1);
+      }
+    }
+
+    &__summary-value,
+    &__ride-route {
+      color: #fff;
+    }
+  }
+}
+</style>

src/modules/viaggi/components/ride/RideCard.ts

@@ -87,17 +87,17 @@ export default defineComponent({
 
     // Date computed
     const formattedDate = computed(() => {
-      return formatRideDate(props.ride.dateTime);
+      return formatRideDate(props.ride.departureDate);
     });
 
     const formattedDepartureTime = computed(() => {
-      const date = new Date(props.ride.dateTime);
+      const date = new Date(props.ride.departureDate);
       return date.toLocaleTimeString('it-IT', { hour: '2-digit', minute: '2-digit' });
     });
 
     const estimatedArrival = computed(() => {
       if (!props.ride.estimatedDuration) return null;
-      const departure = new Date(props.ride.dateTime);
+      const departure = new Date(props.ride.departureDate);
       const arrival = new Date(departure.getTime() + props.ride.estimatedDuration * 60000);
       return arrival.toLocaleTimeString('it-IT', { hour: '2-digit', minute: '2-digit' });
     });

src/modules/viaggi/components/ride/RideMap.ts

@@ -247,7 +247,7 @@ export default defineComponent({
       }
 
       loading.value = true;
-      console.log('🚗 Calculating route...');
+      // console.log('🚗 Calculating route...');
 
       try {
         const waypointCoords: Coordinates[] = props.waypoints

src/modules/viaggi/components/ride/VehicleSelector.ts

@@ -1,5 +1,5 @@
 import { ref, reactive, computed, watch, defineComponent, PropType } from 'vue';
-import type { Vehicle, VehicleType, VehicleFeature } from '../../types';
+import type { Vehicle } from '../../types';
 import { VEHICLE_TYPES, VEHICLE_COLORS, VEHICLE_FEATURES_OPTIONS } from '../../types';
 
 export default defineComponent({
@@ -26,7 +26,7 @@ export default defineComponent({
     // State
     const showNewVehicleForm = ref(false);
     const saveVehicleToProfile = ref(false);
-    const selectedFeatures = ref<VehicleFeature[]>([]);
+    const selectedFeatures = ref<string[]>([]);
 
     const localVehicle = reactive<Vehicle>({
       type: 'auto',
@@ -41,7 +41,6 @@ export default defineComponent({
     });
 
     // Options
-    const vehicleTypes = VEHICLE_TYPES;
     const vehicleFeatures = VEHICLE_FEATURES_OPTIONS;
     const colorOptions = VEHICLE_COLORS.map((c) => ({
       label: c.name,
@@ -99,15 +98,8 @@ export default defineComponent({
       showNewVehicleForm.value = false;
     };
 
-    const getVehicleTypeIcon = (type?: VehicleType): string => {
+    const getVehicleTypeIcon = (type?: string): string => {
-      const icons: Record<VehicleType, string> = {
+      return VEHICLE_TYPES.find((vt: any) => vt.value === type)?.icon || ' ';
-        auto: '🚗',
-        moto: '🏍️',
-        furgone: '🚐',
-        minibus: '🚌',
-        altro: '🚙',
-      };
-      return icons[type || 'auto'] || '🚗';
     };
 
     const getColorHex = (colorName?: string): string => {
@@ -127,7 +119,7 @@ export default defineComponent({
       localVehicle,
 
       // Options
-      vehicleTypes,
+      VEHICLE_TYPES,
       vehicleFeatures,
       colorOptions,
 

src/modules/viaggi/components/ride/VehicleSelector.vue

@@ -76,7 +76,7 @@
             <div class="vehicle-selector__label">Tipo veicolo:</div>
             <div class="vehicle-selector__type-buttons">
               <q-btn
-                v-for="type in vehicleTypes"
+                v-for="type in VEHICLE_TYPES"
                 :key="type.value"
                 :color="localVehicle.type === type.value ? 'primary' : 'grey-4'"
                 :text-color="localVehicle.type === type.value ? 'white' : 'dark'"

src/modules/viaggi/components/widgets/RideWidget/RideWidget.ts

@@ -1,8 +1,7 @@
 // RideWidget.ts
-import { defineComponent, ref, computed, onMounted, watch } from 'vue';
+import { defineComponent, ref, computed, onMounted, watch, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { Api } from '@api';
-import type { Ride, ContribType } from '../../../types/viaggi.types';
 
 interface WidgetStats {
   offers: number;
@@ -10,6 +9,27 @@ interface WidgetStats {
   matches: number;
 }
 
+interface ContribType {
+  label: string;
+  value?: number;
+}
+
+interface Ride {
+  _id: string;
+  type: 'offer' | 'request';
+  departure: { city: string; address?: string; lat?: number; lng?: number };
+  destination: { city: string; address?: string; lat?: number; lng?: number };
+  departureDate: string | Date;
+  status: string;
+  availableSeats?: number;
+  contribution?: {
+    types: ContribType[];
+    euroPrice?: number;
+    risPrice?: number;
+  };
+  userId?: any;
+}
+
 interface WidgetData {
   stats: WidgetStats;
   recentRides: Ride[];
@@ -72,9 +92,10 @@ export default defineComponent({
       loading.value = true;
 
       try {
-        const response = await Api.SendReqWithData('/api/viaggi/widget/data', 'GET', {});
+        // ✅ Chiamata corretta con Api.SendReq
+        const response = await Api.SendReqWithData('/api/viaggi/widget/data', 'GET');
 
-        if (response.success) {
+        if (response.success && response.data) {
           const data: WidgetData = response.data;
 
           stats.value = data.stats || { offers: 0, requests: 0, matches: 0 };
@@ -84,10 +105,25 @@ export default defineComponent({
           unreadMessages.value = data.unreadMessages || 0;
 
           emit('loaded', data);
+        } else {
+          console.warn('⚠️ Risposta vuota o non valida dal widget API');
+          // Imposta valori di default
+          stats.value = { offers: 0, requests: 0, matches: 0 };
+          recentRides.value = [];
+          myActiveRides.value = [];
+          pendingRequests.value = 0;
+          unreadMessages.value = 0;
         }
-      } catch (error) {
+      } catch (error: any) {
-        console.error('Errore caricamento widget trasporti:', error);
+        console.error('❌ Errore caricamento widget trasporti:', error);
         emit('error', error);
+
+        // Imposta valori di default in caso di errore
+        stats.value = { offers: 0, requests: 0, matches: 0 };
+        recentRides.value = [];
+        myActiveRides.value = [];
+        pendingRequests.value = 0;
+        unreadMessages.value = 0;
       } finally {
         loading.value = false;
       }
@@ -95,13 +131,16 @@ export default defineComponent({
 
     const loadStats = async () => {
       try {
-        const response = await Api.SendReqWithData('/api/viaggi/stats/summary', 'GET');
+        // Carica solo le statistiche rapide (più leggero)
+        const response = await Api.SendReqWithData('/api/viaggi/widget/stats', 'GET');
 
-        if (response.success) {
+        if (response.success && response.data) {
-          stats.value = response.data;
+          // Aggiorna solo alcuni dati
+          pendingRequests.value = response.data.pendingRequests || 0;
+          unreadMessages.value = response.data.unreadMessages || 0;
         }
       } catch (error) {
-        console.error('Errore caricamento stats:', error);
+        console.error('❌ Errore caricamento stats:', error);
       }
     };
 
@@ -141,7 +180,7 @@ export default defineComponent({
         'Baratto': '🤝',
         'Scambio Lavoro': '💪',
         'Monete Alternative': '🪙',
-        'RIS': '🍚',
+        'RIS': '🌟',
         'Euro': '💶',
         'Bitcoin': '₿',
         'Banca del Tempo': '⏳'
@@ -180,10 +219,11 @@ export default defineComponent({
 
     // Navigation
     const goToCreate = (type: 'offer' | 'request') => {
-      router.push({
+      if (type === 'offer') {
-        path: '/viaggi/crea',
+        router.push('/viaggi/offri');
-        query: { type }
+      } else {
-      });
+        router.push('/viaggi/richiedi');
+      }
     };
 
     const goToList = () => {
@@ -195,7 +235,7 @@ export default defineComponent({
     };
 
     const goToMyRides = () => {
-      router.push('/viaggi/rides/my');
+      router.push('/viaggi/miei-viaggi');
     };
 
     const goToSearch = () => {
@@ -238,14 +278,22 @@ export default defineComponent({
 
     // Lifecycle
     onMounted(() => {
-      loadStats();
+      // Carica dati iniziali
       if (props.defaultExpanded) {
         loadWidgetData();
+      } else {
+        loadStats();
       }
+
+      // Avvia auto-refresh
       startAutoRefresh();
     });
 
-    // Cleanup
+    onUnmounted(() => {
+      stopAutoRefresh();
+    });
+
+    // Watch per cambio interval
     watch(() => props.refreshInterval, () => {
       stopAutoRefresh();
       startAutoRefresh();

src/modules/viaggi/composables/useCommunityrides.ts

@@ -0,0 +1,366 @@
+// composables/useCommunityRides.ts
+import { ref, computed, watch } from 'vue';
+import { Api } from '@api';
+
+export interface CommunityStats {
+  total: number;
+  thisWeek: number;
+  next7Days: number;
+  totalSeatsAvailable: number;
+  byDayOfWeek: Array<{
+    date: string;
+    dayName: string;
+    count: number;
+    rides: string[];
+  }>;
+  popularRoutes: Array<{
+    departure: string;
+    destination: string;
+    count: number;
+    avgPrice: string | null;
+    availableSeats: number;
+  }>;
+  popularDestinations: Array<{
+    destination: Location;
+    count: number;
+  }>;
+}
+
+export interface CommunityRide {
+  _id: string;
+  userId: {
+    _id: string;
+    name: string;
+    surname: string;
+    username?: string;
+    profile?: { img?: string };
+    stats?: {
+      averageRating?: number;
+      totalRides?: number;
+      completedRides?: number;
+    };
+  };
+  vehicleId?: {
+    _id: string;
+    brand: string;
+    model: string;
+    plate: string;
+    type?: string;
+  };
+  departure: string;
+  destination: string;
+  departureDate: string;
+  _displayDate: string;
+  price: number;
+  passengers: {
+    total: number;
+    available: number;
+  };
+  preferences?: {
+    smoking?: boolean;
+    pets?: boolean;
+    music?: boolean;
+    chatter?: string;
+  };
+  notes?: string;
+  status: string;
+  userRequestStatus?: 'pending' | 'accepted' | 'rejected' | null;
+}
+
+export interface CommunityFilters {
+  departure: string;
+  destination: string;
+  dateFrom: string;
+  dateTo: string;
+  maxPrice: number | null;
+  minSeats: number | null;
+  sortBy: 'date' | 'price_asc' | 'price_desc' | 'seats' | 'rating';
+  vehicleType?: string | null;
+}
+
+export interface CalendarDate {
+  date: string;
+  count: number;
+  totalSeats: number;
+  rides: Array<{
+    _id: string;
+    departure: string;
+    destination: string;
+    time: string;
+    price: number;
+    availableSeats: number;
+    driver: any;
+  }>;
+}
+
+export interface CalendarData {
+  month: number;
+  year: number;
+  ridesByDate: Record<string, CalendarDate>;
+  totalRides: number;
+  datesWithRides: number;
+}
+
+const STOR_TRASP_COMMRIDE = 'trasp_commride_filter';
+
+const loadFiltersFromStorage = (): Partial<CommunityFilters> => {
+  try {
+    const stored = localStorage.getItem(STOR_TRASP_COMMRIDE);
+    if (stored) return JSON.parse(stored);
+  } catch (error) {
+    console.error('Errore caricamento filtri:', error);
+  }
+  return {};
+};
+
+const filters = ref<CommunityFilters>({
+  departure: '',
+  destination: '',
+  dateFrom: '',
+  dateTo: '',
+  maxPrice: null,
+  minSeats: null,
+  sortBy: 'date',
+  ...loadFiltersFromStorage(),
+});
+
+// Watch A LIVELLO DI MODULO (FUORI da useCommunityRides)
+watch(
+  filters,
+  (newFilters) => {
+    try {
+      localStorage.setItem(STOR_TRASP_COMMRIDE, JSON.stringify(newFilters));
+    } catch (error) {
+      console.error('Errore salvataggio filtri:', error);
+    }
+  },
+  { deep: true }
+);
+
+export function useCommunityRides() {
+  // State
+  const loading = ref(false);
+  const stats = ref<CommunityStats | null>(null);
+  const rides = ref<CommunityRide[]>([]);
+  const calendarData = ref<CalendarData | null>(null);
+
+  const pagination = ref({
+    page: 1,
+    limit: 20,
+    total: 0,
+    pages: 0,
+    hasMore: false,
+  });
+
+  // Computed
+  const hasFilters = computed(() => {
+    return !!(
+      filters.value.departure ||
+      filters.value.destination ||
+      filters.value.dateFrom ||
+      filters.value.dateTo ||
+      filters.value.maxPrice ||
+      filters.value.minSeats
+    );
+  });
+
+  const filteredRidesCount = computed(() => rides.value.length);
+
+  // Methods
+  const fetchStatsComm = async () => {
+    loading.value = true;
+    try {
+      const response = await Api.SendReqWithData('/api/viaggi/rides/statscomm', 'GET');
+
+      if (response.success) {
+        stats.value = response.data;
+      }
+
+      return response;
+    } catch (error: any) {
+      console.error('Error fetching community stats:', error);
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const fetchCommunityRides = async (page = 1, resetList = true) => {
+    loading.value = true;
+
+    try {
+      // Build query params
+      const params = new URLSearchParams({
+        page: page.toString(),
+        limit: pagination.value.limit.toString(),
+      });
+
+      if (filters.value.departure) {
+        params.append('departure', filters.value.departure);
+      }
+      if (filters.value.destination) {
+        params.append('destination', filters.value.destination);
+      }
+      if (filters.value.dateFrom) {
+        params.append('dateFrom', filters.value.dateFrom);
+      }
+      if (filters.value.dateTo) {
+        params.append('dateTo', filters.value.dateTo);
+      }
+      if (filters.value.maxPrice) {
+        params.append('maxPrice', filters.value.maxPrice.toString());
+      }
+      if (filters.value.minSeats) {
+        params.append('minSeats', filters.value.minSeats.toString());
+      }
+      if (filters.value.sortBy) {
+        params.append('sortBy', filters.value.sortBy);
+      }
+
+      if (filters.value.vehicleType) {
+        params.append('vehicleType', filters.value.vehicleType);
+      }
+
+      const response = await Api.SendReqWithData(
+        `/api/viaggi/rides/community?${params.toString()}`,
+        'GET'
+      );
+
+      if (response.success) {
+        if (resetList) {
+          rides.value = response.data.rides;
+        } else {
+          rides.value.push(...response.data.rides);
+        }
+
+        pagination.value = response.data.pagination;
+      }
+
+      return response;
+    } catch (error: any) {
+      console.error('Error fetching community rides:', error);
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const fetchCalendarData = async (month?: number, year?: number) => {
+    loading.value = true;
+
+    try {
+      const params = new URLSearchParams();
+      if (month !== undefined) params.append('month', month.toString());
+      if (year !== undefined) params.append('year', year.toString());
+
+      const response = await Api.SendReqWithData(
+        `/api/viaggi/rides/calendar?${params.toString()}`,
+        'GET'
+      );
+
+      if (response.success) {
+        calendarData.value = response.data;
+      }
+
+      return response;
+    } catch (error: any) {
+      console.error('Error fetching calendar data:', error);
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const loadMore = async () => {
+    if (!pagination.value.hasMore || loading.value) return;
+    await fetchCommunityRides(pagination.value.page + 1, false);
+  };
+
+  const applyFilters = async (newFilters: Partial<CommunityFilters>) => {
+    filters.value = { ...filters.value, ...newFilters };
+    pagination.value.page = 1;
+    await fetchCommunityRides(1, true);
+  };
+
+  const clearFilters = async () => {
+    filters.value = {
+      departure: '',
+      destination: '',
+      dateFrom: '',
+      dateTo: '',
+      maxPrice: null,
+      minSeats: null,
+      sortBy: 'date',
+    };
+    pagination.value.page = 1;
+    await fetchCommunityRides(1, true);
+  };
+
+  const requestRide = async (rideId: string, message?: string) => {
+    try {
+      const response = await Api.SendReqWithData(`/api/viaggi/ride/request`, 'POST', {
+        rideId,
+        message,
+      });
+
+      if (response.success) {
+        // Update the ride's request status
+        const rideIndex = rides.value.findIndex((r) => r._id === rideId);
+        if (rideIndex !== -1) {
+          rides.value[rideIndex].userRequestStatus = 'pending';
+        }
+      }
+
+      return response;
+    } catch (error: any) {
+      console.error('Error requesting ride:', error);
+      throw error;
+    }
+  };
+
+  const cancelRideRequest = async (requestId: string, rideId: string) => {
+    try {
+      const response = await Api.SendReqWithData(
+        `/api/viaggi/ride/${requestId}/request`,
+        'DELETE'
+      );
+
+      if (response.success) {
+        // Update the ride's request status
+        const rideIndex = rides.value.findIndex((r) => r._id === rideId);
+        if (rideIndex !== -1) {
+          rides.value[rideIndex].userRequestStatus = null;
+        }
+      }
+
+      return response;
+    } catch (error: any) {
+      console.error('Error cancelling request:', error);
+      throw error;
+    }
+  };
+
+  return {
+    // State
+    loading,
+    stats,
+    rides,
+    calendarData,
+    pagination,
+    filters,
+
+    // Computed
+    hasFilters,
+    filteredRidesCount,
+
+    // Methods
+    fetchStatsComm,
+    fetchCommunityRides,
+    fetchCalendarData,
+    loadMore,
+    applyFilters,
+    clearFilters,
+    requestRide,
+    cancelRideRequest,
+  };
+}

src/modules/viaggi/composables/useContribTypes.ts

@@ -162,7 +162,7 @@ export function useContribTypes() {
     const type = findById(contribTypeId);
     if (!type) return false;
 
-    const noPriceTypes = ['dono', 'baratto', 'scambio lavoro'];
+    const noPriceTypes = ['dono', 'Offerta Libera', 'baratto', 'scambio lavoro'];
     return !noPriceTypes.includes(type.label.toLowerCase());
   };
 

src/modules/viaggi/composables/useNotifications.ts

@@ -0,0 +1,284 @@
+// composables/useNotifications.ts
+import { ref } from 'vue';
+import { Api } from '@api';
+
+export interface NotificationChannel {
+  enabled: boolean;
+  newRideRequest: boolean;
+  requestAccepted: boolean;
+  requestRejected: boolean;
+  rideReminder24h: boolean;
+  rideReminder2h: boolean;
+  rideCancelled: boolean;
+  newMessage: boolean;
+}
+
+export interface EmailNotifications extends NotificationChannel {
+  newCommunityRide: boolean;
+  weeklyDigest: boolean;
+}
+
+export interface TelegramNotifications extends NotificationChannel {
+  chatId: string | null;
+  username: string | null;
+}
+
+export interface PushNotifications extends NotificationChannel {
+  subscription: any;
+  newCommunityRide: boolean;
+}
+
+export interface NotificationPreferences {
+  email: EmailNotifications;
+  telegram: TelegramNotifications;
+  push: PushNotifications;
+}
+
+export function useNotifications() {
+  // State
+  const loading = ref(false);
+  const preferences = ref<NotificationPreferences | null>(null);
+  const testingSending = ref<string | null>(null);
+
+  // Methods
+  const fetchPreferences = async () => {
+    loading.value = true;
+
+    try {
+      const response = await Api.SendReqWithData(
+        '/api/viaggi/notifications/preferences',
+        'GET'
+      );
+
+      if (response.success) {
+        preferences.value = response.data;
+      }
+
+      return response;
+    } catch (error: any) {
+      console.error('Error fetching notification preferences:', error);
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const updatePreferences = async (updates: Partial<NotificationPreferences>) => {
+    loading.value = true;
+
+    try {
+      const response = await Api.SendReqWithData(
+        '/api/viaggi/notifications/preferences',
+        'PUT',
+        updates
+      );
+
+      if (response.success) {
+        preferences.value = response.data;
+      }
+
+      return response;
+    } catch (error: any) {
+      console.error('Error updating notification preferences:', error);
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const connectTelegram = async (chatId: string, username?: string) => {
+    loading.value = true;
+
+    try {
+      const response = await Api.SendReqWithData(
+        '/api/viaggi/notifications/telegram/connect',
+        'POST',
+        { chatId, username }
+      );
+
+      if (response.success) {
+        // Update local preferences
+        if (preferences.value) {
+          preferences.value.telegram.chatId = chatId;
+          preferences.value.telegram.username = username || null;
+          preferences.value.telegram.enabled = true;
+        }
+      }
+
+      return response;
+    } catch (error: any) {
+      console.error('Error connecting Telegram:', error);
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const disconnectTelegram = async () => {
+    loading.value = true;
+
+    try {
+      const response = await Api.SendReqWithData(
+        '/api/viaggi/notifications/telegram/disconnect',
+        'DELETE'
+      );
+
+      if (response.success) {
+        // Update local preferences
+        if (preferences.value) {
+          preferences.value.telegram.chatId = null;
+          preferences.value.telegram.username = null;
+          preferences.value.telegram.enabled = false;
+        }
+      }
+
+      return response;
+    } catch (error: any) {
+      console.error('Error disconnecting Telegram:', error);
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const subscribePush = async (subscription: any) => {
+    loading.value = true;
+
+    try {
+      const response = await Api.SendReqWithData(
+        '/api/viaggi/notifications/push/subscribe',
+        'POST',
+        { subscription }
+      );
+
+      if (response.success) {
+        // Update local preferences
+        if (preferences.value) {
+          preferences.value.push.subscription = subscription;
+          preferences.value.push.enabled = true;
+        }
+      }
+
+      return response;
+    } catch (error: any) {
+      console.error('Error subscribing to push notifications:', error);
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const unsubscribePush = async () => {
+    loading.value = true;
+
+    try {
+      const response = await Api.SendReqWithData(
+        '/api/viaggi/notifications/push/unsubscribe',
+        'DELETE'
+      );
+
+      if (response.success) {
+        // Update local preferences
+        if (preferences.value) {
+          preferences.value.push.subscription = null;
+          preferences.value.push.enabled = false;
+        }
+      }
+
+      return response;
+    } catch (error: any) {
+      console.error('Error unsubscribing from push notifications:', error);
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  const sendTestNotification = async (type: 'email' | 'telegram' | 'push') => {
+    testingSending.value = type;
+
+    try {
+      const response = await Api.SendReqWithData(
+        '/api/viaggi/notifications/test',
+        'POST',
+        { type }
+      );
+
+      return response;
+    } catch (error: any) {
+      console.error('Error sending test notification:', error);
+      throw error;
+    } finally {
+      testingSending.value = null;
+    }
+  };
+
+  // Web Push Helper
+  const requestPushPermission = async (): Promise<PushSubscription | null> => {
+    if (!('serviceWorker' in navigator) || !('PushManager' in window)) {
+      throw new Error('Push notifications non supportate dal browser');
+    }
+
+    // Request permission
+    const permission = await Notification.requestPermission();
+
+    if (permission !== 'granted') {
+      throw new Error('Permesso per le notifiche negato');
+    }
+
+    // Register service worker
+    const registration = await navigator.serviceWorker.register('/service-worker.js');
+
+    // Subscribe to push
+    const subscription = await registration.pushManager.subscribe({
+      userVisibleOnly: true,
+      applicationServerKey: urlBase64ToUint8Array(
+        import.meta.env.VITE_VAPID_PUBLIC_KEY
+      )
+    });
+
+    return subscription;
+  };
+
+  // Telegram Deep Link Generator
+  const getTelegramBotLink = (startParam?: string): string => {
+    const botUsername = import.meta.env.VITE_TELEGRAM_BOT_USERNAME;
+    const baseUrl = `https://t.me/${botUsername}`;
+    return startParam ? `${baseUrl}?start=${startParam}` : baseUrl;
+  };
+
+  return {
+    // State
+    loading,
+    preferences,
+    testingSending,
+
+    // Methods
+    fetchPreferences,
+    updatePreferences,
+    connectTelegram,
+    disconnectTelegram,
+    subscribePush,
+    unsubscribePush,
+    sendTestNotification,
+    requestPushPermission,
+    getTelegramBotLink
+  };
+}
+
+// Utility function for VAPID key conversion
+function urlBase64ToUint8Array(base64String: string): Uint8Array {
+  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
+  const base64 = (base64String + padding)
+    .replace(/-/g, '+')
+    .replace(/_/g, '/');
+
+  const rawData = window.atob(base64);
+  const outputArray = new Uint8Array(rawData.length);
+
+  for (let i = 0; i < rawData.length; ++i) {
+    outputArray[i] = rawData.charCodeAt(i);
+  }
+
+  return outputArray;
+}

src/modules/viaggi/composables/useRecentCities.ts

@@ -11,7 +11,7 @@ interface RecentCity {
   type: 'search' | 'trip';
 }
 
-const STORAGE_KEY = 'trasporti_recent_cities';
+const STOR_TRASP_CITIE = 'trasp_recent_cities';
 const MAX_RECENT = 10;
 
 export function useRecentCities() {
@@ -22,7 +22,7 @@ export function useRecentCities() {
    */
   const loadRecent = (): void => {
     try {
-      const stored = localStorage.getItem(STORAGE_KEY);
+      const stored = localStorage.getItem(STOR_TRASP_CITIE);
       if (stored) {
         recentCities.value = JSON.parse(stored);
       }
@@ -37,7 +37,7 @@ export function useRecentCities() {
    */
   const saveRecent = (): void => {
     try {
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(recentCities.value));
+      localStorage.setItem(STOR_TRASP_CITIE, JSON.stringify(recentCities.value));
     } catch (error) {
       console.error('Error saving recent cities:', error);
     }
@@ -137,7 +137,7 @@ export function useRecentCities() {
    */
   const clearRecent = (): void => {
     recentCities.value = [];
-    localStorage.removeItem(STORAGE_KEY);
+    localStorage.removeItem(STOR_TRASP_CITIE);
   };
 
   /**

src/modules/viaggi/composables/useRideNotifications.ts

@@ -0,0 +1,56 @@
+// composables/useRideNotifications.ts
+import { ref } from 'vue';
+import { useQuasar } from 'quasar';
+import { CommunityFilters } from './useCommunityRides';
+import { Api } from 'app/src/store/Api';
+
+export function useRideNotifications() {
+  const $q = useQuasar();
+  const lastCheckTime = ref<string | null>(null);
+
+  const checkNewRides = async (filters: CommunityFilters) => {
+    // Get last check time from localStorage
+    const lastCheck = localStorage.getItem('last_rides_check');
+
+    if (!lastCheck) {
+      // First time, just save current time
+      localStorage.setItem('last_rides_check', new Date().toISOString());
+      return;
+    }
+
+    try {
+      // Fetch rides created after lastCheck
+      const response = await Api.SendReqWithData(
+        `/api/viaggi/rides/community?createdAfter=${lastCheck}`,
+        'GET'
+      );
+
+      if (response.success && response.data.rides.length > 0) {
+        $q.notify({
+          type: 'info',
+          message: `${response.data.rides.length} nuovi viaggi disponibili!`,
+          icon: 'notifications',
+          actions: [
+            {
+              label: 'Vedi',
+              color: 'white',
+              handler: () => {
+                // Navigate to list view
+              }
+            }
+          ],
+          timeout: 0
+        });
+      }
+
+      // Update last check time
+      localStorage.setItem('last_rides_check', new Date().toISOString());
+    } catch (error) {
+      console.error('Error checking new rides:', error);
+    }
+  };
+
+  return {
+    checkNewRides
+  };
+}

src/modules/viaggi/composables/useRides.ts

@@ -14,6 +14,8 @@ import type {
   Location,
 } from '../types';
 
+const STOR_TRASP_CITIE = 'trasp_ride_filters';
+
 // ============================================================
 // STATE
 // ============================================================
@@ -41,13 +43,45 @@ const pagination = reactive({
   pages: 0,
 });
 
-const filters = reactive<RideSearchFilters>({
+// Carica filtri da localStorage
+const loadFiltersFromStorage = (): RideSearchFilters => {
+  try {
+    const stored = localStorage.getItem(STOR_TRASP_CITIE);
+    if (stored) {
+      return JSON.parse(stored);
+    }
+  } catch (error) {
+    console.error('Errore caricamento filtri da localStorage:', error);
+  }
+
+  // Default
+  return {
     type: undefined,
     from: '',
     to: '',
     date: '',
     seats: 1,
-});
+  };
+};
+
+const filters = reactive<RideSearchFilters>(loadFiltersFromStorage());
+
+// ------------------------------------------------------------
+// WATCHERS
+// ------------------------------------------------------------
+
+// Salva filtri in localStorage quando cambiano
+watch(
+  filters,
+  (newFilters) => {
+    try {
+      localStorage.setItem(STOR_TRASP_CITIE, JSON.stringify(newFilters));
+    } catch (error) {
+      console.error('Errore salvataggio filtri in localStorage:', error);
+    }
+  },
+  { deep: true }
+);
 
 // ============================================================
 // COMPOSABLE
@@ -240,7 +274,8 @@ export function useRides() {
 
       return response;
     } catch (err: any) {
-      error.value = err.data?.message || err.message ||'Errore nella creazione del viaggio';
+      error.value =
+        err.data?.message || err.message || 'Errore nella creazione del viaggio';
       throw err;
     } finally {
       loading.value = false;
@@ -274,7 +309,8 @@ export function useRides() {
 
       return response;
     } catch (err: any) {
-      error.value = err.data?.message || err.message ||"Errore nell'aggiornamento del viaggio";
+      error.value =
+        err.data?.message || err.message || "Errore nell'aggiornamento del viaggio";
       throw err;
     } finally {
       loading.value = false;
@@ -289,9 +325,13 @@ export function useRides() {
       loading.value = true;
       error.value = null;
 
-      const response = (await Api.SendReqWithData(`/api/viaggi/rides/${rideId}`, 'DELETE', {
+      const response = (await Api.SendReqWithData(
+        `/api/viaggi/rides/${rideId}`,
+        'DELETE',
+        {
           reason,
-      })) as ApiResponse<void>;
+        }
+      )) as ApiResponse<void>;
 
       if (response.success) {
         // Rimuovi dalla lista
@@ -303,7 +343,8 @@ export function useRides() {
 
       return response;
     } catch (err: any) {
-      error.value = err.data?.message || err.message ||'Errore nella cancellazione del viaggio';
+      error.value =
+        err.data?.message || err.message || 'Errore nella cancellazione del viaggio';
       throw err;
     } finally {
       loading.value = false;
@@ -335,7 +376,8 @@ export function useRides() {
 
       return response;
     } catch (err: any) {
-      error.value = err.data?.message || err.message ||'Errore nel completamento del viaggio';
+      error.value =
+        err.data?.message || err.message || 'Errore nel completamento del viaggio';
       throw err;
     } finally {
       loading.value = false;
@@ -375,7 +417,8 @@ export function useRides() {
 
       return response;
     } catch (err: any) {
-      error.value = err.data?.message || err.message ||'Errore nel recupero dei tuoi viaggi';
+      error.value =
+        err.data?.message || err.message || 'Errore nel recupero dei tuoi viaggi';
       throw err;
     } finally {
       loading.value = false;
@@ -417,6 +460,9 @@ export function useRides() {
     }
   };
 
+  /**
+   * Reset filtri
+   */
   /**
    * Reset filtri
    */
@@ -427,6 +473,13 @@ export function useRides() {
     filters.date = '';
     filters.seats = 1;
     filters.passingThrough = '';
+
+    // Rimuovi da localStorage
+    try {
+      localStorage.removeItem(STOR_TRASP_CITIE);
+    } catch (error) {
+      console.error('Errore rimozione filtri da localStorage:', error);
+    }
   };
 
   /**
@@ -523,7 +576,7 @@ export function useRides() {
    * Verifica se il viaggio è nel passato
    */
   const isPastRide = (ride: Ride) => {
-    return new Date(ride.dateTime) < new Date();
+    return new Date(ride.departureDate) < new Date();
   };
 
   /**
@@ -538,6 +591,20 @@ export function useRides() {
     return true;
   };
 
+  // Aggiungi il metodo
+  const fetchCancelledRides = async (page = 1, limit = 20) => {
+    try {
+      const response = await Api.SendReqWithData(
+        `/api/viaggi/rides/cancelled?page=${page}&limit=${limit}`,
+        'GET'
+      );
+      return response;
+    } catch (error: any) {
+      console.error('Error fetching cancelled rides:', error);
+      throw error;
+    }
+  };
+
   // ------------------------------------------------------------
   // RETURN
   // ------------------------------------------------------------
@@ -582,5 +649,6 @@ export function useRides() {
     getStatusLabel,
     isPastRide,
     canBook,
+    fetchCancelledRides,
   };
 }

src/modules/viaggi/composables/useSavedFilters.ts

@@ -0,0 +1,50 @@
+// composables/useSavedFilters.ts
+import { ref } from 'vue';
+
+interface SavedFilter {
+  id: string;
+  name: string;
+  filters: CommunityFilters;
+  createdAt: string;
+}
+
+export function useSavedFilters() {
+  const savedFilters = ref<SavedFilter[]>([]);
+
+  const loadFromStorage = () => {
+    const stored = localStorage.getItem('saved_filters');
+    if (stored) {
+      savedFilters.value = JSON.parse(stored);
+    }
+  };
+
+  const saveFilter = (name: string, filters: CommunityFilters) => {
+    const newFilter: SavedFilter = {
+      id: Date.now().toString(),
+      name,
+      filters,
+      createdAt: new Date().toISOString()
+    };
+
+    savedFilters.value.push(newFilter);
+    localStorage.setItem('saved_filters', JSON.stringify(savedFilters.value));
+  };
+
+  const deleteFilter = (id: string) => {
+    savedFilters.value = savedFilters.value.filter(f => f.id !== id);
+    localStorage.setItem('saved_filters', JSON.stringify(savedFilters.value));
+  };
+
+  const applyFilter = (id: string) => {
+    const filter = savedFilters.value.find(f => f.id === id);
+    return filter?.filters || null;
+  };
+
+  return {
+    savedFilters,
+    loadFromStorage,
+    saveFilter,
+    deleteFilter,
+    applyFilter
+  };
+}

src/modules/viaggi/pages/DriverProfilePage.ts

@@ -5,7 +5,7 @@ import { useDriverProfile } from '../composables/useDriverProfile';
 import { useChat } from '../composables/useChat';
 import RideCard from '../components/ride/RideCard.vue';
 import FeedbackList from '../components/feedback/FeedbackList.vue';
-import type { DriverPublicProfile } from '../types';
+import { VEHICLE_TYPES } from '../types/viaggi.types';
 import { useUserStore } from 'app/src/store';
 
 export default defineComponent({
@@ -108,14 +108,8 @@ export default defineComponent({
     };
 
     const getVehicleIcon = (type?: string): string => {
-      const icons: Record<string, string> = {
+      const vehicleType = VEHICLE_TYPES.find((vt) => vt.value === type);
-        auto: '🚗',
+      return vehicleType ? vehicleType.icon : ' ';
-        moto: '🏍️',
-        furgone: '🚐',
-        minibus: '🚌',
-        altro: '🚙'
-      };
-      return icons[type || 'auto'] || '🚗';
     };
 
     const formatBadgeName = (name: string): string => {

src/modules/viaggi/pages/MyRidesPage.ts

@@ -20,12 +20,13 @@ export default defineComponent({
     const router = useRouter();
     const $q = useQuasar();
 
-    const userStore = useUserStore()
+    const userStore = useUserStore();
 
     const {
       myRides,
       loading,
       fetchMyRides,
+      fetchCancelledRides,
       deleteRide,
       completeRideApi,
     } = useRides();
@@ -50,6 +51,15 @@ export default defineComponent({
     const selectedRide = ref<Ride | null>(null);
     const selectedRideRequests = ref<RideRequest[]>([]);
     const currentUserId = ref<string>(userStore.my._id);
+    const cancelledRides = ref<Ride[]>([]);
+    const loadingCancelled = ref(false);
+    const cancelledPagination = ref({
+      page: 1,
+      hasMore: false
+    });
+
+    // Badge for new community rides
+    const newCommunityRidesCount = ref(0);
 
     // Filters
     const roleFilters = [
@@ -61,6 +71,7 @@ export default defineComponent({
     // Computed
     const upcomingCount = computed(() => myRides.upcoming.length);
     const pendingRequestsCount = computed(() => requestCounts.value.pending);
+    const cancelledCount = computed(() => cancelledRides.value.length);
 
     const filteredUpcoming = computed(() => {
       if (roleFilter.value === 'all') return myRides.upcoming;
@@ -78,6 +89,14 @@ export default defineComponent({
       return myRides.past.filter(r => !isDriver(r));
     });
 
+    const filteredCancelled = computed(() => {
+      if (roleFilter.value === 'all') return cancelledRides.value;
+      if (roleFilter.value === 'driver') {
+        return cancelledRides.value.filter(r => isDriver(r));
+      }
+      return cancelledRides.value.filter(r => !isDriver(r));
+    });
+
     // Methods
     const isDriver = (ride: Ride): boolean => {
       const userId = typeof ride.userId === 'string' ? ride.userId : ride.userId._id;
@@ -92,12 +111,15 @@ export default defineComponent({
     };
 
     const canLeaveFeedback = (ride: Ride): boolean => {
-      // TODO: Implement logic to check if user can leave feedback
       return ride.status === 'completed';
     };
 
     const goToCreate = () => {
-      router.push({ path: '/viaggi/richiedi' });
+      router.push({ path: '/viaggi/crea' });
+    };
+
+    const goToCommunity = () => {
+      router.push({ path: '/viaggi/community?view=report' });
     };
 
     const goToRide = (rideId: string) => {
@@ -127,6 +149,10 @@ export default defineComponent({
           await deleteRide(ride._id, reason);
           $q.notify({ type: 'positive', message: 'Viaggio cancellato' });
           await fetchMyRides();
+          // Reload cancelled rides if on that tab
+          if (activeTab.value === 'cancelled') {
+            await loadCancelledRides();
+          }
         } catch (error: any) {
           $q.notify({ type: 'negative', message: error.data?.message || error.message });
         }
@@ -159,7 +185,7 @@ export default defineComponent({
     };
 
     const openFeedbackDialog = (ride: Ride) => {
-      router.push(`/viaggi/feedback/viaggio/${ride._id}`);
+      router.push(`/viaggi/feedback/viaggi/${ride._id}`);
     };
 
     const acceptRequest = async (request: RideRequest) => {
@@ -227,6 +253,38 @@ export default defineComponent({
       return user.username || 'Utente';
     };
 
+    const loadCancelledRides = async (page = 1) => {
+      loadingCancelled.value = true;
+      try {
+        const response = await fetchCancelledRides(page);
+
+        if (response.success) {
+          if (page === 1) {
+            cancelledRides.value = response.data.rides;
+          } else {
+            cancelledRides.value.push(...response.data.rides);
+          }
+
+          cancelledPagination.value = {
+            page: response.data.pagination.page,
+            hasMore: response.data.pagination.hasMore
+          };
+        }
+      } catch (error: any) {
+        $q.notify({
+          type: 'negative',
+          message: 'Errore nel caricamento dei viaggi cancellati'
+        });
+      } finally {
+        loadingCancelled.value = false;
+      }
+    };
+
+    const loadMoreCancelled = async () => {
+      if (!cancelledPagination.value.hasMore || loadingCancelled.value) return;
+      await loadCancelledRides(cancelledPagination.value.page + 1);
+    };
+
     // Watch tab changes
     watch(activeTab, async (tab) => {
       if (tab === 'requests') {
@@ -235,6 +293,8 @@ export default defineComponent({
         } else {
           await fetchSentRequests();
         }
+      } else if (tab === 'cancelled' && cancelledRides.value.length === 0) {
+        await loadCancelledRides();
       }
     });
 
@@ -250,6 +310,9 @@ export default defineComponent({
     onMounted(async () => {
       await fetchMyRides();
       await fetchReceivedRequests();
+
+      // TODO: Fetch new community rides count for badge
+      // This could be done with a separate API call or WebSocket
     });
 
     return {
@@ -261,10 +324,14 @@ export default defineComponent({
       selectedRideRequests,
       loading,
       loadingRequests,
+      loadingCancelled,
       myRides,
       receivedRequests,
       sentRequests,
       currentUserId,
+      cancelledRides,
+      cancelledPagination,
+      newCommunityRidesCount,
 
       // Filters
       roleFilters,
@@ -272,14 +339,17 @@ export default defineComponent({
       // Computed
       upcomingCount,
       pendingRequestsCount,
+      cancelledCount,
       filteredUpcoming,
       filteredPast,
+      filteredCancelled,
 
       // Methods
       isDriver,
       getPendingRequests,
       canLeaveFeedback,
       goToCreate,
+      goToCommunity,
       goToRide,
       goToProfile,
       editRide,
@@ -289,7 +359,8 @@ export default defineComponent({
       openFeedbackDialog,
       acceptRequest,
       rejectRequest,
-      cancelRequest
+      cancelRequest,
+      loadMoreCancelled
     };
   }
 });

src/modules/viaggi/pages/MyRidesPage.vue

@@ -1,18 +1,31 @@
+<!-- MyRidesPage.vue - TEMPLATE UPDATE -->
 <template>
   <q-page class="my-rides-page">
-    <div class="my-rides-page__container">
     <!-- Header -->
     <div class="my-rides-page__header">
-        <h1 class="my-rides-page__title">I Miei Viaggi</h1>
+      <h1>I Miei Viaggi</h1>
+      <div class="my-rides-page__header-actions">
         <q-btn
-          color="primary"
+          flat
+          round
+          icon="explore"
+          color="white"
+          @click="goToCommunity"
+        >
+          <q-badge v-if="newCommunityRidesCount > 0" color="red" floating>
+            {{ newCommunityRidesCount }}
+          </q-badge>
+          <q-tooltip>Esplora viaggi community</q-tooltip>
+        </q-btn>
+        <q-btn
+          round
           icon="add"
-          label="Nuovo Viaggio"
+          color="white"
-          rounded
+          text-color="primary"
-          unelevated
           @click="goToCreate"
         />
       </div>
+    </div>
 
     <!-- Tabs -->
     <q-tabs
@@ -20,85 +33,158 @@
       class="my-rides-page__tabs"
       active-color="primary"
       indicator-color="primary"
-        align="left"
+      align="justify"
-        narrow-indicator
+      dense
-        no-caps
     >
-        <q-tab name="upcoming" icon="event">
+      <q-tab name="upcoming" icon="upcoming" label="Prossimi">
-          <span class="q-ml-sm">In arrivo</span>
         <q-badge v-if="upcomingCount > 0" color="primary" floating>
           {{ upcomingCount }}
         </q-badge>
       </q-tab>
-        <q-tab name="past" icon="history">
+      <q-tab name="requests" icon="notifications" label="Richieste">
-          <span class="q-ml-sm">Passati</span>
+        <q-badge v-if="pendingRequestsCount > 0" color="orange" floating>
-        </q-tab>
-        <q-tab name="requests" icon="inbox">
-          <span class="q-ml-sm">Richieste</span>
-          <q-badge v-if="pendingRequestsCount > 0" color="negative" floating>
           {{ pendingRequestsCount }}
         </q-badge>
       </q-tab>
+      <q-tab name="past" icon="history" label="Passati" />
+      <q-tab name="cancelled" icon="cancel" label="Cancellati">
+        <q-badge v-if="cancelledCount > 0" color="grey" floating>
+          {{ cancelledCount }}
+        </q-badge>
+      </q-tab>
     </q-tabs>
 
-      <!-- Filter Pills -->
+    <!-- Role Filter (shown for upcoming, past, cancelled) -->
-      <div class="my-rides-page__filters">
+    <div
-        <q-chip
+      v-if="activeTab !== 'requests'"
-          v-for="filter in roleFilters"
+      class="my-rides-page__filter"
-          :key="filter.value"
-          :selected="roleFilter === filter.value"
-          :color="roleFilter === filter.value ? 'primary' : undefined"
-          :text-color="roleFilter === filter.value ? 'white' : undefined"
-          clickable
-          @click="roleFilter = filter.value"
     >
-          {{ filter.label }}
+      <q-select
-        </q-chip>
+        v-model="roleFilter"
+        :options="roleFilters"
+        option-value="value"
+        option-label="label"
+        emit-value
+        map-options
+        outlined
+        dense
+        label="Filtra per ruolo"
+      />
     </div>
 
     <!-- Tab Panels -->
     <q-tab-panels v-model="activeTab" animated class="my-rides-page__panels">
-        <!-- Upcoming Rides -->
+
-        <q-tab-panel name="upcoming" class="q-pa-none">
+      <!-- UPCOMING TAB -->
+      <q-tab-panel name="upcoming" class="my-rides-page__panel">
         <div v-if="loading" class="my-rides-page__loading">
-            <q-skeleton v-for="i in 3" :key="i" type="rect" height="180px" class="q-mb-md" />
+          <q-spinner-dots size="50px" color="primary" />
         </div>
 
         <div v-else-if="filteredUpcoming.length === 0" class="my-rides-page__empty">
-            <div class="my-rides-page__empty-icon">📅</div>
+          <q-icon name="event_busy" size="80px" color="grey-4" />
-            <h3>Nessun viaggio in programma</h3>
+          <h3>Nessun viaggio programmato</h3>
-            <p>I tuoi prossimi viaggi appariranno qui</p>
+          <p>Inizia a condividere i tuoi viaggi o cerca un passaggio</p>
-            <q-btn color="primary" label="Crea un viaggio" @click="goToCreate" />
+          <div class="my-rides-page__empty-actions">
+            <q-btn
+              color="primary"
+              icon="add"
+              label="Crea viaggio"
+              rounded
+              unelevated
+              @click="goToCreate"
+            />
+            <q-btn
+              color="secondary"
+              icon="explore"
+              label="Esplora community"
+              rounded
+              outline
+              @click="goToCommunity"
+            />
+          </div>
         </div>
 
         <div v-else class="my-rides-page__list">
-            <TransitionGroup name="list">
           <MyRideCard
             v-for="ride in filteredUpcoming"
             :key="ride._id"
             :ride="ride"
             :is-driver="isDriver(ride)"
             :pending-requests="getPendingRequests(ride._id)"
-                @click="goToRide(ride._id)"
+            @view="goToRide"
-                @manage-requests="openRequestsDialog(ride)"
+            @edit="editRide"
-                @cancel="cancelRide(ride)"
+            @cancel="cancelRide"
-                @complete="completeRide(ride)"
+            @complete="completeRide"
-                @edit="editRide(ride._id)"
+            @view-requests="openRequestsDialog"
           />
-            </TransitionGroup>
         </div>
       </q-tab-panel>
 
-        <!-- Past Rides -->
+      <!-- REQUESTS TAB -->
-        <q-tab-panel name="past" class="q-pa-none">
+      <q-tab-panel name="requests" class="my-rides-page__panel">
+        <q-tabs
+          v-model="requestsSubTab"
+          class="my-rides-page__sub-tabs"
+          active-color="primary"
+          indicator-color="primary"
+          align="justify"
+        >
+          <q-tab name="received" label="Ricevute" />
+          <q-tab name="sent" label="Inviate" />
+        </q-tabs>
+
+        <div v-if="loadingRequests" class="my-rides-page__loading">
+          <q-spinner-dots size="50px" color="primary" />
+        </div>
+
+        <q-tab-panels v-else v-model="requestsSubTab" animated>
+          <q-tab-panel name="received">
+            <div v-if="receivedRequests.length === 0" class="my-rides-page__empty">
+              <q-icon name="inbox" size="80px" color="grey-4" />
+              <h3>Nessuna richiesta ricevuta</h3>
+            </div>
+            <div v-else class="my-rides-page__list">
+              <RequestCard
+                v-for="request in receivedRequests"
+                :key="request._id"
+                :request="request"
+                type="received"
+                @accept="acceptRequest"
+                @reject="rejectRequest"
+                @view-profile="goToProfile"
+              />
+            </div>
+          </q-tab-panel>
+
+          <q-tab-panel name="sent">
+            <div v-if="sentRequests.length === 0" class="my-rides-page__empty">
+              <q-icon name="send" size="80px" color="grey-4" />
+              <h3>Nessuna richiesta inviata</h3>
+            </div>
+            <div v-else class="my-rides-page__list">
+              <RequestCard
+                v-for="request in sentRequests"
+                :key="request._id"
+                :request="request"
+                type="sent"
+                @cancel="cancelRequest"
+                @view-profile="goToProfile"
+              />
+            </div>
+          </q-tab-panel>
+        </q-tab-panels>
+      </q-tab-panel>
+
+      <!-- PAST TAB -->
+      <q-tab-panel name="past" class="my-rides-page__panel">
         <div v-if="loading" class="my-rides-page__loading">
-            <q-skeleton v-for="i in 3" :key="i" type="rect" height="180px" class="q-mb-md" />
+          <q-spinner-dots size="50px" color="primary" />
         </div>
 
         <div v-else-if="filteredPast.length === 0" class="my-rides-page__empty">
-            <div class="my-rides-page__empty-icon">🛣️</div>
+          <q-icon name="history" size="80px" color="grey-4" />
           <h3>Nessun viaggio passato</h3>
-            <p>I viaggi completati appariranno qui</p>
         </div>
 
         <div v-else class="my-rides-page__list">
@@ -107,115 +193,87 @@
             :key="ride._id"
             :ride="ride"
             :is-driver="isDriver(ride)"
-              :show-feedback-prompt="canLeaveFeedback(ride)"
+            :can-leave-feedback="canLeaveFeedback(ride)"
-              @click="goToRide(ride._id)"
+            @view="goToRide"
-              @leave-feedback="openFeedbackDialog(ride)"
+            @feedback="openFeedbackDialog"
           />
         </div>
       </q-tab-panel>
 
-        <!-- Requests -->
+      <!-- CANCELLED TAB -->
-        <q-tab-panel name="requests" class="q-pa-none">
+      <q-tab-panel name="cancelled" class="my-rides-page__panel">
-          <q-tabs
+        <div v-if="loadingCancelled" class="my-rides-page__loading">
-            v-model="requestsSubTab"
+          <q-spinner-dots size="50px" color="primary" />
-            class="my-rides-page__sub-tabs"
+        </div>
-            active-color="primary"
+
-            indicator-color="primary"
+        <div v-else-if="filteredCancelled.length === 0" class="my-rides-page__empty">
-            align="left"
+          <q-icon name="check_circle" size="80px" color="positive" />
-            dense
+          <h3>Nessun viaggio cancellato</h3>
+          <p>Ottimo! Non hai viaggi cancellati</p>
+        </div>
+
+        <div v-else>
+          <div class="my-rides-page__list">
+            <MyRideCard
+              v-for="ride in filteredCancelled"
+              :key="ride._id"
+              :ride="ride"
+              :is-driver="isDriver(ride)"
+              :is-cancelled="true"
+              @view="goToRide"
+            />
+          </div>
+
+          <!-- Load More for Cancelled -->
+          <div
+            v-if="cancelledPagination.hasMore"
+            class="my-rides-page__load-more"
           >
-            <q-tab name="received" label="Ricevute" />
+            <q-btn
-            <q-tab name="sent" label="Inviate" />
+              flat
-          </q-tabs>
+              color="primary"
-
+              :loading="loadingCancelled"
-          <!-- Received Requests -->
+              @click="loadMoreCancelled"
-          <div v-if="requestsSubTab === 'received'">
+            >
-            <div v-if="loadingRequests" class="my-rides-page__loading">
+              Carica altri
-              <q-skeleton v-for="i in 3" :key="i" type="QItem" class="q-mb-sm" />
+            </q-btn>
           </div>
-
-            <div v-else-if="receivedRequests.length === 0" class="my-rides-page__empty my-rides-page__empty--small">
-              <q-icon name="inbox" size="48px" color="grey-4" />
-              <span>Nessuna richiesta ricevuta</span>
-            </div>
-
-            <q-list v-else class="my-rides-page__requests-list">
-              <RequestCard
-                v-for="request in receivedRequests"
-                :key="request._id"
-                :request="request"
-                mode="received"
-                @accept="acceptRequest(request)"
-                @reject="rejectRequest(request)"
-                @view-ride="goToRide(request.rideId._id || request.rideId)"
-                @view-user="goToProfile(request.passengerId._id || request.passengerId)"
-              />
-            </q-list>
-          </div>
-
-          <!-- Sent Requests -->
-          <div v-if="requestsSubTab === 'sent'">
-            <div v-if="loadingRequests" class="my-rides-page__loading">
-              <q-skeleton v-for="i in 3" :key="i" type="QItem" class="q-mb-sm" />
-            </div>
-
-            <div v-else-if="sentRequests.length === 0" class="my-rides-page__empty my-rides-page__empty--small">
-              <q-icon name="send" size="48px" color="grey-4" />
-              <span>Nessuna richiesta inviata</span>
-            </div>
-
-            <q-list v-else class="my-rides-page__requests-list">
-              <RequestCard
-                v-for="request in sentRequests"
-                :key="request._id"
-                :request="request"
-                mode="sent"
-                @cancel="cancelRequest(request)"
-                @view-ride="goToRide(request.rideId._id || request.rideId)"
-                @view-user="goToProfile(request.driverId._id || request.driverId)"
-              />
-            </q-list>
         </div>
       </q-tab-panel>
     </q-tab-panels>
-    </div>
 
     <!-- Requests Dialog -->
-    <q-dialog v-model="showRequestsDialog" position="bottom" full-width>
+    <q-dialog v-model="showRequestsDialog">
-      <q-card class="my-rides-page__requests-dialog">
+      <q-card style="min-width: 350px; max-width: 500px">
-        <q-card-section class="row items-center">
+        <q-card-section>
           <div class="text-h6">Richieste per questo viaggio</div>
-          <q-space />
-          <q-btn flat round icon="close" v-close-popup />
         </q-card-section>
 
-        <q-separator />
+        <q-card-section class="q-pt-none">
-
+          <div v-if="selectedRideRequests.length === 0">
-        <q-card-section class="q-pa-none" style="max-height: 60vh; overflow-y: auto">
+            <p class="text-center text-grey-6">Nessuna richiesta</p>
-          <q-list v-if="selectedRideRequests.length > 0">
+          </div>
+          <div v-else>
             <RequestCard
               v-for="request in selectedRideRequests"
               :key="request._id"
               :request="request"
-              mode="received"
+              type="received"
-              @accept="acceptRequest(request); showRequestsDialog = false"
+              compact
-              @reject="rejectRequest(request)"
+              @accept="acceptRequest"
-              @view-user="goToProfile(request.passengerId._id || request.passengerId)"
+              @reject="rejectRequest"
+              @view-profile="goToProfile"
             />
-          </q-list>
-          <div v-else class="text-center q-pa-lg text-grey">
-            Nessuna richiesta pendente
           </div>
         </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn flat label="Chiudi" color="primary" v-close-popup />
+        </q-card-actions>
       </q-card>
     </q-dialog>
-
-    <!-- FAB Mobile -->
-    <q-page-sticky position="bottom-right" :offset="[18, 18]" class="lt-md">
-      <q-btn fab color="primary" icon="add" @click="goToCreate" />
-    </q-page-sticky>
   </q-page>
 </template>
 
-<script lang="ts" src="./MyRidesPage.ts" />
+<script lang="ts" src="./MyRidesPage.ts"></script>
-<style lang="scss" src="./MyRidesPage.scss" />
+<style lang="scss" scoped src="./MyRidesPage.scss"></style>

src/modules/viaggi/pages/NotificationsPage.vue

@@ -0,0 +1,973 @@
+<!-- NotificationsPage.vue -->
+<template>
+  <q-page class="notifications-page">
+    <!-- Header -->
+    <div class="notifications-page__header">
+      <q-btn
+        flat
+        round
+        icon="arrow_back"
+        color="white"
+        @click="goBack"
+      />
+      <div>
+        <h1>Notifiche</h1>
+        <p>Gestisci come ricevere le notifiche</p>
+      </div>
+    </div>
+
+    <!-- Loading -->
+    <div v-if="loading && !preferences" class="notifications-page__loading">
+      <q-spinner-dots size="50px" color="primary" />
+      <p>Caricamento...</p>
+    </div>
+
+    <!-- Content -->
+    <div v-else class="notifications-page__content">
+      
+      <!-- EMAIL NOTIFICATIONS -->
+      <div class="notifications-page__section">
+        <div class="notifications-page__section-header">
+          <div class="notifications-page__section-icon">
+            <q-icon name="email" size="32px" color="primary" />
+          </div>
+          <div class="notifications-page__section-info">
+            <h2>Email</h2>
+            <p>{{ userEmail }}</p>
+          </div>
+          <q-toggle
+            v-model="emailEnabled"
+            color="primary"
+            @update:model-value="toggleEmail"
+          />
+        </div>
+
+        <q-slide-transition>
+          <div v-if="emailEnabled" class="notifications-page__options">
+            <div
+              v-for="option in emailOptions"
+              :key="option.key"
+              class="notifications-page__option"
+            >
+              <div class="notifications-page__option-info">
+                <q-icon :name="option.icon" size="20px" :color="option.color" />
+                <div>
+                  <div class="notifications-page__option-label">{{ option.label }}</div>
+                  <div class="notifications-page__option-desc">{{ option.description }}</div>
+                </div>
+              </div>
+              <q-toggle
+                v-model="preferences.email[option.key]"
+                color="primary"
+                :disable="!emailEnabled"
+                @update:model-value="savePreferences"
+              />
+            </div>
+
+            <div class="notifications-page__test">
+              <q-btn
+                outline
+                color="primary"
+                label="Invia email di test"
+                icon="send"
+                :loading="testingSending === 'email'"
+                @click="testEmail"
+              />
+            </div>
+          </div>
+        </q-slide-transition>
+      </div>
+
+      <!-- TELEGRAM NOTIFICATIONS -->
+      <div class="notifications-page__section">
+        <div class="notifications-page__section-header">
+          <div class="notifications-page__section-icon">
+            <q-icon name="send" size="32px" color="info" />
+          </div>
+          <div class="notifications-page__section-info">
+            <h2>Telegram</h2>
+            <p v-if="telegramConnected">@{{ preferences.telegram.username || 'Connesso' }}</p>
+            <p v-else class="text-grey-6">Non connesso</p>
+          </div>
+          <q-toggle
+            v-model="telegramEnabled"
+            color="info"
+            :disable="!telegramConnected"
+            @update:model-value="toggleTelegram"
+          />
+        </div>
+
+        <!-- Telegram Connection -->
+        <div v-if="!telegramConnected" class="notifications-page__connect">
+          <div class="notifications-page__connect-info">
+            <q-icon name="info" color="info" size="24px" />
+            <div>
+              <h3>Come connettere Telegram</h3>
+              <ol>
+                <li>Apri Telegram e cerca il bot <strong>@TrasportiSolidaliBot</strong></li>
+                <li>Clicca su "Avvia" o invia <code>/start</code></li>
+                <li>Il bot ti invierà un codice di connessione</li>
+                <li>Inserisci il codice qui sotto</li>
+              </ol>
+            </div>
+          </div>
+
+          <div class="notifications-page__connect-form">
+            <q-input
+              v-model="telegramCode"
+              label="Codice di connessione"
+              outlined
+              placeholder="es: 123456"
+              :rules="[val => !!val || 'Codice richiesto']"
+            >
+              <template v-slot:prepend>
+                <q-icon name="key" />
+              </template>
+            </q-input>
+
+            <div class="notifications-page__connect-actions">
+              <q-btn
+                color="info"
+                label="Apri Telegram"
+                icon="open_in_new"
+                outline
+                :href="telegramBotLink"
+                target="_blank"
+              />
+              <q-btn
+                color="info"
+                label="Connetti"
+                icon="link"
+                unelevated
+                :loading="loading"
+                :disable="!telegramCode"
+                @click="connectTelegramBot"
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- Telegram Options -->
+        <q-slide-transition>
+          <div v-if="telegramConnected && telegramEnabled" class="notifications-page__options">
+            <div
+              v-for="option in telegramOptions"
+              :key="option.key"
+              class="notifications-page__option"
+            >
+              <div class="notifications-page__option-info">
+                <q-icon :name="option.icon" size="20px" :color="option.color" />
+                <div>
+                  <div class="notifications-page__option-label">{{ option.label }}</div>
+                  <div class="notifications-page__option-desc">{{ option.description }}</div>
+                </div>
+              </div>
+              <q-toggle
+                v-model="preferences.telegram[option.key]"
+                color="info"
+                :disable="!telegramEnabled"
+                @update:model-value="savePreferences"
+              />
+            </div>
+
+            <div class="notifications-page__test">
+              <q-btn
+                outline
+                color="info"
+                label="Invia messaggio di test"
+                icon="send"
+                :loading="testingSending === 'telegram'"
+                @click="testTelegram"
+              />
+              <q-btn
+                flat
+                color="negative"
+                label="Disconnetti"
+                icon="link_off"
+                @click="disconnectTelegramBot"
+              />
+            </div>
+          </div>
+        </q-slide-transition>
+      </div>
+
+      <!-- PUSH NOTIFICATIONS -->
+      <div class="notifications-page__section">
+        <div class="notifications-page__section-header">
+          <div class="notifications-page__section-icon">
+            <q-icon name="notifications" size="32px" color="orange" />
+          </div>
+          <div class="notifications-page__section-info">
+            <h2>Notifiche Push</h2>
+            <p v-if="pushSupported && pushEnabled">Attive</p>
+            <p v-else-if="!pushSupported" class="text-grey-6">Non supportate</p>
+            <p v-else class="text-grey-6">Non attive</p>
+          </div>
+          <q-toggle
+            v-model="pushEnabled"
+            color="orange"
+            :disable="!pushSupported"
+            @update:model-value="togglePush"
+          />
+        </div>
+
+        <!-- Push Not Supported -->
+        <div v-if="!pushSupported" class="notifications-page__not-supported">
+          <q-icon name="warning" color="warning" size="48px" />
+          <p>Le notifiche push non sono supportate dal tuo browser o dispositivo.</p>
+          <p class="text-caption">Prova con Chrome, Firefox, Edge o Safari (iOS 16.4+)</p>
+        </div>
+
+        <!-- Push Options -->
+        <q-slide-transition>
+          <div v-if="pushSupported && pushEnabled" class="notifications-page__options">
+            <div
+              v-for="option in pushOptions"
+              :key="option.key"
+              class="notifications-page__option"
+            >
+              <div class="notifications-page__option-info">
+                <q-icon :name="option.icon" size="20px" :color="option.color" />
+                <div>
+                  <div class="notifications-page__option-label">{{ option.label }}</div>
+                  <div class="notifications-page__option-desc">{{ option.description }}</div>
+                </div>
+              </div>
+              <q-toggle
+                v-model="preferences.push[option.key]"
+                color="orange"
+                :disable="!pushEnabled"
+                @update:model-value="savePreferences"
+              />
+            </div>
+
+            <div class="notifications-page__test">
+              <q-btn
+                outline
+                color="orange"
+                label="Invia notifica di test"
+                icon="notifications"
+                :loading="testingSending === 'push'"
+                @click="testPush"
+              />
+            </div>
+          </div>
+        </q-slide-transition>
+      </div>
+
+      <!-- NOTIFICATION TYPES INFO -->
+      <div class="notifications-page__info">
+        <h3>Tipi di Notifiche</h3>
+        <div class="notifications-page__info-grid">
+          <div class="notifications-page__info-item">
+            <q-icon name="drive_eta" color="primary" size="24px" />
+            <div>
+              <strong>Nuova richiesta viaggio</strong>
+              <p>Quando qualcuno richiede un posto nel tuo viaggio</p>
+            </div>
+          </div>
+          <div class="notifications-page__info-item">
+            <q-icon name="check_circle" color="positive" size="24px" />
+            <div>
+              <strong>Richiesta accettata</strong>
+              <p>Quando un conducente accetta la tua richiesta</p>
+            </div>
+          </div>
+          <div class="notifications-page__info-item">
+            <q-icon name="cancel" color="negative" size="24px" />
+            <div>
+              <strong>Richiesta rifiutata</strong>
+              <p>Quando un conducente rifiuta la tua richiesta</p>
+            </div>
+          </div>
+          <div class="notifications-page__info-item">
+            <q-icon name="schedule" color="orange" size="24px" />
+            <div>
+              <strong>Promemoria viaggio</strong>
+              <p>24h e 2h prima della partenza</p>
+            </div>
+          </div>
+          <div class="notifications-page__info-item">
+            <q-icon name="event_busy" color="warning" size="24px" />
+            <div>
+              <strong>Viaggio cancellato</strong>
+              <p>Quando un viaggio prenotato viene cancellato</p>
+            </div>
+          </div>
+          <div class="notifications-page__info-item">
+            <q-icon name="chat" color="info" size="24px" />
+            <div>
+              <strong>Nuovo messaggio</strong>
+              <p>Quando ricevi un messaggio nella chat</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-page>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useQuasar } from 'quasar';
+import { useNotifications } from '../composables/useNotifications';
+import { useUserStore } from 'app/src/store';
+
+export default defineComponent({
+  name: 'NotificationsPage',
+
+  setup() {
+    const router = useRouter();
+    const $q = useQuasar();
+    const userStore = useUserStore();
+
+    const {
+      loading,
+      preferences,
+      testingSending,
+      fetchPreferences,
+      updatePreferences,
+      connectTelegram,
+      disconnectTelegram,
+      subscribePush,
+      unsubscribePush,
+      sendTestNotification,
+      requestPushPermission,
+      getTelegramBotLink
+    } = useNotifications();
+
+    // State
+    const telegramCode = ref('');
+    const emailEnabled = ref(true);
+    const telegramEnabled = ref(false);
+    const pushEnabled = ref(false);
+
+    // Computed
+    const userEmail = computed(() => userStore.my.email || 'Non disponibile');
+
+    const telegramConnected = computed(() => {
+      return !!(preferences.value?.telegram.chatId);
+    });
+
+    const pushSupported = computed(() => {
+      return 'serviceWorker' in navigator && 'PushManager' in window;
+    });
+
+    const telegramBotLink = computed(() => {
+      return getTelegramBotLink(userStore.my._id);
+    });
+
+    // Notification Options
+    const emailOptions = [
+      {
+        key: 'newRideRequest',
+        label: 'Nuova richiesta viaggio',
+        description: 'Quando qualcuno richiede un posto',
+        icon: 'drive_eta',
+        color: 'primary'
+      },
+      {
+        key: 'requestAccepted',
+        label: 'Richiesta accettata',
+        description: 'Quando la tua richiesta viene accettata',
+        icon: 'check_circle',
+        color: 'positive'
+      },
+      {
+        key: 'requestRejected',
+        label: 'Richiesta rifiutata',
+        description: 'Quando la tua richiesta viene rifiutata',
+        icon: 'cancel',
+        color: 'negative'
+      },
+      {
+        key: 'rideReminder24h',
+        label: 'Promemoria 24h prima',
+        description: 'Un giorno prima della partenza',
+        icon: 'schedule',
+        color: 'orange'
+      },
+      {
+        key: 'rideReminder2h',
+        label: 'Promemoria 2h prima',
+        description: 'Due ore prima della partenza',
+        icon: 'alarm',
+        color: 'orange'
+      },
+      {
+        key: 'rideCancelled',
+        label: 'Viaggio cancellato',
+        description: 'Quando un viaggio viene cancellato',
+        icon: 'event_busy',
+        color: 'warning'
+      },
+      {
+        key: 'newMessage',
+        label: 'Nuovo messaggio',
+        description: 'Quando ricevi un messaggio',
+        icon: 'chat',
+        color: 'info'
+      },
+      {
+        key: 'newCommunityRide',
+        label: 'Nuovi viaggi disponibili',
+        description: 'Quando ci sono nuovi viaggi nella community',
+        icon: 'explore',
+        color: 'purple'
+      },
+      {
+        key: 'weeklyDigest',
+        label: 'Riepilogo settimanale',
+        description: 'Riassunto dei tuoi viaggi della settimana',
+        icon: 'summarize',
+        color: 'indigo'
+      }
+    ];
+
+    const telegramOptions = emailOptions.filter(opt => 
+      opt.key !== 'newCommunityRide' && opt.key !== 'weeklyDigest'
+    );
+
+    const pushOptions = emailOptions.filter(opt => 
+      opt.key !== 'weeklyDigest'
+    );
+
+    // Methods
+    const goBack = () => {
+      router.back();
+    };
+
+    const syncToggleStates = () => {
+      if (preferences.value) {
+        emailEnabled.value = preferences.value.email.enabled;
+        telegramEnabled.value = preferences.value.telegram.enabled;
+        pushEnabled.value = preferences.value.push.enabled;
+      }
+    };
+
+    const toggleEmail = async (value: boolean) => {
+      try {
+        await updatePreferences({
+          email: { ...preferences.value!.email, enabled: value }
+        });
+
+        $q.notify({
+          type: value ? 'positive' : 'info',
+          message: value ? 'Notifiche email attivate' : 'Notifiche email disattivate'
+        });
+      } catch (error: any) {
+        emailEnabled.value = !value;
+        $q.notify({
+          type: 'negative',
+          message: 'Errore nell\'aggiornamento'
+        });
+      }
+    };
+
+    const toggleTelegram = async (value: boolean) => {
+      if (!telegramConnected.value) {
+        telegramEnabled.value = false;
+        $q.notify({
+          type: 'warning',
+          message: 'Connetti prima il tuo account Telegram'
+        });
+        return;
+      }
+
+      try {
+        await updatePreferences({
+          telegram: { ...preferences.value!.telegram, enabled: value }
+        });
+
+        $q.notify({
+          type: value ? 'positive' : 'info',
+          message: value ? 'Notifiche Telegram attivate' : 'Notifiche Telegram disattivate'
+        });
+      } catch (error: any) {
+        telegramEnabled.value = !value;
+        $q.notify({
+          type: 'negative',
+          message: 'Errore nell\'aggiornamento'
+        });
+      }
+    };
+
+    const togglePush = async (value: boolean) => {
+      if (value) {
+        // Enable push
+        try {
+          const subscription = await requestPushPermission();
+          
+          if (subscription) {
+            await subscribePush(subscription.toJSON());
+            
+            $q.notify({
+              type: 'positive',
+              message: 'Notifiche push attivate con successo!'
+            });
+          }
+        } catch (error: any) {
+          pushEnabled.value = false;
+          $q.notify({
+            type: 'negative',
+            message: error.message || 'Errore nell\'attivazione delle notifiche push'
+          });
+        }
+      } else {
+        // Disable push
+        try {
+          await unsubscribePush();
+          
+          $q.notify({
+            type: 'info',
+            message: 'Notifiche push disattivate'
+          });
+        } catch (error: any) {
+          pushEnabled.value = true;
+          $q.notify({
+            type: 'negative',
+            message: 'Errore nella disattivazione'
+          });
+        }
+      }
+    };
+
+    const connectTelegramBot = async () => {
+      if (!telegramCode.value) {
+        $q.notify({
+          type: 'warning',
+          message: 'Inserisci il codice di connessione'
+        });
+        return;
+      }
+
+      try {
+        // Parse code format: userId-chatId or just chatId
+        const parts = telegramCode.value.split('-');
+        const chatId = parts.length > 1 ? parts[1] : telegramCode.value;
+
+        await connectTelegram(chatId);
+
+        $q.notify({
+          type: 'positive',
+          message: 'Telegram connesso con successo!',
+          caption: 'Riceverai un messaggio di conferma'
+        });
+
+        telegramCode.value = '';
+        telegramEnabled.value = true;
+      } catch (error: any) {
+        $q.notify({
+          type: 'negative',
+          message: error.message || 'Errore nella connessione Telegram'
+        });
+      }
+    };
+
+    const disconnectTelegramBot = async () => {
+      $q.dialog({
+        title: 'Disconnetti Telegram',
+        message: 'Sei sicuro di voler disconnettere il tuo account Telegram?',
+        cancel: true
+      }).onOk(async () => {
+        try {
+          await disconnectTelegram();
+
+          $q.notify({
+            type: 'info',
+            message: 'Telegram disconnesso'
+          });
+
+          telegramEnabled.value = false;
+        } catch (error: any) {
+          $q.notify({
+            type: 'negative',
+            message: 'Errore nella disconnessione'
+          });
+        }
+      });
+    };
+
+    const savePreferences = async () => {
+      try {
+        await updatePreferences(preferences.value!);
+      } catch (error: any) {
+        $q.notify({
+          type: 'negative',
+          message: 'Errore nel salvataggio'
+        });
+      }
+    };
+
+    const testEmail = async () => {
+      try {
+        await sendTestNotification('email');
+        
+        $q.notify({
+          type: 'positive',
+          message: 'Email di test inviata!',
+          caption: 'Controlla la tua casella di posta'
+        });
+      } catch (error: any) {
+        $q.notify({
+          type: 'negative',
+          message: 'Errore nell\'invio dell\'email di test'
+        });
+      }
+    };
+
+    const testTelegram = async () => {
+      try {
+        await sendTestNotification('telegram');
+        
+        $q.notify({
+          type: 'positive',
+          message: 'Messaggio di test inviato!',
+          caption: 'Controlla Telegram'
+        });
+      } catch (error: any) {
+        $q.notify({
+          type: 'negative',
+          message: 'Errore nell\'invio del messaggio di test'
+        });
+      }
+    };
+
+    const testPush = async () => {
+      try {
+        await sendTestNotification('push');
+        
+        $q.notify({
+          type: 'positive',
+          message: 'Notifica push inviata!',
+          caption: 'Dovresti vederla a breve'
+        });
+      } catch (error: any) {
+        $q.notify({
+          type: 'negative',
+          message: 'Errore nell\'invio della notifica push'
+        });
+      }
+    };
+
+    // Lifecycle
+    onMounted(async () => {
+      try {
+        await fetchPreferences();
+        syncToggleStates();
+      } catch (error: any) {
+        $q.notify({
+          type: 'negative',
+          message: 'Errore nel caricamento delle preferenze'
+        });
+      }
+    });
+
+    return {
+      // State
+      loading,
+      preferences,
+      testingSending,
+      telegramCode,
+      emailEnabled,
+      telegramEnabled,
+      pushEnabled,
+
+      // Computed
+      userEmail,
+      telegramConnected,
+      pushSupported,
+      telegramBotLink,
+
+      // Options
+      emailOptions,
+      telegramOptions,
+      pushOptions,
+
+      // Methods
+      goBack,
+      toggleEmail,
+      toggleTelegram,
+      togglePush,
+      connectTelegramBot,
+      disconnectTelegramBot,
+      savePreferences,
+      testEmail,
+      testTelegram,
+      testPush
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.notifications-page {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  min-height: 100vh;
+  padding-bottom: 80px;
+
+  // Header
+  &__header {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 16px 20px;
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    h1 {
+      font-size: 20px;
+      font-weight: 600;
+      margin: 0;
+    }
+
+    p {
+      margin: 4px 0 0;
+      opacity: 0.85;
+      font-size: 14px;
+    }
+  }
+
+  // Loading
+  &__loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 60px 20px;
+
+    p {
+      margin-top: 16px;
+      color: #888;
+    }
+  }
+
+  // Content
+  &__content {
+    padding: 16px;
+  }
+
+  // Section
+  &__section {
+    background: white;
+    border-radius: 16px;
+    padding: 20px;
+    margin-bottom: 16px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+  }
+
+  &__section-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #f0f0f0;
+  }
+
+  &__section-icon {
+    flex-shrink: 0;
+  }
+
+  &__section-info {
+    flex: 1;
+
+    h2 {
+      font-size: 18px;
+      font-weight: 600;
+      margin: 0;
+      color: #333;
+    }
+
+    p {
+      margin: 4px 0 0;
+      font-size: 13px;
+      color: #888;
+    }
+  }
+
+  // Options
+  &__options {
+    padding-top: 16px;
+  }
+
+  &__option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 0;
+    border-bottom: 1px solid #f5f5f5;
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  &__option-info {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    flex: 1;
+  }
+
+  &__option-label {
+    font-weight: 600;
+    color: #333;
+    font-size: 14px;
+  }
+
+  &__option-desc {
+    font-size: 12px;
+    color: #888;
+    margin-top: 2px;
+  }
+
+  // Test Button
+  &__test {
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid #f0f0f0;
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  // Telegram Connect
+  &__connect {
+    padding-top: 16px;
+  }
+
+  &__connect-info {
+    display: flex;
+    gap: 12px;
+    padding: 16px;
+    background: #e3f2fd;
+    border-radius: 12px;
+    margin-bottom: 16px;
+
+    h3 {
+      font-size: 15px;
+      font-weight: 600;
+      margin: 0 0 8px;
+      color: #1976d2;
+    }
+
+    ol {
+      margin: 0;
+      padding-left: 20px;
+      color: #555;
+      font-size: 13px;
+
+      li {
+        margin-bottom: 4px;
+      }
+    }
+
+    code {
+      background: rgba(0, 0, 0, 0.1);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-size: 12px;
+    }
+  }
+
+  &__connect-form {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  &__connect-actions {
+    display: flex;
+    gap: 8px;
+  }
+
+  // Not Supported
+  &__not-supported {
+    padding: 24px;
+    text-align: center;
+    color: #888;
+
+    p {
+      margin: 12px 0 0;
+      font-size: 14px;
+    }
+  }
+
+  // Info Section
+  &__info {
+    background: white;
+    border-radius: 16px;
+    padding: 20px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
+
+    h3 {
+      font-size: 16px;
+      font-weight: 600;
+      margin: 0 0 16px;
+      color: #333;
+    }
+  }
+
+  &__info-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  &__info-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 12px;
+    background: #f8f9fa;
+    border-radius: 8px;
+
+    strong {
+      display: block;
+      margin-bottom: 4px;
+      color: #333;
+      font-size: 14px;
+    }
+
+    p {
+      margin: 0;
+      font-size: 12px;
+      color: #666;
+      line-height: 1.4;
+    }
+  }
+}
+
+// Dark Mode
+.body--dark {
+  .notifications-page {
+    background: linear-gradient(135deg, #1a1a2e 0%, #16162a 100%);
+
+    &__section,
+    &__info {
+      background: #1e1e30;
+    }
+
+    &__section-header,
+    &__option,
+    &__test {
+      border-color: rgba(255, 255, 255, 0.1);
+    }
+
+    &__section-info h2,
+    &__option-label,
+    &__info h3,
+    &__info-item strong {
+      color: #fff;
+    }
+
+    &__connect-info {
+      background: rgba(25, 118, 210, 0.1);
+    }
+
+    &__info-item {
+      background: rgba(255, 255, 255, 0.05);
+    }
+  }
+}
+</style>

src/modules/viaggi/pages/Requestspage.vue

@@ -219,7 +219,7 @@
             <!-- Ride Info -->
             <div
               class="requests-page__ride"
-              @click="viewRide(request.rideId)"
+              @click="viewRide(request.rideId?._id || request.rideId)"
             >
               <div class="requests-page__ride-type">
                 <q-icon
@@ -375,7 +375,7 @@
                 icon="info"
                 label="Dettagli"
                 size="sm"
-                @click="viewRide(request.rideId._id)"
+                @click="viewRide(request.rideId?._id || request.rideId)"
               />
             </div>
           </div>
@@ -453,6 +453,7 @@ import { defineComponent, ref, computed, onMounted, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { useQuasar, date as qdate } from 'quasar';
 import { Api } from '@api';
+import { Ride } from '../types';
 
 interface RequestStats {
   pending: number;
@@ -462,7 +463,7 @@ interface RequestStats {
 
 interface RideRequest {
   _id: string;
-  rideId: string;
+  rideId: string | Ride;
   fromUserId: string;
   toUserId: string;
   fromUser?: any;

src/modules/viaggi/pages/RideCreatePage.ts

@@ -66,7 +66,7 @@ export default defineComponent({
       waypoints: [],
       date: '',
       time: '',
-      dateTime: '',
+      departureDate: '',
       flexibleTime: false,
       flexibleMinutes: 30,
       recurrence: { type: 'once' },
@@ -145,7 +145,7 @@ export default defineComponent({
 
     // Preview ride per il riepilogo
     const previewRide = computed((): Partial<Ride> => {
-      const dateTime =
+      const departureDate =
         formData.date && formData.time
           ? new Date(`${formData.date}T${formData.time}`)
           : new Date();
@@ -159,7 +159,7 @@ export default defineComponent({
           coordinates: { lat: 0, lng: 0 },
         },
         waypoints: formData.waypoints || [],
-        dateTime: dateTime.toISOString(),
+        departureDate: departureDate.toISOString(),
         passengers: formData.passengers,
         seatsNeeded: formData.seatsNeeded,
         vehicle: formData.vehicle,
@@ -231,14 +231,14 @@ export default defineComponent({
 
       try {
         // Combina data e ora
-        const dateTime = new Date(`${formData.date}T${formData.time}`);
+        const departureDate = new Date(`${formData.date}T${formData.time}`);
 
         const rideData: Partial<RideFormData> = {
           type: formData.type,
           departure: formData.departure,
           destination: formData.destination,
           waypoints: formData.waypoints,
-          dateTime: dateTime.toISOString(),
+          departureDate: departureDate.toISOString(),
           flexibleTime: formData.flexibleTime,
           flexibleMinutes: formData.flexibleMinutes,
           recurrence: formData.recurrence,
@@ -299,7 +299,7 @@ export default defineComponent({
             formData.destination = ride.destination;
             formData.waypoints = ride.waypoints || [];
 
-            const dt = new Date(ride.dateTime);
+            const dt = new Date(ride.departureDate);
             formData.date = dt.toISOString().split('T')[0];
             formData.time = dt.toTimeString().slice(0, 5);
 

src/modules/viaggi/pages/RideDetailPage.ts

@@ -107,13 +107,13 @@ export default defineComponent({
 
     const departureTime = computed(() => {
       if (!ride.value) return '';
-      const date = new Date(ride.value.dateTime);
+      const date = new Date(ride.value.departureDate);
       return date.toLocaleTimeString('it-IT', { hour: '2-digit', minute: '2-digit' });
     });
 
     const arrivalTime = computed(() => {
       if (!ride.value || !ride.value.estimatedDuration) return '';
-      const departure = new Date(ride.value.dateTime);
+      const departure = new Date(ride.value.departureDate);
       const arrival = new Date(
         departure.getTime() + ride.value.estimatedDuration * 60000
       );
@@ -122,7 +122,7 @@ export default defineComponent({
 
     const formattedDate = computed(() => {
       if (!ride.value) return '';
-      return formatRideDate(ride.value.dateTime);
+      return formatRideDate(ride.value.departureDate);
     });
 
     const formattedDuration = computed(() => {

src/modules/viaggi/pages/RideSearchPage.ts

@@ -107,11 +107,11 @@ export default defineComponent({
       switch (sortBy.value) {
         case 'date_asc':
           return sorted.sort(
-            (a, b) => new Date(a.dateTime).getTime() - new Date(b.dateTime).getTime()
+            (a, b) => new Date(a.departureDate).getTime() - new Date(b.departureDate).getTime()
           );
         case 'date_desc':
           return sorted.sort(
-            (a, b) => new Date(b.dateTime).getTime() - new Date(a.dateTime).getTime()
+            (a, b) => new Date(b.departureDate).getTime() - new Date(a.departureDate).getTime()
           );
         case 'price_asc':
           return sorted.sort((a, b) => {

src/modules/viaggi/pages/Vehicleeditpage.vue

@@ -99,7 +99,7 @@
         <!-- Vehicle Type -->
         <div class="vehicle-edit-page__type-selector">
           <div
-            v-for="vType in vehicleTypes"
+            v-for="vType in VEHICLE_TYPES"
             :key="vType.value"
             class="vehicle-edit-page__type-option"
             :class="{
@@ -239,7 +239,7 @@
           <label>Tipo di alimentazione *</label>
           <div class="vehicle-edit-page__fuel-options">
             <div
-              v-for="fuel in fuelTypes"
+              v-for="fuel in FUELTYPES"
               :key="fuel.value"
               class="vehicle-edit-page__fuel-option"
               :class="{
@@ -266,7 +266,7 @@
 
         <div class="vehicle-edit-page__features">
           <q-checkbox
-            v-for="feature in availableFeatures"
+            v-for="feature in VEHICLE_FEATURES_OPTIONS"
             :key="feature.value"
             v-model="form.features"
             :val="feature.value"
@@ -361,6 +361,7 @@ import { defineComponent, ref, computed, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useQuasar } from 'quasar';
 import { Api } from '@api';
+import { VEHICLE_TYPES } from '../types/viaggi.types';
 
 interface VehicleForm {
   type: string;
@@ -408,23 +409,6 @@ export default defineComponent({
       isDefault: false,
     });
 
-    // Options
-    const vehicleTypes = [
-      { value: 'car', label: 'Auto', icon: 'directions_car' },
-      { value: 'suv', label: 'SUV', icon: 'local_shipping' },
-      { value: 'van', label: 'Van', icon: 'airport_shuttle' },
-      { value: 'motorcycle', label: 'Moto', icon: 'two_wheeler' },
-    ];
-
-    const fuelTypes = [
-      { value: 'petrol', label: 'Benzina', icon: 'local_gas_station' },
-      { value: 'diesel', label: 'Diesel', icon: 'local_gas_station' },
-      { value: 'hybrid', label: 'Ibrido', icon: 'eco' },
-      { value: 'electric', label: 'Elettrico', icon: 'bolt' },
-      { value: 'lpg', label: 'GPL', icon: 'propane_tank' },
-      { value: 'methane', label: 'Metano', icon: 'propane' },
-    ];
-
     const colorOptions = [
       { value: 'bianco', label: 'Bianco', hex: '#ffffff' },
       { value: 'nero', label: 'Nero', hex: '#1a1a1a' },
@@ -439,19 +423,6 @@ export default defineComponent({
       { value: 'beige', label: 'Beige', hex: '#d7ccc8' },
     ];
 
-    const availableFeatures = [
-      { value: 'aria_condizionata', label: 'Aria condizionata', icon: 'ac_unit' },
-      { value: 'bluetooth', label: 'Bluetooth', icon: 'bluetooth' },
-      { value: 'usb', label: 'Presa USB', icon: 'usb' },
-      { value: 'navigatore', label: 'Navigatore', icon: 'navigation' },
-      { value: 'seggiolino', label: 'Seggiolino bimbi', icon: 'child_friendly' },
-      { value: 'portabagagli', label: 'Ampio bagagliaio', icon: 'luggage' },
-      { value: 'animali', label: 'Animali ammessi', icon: 'pets' },
-      { value: 'wifi', label: 'WiFi', icon: 'wifi' },
-      { value: 'fumatori', label: 'Si può fumare', icon: 'smoking_rooms' },
-      { value: 'no_fumatori', label: 'Vietato fumare', icon: 'smoke_free' },
-    ];
-
     // Methods
     const confirmCancel = () => {
       $q.dialog({
@@ -689,15 +660,13 @@ export default defineComponent({
       isEdit,
       currentYear,
       form,
-      vehicleTypes,
-      fuelTypes,
       colorOptions,
-      availableFeatures,
       confirmCancel,
       addPhoto,
       onPhotosSelected,
       removePhoto,
       onSubmit,
+      VEHICLE_TYPES,
     };
   },
 });

src/modules/viaggi/types/viaggi.types.ts

@@ -14,7 +14,7 @@ export interface Location {
   region?: string;
   country?: string;
   postalCode?: string;
-  coordinates: Coordinates;
+  coordinates?: Coordinates;
 }
 
 export interface Waypoint {
@@ -29,19 +29,9 @@ export interface Waypoint {
 // 🚗 VEICOLI
 // ============================================================
 
-export type VehicleType = 'auto' | 'moto' | 'furgone' | 'minibus' | 'altro';
-
-export type VehicleFeature =
-  | 'aria_condizionata'
-  | 'wifi'
-  | 'presa_usb'
-  | 'bluetooth'
-  | 'bagagliaio_grande'
-  | 'seggiolino_bimbi';
-
 export interface Vehicle {
   _id?: string;
-  type?: VehicleType;
+  type?: string;
   brand?: string;
   model?: string;
   color?: string;
@@ -49,7 +39,7 @@ export interface Vehicle {
   year?: number;
   seats?: number;
   licensePlate?: string;
-  features?: VehicleFeature[];
+  features?: string[];
   isDefault?: boolean;
   isVerified?: boolean;
   photos?: string[];
@@ -77,7 +67,12 @@ export interface Recurrence {
 export type SmokingPreference = 'yes' | 'no' | 'outside_only';
 export type PetsPreference = 'no' | 'small' | 'medium' | 'large' | 'all';
 export type LuggageSize = 'none' | 'small' | 'medium' | 'large';
-export type MusicPreference = 'no_music' | 'quiet' | 'moderate' | 'loud' | 'passenger_choice';
+export type MusicPreference =
+  | 'no_music'
+  | 'quiet'
+  | 'moderate'
+  | 'loud'
+  | 'passenger_choice';
 export type ConversationPreference = 'quiet' | 'moderate' | 'chatty';
 
 export interface RidePreferences {
@@ -221,7 +216,14 @@ export interface FavoriteLocation {
 // ============================================================
 
 export type RideType = 'offer' | 'request';
-export type RideStatus = 'draft' | 'active' | 'full' | 'in_progress' | 'completed' | 'cancelled' | 'expired';
+export type RideStatus =
+  | 'draft'
+  | 'active'
+  | 'full'
+  | 'in_progress'
+  | 'completed'
+  | 'cancelled'
+  | 'expired';
 
 export interface RidePassengers {
   available: number;
@@ -244,7 +246,7 @@ export interface Ride {
   departure: Location;
   destination: Location;
   waypoints?: Waypoint[];
-  dateTime: Date | string;
+  departureDate: Date | string;
   flexibleTime?: boolean;
   flexibleMinutes?: number;
   recurrence?: Recurrence;
@@ -275,7 +277,13 @@ export interface Ride {
 // 📩 RIDE REQUEST (Richiesta Passaggio)
 // ============================================================
 
-export type RideRequestStatus = 'pending' | 'accepted' | 'rejected' | 'cancelled' | 'expired' | 'completed';
+export type RideRequestStatus =
+  | 'pending'
+  | 'accepted'
+  | 'rejected'
+  | 'cancelled'
+  | 'expired'
+  | 'completed';
 
 export interface RideRequestContribution {
   agreed: boolean;
@@ -336,7 +344,16 @@ export interface RideRequest {
 // ============================================================
 
 export type ChatType = 'direct' | 'ride' | 'group';
-export type MessageType = 'text' | 'ride_share' | 'location' | 'image' | 'voice' | 'system' | 'ride_request' | 'ride_accepted' | 'ride_rejected';
+export type MessageType =
+  | 'text'
+  | 'ride_share'
+  | 'location'
+  | 'image'
+  | 'voice'
+  | 'system'
+  | 'ride_request'
+  | 'ride_accepted'
+  | 'ride_rejected';
 
 export interface LastMessage {
   text: string;
@@ -616,7 +633,7 @@ export interface RideFormData {
   departure: Location;
   destination: Location;
   waypoints: Waypoint[];
-  dateTime: string;
+  departureDate: string;
   flexibleTime: boolean;
   flexibleMinutes: number;
   recurrence: Recurrence;
@@ -785,15 +802,15 @@ export const RIDE_TYPE_OPTIONS: RideTypeOption[] = [
     label: 'Offro Passaggio',
     icon: '🟢',
     color: 'positive',
-    description: 'Ho posti disponibili nella mia auto'
+    description: 'Ho posti disponibili nella mia auto',
   },
   {
     value: 'request',
     label: 'Cerco Passaggio',
     icon: '🔴',
     color: 'negative',
-    description: 'Sto cercando qualcuno che mi dia un passaggio'
+    description: 'Sto cercando qualcuno che mi dia un passaggio',
-  }
+  },
 ];
 
 export const DAYS_OF_WEEK: DayOfWeekOption[] = [
@@ -803,13 +820,22 @@ export const DAYS_OF_WEEK: DayOfWeekOption[] = [
   { value: 3, label: 'Mercoledì', shortLabel: 'Mer' },
   { value: 4, label: 'Giovedì', shortLabel: 'Gio' },
   { value: 5, label: 'Venerdì', shortLabel: 'Ven' },
-  { value: 6, label: 'Sabato', shortLabel: 'Sab' }
+  { value: 6, label: 'Sabato', shortLabel: 'Sab' },
+];
+
+export const FUELTYPES = [
+  { value: 'petrol', label: 'Benzina', icon: 'local_gas_station' },
+  { value: 'diesel', label: 'Diesel', icon: 'local_gas_station' },
+  { value: 'hybrid', label: 'Ibrido', icon: 'eco' },
+  { value: 'electric', label: 'Elettrico', icon: 'bolt' },
+  { value: 'lpg', label: 'GPL', icon: 'propane_tank' },
+  { value: 'methane', label: 'Metano', icon: 'propane' },
 ];
 
 export const SMOKING_OPTIONS: PreferenceOption<SmokingPreference>[] = [
   { value: 'no', label: 'Non fumatori', icon: '🚭' },
   { value: 'yes', label: 'Fumatori OK', icon: '🚬' },
-  { value: 'outside_only', label: 'Solo fuori', icon: '🪟' }
+  { value: 'outside_only', label: 'Solo fuori', icon: '🪟' },
 ];
 
 export const PETS_OPTIONS: PreferenceOption<PetsPreference>[] = [
@@ -817,14 +843,14 @@ export const PETS_OPTIONS: PreferenceOption<PetsPreference>[] = [
   { value: 'small', label: 'Taglia piccola', icon: '🐕' },
   { value: 'medium', label: 'Taglia media', icon: '🐕‍🦺' },
   { value: 'large', label: 'Taglia grande', icon: '🦮' },
-  { value: 'all', label: 'Tutti OK', icon: '🐾' }
+  { value: 'all', label: 'Tutti OK', icon: '🐾' },
 ];
 
 export const LUGGAGE_OPTIONS: PreferenceOption<LuggageSize>[] = [
   { value: 'none', label: 'Nessun bagaglio', icon: '🎒' },
   { value: 'small', label: 'Piccolo', icon: '👜' },
   { value: 'medium', label: 'Medio', icon: '🧳' },
-  { value: 'large', label: 'Grande', icon: '🛄' }
+  { value: 'large', label: 'Grande', icon: '🛄' },
 ];
 
 export const MUSIC_OPTIONS: PreferenceOption<MusicPreference>[] = [
@@ -832,21 +858,21 @@ export const MUSIC_OPTIONS: PreferenceOption<MusicPreference>[] = [
   { value: 'quiet', label: 'Sottofondo', icon: '🔈' },
   { value: 'moderate', label: 'Normale', icon: '🔉' },
   { value: 'loud', label: 'Alta', icon: '🔊' },
-  { value: 'passenger_choice', label: 'Scelgono i passeggeri', icon: '🎵' }
+  { value: 'passenger_choice', label: 'Scelgono i passeggeri', icon: '🎵' },
 ];
 
 export const CONVERSATION_OPTIONS: PreferenceOption<ConversationPreference>[] = [
   { value: 'quiet', label: 'Preferisco silenzio', icon: '🤫' },
   { value: 'moderate', label: 'Chiacchierata leggera', icon: '💬' },
-  { value: 'chatty', label: 'Amo conversare', icon: '🗣️' }
+  { value: 'chatty', label: 'Amo conversare', icon: '🗣️' },
 ];
 
-export const VEHICLE_TYPES: PreferenceOption<VehicleType>[] = [
+export const VEHICLE_TYPES: PreferenceOption<string>[] = [
   { value: 'auto', label: 'Auto', icon: '🚗' },
   { value: 'moto', label: 'Moto', icon: '🏍️' },
   { value: 'furgone', label: 'Furgone', icon: '🚐' },
   { value: 'minibus', label: 'Minibus', icon: '🚌' },
-  { value: 'altro', label: 'Altro', icon: '🚙' }
+  { value: 'altro', label: 'Altro', icon: '🚙' },
 ];
 
 export const VEHICLE_COLORS: VehicleColorOption[] = [
@@ -861,7 +887,7 @@ export const VEHICLE_COLORS: VehicleColorOption[] = [
   { name: 'Arancione', hex: '#FFA500' },
   { name: 'Marrone', hex: '#8B4513' },
   { name: 'Beige', hex: '#F5F5DC' },
-  { name: 'Bordeaux', hex: '#800020' }
+  { name: 'Bordeaux', hex: '#800020' },
 ];
 
 export const FEEDBACK_TAGS_OPTIONS: FeedbackTagOption[] = [
@@ -869,7 +895,12 @@ export const FEEDBACK_TAGS_OPTIONS: FeedbackTagOption[] = [
   { value: 'gentile', label: 'Gentile', icon: '😊', isPositive: true },
   { value: 'auto_pulita', label: 'Auto pulita', icon: '✨', isPositive: true },
   { value: 'guida_sicura', label: 'Guida sicura', icon: '🛡️', isPositive: true },
-  { value: 'buona_conversazione', label: 'Buona conversazione', icon: '💬', isPositive: true },
+  {
+    value: 'buona_conversazione',
+    label: 'Buona conversazione',
+    icon: '💬',
+    isPositive: true,
+  },
   { value: 'silenzioso', label: 'Rispetta il silenzio', icon: '🤫', isPositive: true },
   { value: 'flessibile', label: 'Flessibile', icon: '🤸', isPositive: true },
   { value: 'rispettoso', label: 'Rispettoso', icon: '🙏', isPositive: true },
@@ -879,23 +910,26 @@ export const FEEDBACK_TAGS_OPTIONS: FeedbackTagOption[] = [
   { value: 'scortese', label: 'Scortese', icon: '😤', isPositive: false },
   { value: 'guida_pericolosa', label: 'Guida pericolosa', icon: '⚠️', isPositive: false },
   { value: 'auto_sporca', label: 'Auto sporca', icon: '🗑️', isPositive: false },
-  { value: 'non_rispettoso', label: 'Non rispettoso', icon: '👎', isPositive: false }
+  { value: 'non_rispettoso', label: 'Non rispettoso', icon: '👎', isPositive: false },
 ];
 
 export const RECURRENCE_TYPE_OPTIONS: PreferenceOption<RecurrenceType>[] = [
   { value: 'once', label: 'Una volta sola', icon: '1️⃣' },
   { value: 'weekly', label: 'Ogni settimana', icon: '🔄' },
   { value: 'custom_days', label: 'Giorni specifici', icon: '📅' },
-  { value: 'custom_dates', label: 'Date personalizzate', icon: '🗓️' }
+  { value: 'custom_dates', label: 'Date personalizzate', icon: '🗓️' },
 ];
 
-export const VEHICLE_FEATURES_OPTIONS: PreferenceOption<VehicleFeature>[] = [
+export const VEHICLE_FEATURES_OPTIONS: PreferenceOption<string>[] = [
   { value: 'aria_condizionata', label: 'Aria condizionata', icon: '❄️' },
   { value: 'wifi', label: 'WiFi', icon: '📶' },
   { value: 'presa_usb', label: 'Presa USB', icon: '🔌' },
   { value: 'bluetooth', label: 'Bluetooth', icon: '🔵' },
   { value: 'bagagliaio_grande', label: 'Bagagliaio grande', icon: '🧳' },
-  { value: 'seggiolino_bimbi', label: 'Seggiolino bimbi', icon: '👶' }
+  { value: 'seggiolino_bimbi', label: 'Seggiolino bimbi', icon: '👶' },
+  { value: 'animali', label: 'Animali ammessi', icon: 'pets' },
+  { value: 'fumatori', label: 'Si può fumare', icon: 'smoking_rooms' },
+  { value: 'no_fumatori', label: 'Vietato fumare', icon: 'smoke_free' },
 ];
 
 // ============================================================

src/router/routesViaggi.ts

@@ -3,7 +3,7 @@
 // ============================================================
 // File: /myprojplanet_vite/src/modules/viaggi/routes/routes_trasporti.ts
 
-import { ISites, IListRoutes } from '@/model'; // Adatta al tuo path
+import { ISites, IListRoutes } from '@/model';
 
 /**
  * Genera le routes per il modulo Trasporti
@@ -17,7 +17,7 @@ export function getroutesViaggi(site: ISites) {
   const routes_trasporti: IListRoutes[] = [
 
     // ----------------------------------------------------------
-    // 🏠 HOME & DASHBOARD. (📋 LISTA & RICERCA)
+    // 🏠 HOMEPAGE - Community Viaggi (Pagina Principale)
     // ----------------------------------------------------------
     {
       active: true,
@@ -26,37 +26,24 @@ export function getroutesViaggi(site: ISites) {
       materialIcon: 'commute',
       faIcon: 'fas fa-car-side',
       name: 'mypages.TrasportiHome',
-      component: () => import('@/modules/viaggi/pages/RidesListPage.vue'),
+      component: () => import('@/modules/viaggi/pages/CommunityRidesPage.vue'),
-      inmenu: false, // È già nel menu principale
-      submenu: false,
-      level_parent: 0,
-      level_child: 0,
-      meta: {
-        requiresAuth: false,
-        title: 'Viaggi Disponibili',
-        description: 'Esplora i viaggi disponibili nella community'
-      }
-    },
-    {
-      active: true,
-      order: 301,
-      path: '/viaggi/dashboard',
-      materialIcon: 'dashboard',
-      faIcon: 'fas fa-tachometer-alt',
-      name: 'mypages.TrasportiDashboard',
-      component: () => import('@/modules/viaggi/pages/MyRidesPage.vue'),
       inmenu: true,
       submenu: true,
       level_parent: 0,
-      level_child: 0.5,
+      level_child: 1,
       meta: {
-        requiresAuth: true,
+        requiresAuth: false,
-        title: 'Dashboard Viaggi'
+        title: 'Viaggi Community',
+        description: 'Esplora i viaggi disponibili nella community'
       }
     },
+
+    // ----------------------------------------------------------
+    // 🔍 CERCA & MAPPA
+    // ----------------------------------------------------------
     {
       active: true,
-      order: 311,
+      order: 310,
       path: '/viaggi/cerca',
       materialIcon: 'search',
       faIcon: 'fas fa-search',
@@ -65,25 +52,24 @@ export function getroutesViaggi(site: ISites) {
       inmenu: true,
       submenu: true,
       level_parent: 0,
-      level_child: 0.5,
+      level_child: 2,
       meta: {
         requiresAuth: false,
-        title: 'Cerca Passaggio'
+        title: 'Cerca Viaggio'
       }
     },
     {
       active: true,
-      order: 312,
+      order: 311,
       path: '/viaggi/mappa',
       materialIcon: 'map',
       faIcon: 'fas fa-map-marked-alt',
       name: 'mypages.TrasportiMappa',
       component: () => import('@/modules/viaggi/pages/RideSearchPage.vue'),
-      // props: { defaultView: 'map' },
+      inmenu: false, // Integrata come tab nella ricerca
-      inmenu: true,
+      submenu: false,
-      submenu: true,
       level_parent: 0,
-      level_child: 0.5,
+      level_child: 0,
       meta: {
         requiresAuth: false,
         title: 'Mappa Viaggi'
@@ -91,38 +77,20 @@ export function getroutesViaggi(site: ISites) {
     },
 
     // ----------------------------------------------------------
-    // ➕ CREA VIAGGIO
+    // ➕ CREA/OFFRI/RICHIEDI VIAGGIO
     // ----------------------------------------------------------
     {
       active: true,
       order: 320,
-      path: '/viaggi/crea',
-      materialIcon: 'add_circle',
-      faIcon: 'fas fa-plus-circle',
-      name: 'mypages.TrasportiCrea',
-      component: () => import('@/modules/viaggi/pages/RideCreatePage.vue'),
-      inmenu: true,
-      submenu: true,
-      level_parent: 0,
-      level_child: 0.5,
-      meta: {
-        requiresAuth: true,
-        title: 'Crea Viaggio'
-      }
-    },
-    {
-      active: true,
-      order: 321,
       path: '/viaggi/offri',
       materialIcon: 'directions_car',
       faIcon: 'fas fa-car',
       name: 'mypages.TrasportiOffri',
       component: () => import('@/modules/viaggi/pages/RideCreatePage.vue'),
-      // props: { defaultType: 'offer' },
       inmenu: true,
       submenu: true,
       level_parent: 0,
-      level_child: 0.5,
+      level_child: 3,
       meta: {
         requiresAuth: true,
         title: 'Offri Passaggio'
@@ -130,22 +98,38 @@ export function getroutesViaggi(site: ISites) {
     },
     {
       active: true,
-      order: 322,
+      order: 321,
       path: '/viaggi/richiedi',
       materialIcon: 'hail',
       faIcon: 'fas fa-hand-paper',
       name: 'mypages.TrasportiRichiedi',
       component: () => import('@/modules/viaggi/pages/RideCreatePage.vue'),
-      // props: { defaultType: 'request' },
+      inmenu: false, // Disponibile tramite FAB/quick action
-      inmenu: true,
+      submenu: false,
-      submenu: true,
       level_parent: 0,
-      level_child: 0.5,
+      level_child: 0,
       meta: {
         requiresAuth: true,
         title: 'Richiedi Passaggio'
       }
     },
+    {
+      active: true,
+      order: 322,
+      path: '/viaggi/crea',
+      materialIcon: 'add_circle',
+      faIcon: 'fas fa-plus-circle',
+      name: 'mypages.TrasportiCrea',
+      component: () => import('@/modules/viaggi/pages/RideCreatePage.vue'),
+      inmenu: false, // Pagina generica, si usano offri/richiedi
+      submenu: false,
+      level_parent: 0,
+      level_child: 0,
+      meta: {
+        requiresAuth: true,
+        title: 'Crea Viaggio'
+      }
+    },
 
     // ----------------------------------------------------------
     // 📄 DETTAGLIO & MODIFICA VIAGGIO
@@ -161,7 +145,7 @@ export function getroutesViaggi(site: ISites) {
       inmenu: false,
       submenu: false,
       level_parent: 0,
-      level_child: 1,
+      level_child: 0,
       meta: {
         requiresAuth: false,
         title: 'Dettaglio Viaggio'
@@ -175,11 +159,10 @@ export function getroutesViaggi(site: ISites) {
       faIcon: 'fas fa-edit',
       name: 'mypages.TrasportiModifica',
       component: () => import('@/modules/viaggi/pages/RideCreatePage.vue'),
-      // props: { editMode: true },
       inmenu: false,
       submenu: false,
       level_parent: 0,
-      level_child: 1,
+      level_child: 0,
       meta: {
         requiresAuth: true,
         title: 'Modifica Viaggio'
@@ -187,12 +170,12 @@ export function getroutesViaggi(site: ISites) {
     },
 
     // ----------------------------------------------------------
-    // 👤 I MIEI VIAGGI
+    // 📋 I MIEI VIAGGI (Dashboard unificata con tabs)
     // ----------------------------------------------------------
     {
       active: true,
       order: 340,
-      path: '/viaggi/rides/my',
+      path: '/viaggi/miei-viaggi',
       materialIcon: 'folder_shared',
       faIcon: 'fas fa-folder-open',
       name: 'mypages.TrasportiMieiViaggi',
@@ -200,25 +183,60 @@ export function getroutesViaggi(site: ISites) {
       inmenu: true,
       submenu: true,
       level_parent: 0,
-      level_child: 0.5,
+      level_child: 4,
       meta: {
         requiresAuth: true,
         title: 'I Miei Viaggi'
       }
     },
+    // Alias/redirect per retrocompatibilità
     {
       active: true,
       order: 341,
+      path: '/viaggi/dashboard',
+      materialIcon: 'dashboard',
+      faIcon: 'fas fa-tachometer-alt',
+      name: 'mypages.TrasportiDashboard',
+      component: () => import('@/modules/viaggi/pages/MyRidesPage.vue'),
+      inmenu: false,
+      submenu: false,
+      level_parent: 0,
+      level_child: 0,
+      meta: {
+        requiresAuth: true,
+        title: 'Dashboard Viaggi'
+      }
+    },
+    {
+      active: true,
+      order: 342,
+      path: '/viaggi/rides/my',
+      materialIcon: 'folder_shared',
+      faIcon: 'fas fa-folder-open',
+      name: 'mypages.TrasportiMyRides',
+      component: () => import('@/modules/viaggi/pages/MyRidesPage.vue'),
+      inmenu: false,
+      submenu: false,
+      level_parent: 0,
+      level_child: 0,
+      meta: {
+        requiresAuth: true,
+        title: 'I Miei Viaggi'
+      }
+    },
+    // Sottopagine per navigazione diretta (non in menu)
+    {
+      active: true,
+      order: 343,
       path: '/viaggi/rides/my/conducente',
       materialIcon: 'drive_eta',
       faIcon: 'fas fa-car-side',
       name: 'mypages.TrasportiMieiViaggiDriver',
       component: () => import('@/modules/viaggi/pages/MyRidesPage.vue'),
-      // props: { defaultTab: 'driver' },
       inmenu: false,
       submenu: false,
       level_parent: 0,
-      level_child: 1,
+      level_child: 0,
       meta: {
         requiresAuth: true,
         title: 'Viaggi come Conducente'
@@ -226,17 +244,16 @@ export function getroutesViaggi(site: ISites) {
     },
     {
       active: true,
-      order: 342,
+      order: 344,
       path: '/viaggi/miei-viaggi/passeggero',
       materialIcon: 'airline_seat_recline_normal',
       faIcon: 'fas fa-user',
       name: 'mypages.TrasportiMieiViaggiPassenger',
       component: () => import('@/modules/viaggi/pages/MyRidesPage.vue'),
-      // props: { defaultTab: 'passenger' },
       inmenu: false,
       submenu: false,
       level_parent: 0,
-      level_child: 1,
+      level_child: 0,
       meta: {
         requiresAuth: true,
         title: 'Viaggi come Passeggero'
@@ -244,17 +261,16 @@ export function getroutesViaggi(site: ISites) {
     },
     {
       active: true,
-      order: 343,
+      order: 345,
       path: '/viaggi/storico',
       materialIcon: 'history',
       faIcon: 'fas fa-history',
       name: 'mypages.TrasportiStorico',
       component: () => import('@/modules/viaggi/pages/MyRidesPage.vue'),
-      // props: { defaultTab: 'history' },
+      inmenu: false, // Integrato come tab in "I Miei Viaggi"
-      inmenu: true,
+      submenu: false,
-      submenu: true,
       level_parent: 0,
-      level_child: 0.5,
+      level_child: 0,
       meta: {
         requiresAuth: true,
         title: 'Storico Viaggi'
@@ -275,24 +291,25 @@ export function getroutesViaggi(site: ISites) {
       inmenu: true,
       submenu: true,
       level_parent: 0,
-      level_child: 0.5,
+      level_child: 5,
       meta: {
         requiresAuth: true,
-        title: 'Messaggi'
+        title: 'Chat',
+        // badge per messaggi non letti
       }
     },
     {
       active: true,
       order: 351,
-      path: '/viaggi/chat/:id',
+      path: '/viaggi/chat/:chatId',
-      materialIcon: 'chat_bubble',
+      materialIcon: 'forum',
-      faIcon: 'fas fa-comment',
+      faIcon: 'fas fa-comment-dots',
-      name: 'mypages.TrasportiChatDetail',
+      name: 'mypages.TrasportiChat',
       component: () => import('@/modules/viaggi/pages/ChatPage.vue'),
       inmenu: false,
       submenu: false,
       level_parent: 0,
-      level_child: 1,
+      level_child: 0,
       meta: {
         requiresAuth: true,
         title: 'Conversazione'
@@ -300,41 +317,40 @@ export function getroutesViaggi(site: ISites) {
     },
 
     // ----------------------------------------------------------
-    // 👨‍✈️ PROFILO CONDUCENTE
+    // 👤 PROFILO
     // ----------------------------------------------------------
     {
       active: true,
       order: 360,
-      path: '/viaggi/profilo/:userId',
+      path: '/viaggi/profilo',
       materialIcon: 'person',
       faIcon: 'fas fa-user',
       name: 'mypages.TrasportiProfiloDriver',
       component: () => import('@/modules/viaggi/pages/DriverProfilePage.vue'),
-      inmenu: false,
+      inmenu: true,
-      submenu: false,
+      submenu: true,
       level_parent: 0,
-      level_child: 1,
+      level_child: 6,
       meta: {
-        requiresAuth: false,
+        requiresAuth: true,
-        title: 'Profilo Conducente'
+        title: 'Il Mio Profilo'
       }
     },
     {
       active: true,
       order: 361,
-      path: '/viaggi/mio-profilo',
+      path: '/viaggi/profilo/:userId',
       materialIcon: 'account_circle',
       faIcon: 'fas fa-user-circle',
-      name: 'mypages.TrasportiMioProfilo',
+      name: 'mypages.TrasportiProfiloUtente',
       component: () => import('@/modules/viaggi/pages/DriverProfilePage.vue'),
-      // props: { isOwnProfile: true },
+      inmenu: false,
-      inmenu: true,
+      submenu: false,
-      submenu: true,
       level_parent: 0,
-      level_child: 0.5,
+      level_child: 0,
       meta: {
-        requiresAuth: true,
+        requiresAuth: false,
-        title: 'Il Mio Profilo'
+        title: 'Profilo Utente'
       }
     },
 
@@ -352,7 +368,7 @@ export function getroutesViaggi(site: ISites) {
       inmenu: true,
       submenu: true,
       level_parent: 0,
-      level_child: 0.5,
+      level_child: 7,
       meta: {
         requiresAuth: true,
         title: 'I Miei Veicoli'
@@ -369,7 +385,7 @@ export function getroutesViaggi(site: ISites) {
       inmenu: false,
       submenu: false,
       level_parent: 0,
-      level_child: 1,
+      level_child: 0,
       meta: {
         requiresAuth: true,
         title: 'Aggiungi Veicolo'
@@ -383,11 +399,10 @@ export function getroutesViaggi(site: ISites) {
       faIcon: 'fas fa-edit',
       name: 'mypages.TrasportiVeicoloModifica',
       component: () => import('@/modules/viaggi/pages/Vehicleeditpage.vue'),
-      // props: { editMode: true },
       inmenu: false,
       submenu: false,
       level_parent: 0,
-      level_child: 1,
+      level_child: 0,
       meta: {
         requiresAuth: true,
         title: 'Modifica Veicolo'
@@ -400,15 +415,32 @@ export function getroutesViaggi(site: ISites) {
     {
       active: true,
       order: 380,
-      path: '/viaggi/feedback/viaggio/:rideId',
+      path: '/viaggi/miei-feedback',
-      materialIcon: 'rate_review',
+      materialIcon: 'reviews',
       faIcon: 'fas fa-star',
+      name: 'mypages.TrasportiMieiFeedback',
+      component: () => import('@/modules/viaggi/pages/Myfeedbackpage.vue'),
+      inmenu: true,
+      submenu: true,
+      level_parent: 0,
+      level_child: 8,
+      meta: {
+        requiresAuth: true,
+        title: 'I Miei Feedback'
+      }
+    },
+    {
+      active: true,
+      order: 381,
+      path: '/viaggi/feedback/viaggi/:rideId',
+      materialIcon: 'rate_review',
+      faIcon: 'fas fa-star-half-alt',
       name: 'mypages.TrasportiFeedbackRide',
       component: () => import('@/modules/viaggi/pages/Myfeedbackpage.vue'),
       inmenu: false,
       submenu: false,
       level_parent: 0,
-      level_child: 1,
+      level_child: 0,
       meta: {
         requiresAuth: true,
         title: 'Lascia Feedback'
@@ -416,38 +448,21 @@ export function getroutesViaggi(site: ISites) {
     },
     {
       active: true,
-      order: 381,
+      order: 382,
-      path: '/viaggi/feedback/viaggio/:rideId/utente/:toUserId',
+      path: '/viaggi/feedback/viaggi/:rideId/utente/:toUserId',
       materialIcon: 'star_rate',
-      faIcon: 'fas fa-star-half-alt',
+      faIcon: 'fas fa-star',
       name: 'mypages.TrasportiFeedbackUser',
       component: () => import('@/modules/viaggi/pages/Myfeedbackpage.vue'),
       inmenu: false,
       submenu: false,
       level_parent: 0,
-      level_child: 1,
+      level_child: 0,
       meta: {
         requiresAuth: true,
         title: 'Valuta Utente'
       }
     },
-    {
-      active: true,
-      order: 382,
-      path: '/viaggi/miei-feedback',
-      materialIcon: 'reviews',
-      faIcon: 'fas fa-comments',
-      name: 'mypages.TrasportiMieiFeedback',
-      component: () => import('@/modules/viaggi/pages/Myfeedbackpage.vue'),
-      inmenu: true,
-      submenu: true,
-      level_parent: 0,
-      level_child: 0.5,
-      meta: {
-        requiresAuth: true,
-        title: 'I Miei Feedback'
-      }
-    },
 
     // ----------------------------------------------------------
     // 📩 RICHIESTE PASSAGGIO
@@ -463,7 +478,7 @@ export function getroutesViaggi(site: ISites) {
       inmenu: true,
       submenu: true,
       level_parent: 0,
-      level_child: 0.5,
+      level_child: 9,
       meta: {
         requiresAuth: true,
         title: 'Richieste Passaggio'
@@ -477,11 +492,10 @@ export function getroutesViaggi(site: ISites) {
       faIcon: 'fas fa-inbox',
       name: 'mypages.TrasportiRichiesteRicevute',
       component: () => import('@/modules/viaggi/pages/Requestspage.vue'),
-      // props: { defaultTab: 'received' },
       inmenu: false,
       submenu: false,
       level_parent: 0,
-      level_child: 1,
+      level_child: 0,
       meta: {
         requiresAuth: true,
         title: 'Richieste Ricevute'
@@ -495,11 +509,10 @@ export function getroutesViaggi(site: ISites) {
       faIcon: 'fas fa-paper-plane',
       name: 'mypages.TrasportiRichiesteInviate',
       component: () => import('@/modules/viaggi/pages/Requestspage.vue'),
-      // props: { defaultTab: 'sent' },
       inmenu: false,
       submenu: false,
       level_parent: 0,
-      level_child: 1,
+      level_child: 0,
       meta: {
         requiresAuth: true,
         title: 'Richieste Inviate'
@@ -520,10 +533,26 @@ export function getroutesViaggi(site: ISites) {
       inmenu: true,
       submenu: true,
       level_parent: 0,
-      level_child: 0.5,
+      level_child: 10,
       meta: {
         requiresAuth: true,
-        title: 'Impostazioni Viaggi'
+        title: 'Impostazioni'
+      }
+    },
+    {
+      active: true,
+      order: 400,
+      path: '/viaggi/notifiche',
+      materialIcon: 'notifications',
+      name: 'mypages.TrasportiNotifiche',
+      component: () => import('@/modules/viaggi/pages/NotificationsPage.vue'),
+      inmenu: true,
+      submenu: true,
+      level_parent: 0,
+      level_child: 10,
+      meta: {
+        requiresAuth: true,
+        title: 'Notifiche'
       }
     },
 
@@ -541,12 +570,31 @@ export function getroutesViaggi(site: ISites) {
       inmenu: true,
       submenu: true,
       level_parent: 0,
-      level_child: 0.5,
+      level_child: 11,
       meta: {
         requiresAuth: false,
         title: 'Come Funziona'
       }
     },
+
+    // ----------------------------------------------------------
+    // 🔗 ALIAS LEGACY (per retrocompatibilità)
+    // ----------------------------------------------------------
+    {
+      active: true,
+      order: 999,
+      path: '/viaggi/community',
+      name: 'mypages.TrasportiCommunityLegacy',
+      component: () => import('@/modules/viaggi/pages/CommunityRidesPage.vue'),
+      inmenu: false,
+      submenu: false,
+      level_parent: 0,
+      level_child: 0,
+      meta: {
+        requiresAuth: false,
+        title: 'Community'
+      }
+    },
   ];
 
   // ============================================================
@@ -556,7 +604,7 @@ export function getroutesViaggi(site: ISites) {
     {
       active: site.confpages?.enableTrasporti ?? true,
       path: '/viaggi',
-      order: 1402,
+      order: 302,
       faIcon: 'fas fa-car-side',
       materialIcon: 'commute',
       name: 'mypages.menuTrasporti',
@@ -567,10 +615,10 @@ export function getroutesViaggi(site: ISites) {
       solotitle: true,
       infooter: true,
       // Badge per notifiche non lette
-      //badge: {
+      badge: {
-     //   getter: 'viaggi/getTotalNotifications',
+        getter: 'viaggi/getTotalNotifications',
-     //   color: 'negative'
+        color: 'negative'
-      //}
+      },
     },
     // Spread di tutte le routes per il Vue Router
     ...routes_trasporti,
@@ -591,13 +639,13 @@ export function getTrasportiQuickActions() {
       path: '/viaggi/offri'
     },
     {
-      label: 'Cerca Passaggio',
+      label: 'Richiedi Passaggio',
       icon: 'hail',
       color: 'info',
       path: '/viaggi/richiedi'
     },
     {
-      label: 'Cerca',
+      label: 'Cerca Viaggio',
       icon: 'search',
       color: 'primary',
       path: '/viaggi/cerca'
@@ -616,4 +664,5 @@ export function getTrasportiQuickActions() {
 // ============================================================
 export const routesViaggi = {
   routesViaggi: getroutesViaggi,
+  getTrasportiQuickActions
 };

src/statics/lang/it.js

@@ -1298,11 +1298,11 @@ const msg_it = {
       date_updated: 'Ult. Aggiornamento',
     },
     mypages: {
-      TrasportiHome: 'Viaggi',
+      TrasportiHome: 'Viaggi Community',
       TrasportiDashboard: 'Dashboard',
       TrasportiLista: 'Lista Viaggi',
       TrasportiCerca: 'Cerca Passaggio',
-      TrasportiMappa: 'Mappa',
+      TrasportiMappa: 'Mappa Viaggi',
       TrasportiCrea: 'Nuovo Viaggio',
       TrasportiOffri: 'Offri Passaggio',
       TrasportiRichiedi: 'Cerca Passaggio',
@@ -1325,7 +1325,9 @@ const msg_it = {
       TrasportiRichieste: 'Richieste',
       TrasportiRichiesteRicevute: 'Ricevute',
       TrasportiRichiesteInviate: 'Inviate',
+      CommunityRides: 'Viaggi Comunitari',
       TrasportiSettings: 'Impostazioni',
+      TrasportiNotifiche: 'Notifiche',
       TrasportiHelp: 'Come Funziona',
       menuTrasporti: 'Viaggi',
 

src/store/globalStore.ts

@@ -1073,13 +1073,6 @@ export const useGlobalStore = defineStore('GlobalStore', {
     },
 
     async createPushSubscription() {
-      // console.log('ENTER TO createPushSubscription')
-      // If Already subscribed, don't send to the Server DB
-      // if (state.wasAlreadySubOnDb) {
-      //   // console.log('wasAlreadySubOnDb!')
-      //   return
-      // }
-
       if (!this.site.confpages || !this.site.confpages.enablePwa) return;
 
       if (!('serviceWorker' in navigator)) {
@@ -1144,9 +1137,6 @@ export const useGlobalStore = defineStore('GlobalStore', {
         return;
       }
 
-      // console.log('saveSubscriptionToServer: ', newSub)
-      // console.log('context', context)
-
       const options = null;
       let notreg = false;
 
@@ -3292,7 +3282,7 @@ export const useGlobalStore = defineStore('GlobalStore', {
 
     async convertPdf(
       pdfFile: any,
-      salvasufiledascaricare,
+      salvasufiledascaricare: boolean,
       width: string,
       height: string,
       compressione: string,