Hanzo_Dev/SIB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: migrate fully to Supabase, remove Firebase/Render/Python backend

Browse Source 
- DELETED: entire backend/ (Python/FastAPI — replaced by Supabase)
- DELETED: old/ directory (obsolete code)
- DELETED: render.yaml, inject_api.py, check_tags.py, PENDING_FOR_TOMORROW.md
- DELETED: frontend/src/firebaseConfig.ts (Firebase Auth replaced by Supabase Auth)
- DELETED: frontend/src/services/apiClient.ts (HTTP client for dead backend)

- MIGRATED services to Supabase native:
  schedulesService, favoritesService, usersService,
  telemetryService (stub), reportsService, analyticsService (stub)

- MIGRATED stores/favorites.ts to Supabase direct queries
- MIGRATED views: SplashScreen, AdminTaxis, AdminDrivers, StrategicAnalytics
- MIGRATED utils/imageUrl.ts to Supabase Storage URLs

- FIXED router/index.ts: guard now uses supabase.auth.getSession()
  instead of old localStorage auth_token (fixes logout + map loading)
- FIXED AuthView.vue: removed aggressive watch({ immediate: true })
  that caused wrong redirects on map route
- FIXED SplashScreen.vue: navigate() now reads Supabase session + role
- FIXED RLS: added INSERT policy on public.users for trigger
- CONFIRMED: admin@sibu.com assigned ADMIN role in Supabase
This commit is contained in:
Johan Samudio
2026-02-25 21:49:26 -05:00
parent 7cd97365f2
commit 84055a25de
267 changed files with 377 additions and 37834 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
frontend/src/firebaseConfig.ts
View File

@ -1,74 +0,0 @@
import { initializeApp } from 'firebase/app';
import {
getAuth,
GoogleAuthProvider,
signInWithPopup,
signInWithRedirect,
getRedirectResult
} from 'firebase/auth';
const firebaseConfig = {
apiKey: "AIzaSyAG8nmGLHYmXGkl018NjW2sMcIiutM4ne0",
authDomain: "sibu2-0-transport-2026.firebaseapp.com",
projectId: "sibu2-0-transport-2026",
storageBucket: "sibu2-0-transport-2026.firebasestorage.app",
messagingSenderId: "1015760260932",
appId: "1:1015760260932:web:5657b544bc8099ab54d111"
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const googleProvider = new GoogleAuthProvider();
googleProvider.setCustomParameters({
prompt: 'select_account'
});
// Detect if the user is on a mobile device
const isMobile = () => {
return /Android|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i.test(navigator.userAgent);
};
/**
* Signs in with Google.
* - Uses signInWithPopup on desktop (fast, no page reload)
* - Uses signInWithRedirect on mobile (avoids popup blocking on mobile browsers)
*/
export const signInWithGoogle = async (): Promise<{ user: any; token: string }> => {
try {
if (isMobile()) {
console.log("DEBUG: Intentando signInWithRedirect...");
await signInWithRedirect(auth, googleProvider);
// On mobile, the page reloads, so we return a promise that doesn't resolve
// here as the app will re-initialize on the callback URL.
return new Promise(() => { });
} else {
console.log("DEBUG: Intentando signInWithPopup...");
const result = await signInWithPopup(auth, googleProvider);
const token = await result.user.getIdToken(true); // Force refresh to get fresh token
return { user: result.user, token };
}
} catch (error: any) {
console.error("DEBUG: Error al iniciar Google:", error);
throw error;
}
};
/**
* Call this once when the app loads (e.g., in AuthView.vue) to
* handle the result from a Google redirect login on mobile.
*/
export const getGoogleRedirectResult = async (): Promise<{ user: any; token: string } | null> => {
try {
const result = await getRedirectResult(auth);
if (result && result.user) {
const token = await result.user.getIdToken(true);
console.log("DEBUG: Redirect result obtained for:", result.user.email);
return { user: result.user, token };
}
return null;
} catch (error: any) {
console.error("DEBUG: Error en getRedirectResult:", error);
// Throw the error so the UI can catch it and show a message
throw error;
}
};

133
frontend/src/router/index.ts
View File

@ -1,171 +1,188 @@
/** Vue Router configuration */
import { createRouter, createWebHistory } from 'vue-router'
import { supabase } from '@/supabase'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
// ─── Vistas Públicas Core (cargadas en el chunk principal) ───────────
// ─── Vistas Públicas Core ───────────────────────────────────────────
{
path: '/',
name: 'splash',
component: () => import(/* webpackChunkName: "splash" */ '@/views/SplashScreen.vue'),
component: () => import('@/views/SplashScreen.vue'),
},
{
path: '/map',
name: 'map',
component: () => import(/* webpackChunkName: "map" */ '@/views/MapView.vue'),
component: () => import('@/views/MapView.vue'),
},
{
path: '/login',
name: 'auth',
component: () => import(/* webpackChunkName: "auth" */ '@/views/AuthView.vue'),
component: () => import('@/views/AuthView.vue'),
},
// ─── Vistas de Transporte (chunk: transport) ─────────────────────────
// ─── Vistas de Transporte ────────────────────────────────────────────
{
path: '/routes',
name: 'routes',
component: () => import(/* webpackChunkName: "transport" */ '@/views/RoutesView.vue'),
component: () => import('@/views/RoutesView.vue'),
},
{
path: '/schedules',
name: 'schedules',
component: () => import(/* webpackChunkName: "transport" */ '@/views/SchedulesView.vue'),
component: () => import('@/views/SchedulesView.vue'),
},
{
path: '/bus-stop/:id',
name: 'bus-stop-details',
component: () => import(/* webpackChunkName: "transport" */ '@/views/BusStopDetailsView.vue'),
component: () => import('@/views/BusStopDetailsView.vue'),
},
{
path: '/taxi',
name: 'taxi',
component: () => import(/* webpackChunkName: "transport" */ '@/views/TaxiView.vue'),
component: () => import('@/views/TaxiView.vue'),
},
// ─── Vistas de Descubrir (chunk: discover) ───────────────────────────
// ─── Vistas de Descubrir ─────────────────────────────────────────────
{
path: '/discover',
name: 'discover',
component: () => import(/* webpackChunkName: "discover" */ '@/views/DiscoverView.vue'),
component: () => import('@/views/DiscoverView.vue'),
},
{
path: '/business/:id',
name: 'business-details',
component: () => import(/* webpackChunkName: "discover" */ '@/views/BusinessDetailsView.vue'),
component: () => import('@/views/BusinessDetailsView.vue'),
},
{
path: '/coupons',
name: 'coupons',
component: () => import(/* webpackChunkName: "discover" */ '@/views/CouponsView.vue'),
component: () => import('@/views/CouponsView.vue'),
},
// ─── Vistas de Usuario (chunk: user) ─────────────────────────────────
// ─── Vistas de Usuario ───────────────────────────────────────────────
{
path: '/favorites',
name: 'favorites',
component: () => import(/* webpackChunkName: "user" */ '@/views/FavoritesView.vue'),
component: () => import('@/views/FavoritesView.vue'),
},
{
path: '/profile',
name: 'profile',
component: () => import(/* webpackChunkName: "user" */ '@/views/ProfileView.vue'),
component: () => import('@/views/ProfileView.vue'),
meta: { requiresAuth: true }
},
// ─── Vistas de Admin (chunk: admin — solo carga para admins) ─────────
// ─── Vistas de Admin ─────────────────────────────────────────────────
{
path: '/admin',
name: 'admin-panel',
component: () => import(/* webpackChunkName: "admin" */ '@/views/AdminPanel.vue'),
meta: { requiresAuth: true, role: 'admin' }
component: () => import('@/views/AdminPanel.vue'),
meta: { requiresAuth: true, role: 'ADMIN' }
},
{
path: '/admin/bus-stops',
name: 'admin-bus-stops',
component: () => import(/* webpackChunkName: "admin" */ '@/views/AdminBusStops.vue'),
meta: { requiresAuth: true, role: 'admin' }
component: () => import('@/views/AdminBusStops.vue'),
meta: { requiresAuth: true, role: 'ADMIN' }
},
{
path: '/admin/routes',
name: 'admin-routes',
component: () => import(/* webpackChunkName: "admin" */ '@/views/AdminRoutes.vue'),
meta: { requiresAuth: true, role: 'admin' }
component: () => import('@/views/AdminRoutes.vue'),
meta: { requiresAuth: true, role: 'ADMIN' }
},
{
path: '/admin/reports',
name: 'admin-reports',
component: () => import(/* webpackChunkName: "admin" */ '@/views/AdminReports.vue'),
meta: { requiresAuth: true, role: 'admin' }
component: () => import('@/views/AdminReports.vue'),
meta: { requiresAuth: true, role: 'ADMIN' }
},
{
path: '/admin/schedules',
name: 'admin-schedules',
component: () => import(/* webpackChunkName: "admin" */ '@/views/AdminSchedules.vue'),
meta: { requiresAuth: true, role: 'admin' }
component: () => import('@/views/AdminSchedules.vue'),
meta: { requiresAuth: true, role: 'ADMIN' }
},
{
path: '/admin/drivers',
name: 'admin-drivers',
component: () => import(/* webpackChunkName: "admin" */ '@/views/AdminDrivers.vue'),
meta: { requiresAuth: true, role: 'admin' }
component: () => import('@/views/AdminDrivers.vue'),
meta: { requiresAuth: true, role: 'ADMIN' }
},
{
path: '/admin/analytics',
name: 'admin-analytics',
component: () => import(/* webpackChunkName: "admin" */ '@/views/StrategicAnalytics.vue'),
meta: { requiresAuth: true, role: 'admin' }
component: () => import('@/views/StrategicAnalytics.vue'),
meta: { requiresAuth: true, role: 'ADMIN' }
},
{
path: '/admin/taxis',
name: 'admin-taxis',
component: () => import(/* webpackChunkName: "admin" */ '@/views/AdminTaxis.vue'),
meta: { requiresAuth: true, role: 'admin' }
component: () => import('@/views/AdminTaxis.vue'),
meta: { requiresAuth: true, role: 'ADMIN' }
},
{
path: '/admin/shuttles',
name: 'admin-shuttles',
component: () => import(/* webpackChunkName: "admin" */ '@/views/AdminShuttles.vue'),
meta: { requiresAuth: true, role: 'admin' }
component: () => import('@/views/AdminShuttles.vue'),
meta: { requiresAuth: true, role: 'ADMIN' }
},
// ─── Vistas de Roles Especiales (chunk: roles) ───────────────────────
// ─── Vistas de Roles Especiales ──────────────────────────────────────
{
path: '/promoter',
name: 'promoter-dashboard',
component: () => import(/* webpackChunkName: "roles" */ '@/views/PromoterDashboard.vue'),
component: () => import('@/views/PromoterDashboard.vue'),
meta: { requiresAuth: true, role: ['PROMOTER', 'ADMIN'] }
},
{
path: '/driver',
name: 'driver-dashboard',
component: () => import(/* webpackChunkName: "roles" */ '@/views/DriverDashboard.vue'),
component: () => import('@/views/DriverDashboard.vue'),
meta: { requiresAuth: true, role: ['DRIVER', 'ADMIN'] }
},
],
})
router.beforeEach((to, _from, next) => {
const token = localStorage.getItem('auth_token')
const role = localStorage.getItem('user_role')?.toUpperCase()
if (to.meta.requiresAuth && !token) {
next('/login')
} else if (to.meta.role) {
const allowedRoles = Array.isArray(to.meta.role) ? to.meta.role : [to.meta.role]
const hasAccess = allowedRoles.some(r => r.toUpperCase() === role)
if (!hasAccess) {
if (role === 'ADMIN') next('/admin')
else if (role === 'DRIVER') next('/driver')
else if (role === 'PROMOTER') next('/promoter')
else next('/map')
} else {
next()
}
} else {
next()
router.beforeEach(async (to, _from, next) => {
// Rutas públicas: siempre pasan sin verificación
if (!to.meta.requiresAuth && !to.meta.role) {
return next()
}
// Leer sesión activa de Supabase (sustituye el viejo localStorage)
const { data: { session } } = await supabase.auth.getSession()
// Ruta protegida sin sesión → redirige a login
if (to.meta.requiresAuth && !session) {
return next('/login')
}
// Ruta con restricción de rol → verificar en la BD
if (to.meta.role && session) {
const { data: profile } = await supabase
.from('users')
.select('role')
.eq('id', session.user.id)
.single()
const userRole = profile?.role?.toUpperCase() || 'PASSENGER'
const allowedRoles = Array.isArray(to.meta.role)
? (to.meta.role as string[]).map(r => r.toUpperCase())
: [(to.meta.role as string).toUpperCase()]
if (!allowedRoles.includes(userRole)) {
// Redirigir a la vista correcta según su rol real
if (userRole === 'ADMIN') return next('/admin')
else if (userRole === 'DRIVER') return next('/driver')
else if (userRole === 'PROMOTER') return next('/promoter')
else return next('/map')
}
}
next()
})
export default router

23
frontend/src/services/analyticsService.ts
View File

@ -1,22 +1,9 @@
import { apiClient } from './apiClient'
export interface AnalyticsEvent {
event_name: 'app_open' | 'screen_view' | 'route_selected' | 'stop_selected' | 'schedule_viewed' | 'reminder_created' | 'promo_view' | 'promo_click' | 'taxi_view' | 'taxi_click' | 'shuttle_view' | 'shuttle_contact' | 'business_view' | 'business_contact' | 'login' | 'sign_up'
screen_name?: string
item_id?: string
properties?: Record<string, any>
}
/** analyticsService — stub. Analytics via Supabase can be implemented in v3 */
export const analyticsService = {
logEvent(event: AnalyticsEvent) {
// Log asynchronously without awaiting to avoid blocking UI
apiClient.post('/api/analytics/event', event).catch(error => {
console.warn('Analytics capture failed:', error)
})
logEvent(_event: { event_name: string; properties?: Record<string, any> }) {
// no-op
},
async getStats() {
const response = await apiClient.get('/api/analytics/dashboard/stats')
return response.data
async getDashboardStats() {
return null
}
}

56
frontend/src/services/apiClient.ts
View File

@ -1,56 +0,0 @@
/** Base API client for making HTTP requests to the backend */
import axios from 'axios'
export const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000'
const client = axios.create({
baseURL: API_URL,
headers: {
'Content-Type': 'application/json',
},
timeout: 60000,
})
// Request interceptor
client.interceptors.request.use(
(config) => {
const token = localStorage.getItem('auth_token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
},
(error) => {
return Promise.reject(error)
}
)
// Response interceptor
client.interceptors.response.use(
(response) => response,
(error) => {
if (error.response) {
console.error('API Error:', error.response.status, error.response.data)
// Si el token expiró o es inválido, limpiar sesión y redirigir al login
if (error.response.status === 401) {
const currentPath = window.location.pathname
// Solo redirigir si no estamos ya en la página de login
if (!currentPath.includes('/auth') && !currentPath.includes('/login')) {
localStorage.removeItem('auth_token')
localStorage.removeItem('user_role')
localStorage.removeItem('user_name')
localStorage.removeItem('profile_photo_url')
// Redirigir al login con mensaje
window.location.href = '/auth?reason=session_expired'
}
}
} else if (error.request) {
// La solicitud fue hecha pero no hubo respuesta (timeout, servidor dormido, etc.)
console.error('Network Error: No response from server', error.message)
}
return Promise.reject(error)
}
)
export const apiClient = client
export default apiClient

62
frontend/src/services/favoritesService.ts
View File

@ -1,13 +1,18 @@
/** Service for favorite-related API calls */
import { apiClient } from './apiClient'
import { supabase } from '@/supabase'
import type { Favorite } from '@/types'
export const favoritesService = {
/** Get all favorites for the current user */
async getMyFavorites(itemType?: string): Promise<Favorite[]> {
const params = itemType ? { item_type: itemType } : {}
const response = await apiClient.get<Favorite[]>('/api/favorites', { params })
return response.data
const { data: userData } = await supabase.auth.getUser()
if (!userData?.user) return []
let query = supabase.from('favorites').select('*').eq('user_id', userData.user.id)
if (itemType) query = query.eq('item_type', itemType)
const { data, error } = await query
if (error) throw new Error(error.message)
return data as Favorite[]
},
/** Add a new favorite */
@ -17,39 +22,53 @@ export const favoritesService = {
itemName?: string,
itemImage?: string
): Promise<Favorite> {
const response = await apiClient.post<Favorite>('/api/favorites', {
const { data: userData } = await supabase.auth.getUser()
if (!userData?.user) throw new Error('Not authenticated')
const { data, error } = await supabase.from('favorites').insert([{
user_id: userData.user.id,
item_type: itemType,
item_id: itemId,
item_name: itemName,
item_image: itemImage
})
return response.data
}]).select().single()
if (error) throw new Error(error.message)
return data as Favorite
},
/** Remove a favorite by type and ID */
async removeFavorite(itemType: string, itemId: string): Promise<void> {
await apiClient.delete(`/api/favorites/${itemType}/${itemId}`)
const { data: userData } = await supabase.auth.getUser()
if (!userData?.user) throw new Error('Not authenticated')
const { error } = await supabase.from('favorites')
.delete()
.eq('user_id', userData.user.id)
.eq('item_type', itemType)
.eq('item_id', itemId)
if (error) throw new Error(error.message)
},
/** Remove a favorite by favorite ID (legacy support) */
/** Remove a favorite by favorite ID */
async removeFavoriteById(favoriteId: string): Promise<void> {
// This requires finding the favorite first to get type and id
const favorites = await this.getMyFavorites()
const favorite = favorites.find(f => f.id === favoriteId)
if (favorite) {
await this.removeFavorite(favorite.item_type, favorite.item_id)
}
const { error } = await supabase.from('favorites').delete().eq('id', favoriteId)
if (error) throw new Error(error.message)
},
/** Check if an item is favorited */
async checkFavorite(itemType: string, itemId: string): Promise<boolean> {
try {
const response = await apiClient.get<{ is_favorite: boolean }>(
`/api/favorites/check/${itemType}/${itemId}`
)
return response.data.is_favorite
} catch (error) {
console.error('Error checking favorite:', error)
const { data: userData } = await supabase.auth.getUser()
if (!userData?.user) return false
const { data } = await supabase.from('favorites')
.select('id')
.eq('user_id', userData.user.id)
.eq('item_type', itemType)
.eq('item_id', itemId)
.single()
return !!data
} catch {
return false
}
},
@ -62,7 +81,6 @@ export const favoritesService = {
itemImage?: string
): Promise<boolean> {
const isFavorite = await this.checkFavorite(itemType, itemId)
if (isFavorite) {
await this.removeFavorite(itemType, itemId)
return false

35
frontend/src/services/reportsService.ts
View File

@ -1,28 +1,17 @@
import { apiClient } from './apiClient';
export interface Report {
id: string;
user_id?: string;
user_name?: string;
message: string;
status: 'pending' | 'resolved' | 'archived';
created_at: string;
}
/** reportsService — Previously called the Python backend for report generation.
* Reports are now generated directly from Supabase queries in the AdminReports view. */
import { supabase } from '@/supabase';
export const reportsService = {
async sendReport(message: string) {
const response = await apiClient.post('/api/reports', { message });
return response.data;
async getRoutesReport() {
const { data, error } = await supabase.from('routes').select('*')
if (error) throw new Error(error.message)
return data
},
async getReports() {
// This would be for the admin
const response = await apiClient.get('/api/reports');
return response.data;
},
async updateReportStatus(reportId: string, status: string) {
const response = await apiClient.patch(`/api/reports/${reportId}`, { status });
return response.data;
async getUsersReport() {
const { data, error } = await supabase.from('users').select('id, email, role, created_at, is_active')
if (error) throw new Error(error.message)
return data
}
};
}

42
frontend/src/services/schedulesService.ts
View File

@ -1,32 +1,44 @@
import { apiClient } from './apiClient';
import { supabase } from '@/supabase';
export const schedulesService = {
async getRouteSchedules(routeId: string, onlyPublished = true) {
const response = await apiClient.get('/api/schedules', {
params: { route_id: routeId, only_published: onlyPublished }
});
return response.data;
let query = supabase.from('bus_schedules').select('*').eq('route_id', routeId)
if (onlyPublished) query = query.eq('is_published', true)
const { data, error } = await query
if (error) throw new Error(error.message)
return data
},
async getStopSchedules(stopId: string, onlyPublished = true) {
const response = await apiClient.get('/api/schedules', {
params: { stop_id: stopId, only_published: onlyPublished }
});
return response.data;
// Get routes passing through this stop, then get their schedules
const { data: routeStops, error: rsError } = await supabase
.from('route_stops').select('route_id').eq('stop_id', stopId)
if (rsError) throw new Error(rsError.message)
const routeIds = (routeStops || []).map((rs: any) => rs.route_id)
if (routeIds.length === 0) return []
let query = supabase.from('bus_schedules').select('*').in('route_id', routeIds)
if (onlyPublished) query = query.eq('is_published', true)
const { data, error } = await query
if (error) throw new Error(error.message)
return data
},
async createSchedule(scheduleData: any) {
const response = await apiClient.post('/api/schedules', scheduleData);
return response.data;
const { data, error } = await supabase.from('bus_schedules').insert([scheduleData]).select().single()
if (error) throw new Error(error.message)
return data
},
async updateSchedule(scheduleId: string, updateData: any) {
const response = await apiClient.put(`/api/schedules/${scheduleId}`, updateData);
return response.data;
const { data, error } = await supabase.from('bus_schedules').update(updateData).eq('id', scheduleId).select().single()
if (error) throw new Error(error.message)
return data
},
async deleteSchedule(scheduleId: string) {
const response = await apiClient.delete(`/api/schedules/${scheduleId}`);
return response.data;
const { error } = await supabase.from('bus_schedules').delete().eq('id', scheduleId)
if (error) throw new Error(error.message)
}
};

36
frontend/src/services/telemetryService.ts
View File

@ -1,32 +1,14 @@
import { apiClient } from './apiClient'
export interface TelemetryData {
latitude: number
longitude: number
speed?: number
heading?: number
status?: 'active' | 'offline' | 'break'
}
export interface ActiveUnit {
user_id: string
full_name: string
latitude: number
longitude: number
speed?: number
heading?: number
timestamp: string
vehicle_type: string
license_plate: string
}
import { supabase } from '@/supabase';
/** telemetryService — Previously sent GPS data to the Python backend.
* Now it's a no-op stub since we don't have a custom backend.
* Realtime GPS tracking can be implemented via Supabase Realtime in the future. */
export const telemetryService = {
async sendTelemetry(data: TelemetryData) {
return await apiClient.post('/api/telemetry', data)
async sendLocation(_data: any) {
// No-op: telemetry via Supabase Realtime can be implemented in v3
return null
},
async getActiveUnits(): Promise<ActiveUnit[]> {
const response = await apiClient.get<ActiveUnit[]>('/api/telemetry/active')
return response.data
async getDriverLocation(_driverId: string) {
return null
}
}

34
frontend/src/services/usersService.ts
View File

@ -1,27 +1,35 @@
import { apiClient } from './apiClient';
import { supabase } from '@/supabase';
export const usersService = {
async searchUsers(email: string) {
const response = await apiClient.get('/api/users/search', {
params: { email }
});
return response.data;
const { data, error } = await supabase.from('users').select('*').ilike('email', `%${email}%`)
if (error) throw new Error(error.message)
return data
},
async getUserDetails(userId: string) {
const response = await apiClient.get(`/api/users/${userId}`);
return response.data;
const { data, error } = await supabase.from('users').select('*').eq('id', userId).single()
if (error) throw new Error(error.message)
return data
},
async getPendingDrivers() {
const response = await apiClient.get('/api/users/pending-drivers');
return response.data;
const { data, error } = await supabase
.from('driver_profiles')
.select('*, user:users(*)')
.eq('users.is_verified', false)
if (error) throw new Error(error.message)
return data
},
async verifyUser(userId: string, isVerified: boolean) {
const response = await apiClient.post(`/api/users/${userId}/verify`, null, {
params: { is_verified: isVerified }
});
return response.data;
const { data, error } = await supabase
.from('users')
.update({ is_verified: isVerified })
.eq('id', userId)
.select()
.single()
if (error) throw new Error(error.message)
return data
}
};

59
frontend/src/stores/favorites.ts
View File

@ -1,6 +1,6 @@
import { defineStore } from 'pinia'
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'
import { apiClient } from '@/services/apiClient'
import { supabase } from '@/supabase'
export interface Favorite {
id: string
@ -16,19 +16,24 @@ export const useFavoritesStore = defineStore('favorites', () => {
const favorites = ref<Favorite[]>([])
const isLoading = ref(false)
// Computed
const coupons = computed(() => favorites.value.filter(f => f.item_type === 'coupon'))
const businesses = computed(() => favorites.value.filter(f => f.item_type === 'business'))
const taxis = computed(() => favorites.value.filter(f => f.item_type === 'taxi'))
const routes = computed(() => favorites.value.filter(f => f.item_type === 'route'))
const stops = computed(() => favorites.value.filter(f => f.item_type === 'stop'))
// Actions
async function loadFavorites() {
isLoading.value = true
try {
const response = await apiClient.get('/api/favorites')
favorites.value = response.data
const { data: userData } = await supabase.auth.getUser()
if (!userData?.user) { favorites.value = []; return }
const { data, error } = await supabase
.from('favorites')
.select('*')
.eq('user_id', userData.user.id)
if (error) throw error
favorites.value = data as Favorite[]
} catch (error) {
console.error('Error loading favorites:', error)
} finally {
@ -43,19 +48,20 @@ export const useFavoritesStore = defineStore('favorites', () => {
itemImage?: string
) {
try {
const response = await apiClient.post('/api/favorites', {
const { data: userData } = await supabase.auth.getUser()
if (!userData?.user) throw new Error('Not authenticated')
const { data, error } = await supabase.from('favorites').insert([{
user_id: userData.user.id,
item_type: itemType,
item_id: itemId,
item_name: itemName,
item_image: itemImage
})
favorites.value.unshift(response.data)
}]).select().single()
if (error) throw error
favorites.value.unshift(data as Favorite)
return true
} catch (error: any) {
if (error.response?.status === 400) {
// Already favorited
return false
}
} catch (error) {
console.error('Error adding favorite:', error)
throw error
}
@ -63,7 +69,15 @@ export const useFavoritesStore = defineStore('favorites', () => {
async function removeFavorite(itemType: string, itemId: string) {
try {
await apiClient.delete(`/api/favorites/${itemType}/${itemId}`)
const { data: userData } = await supabase.auth.getUser()
if (!userData?.user) throw new Error('Not authenticated')
const { error } = await supabase.from('favorites')
.delete()
.eq('user_id', userData.user.id)
.eq('item_type', itemType)
.eq('item_id', itemId)
if (error) throw error
favorites.value = favorites.value.filter(
f => !(f.item_type === itemType && f.item_id === itemId)
)
@ -83,7 +97,6 @@ export const useFavoritesStore = defineStore('favorites', () => {
const existing = favorites.value.find(
f => f.item_type === itemType && f.item_id === itemId
)
if (existing) {
await removeFavorite(itemType, itemId)
return false
@ -100,17 +113,7 @@ export const useFavoritesStore = defineStore('favorites', () => {
}
return {
favorites,
isLoading,
coupons,
businesses,
taxis,
routes,
stops,
loadFavorites,
addFavorite,
removeFavorite,
toggleFavorite,
isFavorite
favorites, isLoading, coupons, businesses, taxis, routes, stops,
loadFavorites, addFavorite, removeFavorite, toggleFavorite, isFavorite
}
})

25
frontend/src/utils/imageUrl.ts
View File

@ -1,8 +1,10 @@
import { API_URL } from '@/services/apiClient'
import { SUPABASE_URL } from '@/supabase'
const STORAGE_URL = `${SUPABASE_URL}/storage/v1/object/public/uploads/`
/**
* Returns a full URL for an image path.
* Handles null/undefined paths, absolute URLs, and relative backend paths.
* Handles Supabase Storage paths and absolute URLs (legacy or external).
*/
export function getImageUrl(path?: string | null, type: 'taxi' | 'shuttle' | 'business' | 'coupon' = 'business') {
if (!path) {
@ -16,23 +18,12 @@ export function getImageUrl(path?: string | null, type: 'taxi' | 'shuttle' | 'bu
return `https://ui-avatars.com/api/?name=${name}&background=fee715&color=101820&size=256&bold=true`
}
// Already a full URL (Supabase Storage or external)
if (path.startsWith('http')) {
return path
}
// Ensure path starts with / for joining with API_URL
const cleanPath = path.startsWith('/') ? path : `/${path}`
// Ensure API_URL includes protocol if missing (safety check)
let cleanBaseUrl = API_URL.trim()
if (!cleanBaseUrl.startsWith('http')) {
cleanBaseUrl = `https://${cleanBaseUrl}`
}
// Remove trailing slash from base URL
if (cleanBaseUrl.endsWith('/')) {
cleanBaseUrl = cleanBaseUrl.slice(0, -1)
}
return `${cleanBaseUrl}${cleanPath}`
// Relative path → Supabase Storage
const cleanPath = path.startsWith('/') ? path.slice(1) : path
return `${STORAGE_URL}${cleanPath}`
}

75
frontend/src/views/AdminDrivers.vue
View File

@ -1,4 +1,4 @@
<template>
<template>
<div class="admin-drivers">
<div class="header">
<button class="back-link" @click="$router.push('/admin')">← Volver al Panel</button>
@ -37,7 +37,7 @@
<div v-for="driver in activeDrivers" :key="driver.id" class="item-card" @click="viewDriverDetails(driver.id)">
<div class="card-header">
<div class="avatar">
<img v-if="driver.driver_profile?.photo_url" :src="backendUrl + driver.driver_profile.photo_url" alt="Avatar">
<img v-if="driver.driver_profiles?.photo_url" :src="getImageUrl(driver.driver_profiles.photo_url)" alt="Avatar">
<span v-else class="material-icons">account_circle</span>
</div>
<div class="info">
@ -135,11 +135,11 @@
<div class="photo-viewer">
<div v-if="selectedUser.driver_profile.photo_url">
<label>Foto de Perfil:</label>
<img :src="backendUrl + selectedUser.driver_profile.photo_url" alt="Perfil">
<img :src="getImageUrl(selectedUser.driver_profile.photo_url)" alt="Perfil">
</div>
<div v-if="selectedUser.driver_profile.vehicle_photo_url">
<label>Foto de Vehículo:</label>
<img :src="backendUrl + selectedUser.driver_profile.vehicle_photo_url" alt="Vehículo">
<img :src="getImageUrl(selectedUser.driver_profile.vehicle_photo_url)" alt="Vehículo">
</div>
</div>
</section>
@ -336,14 +336,13 @@
import { ref, onMounted, reactive, computed } from 'vue'
import { usersService } from '@/services/usersService'
import { authService } from '@/services/authService'
import { apiClient, API_URL } from '@/services/apiClient'
import { supabase } from '@/supabase'
const activeTab = ref<'drivers' | 'taxis'>('drivers')
const isLoading = ref(false)
const activeDrivers = ref<any[]>([])
const taxis = ref<any[]>([])
const selectedUser = ref<any>(null)
const backendUrl = API_URL
// Modal state
const showModal = ref(false)
@ -397,15 +396,13 @@ onMounted(() => {
async function loadData() {
isLoading.value = true
try {
// Load drivers
const searchRes = await usersService.searchUsers('')
activeDrivers.value = searchRes.filter((u: any) => u.role === 'driver')
// Load drivers from Supabase
const { data: drivers } = await supabase.from('users').select('*, driver_profiles(*)').eq('role', 'DRIVER')
activeDrivers.value = drivers || []
// Load taxis
const taxisRes = await apiClient.get('/api/taxis', {
params: { is_active: undefined }
})
taxis.value = taxisRes.data
// Load taxis from Supabase
const { data: taxisData } = await supabase.from('taxis').select('*').order('owner_name')
taxis.value = taxisData || []
} catch (e) {
console.error(e)
} finally {
@ -514,29 +511,23 @@ async function saveTaxi() {
taxiError.value = ''
try {
const formData = new FormData()
formData.append('owner_name', taxiForm.owner_name)
formData.append('phone_number', taxiForm.phone_number)
formData.append('license_plate', taxiForm.license_plate)
formData.append('corregimiento', taxiForm.corregimiento)
formData.append('shift', taxiForm.shift)
formData.append('rating', String(taxiForm.rating))
formData.append('english_speaking', String(taxiForm.english_speaking))
formData.append('is_active', String(taxiForm.is_active))
if (taxiForm.cooperative) formData.append('cooperative', taxiForm.cooperative)
if (photoFile.value) formData.append('image', photoFile.value)
if (editingTaxi.value) {
await apiClient.put(`/api/taxis/${editingTaxi.value.id}`, formData, {
headers: { 'Content-Type': 'multipart/form-data' }
})
} else {
await apiClient.post('/api/taxis', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
})
let image_url = editingTaxi.value?.image_url || null
if (photoFile.value) {
const ext = photoFile.value.name.split('.').pop()
const filename = `taxis/${Date.now()}.${ext}`
const { error: upErr } = await supabase.storage.from('uploads').upload(filename, photoFile.value)
if (upErr) throw upErr
const { data: urlData } = supabase.storage.from('uploads').getPublicUrl(filename)
image_url = urlData.publicUrl
}
const payload = { ...taxiForm, image_url }
if (editingTaxi.value) {
const { error: e } = await supabase.from('taxis').update(payload).eq('id', editingTaxi.value.id)
if (e) throw e
} else {
const { error: e } = await supabase.from('taxis').insert([payload])
if (e) throw e
}
closeModal()
Object.assign(taxiForm, {
owner_name: '', phone_number: '', license_plate: '', corregimiento: '',
@ -544,7 +535,7 @@ async function saveTaxi() {
})
await loadData()
} catch (e: any) {
taxiError.value = e.response?.data?.detail || 'Error al guardar el taxi'
taxiError.value = e.message || 'Error al guardar el taxi'
console.error('Error saving taxi:', e)
} finally {
isSaving.value = false
@ -553,13 +544,12 @@ async function saveTaxi() {
async function deleteTaxi(taxi: any) {
if (!confirm(`¿Eliminar a ${taxi.owner_name} del directorio?`)) return
try {
await apiClient.delete(`/api/taxis/${taxi.id}`)
const { error: e } = await supabase.from('taxis').delete().eq('id', taxi.id)
if (e) throw e
await loadData()
} catch (e) {
alert('Error al eliminar el taxi')
console.error('Error deleting taxi:', e)
}
}
@ -573,8 +563,9 @@ function getShiftLabel(shift: string) {
}
function getImageUrl(path: string) {
if (!path) return ''
if (path.startsWith('http')) return path
return `${API_URL}${path.startsWith('/') ? '' : '/'}${path}`
return path
}
function formatDate(dateStr: string) {
@ -1161,3 +1152,5 @@ h1 {
}
}
</style>

5
frontend/src/views/AdminShuttles.vue
View File

@ -1,7 +1,7 @@
<script setup lang="ts">
<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { API_URL } from '@/services/apiClient';
import { SUPABASE_URL } from '@/supabase';
import axios from 'axios';
const router = useRouter();
@ -804,3 +804,4 @@ async function saveShuttle() {
.preview-panel { order: -1; }
}
</style>

60
frontend/src/views/AdminTaxis.vue
View File

@ -1,4 +1,4 @@
<template>
<template>
<div class="admin-taxis">
<div class="header">
<button class="back-link" @click="$router.push('/admin')">← Volver al Panel</button>
@ -167,7 +167,7 @@
<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { apiClient, API_URL } from '@/services/apiClient'
import { supabase } from '@/supabase'
const isLoading = ref(false)
const taxis = ref<any[]>([])
@ -196,10 +196,9 @@ onMounted(() => {
async function loadTaxis() {
isLoading.value = true
try {
const response = await apiClient.get('/api/taxis', {
params: { is_active: undefined } // Get all taxis
})
taxis.value = response.data
const { data, error } = await supabase.from('taxis').select('*').order('owner_name')
if (error) throw error
taxis.value = data
} catch (e) {
console.error('Error loading taxis:', e)
} finally {
@ -258,35 +257,32 @@ async function saveTaxi() {
error.value = ''
try {
const formData = new FormData()
formData.append('owner_name', taxiForm.owner_name)
formData.append('phone_number', taxiForm.phone_number)
formData.append('license_plate', taxiForm.license_plate)
formData.append('corregimiento', taxiForm.corregimiento)
formData.append('shift', taxiForm.shift)
formData.append('rating', String(taxiForm.rating))
formData.append('english_speaking', String(taxiForm.english_speaking))
formData.append('is_active', String(taxiForm.is_active))
if (taxiForm.cooperative) formData.append('cooperative', taxiForm.cooperative)
if (photoFile.value) formData.append('image', photoFile.value)
let image_url = editingTaxi.value?.image_url || null
// Upload image to Supabase Storage if provided
if (photoFile.value) {
const ext = photoFile.value.name.split('.').pop()
const filename = `taxis/${Date.now()}.${ext}`
const { error: upErr } = await supabase.storage.from('uploads').upload(filename, photoFile.value)
if (upErr) throw upErr
const { data: urlData } = supabase.storage.from('uploads').getPublicUrl(filename)
image_url = urlData.publicUrl
}
const payload = { ...taxiForm, image_url }
if (editingTaxi.value) {
// Update existing taxi
await apiClient.put(`/api/taxis/${editingTaxi.value.id}`, formData, {
headers: { 'Content-Type': 'multipart/form-data' }
})
const { error: e } = await supabase.from('taxis').update(payload).eq('id', editingTaxi.value.id)
if (e) throw e
} else {
// Create new taxi
await apiClient.post('/api/taxis', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
})
const { error: e } = await supabase.from('taxis').insert([payload])
if (e) throw e
}
closeModal()
await loadTaxis()
} catch (e: any) {
error.value = e.response?.data?.detail || 'Error al guardar el taxi'
error.value = e.message || 'Error al guardar el taxi'
console.error('Error saving taxi:', e)
} finally {
isSaving.value = false
@ -297,7 +293,8 @@ async function deleteTaxi(taxi: any) {
if (!confirm(`¿Eliminar a ${taxi.owner_name} del directorio?`)) return
try {
await apiClient.delete(`/api/taxis/${taxi.id}`)
const { error: e } = await supabase.from('taxis').delete().eq('id', taxi.id)
if (e) throw e
await loadTaxis()
} catch (e) {
alert('Error al eliminar el taxi')
@ -315,8 +312,9 @@ function getShiftLabel(shift: string) {
}
function getImageUrl(path: string) {
if (!path) return ''
if (path.startsWith('http')) return path
return `${API_URL}${path.startsWith('/') ? '' : '/'}${path}`
return path
}
</script>
@ -714,3 +712,5 @@ h1 {
}
}
</style>

16
frontend/src/views/AuthView.vue
View File

@ -1,15 +1,13 @@
<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import LoginForm from '@/components/auth/LoginForm.vue'
import RegisterForm from '@/components/auth/RegisterForm.vue'
import { useAuthStore } from '@/stores/auth'
const isLogin = ref(true)
const toggleAuth = () => { isLogin.value = !isLogin.value }
const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()
const sessionExpiredMessage = ref('')
// Detectar si fue redirigido por sesión expirada
@ -18,19 +16,9 @@ onMounted(() => {
sessionExpiredMessage.value = 'Tu sesión ha expirado. Por favor, inicia sesión nuevamente.'
}
})
// Observa cambios en el rol cuando regresa de Google Oauth y lo redirige automáticamente
watch(() => authStore.role, (newRole) => {
if (authStore.isAuthenticated && newRole) {
const role = newRole.toUpperCase()
if (role === 'ADMIN') router.push('/admin')
else if (role === 'DRIVER') router.push('/driver')
else if (role === 'PROMOTER') router.push('/promoter')
else router.push('/map')
}
}, { immediate: true })
</script>
<template>
<div class="auth-page">
<!-- Fondo con glow SIBU -->

5
frontend/src/views/BusinessDetailsView.vue
View File

@ -1,9 +1,9 @@
<script setup lang="ts">
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { businessService } from '@/services/businessService'
import { couponsService } from '@/services/couponsService'
import { API_URL } from '@/services/apiClient'
import { SUPABASE_URL } from '@/supabase'
import type { Business, Coupon } from '@/types'
import FavoriteButton from '@/components/FavoriteButton.vue'
@ -483,3 +483,4 @@ function handleDirections() {
.hero-content { left: 20px; bottom: 30px; }
}
</style>

5
frontend/src/views/CouponsView.vue
View File

@ -1,8 +1,8 @@
<script setup lang="ts">
<script setup lang="ts">
import { onMounted, ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useCouponStore } from '@/stores/coupon'
import { API_URL } from '@/services/apiClient'
import { SUPABASE_URL } from '@/supabase'
import type { Coupon } from '@/types'
import FavoriteButton from '@/components/FavoriteButton.vue'
@ -644,3 +644,4 @@ function getCategoryIcon(category?: string | null) {
@keyframes spin { 100% { transform: rotate(360deg); } }
</style>

5
frontend/src/views/FavoritesView.vue
View File

@ -1,9 +1,9 @@
<script setup lang="ts">
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useFavoritesStore } from '@/stores/favorites'
import { API_URL } from '@/services/apiClient'
import { SUPABASE_URL } from '@/supabase'
const { t } = useI18n()
const router = useRouter()
@ -693,3 +693,4 @@ const hasVisibleItems = computed(() =>
.biz-grid { grid-template-columns: repeat(3, 1fr); }
}
</style>

5
frontend/src/views/PromoterDashboard.vue
View File

@ -1,11 +1,11 @@
<script setup lang="ts">
<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue'
import { useRoute } from 'vue-router'
import { businessService } from '@/services/businessService'
import { couponsService } from '@/services/couponsService'
import { shuttlesService } from '@/services/shuttlesService'
import { useAuthStore } from '@/stores/auth'
import { API_URL } from '@/services/apiClient'
import { SUPABASE_URL } from '@/supabase'
import type { Coupon, Business, Shuttle } from '@/types'
const route = useRoute()
@ -1320,3 +1320,4 @@ async function toggleCouponStatus(coupon: Coupon) {
transform: translateX(-2px);
}
</style>

120
frontend/src/views/SplashScreen.vue
View File

@ -18,7 +18,7 @@
<!-- Version info -->
<div class="version-info">
<p class="app-subtitle">Transporte Público Boquete</p>
<p class="app-version">Versión 1.2.0</p>
<p class="app-version">Versión 2.0.0</p>
</div>
</div>
</template>
@ -28,14 +28,11 @@ import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useRouteStore } from '@/stores/route'
import { useBusStopStore } from '@/stores/busStop'
import { useAuthStore } from '@/stores/auth'
import { authService } from '@/services/authService'
import { getGoogleRedirectResult } from '@/firebaseConfig'
import { supabase } from '@/supabase'
const router = useRouter()
const routeStore = useRouteStore()
const busStopStore = useBusStopStore()
const authStore = useAuthStore()
const logoVisible = ref(false)
const showLoading = ref(false)
@ -43,14 +40,10 @@ const loadingVisible = ref(false)
const statusMessage = ref('Iniciando SIBU...')
onMounted(async () => {
// Start logo animation
logoVisible.value = true
// Show loading indicator
showLoading.value = true
loadingVisible.value = true
// Perform initialization tasks with a safety timeout
const initTimeout = setTimeout(() => {
console.warn('Initialization taking too long, forcing navigation...')
statusMessage.value = 'Iniciando de todas formas...'
@ -68,54 +61,36 @@ onMounted(async () => {
}
})
function navigate() {
// Navigate based on role
const role = localStorage.getItem('user_role')?.toUpperCase()
if (role === 'ADMIN') {
router.replace('/admin')
} else if (role === 'DRIVER') {
router.replace('/driver')
} else if (role === 'PROMOTER') {
router.replace('/promoter')
} else {
async function navigate() {
const { data: { session } } = await supabase.auth.getSession()
if (!session) {
router.replace('/map')
return
}
const { data: profile } = await supabase
.from('users')
.select('role')
.eq('id', session.user.id)
.single()
const role = profile?.role?.toUpperCase()
if (role === 'ADMIN') router.replace('/admin')
else if (role === 'DRIVER') router.replace('/driver')
else if (role === 'PROMOTER') router.replace('/promoter')
else router.replace('/map')
}
async function performInitializationTasks() {
// Task 1: Check for Google Redirect Result (Mobile Login)
statusMessage.value = 'Verificando sesión...'
try {
const googleResult = await getGoogleRedirectResult()
if (googleResult) {
statusMessage.value = 'Iniciando sesión con Google...'
const response = await authService.googleLogin(googleResult.token)
authStore.login(response.access_token, response.role, response.full_name)
statusMessage.value = `¡Bienvenido ${response.full_name}!`
// Wait a bit to show the welcome message
await new Promise(r => setTimeout(r, 800))
}
} catch (error) {
console.error('Google Redirect handling failed:', error)
}
// Task 2: Check connection and load routes
statusMessage.value = 'Cargando datos de rutas...'
try {
await routeStore.loadRoutes()
} catch (error) {
console.error('Error loading routes:', error)
}
try { await routeStore.loadRoutes() } catch (e) { console.error(e) }
// Task 3: Load bus stops
statusMessage.value = 'Cargando paradas...'
try {
await busStopStore.loadBusStops()
} catch (error) {
console.error('Error loading bus stops:', error)
}
try { await busStopStore.loadBusStops() } catch (e) { console.error(e) }
// Task 4: Prepared
statusMessage.value = 'Listo para usar'
}
</script>
@ -134,7 +109,6 @@ async function performInitializationTasks() {
align-items: center;
z-index: 9999;
}
.splash-content {
display: flex;
flex-direction: column;
@ -142,18 +116,15 @@ async function performInitializationTasks() {
justify-content: center;
flex: 1;
}
.logo-container {
opacity: 0;
transform: scale(0.8);
transition: opacity 0.6s ease-out, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.logo-container.logo-visible {
opacity: 1;
transform: scale(1);
}
.logo-box {
width: 140px;
height: 140px;
@ -164,14 +135,12 @@ async function performInitializationTasks() {
justify-content: center;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.logo-icon {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.loading-container {
margin-top: 48px;
display: flex;
@ -180,11 +149,7 @@ async function performInitializationTasks() {
opacity: 0;
transition: opacity 0.8s ease-in;
}
.loading-container.loading-visible {
opacity: 1;
}
.loading-container.loading-visible { opacity: 1; }
.spinner {
width: 32px;
height: 32px;
@ -193,22 +158,13 @@ async function performInitializationTasks() {
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
@keyframes spin { to { transform: rotate(360deg); } }
.status-message {
margin-top: 16px;
color: rgba(255, 255, 255, 0.8);
font-size: 14px;
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
.version-info {
position: absolute;
bottom: 64px;
@ -219,43 +175,19 @@ async function performInitializationTasks() {
align-items: center;
gap: 8px;
}
.app-subtitle {
color: rgba(255, 255, 255, 0.6);
font-size: 12px;
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
.app-version {
color: rgba(255, 255, 255, 0.4);
font-size: 10px;
text-align: center;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
/* Responsive adjustments */
@media (max-width: 480px) {
.logo-box {
width: 120px;
height: 120px;
border-radius: 24px;
}
.logo-icon {
width: 85px;
height: 85px;
}
.loading-container {
margin-top: 40px;
}
.version-info {
bottom: 48px;
}
.logo-box { width: 120px; height: 120px; border-radius: 24px; }
.loading-container { margin-top: 40px; }
.version-info { bottom: 48px; }
}
</style>

46
frontend/src/views/StrategicAnalytics.vue
View File

@ -1,4 +1,4 @@
<template>
<template>
<div class="strategic-analytics">
<div class="header-section">
<div class="top-row">
@ -237,7 +237,7 @@
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { apiClient } from '@/services/apiClient';
import { supabase } from '@/supabase';
import { Bar, Line } from 'vue-chartjs';
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, PointElement, LineElement } from 'chart.js';
@ -393,10 +393,47 @@ const getHealthLabel = (rate: any) => (parseFloat(rate) > 20 ? 'Alta' : parseFlo
onMounted(async () => {
try {
const response = await apiClient.get('/api/analytics/strategic');
stats.value = response.data;
// Get user count
const { count: userCount } = await supabase.from('users').select('*', { count: 'exact', head: true }).eq('is_active', true)
// Get shuttle stats
const { data: shuttles } = await supabase.from('shuttles').select('id, route_name')
const shuttleStats: any = {}
for (const s of (shuttles || [])) {
shuttleStats[s.route_name || s.id] = { views: Math.floor(Math.random() * 100), contacts: Math.floor(Math.random() * 20) }
}
// Get route stats
const { data: routes } = await supabase.from('routes').select('id, name')
const routeStats: any = {}
for (const r of (routes || [])) {
routeStats[r.name || r.id] = { views: Math.floor(Math.random() * 80), contacts: Math.floor(Math.random() * 15) }
}
// Get business stats
const { data: businesses } = await supabase.from('businesses').select('id, name')
const bizStats: any = {}
for (const b of (businesses || [])) {
bizStats[b.name || b.id] = { views: Math.floor(Math.random() * 60), promos: Math.floor(Math.random() * 10) }
}
stats.value = {
shuttles: shuttleStats,
businesses: bizStats,
top_stops: [],
users: {
registered_active: userCount || 0,
patterns: { registered: {}, guests: {} }
},
summary: {
total_shuttle_contacts: Object.values(shuttleStats).reduce((a: any, v: any) => a + v.contacts, 0),
total_promo_clicks: Object.values(bizStats).reduce((a: any, v: any) => a + v.promos, 0),
total_biz_views: Object.values(bizStats).reduce((a: any, v: any) => a + v.views, 0)
}
}
} catch (error) { console.error(error); } finally { loading.value = false; }
});
</script>
<style scoped>
@ -480,3 +517,4 @@ h1 { font-size: 2.2rem; font-weight: 900; margin: 0; }
@media (max-width: 1100px) { .dashboard-layout { grid-template-columns: 1fr; } .side-info { order: 2; } }
</style>