Add project total fee

src/components/CreateProject/MilestoneSection.tsx

@@ -218,7 +218,7 @@ const MilestoneSection: React.FC<Props> = ({ taskGroupId }) => {
   return (
     <Stack gap={1}>
       <Typography variant="overline" display="block" marginBlockEnd={1}>
-        {t("Milestone")}
+        {t("Task Stage Milestones")}
       </Typography>
       <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="zh-hk">
         <Grid container spacing={2} columns={{ xs: 6, sm: 12 }}>

src/components/CreateProject/ProjectTotalFee.tsx

@@ -0,0 +1,47 @@
+import { CreateProjectInputs } from "@/app/api/projects/actions";
+import { TaskGroup } from "@/app/api/tasks";
+import { moneyFormatter } from "@/app/utils/formatUtil";
+import { Divider, Stack, Typography } from "@mui/material";
+import React from "react";
+import { useFormContext } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+interface Props {
+  taskGroups: TaskGroup[];
+}
+
+const ProjectTotalFee: React.FC<Props> = ({ taskGroups }) => {
+  const { t } = useTranslation();
+  const { watch } = useFormContext<CreateProjectInputs>();
+  const milestones = watch("milestones");
+
+  let projectTotal = 0;
+
+  return (
+    <Stack spacing={1}>
+      {taskGroups.map((group, index) => {
+        const payments = milestones[group.id]?.payments || [];
+        const paymentTotal = payments.reduce((acc, p) => acc + p.amount, 0);
+        projectTotal += paymentTotal;
+
+        return (
+          <Stack
+            key={`${group.id}-${index}`}
+            direction="row"
+            justifyContent="space-between"
+          >
+            <Typography variant="subtitle2">{group.name}</Typography>
+            <Typography>{moneyFormatter.format(paymentTotal)}</Typography>
+          </Stack>
+        );
+      })}
+      <Divider sx={{ paddingBlockStart: 2 }} />
+      <Stack direction="row" justifyContent="space-between">
+        <Typography variant="h6">{t("Project Total Fee")}</Typography>
+        <Typography>{moneyFormatter.format(projectTotal)}</Typography>
+      </Stack>
+    </Stack>
+  );
+};
+
+export default ProjectTotalFee;

src/components/CreateProject/ResourceMilestone.tsx

@@ -24,6 +24,7 @@ import { useFormContext } from "react-hook-form";
 import { CreateProjectInputs } from "@/app/api/projects/actions";
 import MilestoneSection from "./MilestoneSection";
 import ResourceSection from "./ResourceSection";
+import ProjectTotalFee from "./ProjectTotalFee";
 
 export interface Props {
   allTasks: Task[];
@@ -94,10 +95,7 @@ const ResourceMilestone: React.FC<Props> = ({
       </Card>
       <Card>
         <CardContent>
-          <Stack direction="row" justifyContent="space-between">
-            <Typography variant="h6">{t("Project Total Fee")}</Typography>
-            <Typography>{moneyFormatter.format(80000)}</Typography>
-          </Stack>
+          <ProjectTotalFee taskGroups={taskGroups} />
         </CardContent>
       </Card>
     </>