From 431224b7d5247f9df24cbbdbab2033bb7d20bd79 Mon Sep 17 00:00:00 2001
From: anna <anna.ho@2fi-solutions.com.hk>
Date: Fri, 22 Mar 2024 12:38:07 +0800
Subject: [PATCH] grid UI

---
 src/pages/DemandNote/Create/DataGrid.js       |  6 ++
 src/pages/DemandNote/Create/SearchForm.js     | 97 +++++++++----------
 .../SearchPage/OrganizationTable.js           |  6 ++
 src/pages/Payment/Search_GLD/DataGrid.js      |  3 +
 src/pages/Proof/Search_GLD/DataGrid.js        |  6 ++
 .../Details_GLD/ApplicationDetailCard.js      |  4 +-
 src/pages/PublicNotice/Search_GLD/DataGrid.js |  4 +
 .../UserTable_Individual.js                   |  7 ++
 .../UserTable_Organization.js                 |  7 ++
 9 files changed, 85 insertions(+), 55 deletions(-)

diff --git a/src/pages/DemandNote/Create/DataGrid.js b/src/pages/DemandNote/Create/DataGrid.js
index 5935975..333634d 100644
--- a/src/pages/DemandNote/Create/DataGrid.js
+++ b/src/pages/DemandNote/Create/DataGrid.js
@@ -40,6 +40,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'appNo',
             headerName: 'App No.',
             flex: 1,
+            minWidth: 150,
             renderCell: (params) => {
                 return clickableLink('/application/' + params.row.id, params.row.appNo)
             },
@@ -48,6 +49,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'status',
             headerName: 'Status',
             flex: 1,
+            minWidth: 200,
             renderCell: (params) => {
                 return PublicNoteStatusUtils.getStatusByTextEng(params.row.status, params.row.creditor);
             }
@@ -56,6 +58,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'date',
             headerName: 'Submit Date',
             flex: 1,
+            minWidth: 200,
             renderCell: (params) => {
                 return DateUtils.datetimeStr(params.row.created);
             }
@@ -65,6 +68,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'contactPerson',
             headerName: 'Contact Person',
             flex: 1,
+            minWidth: 200,
             renderCell: (params) => {
                 let company = params.row.enCompanyName != null?params.row.enCompanyName: params.row.chCompanyName;
                 company = company != null ? company : "";
@@ -95,6 +99,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'groupNo',
             headerName: 'Gazette Group',
             flex: 1,
+            minWidth: 150,
             valueGetter: (params) => {
                 return (params?.value) ? (params?.value) : "";
             }
@@ -104,6 +109,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'fee',
             headerName: 'Amount($)',
             flex: 1,
+            minWidth: 150,
             valueGetter: (params) => {
                 return FormatUtils.currencyFormat(params?.value);
             }
diff --git a/src/pages/DemandNote/Create/SearchForm.js b/src/pages/DemandNote/Create/SearchForm.js
index 4185eb4..b6cc3d2 100644
--- a/src/pages/DemandNote/Create/SearchForm.js
+++ b/src/pages/DemandNote/Create/SearchForm.js
@@ -14,8 +14,8 @@ import * as UrlUtils from "utils/ApiPathConst";
 import * as HttpUtils from "utils/HttpUtils";
 import { useNavigate } from "react-router-dom";
 import { notifyDownloadSuccess } from 'utils/CommonFunction';
-import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
-import {ThemeProvider} from "@emotion/react";
+import { PNSPS_BUTTON_THEME } from "../../../themes/buttonConst";
+import { ThemeProvider } from "@emotion/react";
 import { useIntl } from "react-intl";
 
 
@@ -28,7 +28,7 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
     const [failText, setFailText] = React.useState("");
 
     const [confirmPopUp, setConfirmPopUp] = React.useState(false);
-    const [dueDate, setDueDate] = React.useState(DateUtils.dateValue(DateUtils.dateValue((new Date().setDate(new Date().getDate() +1)))));
+    const [dueDate, setDueDate] = React.useState(DateUtils.dateValue(DateUtils.dateValue((new Date().setDate(new Date().getDate() + 1)))));
 
     const [isSuccessPopUp, setIsSuccessPopUp] = React.useState(false);
     const [resultCount, setResultCount] = React.useState(0);
@@ -91,16 +91,16 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
             setIsFailPopUp(true);
             return;
         } else {
-            setDueDate(DateUtils.dateValue((new Date().setDate(new Date().getDate() +1))));
+            setDueDate(DateUtils.dateValue((new Date().setDate(new Date().getDate() + 1))));
             setConfirmPopUp(true);
         }
     };
 
-    const doDnCreate=()=>{
+    const doDnCreate = () => {
         setConfirmPopUp(false);
         HttpUtils.post({
             url: UrlUtils.DEMAND_NOTE_CREATE + "/" + issueSelected.id,
-            params:{
+            params: {
                 dueDate: dueDate
             },
             onSuccess: function (responseData) {
@@ -113,7 +113,7 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
 
     const fileDownload = () => {
         HttpUtils.fileDownload({
-            method:'post',
+            method: 'post',
             url: UrlUtils.DEMAND_NOTE_EXPORT,
             params: {
                 "dnIdList": dnIdList
@@ -126,7 +126,7 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
 
     const onNavigate = () => {
         setIsSuccessPopUp(false);
-        if(resultCount > 0)
+        if (resultCount > 0)
             navigate('/paymentPage/demandNote');
     };
 
@@ -148,17 +148,16 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
 
             <form>
                 {/*row 1*/}
-                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
+                <Grid container sx={{ backgroundColor: '#ffffff', pt:4, pl:4, pb:4 }} width="98%" spacing={3} >
                     {/*row 1*/}
-                    <Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
+                    <Grid item justifyContent="space-between" alignItems="center" >
                         <Typography variant="h5" >
                             Please Select Gazette Issue :
                         </Typography>
                     </Grid>
                     {/*row 2*/}
 
-                    <Grid container display="flex" alignItems={"center"} sx={{mb:3}}>
-                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3 }}>
+                    <Grid item xs={9} s={6} md={5} lg={3}>
                         <Autocomplete
                             disablePortal
                             size="small"
@@ -182,39 +181,31 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
                             )}
                         />
                     </Grid>
-                    {/* <Grid item sx={{ ml: 3, mr: 3}} >
-                        <Button
-                            size="large"
-                            variant="contained"
-                            onClick={onPreView}
-                            sx={{
-                                textTransform: 'capitalize',
-                                alignItems: 'end'
-                            }}>
-                            <Typography variant="h5">Preview</Typography>
-                        </Button>
-                    </Grid> */}
-                    <Grid item sx={{ ml: 3, mr: 3 }} >
+                    <Grid item >
                         <ThemeProvider theme={PNSPS_BUTTON_THEME}>
-                        <Button
-                            variant="contained"
-                            onClick={onSubmit}
-                            color="success"
-                        >
-                            Create
-                        </Button>
+                            <Button
+                                variant="contained"
+                                onClick={onSubmit}
+                                color="success"
+                                minWidth={150}
+                            >
+                                Create
+                            </Button>
                         </ThemeProvider>
                     </Grid>
 
-                    <Grid item sx={{ ml: 3, mr: 3 }} >
-                        <Typography variant="h5">Pending Payment: {paymentCount}</Typography>
-                    </Grid>
+                    <Grid item >
+                        <Grid container display="flex" alignItems={"center"} spacing={3}>
+                            <Grid item  >
+                                <Typography variant="h5">Pending Payment: {paymentCount}</Typography>
+                            </Grid>
 
-                    <Grid item sx={{ ml: 3, mr: 3 }} >
-                        <Typography variant="h5">Pending Publish: {publishCount}</Typography>
+                            <Grid item  >
+                                <Typography variant="h5">Pending Publish: {publishCount}</Typography>
+                            </Grid>
+                        </Grid>
                     </Grid>
                 </Grid>
-                </Grid>
             </form>
             <div>
                 <Dialog
@@ -254,22 +245,22 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
                         <Grid container alignItems={"center"}>
                             <Grid item md={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                                 <Typography variant="h4" style={{ padding: '16px' }}>Due Date: </Typography>
-                          
+
                             </Grid>
                             <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
-                            <TextField
-                                fullWidth
-                                type="date"
-                                defaultValue={dueDate}
-                                InputProps={{ inputProps: { min: DateUtils.dateValue(new Date()) } }}
-                                onChange={(newValue) => {
-                                    setDueDate(newValue.currentTarget.value)
-                                }}
-                                InputLabelProps={{
-                                    shrink: true
-                                }}
-                            />
-                        </Grid>
+                                <TextField
+                                    fullWidth
+                                    type="date"
+                                    defaultValue={dueDate}
+                                    InputProps={{ inputProps: { min: DateUtils.dateValue(new Date()) } }}
+                                    onChange={(newValue) => {
+                                        setDueDate(newValue.currentTarget.value)
+                                    }}
+                                    InputLabelProps={{
+                                        shrink: true
+                                    }}
+                                />
+                            </Grid>
                         </Grid>
                     </DialogContent>
                     <DialogActions>
@@ -300,7 +291,7 @@ const SearchPublicNoticeForm = ({ applySearch, issueComboData, _paymentCount, _p
                                 <Grid item md={12}>
                                     <Button
                                         size="large"
-                                        onClick={()=>fileDownload()}
+                                        onClick={() => fileDownload()}
                                         sx={{
                                             textTransform: 'capitalize',
                                             alignItems: 'end'
diff --git a/src/pages/Organization/SearchPage/OrganizationTable.js b/src/pages/Organization/SearchPage/OrganizationTable.js
index f6bb0ce..e969d1e 100644
--- a/src/pages/Organization/SearchPage/OrganizationTable.js
+++ b/src/pages/Organization/SearchPage/OrganizationTable.js
@@ -46,24 +46,28 @@ export default function OrganizationTable({ recordList }) {
             field: 'brNo',
             headerName: 'BR No.',
             flex: 1,
+            minWidth: 150,
         },
         {
             id: 'enCompanyName',
             field: 'enCompanyName',
             headerName: 'Name (Eng)',
             flex: 1,
+            minWidth: 200,
         },
         {
             id: 'chCompanyName',
             field: 'chCompanyName',
             headerName: 'Name (Ch)',
             flex: 1,
+            minWidth: 150,
         },
         {
             id: 'contactTel',
             field: 'contactTel',
             headerName: 'Phone',
             flex: 1,
+            minWidth: 150,
             renderCell: (params) => {
                 let phone = JSON.parse(params.value);
                 let contact = "";
@@ -78,6 +82,7 @@ export default function OrganizationTable({ recordList }) {
             field: 'brExpiryDate',
             headerName: 'BR Expiry Date',
             flex: 1,
+            minWidth: 150,
             valueGetter: (params) => {
                 return DateUtils.dateValue(params?.value);
             }
@@ -87,6 +92,7 @@ export default function OrganizationTable({ recordList }) {
             field: 'creditor',
             headerName: 'Credit Client',
             width: 150,
+            minWidth: 150,
             valueGetter: (params) => {
                 return params?.value?"Yes":"";
             }
diff --git a/src/pages/Payment/Search_GLD/DataGrid.js b/src/pages/Payment/Search_GLD/DataGrid.js
index 988f28a..dc66cc9 100644
--- a/src/pages/Payment/Search_GLD/DataGrid.js
+++ b/src/pages/Payment/Search_GLD/DataGrid.js
@@ -42,6 +42,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'appNos',
             headerName: 'Application No.',
             flex: 1,
+            minWidth: 150,
             renderCell: (params) => {
                 let appNo = params.row.appNos;
                 return <div style={{ margin: 4 }}>{appNo}</div>
@@ -51,6 +52,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'actions',
             headerName: 'Transaction No.',
             flex: 1,
+            minWidth: 200,
             cellClassName: 'actions',
             renderCell: (params) => {
                 return clickableLink('/paymentPage/details/' + params.row.id, params.row.transNo);
@@ -61,6 +63,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'transDateTime',
             headerName: 'Transaction Date',
             flex: 1,
+            minWidth: 150,
             valueGetter: (params) => {
                 return DateUtils.dateValue(params?.value);
             }
diff --git a/src/pages/Proof/Search_GLD/DataGrid.js b/src/pages/Proof/Search_GLD/DataGrid.js
index 5c9b8fa..2aeabdf 100644
--- a/src/pages/Proof/Search_GLD/DataGrid.js
+++ b/src/pages/Proof/Search_GLD/DataGrid.js
@@ -46,6 +46,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             id: 'actions',
             headerName: 'Status',
             flex: 1,
+            minWidth: 100,
             renderCell: (params) => {
                 return ProofStatus.getStatus_Eng(params);
             },
@@ -55,6 +56,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'created',
             headerName: 'Proof Issue Date',
             flex: 1,
+            minWidth: 200,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params?.value);
             }
@@ -64,6 +66,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'replyDate',
             headerName: 'Confirmed/ Return Date',
             flex: 1,
+            minWidth: 200,
             valueGetter: (params) => {
                 return params?.value ? DateUtils.datetimeStr(params?.value) : "";
             }
@@ -73,6 +76,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'contactPerson',
             headerName: 'Client',
             flex: 1,
+            minWidth: 200,
             renderCell: (params) => {
                 let company = params.row.enCompanyName != null?params.row.enCompanyName: params.row.chCompanyName;
                 company = company != null ? company : "";
@@ -103,6 +107,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'groupTitle',
             headerName: 'Gazette Group',
             flex: 1,
+            minWidth: 200,
             valueGetter: (params) => {
                 return (params?.value) ? (params?.value) : "";
             }
@@ -112,6 +117,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             field: 'fee',
             headerName: 'Amount ($)',
             flex: 1,
+            minWidth: 200,
             valueGetter: (params) => {
                 return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
             }
diff --git a/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js b/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js
index 397fa18..1ac4159 100644
--- a/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js
+++ b/src/pages/PublicNotice/Details_GLD/ApplicationDetailCard.js
@@ -374,7 +374,7 @@ const ApplicationDetailCard = (
 
                                         <Grid item xs={12} md={8} lg={8}>
                                             <Stack direction="row">
-                                                <FormControl variant="outlined" sx={{ width: '25%' }} disabled >
+                                                <FormControl variant="outlined" sx={{ width: '25%', minWidth: 100, }} disabled >
                                                     <OutlinedInput
                                                         size="small"
                                                         {...register("contactTelNo.countryCode",
@@ -459,7 +459,7 @@ const ApplicationDetailCard = (
 
                                         <Grid item xs={12} md={8} lg={8}>
                                             <Stack direction="row">
-                                                <FormControl variant="outlined" sx={{ width: '25%' }} disabled>
+                                                <FormControl variant="outlined" sx={{ width: '25%', minWidth: 100, }} disabled>
                                                     <OutlinedInput
                                                         size="small"
                                                         {...register("contactFaxNo.countryCode",
diff --git a/src/pages/PublicNotice/Search_GLD/DataGrid.js b/src/pages/PublicNotice/Search_GLD/DataGrid.js
index e08bb78..8dfec13 100644
--- a/src/pages/PublicNotice/Search_GLD/DataGrid.js
+++ b/src/pages/PublicNotice/Search_GLD/DataGrid.js
@@ -61,6 +61,7 @@ export default function SearchPublicNoticeTable({ recordList, reloadFunction })
             field: 'created',
             headerName: 'Submit Date',
             flex: 1,
+            minWidth: 200,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params?.value);
             }
@@ -69,6 +70,7 @@ export default function SearchPublicNoticeTable({ recordList, reloadFunction })
             id: 'contactPerson',
             field: 'contactPerson',
             headerName: 'Client',
+            minWidth: 250,
             flex: 2,
             renderCell: (params) => {
                 let company = params.row.enCompanyName != null ? params.row.enCompanyName : params.row.chCompanyName;
@@ -100,6 +102,7 @@ export default function SearchPublicNoticeTable({ recordList, reloadFunction })
             field: 'groupNo',
             headerName: 'Gazette Code',
             flex: 0.5,
+            minWidth: 150,
             valueGetter: (params) => {
                 return (params?.value) ? (params?.value) : "";
             }
@@ -109,6 +112,7 @@ export default function SearchPublicNoticeTable({ recordList, reloadFunction })
             field: 'issueId',
             headerName: 'Gazette Issue No.',
             flex: 1.5,
+            minWidth: 350,
             valueGetter: (params) => {
                 return params.row.issueYear
                     + " Vol. " + FormatUtils.zeroPad(params.row.issueVolume, 3)
diff --git a/src/pages/User/SearchPage_Individual/UserTable_Individual.js b/src/pages/User/SearchPage_Individual/UserTable_Individual.js
index 37d3218..26a6c63 100644
--- a/src/pages/User/SearchPage_Individual/UserTable_Individual.js
+++ b/src/pages/User/SearchPage_Individual/UserTable_Individual.js
@@ -47,24 +47,28 @@ export default function UserTable_Individual({ recordList }) {
             field: 'username',
             headerName: 'User Name',
             flex: 1,
+            minWidth: 150,
         },
         {
             id: 'enName',
             field: 'enName',
             headerName: 'Name (Eng)',
             flex: 1,
+            minWidth: 150,
         },
         {
             id: 'chName',
             field: 'chName',
             headerName: 'Name (Ch)',
             flex: 1,
+            minWidth: 150,
         },
         {
             id: 'mobileNumber',
             field: 'mobileNumber',
             headerName: 'Phone',
             flex: 1,
+            minWidth: 150,
             valueGetter: (params) => {
                 if (params.value) {
                     let tel = JSON.parse(params.value);
@@ -80,12 +84,14 @@ export default function UserTable_Individual({ recordList }) {
             field: 'emailAddress',
             headerName: 'Email',
             flex: 1,
+            minWidth: 150,
         },
         {
             id: 'lastLogin',
             field: 'lastLogin',
             headerName: 'Last Login',
             flex: 1,
+            minWidth: 200,
             valueGetter: (params) => {
                 if (params.value) {
                     return DateUtils.datetimeStr(params.value);
@@ -98,6 +104,7 @@ export default function UserTable_Individual({ recordList }) {
             field: 'locked',
             headerName: 'Status',
             flex: 1,
+            minWidth: 100,
             valueGetter: (params) => {
                 if (params.value) {
                     return "Locked";
diff --git a/src/pages/User/SearchPage_Organization/UserTable_Organization.js b/src/pages/User/SearchPage_Organization/UserTable_Organization.js
index fa711ce..518902d 100644
--- a/src/pages/User/SearchPage_Organization/UserTable_Organization.js
+++ b/src/pages/User/SearchPage_Organization/UserTable_Organization.js
@@ -51,36 +51,42 @@ export default function UserTable_Organization({recordList}) {
             field: 'username',
             headerName: 'Username',
             flex: 1,
+            minWidth: 150,
         },
         {
             id: 'contactPerson',
             field: 'contactPerson',
             headerName: 'Name',
             flex: 1,
+            minWidth: 150,
         },
         {
             id: 'enCompanyName',
             field: 'enCompanyName',
             headerName: 'Company (Eng)',
             flex: 1,
+            minWidth: 200,
         },
         {
             id: 'chCompanyName',
             field: 'chCompanyName',
             headerName: 'Company (Ch)',
             flex: 1,
+            minWidth: 150,
         },
         {
             id: 'brNo',
             field: 'brNo',
             headerName: 'BR No.',
             flex: 1,
+            minWidth: 150,
         },
         {
             id: 'lastLogin',
             field: 'lastLogin',
             headerName: 'Last Login',
             flex: 1,
+            minWidth: 200,
             valueGetter:(params)=>{
                 if(params.value){
                     return DateUtils.datetimeStr(params.value);
@@ -93,6 +99,7 @@ export default function UserTable_Organization({recordList}) {
             field: 'locked',
             headerName: 'Status',
             flex: 1,
+            minWidth: 100,
             valueGetter:(params)=>{
                 if(params.value){
                     return "Locked";