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 { 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';

interface NavigationItem {
  icon: React.ReactNode;
  label: string;
  path: string;
  children?: NavigationItem[];
}

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: <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: "",
    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: <Settings />, label: "Setting", path: "",
    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: <Department />, label: "Department", path: "/settings/department" },
      { icon: <Position />, label: "Position", path: "/settings/position" },
      { icon: <Salary />, label: "Salary", path: "/settings/salary" },
    ],
  },
];

const NavigationContent: React.FC = () => {
  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.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;