2026.06.04 frontend építés közben

frontend_old/components/ModeSwitcher.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="mode-switcher">
+    <div class="flex items-center space-x-4">
+      <!-- B2B/B2C Toggle -->
+      <div class="flex items-center space-x-2">
+        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ $t('switchMode') }}</span>
+        <button
+          @click="toggleAppMode"
+          class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+          :class="isCorporate ? 'bg-corporate-blue' : 'bg-consumer-orange'"
+        >
+          <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
+            :class="isCorporate ? 'translate-x-6' : 'translate-x-1'"
+          />
+        </button>
+        <span class="text-sm font-medium min-w-[60px] dark:text-gray-300">
+          {{ isCorporate ? $t('corporate') : $t('consumer') }}
+        </span>
+      </div>
+
+      <!-- Admin Switch (only for admins) -->
+      <div v-if="showAdminSwitch" class="flex items-center space-x-2">
+        <div class="h-6 w-px bg-gray-300 dark:bg-gray-600"></div>
+        <button
+          @click="goToAdmin"
+          class="flex items-center space-x-2 px-3 py-1.5 rounded-lg bg-gradient-to-r from-gray-800 to-gray-900 dark:from-gray-700 dark:to-gray-800 text-white hover:opacity-90 transition-opacity"
+        >
+          <span class="text-sm">⚙️</span>
+          <span class="text-sm font-medium">Admin</span>
+        </button>
+        <button
+          v-if="isInAdminMode"
+          @click="exitAdmin"
+          class="px-3 py-1.5 rounded-lg bg-red-900/30 hover:bg-red-900/50 text-red-400 text-sm font-medium transition-colors"
+        >
+          Exit Admin
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useAppModeStore } from '../stores/appModeStore'
+import { useAuthStore } from '../stores/authStore'
+
+const { t } = useI18n()
+const router = useRouter()
+const route = useRoute()
+const appModeStore = useAppModeStore()
+const authStore = useAuthStore()
+
+const isCorporate = computed(() => appModeStore.isCorporate)
+const isInAdminMode = computed(() => route.path.startsWith('/admin'))
+
+const showAdminSwitch = computed(() => {
+  // Check if user has admin privileges
+  return authStore.isAdmin
+})
+
+function toggleAppMode() {
+  appModeStore.toggleMode()
+}
+
+function goToAdmin() {
+  router.push('/admin')
+}
+
+function exitAdmin() {
+  router.push('/')
+}
+</script>
+
+<style scoped>
+.mode-switcher {
+  font-family: 'Inter', sans-serif;
+}
+</style>