Merge branch 'master' of https://git.2fi-solutions.com/alex/PNSPS-frontend-MaterialUI

package-lock.json

@@ -24,6 +24,7 @@
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^14.4.3",
+        "@types/react-input-mask": "^3.0.2",
         "apexcharts": "^3.35.5",
         "axios": "^1.4.0",
         "dayjs": "^1.11.9",
@@ -42,6 +43,7 @@
         "react-draggable": "^4.4.5",
         "react-element-to-jsx-string": "^15.0.0",
         "react-hook-form": "^7.45.4",
+        "react-input-mask": "^3.0.0-alpha.2",
         "react-number-format": "^4.9.4",
         "react-perfect-scrollbar": "^1.5.8",
         "react-redux": "^8.0.4",
@@ -5732,6 +5734,14 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-input-mask": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/react-input-mask/-/react-input-mask-3.0.2.tgz",
+      "integrity": "sha512-WTli3kUyvUqqaOLYG/so2pLqUvRb+n4qnx2He5klfqZDiQmRyD07jVIt/bco/1BrcErkPMtpOm+bHii4Oed6cQ==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-is": {
       "version": "18.2.1",
       "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-18.2.1.tgz",
@@ -11087,6 +11097,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.1.0.tgz",
@@ -18181,6 +18199,20 @@
         "react": "^16.8.0 || ^17 || ^18"
       }
     },
+    "node_modules/react-input-mask": {
+      "version": "3.0.0-alpha.2",
+      "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-3.0.0-alpha.2.tgz",
+      "integrity": "sha512-9U7qL+mvDMOJcbOFPdt6Vj+zzmCMNnBjhhjGDrL8BGQmymgvMVKhu/oOVfAkl+5VWOsLr+G3EhZOmae5fBcAkA==",
+      "dependencies": {
+        "invariant": "^2.2.4",
+        "prop-types": "^15.7.2",
+        "warning": "^4.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -20645,6 +20677,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

package.json

@@ -20,6 +20,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
+    "@types/react-input-mask": "^3.0.2",
     "apexcharts": "^3.35.5",
     "axios": "^1.4.0",
     "dayjs": "^1.11.9",
@@ -38,6 +39,7 @@
     "react-draggable": "^4.4.5",
     "react-element-to-jsx-string": "^15.0.0",
     "react-hook-form": "^7.45.4",
+    "react-input-mask": "^3.0.0-alpha.2",
     "react-number-format": "^4.9.4",
     "react-perfect-scrollbar": "^1.5.8",
     "react-redux": "^8.0.4",

src/pages/OrganizationSearchPage/OrganizationTable.js

@@ -7,6 +7,7 @@ import {
 import EditIcon from '@mui/icons-material/Visibility';
 import {useEffect} from "react";
 import {useNavigate} from "react-router-dom";
+import * as DateUtils from "utils/DateUtils";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function OrganizationTable({recordList}) {
@@ -64,12 +65,23 @@ export default function OrganizationTable({recordList}) {
             field: 'contactTel',
             headerName: 'Tel.',
             flex: 1,
+            renderCell: (params) => {
+                let phone = JSON.parse(params.value);
+                let contact = "";
+                if (phone && phone.phoneNumber) {
+                    contact = phone?.countryCode + " " + phone?.phoneNumber
+                }
+                return contact;
+            }
         },
         {
             id: 'brExpiryDate',
             field: 'brExpiryDate',
             headerName: 'Expiry Date',
             flex: 1,
+            valueGetter:(params)=>{
+                return DateUtils.dateStr(params?.value);
+            }
         },
     ];
 

src/pages/PublicNotice/ApplyForm/PublicNoticeApplyForm.js

@@ -54,11 +54,15 @@ const PublicNoticeApplyForm = ({loadedData, selections}) => {
                 return;
             }
             if(!attachment){
-                setWarningText("請選擇上傳文件");
+                setWarningText("請選擇上傳檔案");
+                setIsWarningPopUp(true);
+                return;
+            }else if(!attachment.size || attachment.size <=0){
+                setWarningText("請上傳有效檔案");
                 setIsWarningPopUp(true);
                 return;
             }else if(attachment.size >= (10*1024*1034)){
-                setWarningText("上傳文件大小應<10MB");
+                setWarningText("上傳檔案大小應<10MB");
                 setIsWarningPopUp(true);
                 return;
             }
@@ -77,7 +81,7 @@ const PublicNoticeApplyForm = ({loadedData, selections}) => {
                         faxNumber: values.faxNumber
                     },
                     issueId:values.issueId,
-                    remarks:values.remarks,
+                    remarks:values.remarks?values.remarks:"",
                 },
                 files: [attachment],
                 onSuccess: function(){
@@ -88,7 +92,9 @@ const PublicNoticeApplyForm = ({loadedData, selections}) => {
     });
 
     const readFile=(event)=>{
-        setAttachment(event.target.files[0]);
+        if(event.target.files[0]){
+            setAttachment(event.target.files[0]);
+        }
     }
 
 
@@ -161,7 +167,7 @@ const PublicNoticeApplyForm = ({loadedData, selections}) => {
                     <Grid container alignItems={"center"}>
                         <Grid item lg={4}
                                 sx={{ml: 3, mr: 3, display: 'flex', alignItems: 'center'}}>
-                            上傳文件 ({"檔案大小應<10MB"}):
+                            犒件檔案 ({"檔案大小應<10MB"}):
                         </Grid>
                         <Grid item lg={4}>
                             {attachment.name}
@@ -182,7 +188,7 @@ const PublicNoticeApplyForm = ({loadedData, selections}) => {
                                     component="span"
                                     variant="outlined" 
                                     size="large"
-                                    >{attachment?"上傳文件":"重新上傳"}</Button>
+                                    >{attachment?"上傳檔案":"重新上傳"}</Button>
                             </label>
                         </Grid>
                     </Grid>

src/pages/PublicNotice/ListPanel/BaseGrid.js

@@ -49,7 +49,7 @@ export default function BaseGrid({rows}) {
                     contact = "電話: " + phone?.countryCode + " " + phone?.phoneNumber
                 }
 
-                if (faxNo) {
+                if (faxNo && faxNo?.faxNumber) {
                     if (contact != "")
                         contact = contact + ", "
                     contact = contact + "傳真:" + faxNo?.countryCode + " " + faxNo?.faxNumber

src/pages/PublicNotice/ListPanel/PendingPaymentTab.js

@@ -53,7 +53,7 @@ export default function SubmittedTab({ rows }) {
                     contact = "電話: " + phone?.countryCode + " " + phone?.phoneNumber
                 }
 
-                if (faxNo) {
+                if (faxNo && faxNo?.faxNumber) {
                     if (contact != "")
                         contact = contact + ", "
                     contact = contact + "傳真:" + faxNo?.countryCode + " " + faxNo?.faxNumber

src/pages/PublicNotice/ListPanel/SearchPublicNoticeForm.js

@@ -9,13 +9,17 @@ import MainCard from "components/MainCard";
 import { useForm } from "react-hook-form";
 import * as React from "react";
 import * as ComboData from "utils/ComboData";
+import * as DateUtils from "utils/DateUtils";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const SearchPublicNoticeForm = ({ applySearch }) => {
+const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {
 
     const [type, setType] = React.useState([]);
-    const [status, setStatus] = React.useState();
+    const [status, setStatus] = React.useState({ key: 0, label: '全部',  type: 'all' });
+
+    const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
+    const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
 
     const { reset, register, handleSubmit } = useForm()
     const onSubmit = (data) => {
@@ -31,14 +35,14 @@ const SearchPublicNoticeForm = ({ applySearch }) => {
             dateFrom: data.dateFrom,
             dateTo: data.dateTo,
             contact: data.contact,
-            status: status?.type,
+            status: (status?.type&&status?.type!= 'all')?status?.type:"",
         };
         applySearch(temp);
     };
 
     function resetForm() {
         setType([]);
-        setStatus();
+        setStatus({ key: 0, label: '全部',  type: 'all' });
         reset();
     }
 
@@ -63,6 +67,10 @@ const SearchPublicNoticeForm = ({ applySearch }) => {
                             {...register("appNo")}
                             id='appNo'
                             label="申請編號"
+                            defaultValue={searchCriteria.appNo}
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
 
@@ -73,6 +81,11 @@ const SearchPublicNoticeForm = ({ applySearch }) => {
                             id="dateFrom"
                             type="date"
                             label="提交日期(從)"
+                            defaultValue={searchCriteria.dateFrom}
+                            InputProps={{inputProps: { max: maxDate} }}
+                            onChange={(newValue)=>{
+                                setMinDate(DateUtils.dateStr(newValue));
+                            }}
                             InputLabelProps={{
                                 shrink: true
                             }}
@@ -89,6 +102,11 @@ const SearchPublicNoticeForm = ({ applySearch }) => {
                             id="dateTo"
                             type="date"
                             label="提交日期(到)"
+                            defaultValue={searchCriteria.dateTo}
+                            InputProps={{inputProps: { min: minDate} }}
+                            onChange={(newValue)=>{
+                                setMaxDate(DateUtils.dateStr(newValue));
+                            }}
                         />
                     </Grid>
 
@@ -98,6 +116,10 @@ const SearchPublicNoticeForm = ({ applySearch }) => {
                             {...register("contact")}
                             id="contact"
                             label="聯絡人"
+                            defaultValue={searchCriteria.contact}
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
 
@@ -106,8 +128,10 @@ const SearchPublicNoticeForm = ({ applySearch }) => {
                             {...register("status")}
                             disablePortal
                             id="status"
+                            filterOptions={(options)=>options}
                             options={ComboData.publicNoticeStatic}
-                            value={status}
+                            values={status}
+                            inputValue={status?.label}
                             onChange={(event, newValue) => {
                                 if (newValue !== null) {
                                     setStatus(newValue);
@@ -118,6 +142,9 @@ const SearchPublicNoticeForm = ({ applySearch }) => {
                                     label="狀態"
                                 />
                             )}
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
                     {/*<Grid item xs={9} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:3}}>*/}

src/pages/PublicNotice/ListPanel/SearchPublicNoticeTab.js

@@ -6,6 +6,7 @@ import MainCard from "components/MainCard";
 import {GET_PUBLIC_NOTICE_LIST} from "utils/ApiPathConst";
 import * as React from "react";
 import * as HttpUtils from "utils/HttpUtils";
+import * as DateUtils from "utils/DateUtils";
 
 import Loadable from 'components/Loadable';
 const SearchForm = Loadable(React.lazy(() => import('./SearchPublicNoticeForm')));
@@ -16,7 +17,10 @@ const EventTable = Loadable(React.lazy(() => import('./SearchPublicNoticeTable')
 const UserSearchPage_Individual = () => {
 
     const [record,setRecord] = React.useState([]);
-    const [searchCriteria, setSearchCriteria] = React.useState({});
+    const [searchCriteria, setSearchCriteria] = React.useState({
+        dateTo: DateUtils.dateStr(new Date()),
+        dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
+    });
 
     React.useEffect(() => {
         getUserList();
@@ -44,7 +48,10 @@ const UserSearchPage_Individual = () => {
         <Grid container rowSpacing={4.5} columnSpacing={2.75}>
             {/*row 1*/}
             <Grid item xs={12} md={12} lg={12}>
-                <SearchForm applySearch={applySearch}/>
+                <SearchForm 
+                applySearch={applySearch}
+                searchCriteria={searchCriteria}
+                />
             </Grid>
             {/*row 2*/}
             <Grid item xs={12} md={12} lg={12}>

src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js

@@ -55,7 +55,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
                     contact = "電話: " + phone?.countryCode + " " + phone?.phoneNumber
                 }
 
-                if (faxNo) {
+                if (faxNo && faxNo?.faxNumber) {
                     if (contact != "")
                         contact = contact + ", "
                     contact = contact + "傳真:" + faxNo?.countryCode + " " + faxNo?.faxNumber

src/pages/PublicNoticeSearch_GLD/DataGrid.js

@@ -72,12 +72,15 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'remarks',
             headerName: 'Remarks',
             flex: 3,
+            valueGetter: (params) => {
+                return (params?.value)?(params?.value):"";
+            }
         },
         {
             id: 'status',
             field: 'status',
             headerName: 'Status',
-            width: 100,
+            width: 150,
             renderCell: (params) => {
                 return [StatusUtils.getStatusEng(params)]
             },
@@ -110,6 +113,8 @@ export default function SearchPublicNoticeTable({ recordList }) {
                 pageSizeOptions={[5, 10]}
                 autoHeight
                 sx={{
+                    paddingLeft: 4,
+                    paddingRight: 4,
                     boxShadow: 1,
                     border: 1,
                     borderColor: '#DDD',

src/pages/PublicNoticeSearch_GLD/SearchForm.js

@@ -9,17 +9,20 @@ import MainCard from "components/MainCard";
 import { useForm } from "react-hook-form";
 import * as React from "react";
 import * as ComboData from "utils/ComboData";
+import * as DateUtils from "utils/DateUtils";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
-const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => {
+const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria }) => {
 
     const [type, setType] = React.useState([]);
-    const [status, setStatus] = React.useState();
-    const [orgLabel, setOrgLabel] = React.useState();
-    const [orgId, setOrgId] = React.useState();
+    const [status, setStatus] = React.useState({ key: 0, label: 'All',  type: 'all' });
+    const [orgSelected, setOrgSelected] = React.useState({});
     const [orgCombo, setOrgCombo] = React.useState();
 
+    const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
+    const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
+
 
     const { reset, register, handleSubmit } = useForm()
     const onSubmit = (data) => {
@@ -35,8 +38,8 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => {
             dateFrom: data.dateFrom,
             dateTo: data.dateTo,
             contact: data.contact,
-            status: status?.type,
-            orgId: orgId?.key,
+            status: (status?.type&&status?.type!= 'all')?status?.type:"",
+            orgId: (orgSelected?.key&&orgSelected?.key>0)?orgSelected?.key:"",
         };
         applySearch(temp);
     };
@@ -49,10 +52,8 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => {
 
     function resetForm() {
         setType([]);
-        setStatus();
-        setOrgId();
-        setOrgLabel("");
-        //orgComboRef.current.clearValue();
+        setStatus({ key: 0, label: 'All',  type: 'all' });
+        setOrgSelected({});
         reset();
     }
 
@@ -77,6 +78,10 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => {
                             {...register("appNo")}
                             id='appNo'
                             label="App No."
+                            defaultValue={searchCriteria.appNo}
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
 
@@ -87,6 +92,11 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => {
                             id="dateFrom"
                             type="date"
                             label="Submit Date(From)"
+                            defaultValue={searchCriteria.dateFrom}
+                            InputProps={{inputProps: { max: maxDate} }}
+                            onChange={(newValue)=>{
+                                setMinDate(DateUtils.dateStr(newValue));
+                            }}
                             InputLabelProps={{
                                 shrink: true
                             }}
@@ -100,9 +110,14 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => {
                                 shrink: true
                             }}
                             {...register("dateTo")}
+                            InputProps={{inputProps: { min: minDate} }}
+                            onChange={(newValue)=>{
+                                setMaxDate(DateUtils.dateStr(newValue));
+                            }}
                             id="dateTo"
                             type="date"
                             label="Submit Date(To)"
+                            defaultValue={searchCriteria.dateTo}
                         />
                     </Grid>
 
@@ -112,7 +127,12 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => {
                             {...register("contact")}
                             id="contact"
                             label="Conact Person"
+                            defaultValue={searchCriteria.contact}
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
+                        
                     </Grid>
 
                     <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
@@ -120,8 +140,10 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => {
                             {...register("status")}
                             disablePortal
                             id="status"
+                            filterOptions={(options)=>options}
                             options={ComboData.publicNoticeStaticEng}
                             value={status}
+                            inputValue={status?.label}
                             onChange={(event, newValue) => {
                                 if (newValue !== null) {
                                     setStatus(newValue);
@@ -132,6 +154,9 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => {
                                     label="Status"
                                 />
                             )}
+                            InputLabelProps={{
+                                shrink: true
+                            }}
                         />
                     </Grid>
 
@@ -143,20 +168,22 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData }) => {
                                     disablePortal
                                     id="orgId"
                                     options={orgCombo}
-                                    inputValue={orgLabel}
+                                    value={orgSelected}
+                                    inputValue={(orgSelected?.label)?orgSelected?.label: ""}
                                     onChange={(event, newValue) => {
                                         if (newValue !== null) {
-                                            setOrgId(newValue);
-                                            setOrgLabel(newValue.label);
-                                        } else {
-                                            setOrgLabel("");
+                                            setOrgSelected(newValue);
                                         }
                                     }}
                                     renderInput={(params) => (
                                         <TextField {...params}
                                             label="Organization"
+                                            InputLabelProps={{
+                                                shrink: true
+                                            }}
                                         />
                                     )}
+                                    
                                 />
                             </Grid>
                             : <></>

src/pages/PublicNoticeSearch_GLD/index.js

@@ -6,6 +6,7 @@ import MainCard from "components/MainCard";
 import * as UrlUtils from "utils/ApiPathConst";
 import * as React from "react";
 import * as HttpUtils from "utils/HttpUtils";
+import * as DateUtils from "utils/DateUtils";
 
 import Loadable from 'components/Loadable';
 const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
@@ -18,7 +19,10 @@ const UserSearchPage_Individual = () => {
 
     const [record,setRecord] = React.useState([]);
     const [orgCombo,setOrgCombo] = React.useState([]);
-    const [searchCriteria, setSearchCriteria] = React.useState({});
+    const [searchCriteria, setSearchCriteria] = React.useState({
+        dateTo: DateUtils.dateStr(new Date()),
+        dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
+    });
     const [onReady, setOnReady] = React.useState(false);
 
     React.useEffect(() => {
@@ -68,6 +72,7 @@ const UserSearchPage_Individual = () => {
                 <SearchForm 
                 applySearch={applySearch}
                 orgComboData={orgCombo}
+                searchCriteria={searchCriteria}
                 />
             </Grid>
             {/*row 2*/}

src/pages/pnspsUserSearchPage_Organization/UserSearchForm_Organization.js

@@ -15,7 +15,7 @@ import * as React from "react";
 const UserSearchForm_Organization = ({applySearch}) => {
 
     const [type, setType] = useState([]);
-    const [accountFilter, setAccountFilter] = useState("Active");
+    const [accountFilter, setAccountFilter] = useState("All");
 
 
     const { reset, register, handleSubmit } = useForm()
@@ -34,13 +34,14 @@ const UserSearchForm_Organization = ({applySearch}) => {
             phone: data.phone,
             brNoStr: data.brNoStr,
             orgName: data.orgName,
-            accountFilter: accountFilter,
+            accountFilter: accountFilter=="All"?null:accountFilter,
         };
         applySearch(temp);
     };
 
     function resetForm(){
         setType([]);
+        setAccountFilter("All");
         reset();
     }
 
@@ -119,7 +120,7 @@ const UserSearchForm_Organization = ({applySearch}) => {
                                   {...register("accountFilter")}
                                     disablePortal
                                     id="accountFilter"
-                                    options={["Active","Locked","Not verified"]}
+                                    options={["All", "Active","Locked","Not verified"]}
                                     value={accountFilter}   
                                     onChange={(event, newValue) => {
                                     if (newValue !== null){

src/utils/ComboData.js

@@ -12,6 +12,7 @@ export const country = ["香港","內地","澳門"];
 export const accountFilter = [{ id: 1, key: 1, label: 'Active',  type: 'active' }, { id: 2, key: 2, label: 'Locked',  type: 'locked' }, { id: 3, key: 3, label: 'Not verified',  type: 'notVerified' }]; 
 
 export const publicNoticeStatic = [
+    { key: 0, label: '全部',  type: 'all' }, 
     { key: 1, label: '已提交',  type: 'submitted' }, 
     { key: 2, label: '已拒絕',  type: 'rejected' }, 
     { key: 3, label: '已取消',  type: 'cancelled' }, 
@@ -23,6 +24,7 @@ export const publicNoticeStatic = [
 ];
 
 export const publicNoticeStaticEng = [
+    { key: 0, label: 'All',  type: 'all' }, 
     { key: 1, label: 'Submitted',  type: 'submitted' }, 
     { key: 2, label: 'Rejected',  type: 'rejected' }, 
     { key: 3, label: 'Cancelled',  type: 'cancelled' }, 

src/utils/HttpUtils.js

@@ -45,7 +45,7 @@ export const postWithFiles = ({url, params, files, onSuccess, onFail, onError})
         if(typeof(params[key]) ==='object'){
             formData.append(key, JSON.stringify(params[key]));
         }else{
-            formData.append(key, params[key]?params[key]:null);
+            formData.append(key, params[key]);
         } 
     }
     

yarn.lock

@@ -2634,6 +2634,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-input-mask@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/@types/react-input-mask/-/react-input-mask-3.0.2.tgz"
+  integrity sha512-WTli3kUyvUqqaOLYG/so2pLqUvRb+n4qnx2He5klfqZDiQmRyD07jVIt/bco/1BrcErkPMtpOm+bHii4Oed6cQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-is@^18.2.1":
   version "18.2.1"
   resolved "https://registry.npmjs.org/@types/react-is/-/react-is-18.2.1.tgz"
@@ -5998,6 +6005,13 @@ internal-slot@^1.0.3, internal-slot@^1.0.4, internal-slot@^1.0.5:
     has "^1.0.3"
     side-channel "^1.0.4"
 
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 ipaddr.js@^2.0.1:
   version "2.1.0"
   resolved "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.1.0.tgz"
@@ -7214,7 +7228,7 @@ lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -8718,6 +8732,15 @@ react-hook-form@^7.45.4:
   resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.45.4.tgz"
   integrity sha512-HGDV1JOOBPZj10LB3+OZgfDBTn+IeEsNOKiq/cxbQAIbKaiJUe/KV8DBUzsx0Gx/7IG/orWqRRm736JwOfUSWQ==
 
+react-input-mask@^3.0.0-alpha.2:
+  version "3.0.0-alpha.2"
+  resolved "https://registry.npmjs.org/react-input-mask/-/react-input-mask-3.0.0-alpha.2.tgz"
+  integrity sha512-9U7qL+mvDMOJcbOFPdt6Vj+zzmCMNnBjhhjGDrL8BGQmymgvMVKhu/oOVfAkl+5VWOsLr+G3EhZOmae5fBcAkA==
+  dependencies:
+    invariant "^2.2.4"
+    prop-types "^15.7.2"
+    warning "^4.0.3"
+
 react-is@^16.12.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -10340,6 +10363,13 @@ walker@^1.0.7:
   dependencies:
     makeerror "1.0.12"
 
+warning@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack@^2.4.0:
   version "2.4.0"
   resolved "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz"