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 Typography from "@mui/material/Typography";
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";
interface NavigationItem {
  icon: React.ReactNode;
  label: string;
  path: string;
  isHidden?: boolean;
  children?: NavigationItem[];
}

interface Props {
  abilities?: string[]
}

const NavigationContent: React.FC<Props> = ({ abilities }) => {
  const navigationItems: NavigationItem[] = [
    { icon: <WorkHistory />, label: "User Workspace", path: "/home" },
    {
      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",
        }
      ],
    },
    {
      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/ProjectPLReport"},
        {icon: <Analytics />, label:"Financial Status Report", path: "/analytics/FinancialStatusReport"},
        {icon: <Analytics />, label:"EX02 - Project Cash Flow Report", path: "/analytics/EX02ProjectCashFlowReport"},
    ],
  },
    {
      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: <Holiday />, label: "Holiday", path: "/settings/holiday" },
      ],
    },
  ];

  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 !== 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;