frontend 2026-06-10 bontva a 2 felület

frontend/src/layouts/OrganizationLayout.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="organization-layout min-h-screen text-white">
+    <!-- Modular header with BaseHeader + Lego components -->
+    <BaseHeader>
+      <template #left>
+        <HeaderLogo />
+      </template>
+
+      <template #center>
+        <div class="font-semibold text-lg text-white tracking-wide">{{ orgDisplayName }} garázsa</div>
+      </template>
+
+      <template #right>
+        <HeaderCompanySwitcher />
+        <HeaderProfile />
+      </template>
+    </BaseHeader>
+
+    <!-- Main content slot for child routes -->
+    <main class="relative z-10">
+      <router-view />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useAuthStore } from '../stores/auth'
+import { useThemeStore } from '../stores/theme'
+import BaseHeader from '../components/layout/BaseHeader.vue'
+import HeaderLogo from '../components/header/HeaderLogo.vue'
+import HeaderCompanySwitcher from '../components/header/HeaderCompanySwitcher.vue'
+import HeaderProfile from '../components/header/HeaderProfile.vue'
+
+const route = useRoute()
+const { t } = useI18n()
+const authStore = useAuthStore()
+const themeStore = useThemeStore()
+
+// ── Resolve organization display name from route params ────────────
+const orgDisplayName = computed(() => {
+  const id = Number(route.params.id)
+  if (!id) return t('organization.fallbackName')
+  const org = authStore.myOrganizations.find((o) => o.organization_id === id)
+  return org?.display_name || org?.name || t('organization.fallbackName')
+})
+
+// ── Resolve current organization object ────────────────────────────
+const currentOrganization = computed(() => {
+  const id = Number(route.params.id)
+  if (!id) return null
+  return authStore.myOrganizations.find((o) => o.organization_id === id) || null
+})
+
+// ── Apply theme when organization loads or changes ────────────────
+function applyOrgTheme() {
+  const org = currentOrganization.value
+  if (org?.visual_settings) {
+    themeStore.applyTheme(org.visual_settings)
+  }
+}
+
+// Watch for organization changes (e.g. when switching orgs via switcher)
+watch(
+  () => route.params.id,
+  () => {
+    applyOrgTheme()
+  },
+)
+
+// Apply theme on mount
+onMounted(() => {
+  applyOrgTheme()
+})
+
+// Reset theme when leaving the organization view
+onUnmounted(() => {
+  themeStore.resetTheme()
+})
+</script>