tsms/src/components/CreateProject/MilestoneSection.tsx

import { CreateProjectInputs } from "@/app/api/projects/actions";
import { TaskGroup } from "@/app/api/tasks";
import { Add, Delete } from "@mui/icons-material";
import {
  Stack,
  Typography,
  Grid,
  FormControl,
  Box,
  Button,
} from "@mui/material";
import {
  GridColDef,
  GridActionsCellItem,
  GridToolbarContainer,
} from "@mui/x-data-grid";
import { LocalizationProvider, DatePicker } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import dayjs from "dayjs";
import "dayjs/locale/zh-hk";
import React, { useMemo } from "react";
import { useFormContext } from "react-hook-form";
import { useTranslation } from "react-i18next";
import StyledDataGrid from "../StyledDataGrid";

interface Props {
  taskGroupId: TaskGroup["id"];
}

interface FooterToolbarProps {
  onAdd: () => void;
}

const MilestoneSection: React.FC<Props> = ({ taskGroupId }) => {
  const { t } = useTranslation();
  const {} = useFormContext<CreateProjectInputs>();
  const columns = useMemo<GridColDef[]>(
    () => [
      {
        type: "actions",
        field: "actions",
        headerName: t("Actions"),
        getActions: () => [
          <GridActionsCellItem
            key="delete-action"
            icon={<Delete />}
            label={t("Remove")}
            onClick={() => {}}
          />,
        ],
      },
      {
        field: "description",
        headerName: t("Payment Milestone Description"),
        width: 300,
        editable: true,
      },
      {
        field: "date",
        headerName: t("Payment Milestone Date"),
        width: 200,
        type: "date",
        editable: true,
      },
      {
        field: "amount",
        headerName: t("Payment Milestone Amount"),
        width: 300,
        editable: true,
        type: "number",
      },
    ],
    [t],
  );

  return (
    <Stack gap={1}>
      <Typography variant="overline" display="block" marginBlockEnd={1}>
        {t("Milestone")}
      </Typography>
      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="zh-hk">
        <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>
          <Grid item xs>
            <FormControl fullWidth>
              <DatePicker
                label={t("Stage Start Date")}
                defaultValue={dayjs()}
              />
            </FormControl>
          </Grid>
          <Grid item xs>
            <FormControl fullWidth>
              <DatePicker label={t("Stage End Date")} defaultValue={dayjs()} />
            </FormControl>
          </Grid>
        </Grid>
      </LocalizationProvider>
      <Box
        sx={(theme) => ({
          marginBlockStart: 1,
          marginInline: -3,
          borderBottom: `1px solid ${theme.palette.divider}`,
        })}
      >
        <StyledDataGrid
          autoHeight
          sx={{ "--DataGrid-overlayHeight": "100px" }}
          disableColumnMenu
          rows={[]}
          columns={columns}
          slots={{
            footer: FooterToolbar,
            noRowsOverlay: NoRowsOverlay,
          }}
          slotProps={{
            footer: undefined,
          }}
        />
      </Box>
    </Stack>
  );
};

const NoRowsOverlay: React.FC = () => {
  const { t } = useTranslation();
  return (
    <Box
      display="flex"
      justifyContent="center"
      alignItems="center"
      height="100%"
    >
      <Typography variant="caption">{t("Add some milestones!")}</Typography>
    </Box>
  );
};

const FooterToolbar: React.FC<FooterToolbarProps> = ({ onAdd }) => {
  const { t } = useTranslation();
  return (
    <GridToolbarContainer sx={{ p: 2 }}>
      <Button
        variant="outlined"
        startIcon={<Add />}
        onClick={onAdd}
        size="small"
      >
        {t("Add Milestone")}
      </Button>
    </GridToolbarContainer>
  );
};

export default MilestoneSection;