tsms/src/components/UserWorkspacePage/ProjectTable.tsx

import { useTranslation } from "react-i18next";
import { Props } from "./ProjectGrid";
import {
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
} from "@mui/material";
import { useMemo } from "react";
import { AssignedProject } from "@/app/api/projects";
import { manhourFormatter } from "@/app/utils/formatUtil";

interface Column {
  name: keyof AssignedProject;
  label: string;
}

const hourColumns: Array<keyof AssignedProject> = [
  "currentStaffHoursSpent",
  "currentStaffHoursSpentOther",
  "hoursAllocated",
  "hoursSpent",
  "hoursSpentOther",
];

const ProjectTable: React.FC<Props> = ({
  projects,
  maintainManagementStaffWorkspaceAbility,
  maintainNormalStaffWorkspaceAbility,
}) => {
  const { t } = useTranslation("home");
  const columns = useMemo<Column[]>(() => {
    return [
      { name: "code", label: t("Project Code") },
      { name: "name", label: t("Project Name") },
      ...(maintainManagementStaffWorkspaceAbility ||
      maintainNormalStaffWorkspaceAbility
        ? maintainManagementStaffWorkspaceAbility
          ? ([
              { name: "hoursSpent", label: t("Total Normal Hours Spent") },
              { name: "hoursSpentOther", label: t("Total Other Hours Spent") },
              { name: "hoursAllocated", label: t("Hours Allocated") },
            ] satisfies Column[])
          : ([
              {
                name: "currentStaffHoursSpent",
                label: t("Normal Hours Spent"),
              },
              {
                name: "currentStaffHoursSpentOther",
                label: t("Other Hours Spent"),
              },
            ] satisfies Column[])
        : []),
    ];
  }, [
    maintainManagementStaffWorkspaceAbility,
    maintainNormalStaffWorkspaceAbility,
    t,
  ]);

  return (
    <Paper sx={{ overflow: "hidden" }}>
      <TableContainer>
        <Table>
          <TableHead>
            <TableRow>
              {columns.map((column, idx) => (
                <TableCell key={`${column.name.toString()}-${idx}`}>
                  {column.label}
                </TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {projects.map((project) => {
              return (
                <TableRow hover tabIndex={-1} key={project.id}>
                  {columns.map((column, idx) => {
                    const columnName = column.name;
                    const needsFormatting = hourColumns.includes(columnName);

                    return (
                      <TableCell key={`${columnName.toString()}-${idx}`}>
                        {needsFormatting
                          ? manhourFormatter.format(
                              project[columnName] as number,
                            )
                          : project[columnName]?.toString()}
                      </TableCell>
                    );
                  })}
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </TableContainer>
    </Paper>
  );
};

export default ProjectTable;