Enhance Role-Based Visibility and Navigation Logic

- Introduced role visibility checks in AreaTabs.vue to filter displayed areas based on the user's active role, improving user experience and accessibility.
- Updated RoleSwitcher.vue to enhance accessibility with a high-contrast checkmark for better visibility.
- Modified useActiveRole.ts to streamline role initialization and refresh logic for role-based product visibility.
- Added explicit keys for role-based data fetching in product-related pages to ensure accurate data refresh.
- Enhanced API endpoint for product retrieval to return 404 if a product is not accessible based on the user's role, ensuring security and clarity.

app/pages/products/[id].vue

@@ -33,7 +33,24 @@ interface Product {
 }
 
 // Fetch product from API
-const { data: product, error, pending } = await useFetch<Product>(`/api/products/${productId}`)
+const { data: product, error, pending } = await useFetch<Product>(`/api/products/${productId}`, {
+  key: `product-${productId}`, // Explicit key for role-based refresh
+})
+
+// Auto-redirect to products list if 404 (e.g., after role switch)
+watch(error, (newError) => {
+  if (newError?.statusCode === 404) {
+    // Show notification
+    toast.error('Produkt nicht verfügbar', {
+      description: 'Dieses Produkt ist für deine aktuelle Rolle nicht sichtbar.',
+    })
+
+    // Redirect after short delay
+    setTimeout(() => {
+      navigateTo('/products')
+    }, 1500)
+  }
+})
 
 // Format price in EUR
 const formattedPrice = computed(() => {

app/pages/products/index.vue

@@ -27,6 +27,7 @@ interface Product {
 
 // Fetch products from API - only Makerspace and Educator passes
 const { data: products, error, pending } = await useFetch<Product[]>('/api/products', {
+  key: 'products-list', // Explicit key for role-based refresh
   query: {
     category: 'makerspace-annual-pass,educator-annual-pass',
   },