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/educator/index.vue

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