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

src/components/FiDataGrid.js

@@ -1,8 +1,10 @@
 // material-ui
 import * as React from 'react';
 import {
-    DataGrid,
+    DataGrid, GridOverlay,
 } from "@mui/x-data-grid";
+import {FormattedMessage, useIntl} from "react-intl";
+import {Typography} from '@mui/material';
 
 // ==============================|| EVENT TABLE ||============================== //
 
@@ -10,6 +12,7 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
     hideFooterSelectedRowCount, rowModesModel, editMode, 
     pageSizeOptions, filterItems,
     ...props }) {
+    const intl = useIntl();
     const [_rows, set_rows] = React.useState([]);
     const [_columns, set_columns] = React.useState([]);
     const [_rowModesModel, set_rowModesModel] = React.useState({});
@@ -116,12 +119,38 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
             set_filterItems(filterItems);
         }
     }, [filterItems]);
-    
+
+    function CustomNoRowsOverlay() {
+        return (
+            <GridOverlay>
+                <Typography variant="body1">
+                    <FormattedMessage id="rowsPerPage" />
+                </Typography>
+            </GridOverlay>
+        );
+    }
+
+    const CustomPagination = (props) => {
+        const { pagination } = props;
+        const { page, pageSize, rowCount } = pagination;
+
+        const startIndex = page * pageSize + 1;
+        const endIndex = Math.min((page + 1) * pageSize, rowCount);
+
+        return (
+            <div>
+                <div>{`${startIndex}-${endIndex} YES ${rowCount}`}</div>
+                {/* Render other pagination controls */}
+            </div>
+        );
+    };
+
     return (
         <DataGrid
             {...props}
             rows={_rows}
             columns={_columns}
+            disableColumnMenu
             rowModesModel={_rowModesModel}
             pageSizeOptions={_pageSizeOptions}
             editMode={_editMode}
@@ -129,6 +158,19 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
             hideFooterSelectedRowCount={myHideFooterSelectedRowCount}
             filterModel={{items:_filterItems}}
             sx={_sx}
+            slots={{
+                noRowsOverlay: () => (
+                    CustomNoRowsOverlay()
+                )
+            }}
+            components={{
+                Pagination: CustomPagination,
+            }}
+            componentsProps={{
+                pagination: {
+                    labelRowsPerPage: intl.formatMessage({id: 'rowsPerPage'}),
+                }
+            }}
         />
     );
 }

src/pages/Organization/DetailPage/OrganizationCard.js

@@ -17,7 +17,7 @@ const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingCo
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 import { notifySaveSuccess } from 'utils/CommonFunction';
-import {useIntl} from "react-intl";
+import { useIntl } from "react-intl";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
@@ -48,17 +48,17 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
         enableReinitialize: true,
         initialValues: currentUserData,
         validationSchema: yup.object().shape({
-            enCompanyName: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'userRequireEnglishName'}))),
-            chCompanyName: yup.string().max(255, displayErrorMsg(intl.formatMessage({id: 'userRequireChineseName'}))).nullable(),
-            addressLine1: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({id: 'validateAddressLine1'}))),
-            addressLine2: yup.string().max(255, displayErrorMsg(intl.formatMessage({id: 'noMoreThen255Words'}))),
-            addressLine3: yup.string().max(255, displayErrorMsg(intl.formatMessage({id: 'noMoreThen255Words'}))),
-            fax_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))).nullable(),
-            tel_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({id: 'requireDialingCode'}))),
-            phoneNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'requiredValidNumber'}))).required(displayErrorMsg(intl.formatMessage({id: 'requireContactNumber'}))),
-            faxNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({id: 'require8Number'}))).nullable(),
-            brExpiryDate: yup.string().min(8).required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertValidityDate'}))),
-            brNo: yup.string().required(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInBusinessRegCertNumber'}))).test('checkBrNoFormat', displayErrorMsg(displayErrorMsg(intl.formatMessage({id: 'pleaseFillInValidBusinessRegCertNumber'}))), function (value) {
+            enCompanyName: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({ id: 'userRequireEnglishName' }))),
+            chCompanyName: yup.string().max(255, displayErrorMsg(intl.formatMessage({ id: 'userRequireChineseName' }))).nullable(),
+            addressLine1: yup.string().max(255).required(displayErrorMsg(intl.formatMessage({ id: 'validateAddressLine1' }))),
+            addressLine2: yup.string().max(255, displayErrorMsg(intl.formatMessage({ id: 'noMoreThen255Words' }))),
+            addressLine3: yup.string().max(255, displayErrorMsg(intl.formatMessage({ id: 'noMoreThen255Words' }))),
+            fax_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({ id: 'requireDialingCode' }))).nullable(),
+            tel_countryCode: yup.string().min(3, displayErrorMsg(intl.formatMessage({ id: 'requireDialingCode' }))),
+            phoneNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'requiredValidNumber' }))).required(displayErrorMsg(intl.formatMessage({ id: 'requireContactNumber' }))),
+            faxNumber: yup.string().min(8, displayErrorMsg(intl.formatMessage({ id: 'require8Number' }))).nullable(),
+            brExpiryDate: yup.string().min(8).required(displayErrorMsg(intl.formatMessage({ id: 'pleaseFillInBusinessRegCertValidityDate' }))),
+            brNo: yup.string().required(displayErrorMsg(intl.formatMessage({ id: 'pleaseFillInBusinessRegCertNumber' }))).test('checkBrNoFormat', displayErrorMsg(displayErrorMsg(intl.formatMessage({ id: 'pleaseFillInValidBusinessRegCertNumber' }))), function (value) {
                 var brNo_pattern = /[0-9]{8}/
                 if (value !== undefined) {
                     if (value.match(brNo_pattern)) {
@@ -109,9 +109,9 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
         }
     });
 
-    useEffect(()=>{
+    useEffect(() => {
         setEditModeFun(editMode);
-    },[editMode]);
+    }, [editMode]);
 
     useEffect(() => {
         if (Object.keys(userData).length > 0) {
@@ -230,34 +230,39 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                         <Typography variant="h5">Edit</Typography>
                                     </Button>
                                 </Grid>
-                                <Grid item sx={{ ml: 3, mr: 3 }}>
-                                    <Button
-                                        size="large"
-                                        variant="contained"
-                                        color="orange"
-                                        onClick={()=>setCreditorConfirmPopUp(true)}
-                                        sx={{
-                                            textTransform: 'capitalize',
-                                            alignItems: 'end'
-                                        }}
-                                    >
-                                        <Typography variant="h5">Mark as Creditor</Typography>
-                                    </Button>
-                                </Grid>
-                                <Grid item sx={{ ml: 3, mr: 3 }}>
-                                    <Button
-                                        size="large"
-                                        variant="contained"
-                                        color="error"
-                                        onClick={()=>setNonCreditorConfirmPopUp(true)}
-                                        sx={{
-                                            textTransform: 'capitalize',
-                                            alignItems: 'end'
-                                        }}
-                                    >
-                                        <Typography variant="h5">Mark as Non-Creditor</Typography>
-                                    </Button>
-                                </Grid>
+
+                                {
+                                    currentUserData.creditor ?
+                                        <Grid item sx={{ ml: 3, mr: 3 }}>
+                                            <Button
+                                                size="large"
+                                                variant="contained"
+                                                color="error"
+                                                onClick={() => setNonCreditorConfirmPopUp(true)}
+                                                sx={{
+                                                    textTransform: 'capitalize',
+                                                    alignItems: 'end'
+                                                }}
+                                            >
+                                                <Typography variant="h5">Mark as Non-Creditor</Typography>
+                                            </Button>
+                                        </Grid>
+                                        :
+                                        <Grid item sx={{ ml: 3, mr: 3 }}>
+                                            <Button
+                                                size="large"
+                                                variant="contained"
+                                                color="orange"
+                                                onClick={() => setCreditorConfirmPopUp(true)}
+                                                sx={{
+                                                    textTransform: 'capitalize',
+                                                    alignItems: 'end'
+                                                }}
+                                            >
+                                                <Typography variant="h5">Mark as Creditor</Typography>
+                                            </Button>
+                                        </Grid>
+                                }
                             </>
                         }
                     </Grid>
@@ -363,7 +368,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                 valueName: "country",
                                 disabled: (!editMode && !createMode),
                                 dataList: ComboData.country,
-                                getOptionLabel: (option) => option.type? intl.formatMessage({ id: option.type }) : "",
+                                getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",
                                 form: formik
                             })}
                         </Grid>
@@ -374,7 +379,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                                 valueName: "district",
                                 disabled: (!editMode && !createMode),
                                 dataList: ComboData.district,
-                                getOptionLabel: (option) => option.type? intl.formatMessage({ id: option.type }) : "",
+                                getOptionLabel: (option) => option.type ? intl.formatMessage({ id: option.type }) : "",
                                 form: formik
                             })}
                         </Grid>
@@ -401,7 +406,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                         <Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Creditor?</Typography>
                     </DialogContent>
                     <DialogActions>
-                    <Button onClick={() => setCreditorConfirmPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
+                        <Button onClick={() => setCreditorConfirmPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
                         <Button onClick={() => markAsCreditor()}><Typography variant="h5">Confirm</Typography></Button>
                     </DialogActions>
                 </Dialog>
@@ -413,7 +418,7 @@ const OrganizationCard = ({ userData, loadDataFun, id, setEditModeFun }) => {
                         <Typography variant="h4" style={{ padding: '16px' }}>Are you sure mark as Non-Creditor?</Typography>
                     </DialogContent>
                     <DialogActions>
-                    <Button onClick={() => setNonCreditorConfirmPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
+                        <Button onClick={() => setNonCreditorConfirmPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
                         <Button onClick={() => markAsNonCreditor()}><Typography variant="h5">Confirm</Typography></Button>
                     </DialogActions>
                 </Dialog>

src/pages/authentication/Verify.js

@@ -63,7 +63,7 @@ export default function Verify() {
                             <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                 <CheckCircleOutlineIcon color="success" sx={{ width: "200px", height: "200px" }} />
                                 <Typography display="inline" variant="h4">帳戶已成功驗證。</Typography>
-                                <Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="h5">
+                                <Button variant="outlined" component={Link} to="/login"><Typography variant="h5">
                                     <FormattedMessage id="backToLogin"/>
                                 </Typography></Button>
                             </Stack>
@@ -73,7 +73,7 @@ export default function Verify() {
                                 {/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
                                 <CancelOutlinedIcon color="error" sx={{ width: "200px", height: "200px" }} />
                                 <Typography display="inline" variant="h4">驗證失敗，請聯絡相關的系統管理員協助。</Typography>
-                                <Button color="error" variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="h5">
+                                <Button color="error" variant="outlined" component={Link} to="/login"><Typography variant="h5">
                                     <FormattedMessage id="backToLogin"/>
                                 </Typography></Button>
                             </Stack>

src/pages/authentication/auth-forms/BusCustomFormWizard.js

@@ -323,8 +323,8 @@ const BusCustomFormWizard = (props) => {
     const { handleSubmit } = useForm({})
     const _onSubmit = () => {
         setLoding(true);
-        values.address4 = selectedAddress4
-        values.address5 = selectedAddress5
+        values.address4 = selectedAddress4.key
+        values.address5 = selectedAddress5.key
         // console.log(values)
         const busUserAddress = {
             "addressLine1": "",
@@ -1637,7 +1637,8 @@ const BusCustomFormWizard = (props) => {
                                         <Typography display="inline" variant="h4">
                                             <FormattedMessage id="emailSent"/>
                                         </Typography>
-                                        <Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="pnspsFormHeader">
+                                        <Button variant="outlined" component={Link} to="/login" >
+                                            <Typography variant="pnspsFormHeader">
                                             <FormattedMessage id="backToLogin"/>
                                         </Typography></Button>
                                     </Stack>
@@ -1646,8 +1647,10 @@ const BusCustomFormWizard = (props) => {
                                     <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                         {/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
                                         <CancelOutlinedIcon color="error" sx={{ width: "200px", height: "200px" }} />
-                                        <Typography display="inline" variant="h4">申請失敗，請稍後嘗試</Typography>
-                                        <Button color="error" variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="pnspsFormHeader">
+                                        <Typography display="inline" variant="h4">
+                                            <FormattedMessage id="registerFail" />
+                                        </Typography>
+                                        <Button color="error" variant="outlined" component={Link} to="/login" ><Typography variant="pnspsFormHeader">
                                             <FormattedMessage id="backToLogin"/>
                                         </Typography></Button>
                                     </Stack>

src/pages/authentication/auth-forms/CustomFormWizard.js

@@ -1801,7 +1801,7 @@ const CustomFormWizard = (props) => {
                                         <Typography display="inline" variant="h4">
                                             <FormattedMessage id="emailSent"/>
                                         </Typography>
-                                        <Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="pnspsFormHeader">
+                                        <Button variant="outlined" component={Link} to="/login" ><Typography variant="pnspsFormHeader">
                                             <FormattedMessage id="backToLogin"/>
                                         </Typography></Button>
                                     </Stack>
@@ -1810,8 +1810,10 @@ const CustomFormWizard = (props) => {
                                     <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                         {/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
                                         <CancelOutlinedIcon color="error" sx={{ width: "200px", height: "200px" }} />
-                                        <Typography display="inline" variant="h4">申請失敗，請稍後嘗試</Typography>
-                                        <Button color="error" variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="pnspsFormHeader">
+                                        <Typography display="inline" variant="h4">
+                                            <FormattedMessage id="registerFail" />
+                                        </Typography>
+                                        <Button color="error" variant="outlined" component={Link} to="/login" ><Typography variant="pnspsFormHeader">
                                             <FormattedMessage id="backToLogin"/>
                                         </Typography></Button>
                                     </Stack>

src/pages/authentication/auth-forms/IAmSmartFormWizard.js

@@ -1041,7 +1041,7 @@ const CustomFormWizard = (props) => {
                                         <Typography display="inline" variant="h4">
                                             <FormattedMessage id="emailSent"/>
                                         </Typography>
-                                        <Button variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="h5">
+                                        <Button variant="outlined" component={Link} to="/login" ><Typography variant="h5">
                                             <FormattedMessage id="backToLogin"/>
                                         </Typography></Button>
                                     </Stack>
@@ -1050,8 +1050,10 @@ const CustomFormWizard = (props) => {
                                     <Stack mt={1} direction="column" justifyContent="flex-start" alignItems="center" spacing={2}>
                                         {/* <Button disabled={true} hidden={true} variant="contained" type="submit" sx={{ fontSize: 12,height:'25px'}}>Submit</Button> */}
                                         <CancelOutlinedIcon color="error" sx={{ width: "200px", height: "200px" }} />
-                                        <Typography display="inline" variant="h4">申請失敗，請稍後嘗試</Typography>
-                                        <Button color="error" variant="outlined" component={Link} to="/login" sx={{ fontSize: 20, height: '60px' }}><Typography variant="h5">
+                                        <Typography display="inline" variant="h4">
+                                            <FormattedMessage id="registerFail" />
+                                        </Typography>
+                                        <Button color="error" variant="outlined" component={Link} to="/login" ><Typography variant="h5">
                                             <FormattedMessage id="backToLogin"/>
                                         </Typography></Button>
                                     </Stack>

src/themes/themeConst.js

@@ -182,7 +182,7 @@ export const PNSPS_THEME = createTheme({
                 input: {
                     padding: '10.5px 14px 10.5px 12px',
                     '&.MuiOutlinedInput-input.Mui-disabled': {
-                        WebkitTextFillColor: '#888888',
+                        WebkitTextFillColor: 'rgba(0, 0, 0, 1)',
                     },
                     color: 'rgba(0, 0, 0, 0.85)'
                 },
@@ -239,7 +239,8 @@ export const PNSPS_THEME = createTheme({
                         //padding: '1px', // Adjust the padding as needed
                     },
                     '& .MuiInputBase-input:disabled': {
-                        color: 'rgba(0, 0, 0, 0.8)',
+                        color: 'rgba(0, 0, 0, 1)',
+                        backgroundColor: "#f8f8f8",
                         //backgroundColor: '#777777', // Set background color to #777777 for disabled state
                         //color: '#010101', // Set text color to #111111 for disabled state
                     },

src/translations/en.json

@@ -39,6 +39,7 @@
   "submit": "Submit",
   "backToLogin": "Return to login page",
   "registerSubmitted": "Account application submitted successfully.",
+  "registerFail": "Application failed, please try again later",
 
   "mainPage": "Main Page",
   "myPublicNotice": "My Public Notice",
@@ -69,7 +70,7 @@
   "userPassword": "Password",
   "forgotUserPassword": "Forgot Password",
   "learnMore": "Learn More",
-  "createOrReActivate": "Create/reactivate account",
+  "createOrReActivate": "Create account",
   "usernameTaken": "This user login name has been registered, please use another user login name",
   "userRegistered": "This user has already registered. Please return to the login page and proceed with the login process.",
 
@@ -352,6 +353,8 @@
   "idNo": "ID No.",
   "country": "Country",
   "district": "District",
+  "noRecordFound": "No record found",
+  "rowsPerPage": "Rows Per Page",
 
   "Dashboard": "Dashboard",
   "event": "Event"

src/translations/zh-CN.json

@@ -39,6 +39,7 @@
   "submit": "提交",
   "backToLogin": "返回登入页面",
   "registerSubmitted": "帐户申请已成功提交。",
+  "registerFail": "申请失败，请稍后尝试",
 
   "mainPage": "主页",
   "myPublicNotice": "我的公共启事",
@@ -69,7 +70,7 @@
   "userPassword": "密码",
   "forgotUserPassword": "忘记密码",
   "learnMore": "了解更多",
-  "createOrReActivate": "建立/重新启动帐户",
+  "createOrReActivate": "建立帐户",
   "usernameTaken": "此用户登入名称已被注册，请使用其他用户登入名称",
   "userRegistered": "此用户已注册，请返回登入页面并进行登入流程。",
 
@@ -352,6 +353,8 @@
   "idNo": "身份证号码",
   "country": "国家",
   "district": "区",
+  "noRecordFound": "找不到記錄",
+  "rowsPerPage": "每页项数",
 
   "Dashboard": "仪表板",
   "event": "活动"

src/translations/zh-HK.json

@@ -39,6 +39,7 @@
   "submit": "提交",
   "backToLogin": "返回登入頁面",
   "registerSubmitted": "帳戶申請已成功提交。",
+  "registerFail": "申請失敗，請稍後嘗試",
 
   "mainPage": "主頁",
   "myPublicNotice": "我的公共啟事",
@@ -69,7 +70,7 @@
   "userPassword": "密碼",
   "forgotUserPassword": "忘記密碼",
   "learnMore": "了解更多",
-  "createOrReActivate": "建立/重新啟動帳戶",
+  "createOrReActivate": "建立帳戶",
   "usernameTaken": "此用戶登入名稱已被注冊，請使用其他用戶登入名稱",
   "userRegistered": "此用戶已注冊，請返回登入頁面並進行登入流程。",
 
@@ -332,7 +333,7 @@
   "unlock": "解鎖",
   "pendingFor": "待批核",
   "active": "生效中",
-  "primary": "源自",
+  "primary": "主要帳戶",
 
   "submitApplication": "提交公共啟事申請",
   "applicationSubheading": "提供你的啟事內容作排版，校對及計價。",
@@ -352,6 +353,8 @@
   "idNo": "身分證號碼",
   "country": "國家",
   "district": "區",
+  "noRecordFound": "找不到記錄",
+  "rowsPerPage": "每頁項數",
 
   "Dashboard": "儀表板",
   "event": "活動"

src/utils/FieldUtils.js

@@ -191,10 +191,6 @@ export const initField = ({ type, valueName, form, disabled, multiline, handleCh
         value={form.values[valueName]}
         disabled={disabled}
         sx={{
-            "& .MuiInputBase-input.Mui-disabled": {
-                WebkitTextFillColor: "#000000",
-                background: "#f8f8f8",
-            },
             width: width ? width : '100%'
         }}
         {...props}