Improve the frontend 2

frontend/src/components/layout/Sidebar/Sidebar.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback, forwardRef, useMemo } from 'react';
+import React, { useState, useCallback, forwardRef, useMemo, useEffect } from 'react';
 import { clsx } from 'clsx';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -7,6 +7,7 @@ import { useCurrentTenantAccess } from '../../../stores/tenant.store';
 import { useHasAccess } from '../../../hooks/useAccessControl';
 import { getNavigationRoutes, canAccessRoute, ROUTES } from '../../../router/routes.config';
 import { useSubscriptionAwareRoutes } from '../../../hooks/useSubscriptionAwareRoutes';
+import { useSubscriptionEvents } from '../../../contexts/SubscriptionEventsContext';
 import { Button } from '../../ui';
 import { Badge } from '../../ui';
 import { Tooltip } from '../../ui';
@@ -161,11 +162,18 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
   const [searchValue, setSearchValue] = useState('');
   const searchInputRef = React.useRef<HTMLInputElement>(null);
   const sidebarRef = React.useRef<HTMLDivElement>(null);
+  const { subscriptionVersion } = useSubscriptionEvents();
 
   // Get subscription-aware navigation routes
   const baseNavigationRoutes = useMemo(() => getNavigationRoutes(), []);
   const { filteredRoutes: subscriptionFilteredRoutes } = useSubscriptionAwareRoutes(baseNavigationRoutes);
 
+  // Force re-render when subscription changes
+  useEffect(() => {
+    // The subscriptionVersion change will trigger a re-render
+    // This ensures the sidebar picks up new route filtering based on updated subscription
+  }, [subscriptionVersion]);
+
   // Map route paths to translation keys
   const getTranslationKey = (routePath: string): string => {
     const pathMappings: Record<string, string> = {
@@ -1079,4 +1087,4 @@ export const Sidebar = forwardRef<SidebarRef, SidebarProps>(({
   );
 });
 
-Sidebar.displayName = 'Sidebar';
+Sidebar.displayName = 'Sidebar';