From d7da8750c1f691cc4c3081a8d79ff067f9ae4146 Mon Sep 17 00:00:00 2001 From: rozita-hasani Date: Mon, 17 Mar 2025 11:03:01 +0100 Subject: [PATCH] refactor: update navigation item and sidebar --- src/components/sidebar/Sidebar.tsx | 87 ++++++++---------------------- src/core/types/NavigationItem.ts | 69 ++++++++++++++++++++++++ src/core/types/common.ts | 5 -- src/core/types/country.ts | 5 +- 4 files changed, 95 insertions(+), 71 deletions(-) create mode 100644 src/core/types/NavigationItem.ts diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 0f3716e..056825f 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -1,43 +1,28 @@ import React, {useContext, useState} from 'react'; import {Link, useLocation} from 'react-router-dom'; -import {Building, Calendar, CalendarCheck, Home, Settings, TreePalm, User, Users} from 'lucide-react'; import {UserContext} from "@/contexts/UserContext.tsx"; import SidebarAccountDropdown from "@/components/sidebar/SidebarAccountDropdown.tsx"; import Logo from "@/components/icon/Logo.tsx"; import {NotificationBell} from "@/modules/notification/components/NotificationBell.tsx"; import {UserRole} from "@/core/types/enum.ts"; +import {NavigationItem, navigationItems} from "@/core/types/NavigationItem.ts"; -const navigationItems = { - main: [ - {name: "Home", href: "/", icon: Home}, - {name: "Calendar", href: "/calendar", icon: Calendar}, - {name: "Settings", href: "/settings", icon: Settings}, - ], - admin: [ - {name: "Leaves", href: "/leaves", icon: CalendarCheck}, - {name: "Organization", href: "/organization", icon: Building}, - {name: "Leave Policy", href: "/leaves/policies", icon: TreePalm}, - {name: "Users", href: "/users", icon: User}, - {name: "Teams", href: "/teams", icon: Users}, - ], - teamAdmin: [ - {name: "Leaves", href: "/leaves", icon: CalendarCheck}, - {name: "Users", href: "/users", icon: User}, - ], -}; - +const getAccessibleNavigationItems = (role: UserRole): NavigationItem[] => { + return navigationItems.filter(item => item.accessLevel.includes(role)) +} export default function Sidebar() { const [selectedOption, setSelectedOption] = useState(''); const location = useLocation(); const {user} = useContext(UserContext); + const accessibleItems = user ? getAccessibleNavigationItems(user.role) : []; const handleNavigation = (path: string) => { setSelectedOption(path); }; - const isNavigationActive = (href: string) => { - return location.pathname === href || selectedOption === href; + const isNavigationActive = (path: string) => { + return location.pathname === path || selectedOption === path; }; return ( @@ -52,23 +37,9 @@ export default function Sidebar() { -
- - {user?.role === UserRole.ORGANIZATION_ADMIN && ( - - )} - {user?.role === UserRole.TEAM_ADMIN && ( - - )} -
+ - + @@ -77,41 +48,27 @@ export default function Sidebar() { type NavigationSectionProps = { title?: string; - items: { name: string, href: string, icon: React.ComponentType> }[]; - isNavigationActive: (href: string) => boolean; + items: NavigationItem[]; + isNavigationActive: (path: string) => boolean; onClick: (page: string) => void; } function NavigationSection({title, items, isNavigationActive, onClick}: NavigationSectionProps) { return ( -
+

{title}

{items.map((item) => ( - + onClick(item.path)} + className={`group flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${ + isNavigationActive(item.path) ? "bg-indigo-50 text-indigo-600" : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"}`} + > + + {item.title} + ))}
); -} - -type NavigationLinkProps = { - href: string; - name: string; - isActive: boolean; - onClick: (page: string) => void; - icon: React.ComponentType>; -} - -function NavigationLink({href, name, icon: Icon, isActive, onClick}: NavigationLinkProps) { - return ( - onClick(href)} - className={`group flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${ - isActive ? "bg-indigo-50 text-indigo-600" : "text-gray-600 hover:bg-gray-50 hover:text-gray-900" - }`} - > - - {name} - - ); } \ No newline at end of file diff --git a/src/core/types/NavigationItem.ts b/src/core/types/NavigationItem.ts new file mode 100644 index 0000000..cdf96f4 --- /dev/null +++ b/src/core/types/NavigationItem.ts @@ -0,0 +1,69 @@ +import {Building, Calendar, CalendarCheck, Home, LucideIcon, Settings, TreePalm, User, Users} from "lucide-react"; +import {UserRole} from "@/core/types/enum.ts"; + +export interface NavigationItem { + title: string; + path: string; + icon: LucideIcon; + description: string; + accessLevel: UserRole[]; +} + +export const navigationItems: NavigationItem[] = [ + { + title: "Home", + path: "/", + icon: Home, + description: "View your leave balance, and leave history.", + accessLevel: [UserRole.ORGANIZATION_ADMIN, UserRole.TEAM_ADMIN, UserRole.EMPLOYEE] + }, + { + title: "Calendar", + path: "/calendar", + icon: Calendar, + description: "View the organization calendar with pending and approved leaves.", + accessLevel: [UserRole.ORGANIZATION_ADMIN, UserRole.TEAM_ADMIN, UserRole.EMPLOYEE] + }, + { + title: "Settings", + path: "/settings", + icon: Settings, + description: "Manage your account settings, holidays, and notification.", + accessLevel: [UserRole.ORGANIZATION_ADMIN, UserRole.TEAM_ADMIN, UserRole.EMPLOYEE] + }, + { + title: "Leaves", + path: "/leaves", + icon: CalendarCheck, + description: "Review and manage leave requests, and access user profiles.", + accessLevel: [UserRole.ORGANIZATION_ADMIN, UserRole.TEAM_ADMIN] + }, + { + title: "Organization", + path: "/organization", + icon: Building, + description: "Configure organization settings like start of the week and working days.", + accessLevel: [UserRole.ORGANIZATION_ADMIN] + }, + { + title: "Leave Policy", + path: "/leaves/policies", + icon: TreePalm, + description: "Create and manage custom leave types and policies for your organization.", + accessLevel: [UserRole.ORGANIZATION_ADMIN] + }, + { + title: "Users", + path: "/users", + icon: User, + description: "Add, edit, or remove users from the organization.", + accessLevel: [UserRole.ORGANIZATION_ADMIN, UserRole.TEAM_ADMIN] + }, + { + title: "Teams", + path: "/teams", + icon: Users, + description: "Add, edit, or remove teams from the organization.", + accessLevel: [UserRole.ORGANIZATION_ADMIN] + } +] \ No newline at end of file diff --git a/src/core/types/common.ts b/src/core/types/common.ts index ca61d38..c99c4fd 100644 --- a/src/core/types/common.ts +++ b/src/core/types/common.ts @@ -4,9 +4,4 @@ export type PagedResponse = { pageSize: number; totalPages: number; totalContents: number -} - -export type Country = { - name: string; - code: string } \ No newline at end of file diff --git a/src/core/types/country.ts b/src/core/types/country.ts index fdfa1d7..f0dd623 100644 --- a/src/core/types/country.ts +++ b/src/core/types/country.ts @@ -1,4 +1,7 @@ -import {Country} from '@/core/types/common.ts'; +export type Country = { + name: string; + code: string +} export const country: Country[] = [ {name: "Afghanistan", code: "AF"},