fix(admin): nav issues and blank screens fix

frontend/src/router/index.ts

@@ -92,6 +92,7 @@ const router = createRouter({
             path: '/admin/routes',
             name: 'admin-routes',
             component: () => import('@/views/AdminRoutes.vue'),
+            meta: { requiresAuth: true, role: 'ADMIN' }
         },
         {
             path: '/admin/reports',

frontend/src/services/reportsService.ts

@@ -2,7 +2,30 @@
  *  Reports are now generated directly from Supabase queries in the AdminReports view. */
 import { supabase } from '@/supabase';
 
+export interface Report {
+    id: string;
+    user_id: string;
+    user_name?: string;
+    message: string;
+    status: 'pending' | 'resolved' | 'archived';
+    created_at: string;
+}
+
 export const reportsService = {
+    async getReports(): Promise<Report[]> {
+        const { data, error } = await supabase.from('reports').select('*').order('created_at', { ascending: false })
+        if (error) {
+            console.warn('Reports table might not exist or error fetching', error)
+            return []
+        }
+        return data as Report[]
+    },
+
+    async updateReportStatus(id: string, status: string): Promise<void> {
+        const { error } = await supabase.from('reports').update({ status }).eq('id', id)
+        if (error) throw new Error(error.message)
+    },
+
     async getRoutesReport() {
         const { data, error } = await supabase.from('routes').select('*')
         if (error) throw new Error(error.message)

frontend/src/views/AdminBusStops.vue

@@ -65,7 +65,8 @@ onMounted(loadStops)
 async function loadStops() {
     isLoading.value = true
     try {
-        stops.value = await busStopsService.getAllBusStops()
+        const data = await busStopsService.getAllBusStops()
+        stops.value = data || []
     } catch (e) {
         error.value = 'Error al cargar las paradas'
     } finally {

frontend/src/views/AdminDrivers.vue

@@ -399,14 +399,16 @@ async function loadData() {
   isLoading.value = true
   try {
     // Load drivers from Supabase
-    const { data: drivers } = await supabase.from('users').select('*, driver_profiles(*)').eq('role', 'DRIVER')
+    const { data: drivers, error: errorDrivers } = await supabase.from('users').select('*, driver_profiles(*)').eq('role', 'DRIVER')
+    if (errorDrivers) throw errorDrivers
     activeDrivers.value = drivers || []
     
     // Load taxis from Supabase
-    const { data: taxisData } = await supabase.from('taxis').select('*').order('owner_name')
+    const { data: taxisData, error: errorTaxis } = await supabase.from('taxis').select('*').order('owner_name')
+    if (errorTaxis) throw errorTaxis
     taxis.value = taxisData || []
   } catch (e) {
-    console.error(e)
+    console.error('Error cargando datos:', e)
   } finally {
     isLoading.value = false
   }

frontend/src/views/AdminReports.vue

@@ -90,7 +90,8 @@ onMounted(async () => {
 async function fetchReports() {
   isLoading.value = true
   try {
-    reports.value = await reportsService.getReports()
+    const data = await reportsService.getReports()
+    reports.value = data || []
   } catch (e) {
     console.error('Error fetching reports:', e)
   } finally {

frontend/src/views/AdminRoutes.vue

@@ -206,12 +206,18 @@ onMounted(async () => {
 })
 
 async function loadInitialData() {
-    const [routesData, stopsData] = await Promise.all([
+    try {
-        routesService.getAllRoutes(),
+        const [routesData, stopsData] = await Promise.all([
-        busStopsService.getAllBusStops()
+            routesService.getAllRoutes(),
-    ])
+            busStopsService.getAllBusStops()
-    routes.value = routesData || []
+        ])
-    allStops.value = stopsData || []
+        routes.value = routesData || []
+        allStops.value = stopsData || []
+    } catch (e) {
+        console.error('Error loading initial data:', e)
+        routes.value = []
+        allStops.value = []
+    }
 }
 
 const availableStops = computed(() => {

frontend/src/views/AdminSchedules.vue

@@ -159,7 +159,8 @@ const form = ref({
 
 onMounted(async () => {
   try {
-    routes.value = await routesService.getAllRoutes()
+    const data = await routesService.getAllRoutes()
+    routes.value = data || []
   } catch (e) {
     console.error('Error loading routes', e)
   }
@@ -177,7 +178,8 @@ async function loadSchedules() {
   isLoadingSchedules.value = true
   try {
     // Get all schedules including drafts (false for onlyPublished)
-    schedules.value = await schedulesService.getRouteSchedules(selectedRouteId.value, false)
+    const data = await schedulesService.getRouteSchedules(selectedRouteId.value, false)
+    schedules.value = data || []
   } catch (e) {
     console.error('Error loading schedules', e)
   } finally {
@@ -347,6 +349,11 @@ async function handleDelete(id: string) {
   cursor: pointer;
 }
 
+.premium-select option {
+  background: var(--bg-primary, #1e1e2d);
+  color: var(--text-primary, #ffffff);
+}
+
 .actions-header {
   display: flex;
   justify-content: space-between;

frontend/src/views/AdminTaxis.vue

@@ -200,9 +200,10 @@ async function loadTaxis() {
   try {
     const { data, error } = await supabase.from('taxis').select('*').order('owner_name')
     if (error) throw error
-    taxis.value = data
+    taxis.value = data || []
   } catch (e) {
-    console.error('Error loading taxis:', e)
+    console.error('Error cargando taxis:', e)
+    error.value = 'Failed to load taxis'
   } finally {
     isLoading.value = false
   }