refactor: migrate fully to Supabase, remove Firebase/Render/Python backend
- 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:
@ -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>
|
||||
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
|
||||
@ -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 -->
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user