frontend kínlódás

frontend/src/components/actions/QuickActionsFAB.vue

@@ -1,12 +1,12 @@
 <script setup>
 import { ref } from 'vue'
 import AddExpenseModal from './AddExpenseModal.vue'
-import AddVehicleModal from './AddVehicleModal.vue'
+import SmartVehicleRegistration from './SmartVehicleRegistration.vue'
 import FindServiceModal from './FindServiceModal.vue'
 
 const isOpen = ref(false)
 const showExpenseModal = ref(false)
-const showVehicleModal = ref(false)
+const showSmartVehicleRegistration = ref(false)
 const showServiceModal = ref(false)
 
 const toggleMenu = () => {
@@ -18,8 +18,8 @@ const openExpenseModal = () => {
   isOpen.value = false
 }
 
-const openVehicleModal = () => {
-  showVehicleModal.value = true
+const openSmartVehicleRegistration = () => {
+  showSmartVehicleRegistration.value = true
   isOpen.value = false
 }
 
@@ -32,8 +32,8 @@ const closeExpenseModal = () => {
   showExpenseModal.value = false
 }
 
-const closeVehicleModal = () => {
-  showVehicleModal.value = false
+const closeSmartVehicleRegistration = () => {
+  showSmartVehicleRegistration.value = false
 }
 
 const closeServiceModal = () => {
@@ -74,7 +74,7 @@ const closeServiceModal = () => {
 
       <!-- Add Vehicle Button -->
       <button
-        @click="openVehicleModal"
+        @click="openSmartVehicleRegistration"
         class="flex items-center justify-end gap-3 bg-purple-600 hover:bg-purple-700 text-white px-4 py-3 rounded-full shadow-lg transition-all duration-200 transform hover:scale-105"
       >
         <span class="text-sm font-semibold">Jármű Hozzáadása</span>
@@ -103,7 +103,7 @@ const closeServiceModal = () => {
 
   <!-- Modals -->
   <AddExpenseModal v-if="showExpenseModal" @close="closeExpenseModal" />
-  <AddVehicleModal v-if="showVehicleModal" @close="closeVehicleModal" />
+  <SmartVehicleRegistration v-if="showSmartVehicleRegistration" @close="closeSmartVehicleRegistration" />
   <FindServiceModal v-if="showServiceModal" @close="closeServiceModal" />
 </template>
 

frontend/src/components/actions/SmartVehicleRegistration.vue

@@ -0,0 +1,964 @@
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+import { useGarageStore } from '../../stores/garageStore'
+import { useAuthStore } from '../../stores/authStore'
+import { useAppModeStore } from '../../stores/appModeStore'
+import { catalogApi, organizationApi } from '../../services/api'
+
+const emit = defineEmits(['close', 'success'])
+
+// Store instances
+const garageStore = useGarageStore()
+const authStore = useAuthStore()
+const appModeStore = useAppModeStore()
+
+// Organization context
+const selectedOrganizationId = ref(null)
+const userOrganizations = ref([])
+const loadingOrganizations = ref(false)
+
+// Owner vs Operator toggle
+const ownershipType = ref('owner') // 'owner' or 'operator'
+
+// Wizard steps - now 4 steps total (0: Organization, 1: Classification, 2: Catalog, 3: Details)
+const currentStep = ref(0)
+const totalSteps = 4
+
+// Check if organization step is needed
+const needsOrganizationSelection = computed(() => {
+  // Always show in fleet mode, or if user has multiple organizations
+  return isFleetMode.value || (userOrganizations.value && userOrganizations.value.length > 1)
+})
+
+// Step 0: Organization Selection - Categorized
+const categorizedOrganizations = computed(() => {
+  const privateOrgs = []
+  const businessOrgs = []
+  
+  if (userOrganizations.value && userOrganizations.value.length > 0) {
+    userOrganizations.value.forEach(org => {
+      // Check if organization has tax_number or org_type is not 'individual'
+      // Note: org_type values: 'individual', 'company', 'non_profit', 'government'
+      const isBusiness = org.tax_number || (org.org_type && org.org_type !== 'individual')
+      
+      if (isBusiness) {
+        businessOrgs.push({
+          id: org.organization_id,
+          name: org.display_name || org.name,
+          description: org.full_name || 'Céges flotta',
+          type: 'business',
+          originalOrg: org
+        })
+      } else {
+        privateOrgs.push({
+          id: org.organization_id,
+          name: 'Személyes Garázsom',
+          description: 'Személyes járművek',
+          type: 'private',
+          originalOrg: org
+        })
+      }
+    })
+  }
+  
+  return { privateOrgs, businessOrgs }
+})
+
+// Backward compatibility - flat list of all organizations
+const organizationOptions = computed(() => {
+  const options = []
+  const { privateOrgs, businessOrgs } = categorizedOrganizations.value
+  
+  // Add private organizations first
+  privateOrgs.forEach(org => {
+    options.push(org)
+  })
+  
+  // Add business organizations
+  businessOrgs.forEach(org => {
+    options.push(org)
+  })
+  
+  return options
+})
+
+// Step 1: Classification
+const vehicleClass = ref('')
+const vehicleClasses = ref([
+  { value: 'passenger_car', label: 'Személygépkocsi', icon: '🚗' },
+  { value: 'motorcycle', label: 'Motorkerékpár', icon: '🏍️' },
+  { value: 'commercial_vehicle', label: 'Tehergépkocsi', icon: '🚚' },
+  { value: 'bus', label: 'Busz', icon: '🚌' },
+  { value: 'special_vehicle', label: 'Különleges jármű', icon: '🚜' }
+])
+
+// Step 2: Catalog Auto-Complete
+const make = ref('')
+const model = ref('')
+const generation = ref('')
+const engine = ref('')
+const catalogId = ref(null)
+
+// Catalog data
+const makes = ref([])
+const models = ref([])
+const generations = ref([])
+const engines = ref([])
+
+// Loading states
+const loadingMakes = ref(false)
+const loadingModels = ref(false)
+const loadingGenerations = ref(false)
+const loadingEngines = ref(false)
+
+// Step 3: Unique Details
+const licensePlate = ref('')
+const vin = ref('')
+const currentMileage = ref('')
+const color = ref('')
+
+// Form state
+const isLoading = ref(false)
+const error = ref(null)
+const successMessage = ref('')
+
+// Progress indicator
+const progressPercentage = ref(0)
+
+// UI Mode styling
+const uiMode = computed(() => appModeStore.mode)
+const isFleetMode = computed(() => uiMode.value === 'fleet')
+const isPersonalMode = computed(() => uiMode.value === 'personal')
+
+// Computed properties for empty states
+const hasGenerations = computed(() => generations.value && generations.value.length > 0)
+const hasEngines = computed(() => engines.value && engines.value.length > 0)
+const generationsLoaded = computed(() => !loadingGenerations.value)
+const enginesLoaded = computed(() => !loadingEngines.value)
+
+// Step validation - handle empty generations/engines gracefully
+const canProceedToNextStep = computed(() => {
+  if (currentStep.value === 0) {
+    // Organization step: only required if selection is needed
+    if (needsOrganizationSelection.value) {
+      // Must have a valid organization ID (not null, not undefined)
+      return selectedOrganizationId.value != null
+    }
+    return true // Skip if not needed
+  } else if (currentStep.value === 1) {
+    return !!vehicleClass.value
+  } else if (currentStep.value === 2) {
+    // Basic requirements
+    if (!make.value || !model.value) return false
+    
+    // If generations are still loading, wait
+    if (loadingGenerations.value) return false
+    
+    // Check if generations are available
+    if (hasGenerations.value) {
+      // If generations exist, require generation selection
+      if (!generation.value) return false
+      
+      // If engines are still loading, wait
+      if (loadingEngines.value) return false
+      
+      // Check if engines are available for the selected generation
+      if (hasEngines.value) {
+        // If engines exist, require engine selection
+        if (!engine.value) return false
+      }
+      // If no engines available, generation selection is enough
+      return true
+    }
+    // If no generations available, make and model are enough
+    return true
+  }
+  return true
+})
+
+// Calculate progress based on filled fields
+const calculateProgress = () => {
+  let filledFields = 0
+  let totalFields = 0
+
+  // Step 0: Organization (if needed)
+  if (needsOrganizationSelection.value) {
+    if (selectedOrganizationId.value !== undefined) filledFields++
+    totalFields++
+  }
+
+  // Step 1 fields
+  if (vehicleClass.value) filledFields++
+  totalFields++
+
+  // Step 2 fields (weighted more)
+  if (make.value) filledFields++
+  if (model.value) filledFields++
+  if (generation.value) filledFields++
+  if (engine.value) filledFields++
+  totalFields += 4
+
+  // Step 3 fields
+  if (licensePlate.value) filledFields++
+  if (vin.value) filledFields++
+  if (currentMileage.value) filledFields++
+  totalFields += 3
+
+  progressPercentage.value = Math.round((filledFields / totalFields) * 100)
+}
+
+// Watch all form fields for progress updates
+watch([selectedOrganizationId, vehicleClass, make, model, generation, engine, licensePlate, vin, currentMileage], () => {
+  calculateProgress()
+})
+
+// Fetch organizations and makes on component mount
+onMounted(async () => {
+  await fetchUserOrganizations()
+  await fetchMakes()
+  calculateProgress()
+})
+
+// Fetch user's organizations
+async function fetchUserOrganizations() {
+  if (!authStore.isLoggedIn) return
+  
+  loadingOrganizations.value = true
+  try {
+    const data = await organizationApi.getMyOrganizations()
+    userOrganizations.value = data
+    
+    // If user has only one organization and is in fleet mode, auto-select it
+    if (isFleetMode.value && data.length === 1) {
+      selectedOrganizationId.value = data[0].organization_id
+    }
+  } catch (err) {
+    console.error('Error fetching organizations:', err)
+    // Non-critical error, continue without organizations
+  } finally {
+    loadingOrganizations.value = false
+  }
+}
+
+// Fetch makes from catalog API
+async function fetchMakes() {
+  loadingMakes.value = true
+  try {
+    const data = await catalogApi.getMakes()
+    makes.value = data
+  } catch (err) {
+    console.error('Error fetching makes:', err)
+    error.value = 'Could not load vehicle makes. Please try again.'
+  } finally {
+    loadingMakes.value = false
+  }
+}
+
+// Fetch models when make is selected
+watch(make, async (newMake) => {
+  if (newMake) {
+    loadingModels.value = true
+    try {
+      // Pass vehicle_class to filter models by selected vehicle class
+      const data = await catalogApi.getModels(newMake, vehicleClass.value)
+      models.value = data
+      model.value = ''
+      generation.value = ''
+      engine.value = ''
+      catalogId.value = null
+      generations.value = []
+      engines.value = []
+    } catch (err) {
+      console.error('Error fetching models:', err)
+      error.value = 'Could not load models for this make.'
+    } finally {
+      loadingModels.value = false
+    }
+  } else {
+    models.value = []
+    generations.value = []
+    engines.value = []
+  }
+})
+
+// Fetch generations when model is selected
+watch(model, async (newModel) => {
+  if (newModel && make.value) {
+    loadingGenerations.value = true
+    try {
+      const data = await catalogApi.getGenerations(make.value, newModel)
+      generations.value = data
+      generation.value = ''
+      engine.value = ''
+      catalogId.value = null
+      engines.value = []
+    } catch (err) {
+      console.error('Error fetching generations:', err)
+      error.value = 'Could not load generations for this model.'
+    } finally {
+      loadingGenerations.value = false
+    }
+  } else {
+    generations.value = []
+    engines.value = []
+  }
+})
+
+// Fetch engines when generation is selected
+watch(generation, async (newGen) => {
+  if (newGen && make.value && model.value) {
+    loadingEngines.value = true
+    try {
+      const data = await catalogApi.getEngines(make.value, model.value, newGen)
+      engines.value = data
+      engine.value = ''
+      catalogId.value = null
+    } catch (err) {
+      console.error('Error fetching engines:', err)
+      error.value = 'Could not load engines for this generation.'
+    } finally {
+      loadingEngines.value = false
+    }
+  } else {
+    engines.value = []
+  }
+})
+
+// Set catalog ID when engine is selected
+watch(engine, (newEngine) => {
+  if (newEngine) {
+    const selectedEngine = engines.value.find(e => e.variant === newEngine || e.id === newEngine)
+    if (selectedEngine) {
+      catalogId.value = selectedEngine.id
+    }
+  } else {
+    catalogId.value = null
+  }
+})
+
+// Navigation functions
+function nextStep() {
+  if (currentStep.value < totalSteps) {
+    currentStep.value++
+  }
+}
+
+function prevStep() {
+  if (currentStep.value > 1) {
+    currentStep.value--
+  }
+}
+
+// Form submission
+async function handleSubmit() {
+  error.value = null
+  successMessage.value = ''
+  isLoading.value = true
+
+  try {
+    // Determine organization ID: use selected organization, or auth store's active org, or null for personal
+    const organizationId = selectedOrganizationId.value !== null
+      ? selectedOrganizationId.value
+      : (isFleetMode.value ? authStore.activeOrgId : null)
+
+    // Determine owner and operator org IDs based on ownership type
+    let ownerOrgId = null
+    let operatorOrgId = null
+    
+    if (organizationId !== null) {
+      if (ownershipType.value === 'owner') {
+        // Owner: both owner and operator are the selected organization
+        ownerOrgId = organizationId
+        operatorOrgId = organizationId
+      } else {
+        // Operator: only operator is set, owner remains null
+        operatorOrgId = organizationId
+        // ownerOrgId stays null
+      }
+    }
+    
+    // Prepare thick asset payload
+    const vehicleData = {
+      // Core identification
+      vin: vin.value || null,
+      licensePlate: licensePlate.value,
+      catalogId: catalogId.value,
+      organizationId: organizationId,
+      
+      // Ownership fields
+      owner_org_id: ownerOrgId,
+      operator_org_id: operatorOrgId,
+      
+      // Thick Asset fields
+      brand: make.value,
+      model: model.value,
+      vehicleClass: vehicleClass.value,
+      fuelType: getFuelTypeFromEngine(),
+      year: getYearFromGeneration(),
+      currentMileage: parseInt(currentMileage.value) || 0,
+      color: color.value,
+      
+      // Additional metadata
+      status: 'draft',
+      generation: generation.value,
+      engine: engine.value
+    }
+
+    // Call the updated garage store addVehicle action
+    const result = await garageStore.addVehicle(vehicleData)
+    
+    successMessage.value = 'Vehicle registered successfully! The backend will now sync catalog data and calculate profile completion.'
+    
+    // Emit success event
+    emit('success', result)
+    
+    // Reset form after a delay
+    setTimeout(() => {
+      resetForm()
+      emit('close')
+    }, 2000)
+    
+  } catch (err) {
+    console.error('Error registering vehicle:', err)
+    error.value = err.message || 'An unknown error occurred'
+  } finally {
+    isLoading.value = false
+  }
+}
+
+// Helper functions
+function getFuelTypeFromEngine() {
+  if (!engine.value || !engines.value.length) return null
+  const selected = engines.value.find(e => e.variant === engine.value || e.id === engine.value)
+  return selected?.fuel_type || null
+}
+
+function getYearFromGeneration() {
+  // Extract year from generation string (e.g., "2015-2019" or "2020")
+  if (!generation.value) return null
+  const match = generation.value.match(/\d{4}/)
+  return match ? parseInt(match[0]) : null
+}
+
+function resetForm() {
+  currentStep.value = needsOrganizationSelection.value ? 0 : 1
+  selectedOrganizationId.value = null
+  ownershipType.value = 'owner' // Reset to default
+  vehicleClass.value = ''
+  make.value = ''
+  model.value = ''
+  generation.value = ''
+  engine.value = ''
+  catalogId.value = null
+  licensePlate.value = ''
+  vin.value = ''
+  currentMileage.value = ''
+  color.value = ''
+  error.value = null
+  successMessage.value = ''
+  progressPercentage.value = 0
+}
+
+function closeModal() {
+  emit('close')
+}
+</script>
+
+<template>
+  <!-- Modal Backdrop -->
+  <div class="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black bg-opacity-50" @click.self="closeModal">
+    <!-- Modal Container -->
+    <div class="w-full max-w-2xl overflow-hidden bg-white rounded-xl shadow-2xl" :class="isFleetMode ? 'border-l-4 border-blue-600' : 'border-l-4 border-green-600'">
+      <!-- Modal Header -->
+      <div class="p-6 border-b border-gray-200" :class="isFleetMode ? 'bg-blue-50' : 'bg-green-50'">
+        <div class="flex items-center justify-between">
+          <div>
+            <h2 class="text-xl font-bold text-gray-900">
+              Smart Vehicle Registration
+            </h2>
+            <p class="text-sm mt-1 text-gray-600">
+              {{ isFleetMode ? 'Add a new vehicle to your fleet' : 'Register your vehicle in just 3 easy steps!' }}
+            </p>
+          </div>
+          <button @click="closeModal" class="p-2 rounded-full text-gray-500 hover:text-gray-700 hover:bg-gray-100">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        
+        <!-- Progress Indicator -->
+        <div class="mt-6">
+          <div class="flex items-center justify-between mb-2">
+            <span class="text-sm font-medium text-gray-700">Progress</span>
+            <span class="text-sm font-bold" :class="isFleetMode ? 'text-blue-600' : 'text-green-600'">{{ progressPercentage }}%</span>
+          </div>
+          <div class="h-2 rounded-full overflow-hidden bg-gray-200">
+            <div 
+              class="h-full transition-all duration-500"
+              :class="isFleetMode ? 'bg-blue-600' : 'bg-green-600'"
+              :style="{ width: `${progressPercentage}%` }"
+            ></div>
+          </div>
+          
+          <!-- Step Indicators -->
+          <div class="flex justify-between mt-4">
+            <div 
+              v-for="step in totalSteps" 
+              :key="step"
+              class="flex flex-col items-center"
+            >
+              <div 
+                class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold transition-all duration-300"
+                :class="[
+                  step === currentStep 
+                    ? (isFleetMode ? 'bg-blue-600 text-white ring-2 ring-blue-300' : 'bg-green-600 text-white ring-2 ring-green-300')
+                    : step < currentStep
+                    ? (isFleetMode ? 'bg-blue-100 text-blue-700' : 'bg-green-100 text-green-700')
+                    : 'bg-gray-100 text-gray-400'
+                ]"
+              >
+                {{ step }}
+              </div>
+              <span class="text-xs mt-1 font-medium" :class="[
+                step === currentStep
+                  ? (isFleetMode ? 'text-blue-700' : 'text-green-700')
+                  : step < currentStep
+                  ? (isFleetMode ? 'text-blue-600' : 'text-green-600')
+                  : 'text-gray-500'
+              ]">
+                {{ step === 0 ? 'Context' : step === 1 ? 'Classification' : step === 2 ? 'Catalog' : 'Details' }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Modal Body -->
+      <div class="p-6 max-h-[60vh] overflow-y-auto">
+        <!-- Step 0: Organization Selection (if needed) -->
+        <div v-if="currentStep === 0 && needsOrganizationSelection">
+          <h3 class="text-lg font-semibold mb-4 text-gray-800">1. lépés: Szervezet kiválasztása</h3>
+          <p class="text-sm mb-6 text-gray-600">
+            Válaszd ki, hogy melyik szervezethez szeretnéd regisztrálni a járművet. A személyes garázsodhoz vagy egy céges flottához.
+          </p>
+          
+          <div class="space-y-6">
+            <!-- Private Organizations (Személyes Garázsom) -->
+            <div v-if="categorizedOrganizations.privateOrgs.length > 0">
+              <h4 class="text-sm font-semibold text-gray-700 mb-3">Személyes Garázsom</h4>
+              <div class="space-y-3">
+                <div
+                  v-for="org in categorizedOrganizations.privateOrgs"
+                  :key="org.id"
+                  @click="selectedOrganizationId = org.id"
+                  class="p-4 rounded-lg border-2 transition-all duration-200 cursor-pointer"
+                  :class="selectedOrganizationId === org.id
+                    ? (isFleetMode ? 'border-blue-500 bg-blue-50' : 'border-green-500 bg-green-50')
+                    : 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50'"
+                >
+                  <div class="flex items-center">
+                    <div class="flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center mr-4"
+                      :class="selectedOrganizationId === org.id
+                        ? (isFleetMode ? 'bg-blue-100 text-blue-600' : 'bg-green-100 text-green-600')
+                        : 'bg-gray-100 text-gray-500'">
+                      <span>🏠</span>
+                    </div>
+                    <div class="flex-grow">
+                      <h4 class="font-medium text-gray-900">{{ org.name }}</h4>
+                      <p class="text-sm text-gray-600">{{ org.description }}</p>
+                    </div>
+                    <div v-if="selectedOrganizationId === org.id" class="text-blue-600">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- Business Organizations (Céges Flották) -->
+            <div v-if="categorizedOrganizations.businessOrgs.length > 0">
+              <h4 class="text-sm font-semibold text-gray-700 mb-3">Céges Flották</h4>
+              <div class="space-y-3">
+                <div
+                  v-for="org in categorizedOrganizations.businessOrgs"
+                  :key="org.id"
+                  @click="selectedOrganizationId = org.id"
+                  class="p-4 rounded-lg border-2 transition-all duration-200 cursor-pointer"
+                  :class="selectedOrganizationId === org.id
+                    ? (isFleetMode ? 'border-blue-500 bg-blue-50' : 'border-green-500 bg-green-50')
+                    : 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50'"
+                >
+                  <div class="flex items-center">
+                    <div class="flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center mr-4"
+                      :class="selectedOrganizationId === org.id
+                        ? (isFleetMode ? 'bg-blue-100 text-blue-600' : 'bg-green-100 text-green-600')
+                        : 'bg-gray-100 text-gray-500'">
+                      <span>🏢</span>
+                    </div>
+                    <div class="flex-grow">
+                      <h4 class="font-medium text-gray-900">{{ org.name }}</h4>
+                      <p class="text-sm text-gray-600">{{ org.description }}</p>
+                      <p v-if="org.originalOrg.tax_number" class="text-xs text-gray-500 mt-1">
+                        Adószám: {{ org.originalOrg.tax_number }}
+                      </p>
+                    </div>
+                    <div v-if="selectedOrganizationId === org.id" class="text-blue-600">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- No organizations message -->
+            <div v-if="!loadingOrganizations && categorizedOrganizations.privateOrgs.length === 0 && categorizedOrganizations.businessOrgs.length === 0" class="text-center p-6 border border-dashed border-gray-300 rounded-lg">
+              <p class="text-gray-600">Nincs elérhető szervezet. Először hozz létre egy személyes garázst vagy céges flottát a profilodban.</p>
+            </div>
+            
+            <!-- Owner vs Operator Toggle (shown when organization is selected) -->
+            <div v-if="selectedOrganizationId !== null" class="mt-6 pt-6 border-t border-gray-200">
+              <h4 class="text-sm font-semibold text-gray-700 mb-3">Tulajdonosi státusz</h4>
+              <p class="text-sm text-gray-600 mb-4">Válaszd ki, hogy milyen minőségben vagy kapcsolatban a járművel:</p>
+              
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div
+                  @click="ownershipType = 'owner'"
+                  class="p-4 rounded-lg border-2 transition-all duration-200 cursor-pointer"
+                  :class="ownershipType === 'owner'
+                    ? (isFleetMode ? 'border-blue-500 bg-blue-50' : 'border-green-500 bg-green-50')
+                    : 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50'"
+                >
+                  <div class="flex items-center">
+                    <div class="flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center mr-4"
+                      :class="ownershipType === 'owner'
+                        ? (isFleetMode ? 'bg-blue-100 text-blue-600' : 'bg-green-100 text-green-600')
+                        : 'bg-gray-100 text-gray-500'">
+                      <span>👑</span>
+                    </div>
+                    <div class="flex-grow">
+                      <h4 class="font-medium text-gray-900">Tulajdonos vagyok</h4>
+                      <p class="text-sm text-gray-600">A jármű a tulajdonom, én fizetem a költségeket és döntök a szervizelésről.</p>
+                    </div>
+                    <div v-if="ownershipType === 'owner'" class="text-blue-600">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+                
+                <div
+                  @click="ownershipType = 'operator'"
+                  class="p-4 rounded-lg border-2 transition-all duration-200 cursor-pointer"
+                  :class="ownershipType === 'operator'
+                    ? (isFleetMode ? 'border-blue-500 bg-blue-50' : 'border-green-500 bg-green-50')
+                    : 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50'"
+                >
+                  <div class="flex items-center">
+                    <div class="flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center mr-4"
+                      :class="ownershipType === 'operator'
+                        ? (isFleetMode ? 'bg-blue-100 text-blue-600' : 'bg-green-100 text-green-600')
+                        : 'bg-gray-100 text-gray-500'">
+                      <span>🚗</span>
+                    </div>
+                    <div class="flex-grow">
+                      <h4 class="font-medium text-gray-900">Csak üzembentartó/használó vagyok</h4>
+                      <p class="text-sm text-gray-600">A járművet használom, de nem én vagyok a tulajdonos (pl. céges autó, lízing).</p>
+                    </div>
+                    <div v-if="ownershipType === 'operator'" class="text-blue-600">
+                      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              
+              <div class="mt-4 text-sm text-gray-600">
+                <p v-if="ownershipType === 'owner'">
+                  <strong>Hatás:</strong> A kiválasztott szervezet lesz a tulajdonos (<code>owner_org_id</code>) és az üzembentartó (<code>operator_org_id</code>) is.
+                </p>
+                <p v-else>
+                  <strong>Hatás:</strong> A kiválasztott szervezet lesz csak az üzembentartó (<code>operator_org_id</code>). A tulajdonos mező üres marad (<code>owner_org_id = null</code>).
+                </p>
+              </div>
+            </div>
+          </div>
+          
+          <div v-if="loadingOrganizations" class="mt-4 text-center text-gray-500">
+            Szervezetek betöltése...
+          </div>
+        </div>
+
+        <!-- Step 1: Classification -->
+        <div v-else-if="currentStep === 1">
+          <h3 class="text-lg font-semibold mb-4 text-gray-800">Step {{ needsOrganizationSelection ? '2' : '1' }}: Vehicle Classification</h3>
+          <p class="text-sm mb-6 text-gray-600">
+            Select the type of vehicle you want to register. This helps us provide relevant catalog data.
+          </p>
+          
+          <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
+            <button
+              v-for="cls in vehicleClasses"
+              :key="cls.value"
+              @click="vehicleClass = cls.value"
+              class="p-4 rounded-lg border-2 transition-all duration-200 flex flex-col items-center justify-center"
+              :class="vehicleClass === cls.value
+                ? (isFleetMode ? 'border-blue-500 bg-blue-50 text-blue-700' : 'border-green-500 bg-green-50 text-green-700')
+                : 'border-gray-200 bg-white text-gray-700 hover:border-gray-300 hover:bg-gray-50'"
+            >
+              <span class="text-2xl mb-2">{{ cls.icon }}</span>
+              <span class="font-medium text-center">{{ cls.label }}</span>
+            </button>
+          </div>
+        </div>
+
+        <!-- Step 2: Catalog Auto-Complete -->
+        <div v-else-if="currentStep === 2">
+          <h3 class="text-lg font-semibold mb-4 text-gray-800">Step {{ needsOrganizationSelection ? '3' : '2' }}: Vehicle Catalog</h3>
+          <p class="text-sm mb-6 text-gray-600">
+            Select your vehicle from our catalog. Start by choosing the make, then model, generation, and engine.
+          </p>
+          
+          <div class="space-y-6">
+            <!-- Make Selection -->
+            <div>
+              <label class="block text-sm font-medium mb-2 text-gray-700">Make (Brand)</label>
+              <select
+                v-model="make"
+                class="w-full px-4 py-3 rounded-lg border border-gray-300 text-gray-800 focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
+              >
+                <option value="">Select a make</option>
+                <option v-for="m in makes" :key="m" :value="m">{{ m }}</option>
+              </select>
+            </div>
+
+            <!-- Model Selection -->
+            <div v-if="make">
+              <label class="block text-sm font-medium mb-2 text-gray-700">Model</label>
+              <select
+                v-model="model"
+                :disabled="!make || loadingModels"
+                class="w-full px-4 py-3 rounded-lg border border-gray-300 text-gray-800 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 disabled:opacity-50"
+              >
+                <option value="">Select a model</option>
+                <option v-for="m in models" :key="m" :value="m">{{ m }}</option>
+              </select>
+              <div v-if="loadingModels" class="text-sm text-gray-500 mt-1">Loading models...</div>
+            </div>
+
+            <!-- Generation Selection -->
+            <div v-if="model">
+              <label class="block text-sm font-medium mb-2 text-gray-700">Generation</label>
+              <select
+                v-model="generation"
+                :disabled="!model || loadingGenerations || !hasGenerations"
+                class="w-full px-4 py-3 rounded-lg border border-gray-300 text-gray-800 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 disabled:opacity-50"
+              >
+                <option value="">Select a generation</option>
+                <option v-for="g in generations" :key="g" :value="g">{{ g }}</option>
+              </select>
+              <div v-if="loadingGenerations" class="text-sm text-gray-500 mt-1">Loading generations...</div>
+              <div v-if="generationsLoaded && !hasGenerations" class="text-sm text-amber-600 mt-1 p-2 bg-amber-50 rounded border border-amber-200">
+                ⓘ No generation data available for this model. You can proceed without selecting a generation.
+              </div>
+            </div>
+
+            <!-- Engine Selection -->
+            <div v-if="generation || (model && !hasGenerations)">
+              <label class="block text-sm font-medium mb-2 text-gray-700">Engine Variant</label>
+              <select
+                v-model="engine"
+                :disabled="(!generation && hasGenerations) || loadingEngines || !hasEngines"
+                class="w-full px-4 py-3 rounded-lg border border-gray-300 text-gray-800 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 disabled:opacity-50"
+              >
+                <option value="">Select an engine</option>
+                <option v-for="e in engines" :key="e.id || e.variant" :value="e.variant">{{ e.variant }} ({{ e.fuel_type }})</option>
+              </select>
+              <div v-if="loadingEngines" class="text-sm text-gray-500 mt-1">Loading engines...</div>
+              <div v-if="enginesLoaded && !hasEngines" class="text-sm text-amber-600 mt-1 p-2 bg-amber-50 rounded border border-amber-200">
+                ⓘ No engine data available for this generation. You can proceed without selecting an engine.
+              </div>
+              <div v-if="catalogId" class="text-xs text-green-600 mt-1">Catalog ID: {{ catalogId }}</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Step 3: Unique Details -->
+        <div v-else-if="currentStep === 3">
+          <h3 class="text-lg font-semibold mb-4 text-gray-800">Step {{ needsOrganizationSelection ? '4' : '3' }}: Vehicle Details</h3>
+          <p class="text-sm mb-6 text-gray-600">
+            Provide the unique details for your vehicle.
+          </p>
+          
+          <div class="space-y-6">
+            <!-- License Plate -->
+            <div>
+              <label class="block text-sm font-medium mb-2 text-gray-700">License Plate <span class="text-red-500">*</span></label>
+              <input
+                v-model="licensePlate"
+                type="text"
+                required
+                class="w-full px-4 py-3 rounded-lg border border-gray-300 text-gray-800 focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
+                placeholder="ABC-123"
+              />
+            </div>
+
+            <!-- VIN (Optional) -->
+            <div>
+              <label class="block text-sm font-medium mb-2 text-gray-700">VIN (Opcionális)</label>
+              <input
+                v-model="vin"
+                type="text"
+                class="w-full px-4 py-3 rounded-lg border border-gray-300 text-gray-800 focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
+                placeholder="1HGCM82633A123456"
+              />
+              <p class="text-xs text-gray-500 mt-1">Járműazonosító szám (17 karakter)</p>
+              
+              <!-- Grace Period Warning -->
+              <div v-if="!vin" class="mt-3 p-3 rounded-lg bg-amber-50 border border-amber-200">
+                <div class="flex items-start">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-amber-600 mr-2 flex-shrink-0 mt-0.5" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+                  </svg>
+                  <div>
+                    <p class="text-sm font-medium text-amber-800">Figyelem: Átmeneti használat</p>
+                    <p class="text-xs text-amber-700 mt-1">
+                      Az alvázszám (VIN) megadása nélkül a jármű <strong>14 napig</strong>, vagy maximum <strong>10 költség rögzítéséig</strong> használható.
+                      Ezt követően a rendszer zárolja a további műveleteket, amíg meg nem adod az alvázszámot.
+                    </p>
+                    <p class="text-xs text-amber-700 mt-1">
+                      Ajánlott az alvázszám megadása a teljes funkcionalitás érdekében.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Current Mileage -->
+            <div>
+              <label class="block text-sm font-medium mb-2 text-gray-700">Current Mileage (km)</label>
+              <input
+                v-model="currentMileage"
+                type="number"
+                min="0"
+                class="w-full px-4 py-3 rounded-lg border border-gray-300 text-gray-800 focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
+                placeholder="150000"
+              />
+            </div>
+
+            <!-- Color -->
+            <div>
+              <label class="block text-sm font-medium mb-2 text-gray-700">Color (Optional)</label>
+              <input
+                v-model="color"
+                type="text"
+                class="w-full px-4 py-3 rounded-lg border border-gray-300 text-gray-800 focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
+                placeholder="Red, Black, Silver, etc."
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- Error and Success Messages -->
+        <div v-if="error" class="mt-6 p-4 rounded-lg bg-red-50 border border-red-200">
+          <div class="flex items-center">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-500 mr-2" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
+            </svg>
+            <span class="text-red-700 font-medium">Error: {{ error }}</span>
+          </div>
+        </div>
+
+        <div v-if="successMessage" class="mt-6 p-4 rounded-lg bg-green-50 border border-green-200">
+          <div class="flex items-center">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-500 mr-2" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
+            </svg>
+            <span class="text-green-700 font-medium">{{ successMessage }}</span>
+          </div>
+        </div>
+      </div>
+
+      <!-- Modal Footer -->
+      <div class="p-6 border-t border-gray-200 bg-gray-50">
+        <div class="flex justify-between">
+          <button
+            v-if="currentStep > 1"
+            @click="prevStep"
+            class="px-5 py-2.5 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-colors"
+          >
+            Previous
+          </button>
+          <div v-else></div>
+
+          <div class="flex space-x-3">
+            <button
+              @click="closeModal"
+              class="px-5 py-2.5 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-colors"
+            >
+              Cancel
+            </button>
+            
+            <button
+              v-if="currentStep < totalSteps"
+              @click="nextStep"
+              :disabled="!canProceedToNextStep"
+              class="px-5 py-2.5 rounded-lg font-medium transition-colors"
+              :class="isFleetMode
+                ? (canProceedToNextStep ? 'bg-blue-600 text-white hover:bg-blue-700' : 'bg-blue-300 text-white cursor-not-allowed')
+                : (canProceedToNextStep ? 'bg-green-600 text-white hover:bg-green-700' : 'bg-green-300 text-white cursor-not-allowed')"
+            >
+              Next
+            </button>
+            
+            <button
+              v-else
+              @click="handleSubmit"
+              :disabled="isLoading || !licensePlate"
+              class="px-5 py-2.5 rounded-lg font-medium transition-colors"
+              :class="isFleetMode
+                ? (!isLoading && licensePlate ? 'bg-blue-600 text-white hover:bg-blue-700' : 'bg-blue-300 text-white cursor-not-allowed')
+                : (!isLoading && licensePlate ? 'bg-green-600 text-white hover:bg-green-700' : 'bg-green-300 text-white cursor-not-allowed')"
+            >
+              <span v-if="isLoading">
+                <svg class="animate-spin h-5 w-5 text-white inline-block mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                Registering...
+              </span>
+              <span v-else>Register Vehicle</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Custom scrollbar for modal body */
+.max-h-\[60vh\]::-webkit-scrollbar {
+  width: 6px;
+}
+
+.max-h-\[60vh\]::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.max-h-\[60vh\]::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.max-h-\[60vh\]::-webkit-scrollbar-thumb:hover {
+  background: #a1a1a1;
+}
+</style>

frontend/src/services/api.js

@@ -130,8 +130,12 @@ export const catalogApi = {
     const response = await api.get('/catalog/makes')
     return response.data
   },
-  async getModels(make) {
-    const response = await api.get('/catalog/models', { params: { make } })
+  async getModels(make, vehicleClass = null) {
+    const params = { make }
+    if (vehicleClass) {
+      params.vehicle_class = vehicleClass
+    }
+    const response = await api.get('/catalog/models', { params })
     return response.data
   },
   async getGenerations(make, model) {
@@ -142,4 +146,18 @@ export const catalogApi = {
     const response = await api.get('/catalog/engines', { params: { make, model, gen } })
     return response.data
   }
+}
+
+// Organization API functions
+export const organizationApi = {
+  async getMyOrganizations() {
+    const response = await api.get('/organizations/my')
+    return response.data
+  },
+  async updateActiveOrganization(organizationId) {
+    const response = await api.patch('/users/me/active-organization', {
+      organization_id: organizationId
+    })
+    return response.data
+  }
 }

frontend/src/stores/authStore.js

@@ -215,6 +215,34 @@ export const useAuthStore = defineStore('auth', () => {
       const data = await response.json()
       console.log('AuthStore: Updated active organization', data)
       
+      // Check if response contains new JWT token (backend now returns {user: {...}, access_token: "...", token_type: "bearer"})
+      if (data.access_token) {
+        console.log('AuthStore: Received new access token from organization switch')
+        
+        // Update token in localStorage and store state
+        localStorage.setItem('token', data.access_token)
+        token.value = data.access_token
+        
+        // Decode new token to update role if needed
+        try {
+          const tokenParts = data.access_token.split('.')
+          if (tokenParts.length === 3) {
+            const payload = JSON.parse(atob(tokenParts[1]))
+            const roleValue = payload.role || 'user'
+            const adminFlag = roleValue === 'admin' || roleValue === 'superadmin'
+            
+            localStorage.setItem('user_role', roleValue)
+            localStorage.setItem('is_admin', adminFlag.toString())
+            
+            userRole.value = roleValue
+            isAdmin.value = adminFlag
+            console.log('AuthStore: Updated role from new token:', roleValue)
+          }
+        } catch (decodeError) {
+          console.warn('AuthStore: Could not decode new JWT token', decodeError)
+        }
+      }
+      
       // Update local state
       activeOrgId.value = organizationId
       localStorage.setItem('active_org_id', organizationId || '')

frontend/src/stores/garageStore.js

@@ -21,7 +21,7 @@ export const useGarageStore = defineStore('garage', () => {
 
   // Actions
   async function addVehicle(vehicle) {
-    // Real API call to POST /assets/vehicles
+    // Real API call to POST /api/v1/assets (Thick Asset endpoint)
     const token = authStore.token
     
     if (!token) {
@@ -29,16 +29,46 @@ export const useGarageStore = defineStore('garage', () => {
     }
     
     try {
-      // Transform frontend vehicle data to API schema
-      // For draft vehicles (2-step creation), VIN can be null
+      // Transform frontend vehicle data to Thick Asset API schema
+      // Include all required fields for thick asset creation
       const payload = {
+        // Core identification
         vin: vehicle.vin || null, // Send null for draft vehicles
         license_plate: vehicle.licensePlate || 'N/A',
         catalog_id: vehicle.catalogId || null,
-        organization_id: vehicle.organizationId || authStore.activeOrgId // Use active org ID, must be present
+        organization_id: vehicle.organizationId || authStore.activeOrgId,
+        
+        // Ownership fields (required by AssetCreate schema)
+        owner_org_id: vehicle.owner_org_id || null,
+        operator_org_id: vehicle.operator_org_id || null,
+        
+        // Thick Asset fields - send even if catalog_id is provided for completeness
+        brand: vehicle.brand || vehicle.make || null,
+        model: vehicle.model || null,
+        vehicle_class: vehicle.vehicleClass || vehicle.class || null,
+        fuel_type: vehicle.fuelType || vehicle.fuel || null,
+        year_of_manufacture: vehicle.year || vehicle.yearOfManufacture || null,
+        engine_capacity: vehicle.engineCapacity || null,
+        power_kw: vehicle.powerKw || null,
+        transmission: vehicle.transmission || null,
+        body_type: vehicle.bodyType || null,
+        color: vehicle.color || null,
+        current_mileage: vehicle.currentMileage || vehicle.mileage || 0,
+        
+        // Metadata
+        status: vehicle.status || 'draft', // Default to draft for 2-step creation
+        data_status: 'incomplete', // Will be updated by backend snapshot sync
+        profile_completion_percentage: 0 // Will be calculated by backend
       }
       
-      const response = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'https://dev.servicefinder.hu'}/assets/vehicles`, {
+      // Remove null values to keep payload clean
+      Object.keys(payload).forEach(key => {
+        if (payload[key] === null || payload[key] === undefined) {
+          delete payload[key]
+        }
+      })
+      
+      const response = await fetch(`${import.meta.env.VITE_API_BASE_URL || 'https://dev.servicefinder.hu'}/api/v1/assets/vehicles`, {
         method: 'POST',
         headers: {
           'Authorization': `Bearer ${token}`,
@@ -50,11 +80,24 @@ export const useGarageStore = defineStore('garage', () => {
       
       if (!response.ok) {
         const errorText = await response.text()
-        throw new Error(`Failed to add vehicle: ${response.status} ${response.statusText} - ${errorText}`)
+        let errorMessage = `Failed to add vehicle: ${response.status} ${response.statusText}`
+        
+        // Handle specific error cases
+        if (response.status === 409) {
+          errorMessage = 'Duplicate VIN or license plate detected. Please check your input.'
+        } else if (response.status === 429) {
+          errorMessage = 'Rate limit exceeded. Please try again later.'
+        } else if (response.status === 400) {
+          errorMessage = `Invalid input: ${errorText}`
+        } else if (response.status === 403) {
+          errorMessage = 'Permission denied. You may have reached your vehicle limit.'
+        }
+        
+        throw new Error(errorMessage)
       }
       
       const data = await response.json()
-      console.log('GarageStore: Vehicle created successfully', data)
+      console.log('GarageStore: Thick Asset created successfully', data)
       
       // After successful save, fetch fresh data from server to ensure consistency
       await fetchVehicles()