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/composables/useActiveRole.ts

@@ -36,7 +36,6 @@ export function useActiveRole() {
   const roleChangedByAdmin = useState<boolean>('roleChangedByAdmin', () => false)
   const loading = useState<boolean>('roleLoading', () => false)
   const error = useState<string | null>('roleError', () => null)
-  const initialized = useState<boolean>('roleInitialized', () => false)
 
   /**
    * Fetch current role status from server
@@ -88,8 +87,13 @@ export function useActiveRole() {
       activeRole.value = roleCode
       roleChangedByAdmin.value = false
 
-      // Refresh products if on products page
-      await refreshNuxtData('products')
+      // Refresh all product list pages (role-based visibility)
+      // Note: Product detail pages will handle visibility via API 404 check
+      await Promise.all([
+        refreshNuxtData('products-list'), // Main products page
+        refreshNuxtData('educator-products'), // Educator products page
+        refreshNuxtData('experimenta-products'), // Experimenta products page
+      ])
 
       return true
     } catch (err: any) {
@@ -112,17 +116,13 @@ export function useActiveRole() {
   const hasMultipleRoles = computed(() => approvedRoles.value.length > 1)
 
   /**
-   * Auto-initialize on first use (fetch role status from server)
-   * This ensures the role is correct immediately after login
+   * Auto-fetch roles when user logs in
+   * This ensures the role button shows the correct role immediately after login
+   * Uses callOnce to prevent redundant API calls
    */
   const { loggedIn } = useUserSession()
-  if (!initialized.value && loggedIn.value) {
-    initialized.value = true
-    // Fetch initial role status (don't await to avoid blocking)
-    fetchRoleStatus().catch((err) => {
-      // Silent fail - user can still use the app with default role
-      console.warn('Failed to initialize role status:', err)
-    })
+  if (loggedIn.value) {
+    callOnce('init-roles', () => fetchRoleStatus())
   }
 
   return {