frontend költség beállítások

frontend/src/components/dashboard/CostsActionsCard.vue

@@ -2,9 +2,15 @@
   <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">
+    <!-- Top header bar — clickable to navigate to full Costs page -->
+    <div
+      class="h-12 bg-slate-700 w-full shrink-0 flex items-center px-4 gap-2 cursor-pointer transition-colors hover:bg-slate-600"
+      @click="navigateToCostsPage"
+    >
       <span class="text-white font-bold text-sm tracking-wide">💰 {{ t('dashboard.costsTitle') }}</span>
+      <svg class="ml-auto h-4 w-4 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+      </svg>
     </div>
     <!-- Content -->
     <div class="p-4 flex-1 flex flex-col text-slate-800 overflow-hidden">
@@ -57,16 +63,27 @@
           <span class="ml-auto text-slate-400 text-xs">→</span>
         </button>
 
-        <!-- ➕ Additional Costs (Medium) -->
+        <!-- ➕ Additional Costs (Medium) — navigates to full Costs page -->
         <button
           v-if="selectedActionVehicle"
-          @click="openComplexModal"
+          @click="navigateToCostsPage"
           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>{{ t('dashboard.additionalCosts') }}</span>
           <span class="ml-auto text-slate-400 text-xs">→</span>
         </button>
+
+        <!-- 🧾 Detailed Invoice (Medium) -->
+        <button
+          v-if="selectedActionVehicle"
+          @click="openWizardModal"
+          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>{{ t('dashboard.detailedInvoice') }}</span>
+          <span class="ml-auto text-slate-400 text-xs">→</span>
+        </button>
       </div>
     </div>
 
@@ -93,19 +110,33 @@
       @close="isComplexModalOpen = false"
       @saved="onModalSaved"
     />
+    <CostEntryWizard
+      :is-open="isWizardModalOpen"
+      :vehicle="selectedActionVehicle"
+      @close="isWizardModalOpen = false"
+      @saved="onModalSaved"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useVehicleStore } from '../../stores/vehicle'
 import SimpleFuelModal from './SimpleFuelModal.vue'
 import ComplexExpenseModal from './ComplexExpenseModal.vue'
+import CostEntryWizard from '../cost/CostEntryWizard.vue'
 
 const { t } = useI18n()
+const router = useRouter()
 const vehicleStore = useVehicleStore()
 
+/** Navigate to the full Costs page */
+function navigateToCostsPage() {
+  router.push('/dashboard/costs')
+}
+
 // ── Emits ──
 const emit = defineEmits<{
   /**
@@ -120,6 +151,7 @@ const selectedActionVehicleId = ref<string>('')
 const isFuelModalOpen = ref(false)
 const isFeeModalOpen = ref(false)
 const isComplexModalOpen = ref(false)
+const isWizardModalOpen = ref(false)
 
 /** The currently selected vehicle object for the action modals */
 const selectedActionVehicle = computed(() => {
@@ -143,12 +175,17 @@ function openFeeModal() {
   if (!selectedActionVehicle.value) return
   isFeeModalOpen.value = true
 }
-
 function openComplexModal() {
   if (!selectedActionVehicle.value) return
   isComplexModalOpen.value = true
 }
 
+function openWizardModal() {
+  if (!selectedActionVehicle.value) return
+  isWizardModalOpen.value = true
+}
+
+
 /**
  * F5 Bug fix (RBAC Phase 3): Modal mentés után bezárja a modalt,
  * és értesíti a szülőt, hogy az új költség megjelent.
@@ -157,6 +194,7 @@ function onModalSaved() {
   isFuelModalOpen.value = false
   isFeeModalOpen.value = false
   isComplexModalOpen.value = false
+  isWizardModalOpen.value = false
 
   // Értesítjük a szülőt, hogy frissítse a VehicleDetailModal költségeit
   if (selectedActionVehicleId.value) {