1161 lines
31 KiB
Vue
1161 lines
31 KiB
Vue
<template>
|
|
<div class="admin-drivers">
|
|
<div class="header">
|
|
<button class="back-link" @click="router.push('/admin')">← Volver al Panel</button>
|
|
<h1>Gestión de Conductores y Taxis</h1>
|
|
<div class="header-actions">
|
|
<button class="btn-primary" @click="openRegisterModal">
|
|
<span class="material-icons">add</span>
|
|
{{ activeTab === 'drivers' ? 'Nuevo Conductor' : 'Nuevo Taxi' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabs -->
|
|
<div class="tabs">
|
|
<button
|
|
:class="{ active: activeTab === 'drivers' }"
|
|
@click="activeTab = 'drivers'"
|
|
>
|
|
<span class="material-icons">badge</span>
|
|
Conductores de la App
|
|
</button>
|
|
<button
|
|
:class="{ active: activeTab === 'taxis' }"
|
|
@click="activeTab = 'taxis'"
|
|
>
|
|
<span class="material-icons">local_taxi</span>
|
|
Directorio de Taxis
|
|
</button>
|
|
</div>
|
|
|
|
<div v-if="isLoading" class="loading">Cargando...</div>
|
|
|
|
<!-- Drivers Tab -->
|
|
<div v-else-if="activeTab === 'drivers'" class="content">
|
|
<div v-if="activeDrivers.length > 0" class="items-grid">
|
|
<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_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">
|
|
<h3>{{ driver.full_name }}</h3>
|
|
<p class="email">{{ driver.email }}</p>
|
|
<div class="badges">
|
|
<span class="badge" :class="driver.driver_profile?.vehicle_type">
|
|
{{ driver.driver_profile?.vehicle_type === 'taxi' ? 'Taxi' : 'Autobús' }}
|
|
</span>
|
|
<span class="badge plate">{{ driver.driver_profile?.license_plate }}</span>
|
|
<span v-if="driver.driver_profile?.speaks_english" class="badge english">🌐 Inglés</span>
|
|
</div>
|
|
</div>
|
|
<span class="material-icons">chevron_right</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="empty-state">
|
|
<span class="material-icons">badge</span>
|
|
<p>No hay conductores registrados en la app</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Taxis Tab -->
|
|
<div v-else-if="activeTab === 'taxis'" class="content">
|
|
<div v-if="taxis.length > 0" class="items-grid">
|
|
<div v-for="taxi in taxis" :key="taxi.id" class="item-card taxi-card">
|
|
<div class="card-header">
|
|
<div class="avatar">
|
|
<img v-if="taxi.image_url" :src="getImageUrl(taxi.image_url)" alt="Taxi">
|
|
<span v-else class="material-icons">local_taxi</span>
|
|
</div>
|
|
<div class="info">
|
|
<h3>{{ taxi.owner_name }}</h3>
|
|
<p class="phone">📞 {{ taxi.phone_number }}</p>
|
|
<div class="badges">
|
|
<span class="badge plate">{{ taxi.license_plate }}</span>
|
|
<span class="badge">{{ taxi.corregimiento }}</span>
|
|
<span class="badge">{{ getShiftLabel(taxi.shift) }}</span>
|
|
<span v-if="taxi.english_speaking" class="badge english">🌐 Inglés</span>
|
|
</div>
|
|
<div class="taxi-meta">
|
|
<span class="rating">⭐ {{ taxi.rating || 5.0 }}</span>
|
|
<span v-if="taxi.cooperative" class="cooperative">{{ taxi.cooperative }}</span>
|
|
<span :class="taxi.is_active ? 'status-active' : 'status-inactive'">
|
|
{{ taxi.is_active ? '● Activo' : '○ Inactivo' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="card-actions">
|
|
<button class="btn-icon" @click.stop="editTaxi(taxi)" title="Editar">
|
|
<span class="material-icons">edit</span>
|
|
</button>
|
|
<button class="btn-icon delete" @click.stop="deleteTaxi(taxi)" title="Eliminar">
|
|
<span class="material-icons">delete</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="empty-state">
|
|
<span class="material-icons">local_taxi</span>
|
|
<p>No hay taxis en el directorio</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Driver Details Modal -->
|
|
<div v-if="selectedUser" class="modal-overlay" @click.self="selectedUser = null">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<h2>Detalles del Conductor</h2>
|
|
<button @click="selectedUser = null">×</button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<section class="basic-info">
|
|
<p><strong>ID:</strong> {{ selectedUser.id }}</p>
|
|
<p><strong>Nombre:</strong> {{ selectedUser.full_name }}</p>
|
|
<p><strong>Correo:</strong> {{ selectedUser.email }}</p>
|
|
<p><strong>Registrado el:</strong> {{ formatDate(selectedUser.created_at) }}</p>
|
|
</section>
|
|
|
|
<section v-if="selectedUser.driver_profile" class="driver-info">
|
|
<h3>Perfil del Conductor</h3>
|
|
<div class="info-grid">
|
|
<p><strong>Cédula:</strong> {{ selectedUser.driver_profile.cedula }}</p>
|
|
<p><strong>Placa:</strong> {{ selectedUser.driver_profile.license_plate }}</p>
|
|
<p><strong>Tipo:</strong> {{ selectedUser.driver_profile.vehicle_type === 'taxi' ? 'Taxi' : 'Autobús' }}</p>
|
|
<p v-if="selectedUser.driver_profile.cooperative_name"><strong>Cooperativa:</strong> {{ selectedUser.driver_profile.cooperative_name }}</p>
|
|
<p v-if="selectedUser.driver_profile.shift"><strong>Horario:</strong> {{ selectedUser.driver_profile.shift }}</p>
|
|
<p v-if="selectedUser.driver_profile.payment_methods"><strong>Pagos:</strong> {{ selectedUser.driver_profile.payment_methods }}</p>
|
|
<p><strong>Inglés:</strong> {{ selectedUser.driver_profile.speaks_english ? 'Sí' : 'No' }}</p>
|
|
</div>
|
|
|
|
<div class="photo-viewer">
|
|
<div v-if="selectedUser.driver_profile.photo_url">
|
|
<label>Foto de Perfil:</label>
|
|
<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="getImageUrl(selectedUser.driver_profile.vehicle_photo_url)" alt="Vehículo">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Register/Edit Modal -->
|
|
<div v-if="showModal" class="modal-overlay" @click.self="closeModal">
|
|
<div class="modal large">
|
|
<div class="modal-header">
|
|
<h2>{{ modalTitle }}</h2>
|
|
<button @click="closeModal">×</button>
|
|
</div>
|
|
|
|
<div class="modal-body">
|
|
<!-- Driver Registration Form -->
|
|
<form v-if="modalMode === 'driver'" @submit.prevent="handleRegisterDriver" class="register-form">
|
|
<div class="vehicle-tabs">
|
|
<button type="button" :class="{ active: driverForm.vehicle_type === 'taxi' }" @click="driverForm.vehicle_type = 'taxi'">Taxi</button>
|
|
<button type="button" :class="{ active: driverForm.vehicle_type === 'bus' }" @click="driverForm.vehicle_type = 'bus'">Autobús</button>
|
|
</div>
|
|
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label>Nombre Completo</label>
|
|
<input v-model="driverForm.full_name" type="text" placeholder="Ej: Juan Pérez" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Correo Electrónico</label>
|
|
<input v-model="driverForm.email" type="email" placeholder="juan@correo.com" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Teléfono</label>
|
|
<input v-model="driverForm.phone_number" type="tel" placeholder="+507 1234-5678" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Contraseña</label>
|
|
<input v-model="driverForm.password" type="password" placeholder="********" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Cédula</label>
|
|
<input v-model="driverForm.cedula" type="text" placeholder="1-234-567" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Matrícula (Placa)</label>
|
|
<input v-model="driverForm.license_plate" type="text" placeholder="ABC-123" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Nombre de Cooperativa</label>
|
|
<input v-model="driverForm.cooperative_name" type="text" placeholder="Coope Rápido">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="options-row">
|
|
<div v-if="driverForm.vehicle_type === 'taxi'" class="option-block">
|
|
<label class="section-label">Horario</label>
|
|
<div class="checkbox-group">
|
|
<label v-for="s in ['Dia', 'Tarde', 'Noche', 'Aeropuerto']" :key="s" class="checkbox-item">
|
|
<input type="checkbox" v-model="driverForm.selectedShifts" :value="s">
|
|
<span>{{ s }}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="option-block">
|
|
<label class="section-label">Método de Pago</label>
|
|
<div class="checkbox-group">
|
|
<label v-for="p in ['Efectivo', 'Yappi', 'Tarjeta']" :key="p" class="checkbox-item">
|
|
<input type="checkbox" v-model="driverForm.selectedPayments" :value="p">
|
|
<span>{{ p }}</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="option-block">
|
|
<label class="section-label">Idiomas</label>
|
|
<div class="checkbox-group">
|
|
<label class="checkbox-item">
|
|
<input type="checkbox" v-model="driverForm.speaksEnglish">
|
|
<span>Habla Inglés</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="file-inputs">
|
|
<div class="form-group">
|
|
<label>Foto de Perfil</label>
|
|
<input type="file" @change="e => handleFileChange(e, 'profile')" accept="image/*">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Foto del Vehículo</label>
|
|
<input type="file" @change="e => handleFileChange(e, 'vehicle')" accept="image/*" required>
|
|
</div>
|
|
</div>
|
|
|
|
<p v-if="registerError" class="error-text">{{ registerError }}</p>
|
|
|
|
<div class="form-actions">
|
|
<button type="button" class="btn-secondary" @click="closeModal">Cancelar</button>
|
|
<button type="submit" class="btn-primary" :disabled="isRegistering">
|
|
{{ isRegistering ? 'Registrando...' : 'Registrar Conductor' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Taxi Form -->
|
|
<form v-else-if="modalMode === 'taxi'" @submit.prevent="saveTaxi">
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label>Nombre del Conductor *</label>
|
|
<input v-model="taxiForm.owner_name" type="text" placeholder="Juan Pérez" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Teléfono *</label>
|
|
<input v-model="taxiForm.phone_number" type="tel" placeholder="+507 1234-5678" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Placa del Vehículo *</label>
|
|
<input v-model="taxiForm.license_plate" type="text" placeholder="CHI-1234" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Zona de Servicio *</label>
|
|
<select v-model="taxiForm.corregimiento" required>
|
|
<option value="">Seleccionar...</option>
|
|
<option value="Boquete">Boquete</option>
|
|
<option value="David - Boquete">David - Boquete</option>
|
|
<option value="Boquete - David">Boquete - David</option>
|
|
<option value="Aeropuerto - Boquete">Aeropuerto - Boquete</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Horario *</label>
|
|
<select v-model="taxiForm.shift" required>
|
|
<option value="">Seleccionar...</option>
|
|
<option value="dia">Día</option>
|
|
<option value="tarde">Tarde</option>
|
|
<option value="noche">Noche</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Cooperativa</label>
|
|
<input v-model="taxiForm.cooperative" type="text" placeholder="Cooperativa Boquete">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Rating (1-5)</label>
|
|
<input v-model.number="taxiForm.rating" type="number" min="1" max="5" step="0.1" placeholder="5.0">
|
|
</div>
|
|
|
|
<div class="form-group checkbox-group">
|
|
<label>
|
|
<input v-model="taxiForm.english_speaking" type="checkbox">
|
|
<span>Habla Inglés</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-group checkbox-group">
|
|
<label>
|
|
<input v-model="taxiForm.is_active" type="checkbox">
|
|
<span>Activo en el directorio</span>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-group full-width">
|
|
<label>Foto del Conductor</label>
|
|
<input type="file" @change="handleTaxiFileChange" accept="image/*">
|
|
<small>Opcional - Foto para el directorio público</small>
|
|
</div>
|
|
</div>
|
|
|
|
<p v-if="taxiError" class="error-text">{{ taxiError }}</p>
|
|
|
|
<div class="form-actions">
|
|
<button type="button" class="btn-secondary" @click="closeModal">Cancelar</button>
|
|
<button type="submit" class="btn-primary" :disabled="isSaving">
|
|
{{ isSaving ? 'Guardando...' : 'Guardar' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, reactive, computed } from 'vue'
|
|
import { usersService } from '@/services/usersService'
|
|
import { authService } from '@/services/authService'
|
|
import { useRouter } from 'vue-router'
|
|
import { supabase } from '@/supabase'
|
|
|
|
const router = useRouter()
|
|
const activeTab = ref<'drivers' | 'taxis'>('drivers')
|
|
const isLoading = ref(false)
|
|
const activeDrivers = ref<any[]>([])
|
|
const taxis = ref<any[]>([])
|
|
const selectedUser = ref<any>(null)
|
|
|
|
// Modal state
|
|
const showModal = ref(false)
|
|
const modalMode = ref<'driver' | 'taxi'>('driver')
|
|
const editingTaxi = ref<any>(null)
|
|
|
|
// Driver registration
|
|
const isRegistering = ref(false)
|
|
const registerError = ref('')
|
|
const driverForm = reactive({
|
|
full_name: '',
|
|
email: '',
|
|
phone_number: '',
|
|
password: '',
|
|
cedula: '',
|
|
license_plate: '',
|
|
vehicle_type: 'taxi' as 'taxi' | 'bus',
|
|
cooperative_name: '',
|
|
selectedShifts: [] as string[],
|
|
selectedPayments: [] as string[],
|
|
speaksEnglish: false
|
|
})
|
|
const profilePhoto = ref<File | null>(null)
|
|
const vehiclePhoto = ref<File | null>(null)
|
|
|
|
// Taxi form
|
|
const isSaving = ref(false)
|
|
const taxiError = ref('')
|
|
const photoFile = ref<File | null>(null)
|
|
const taxiForm = reactive({
|
|
owner_name: '',
|
|
phone_number: '',
|
|
license_plate: '',
|
|
corregimiento: '',
|
|
shift: '',
|
|
cooperative: '',
|
|
rating: 5.0,
|
|
english_speaking: false,
|
|
is_active: true
|
|
})
|
|
|
|
const modalTitle = computed(() => {
|
|
if (modalMode.value === 'driver') return 'Registrar Nuevo Conductor'
|
|
return editingTaxi.value ? 'Editar Taxi' : 'Nuevo Taxi'
|
|
})
|
|
|
|
onMounted(() => {
|
|
loadData()
|
|
})
|
|
|
|
async function loadData() {
|
|
isLoading.value = true
|
|
try {
|
|
// Load drivers from Supabase
|
|
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, error: errorTaxis } = await supabase.from('taxis').select('*').order('owner_name')
|
|
if (errorTaxis) throw errorTaxis
|
|
taxis.value = taxisData || []
|
|
} catch (e) {
|
|
console.error('Error cargando datos:', e)
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
|
|
function openRegisterModal() {
|
|
modalMode.value = activeTab.value === 'drivers' ? 'driver' : 'taxi'
|
|
showModal.value = true
|
|
}
|
|
|
|
function closeModal() {
|
|
showModal.value = false
|
|
editingTaxi.value = null
|
|
photoFile.value = null
|
|
registerError.value = ''
|
|
taxiError.value = ''
|
|
}
|
|
|
|
async function viewDriverDetails(userId: string) {
|
|
try {
|
|
selectedUser.value = await usersService.getUserDetails(userId)
|
|
} catch (e) {
|
|
alert('Error al cargar detalles')
|
|
}
|
|
}
|
|
|
|
const handleFileChange = (event: Event, type: 'profile' | 'vehicle') => {
|
|
const target = event.target as HTMLInputElement
|
|
if (target.files && target.files[0]) {
|
|
if (type === 'profile') profilePhoto.value = target.files[0]
|
|
else vehiclePhoto.value = target.files[0]
|
|
}
|
|
}
|
|
|
|
const handleRegisterDriver = async () => {
|
|
isRegistering.value = true
|
|
registerError.value = ''
|
|
|
|
try {
|
|
const formData = new FormData()
|
|
formData.append('full_name', driverForm.full_name)
|
|
formData.append('email', driverForm.email)
|
|
formData.append('phone_number', driverForm.phone_number)
|
|
formData.append('password', driverForm.password)
|
|
formData.append('cedula', driverForm.cedula)
|
|
formData.append('vehicle_type', driverForm.vehicle_type)
|
|
formData.append('license_plate', driverForm.license_plate)
|
|
formData.append('speaks_english', String(driverForm.speaksEnglish))
|
|
|
|
if (driverForm.cooperative_name) formData.append('cooperative_name', driverForm.cooperative_name)
|
|
if (profilePhoto.value) formData.append('profile_photo', profilePhoto.value)
|
|
if (vehiclePhoto.value) formData.append('vehicle_photo', vehiclePhoto.value)
|
|
|
|
if (driverForm.selectedShifts.length > 0) formData.append('shift', driverForm.selectedShifts.join(','))
|
|
if (driverForm.selectedPayments.length > 0) formData.append('payment_methods', driverForm.selectedPayments.join(','))
|
|
|
|
await authService.registerDriver(formData)
|
|
|
|
closeModal()
|
|
Object.assign(driverForm, {
|
|
full_name: '', email: '', phone_number: '', password: '', cedula: '',
|
|
license_plate: '', vehicle_type: 'taxi', cooperative_name: '',
|
|
selectedShifts: [], selectedPayments: [], speaksEnglish: false
|
|
})
|
|
profilePhoto.value = null
|
|
vehiclePhoto.value = null
|
|
|
|
await loadData()
|
|
} catch (e: any) {
|
|
registerError.value = e.response?.data?.detail || 'Error al registrar conductor'
|
|
} finally {
|
|
isRegistering.value = false
|
|
}
|
|
}
|
|
|
|
function editTaxi(taxi: any) {
|
|
editingTaxi.value = taxi
|
|
modalMode.value = 'taxi'
|
|
Object.assign(taxiForm, {
|
|
owner_name: taxi.owner_name,
|
|
phone_number: taxi.phone_number,
|
|
license_plate: taxi.license_plate,
|
|
corregimiento: taxi.corregimiento,
|
|
shift: taxi.shift,
|
|
cooperative: taxi.cooperative || '',
|
|
rating: taxi.rating || 5.0,
|
|
english_speaking: taxi.english_speaking || false,
|
|
is_active: taxi.is_active
|
|
})
|
|
photoFile.value = null
|
|
taxiError.value = ''
|
|
showModal.value = true
|
|
}
|
|
|
|
function handleTaxiFileChange(event: Event) {
|
|
const target = event.target as HTMLInputElement
|
|
if (target.files && target.files[0]) {
|
|
photoFile.value = target.files[0]
|
|
}
|
|
}
|
|
|
|
async function saveTaxi() {
|
|
isSaving.value = true
|
|
taxiError.value = ''
|
|
|
|
try {
|
|
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: '',
|
|
shift: '', cooperative: '', rating: 5.0, english_speaking: false, is_active: true
|
|
})
|
|
await loadData()
|
|
} catch (e: any) {
|
|
taxiError.value = e.message || 'Error al guardar el taxi'
|
|
console.error('Error saving taxi:', e)
|
|
} finally {
|
|
isSaving.value = false
|
|
}
|
|
}
|
|
|
|
async function deleteTaxi(taxi: any) {
|
|
if (!confirm(`¿Eliminar a ${taxi.owner_name} del directorio?`)) return
|
|
try {
|
|
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')
|
|
}
|
|
}
|
|
|
|
function getShiftLabel(shift: string) {
|
|
const labels: Record<string, string> = {
|
|
'dia': 'Día',
|
|
'tarde': 'Tarde',
|
|
'noche': 'Noche'
|
|
}
|
|
return labels[shift] || shift
|
|
}
|
|
|
|
function getImageUrl(path: string) {
|
|
if (!path) return ''
|
|
if (path.startsWith('http')) return path
|
|
return path
|
|
}
|
|
|
|
function formatDate(dateStr: string) {
|
|
return new Date(dateStr).toLocaleDateString('es-PA')
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.admin-drivers {
|
|
padding: 24px;
|
|
background: var(--bg-primary);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 24px;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.back-link {
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
cursor: pointer;
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
padding: 10px 16px;
|
|
border-radius: 8px;
|
|
transition: all 0.2s;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.back-link:hover {
|
|
background: var(--hover-bg);
|
|
border-color: var(--accent-color);
|
|
color: var(--accent-color);
|
|
transform: translateX(-2px);
|
|
}
|
|
|
|
h1 {
|
|
flex: 1;
|
|
font-size: 28px;
|
|
font-weight: 800;
|
|
color: var(--text-primary);
|
|
margin: 0;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--accent-color);
|
|
color: white;
|
|
border: none;
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--accent-hover);
|
|
}
|
|
|
|
.btn-primary:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Tabs */
|
|
.tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 24px;
|
|
border-bottom: 2px solid var(--border-color);
|
|
}
|
|
|
|
.tabs button {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 12px 24px;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border-bottom: 3px solid transparent;
|
|
margin-bottom: -2px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.tabs button:hover {
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.tabs button.active {
|
|
color: var(--accent-color);
|
|
border-bottom-color: var(--accent-color);
|
|
}
|
|
|
|
.loading, .empty-state {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.empty-state .material-icons {
|
|
font-size: 64px;
|
|
margin-bottom: 16px;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* Items Grid */
|
|
.items-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
|
|
gap: 16px;
|
|
}
|
|
|
|
.item-card {
|
|
background: var(--card-bg);
|
|
border-radius: 12px;
|
|
padding: 16px;
|
|
border: 1px solid var(--border-color);
|
|
box-shadow: 0 2px 8px var(--shadow);
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.item-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 16px var(--shadow);
|
|
}
|
|
|
|
.taxi-card {
|
|
cursor: default;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.avatar {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
background: var(--bg-secondary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
border: 2px solid var(--border-color);
|
|
}
|
|
|
|
.avatar img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.avatar .material-icons {
|
|
font-size: 32px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.info {
|
|
flex: 1;
|
|
}
|
|
|
|
.info h3 {
|
|
margin: 0 0 4px;
|
|
font-size: 1.1rem;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.email, .phone {
|
|
color: var(--text-secondary);
|
|
font-size: 0.9rem;
|
|
margin: 4px 0;
|
|
}
|
|
|
|
.badges {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.badge {
|
|
background: var(--bg-secondary);
|
|
padding: 4px 10px;
|
|
border-radius: 12px;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.badge.taxi {
|
|
background: #fee715;
|
|
color: #101820;
|
|
border-color: #fee715;
|
|
}
|
|
|
|
.badge.bus {
|
|
background: var(--accent-color);
|
|
color: white;
|
|
border-color: var(--accent-color);
|
|
}
|
|
|
|
.badge.plate {
|
|
font-family: 'Courier New', monospace;
|
|
}
|
|
|
|
.badge.english {
|
|
background: #4a90e2;
|
|
color: white;
|
|
border-color: #4a90e2;
|
|
}
|
|
|
|
.taxi-meta {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-top: 8px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.rating {
|
|
color: #fee715;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.cooperative {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.status-active {
|
|
color: var(--accent-color);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.status-inactive {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.card-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.btn-icon {
|
|
background: transparent;
|
|
border: 1px solid var(--border-color);
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.2s;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.btn-icon:hover {
|
|
background: var(--hover-bg);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.btn-icon.delete:hover {
|
|
background: #fee;
|
|
border-color: #f44;
|
|
color: #f44;
|
|
}
|
|
|
|
/* Modal Styles */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 1000;
|
|
padding: 20px;
|
|
}
|
|
|
|
.modal {
|
|
background: var(--card-bg);
|
|
border-radius: 16px;
|
|
max-width: 600px;
|
|
width: 100%;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.modal.large {
|
|
max-width: 800px;
|
|
}
|
|
|
|
.modal-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 24px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
position: sticky;
|
|
top: 0;
|
|
background: var(--card-bg);
|
|
z-index: 10;
|
|
}
|
|
|
|
.modal-header h2 {
|
|
margin: 0;
|
|
font-size: 1.5rem;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.modal-header button {
|
|
background: transparent;
|
|
border: none;
|
|
font-size: 2rem;
|
|
cursor: pointer;
|
|
color: var(--text-secondary);
|
|
width: 36px;
|
|
height: 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.modal-header button:hover {
|
|
background: var(--hover-bg);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.modal-body {
|
|
padding: 24px;
|
|
}
|
|
|
|
/* Form Styles */
|
|
.vehicle-tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.vehicle-tabs button {
|
|
flex: 1;
|
|
padding: 12px;
|
|
border: 2px solid var(--border-color);
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.vehicle-tabs button.active {
|
|
border-color: var(--accent-color);
|
|
background: var(--accent-color);
|
|
color: white;
|
|
}
|
|
|
|
.form-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.form-group.full-width {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.form-group.checkbox-group {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.form-group.checkbox-group label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-group label {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.form-group input[type="text"],
|
|
.form-group input[type="email"],
|
|
.form-group input[type="tel"],
|
|
.form-group input[type="password"],
|
|
.form-group input[type="number"],
|
|
.form-group select {
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
font-size: 1rem;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group select:focus {
|
|
outline: none;
|
|
border-color: var(--accent-color);
|
|
}
|
|
|
|
.form-group input[type="file"] {
|
|
padding: 8px;
|
|
border: 1px dashed var(--border-color);
|
|
border-radius: 8px;
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-group small {
|
|
color: var(--text-secondary);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.options-row {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.option-block {
|
|
flex: 1;
|
|
min-width: 200px;
|
|
}
|
|
|
|
.section-label {
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
margin-bottom: 8px;
|
|
display: block;
|
|
}
|
|
|
|
.checkbox-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.checkbox-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.file-inputs {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 16px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.error-text {
|
|
color: #f44;
|
|
margin: 16px 0;
|
|
padding: 12px;
|
|
background: #fee;
|
|
border-radius: 8px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
justify-content: flex-end;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border-color);
|
|
padding: 12px 24px;
|
|
border-radius: 8px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--hover-bg);
|
|
}
|
|
|
|
/* Driver Details */
|
|
.basic-info, .driver-info {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.driver-info h3 {
|
|
margin: 0 0 16px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.info-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 12px;
|
|
}
|
|
|
|
.info-grid p {
|
|
margin: 0;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.photo-viewer {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 16px;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.photo-viewer label {
|
|
display: block;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.photo-viewer img {
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.form-grid, .info-grid, .file-inputs, .photo-viewer {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.items-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.header {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|