From 38b8304e6b668693889be8eace9159a929dec757 Mon Sep 17 00:00:00 2001
From: "jason.lam" <jason.lam@2fi-solutions.com.hk>
Date: Mon, 8 Jan 2024 16:25:25 +0800
Subject: [PATCH] update individual user page

---
 .../UserInformationCard_Individual.js         | 76 +++++++++----------
 .../User/DetailsPage_Individual/index.js      |  4 +-
 src/utils/FieldUtils.js                       | 14 ++--
 3 files changed, 45 insertions(+), 49 deletions(-)

diff --git a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js
index f1b76d6..3213ec9 100644
--- a/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js
+++ b/src/pages/User/DetailsPage_Individual/UserInformationCard_Individual.js
@@ -148,7 +148,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                         <Grid container maxWidth justifyContent="flex-start">
                             {editMode ?
                                 <>
-                                    <Grid item sx={{ ml: 3, mr: 3 }}>
+                                    <Grid item sx={{ mr: 3 }}>
                                         <Button
                                             size="large"
                                             variant="contained"
@@ -179,7 +179,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                 </>
                                 :
                                 <>
-                                    <Grid item sx={{ ml: 3, mr: 3 }}>
+                                    <Grid item sx={{ mr: 3 }}>
                                         <Button
                                             size="large"
                                             variant="contained"
@@ -197,12 +197,12 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                         </Grid>
                     </Grid>
                     {/*end top button*/}
-                    <Typography variant="h4" sx={{ mt: 3, ml: 3, mb: 2, mr: 3, borderBottom: "1px solid black" }}>
+                    <Typography variant="h4" sx={{ mt: 3, mb: 2, borderBottom: "1px solid black" }}>
                         Individual User Details
                     </Typography>
                     <Grid item xs={12} sm={12} md={12} lg={12}>
-                        <Grid container spacing={1} sx={{ mt: 3, ml: 3, mb: 2, mr: 3}}>
-                            <Grid item xs={12} sm={12} md={12} lg={4}>
+                        <Grid container>
+                            <Grid item xs={12} sm={12} md={12} lg={4} >
                                 {FieldUtils.getTextField({
                                     label: "Username:",
                                     valueName: "username",
@@ -220,7 +220,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                 })}
                             </Grid>
 
-                            <Grid item lg={4}>
+                            <Grid item  xs={12} sm={12} md={12} lg={4}>
                                 {FieldUtils.getTextField({
                                     label: "Created Date:",
                                     valueName: "createDate",
@@ -228,7 +228,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                     form: formik
                                 })}
                             </Grid>
-                            <Grid item lg={4}>
+                            <Grid item  xs={12} sm={12} md={12} lg={4}>
                                 {FieldUtils.getTextField({
                                     label: "Prefix:",
                                     valueName: "prefix",
@@ -237,7 +237,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                 })}
                             </Grid>
 
-                            <Grid item lg={4}>
+                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                 {FieldUtils.getTextField({
                                     label: "Chinese Name:",
                                     valueName: "chName",
@@ -246,7 +246,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                 })}
                             </Grid>
 
-                            <Grid item lg={4}>
+                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                 {FieldUtils.getTextField({
                                     label: "Last Updated:",
                                     valueName: "modifieDate",
@@ -255,7 +255,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                 })}
                             </Grid>
 
-                            <Grid item lg={4}>
+                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                 {FieldUtils.getComboField({
                                     label: "ID Type:",
                                     valueName: "idDocType",
@@ -283,7 +283,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                 })}
                             </Grid>
 
-                            <Grid item lg={4}>
+                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                 {FieldUtils.getPhoneField({
                                     label: "Contact Tel:",
                                     valueName: {
@@ -295,15 +295,14 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                 })}
                             </Grid>
 
-                            <Grid item lg={4}>
+                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                 <Grid container alignItems={"center"}>
                                     <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
                                         <Typography variant="h5">Verified:</Typography>
                                     </Grid>
-
                                     {
                                         currentUserData.verifiedBy || editMode ?
-                                            <Grid item xs={12} md={6} lg={6}>
+                                            <Grid item xs={12} sm={12} md={6} lg={6} sx={{mb:2}}>
                                                 {FieldUtils.initField({
                                                     valueName: "verifiedStatus",
                                                     disabled: true,
@@ -312,16 +311,15 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                             </Grid>
                                             :
                                             <>
-                                                <Grid item xs={10} md={4} lg={4}>
+                                                <Grid item xs={8} sm={8} md={6} lg={4} sx={{mb:2}}>
                                                     {FieldUtils.initField({
                                                         valueName: "verifiedStatus",
                                                         disabled: true,
                                                         form: formik,
                                                     })}
                                                 </Grid>
-                                                <Grid item xs={1}>
+                                                <Grid item xs={2} sm={2} md={2} lg={2} sx={{ml:2 ,mb:2}}>
                                                     <Button
-                                                        size="large"
                                                         variant="contained"
                                                         sx={{
                                                             textTransform: 'capitalize',
@@ -338,17 +336,17 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                 </Grid>
                             </Grid>
 
-                            <Grid item lg={4}>
-                                <Grid container alignItems={"center"}>
-                                    <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
+                            <Grid xs={12} sm={12} md={12} lg={4}>
+                                <Grid container alignItems={"center"} sx={{mb:2}}>
+                                    <Grid item xs={12} sm={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
                                         <Typography variant="h5">ID No.:</Typography>
                                     </Grid>
 
-                                    <Grid item xs={12} md={6} lg={6}>
+                                    <Grid item xs={12} sm={12} md={9} lg={6}>
                                         <Grid container>
-                                            {formik.values.idDocType == "HKID" ?
+                                            {formik.values.idDocType === "HKID" ?
                                                 <>
-                                                    <Grid item lg={8}>
+                                                    <Grid item xs={6} sm={6} md={6} lg={7.5} sx={{mr:1}}>
                                                         {FieldUtils.initField({
                                                             valueName: "identification",
                                                             disabled: (!editMode),
@@ -365,7 +363,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                                         })}
 
                                                     </Grid>
-                                                    <Grid item lg={4}>
+                                                    <Grid item xs={2} sm={2} md={2} lg={2}>
                                                         {FieldUtils.initField({
                                                             valueName: "checkDigit",
                                                             disabled: (!editMode),
@@ -373,7 +371,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                                         })}
                                                     </Grid>
                                                 </> :
-                                                <Grid item lg={12}>
+                                                <Grid item xs={12} sm={6} md={6} lg={12}>
                                                     {FieldUtils.initField({
                                                         valueName: "identification",
                                                         disabled: (!editMode),
@@ -386,7 +384,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                 </Grid>
                             </Grid>
 
-                            <Grid item lg={4}>
+                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                 {FieldUtils.getPhoneField({
                                     label: "Fax No.:",
                                     valueName: {
@@ -398,7 +396,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                 })}
                             </Grid>
 
-                            <Grid item lg={4}>
+                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                 {FieldUtils.getTextField({
                                     label: "Last Login:",
                                     valueName: "lastLoginDate",
@@ -407,7 +405,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                 })}
                             </Grid>
 
-                            <Grid item lg={4}>
+                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                 {FieldUtils.getComboField({
                                     label: "Country:",
                                     valueName: "country",
@@ -417,7 +415,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                 })}
                             </Grid>
 
-                            <Grid item lg={4}>
+                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                 {FieldUtils.getTextField({
                                     label: "Email:",
                                     valueName: "emailAddress",
@@ -427,15 +425,15 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                             </Grid>
 
 
-                            <Grid item lg={4}>
-                                <Grid container alignItems={"center"}>
-                                    <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
+                            <Grid item xs={12} sm={12} md={12} lg={4}>
+                                <Grid container alignItems={"center"} sx={{mb:2}}>
+                                    <Grid item xs={12} sm={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
                                         <Typography variant="h5">Status:</Typography>
                                     </Grid>
 
                                     {
                                         editMode ?
-                                            <Grid item xs={12} md={6} lg={6}>
+                                            <Grid item xs={8} sm={8} md={6} lg={6}>
                                                 {FieldUtils.initField({
                                                     valueName: "status",
                                                     disabled: true,
@@ -444,7 +442,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                             </Grid>
                                             :
                                             <>
-                                                <Grid item lg={4}>
+                                                <Grid item xs={8} sm={8} md={6} lg={4}>
                                                     {FieldUtils.initField({
                                                         valueName: "status",
                                                         disabled: true,
@@ -452,9 +450,8 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                                     })}
                                                 </Grid>
                                                 {locked ?
-                                                    <Grid item lg={1} sx={{ml:1}}>
+                                                    <Grid item xs={2} sm={2} md={2} lg={2}  sx={{ml:2}}>
                                                         <Button
-                                                            size="large"
                                                             variant="contained"
                                                             color="success"
                                                             sx={{
@@ -467,9 +464,8 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                                         </Button>
                                                     </Grid>
                                                     :
-                                                    <Grid item lg={1} sx={{ml:1}}>
+                                                    <Grid item xs={2} sm={2} md={2} lg={2} sx={{ml:2}}>
                                                         <Button
-                                                            size="large"
                                                             variant="contained"
                                                             color="error"
                                                             sx={{
@@ -487,7 +483,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                 </Grid>
                             </Grid>
 
-                            <Grid item lg={4}>
+                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                 {FieldUtils.getAddressField({
                                     label: "Address:",
                                     valueName: ["addressLine1", "addressLine2", "addressLine3"],
@@ -496,7 +492,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => {
                                 })}
                             </Grid>
 
-                            <Grid item lg={4}>
+                            <Grid item xs={12} sm={12} md={12} lg={4}>
                                 {FieldUtils.getComboField({
                                     label: "District:",
                                     valueName: "district",
diff --git a/src/pages/User/DetailsPage_Individual/index.js b/src/pages/User/DetailsPage_Individual/index.js
index 3dbece4..91bc636 100644
--- a/src/pages/User/DetailsPage_Individual/index.js
+++ b/src/pages/User/DetailsPage_Individual/index.js
@@ -105,11 +105,11 @@ const UserMaintainPage_Individual = () => {
                             />
                         </Grid>
                         <Grid item xs={12} md={12} lg={12}>
-                            <MainCard elevation={0} border={false} content={false} sx={{maxWidth: '100%', mr:2}}>
+                            <MainCard elevation={0} border={false} content={false} sx={{maxWidth: '100%', mr:2, width: "-webkit-fill-available"}}>
                                 <Typography variant="h4" sx={{ mt: 4, ml: 2, mb: 2, mr: 2, borderBottom: "1px solid black" }}>
                                     Files
                                 </Typography>
-                                <Grid item xs={12} sm={12} md={12} lg={12} sx={{maxWidth: '95%'}}>
+                                <Grid item xs={12} sm={12} md={12} lg={12} sx={{maxWidth: '100%'}}>
                                     <FileList
                                         refId={params.id}
                                         refType={"identification"}
diff --git a/src/utils/FieldUtils.js b/src/utils/FieldUtils.js
index 457f3f4..8e6fb02 100644
--- a/src/utils/FieldUtils.js
+++ b/src/utils/FieldUtils.js
@@ -27,12 +27,12 @@ export const getDateField = ({ label, valueName, form, disabled }) => {
 }
 
 export const getTextField = ({ label, valueName, form, disabled }) => {
-    return <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} >
+    return <Grid container alignItems={"center"} xs={12} sm={12} md={12} lg={12} sx={{mb:2}}>
         <Grid item xs={12} sm={12} md={3} lg={3}
             sx={{ display: 'flex', alignItems: 'center' }}>
             <Typography variant="h5">{label}</Typography>
         </Grid>
-        <Grid item xs={12} md={6} lg={6}>
+        <Grid item xs={12} sm={12} md={6} lg={6}>
             {initField({
                 type: "text",
                 valueName: valueName,
@@ -71,7 +71,7 @@ export const getTextArea = ({ label, valueName, form, disabled, inputProps, ...p
 
 export const getPhoneField = ({ label, valueName, form, disabled }) => {
 
-    return <Grid container alignItems={"center"}>
+    return <Grid container alignItems={"center"} sx={{mb:2}}>
         <Grid item xs={12} md={3} lg={3}
             sx={{ display: 'flex', alignItems: 'center' }}>
             <Typography variant="h5">{label}</Typography>
@@ -123,7 +123,7 @@ export const getAddressField = ({ label, valueName, form, disabled }) => {
             </Grid>
         </Grid>
         <Grid item xs={12} md={6} lg={6}>
-            <Grid item lg={12}>
+            <Grid item lg={12} sx={{mb:2}}>
                 {initField({
                     type: "text",
                     valueName: valueName[0],
@@ -131,7 +131,7 @@ export const getAddressField = ({ label, valueName, form, disabled }) => {
                     disabled: disabled
                 })}
             </Grid>
-            <Grid item lg={12}>
+            <Grid item lg={12} sx={{mb:2}}>
                 {initField({
                     type: "text",
                     valueName: valueName[1],
@@ -139,7 +139,7 @@ export const getAddressField = ({ label, valueName, form, disabled }) => {
                     disabled: disabled
                 })}
             </Grid>
-            <Grid item lg={12}>
+            <Grid item lg={12} sx={{mb:2}}>
                 {initField({
                     type: "text",
                     valueName: valueName[2],
@@ -152,7 +152,7 @@ export const getAddressField = ({ label, valueName, form, disabled }) => {
 }
 
 export const getComboField = ({ label, dataList, valueName, form, disabled, getOptionLabel, onInputChange, onChange, filterOptions, ...props }) => {
-    return <Grid container alignItems={"center"}>
+    return <Grid container alignItems={"center"} sx={{mb:2}}>
         <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>
         <Typography variant="h5">{label}</Typography>
         </Grid>