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

Refactor shuttle and route management: price separation, premium preview design, and simplified route creation form

Browse Source
This commit is contained in:
Johan Samudio
2026-02-25 10:34:38 -05:00
parent 4bf75d3302
commit a9097b82d2
5 changed files with 534 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,19 +1,21 @@
<script setup lang="ts">
import { ref, onMounted, watch, computed } from 'vue'
import { useRoute } from 'vue-router'
import { couponsService } from '@/services/couponsService'
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 type { Coupon, Business } from '@/types'
import type { Coupon, Business, Shuttle } from '@/types'
const route = useRoute()
const authStore = useAuthStore()
// State
const activeTab = ref<'promotions' | 'businesses'>('promotions')
const activeTab = ref<'promotions' | 'businesses' | 'shuttles'>('promotions')
const coupons = ref<Coupon[]>([])
const businesses = ref<Business[]>([])
const shuttles = ref<Shuttle[]>([])
const isLoading = ref(true)
const searchQuery = ref('')
const categoryFilter = ref('Todas')
@ -61,7 +63,7 @@ const currentBusiness = ref<Partial<Business>>({
const userName = localStorage.getItem('user_name') || 'Promotor'
onMounted(async () => {
await Promise.all([loadCoupons(), loadBusinesses()])
await Promise.all([loadCoupons(), loadBusinesses(), loadShuttles()])
checkHash()
})
@ -70,6 +72,8 @@ watch(() => route.hash, () => checkHash())
function checkHash() {
if (route.hash === '#businesses') {
activeTab.value = 'businesses'
} else if (route.hash === '#shuttles') {
activeTab.value = 'shuttles'
} else {
activeTab.value = 'promotions'
}
@ -85,6 +89,16 @@ const filteredCoupons = computed(() => {
})
})
const filteredShuttles = computed(() => {
return shuttles.value.filter(s => {
const matchesSearch = s.route_name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
(s.company_name?.toLowerCase().includes(searchQuery.value.toLowerCase()) ?? false) ||
s.origin.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
s.destination.toLowerCase().includes(searchQuery.value.toLowerCase())
return matchesSearch
})
})
const filteredBusinesses = computed(() => {
return businesses.value.filter(b => {
const matchesSearch = b.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
@ -115,6 +129,49 @@ async function loadBusinesses() {
}
}
async function loadShuttles() {
try {
shuttles.value = await shuttlesService.getAllShuttles()
} catch (e) {
console.error('Failed to load shuttles', e)
}
}
// Shuttle Methods
async function toggleShuttleStatus(shuttle: Shuttle) {
try {
const token = localStorage.getItem('auth_token')
const response = await fetch(`${API_URL}/api/shuttles/${shuttle.id}/status?is_active=${!shuttle.is_active}`, {
method: 'PATCH',
headers: { 'Authorization': `Bearer ${token}` }
})
if (response.ok) {
await loadShuttles()
}
} catch (e) {
alert('Error al actualizar estado del shuttle')
}
}
async function deleteShuttle(id: string) {
if (confirm('¿Estás seguro de eliminar este transporte turístico?')) {
try {
const token = localStorage.getItem('auth_token')
const response = await fetch(`${API_URL}/api/shuttles/${id}`, {
method: 'DELETE',
headers: { 'Authorization': `Bearer ${token}` }
})
if (response.ok) {
await loadShuttles()
} else {
alert('No se pudo eliminar el shuttle')
}
} catch (e) {
alert('Error al eliminar shuttle')
}
}
}
// Business Methods
function openCreateBusinessModal() {
isEditingBusiness.value = false
@ -316,17 +373,32 @@ async function toggleCouponStatus(coupon: Coupon) {
<button :class="['tab-btn', { active: activeTab === 'businesses' }]" @click="activeTab = 'businesses'">
Mis Negocios
</button>
<button :class="['tab-btn', { active: activeTab === 'shuttles' }]" @click="activeTab = 'shuttles'">
Viajes Turísticos
</button>
</div>
<div class="tabs-actions">
<div class="stats-header">
<div class="stat-mini">
<div class="stat-value">{{ coupons.length }}</div>
<div class="stat-label">Total Cupones</div>
<div v-if="activeTab === 'promotions'" class="stats-group">
<div class="stat-mini">
<div class="stat-value">{{ coupons.length }}</div>
<div class="stat-label">Total Cupones</div>
</div>
<div class="stat-mini">
<div class="stat-value active">{{ coupons.filter(c => c.is_active).length }}</div>
<div class="stat-label">Activos</div>
</div>
</div>
<div class="stat-mini">
<div class="stat-value active">{{ coupons.filter(c => c.is_active).length }}</div>
<div class="stat-label">Activos</div>
<div v-else-if="activeTab === 'shuttles'" class="stats-group">
<div class="stat-mini">
<div class="stat-value">{{ shuttles.length }}</div>
<div class="stat-label">Total Shuttles</div>
</div>
<div class="stat-mini">
<div class="stat-value active">{{ shuttles.filter(s => s.is_active).length }}</div>
<div class="stat-label">Activos</div>
</div>
</div>
</div>
@ -338,6 +410,10 @@ async function toggleCouponStatus(coupon: Coupon) {
<span class="material-icons">add</span>
Nuevo Negocio
</button>
<button v-if="activeTab === 'shuttles'" class="primary-btn" @click="$router.push('/admin/shuttles')">
<span class="material-icons">rocket_launch</span>
Nuevo Shuttle
</button>
</div>
</div>
@ -345,7 +421,7 @@ async function toggleCouponStatus(coupon: Coupon) {
<div class="search-filter-bar">
<div class="search-box">
<span class="material-icons">search</span>
<input v-model="searchQuery" type="text" :placeholder="activeTab === 'promotions' ? 'Buscar promoción...' : 'Buscar negocio...'">
<input v-model="searchQuery" type="text" :placeholder="activeTab === 'promotions' ? 'Buscar promoción...' : (activeTab === 'businesses' ? 'Buscar negocio...' : 'Buscar shuttle...')">
</div>
<div class="filter-box">
<span class="material-icons">filter_alt</span>
@ -478,6 +554,64 @@ async function toggleCouponStatus(coupon: Coupon) {
</div>
</div>
<!-- Shuttles Tab -->
<div v-if="activeTab === 'shuttles'">
<div v-if="shuttles.length === 0" class="empty-state">
<span class="material-icons">directions_bus</span>
<p>No hay shuttles turísticos registrados.</p>
</div>
<div v-else class="table-card">
<table class="coupons-table">
<thead>
<tr>
<th>Ruta / Empresa</th>
<th class="text-center">Tipo Vehículo</th>
<th class="text-center">Precio (Persona)</th>
<th class="text-center">Estado</th>
<th class="text-center">Acciones</th>
</tr>
</thead>
<tbody>
<tr v-for="shuttle in filteredShuttles" :key="shuttle.id">
<td>
<div class="title-cell">
<div class="coupon-header-cell">
<img :src="getImageUrl(shuttle.image_url)" class="coupon-mini-img" />
<div>
<strong>{{ shuttle.route_name }}</strong>
<div class="business-tag">
<span class="material-icons">business</span>
{{ shuttle.company_name }}
</div>
</div>
</div>
</div>
</td>
<td class="text-center"><span class="badge">{{ shuttle.vehicle_type }}</span></td>
<td class="text-center">
<span class="discount-label">${{ shuttle.price_per_person }}</span>
</td>
<td class="text-center">
<button
:class="['status-toggle', { active: shuttle.is_active }]"
@click="toggleShuttleStatus(shuttle)"
>
{{ shuttle.is_active ? 'Activo' : 'Inactivo' }}
</button>
</td>
<td class="text-center">
<div class="action-buttons justify-center">
<button class="icon-btn delete" @click="deleteShuttle(shuttle.id)">
<span class="material-icons">delete</span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Coupon Modal -->