Tola Leng
69 lines
2.4 KiB
TypeScript
69 lines
2.4 KiB
TypeScript
|
|
import React, { useState, useEffect } from "react";
|
|
import { Header } from "@/components/dashboard/Header";
|
|
import { Sidebar } from "@/components/dashboard/Sidebar";
|
|
import { authService } from "@/services/authService";
|
|
import { useNavigate, useLocation } from "react-router-dom";
|
|
import GeneralSettingsPanel from "@/components/settings/GeneralSettings";
|
|
import UserManagement from "@/components/settings/user-management";
|
|
import { NotificationSettings } from "@/components/settings/notification-settings";
|
|
import { AlertsTemplates } from "@/components/settings/alerts-templates";
|
|
import { AboutSystem } from "@/components/settings/about-system";
|
|
|
|
const Settings = () => {
|
|
// State for sidebar collapse functionality
|
|
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
|
const toggleSidebar = () => setSidebarCollapsed(prev => !prev);
|
|
|
|
// Get current user
|
|
const currentUser = authService.getCurrentUser();
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
|
|
// Get the panel from URL query params
|
|
const queryParams = new URLSearchParams(location.search);
|
|
const panelParam = queryParams.get('panel');
|
|
|
|
// State for active settings panel
|
|
const [activePanel, setActivePanel] = useState<string>(panelParam || "general");
|
|
|
|
// Update active panel when URL changes
|
|
useEffect(() => {
|
|
const panel = queryParams.get('panel');
|
|
if (panel) {
|
|
setActivePanel(panel);
|
|
} else {
|
|
setActivePanel("general");
|
|
}
|
|
}, [location.search]);
|
|
|
|
// Handle logout
|
|
const handleLogout = () => {
|
|
authService.logout();
|
|
navigate("/login");
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-screen bg-background text-foreground">
|
|
<Sidebar collapsed={sidebarCollapsed} />
|
|
<div className="flex flex-col flex-1 overflow-hidden">
|
|
<Header
|
|
currentUser={currentUser}
|
|
onLogout={handleLogout}
|
|
sidebarCollapsed={sidebarCollapsed}
|
|
toggleSidebar={toggleSidebar}
|
|
/>
|
|
<div className="flex-1 overflow-auto p-6 space-y-6">
|
|
{activePanel === "general" && <GeneralSettingsPanel />}
|
|
{activePanel === "users" && <UserManagement />}
|
|
{activePanel === "notifications" && <NotificationSettings />}
|
|
{activePanel === "templates" && <AlertsTemplates />}
|
|
{activePanel === "about" && <AboutSystem />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Settings;
|