From 3cd7e19acd4cf4ce57c221172b9ceb703e31b1cb Mon Sep 17 00:00:00 2001
From: kelvinsuen <kelvin.suen@2fi-solutions.com.hk>
Date: Thu, 31 Jul 2025 15:01:52 +0800
Subject: [PATCH] update client & pdf pages

---
 .../client/ClientMaintainPage/ClientForm.js   | 167 +++++-------------
 .../ClientSearchPage/ClientSearchForm.js      |  24 +--
 .../client/ClientSearchPage/ClientTable.js    |  33 ++--
 src/pages/pdf/PdfSearchPage/PdfTable.js       |   2 +-
 src/pages/pdf/PdfSearchPage/index.js          |   7 +-
 5 files changed, 63 insertions(+), 170 deletions(-)

diff --git a/src/pages/client/ClientMaintainPage/ClientForm.js b/src/pages/client/ClientMaintainPage/ClientForm.js
index 4cd2bf4..6c8f1d3 100644
--- a/src/pages/client/ClientMaintainPage/ClientForm.js
+++ b/src/pages/client/ClientMaintainPage/ClientForm.js
@@ -67,26 +67,9 @@ const ClientForm = ({   refClientDetail,
 
     //form data
     const {register, getValues, setValue} = useForm();
-    const [createDate, setCreateDate] = useState(null);
-    // const [awardDate, setAwardDate] = useState(null);
-    // const [deadlineDate, setDeadlineDate] = useState(null);
-    // const [announceDate, setAnnounceDate] = useState(null);
-    // const [selectedRegion, setSelectedRegion] = useState(null);
-    // const [selectedType, setSelectedType] = useState(null);
-    // const [selectedSubDivision, setSelectedSubDivision] = useState([]);
-    // const [fromDate, setFromDate] = useState(null);
-    // const [toDate, setToDate] = useState(null);
-    // const [reminderFlag, setReminderFlag] = useState(false);
-    // const [isFlagFetched, setIsFlagFetched] = useState(false);
-
-    // //reminder option
-    // const [selectedFrequency, setSelectedFrequency] = useState(null);
-    // const [nextApplicationDate, setNextApplicationDate] = useState(null);
-
-    // //combo list
-    // const [subDivisionList, setSubDivisionList] = useState([]);
-
-    const [createDateError, setCreateDateError] = React.useState(null);
+    const [dob, setDob] = useState(null);
+
+    const [dobError, setDobError] = React.useState(null);
     const [awardDateError, setAwardDateError] = React.useState(null);
     const [deadlineDateError, setDeadlineDateError] = React.useState(null);
     const [announceDateError, setAnnounceDateError] = React.useState(null);
@@ -94,13 +77,13 @@ const ClientForm = ({   refClientDetail,
     const [toError, setToError] = React.useState(null);
     // const [nextApplicationDateError, setNextApplicationDateError] = React.useState(null);
 
-    const createDateErrorMessage = React.useMemo(() => {
-        switch (createDateError) {
+    const dobErrorMessage = React.useMemo(() => {
+        switch (dobError) {
             case 'invalidDate': {
                 return "Invalid date";
             }
         }
-    }, [createDateError]);
+    }, [dobError]);
 
     const awardDateErrorMessage = React.useMemo(() => {
         switch (awardDateError) {
@@ -168,13 +151,13 @@ const ClientForm = ({   refClientDetail,
     //     if(applicationList.length===0){
     //         validateReminder();
     //     }
-    // },[createDate, nextApplicationDate, deadlineDate]);
+    // },[dob, nextApplicationDate, deadlineDate]);
 
     // const validateReminder = () =>{
     //     const values = getValues();
     //     let firstIssueDate = null;
     //     let reminderDates = [];
-    //     if (createDate !== null &&
+    //     if (dob !== null &&
     //         nextApplicationDate !== null &&
     //         values.reminderThreshold !== null &&
     //         values.reminderInterval !== null &&
@@ -182,7 +165,7 @@ const ClientForm = ({   refClientDetail,
     //     ) {
     //         //have value
     //         if(applicationList.length <=0){
-    //             firstIssueDate = createDate.add(-values.reminderThreshold,'days');
+    //             firstIssueDate = dob.add(-values.reminderThreshold,'days');
     //         }
     //         else{
     //             firstIssueDate = nextApplicationDate.add(-values.reminderThreshold, 'days');
@@ -307,10 +290,8 @@ const ClientForm = ({   refClientDetail,
         if (!isObjEmpty(refClient)) {
             //checkOvertime();
             if(refId !== null){
-                setValue("fullname", refClient.fullname);
                 setValue("lastname", refClient.lastname);
                 setValue("firstname", refClient.firstname);
-                setValue("title", refClient.title);
                 setValue("email", refClient.email);
                 setValue("phone1", refClient.phone1);
                 setValue("phone2", refClient.phone2);
@@ -318,7 +299,7 @@ const ClientForm = ({   refClientDetail,
                 setValue("caseManagerId", 1);
                 setValue("consultantId", 1);
             }
-            setCreateDate(dayjs(getDateString(refClient.created)));
+            setDob(dayjs(getDateString(refClient.dob)));
         }
     },[refClient]);
 
@@ -331,7 +312,7 @@ const ClientForm = ({   refClientDetail,
             setIsEditing(true);
         }
     },[refClient]);
-    // },[refClient,selectedSubDivision,selectedRegion,selectedType, createDate, deadlineDate]);
+    // },[refClient,selectedSubDivision,selectedRegion,selectedType, dob, deadlineDate]);
 
     // useEffect(()=>{
     //     if(selectedFrequency !== null){
@@ -344,19 +325,19 @@ const ClientForm = ({   refClientDetail,
     //         }
 
     //         if (isEditing){
-    //             if (createDate !== null){
+    //             if (dob !== null){
     //                 switch(selectedFrequency.key){
     //                     case 1:
-    //                         setNextApplicationDate(createDate.add(1,'month'));
+    //                         setNextApplicationDate(dob.add(1,'month'));
     //                         break;
     //                     case 2:
-    //                         setNextApplicationDate(createDate.add(3,'month'));
+    //                         setNextApplicationDate(dob.add(3,'month'));
     //                         break;
     //                     case 3:
-    //                         setNextApplicationDate(createDate.add(1,'year'));
+    //                         setNextApplicationDate(dob.add(1,'year'));
     //                         break;
     //                     case 4:
-    //                         setNextApplicationDate(createDate.add(6,'month'));
+    //                         setNextApplicationDate(dob.add(6,'month'));
     //                         break;
     //                     default:
     //                         setNextApplicationDate(nextApplicationDate);
@@ -365,7 +346,7 @@ const ClientForm = ({   refClientDetail,
     //             }
     //         }
     //     }
-    // },[selectedFrequency,createDate]);
+    // },[selectedFrequency,dob]);
 
     // useEffect(() => {
     //     //if state data are ready and assign to different field
@@ -387,27 +368,18 @@ const ClientForm = ({   refClientDetail,
             const values = getValues();
             const formErrors = {};
 
-            if (isStringEmptyAfterTrim(values.fullname)) {
-                formErrors.fullname = 'Client Name is required';
+            if (isStringEmptyAfterTrim(values.lastname)) {
+                formErrors.lastname = 'Last Name is required';
             }
 
-
             // if (selectedRegion === null ) {
             //     formErrors.region = 'Client Region is required';
             // }
 
-            // if (isStringEmptyAfterTrim(values.organization)) {
-            //     formErrors.organization = 'Client Organization is required';
-            // }
-
-            // if (selectedType === null) {
-            //     formErrors.type = 'Client Type is required';
+            // if (dob === null) {
+            //     formErrors.dob = 'DoB is required';
             // }
 
-            if (createDate === null) {
-                formErrors.createDate = 'Create Date is required';
-            }
-
             // if (deadlineDate === null) {
             //     formErrors.deadlineDate = 'Deadline Date is required';
             // }
@@ -448,7 +420,7 @@ const ClientForm = ({   refClientDetail,
 
             setErrors(formErrors);
             // if (Object.keys(formErrors).length === 0 //&&
-                // !createDateError && !awardDateError &&
+                // !dobError && !awardDateError &&
                 // !deadlineDateError && !announceDateError &&
                 // !fromError && !toError && !nextApplicationDateError
             // ) {
@@ -480,7 +452,7 @@ const ClientForm = ({   refClientDetail,
                 //                     data["phone1"]  = values.phone1;
                 //                     data["phone2"]  = values.phone2;
                 //                     data["remarks"]  = values.remarks;
-                //                     data["createDate"]  = createDate === null ? null : dayjs(createDate).format('YYYY-MM-DD');
+                //                     data["dob"]  = dob === null ? null : dayjs(dob).format('YYYY-MM-DD');
                 //                     setClientDetail(data);
                 //                 }
                 //             }
@@ -493,17 +465,15 @@ const ClientForm = ({   refClientDetail,
             if (Object.keys(formErrors).length === 0) {
                 let data = {};
                 data["id"]  = isNewRecord ? params.id : refClientDetail.id;
-                data["fullname"]  = values.fullname;
                 data["lastname"]  = values.lastname;
                 data["firstname"] = values.firstname;
-                data["title"]  = values.title;
                 data["email"]  = values.email;
                 data["phone1"]  = values.phone1;
                 data["phone2"]  = values.phone2;
                 data["remarks"]  = values.remarks;
                 data["caseManagerId"]  = 1;
                 data["consultantId"]  = 1;
-                data["createDate"]  = createDate === null ? null : dayjs(createDate).format('YYYY-MM-DD');
+                data["dob"]  = dob === null ? null : dayjs(dob).format('YYYY-MM-DD');
                 setClientDetail(data);
             }
             else if(isCollectData){
@@ -597,41 +567,7 @@ const ClientForm = ({   refClientDetail,
                                 <Grid item xs={4} s={4} md={4} lg={4}
                                       sx={{ml: 3, mr: 3,mt:1, display: 'flex', alignItems: 'flex-start'}}>
                                     <Typography variant="lionerSize" component="span">
-                                        Client Name:
-                                        <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
-                                    </Typography>
-                                </Grid>
-
-                                <Grid item xs={7} s={7} md={7} lg={7}>
-                                    <TextField
-                                        fullWidth
-                                        {...register("fullname",
-                                            {
-                                                value: refClient.fullname,
-                                            })}
-                                        id='fullname'
-                                        required
-                                        inputProps={{maxLength: 255, style: {fontSize: '1.1rem'}}}
-                                        InputProps={{
-                                            style: { minHeight:'42.5px', maxHeight: '50vh' },
-                                        }}
-                                        multiline
-                                        maxRows={3}
-                                        error={!!errors.fullname}
-                                        helperText={errors.fullname}
-                                        disabled={!isEditing}
-                                        autoComplete="off"
-                                    />
-                                </Grid>
-                            </Grid>
-                        </Grid>
-
-                        <Grid item xs={12} s={12} md={12} lg={5.5} sx={{mt:1, ml: 3, mr: 3, mb: 3}}>
-                            <Grid container alignItems={"flex-start"}>
-                                <Grid item xs={4} s={4} md={4} lg={4}
-                                      sx={{ml: 3, mr: 3,mt:1, display: 'flex', alignItems: 'flex-start'}}>
-                                    <Typography variant="lionerSize" component="span">
-                                        Last Name:
+                                        Last Name: <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
                                     </Typography>
                                 </Grid>
 
@@ -650,6 +586,8 @@ const ClientForm = ({   refClientDetail,
                                         }}
                                         multiline
                                         maxRows={3}
+                                        error={!!errors.lastname}
+                                        helperText={errors.lastname}
                                         disabled={!isEditing}
                                         autoComplete="off"
                                     />
@@ -725,7 +663,7 @@ const ClientForm = ({   refClientDetail,
                                 <Grid item xs={4} s={4} md={4} lg={4}
                                       sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
                                     <Typography variant="lionerSize" component="span">
-                                        Create Date: <Typography sx={{ color: GENERAL_RED_COLOR }} component="span">*</Typography>
+                                        Date of Birth:
                                     </Typography>
                                 </Grid>
 
@@ -733,18 +671,18 @@ const ClientForm = ({   refClientDetail,
                                     <LocalizationProvider dateAdapter={AdapterDayjs}>
                                         <DemoItem  components={['DatePicker']}>
                                             <DatePicker
-                                                id="createDate"
+                                                id="dob"
                                                 size="small"
-                                                required='true'
-                                                value={createDate === null ? null : dayjs(createDate)}
-                                                onChange={(newValue) => setCreateDate(newValue)}
+                                                required
+                                                value={dob === null ? null : dayjs(dob)}
+                                                onChange={(newValue) => setDob(newValue)}
                                                 format="DD/MM/YYYY"
-                                                onError={(newError) => setCreateDateError(newError)}
+                                                onError={(newError) => setDobError(newError)}
                                                 slotProps={{
                                                     field: { clearable: true },
                                                     textField: {
-                                                        error: !!errors.createDate || createDateError,
-                                                        helperText: createDateError ? createDateErrorMessage : errors.createDate,
+                                                        error: !!errors.dob || dobError,
+                                                        helperText: dobError ? dobErrorMessage : errors.dob,
                                                     },
                                                 }}
                                                 disabled={!isEditing}
@@ -755,32 +693,6 @@ const ClientForm = ({   refClientDetail,
                             </Grid>
                         </Grid>
 
-                        <Grid item xs={12} sm={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
-                            <Grid container alignItems={"center"}>
-                                <Grid item xs={4} s={4} md={4} lg={4}
-                                      sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                                    <Typography variant="lionerSize" component="span">
-                                    Title:
-                                    </Typography>
-                                </Grid>
-
-                                <Grid item xs={7} s={7} md={7} lg={6.5}>
-                                    <TextField
-                                        fullWidth
-                                        inputProps={{maxLength: 50}}
-                                        size="small"
-                                        {...register("title",
-                                            {
-                                                value: refClient.title,
-                                            })}
-                                        id='title'
-                                        disabled={!isEditing}
-                                        autoComplete="off"
-                                    />
-                                </Grid>
-                            </Grid>
-                        </Grid>
-
                         <Grid item xs={12} sm={12} md={12} lg={5.5} sx={{ml: 3, mr: 3, mb: 3}}>
                             <Grid container alignItems={"center"}>
                                 <Grid item xs={4} s={4} md={4} lg={4}
@@ -1015,7 +927,7 @@ const ClientForm = ({   refClientDetail,
                                                         {!isNewRecord && (<Button
                                                             variant="contained"
                                                             color="delete"
-                                                            disabled={!ability.can('DELETE','EVENT')}
+                                                            disabled={!ability.can('MAINTAIN','CLIENT')}
                                                             onClick={handleDeleteClick}
                                                         >
                                                             Delete
@@ -1072,7 +984,7 @@ const ClientForm = ({   refClientDetail,
                                                             variant="contained"
                                                             color="save"
                                                             onClick={updateIsEdit}
-                                                            disabled={ability.can('EDIT','ALL_RECORD')? false : !ability.can('EDIT','EVENT')}
+                                                            disabled={!ability.can('MAINTAIN','CLIENT')}
                                                         >
                                                             Edit
                                                         </Button>
@@ -1082,9 +994,10 @@ const ClientForm = ({   refClientDetail,
                                                             variant="contained"
                                                             color="cancel"
                                                             onClick={returnSearchPage}
-                                                            disabled={ability.can('EDIT','ALL_RECORD')? false : !ability.can('EDIT','EVENT')}
+                                                            disabled={!ability.can('VIEW','CLIENT')}
                                                         >
-                                                            Back                                                      </Button>
+                                                            Back
+                                                        </Button>
                                                     </Grid>
                                                 </Grid>
                                             </Grid>
diff --git a/src/pages/client/ClientSearchPage/ClientSearchForm.js b/src/pages/client/ClientSearchPage/ClientSearchForm.js
index 18c7e1a..d0792df 100644
--- a/src/pages/client/ClientSearchPage/ClientSearchForm.js
+++ b/src/pages/client/ClientSearchPage/ClientSearchForm.js
@@ -11,7 +11,7 @@ import {useContext, useState} from "react";
 import Autocomplete from '@mui/material/Autocomplete';
 import * as React from "react";
 // import axios from "axios";
-// import {apiPath, getUserData} from "../../../auth/utils";
+import {apiPath, getUserData} from "../../../auth/utils";
 // import {
 //     GET_CONSULTANT_COMBO_LIST, GET_EVENT_EXPORT,
 //     GET_SUB_CONSULTANT_COMBO_LIST, POST_SEARCH_TEMPLATE_PATH, VALIDATE_TEMPLATE_NAME_PATH,
@@ -203,10 +203,6 @@ const ClientSearchForm = ({applySearch, setExpanded,expanded}) => {
     // }, [userConsultant,consultantList]);
 
     function resetForm(){
-        // setSelectedCaseManager([]);
-        // setSelectedConsultants([]);
-        // setSelectedRegion(null);
-        // setSelectedType(null);
         setCreateDateFrom(null);
         setCreateDateTo(null);
         // setToDate(null);
@@ -244,18 +240,6 @@ const ClientSearchForm = ({applySearch, setExpanded,expanded}) => {
                 <ThemeProvider theme={LIONER_FORM_THEME}>
                 {/*row 2*/}
                 <Grid container alignItems={"flex-start"} >
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5}}>
-                        <InputLabel htmlFor="clientName">Client Name</InputLabel>
-                        <TextField
-                            fullWidth
-                            {...register("fullname")}
-                            id='fullname'
-                            inputProps={{maxLength: 255}}
-                            // label="Client Name"
-                            autoComplete="off"
-                        />
-                    </Grid>
-
                     <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5}}>
                         <InputLabel htmlFor="clientLastName">Client Last Name</InputLabel>
                         <TextField
@@ -356,7 +340,7 @@ const ClientSearchForm = ({applySearch, setExpanded,expanded}) => {
                         />
                     </Grid> */}
 
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5}}>
+                    {/* <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5}}>
                         <InputLabel htmlFor="createDateFrom">Create Date</InputLabel>
 
                         <Grid container>
@@ -406,7 +390,7 @@ const ClientSearchForm = ({applySearch, setExpanded,expanded}) => {
                                 </LocalizationProvider>
                             </Grid>
                         </Grid>
-                    </Grid>
+                    </Grid> */}
 
                     <Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:0.5}}>
                         <InputLabel htmlFor="remarks">Remarks</InputLabel>
@@ -463,7 +447,7 @@ const ClientSearchForm = ({applySearch, setExpanded,expanded}) => {
 
                     <Grid item>
                         <Grid container>
-                            {ability.can('EDIT','EVENT') ?
+                            {ability.can('MAINTAIN','CLIENT') ?
                                 <Grid item sx={{ml:3, mr:3, mb:0.5}}>
                                     <Button
                                         variant="contained"
diff --git a/src/pages/client/ClientSearchPage/ClientTable.js b/src/pages/client/ClientSearchPage/ClientTable.js
index d1afa66..9939441 100644
--- a/src/pages/client/ClientSearchPage/ClientTable.js
+++ b/src/pages/client/ClientSearchPage/ClientTable.js
@@ -95,30 +95,23 @@ export default function ClientTable({recordList, pageSize}) {
             renderCell: (params) => {
                 return (
                     <div style={{display: 'flex', alignItems: 'center', justifyContent: 'center', whiteSpace: 'normal', wordBreak: 'break-word'}}>
-                        {params.value}
-                        {/* {params.row.title ? `(${params.row.title})` : ''} {params.value} */}
+                        {params.row.firstname ? ` ${params.row.lastname} ${params.row.firstname}` : `Mr/Ms ${params.row.lastname}`}
                     </div>
                 );
             }
         },
-        {
-            id: 'title',
-            field: 'title',
-            headerName: 'Title',
-            flex: 1.5,
-        },
-        {
-            id: 'created',
-            field: 'created',
-            headerName: 'Create Date',
-            flex: 1,
-            sortComparator: dateComparator,
-            renderCell: (params) => (
-                <div>
-                    {getDateString(params.row.created, 'dd/MM/yyyy')}
-                </div>
-            ),
-        },
+        // {
+        //     id: 'created',
+        //     field: 'created',
+        //     headerName: 'Create Date',
+        //     flex: 1,
+        //     sortComparator: dateComparator,
+        //     renderCell: (params) => (
+        //         <div>
+        //             {getDateString(params.row.created, 'dd/MM/yyyy')}
+        //         </div>
+        //     ),
+        // },
         // {
         //     id: 'lastname',
         //     field: 'lastname',
diff --git a/src/pages/pdf/PdfSearchPage/PdfTable.js b/src/pages/pdf/PdfSearchPage/PdfTable.js
index 5811939..1291a4e 100644
--- a/src/pages/pdf/PdfSearchPage/PdfTable.js
+++ b/src/pages/pdf/PdfSearchPage/PdfTable.js
@@ -108,7 +108,7 @@ export default function PdfTable({recordList}) {
         {
             id: 'createDate',
             field: 'createDate',
-            headerName: 'Create Date',
+            headerName: 'Create Datetime',
             flex: 1,
             sortComparator: dateComparator,
             renderCell: (params) => (
diff --git a/src/pages/pdf/PdfSearchPage/index.js b/src/pages/pdf/PdfSearchPage/index.js
index bfca91b..29cf9b2 100644
--- a/src/pages/pdf/PdfSearchPage/index.js
+++ b/src/pages/pdf/PdfSearchPage/index.js
@@ -70,7 +70,7 @@ const PdfSearchPage = () => {
                 )
                 .then((response) => {
                     if (response.status === 200) {
-                        setClientInfo(response.data);
+                        setClientInfo(response.data.data);
                     }
                 })
                 .catch(error => {
@@ -101,7 +101,10 @@ const PdfSearchPage = () => {
                     <Grid container maxWidth justifyContent="space-between" sx={{mt:-2, width:CARD_MAX_WIDTH}} >
                         <Grid item xs={4} s={4} md={4} lg={4}
                             sx={{ mb: 2, display: 'flex', alignItems: 'center'}}>
-                            <Typography variant="h2">{clientInfo.data? clientInfo.data.fullname:""}</Typography>
+                            <Typography variant="h2"> {clientInfo?
+                                clientInfo.firstname ? ` ${clientInfo.lastname} ${clientInfo.firstname}` : `Mr/Ms ${clientInfo.lastname}`
+                                :""}
+                            </Typography>
                         </Grid>
                     </Grid>
                 </Grid>