update

src/app/api/projects/actions.ts

@@ -21,6 +21,8 @@ export interface CreateProjectInputs {
   projectLeadId: number;
   projectActualStart: string;
   projectActualEnd: string;
+  projectPlanStart: string;
+  projectPlanEnd: string;
   projectStatus: string;
   isClpProject: boolean;
   mainProjectId?: number | null;

src/components/CreateProject/ProjectClientDetails.tsx

@@ -33,6 +33,10 @@ import React, { useEffect, useMemo, useState } from "react";
 import { fetchCustomer } from "@/app/api/customer/actions";
 import uniq from "lodash/uniq";
 import ControlledAutoComplete from "../ControlledAutoComplete/ControlledAutoComplete";
+import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import dayjs, { Dayjs } from 'dayjs';
+import { INPUT_DATE_FORMAT } from "@/app/utils/formatUtil";
 
 interface Props {
   isActive: boolean;
@@ -69,7 +73,10 @@ const ProjectClientDetails: React.FC<Props> = ({
   customerTypes,
   workNatures,
 }) => {
-  const { t } = useTranslation();
+  const {     
+    t,
+    i18n: { language }, 
+  } = useTranslation();
   const {
     register,
     formState: { errors, defaultValues, touchedFields },
@@ -89,7 +96,6 @@ const ProjectClientDetails: React.FC<Props> = ({
   );
 
   const selectedCustomerId = watch("clientId");
-
   const [customerContacts, setCustomerContacts] = useState<Contact[]>([]);
   const [subsidiaryContacts, setSubsidiaryContacts] = useState<Contact[]>([]);
   const [customerSubsidiaryIds, setCustomerSubsidiaryIds] = useState<number[]>(
@@ -228,6 +234,8 @@ const ProjectClientDetails: React.FC<Props> = ({
   //   (acc, wn) => ({ ...acc, [wn.id]: wn.name }),
   //   {},
   // );
+  const planStart = getValues("projectPlanStart")
+  const planEnd = getValues("projectPlanEnd")
 
   return (
     <Card sx={{ display: isActive ? "block" : "none" }}>
@@ -280,6 +288,57 @@ const ProjectClientDetails: React.FC<Props> = ({
                 error={Boolean(errors.projectName)}
               />
             </Grid>
+            <Grid item xs={3}>
+              <LocalizationProvider
+                  dateAdapter={AdapterDayjs}
+                  adapterLocale={`${language}-hk`}
+                  >
+                  <DatePicker
+                    sx={{ width: "100%" }}
+                    label={t("Plan Start")}
+                    format="YYYY/MM/DD"
+                    value={planStart ? dayjs(planStart) : null}
+                    onChange={(date) => {
+                        if (!date) return;
+                        setValue("projectPlanStart", date.format(INPUT_DATE_FORMAT));
+                      }}
+                      slotProps={{
+                          textField: {
+                              // required: true,
+                              error:
+                              Boolean(errors.projectPlanStart)
+                              || new Date(planStart) > new Date(planEnd)
+                              ,
+                          },
+                      }}
+                      />
+                </LocalizationProvider>
+            </Grid>
+            <Grid item xs={3}>
+            <LocalizationProvider
+                  dateAdapter={AdapterDayjs}
+                  adapterLocale={`${language}-hk`}
+                  >
+                  <DatePicker
+                    sx={{ width: "100%" }}
+                    label={t("Plan End")}
+                    format="YYYY/MM/DD"
+                    value={planEnd ? dayjs(planEnd) : null}
+                    onChange={(date) => {
+                        if (!date) return;
+                        setValue("projectPlanEnd", date.format(INPUT_DATE_FORMAT));
+                      }}
+                      slotProps={{
+                          textField: {
+                              error:
+                              Boolean(errors.projectPlanEnd)
+                              || new Date(planStart) > new Date(planEnd)
+                              ,
+                          },
+                      }}
+                      />
+                </LocalizationProvider>
+            </Grid>
             <Grid item xs={6}>
               <ControlledAutoComplete
                 control={control}