tsms/src/components/CreateProject/ResourceCapacity.tsx

import { manhourFormatter } from "@/app/utils/formatUtil";
import {
  Box,
  Stack,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Typography,
} from "@mui/material";
import { useMemo } from "react";
import { useTranslation } from "react-i18next";

const mockItems: ResourceItem[] = [
  {
    grade: "Grade 1",
    title: "A. QS / QS Trainee",
    headcount: 20,
    totalAvailableManhours: 39520,
    loadedManhours: 3760,
    remainingAvailableManhours: 35760,
  },
  {
    grade: "Grade 2",
    title: "QS",
    headcount: 20,
    totalAvailableManhours: 39520,
    loadedManhours: 3760,
    remainingAvailableManhours: 35760,
  },
  {
    grade: "Grade 3",
    title: "Senior QS",
    headcount: 10,
    totalAvailableManhours: 19760,
    loadedManhours: 1530,
    remainingAvailableManhours: 18230,
  },
  {
    grade: "Grade 4",
    title: "A. Manager / Deputy Manager / Manager / S. Manager",
    headcount: 5,
    totalAvailableManhours: 9880,
    loadedManhours: 2760,
    remainingAvailableManhours: 7120,
  },
  {
    grade: "Grade 5",
    title: "A. Director / Deputy Director / Director",
    headcount: 20,
    totalAvailableManhours: 1976,
    loadedManhours: 374,
    remainingAvailableManhours: 1602,
  },
];

interface ResourceColumn {
  label: string;
  name: keyof ResourceItem;
}

interface ResourceItem {
  grade: string;
  title: string;
  headcount: number;
  totalAvailableManhours: number;
  loadedManhours: number;
  remainingAvailableManhours: number;
}

interface Props {
  items?: ResourceItem[];
}

const ResourceCapacity: React.FC<Props> = ({ items = mockItems }) => {
  const { t } = useTranslation();
  const columns = useMemo<ResourceColumn[]>(
    () => [
      { label: t("Grade"), name: "grade" },
      { label: t("Title"), name: "title" },
      { label: t("Headcount"), name: "headcount" },
      { label: t("Total Available Manhours"), name: "totalAvailableManhours" },
      { label: t("Loaded Manhours"), name: "loadedManhours" },
      {
        label: t("Remaining Available Manhours"),
        name: "remainingAvailableManhours",
      },
    ],
    [t],
  );

  return (
    <Stack gap={2}>
      <Typography variant="overline" display="block">
        {t("Resource Capacity")}
      </Typography>
      <Box sx={{ marginInline: -3 }}>
        <TableContainer>
          <Table>
            <TableHead>
              <TableRow>
                {columns.map((column, idx) => (
                  <TableCell key={`${column.name.toString()}${idx}`}>
                    {column.label}
                  </TableCell>
                ))}
              </TableRow>
            </TableHead>
            <TableBody>
              {items.map((item, index) => {
                return (
                  <TableRow hover tabIndex={-1} key={`${item.grade}-${index}`}>
                    {columns.map((column, idx) => {
                      const columnName = column.name;
                      const cellData = item[columnName];

                      return (
                        <TableCell key={`${columnName.toString()}-${idx}`}>
                          {columnName !== "headcount" &&
                          typeof cellData === "number"
                            ? manhourFormatter.format(cellData)
                            : cellData}
                        </TableCell>
                      );
                    })}
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        </TableContainer>
      </Box>
    </Stack>
  );
};

export default ResourceCapacity;