tsms/src/components/NavigationContent/NavigationContent.tsx

import Divider from "@mui/material/Divider";
import Box from "@mui/material/Box";
import React from "react";
import List from "@mui/material/List";
import ListItemButton from "@mui/material/ListItemButton";
import ListItemText from "@mui/material/ListItemText";
import ListItemIcon from "@mui/material/ListItemIcon";
import WorkHistory from "@mui/icons-material/WorkHistory";
import Dashboard from "@mui/icons-material/Dashboard";
import SummarizeIcon from "@mui/icons-material/Summarize";
import PaymentsIcon from "@mui/icons-material/Payments";
import AccountTreeIcon from "@mui/icons-material/AccountTree";
import RequestQuote from "@mui/icons-material/RequestQuote";
import PeopleIcon from "@mui/icons-material/People";
import Task from "@mui/icons-material/Task";
import Assignment from "@mui/icons-material/Assignment";
import Settings from "@mui/icons-material/Settings";
import Analytics from "@mui/icons-material/Analytics";
import Payments from "@mui/icons-material/Payments";
import Staff from "@mui/icons-material/PeopleAlt";
import Company from "@mui/icons-material/Store";
import Department from "@mui/icons-material/Diversity3";
import Position from "@mui/icons-material/Paragliding";
import Salary from "@mui/icons-material/AttachMoney";
import Team from "@mui/icons-material/Paragliding";
import Holiday from "@mui/icons-material/CalendarMonth";
import { useTranslation } from "react-i18next";
import { usePathname } from "next/navigation";
import Link from "next/link";
import { NAVIGATION_CONTENT_WIDTH } from "@/config/uiConfig";
import Logo from "../Logo";
import GroupIcon from "@mui/icons-material/Group";
import BusinessIcon from "@mui/icons-material/Business";
import ViewWeekIcon from "@mui/icons-material/ViewWeek";
import ManageAccountsIcon from "@mui/icons-material/ManageAccounts";
import EmojiEventsIcon from "@mui/icons-material/EmojiEvents";
import {
  GENERATE_REPORTS,
  MAINTAIN_MASTERDATA,
  MAINTAIN_USER,
  VIEW_MASTERDATA,
  VIEW_USER,
} from "@/middleware";
import { SessionWithAbilities } from "../AppBar/NavigationToggle";
import { authOptions } from "@/config/authConfig";
import { getServerSession } from "next-auth";
import useIsMobile from "@/app/utils/useIsMobile";
interface NavigationItem {
  icon: React.ReactNode;
  label: string;
  path: string;
  isHidden?: boolean;
  showOnMobile?: boolean;
  children?: NavigationItem[];
}

interface Props {
  abilities?: string[];
}

const NavigationContent: React.FC<Props> = ({ abilities }) => {
  const navigationItems: NavigationItem[] = [
    {
      icon: <WorkHistory />,
      label: "User Workspace",
      path: "/home",
      showOnMobile: true,
    },
    {
      icon: <Dashboard />,
      label: "Dashboard",
      path: "",
      children: [
        {
          icon: <SummarizeIcon />,
          label: "Financial Summary",
          path: "/dashboard/ProjectFinancialSummary",
        },
        {
          icon: <PaymentsIcon />,
          label: "Company / Team Cash Flow",
          path: "/dashboard/CompanyTeamCashFlow",
        },
        {
          icon: <PaymentsIcon />,
          label: "Project Cash Flow",
          path: "/dashboard/ProjectCashFlow",
        },
        {
          icon: <AccountTreeIcon />,
          label: "Project Status by Client",
          path: "/dashboard/ProjectStatusByClient",
        },
        {
          icon: <AccountTreeIcon />,
          label: "Project Status by Team",
          path: "/dashboard/ProjectStatusByTeam",
        },
        {
          icon: <PeopleIcon />,
          label: "Staff Utilization",
          path: "/dashboard/StaffUtilization",
        },
        {
          icon: <ViewWeekIcon />,
          label: "Project Resource Summary",
          path: "/dashboard/ProjectResourceSummary",
        },
      ],
    },
    // No Claim function in Breaur, will be implement later
    // {
    //   icon: <RequestQuote />,
    //   label: "Staff Reimbursement",
    //   path: "/staffReimbursement",
    //   children: [
    //     {
    //       icon: <RequestQuote />,
    //       label: "Claim Approval",
    //       path: "/staffReimbursement/ClaimApproval",
    //     },
    //     {
    //       icon: <RequestQuote />,
    //       label: "Claim Summary",
    //       path: "/staffReimbursement/ClaimSummary",
    //     },
    //   ],
    // },
    { icon: <Assignment />, label: "Project Management", path: "/projects" },
    { icon: <Task />, label: "Task Template", path: "/tasks" },
    { icon: <Payments />, label: "Invoice", path: "/invoice" },
    {
      icon: <Analytics />,
      label: "Analysis Report",
      path: "",
      isHidden: ![GENERATE_REPORTS].some((ability) =>
        abilities!.includes(ability),
      ),
      children: [
        {
          icon: <Analytics />,
          label: "Late Start Report",
          path: "/analytics/LateStartReport",
        },
        {
          icon: <Analytics />,
          label: "Delay Report",
          path: "/analytics/DelayReport",
        },
        {
          icon: <Analytics />,
          label: "Resource Overconsumption Report",
          path: "/analytics/ResourceOverconsumptionReport",
        },
        {
          icon: <Analytics />,
          label: "Cost and Expense Report",
          path: "/analytics/CostandExpenseReport",
        },
        {
          icon: <Analytics />,
          label: "Completion Report",
          path: "/analytics/ProjectCompletionReport",
        },
        {
          icon: <Analytics />,
          label: "Completion Report with Outstanding Un-billed Hours Report",
          path: "/analytics/ProjectCompletionReportWO",
        },
        {
          icon: <Analytics />,
          label: "Project Claims Report",
          path: "/analytics/ProjectClaimsReport",
        },
        {
          icon: <Analytics />,
          label: "Project P&L Report",
          path: "/analytics/ProjectPandLReport",
        },
        {
          icon: <Analytics />,
          label: "Financial Status Report",
          path: "/analytics/FinancialStatusReport",
        },
        {
          icon: <Analytics />,
          label: "Project Cash Flow Report",
          path: "/analytics/ProjectCashFlowReport",
        },
        {
          icon: <Analytics />,
          label: "Staff Monthly Work Hours Analysis Report",
          path: "/analytics/StaffMonthlyWorkHoursAnalysisReport",
        },
      ],
    },
    {
      icon: <Settings />,
      label: "Setting",
      path: "",
      isHidden: ![VIEW_MASTERDATA, MAINTAIN_MASTERDATA].some((ability) =>
        abilities!.includes(ability),
      ),
      children: [
        { icon: <GroupIcon />, label: "Client", path: "/settings/customer" },
        {
          icon: <BusinessIcon />,
          label: "Subsidiary",
          path: "/settings/subsidiary",
        },
        { icon: <Staff />, label: "Staff", path: "/settings/staff" },
        { icon: <Company />, label: "Company", path: "/settings/company" },
        { icon: <EmojiEventsIcon />, label: "Skill", path: "/settings/skill" },
        {
          icon: <Department />,
          label: "Department",
          path: "/settings/department",
        },
        { icon: <Position />, label: "Position", path: "/settings/position" },
        { icon: <Salary />, label: "Salary", path: "/settings/salary" },
        { icon: <Team />, label: "Team", path: "/settings/team" },
        // { icon: <ManageAccountsIcon />, label: "User", path: "/settings/user" },
        {
          icon: <ManageAccountsIcon />,
          label: "User Group",
          path: "/settings/group",
        },
        { icon: <Holiday />, label: "Holiday", path: "/settings/holiday" },
      ],
    },
  ];

  const isMobile = useIsMobile();

  const { t } = useTranslation("common");
  const pathname = usePathname();
  const [openItems, setOpenItems] = React.useState<string[]>([]);
  const toggleItem = (label: string) => {
    setOpenItems((prevOpenItems) =>
      prevOpenItems.includes(label)
        ? prevOpenItems.filter((item) => item !== label)
        : [...prevOpenItems, label],
    );
  };

  const renderNavigationItem = (item: NavigationItem) => {
    const isOpen = openItems.includes(item.label);

    return (
      <Box
        key={`${item.label}-${item.path}`}
        component={Link}
        href={item.path}
        sx={{ textDecoration: "none", color: "inherit" }}
      >
        <ListItemButton
          selected={pathname.includes(item.label)}
          onClick={() => item.children && toggleItem(item.label)}
        >
          <ListItemIcon>{item.icon}</ListItemIcon>
          <ListItemText primary={t(item.label)} />
        </ListItemButton>
        {item.children && isOpen && (
          <List sx={{ pl: 2 }}>
            {item.children.map((child) => renderNavigationItem(child))}
          </List>
        )}
      </Box>
    );
  };

  return (
    <Box sx={{ width: NAVIGATION_CONTENT_WIDTH }}>
      <Box sx={{ p: 3, display: "flex" }}>
        <Logo height={60} />
        {/* <button className="float-right bg-transparent border-transparent" >
          <ArrowCircleLeftRoundedIcon className="text-slate-400 hover:text-blue-400 hover:cursor-pointer " style={{ fontSize: '35px' }} />
        </button> */}
      </Box>
      <Divider />
      <List component="nav">
        {navigationItems
          .filter(
            (item) => !item.isHidden && (isMobile ? item.showOnMobile : true),
          )
          .map((item) => renderNavigationItem(item))}
        {/* {navigationItems.map(({ icon, label, path }, index) => {
          return (
            <Box
              key={`${label}-${index}`}
              component={Link}
              href={path}
              sx={{ textDecoration: "none", color: "inherit" }}
            >
              <ListItemButton selected={pathname.includes(path)}>
                <ListItemIcon>{icon}</ListItemIcon>
                <ListItemText primary={t(label)} />
              </ListItemButton>
            </Box>
          );
        })} */}
      </List>
    </Box>
  );
};

export default NavigationContent;