687 lines
33 KiB
Vue
687 lines
33 KiB
Vue
<template>
|
||
<div class="relative min-h-screen text-white">
|
||
<!-- Garage Background Image -->
|
||
<div class="fixed inset-0 z-0">
|
||
<div class="absolute inset-0 bg-[url('@/assets/garage-bg.png')] bg-cover bg-center bg-fixed"></div>
|
||
</div>
|
||
|
||
<!-- ── Zen Mode FAB ── -->
|
||
<button
|
||
@click="isUiVisible = !isUiVisible"
|
||
class="fixed bottom-8 right-8 z-50 btn-premium rounded-full p-4 shadow-2xl shadow-black/40"
|
||
:title="isUiVisible ? t('zen.hide') : t('zen.show')"
|
||
>
|
||
<svg
|
||
v-if="isUiVisible"
|
||
class="w-6 h-6"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||
</svg>
|
||
<svg
|
||
v-else
|
||
class="w-6 h-6"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
|
||
</svg>
|
||
</button>
|
||
|
||
<!-- ── Content with fade transition ── -->
|
||
<Transition name="fade">
|
||
<div v-if="isUiVisible" class="relative z-10">
|
||
<!-- ── Bottom-aligned 5-card container ── -->
|
||
<div class="flex flex-col justify-end min-h-[85vh] pb-8">
|
||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 w-full">
|
||
<!-- ── Loading State ── -->
|
||
<div
|
||
v-if="vehicleStore.isLoading"
|
||
class="flex items-center justify-center py-20"
|
||
>
|
||
<div class="h-10 w-10 animate-spin rounded-full border-4 border-white/10 border-t-[#70BC84]" />
|
||
</div>
|
||
|
||
<!-- ── 5-Card Grid ── -->
|
||
<div
|
||
v-if="!vehicleStore.isLoading"
|
||
class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4"
|
||
style="perspective: 1200px;"
|
||
>
|
||
<!-- ════════════════════════════════════════════════════════════
|
||
Card 1: 🚗 My Garage (Járműveim)
|
||
════════════════════════════════════════════════════════════ -->
|
||
<div
|
||
class="bg-white/95 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] overflow-hidden flex flex-col h-[350px] relative cursor-pointer transition-all duration-300 ease-out transform hover:-translate-y-3 hover:scale-[1.02] hover:shadow-2xl"
|
||
@click="openCard('vehicles')"
|
||
>
|
||
<!-- Top header bar -->
|
||
<div class="h-12 bg-slate-700 w-full shrink-0 flex items-center px-4">
|
||
<span class="text-white font-bold text-sm tracking-wide">🚗 {{ t('dashboard.myVehicles') }}</span>
|
||
<span class="ml-auto text-xs text-white/60">{{ vehicleStore.vehicles.length }} {{ t('dashboard.vehicles') }}</span>
|
||
</div>
|
||
<!-- Content -->
|
||
<div class="p-4 flex-1 flex flex-col text-slate-800 min-h-0">
|
||
<div class="flex-1 overflow-y-auto space-y-2">
|
||
<VehicleCardCompact
|
||
v-for="vehicle in displayVehicles.slice(0, 3)"
|
||
:key="vehicle.id"
|
||
:vehicle="vehicle"
|
||
@click="openCard('vehicles')"
|
||
@plate-click="openVehicleDetail(vehicle)"
|
||
/>
|
||
<!-- Empty state (only when BOTH real and mock are empty) -->
|
||
<div
|
||
v-if="displayVehicles.length === 0"
|
||
class="flex flex-col items-center justify-center py-6 text-slate-400"
|
||
>
|
||
<svg class="w-10 h-10 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||
</svg>
|
||
<p class="text-sm">{{ t('dashboard.noVehicles') }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════════════════════════
|
||
Card 2: 💰 Költségek & Gyorsműveletek (Action Center)
|
||
════════════════════════════════════════════════════════════ -->
|
||
<div
|
||
class="bg-white/95 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] overflow-hidden flex flex-col h-[350px] relative transition-all duration-300 ease-out transform hover:-translate-y-3 hover:scale-[1.02] hover:shadow-2xl"
|
||
>
|
||
<!-- Top header bar -->
|
||
<div class="h-12 bg-slate-700 w-full shrink-0 flex items-center px-4 gap-2">
|
||
<span class="text-white font-bold text-sm tracking-wide">💰 Költségek & Gyorsműveletek</span>
|
||
</div>
|
||
<!-- Content -->
|
||
<div class="p-4 flex-1 flex flex-col text-slate-800 overflow-hidden">
|
||
<!-- Vehicle Selector Dropdown -->
|
||
<div class="mb-3">
|
||
<label class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-1 block">Jármű</label>
|
||
<select
|
||
v-model="selectedActionVehicleId"
|
||
class="w-full rounded-xl border border-slate-300 bg-white px-3 py-2 text-sm text-slate-800 focus:border-sf-accent focus:ring-2 focus:ring-sf-accent/20 outline-none transition-all"
|
||
>
|
||
<option
|
||
v-for="v in vehicleStore.sortedVehicles"
|
||
:key="v.id"
|
||
:value="v.id"
|
||
>
|
||
{{ v.license_plate || '—' }} ({{ v.brand || '' }} {{ v.model || '' }})
|
||
</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- Action Buttons -->
|
||
<div class="flex-1 flex flex-col gap-2.5 justify-center">
|
||
<!-- No vehicle warning -->
|
||
<div
|
||
v-if="!selectedActionVehicle"
|
||
class="flex items-center justify-center rounded-xl bg-amber-50 border border-amber-200 px-4 py-3 text-sm text-amber-700"
|
||
>
|
||
<span>⚠️ Nincs kiválasztva jármű. Adj hozzá egy járművet először!</span>
|
||
</div>
|
||
|
||
<!-- ⛽ Tankolás (Big, prominent) -->
|
||
<button
|
||
v-if="selectedActionVehicle"
|
||
@click="openFuelModal"
|
||
class="flex items-center gap-3 rounded-xl bg-gradient-to-r from-sf-accent to-emerald-500 px-4 py-3 text-sm font-bold text-white shadow-md transition-all hover:shadow-lg hover:scale-[1.02] active:scale-[0.98]"
|
||
>
|
||
<span class="flex h-9 w-9 items-center justify-center rounded-lg bg-white/20 text-lg">⛽</span>
|
||
<span>Tankolás rögzítése</span>
|
||
<span class="ml-auto text-white/60 text-xs">→</span>
|
||
</button>
|
||
|
||
<!-- 🅿️ Parkolás / Útdíj (Medium) -->
|
||
<button
|
||
v-if="selectedActionVehicle"
|
||
@click="openFeeModal"
|
||
class="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 px-4 py-2.5 text-sm font-semibold text-slate-700 transition-all hover:bg-slate-100 hover:shadow-md active:scale-[0.98]"
|
||
>
|
||
<span class="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-200 text-base">🅿️</span>
|
||
<span>Parkolás / Útdíj</span>
|
||
<span class="ml-auto text-slate-400 text-xs">→</span>
|
||
</button>
|
||
|
||
<!-- ➕ További költségek (Medium) -->
|
||
<button
|
||
v-if="selectedActionVehicle"
|
||
@click="openComplexModal"
|
||
class="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 px-4 py-2.5 text-sm font-semibold text-slate-700 transition-all hover:bg-slate-100 hover:shadow-md active:scale-[0.98]"
|
||
>
|
||
<span class="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-200 text-base">➕</span>
|
||
<span>További költségek</span>
|
||
<span class="ml-auto text-slate-400 text-xs">→</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════════════════════════
|
||
Card 3: 🔧 Service Finder (3-Way Indítópult)
|
||
════════════════════════════════════════════════════════════ -->
|
||
<div
|
||
class="bg-white/95 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] overflow-hidden flex flex-col h-[350px] relative transition-all duration-300 ease-out transform hover:-translate-y-3 hover:scale-[1.02] hover:shadow-2xl"
|
||
>
|
||
<!-- Top header bar -->
|
||
<div class="h-12 bg-slate-700 w-full shrink-0 flex items-center px-4">
|
||
<span class="text-white font-bold text-sm tracking-wide">{{ t('serviceFinder.title') }}</span>
|
||
</div>
|
||
<!-- Content: 3 simple buttons stacked vertically -->
|
||
<div class="p-4 flex-1 flex flex-col justify-center gap-2">
|
||
<button
|
||
@click="router.push('/dashboard/service-finder?mode=planned')"
|
||
class="w-full rounded-xl bg-sf-accent px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition-all hover:bg-sf-accent/90 hover:shadow-md active:scale-[0.97] cursor-pointer"
|
||
>
|
||
🔍 {{ t('serviceFinder.plannedMaintenance') }}
|
||
</button>
|
||
<button
|
||
@click="router.push('/dashboard/service-finder?mode=sos')"
|
||
class="w-full rounded-xl border border-red-300 bg-red-50 px-4 py-2.5 text-sm font-semibold text-red-700 shadow-sm transition-all hover:bg-red-100 hover:shadow-md active:scale-[0.97] cursor-pointer"
|
||
>
|
||
🚨 SOS {{ t('serviceFinder.sosTitle') }}
|
||
</button>
|
||
<button
|
||
@click="isSfQuickAddOpen = true"
|
||
class="w-full rounded-xl border border-dashed border-slate-300 bg-slate-50 px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm transition-all hover:border-sf-accent hover:bg-sf-accent/5 hover:shadow-md active:scale-[0.97] cursor-pointer"
|
||
>
|
||
➕ {{ t('provider.quickAddTitle') }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════════════════════════
|
||
Card 4: 🏆 Gamification (Játékosítás)
|
||
════════════════════════════════════════════════════════════ -->
|
||
<div
|
||
class="bg-white/95 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] overflow-hidden flex flex-col h-[350px] relative cursor-pointer transition-all duration-300 ease-out transform hover:-translate-y-3 hover:scale-[1.02] hover:shadow-2xl"
|
||
@click="openCard('gamification')"
|
||
>
|
||
<!-- Top header bar -->
|
||
<div class="h-12 bg-slate-700 w-full shrink-0 flex items-center px-4">
|
||
<span class="text-white font-bold text-sm tracking-wide">🏆 {{ t('dashboard.statsAndPoints') }}</span>
|
||
<span class="ml-auto inline-flex items-center gap-1 rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700">
|
||
{{ t('dashboard.live') }}
|
||
</span>
|
||
</div>
|
||
<!-- Content -->
|
||
<div class="p-4 flex-1 flex flex-col text-slate-800 overflow-hidden">
|
||
<div class="flex-1 space-y-3">
|
||
<!-- Score card -->
|
||
<div class="rounded-xl border border-slate-200 bg-slate-50 p-3 text-center">
|
||
<p class="text-3xl font-extrabold text-emerald-600">2,450</p>
|
||
<p class="text-xs text-slate-500 mt-1">{{ t('dashboard.monthlyScore') }}</p>
|
||
</div>
|
||
<!-- Achievement badges -->
|
||
<div>
|
||
<p class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-2">
|
||
{{ t('dashboard.achievements') }}
|
||
</p>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span
|
||
v-for="badge in badges"
|
||
:key="badge.label"
|
||
class="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs text-slate-600"
|
||
>
|
||
{{ badge.icon }} {{ badge.label }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Bottom CTA button -->
|
||
<button class="mt-auto mb-4 mx-auto px-8 py-3 bg-slate-700 hover:bg-slate-800 text-white rounded-2xl font-medium text-sm transition-colors shadow-md">
|
||
{{ t('dashboard.refresh') }} 🏆
|
||
</button>
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════════════════════════
|
||
Card 5: 🛡️ My Profile & Trust (Profil & Trust Score)
|
||
════════════════════════════════════════════════════════════ -->
|
||
<div
|
||
class="bg-white/95 rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.12)] overflow-hidden flex flex-col h-[350px] relative cursor-pointer transition-all duration-300 ease-out transform hover:-translate-y-3 hover:scale-[1.02] hover:shadow-2xl"
|
||
@click="openCard('stats')"
|
||
>
|
||
<!-- Top header bar -->
|
||
<div class="h-12 bg-slate-700 w-full shrink-0 flex items-center px-4">
|
||
<span class="text-white font-bold text-sm tracking-wide">🛡️ {{ t('header.profile') }}</span>
|
||
</div>
|
||
<!-- Content -->
|
||
<div class="p-4 flex-1 flex flex-col text-slate-800 overflow-hidden">
|
||
<div class="flex-1 space-y-3">
|
||
<!-- User info -->
|
||
<div class="rounded-xl border border-slate-200 bg-slate-50 p-3">
|
||
<p class="text-sm font-bold text-slate-800">{{ authStore.userName || t('dashboard.guest') }}</p>
|
||
<p class="text-xs text-slate-400 mt-0.5">{{ authStore.user?.email }}</p>
|
||
</div>
|
||
<!-- Trust Score -->
|
||
<div class="rounded-xl border border-slate-200 bg-slate-50 p-3">
|
||
<div class="flex items-center justify-between mb-1">
|
||
<span class="text-xs text-slate-500 font-semibold uppercase tracking-wider">Trust Score</span>
|
||
<span class="text-sm font-bold text-emerald-600">A+</span>
|
||
</div>
|
||
<div class="h-2 overflow-hidden rounded-full bg-slate-200">
|
||
<div class="h-full rounded-full bg-gradient-to-r from-emerald-400 to-emerald-600 transition-all duration-500" style="width: 92%" />
|
||
</div>
|
||
</div>
|
||
<!-- Quick stats -->
|
||
<div class="grid grid-cols-2 gap-2">
|
||
<div class="rounded-lg border border-slate-200 bg-slate-50 p-2 text-center">
|
||
<p class="text-lg font-bold text-slate-800">{{ authStore.myOrganizations.length }}</p>
|
||
<p class="text-xs text-slate-400">{{ t('header.myCompanies') }}</p>
|
||
</div>
|
||
<div class="rounded-lg border border-slate-200 bg-slate-50 p-2 text-center">
|
||
<p class="text-lg font-bold text-slate-800">{{ vehicleStore.vehicles.length }}</p>
|
||
<p class="text-xs text-slate-400">{{ t('dashboard.totalVehicles') }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Bottom CTA button -->
|
||
<button class="mt-auto mb-4 mx-auto px-8 py-3 bg-slate-700 hover:bg-slate-800 text-white rounded-2xl font-medium text-sm transition-colors shadow-md">
|
||
{{ t('header.profile') }} →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- end relative z-10 content wrapper -->
|
||
</Transition>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════════
|
||
Flip Modal – 3D átforduló részletes nézet (Teleport to body)
|
||
═══════════════════════════════════════════════════════════════════ -->
|
||
<Teleport to="body">
|
||
<div
|
||
v-if="activeCard"
|
||
class="fixed inset-0 z-[9999] flex items-center justify-center bg-slate-900/85 backdrop-blur-md"
|
||
@click.self="activeCard = null"
|
||
>
|
||
<div class="bg-white w-11/12 max-w-5xl h-auto min-h-[500px] pb-6 rounded-3xl shadow-2xl flex flex-col overflow-hidden animate-flip-in relative">
|
||
<!-- Close button (X) -->
|
||
<button
|
||
class="absolute top-4 right-4 z-10 flex h-10 w-10 items-center justify-center rounded-full bg-slate-200/80 text-slate-600 hover:bg-slate-300 hover:text-slate-800 transition-colors text-xl font-bold"
|
||
@click="activeCard = null"
|
||
>
|
||
✕
|
||
</button>
|
||
|
||
<!-- Dynamic content area -->
|
||
<div class="flex-1 p-8 overflow-y-auto text-slate-800">
|
||
<!-- ── Private Vehicle Manager ── -->
|
||
<PrivateVehicleManager
|
||
v-if="activeCard === 'vehicles'"
|
||
:target-vehicle-id="selectedTargetId"
|
||
@add-new="handleAddNew"
|
||
@edit-vehicle="handleEditVehicle"
|
||
/>
|
||
|
||
<!-- ── Fallback for other cards ── -->
|
||
<template v-if="activeCard && activeCard !== 'vehicles'">
|
||
<h2 class="text-2xl font-bold mb-6">
|
||
{{ t('dashboard.detailedView') }}: <span class="text-slate-500">{{ activeCard }}</span>
|
||
</h2>
|
||
<p class="text-slate-500">
|
||
{{ t('dashboard.modalPlaceholder') }}
|
||
</p>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Teleport>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════════
|
||
Cost Action Modals (Teleported to body)
|
||
═══════════════════════════════════════════════════════════════════ -->
|
||
<SimpleFuelModal
|
||
:is-open="isFuelModalOpen"
|
||
:vehicle="selectedActionVehicle"
|
||
@close="isFuelModalOpen = false"
|
||
@saved="onModalSaved"
|
||
/>
|
||
<ComplexExpenseModal
|
||
:is-open="isFeeModalOpen"
|
||
:vehicle="selectedActionVehicle"
|
||
:is-fee-mode="true"
|
||
@close="isFeeModalOpen = false"
|
||
@saved="onModalSaved"
|
||
/>
|
||
<ComplexExpenseModal
|
||
:is-open="isComplexModalOpen"
|
||
:vehicle="selectedActionVehicle"
|
||
:is-fee-mode="false"
|
||
@close="isComplexModalOpen = false"
|
||
@saved="onModalSaved"
|
||
/>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════════
|
||
Vehicle Detail Modal (Digital Twin — 3-Tab Deep Link)
|
||
═══════════════════════════════════════════════════════════════════ -->
|
||
<VehicleDetailModal
|
||
:is-open="isVehicleDetailOpen"
|
||
:vehicle="detailVehicle"
|
||
@close="closeVehicleDetail"
|
||
@edit="handleEditFromDetail"
|
||
@set-primary="handleSetPrimaryFromDetail"
|
||
/>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════════
|
||
Vehicle Form Modal (Add) — standalone, decoupled from Manager
|
||
═══════════════════════════════════════════════════════════════════ -->
|
||
<VehicleFormModal
|
||
:is-open="isAddFormOpen"
|
||
@close="isAddFormOpen = false"
|
||
@saved="onAddVehicleSaved"
|
||
/>
|
||
|
||
<!-- ═══════════════════════════════════════════════════════════════════
|
||
Vehicle Form Modal (Edit) — standalone, decoupled from Manager
|
||
═══════════════════════════════════════════════════════════════════ -->
|
||
<VehicleFormModal
|
||
:is-open="isEditFormOpen"
|
||
:vehicle="editTargetVehicle"
|
||
@close="closeEditForm"
|
||
@saved="onEditVehicleSaved"
|
||
@deleted="onVehicleDeleted"
|
||
/>
|
||
<!-- ═══════════════════════════════════════════════════════════════════
|
||
Provider Quick Add Modal (Service Finder Card 3)
|
||
═══════════════════════════════════════════════════════════════════ -->
|
||
<ProviderQuickAddModal
|
||
:is-open="isSfQuickAddOpen"
|
||
@close="isSfQuickAddOpen = false"
|
||
@saved="onSfQuickAddSaved"
|
||
/>
|
||
</div><!-- end min-h-screen -->
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, onMounted, watch, nextTick } from 'vue'
|
||
import { useRouter, useRoute } from 'vue-router'
|
||
import { useI18n } from 'vue-i18n'
|
||
import { useAuthStore } from '../stores/auth'
|
||
import { useVehicleStore } from '../stores/vehicle'
|
||
import type { VehicleData } from '../types/vehicle'
|
||
import api from '../api/axios'
|
||
import PrivateVehicleManager from '../components/dashboard/PrivateVehicleManager.vue'
|
||
import VehicleCardCompact from '../components/vehicle/VehicleCardCompact.vue'
|
||
import VehicleDetailModal from '../components/vehicle/VehicleDetailModal.vue'
|
||
import VehicleFormModal from '../components/dashboard/VehicleFormModal.vue'
|
||
import SimpleFuelModal from '../components/dashboard/SimpleFuelModal.vue'
|
||
import ComplexExpenseModal from '../components/dashboard/ComplexExpenseModal.vue'
|
||
import ProviderQuickAddModal from '../components/provider/ProviderQuickAddModal.vue'
|
||
|
||
const { t } = useI18n()
|
||
|
||
const router = useRouter()
|
||
const route = useRoute()
|
||
|
||
const authStore = useAuthStore()
|
||
const vehicleStore = useVehicleStore()
|
||
|
||
// ── Zen Mode ──
|
||
const isUiVisible = ref(true)
|
||
|
||
// ── Flip Modal State ──
|
||
const activeCard = ref<string | null>(null)
|
||
const selectedTargetId = ref<string | null>(null)
|
||
const openCard = (cardId: string, targetId: string | null = null) => {
|
||
activeCard.value = cardId
|
||
selectedTargetId.value = targetId
|
||
}
|
||
|
||
// ── Service Finder (Card 3) — Launcher ──
|
||
const isSearchModalOpen = ref(false)
|
||
const isSfQuickAddOpen = ref(false)
|
||
|
||
/**
|
||
* Called when ProviderQuickAddModal saves a new provider.
|
||
*/
|
||
function onSfQuickAddSaved(provider: { id: number; name: string; category?: string | null; city?: string | null; address?: string | null }) {
|
||
isSfQuickAddOpen.value = false
|
||
alert(`🎉 ${t('provider.successMessage', { points: 0 })}`)
|
||
}
|
||
|
||
// ── Vehicle Detail Modal (Deep Link from plate click) ──
|
||
const isVehicleDetailOpen = ref(false)
|
||
const detailVehicle = ref<VehicleData | null>(null)
|
||
|
||
function openVehicleDetail(vehicle: VehicleData) {
|
||
detailVehicle.value = vehicle
|
||
isVehicleDetailOpen.value = true
|
||
}
|
||
|
||
function closeVehicleDetail() {
|
||
isVehicleDetailOpen.value = false
|
||
detailVehicle.value = null
|
||
}
|
||
|
||
// ── Vehicle Form Modal State (standalone, decoupled from Manager) ──
|
||
const isAddFormOpen = ref(false)
|
||
const isEditFormOpen = ref(false)
|
||
const editTargetVehicle = ref<VehicleData | null>(null)
|
||
const isCheckingQuota = ref(false)
|
||
|
||
/**
|
||
* Return-State flag: when true, closing the edit form should re-open
|
||
* the VehicleDetailModal instead of returning to the dashboard.
|
||
*/
|
||
const returnToVehicleDetail = ref(false)
|
||
|
||
/**
|
||
* Preemptive quota check before opening the add-vehicle modal.
|
||
* Calls GET /api/v1/assets/vehicles/quota-status.
|
||
* If the user has reached their limit, shows a blocking toast/alert instead of opening the form.
|
||
*/
|
||
async function handleAddNew() {
|
||
if (isCheckingQuota.value) return
|
||
isCheckingQuota.value = true
|
||
|
||
try {
|
||
const res = await api.get('/assets/vehicles/quota-status')
|
||
const { can_add, current_count, limit } = res.data
|
||
|
||
if (!can_add) {
|
||
alert(
|
||
`Elérted a csomagodhoz tartozó járműlimitet (${current_count}/${limit})! ` +
|
||
'Kérjük, válts magasabb csomagra az új jármű rögzítéséhez.'
|
||
)
|
||
return
|
||
}
|
||
|
||
isAddFormOpen.value = true
|
||
} catch (err: any) {
|
||
console.error('[DashboardView] Quota check failed:', err)
|
||
isAddFormOpen.value = true
|
||
} finally {
|
||
isCheckingQuota.value = false
|
||
}
|
||
}
|
||
|
||
function onAddVehicleSaved() {
|
||
isAddFormOpen.value = false
|
||
}
|
||
|
||
function handleEditVehicle(vehicle: VehicleData) {
|
||
editTargetVehicle.value = vehicle ? { ...vehicle } : null
|
||
isEditFormOpen.value = true
|
||
}
|
||
|
||
function closeEditForm() {
|
||
isEditFormOpen.value = false
|
||
// If we came from the detail modal, return to it
|
||
if (returnToVehicleDetail.value) {
|
||
returnToVehicleDetail.value = false
|
||
const vehicle = editTargetVehicle.value
|
||
editTargetVehicle.value = null
|
||
if (vehicle) {
|
||
nextTick(() => {
|
||
detailVehicle.value = vehicle
|
||
isVehicleDetailOpen.value = true
|
||
})
|
||
}
|
||
} else {
|
||
editTargetVehicle.value = null
|
||
}
|
||
}
|
||
|
||
function onEditVehicleSaved(savedVehicle?: VehicleData) {
|
||
isEditFormOpen.value = false
|
||
// If we came from the detail modal, return to it
|
||
if (returnToVehicleDetail.value) {
|
||
returnToVehicleDetail.value = false
|
||
// Use the saved vehicle (with updated data) if available, otherwise fallback
|
||
const vehicle = savedVehicle || editTargetVehicle.value
|
||
editTargetVehicle.value = null
|
||
if (vehicle) {
|
||
nextTick(() => {
|
||
detailVehicle.value = vehicle
|
||
isVehicleDetailOpen.value = true
|
||
})
|
||
}
|
||
} else {
|
||
editTargetVehicle.value = null
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Called when the edit VehicleFormModal emits 'deleted'.
|
||
* Completely resets the return-state and closes the edit form,
|
||
* then refreshes the vehicle list so the deleted vehicle disappears.
|
||
*/
|
||
function onVehicleDeleted() {
|
||
returnToVehicleDetail.value = false
|
||
isEditFormOpen.value = false
|
||
editTargetVehicle.value = null
|
||
vehicleStore.fetchVehicles()
|
||
}
|
||
|
||
// ── Bridge: Detail → Edit (opens edit modal directly, no Manager card) ──
|
||
function handleEditFromDetail(vehicle: VehicleData) {
|
||
returnToVehicleDetail.value = true
|
||
closeVehicleDetail()
|
||
// Use nextTick so detail modal closes before edit opens
|
||
nextTick(() => {
|
||
editTargetVehicle.value = vehicle ? { ...vehicle } : null
|
||
isEditFormOpen.value = true
|
||
})
|
||
}
|
||
|
||
function handleSetPrimaryFromDetail(vehicle: VehicleData) {
|
||
vehicleStore.setPrimaryVehicle(vehicle.id)
|
||
}
|
||
|
||
/**
|
||
* Display vehicles from the backend API only.
|
||
* Sorted by is_primary flag (favorite first), then alphabetically.
|
||
* Shows all real vehicles; no mock/fallback data is injected.
|
||
*/
|
||
const displayVehicles = computed(() => {
|
||
return vehicleStore.sortedVehicles
|
||
})
|
||
|
||
// ── Cost Card Action Center State ──
|
||
const selectedActionVehicleId = ref<string>('')
|
||
const isFuelModalOpen = ref(false)
|
||
const isFeeModalOpen = ref(false)
|
||
const isComplexModalOpen = ref(false)
|
||
|
||
/** The currently selected vehicle object for the action modals */
|
||
const selectedActionVehicle = computed(() => {
|
||
if (!selectedActionVehicleId.value) return null
|
||
return vehicleStore.vehicles.find(v => v.id === selectedActionVehicleId.value) || null
|
||
})
|
||
|
||
/** Auto-select the first (primary/sorted) vehicle on load */
|
||
function autoSelectVehicle() {
|
||
if (vehicleStore.sortedVehicles.length > 0 && !selectedActionVehicleId.value) {
|
||
selectedActionVehicleId.value = vehicleStore.sortedVehicles[0].id
|
||
}
|
||
}
|
||
|
||
function openFuelModal() {
|
||
if (!selectedActionVehicle.value) return
|
||
isFuelModalOpen.value = true
|
||
}
|
||
|
||
function openFeeModal() {
|
||
if (!selectedActionVehicle.value) return
|
||
isFeeModalOpen.value = true
|
||
}
|
||
|
||
function openComplexModal() {
|
||
if (!selectedActionVehicle.value) return
|
||
isComplexModalOpen.value = true
|
||
}
|
||
|
||
function onModalSaved() {
|
||
isFuelModalOpen.value = false
|
||
isFeeModalOpen.value = false
|
||
isComplexModalOpen.value = false
|
||
}
|
||
|
||
// ── Placeholder notifications ──
|
||
const notifications = ref([
|
||
{ icon: '🔧', title: 'Service due for BMW X5', time: '2 hours ago' },
|
||
{ icon: '⛽', title: 'Fuel cost updated — +₿ 0.08', time: '5 hours ago' },
|
||
{ icon: '🏆', title: 'You earned "Eco Driver" badge!', time: '1 day ago' },
|
||
{ icon: '📊', title: 'Monthly report is ready', time: '2 days ago' },
|
||
])
|
||
|
||
// ── Placeholder badges ──
|
||
const badges = ref([
|
||
{ icon: '🌱', label: 'Eco Driver' },
|
||
{ icon: '📏', label: '10k km Club' },
|
||
{ icon: '🔧', label: 'Service Pro' },
|
||
{ icon: '⭐', label: 'Top Rater' },
|
||
])
|
||
|
||
onMounted(() => {
|
||
vehicleStore.fetchVehicles()
|
||
authStore.fetchMyOrganizations()
|
||
|
||
// ── Handle query param card navigation ──────────────────────────
|
||
const cardParam = route.query.card as string | undefined
|
||
if (cardParam) {
|
||
openCard(cardParam)
|
||
// Clean up the query param so it doesn't re-trigger
|
||
router.replace({ query: {} })
|
||
}
|
||
})
|
||
|
||
// Watch for vehicles to load, then auto-select
|
||
watch(() => vehicleStore.vehicles.length, () => {
|
||
autoSelectVehicle()
|
||
}, { immediate: true })
|
||
|
||
// ── Watch for query param changes (hamburger menu navigation) ────
|
||
watch(() => route.query.card, (newCard) => {
|
||
if (newCard && typeof newCard === 'string') {
|
||
openCard(newCard)
|
||
router.replace({ query: {} })
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
@keyframes flipIn {
|
||
from {
|
||
transform: perspective(1200px) rotateY(-90deg);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: perspective(1200px) rotateY(0deg);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
.animate-flip-in {
|
||
animation: flipIn 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
|
||
}
|
||
</style>
|