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.

server/api/products/[id].get.ts

@@ -2,12 +2,18 @@
  * GET /api/products/[id]
  *
  * Returns a single product by UUID.
- * Returns 404 if product is not found or is inactive.
+ * Returns 404 if product is not found, is inactive, or user's role doesn't have access.
+ *
+ * Role-based Visibility (MVP):
+ * - Unauthenticated users: 404
+ * - Authenticated users: Only see products assigned to their ACTIVE role
  */
 
 import { z } from 'zod'
 import { and, eq } from 'drizzle-orm'
 import { products } from '../../database/schema'
+import { getVisibleProductIdsForRole } from '../../utils/roles'
+import { getUserActiveRole } from '../../utils/role-session'
 
 // UUID validation schema
 const paramsSchema = z.object({
@@ -21,6 +27,29 @@ export default defineEventHandler(async (event) => {
   const params = await getValidatedRouterParams(event, paramsSchema.parse)
 
   try {
+    // Get user session (MVP: unauthenticated users cannot access products)
+    const { user } = await getUserSession(event)
+    if (!user) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: 'Product not found',
+      })
+    }
+
+    // Get user's active role
+    const activeRole = await getUserActiveRole(event)
+
+    // Check role-based visibility
+    const visibleProductIds = await getVisibleProductIdsForRole(user.id, activeRole)
+
+    // Return 404 if product is not visible to user's role
+    if (!visibleProductIds.includes(params.id)) {
+      throw createError({
+        statusCode: 404,
+        statusMessage: 'Product not found',
+      })
+    }
+
     // Fetch product by ID (must be active)
     const product = await db.query.products.findFirst({
       where: and(eq(products.id, params.id), eq(products.active, true)),