diff --git a/application/src/App.tsx b/application/src/App.tsx index 46c461c..e97d3bb 100644 --- a/application/src/App.tsx +++ b/application/src/App.tsx @@ -1,137 +1,115 @@ -import { Toaster } from "@/components/ui/toaster"; -import { Toaster as Sonner } from "@/components/ui/sonner"; -import { TooltipProvider } from "@/components/ui/tooltip"; -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; -import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom"; -import { useEffect, useState } from "react"; -import { authService } from "@/services/authService"; -import { ThemeProvider } from "@/contexts/ThemeContext"; -import { LanguageProvider } from "@/contexts/LanguageContext"; +import React from 'react'; +import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { ThemeProvider } from './contexts/ThemeContext'; +import { LanguageProvider } from './contexts/LanguageContext'; +import { SidebarProvider } from './contexts/SidebarContext'; +import { ErrorBoundary } from './components/ErrorBoundary'; +import { Toaster } from './components/ui/sonner'; +import { authService } from './services/authService'; -import Login from "./pages/Login"; -import Dashboard from "./pages/Dashboard"; -import ServiceDetail from "./pages/ServiceDetail"; -import Settings from "./pages/Settings"; -import Profile from "./pages/Profile"; -import NotFound from "./pages/NotFound"; -import SslDomain from "./pages/SslDomain"; -import ScheduleIncident from "./pages/ScheduleIncident"; -import OperationalPage from "./pages/OperationalPage"; -import PublicStatusPage from "./pages/PublicStatusPage"; - -// Create a Protected route component -const ProtectedRoute = ({ children }: { children: React.ReactNode }) => { - const isAuthenticated = authService.isAuthenticated(); - - if (!isAuthenticated) { - return ; - } - - return <>{children}; -}; +// Pages +import Index from './pages/Index'; +import Login from './pages/Login'; +import Dashboard from './pages/Dashboard'; +import ServiceDetail from './pages/ServiceDetail'; +import Settings from './pages/Settings'; +import Profile from './pages/Profile'; +import SslDomain from './pages/SslDomain'; +import ScheduleIncident from './pages/ScheduleIncident'; +import OperationalPage from './pages/OperationalPage'; +import PublicStatusPage from './pages/PublicStatusPage'; +import NotFound from './pages/NotFound'; const queryClient = new QueryClient(); -const App = () => { - const [isLoading, setIsLoading] = useState(true); - - useEffect(() => { - // Check authentication status when the app loads - const checkAuth = async () => { - try { - // Just check the auth state - authService.isAuthenticated(); - } finally { - setIsLoading(false); - } - }; - - checkAuth(); - }, []); - - if (isLoading) { - return
Loading...
; - } - - return ( - - - - - - - - - } /> - } /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - {/* Public status page route */} - } /> - {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */} - } /> - - - - - - - ); +// Protected Route Component +const ProtectedRoute = ({ children }: { children: React.ReactNode }) => { + const isAuthenticated = authService.isAuthenticated(); + return isAuthenticated ? <>{children} : ; }; +function App() { + return ( + + + + + + +
+ + } /> + } /> + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + } /> + } /> + + +
+ + + + + + + ); +} + export default App; \ No newline at end of file diff --git a/application/src/components/ErrorBoundary.tsx b/application/src/components/ErrorBoundary.tsx new file mode 100644 index 0000000..6a8ced8 --- /dev/null +++ b/application/src/components/ErrorBoundary.tsx @@ -0,0 +1,49 @@ + +import React from 'react'; + +interface ErrorBoundaryState { + hasError: boolean; + error?: Error; +} + +interface ErrorBoundaryProps { + children: React.ReactNode; +} + +export class ErrorBoundary extends React.Component { + constructor(props: ErrorBoundaryProps) { + super(props); + this.state = { hasError: false }; + } + + static getDerivedStateFromError(error: Error): ErrorBoundaryState { + return { hasError: true, error }; + } + + componentDidCatch(error: Error, errorInfo: React.ErrorInfo) { + console.error('ErrorBoundary caught an error:', error, errorInfo); + } + + render() { + if (this.state.hasError) { + return ( +
+
+

Something went wrong

+

+ {this.state.error?.message || 'An unexpected error occurred'} +

+ +
+
+ ); + } + + return this.props.children; + } +} \ No newline at end of file diff --git a/application/src/components/dashboard/Sidebar.tsx b/application/src/components/dashboard/Sidebar.tsx index f543936..4d15f9d 100644 --- a/application/src/components/dashboard/Sidebar.tsx +++ b/application/src/components/dashboard/Sidebar.tsx @@ -1,140 +1,22 @@ -import { Globe, Boxes, Radar, Calendar, BarChart2, LineChart, FileText, Settings, User, UserCog, Bell, FileClock, Database, RefreshCw, Info, ChevronDown, BookOpen } from "lucide-react"; + +import React from "react"; import { useTheme } from "@/contexts/ThemeContext"; -import { Link, useLocation } from "react-router-dom"; -import { useState, useEffect } from "react"; -import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"; -import { ScrollArea } from "@/components/ui/scroll-area"; -import { useLanguage } from "@/contexts/LanguageContext"; +import { SidebarHeader } from "./sidebar/SidebarHeader"; +import { MainNavigation } from "./sidebar/MainNavigation"; +import { SettingsPanel } from "./sidebar/SettingsPanel"; interface SidebarProps { collapsed: boolean; } -export const Sidebar = ({ - collapsed -}: SidebarProps) => { - const { - theme - } = useTheme(); - const { - t - } = useLanguage(); - const location = useLocation(); - const [activeSettingsItem, setActiveSettingsItem] = useState("general"); - const [settingsPanelOpen, setSettingsPanelOpen] = useState(false); - - // Update active settings item based on URL - useEffect(() => { - if (location.pathname === '/settings') { - const params = new URLSearchParams(location.search); - const panel = params.get('panel'); - if (panel) { - setActiveSettingsItem(panel); - } - } - }, [location]); +export const Sidebar = ({ collapsed }: SidebarProps) => { + const { theme } = useTheme(); - const handleSettingsItemClick = (item: string) => { - setActiveSettingsItem(item); - }; - - const getMenuItemClasses = (isActive: boolean) => { - return `p-2 ${isActive ? theme === 'dark' ? 'bg-[#1a1a1a]' : 'bg-sidebar-accent' : `hover:${theme === 'dark' ? 'bg-[#1a1a1a]' : 'bg-sidebar-accent'}`} rounded-lg flex items-center`; - }; - - // New larger icon size for the main menu - const mainIconSize = "h-6 w-6"; - - return
-
-
- C -
- {!collapsed &&

CheckCle App

} -
- - - - {!collapsed &&
- - -
- {t("settingPanel")} -
-
- - -
- - - -
- -
- handleSettingsItemClick('general')}> - - {t("generalSettings")} - - handleSettingsItemClick('users')}> - - {t("userManagement")} - - handleSettingsItemClick('notifications')}> - - {t("notificationSettings")} - - handleSettingsItemClick('templates')}> - - {t("alertsTemplates")} - - handleSettingsItemClick('data-retention')}> - - {t("dataRetention")} - - handleSettingsItemClick('about')}> - - {t("aboutSystem")} - -
- -
- - -
} - - {collapsed &&
- - - -
} -
; + return ( +
+ + + +
+ ); }; \ No newline at end of file diff --git a/application/src/components/dashboard/sidebar/MainNavigation.tsx b/application/src/components/dashboard/sidebar/MainNavigation.tsx new file mode 100644 index 0000000..9b4e103 --- /dev/null +++ b/application/src/components/dashboard/sidebar/MainNavigation.tsx @@ -0,0 +1,27 @@ + +import React from "react"; +import { MenuItem } from "./MenuItem"; +import { mainMenuItems } from "./navigationData"; + +interface MainNavigationProps { + collapsed: boolean; +} + +export const MainNavigation: React.FC = ({ collapsed }) => { + return ( + + ); +}; \ No newline at end of file diff --git a/application/src/components/dashboard/sidebar/MenuItem.tsx b/application/src/components/dashboard/sidebar/MenuItem.tsx new file mode 100644 index 0000000..019d5ad --- /dev/null +++ b/application/src/components/dashboard/sidebar/MenuItem.tsx @@ -0,0 +1,54 @@ + +import React from "react"; +import { useLocation, useNavigate } from "react-router-dom"; +import { useTheme } from "@/contexts/ThemeContext"; +import { useLanguage } from "@/contexts/LanguageContext"; +import { LucideIcon } from "lucide-react"; + +interface MenuItemProps { + id: string; + path: string | null; + icon: LucideIcon; + translationKey: string; + color: string; + hasNavigation: boolean; + collapsed: boolean; +} + +export const MenuItem: React.FC = ({ + id, + path, + icon: Icon, + translationKey, + color, + hasNavigation, + collapsed +}) => { + const { theme } = useTheme(); + const { t } = useLanguage(); + const location = useLocation(); + const navigate = useNavigate(); + + const handleClick = (e: React.MouseEvent) => { + e.preventDefault(); + e.stopPropagation(); + + if (hasNavigation && path) { + // Use navigate instead of window.location to prevent full page reload + navigate(path, { replace: false }); + } + }; + + const isActive = path && location.pathname === path; + const mainIconSize = "h-6 w-6"; + + return ( +
+ + {!collapsed && {t(translationKey)}} +
+ ); +}; \ No newline at end of file diff --git a/application/src/components/dashboard/sidebar/SettingsPanel.tsx b/application/src/components/dashboard/sidebar/SettingsPanel.tsx new file mode 100644 index 0000000..2e311c3 --- /dev/null +++ b/application/src/components/dashboard/sidebar/SettingsPanel.tsx @@ -0,0 +1,100 @@ + +import React, { useState, useEffect } from "react"; +import { useLocation, useNavigate } from "react-router-dom"; +import { useTheme } from "@/contexts/ThemeContext"; +import { useLanguage } from "@/contexts/LanguageContext"; +import { Settings, ChevronDown } from "lucide-react"; +import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"; +import { ScrollArea } from "@/components/ui/scroll-area"; +import { settingsMenuItems } from "./navigationData"; + +interface SettingsPanelProps { + collapsed: boolean; +} + +export const SettingsPanel: React.FC = ({ collapsed }) => { + const { theme } = useTheme(); + const { t } = useLanguage(); + const location = useLocation(); + const navigate = useNavigate(); + const [activeSettingsItem, setActiveSettingsItem] = useState("general"); + const [settingsPanelOpen, setSettingsPanelOpen] = useState(false); + + // Update active settings item based on URL + useEffect(() => { + if (location.pathname === '/settings') { + const params = new URLSearchParams(location.search); + const panel = params.get('panel'); + if (panel) { + setActiveSettingsItem(panel); + } + } + }, [location]); + + const handleSettingsItemClick = (item: string) => { + setActiveSettingsItem(item); + }; + + const handleMenuItemClick = (path: string, event: React.MouseEvent) => { + event.preventDefault(); + event.stopPropagation(); + // Use navigate instead of window.location to prevent full page reload + navigate(path, { replace: false }); + }; + + const getMenuItemClasses = (isActive: boolean) => { + return `p-2 ${isActive ? theme === 'dark' ? 'bg-[#1a1a1a]' : 'bg-sidebar-accent' : `hover:${theme === 'dark' ? 'bg-[#1a1a1a]' : 'bg-sidebar-accent'}`} rounded-lg flex items-center`; + }; + + if (collapsed) { + const mainIconSize = "h-6 w-6"; + return ( +
+
handleMenuItemClick('/settings', e)} + className="cursor-pointer" + > + +
+
+ ); + } + + return ( +
+ + +
+ {t("settingPanel")} +
+
+ + +
+ + + +
+ +
+ {settingsMenuItems.map((item) => ( +
{ + handleMenuItemClick(`/settings?panel=${item.id}`, e); + handleSettingsItemClick(item.id); + }} + > + + {t(item.translationKey)} +
+ ))} +
+ +
+ + +
+ ); +}; \ No newline at end of file diff --git a/application/src/components/dashboard/sidebar/SidebarHeader.tsx b/application/src/components/dashboard/sidebar/SidebarHeader.tsx new file mode 100644 index 0000000..4c0564b --- /dev/null +++ b/application/src/components/dashboard/sidebar/SidebarHeader.tsx @@ -0,0 +1,20 @@ + +import React from "react"; +import { useTheme } from "@/contexts/ThemeContext"; + +interface SidebarHeaderProps { + collapsed: boolean; +} + +export const SidebarHeader: React.FC = ({ collapsed }) => { + const { theme } = useTheme(); + + return ( +
+
+ C +
+ {!collapsed &&

CheckCle App

} +
+ ); +}; \ No newline at end of file diff --git a/application/src/components/dashboard/sidebar/index.ts b/application/src/components/dashboard/sidebar/index.ts new file mode 100644 index 0000000..ec3edb4 --- /dev/null +++ b/application/src/components/dashboard/sidebar/index.ts @@ -0,0 +1,6 @@ + +export { SidebarHeader } from './SidebarHeader'; +export { MainNavigation } from './MainNavigation'; +export { MenuItem } from './MenuItem'; +export { SettingsPanel } from './SettingsPanel'; +export { mainMenuItems, settingsMenuItems } from './navigationData'; \ No newline at end of file diff --git a/application/src/components/dashboard/sidebar/navigationData.ts b/application/src/components/dashboard/sidebar/navigationData.ts new file mode 100644 index 0000000..486e395 --- /dev/null +++ b/application/src/components/dashboard/sidebar/navigationData.ts @@ -0,0 +1,94 @@ + +import { Globe, Boxes, Radar, Calendar, BarChart2, LineChart, FileText, Settings, User, Bell, Database, Info, BookOpen } from "lucide-react"; + +export const mainMenuItems = [ + { + id: 'uptime-monitoring', + path: '/dashboard', + icon: Globe, + translationKey: 'uptimeMonitoring', + color: 'text-purple-400', + hasNavigation: true + }, + { + id: 'instance-monitoring', + path: null, + icon: Boxes, + translationKey: 'instanceMonitoring', + color: 'text-blue-400', + hasNavigation: false + }, + { + id: 'ssl-domain', + path: '/ssl-domain', + icon: Radar, + translationKey: 'sslDomain', + color: 'text-cyan-400', + hasNavigation: true + }, + { + id: 'schedule-incident', + path: '/schedule-incident', + icon: Calendar, + translationKey: 'scheduleIncident', + color: 'text-emerald-400', + hasNavigation: true + }, + { + id: 'operational-page', + path: '/operational-page', + icon: BarChart2, + translationKey: 'operationalPage', + color: 'text-amber-400', + hasNavigation: true + }, + { + id: 'reports', + path: null, + icon: LineChart, + translationKey: 'reports', + color: 'text-rose-400', + hasNavigation: false + }, + { + id: 'api-documentation', + path: null, + icon: FileText, + translationKey: 'apiDocumentation', + color: 'text-indigo-400', + hasNavigation: false + } +]; + +export const settingsMenuItems = [ + { + id: 'general', + icon: Settings, + translationKey: 'generalSettings' + }, + { + id: 'users', + icon: User, + translationKey: 'userManagement' + }, + { + id: 'notifications', + icon: Bell, + translationKey: 'notificationSettings' + }, + { + id: 'templates', + icon: BookOpen, + translationKey: 'alertsTemplates' + }, + { + id: 'data-retention', + icon: Database, + translationKey: 'dataRetention' + }, + { + id: 'about', + icon: Info, + translationKey: 'aboutSystem' + } +]; \ No newline at end of file diff --git a/application/src/contexts/SidebarContext.tsx b/application/src/contexts/SidebarContext.tsx new file mode 100644 index 0000000..cfab360 --- /dev/null +++ b/application/src/contexts/SidebarContext.tsx @@ -0,0 +1,38 @@ + +import React, { createContext, useContext, useState } from 'react'; + +interface SidebarContextType { + sidebarCollapsed: boolean; + setSidebarCollapsed: (collapsed: boolean) => void; + toggleSidebar: () => void; +} + +const SidebarContext = createContext(undefined); + +export const SidebarProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { + const [sidebarCollapsed, setSidebarCollapsed] = useState(false); + + const toggleSidebar = () => { + setSidebarCollapsed(prev => !prev); + }; + + const value = { + sidebarCollapsed, + setSidebarCollapsed, + toggleSidebar + }; + + return ( + + {children} + + ); +}; + +export const useSidebar = () => { + const context = useContext(SidebarContext); + if (context === undefined) { + throw new Error('useSidebar must be used within a SidebarProvider'); + } + return context; +}; \ No newline at end of file diff --git a/application/src/pages/Dashboard.tsx b/application/src/pages/Dashboard.tsx index 81f0c04..34437ce 100644 --- a/application/src/pages/Dashboard.tsx +++ b/application/src/pages/Dashboard.tsx @@ -1,5 +1,5 @@ -import React, { useEffect, useState } from "react"; +import React, { useEffect } from "react"; import { useQuery } from "@tanstack/react-query"; import { Header } from "@/components/dashboard/Header"; import { Sidebar } from "@/components/dashboard/Sidebar"; @@ -8,11 +8,11 @@ import { serviceService } from "@/services/serviceService"; import { authService } from "@/services/authService"; import { useNavigate } from "react-router-dom"; import { LoadingState } from "@/components/services/LoadingState"; +import { useSidebar } from "@/contexts/SidebarContext"; const Dashboard = () => { - // State for sidebar collapse functionality - const [sidebarCollapsed, setSidebarCollapsed] = useState(false); - const toggleSidebar = () => setSidebarCollapsed(prev => !prev); + // Use shared sidebar state + const { sidebarCollapsed, toggleSidebar } = useSidebar(); // Get current user const currentUser = authService.getCurrentUser(); @@ -71,4 +71,4 @@ const Dashboard = () => { ); }; -export default Dashboard; +export default Dashboard; \ No newline at end of file diff --git a/application/src/pages/Index.tsx b/application/src/pages/Index.tsx index 52ea22c..0f01835 100644 --- a/application/src/pages/Index.tsx +++ b/application/src/pages/Index.tsx @@ -1,14 +1,29 @@ -// Update this page (the content is just a fallback if you fail to update the page) + +import React, { useEffect } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { authService } from '@/services/authService'; const Index = () => { + const navigate = useNavigate(); + + useEffect(() => { + // Check if user is authenticated and redirect accordingly + if (authService.isAuthenticated()) { + navigate('/dashboard', { replace: true }); + } else { + navigate('/login', { replace: true }); + } + }, [navigate]); + + // Show a loading state while redirecting return ( -
+
-

Welcome to Your Blank App

-

Start building your amazing project here!

+
+

Loading...

); }; -export default Index; +export default Index; \ No newline at end of file diff --git a/application/src/pages/OperationalPage.tsx b/application/src/pages/OperationalPage.tsx index dc44a43..ccfd3ed 100644 --- a/application/src/pages/OperationalPage.tsx +++ b/application/src/pages/OperationalPage.tsx @@ -1,15 +1,15 @@ -import React, { useState } from "react"; +import React from "react"; import { Header } from "@/components/dashboard/Header"; import { Sidebar } from "@/components/dashboard/Sidebar"; import { OperationalPageContent } from '@/components/operational-page/OperationalPageContent'; import { authService } from "@/services/authService"; import { useNavigate } from "react-router-dom"; +import { useSidebar } from "@/contexts/SidebarContext"; const OperationalPage = () => { - // State for sidebar collapse functionality - const [sidebarCollapsed, setSidebarCollapsed] = useState(false); - const toggleSidebar = () => setSidebarCollapsed(prev => !prev); + // Use shared sidebar state + const { sidebarCollapsed, toggleSidebar } = useSidebar(); // Get current user const currentUser = authService.getCurrentUser(); diff --git a/application/src/pages/Profile.tsx b/application/src/pages/Profile.tsx index 0ba6aed..7126fb2 100644 --- a/application/src/pages/Profile.tsx +++ b/application/src/pages/Profile.tsx @@ -9,11 +9,11 @@ import { ProfileContent } from "@/components/profile/ProfileContent"; import { User } from "@/services/userService"; import { useToast } from "@/hooks/use-toast"; import { Loader2 } from "lucide-react"; +import { useSidebar } from "@/contexts/SidebarContext"; const Profile = () => { - // State for sidebar collapse functionality - const [sidebarCollapsed, setSidebarCollapsed] = useState(false); - const toggleSidebar = () => setSidebarCollapsed(prev => !prev); + // Use shared sidebar state + const { sidebarCollapsed, toggleSidebar } = useSidebar(); // Get current user const currentUser = authService.getCurrentUser(); diff --git a/application/src/pages/ScheduleIncident.tsx b/application/src/pages/ScheduleIncident.tsx index 6adef1f..c58cb62 100644 --- a/application/src/pages/ScheduleIncident.tsx +++ b/application/src/pages/ScheduleIncident.tsx @@ -1,5 +1,5 @@ -import React, { useState, useEffect } from 'react'; +import React, { useEffect } from 'react'; import { Header } from "@/components/dashboard/Header"; import { Sidebar } from "@/components/dashboard/Sidebar"; import { useTheme } from "@/contexts/ThemeContext"; @@ -8,11 +8,11 @@ import { ScheduleIncidentContent } from "@/components/schedule-incident/Schedule import { authService } from "@/services/authService"; import { useNavigate } from "react-router-dom"; import { initMaintenanceNotifications, stopMaintenanceNotifications } from "@/services/maintenance/maintenanceNotificationService"; +import { useSidebar } from "@/contexts/SidebarContext"; const ScheduleIncident = () => { - // State for sidebar collapse functionality - const [sidebarCollapsed, setSidebarCollapsed] = useState(false); - const toggleSidebar = () => setSidebarCollapsed(prev => !prev); + // Use shared sidebar state + const { sidebarCollapsed, toggleSidebar } = useSidebar(); // Get current theme and language const { theme } = useTheme(); @@ -24,12 +24,10 @@ const ScheduleIncident = () => { // Initialize maintenance notifications useEffect(() => { - console.log("Initializing maintenance notifications"); initMaintenanceNotifications(); // Clean up on unmount return () => { - console.log("Stopping maintenance notifications"); stopMaintenanceNotifications(); }; }, []); diff --git a/application/src/pages/Settings.tsx b/application/src/pages/Settings.tsx index 6dd3516..45c2018 100644 --- a/application/src/pages/Settings.tsx +++ b/application/src/pages/Settings.tsx @@ -10,11 +10,11 @@ import { NotificationSettings } from "@/components/settings/notification-setting import { AlertsTemplates } from "@/components/settings/alerts-templates"; import { AboutSystem } from "@/components/settings/about-system"; import DataRetentionSettings from "@/components/settings/data-retention/DataRetentionSettings"; +import { useSidebar } from "@/contexts/SidebarContext"; const Settings = () => { - // State for sidebar collapse functionality - const [sidebarCollapsed, setSidebarCollapsed] = useState(false); - const toggleSidebar = () => setSidebarCollapsed(prev => !prev); + // Use shared sidebar state + const { sidebarCollapsed, toggleSidebar } = useSidebar(); // Get current user const currentUser = authService.getCurrentUser(); diff --git a/application/src/pages/SslDomain.tsx b/application/src/pages/SslDomain.tsx index cf20c3d..a7de6ee 100644 --- a/application/src/pages/SslDomain.tsx +++ b/application/src/pages/SslDomain.tsx @@ -1,3 +1,4 @@ + import React, { useEffect } from "react"; import { useQuery } from "@tanstack/react-query"; import { authService } from "@/services/authService"; @@ -8,14 +9,14 @@ import { SSLDomainContent } from "@/components/ssl-domain/SSLDomainContent"; import { LoadingState } from "@/components/services/LoadingState"; import { fetchSSLCertificates, shouldRunDailyCheck, checkAllCertificatesAndNotify } from "@/services/sslCertificateService"; import { useLanguage } from "@/contexts/LanguageContext"; +import { useSidebar } from "@/contexts/SidebarContext"; const SslDomain = () => { // Get language context for translations const { t } = useLanguage(); - // State for sidebar collapse functionality - const [sidebarCollapsed, setSidebarCollapsed] = React.useState(false); - const toggleSidebar = () => setSidebarCollapsed(prev => !prev); + // Use shared sidebar state + const { sidebarCollapsed, toggleSidebar } = useSidebar(); // Get current user const currentUser = authService.getCurrentUser();