Initial commit: igny8 project

frontend/src/layout/AppLayout.tsx

@@ -0,0 +1,195 @@
+import { useEffect, useRef, useState } from "react";
+import { SidebarProvider, useSidebar } from "../context/SidebarContext";
+import { Outlet } from "react-router";
+import AppHeader from "./AppHeader";
+import Backdrop from "./Backdrop";
+import AppSidebar from "./AppSidebar";
+import { useSiteStore } from "../store/siteStore";
+import { useSectorStore } from "../store/sectorStore";
+import { useAuthStore } from "../store/authStore";
+import { useErrorHandler } from "../hooks/useErrorHandler";
+import { trackLoading } from "../components/common/LoadingStateMonitor";
+import ResourceDebugOverlay from "../components/debug/ResourceDebugOverlay";
+
+const LayoutContent: React.FC = () => {
+  const { isExpanded, isHovered, isMobileOpen } = useSidebar();
+  const { loadActiveSite, activeSite } = useSiteStore();
+  const { loadSectorsForSite } = useSectorStore();
+  const { refreshUser, isAuthenticated } = useAuthStore();
+  const { addError } = useErrorHandler('AppLayout');
+  const hasLoadedSite = useRef(false);
+  const lastSiteId = useRef<number | null>(null);
+  const isLoadingSite = useRef(false);
+  const isLoadingSector = useRef(false);
+  const [debugEnabled, setDebugEnabled] = useState(false);
+  const lastUserRefresh = useRef<number>(0);
+
+  // Initialize site store on mount - only once
+  useEffect(() => {
+    if (!hasLoadedSite.current && !isLoadingSite.current) {
+      hasLoadedSite.current = true;
+      isLoadingSite.current = true;
+      trackLoading('site-loading', true);
+      
+      // Add timeout to prevent infinite loading
+      const timeoutId = setTimeout(() => {
+        if (isLoadingSite.current) {
+          console.error('AppLayout: Site loading timeout after 10 seconds');
+          trackLoading('site-loading', false);
+          isLoadingSite.current = false;
+          addError(new Error('Site loading timeout - check network connection'), 'AppLayout.loadActiveSite');
+        }
+      }, 10000);
+      
+      loadActiveSite()
+        .catch((error) => {
+          console.error('AppLayout: Error loading active site:', error);
+          addError(error, 'AppLayout.loadActiveSite');
+        })
+        .finally(() => {
+          clearTimeout(timeoutId);
+          trackLoading('site-loading', false);
+          isLoadingSite.current = false;
+        });
+    }
+  }, []); // Empty deps - only run once on mount
+
+  // Load sectors when active site changes (by ID, not object reference)
+  useEffect(() => {
+    const currentSiteId = activeSite?.id ?? null;
+    
+    // Only load if:
+    // 1. We have a site ID
+    // 2. The site is active (inactive sites can't have accessible sectors)
+    // 3. It's different from the last one we loaded
+    // 4. We're not already loading
+    if (currentSiteId && activeSite?.is_active && currentSiteId !== lastSiteId.current && !isLoadingSector.current) {
+      lastSiteId.current = currentSiteId;
+      isLoadingSector.current = true;
+      trackLoading('sector-loading', true);
+      
+      // Add timeout to prevent infinite loading
+      const timeoutId = setTimeout(() => {
+        if (isLoadingSector.current) {
+          console.error('AppLayout: Sector loading timeout after 10 seconds');
+          trackLoading('sector-loading', false);
+          isLoadingSector.current = false;
+          addError(new Error('Sector loading timeout - check network connection'), 'AppLayout.loadSectorsForSite');
+        }
+      }, 10000);
+      
+      loadSectorsForSite(currentSiteId)
+        .catch((error) => {
+          // Don't log 403/404 errors as they're expected for inactive sites
+          if (error.status !== 403 && error.status !== 404) {
+            console.error('AppLayout: Error loading sectors:', error);
+            addError(error, 'AppLayout.loadSectorsForSite');
+          }
+        })
+        .finally(() => {
+          clearTimeout(timeoutId);
+          trackLoading('sector-loading', false);
+          isLoadingSector.current = false;
+        });
+    } else if (currentSiteId && !activeSite?.is_active) {
+      // Site is inactive - clear sectors and reset lastSiteId
+      lastSiteId.current = null;
+      const { useSectorStore } = require('../store/sectorStore');
+      useSectorStore.getState().clearActiveSector();
+    }
+  }, [activeSite?.id, activeSite?.is_active]); // Depend on both ID and is_active
+
+  // Refresh user data on mount and periodically to get latest account/plan changes
+  // This ensures changes are reflected immediately without requiring re-login
+  useEffect(() => {
+    if (!isAuthenticated) return;
+    
+    const refreshUserData = async () => {
+      const now = Date.now();
+      // Throttle: only refresh if last refresh was more than 30 seconds ago
+      if (now - lastUserRefresh.current < 30000) return;
+      
+      try {
+        lastUserRefresh.current = now;
+        await refreshUser();
+      } catch (error) {
+        // Silently fail - user might still be authenticated
+        console.debug('User data refresh failed (non-critical):', error);
+      }
+    };
+    
+    // Refresh on mount
+    refreshUserData();
+    
+    // Refresh when window becomes visible (user switches back to tab)
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'visible') {
+        refreshUserData();
+      }
+    };
+    
+    // Refresh on window focus
+    const handleFocus = () => {
+      refreshUserData();
+    };
+    
+    // Periodic refresh every 2 minutes
+    const intervalId = setInterval(refreshUserData, 120000);
+    
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    window.addEventListener('focus', handleFocus);
+    
+    return () => {
+      clearInterval(intervalId);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+      window.removeEventListener('focus', handleFocus);
+    };
+  }, [isAuthenticated, refreshUser]);
+
+  // Listen for debug toggle changes
+  useEffect(() => {
+    const saved = localStorage.getItem('debug_resource_tracking_enabled');
+    setDebugEnabled(saved === 'true');
+    
+    const handleToggle = (e: Event) => {
+      const customEvent = e as CustomEvent;
+      setDebugEnabled(customEvent.detail);
+    };
+    
+    window.addEventListener('debug-resource-tracking-toggle', handleToggle);
+    return () => {
+      window.removeEventListener('debug-resource-tracking-toggle', handleToggle);
+    };
+  }, []);
+
+  return (
+    <div className="min-h-screen xl:flex">
+      <div>
+        <AppSidebar />
+        <Backdrop />
+      </div>
+      <div
+        className={`flex-1 transition-all duration-300 ease-in-out ${
+          isExpanded || isHovered ? "lg:ml-[290px]" : "lg:ml-[90px]"
+        } ${isMobileOpen ? "ml-0" : ""} w-full max-w-full min-[1440px]:max-w-[90%]`}
+      >
+        <AppHeader />
+        <div className="p-4 pb-20 md:p-6 md:pb-24">
+          <Outlet />
+        </div>
+        {/* Resource Debug Overlay - Only visible when enabled by admin */}
+        <ResourceDebugOverlay enabled={debugEnabled} />
+      </div>
+    </div>
+  );
+};
+
+const AppLayout: React.FC = () => {
+  return (
+    <SidebarProvider>
+      <LayoutContent />
+    </SidebarProvider>
+  );
+};
+
+export default AppLayout;