@@ -19,7 +19,7 @@ | |||
} | |||
#navbar div li{ | |||
list-style: none; | |||
padding: 0 20px; | |||
padding: 0 1vw; | |||
position: relative; | |||
} | |||
#navbar div li a{ | |||
@@ -30,6 +30,15 @@ | |||
color: black; | |||
transition: 0.3s ease-in-out; | |||
} | |||
#navbar div li a span{ | |||
font-size: 1vw !important; | |||
} | |||
#navbar div li a svg{ | |||
font-size: 1vw !important; | |||
} | |||
#navbar div li a:hover{ | |||
color: #0C489E; | |||
} | |||
@@ -97,7 +97,7 @@ function Header(props) { | |||
<Link className="proof" to='/proof/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Proof</Typography></Link> | |||
</li> | |||
<li> | |||
<Link className="paymentTop" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Payment</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} /></Link> | |||
<Link className="paymentTop" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Payment</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1vw' }} /></Link> | |||
<ul className='dropdown'> | |||
<li> | |||
<Link className="payment" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Online Payment Record</Typography></Link> | |||
@@ -117,7 +117,7 @@ function Header(props) { | |||
</ul> | |||
</li> | |||
<li> | |||
<Link className="client" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Client</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} /></Link> | |||
<Link className="client" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Client</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1vw' }} /></Link> | |||
<ul className='dropdown'> | |||
<li> | |||
<Link className="userSearchview" to='/userSearchview'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>Users (GLD)</Typography></Link> | |||
@@ -138,7 +138,7 @@ function Header(props) { | |||
</ul> | |||
</li> | |||
<li> | |||
<Link className="setting" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Settings</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1.0rem' }} /></Link> | |||
<Link className="setting" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Settings</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1vw' }} /></Link> | |||
<ul className='dropdown'> | |||
<li> | |||
<Link className="userProfileGld" to='/user/profile'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2, mt: 1, mb: 1 }}>My Profile</Typography></Link> | |||
@@ -89,7 +89,7 @@ const ApplicationDetailCard = ({ formData, }) => { | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1, ml: 1 }}> | |||
<Grid item xs={12} md={5} lg={5} sx={{ mb: 1}}> | |||
<Grid container alignItems={"left"}> | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
@@ -36,7 +36,6 @@ const ClientDetailCard = ( | |||
) => { | |||
// const params = useParams(); | |||
const [currentApplicationDetailData, setCurrentApplicationDetailData] = useState({}); | |||
const [orgDetailData, setOrgDetailData] = useState({}); | |||
const [brExpiryDate,setBrExpiryDate] = useState(""); | |||
const [brNo,setBrNo] = useState(""); | |||
const [onReady, setOnReady] = useState(false); | |||
@@ -50,40 +49,48 @@ const ClientDetailCard = ( | |||
//if user data from parent are not null | |||
if (Object.keys(applicationDetailData).length > 0 && applicationDetailData !== undefined) { | |||
setCurrentApplicationDetailData(applicationDetailData.userData); | |||
if (!applicationDetailData.orgDetail == null){ | |||
setOrgDetailData(applicationDetailData.orgDetail.data); | |||
} | |||
if (!applicationDetailData.companyName1 == null) { | |||
setCompanyName(applicationDetailData.companyName); | |||
} else { | |||
if (applicationDetailData.orgDetail != null){ | |||
var orgDetail = applicationDetailData.orgDetail?.data; | |||
setBrExpiryDate(DateUtils.dateValue(orgDetail?.brExpiryDate)); | |||
setBrNo(orgDetail?.brNo); | |||
const companyNameData = { | |||
enCompanyName: applicationDetailData.userData.enCompanyName, | |||
chCompanyName: applicationDetailData.userData.chCompanyName | |||
enCompanyName: orgDetail?.enCompanyName, | |||
chCompanyName: orgDetail?.chCompanyName | |||
} | |||
setCompanyName(companyNameData) | |||
}else{ | |||
var userData = applicationDetailData.userData; | |||
setBrExpiryDate(DateUtils.dateValue(userData?.brExpiryDate)); | |||
setBrNo(userData?.brNo); | |||
const companyNameData = { | |||
enCompanyName: userData?.enCompanyName, | |||
chCompanyName: userData?.chCompanyName | |||
} | |||
setCompanyName(companyNameData) | |||
} | |||
setOnReady(true); | |||
} | |||
}, [applicationDetailData]); | |||
useEffect(() => { | |||
//if state data are ready and assign to different field | |||
// console.log(currentApplicationDetailData) | |||
if (Object.keys(currentApplicationDetailData).length > 0) { | |||
if( currentApplicationDetailData.orgId!=null){ | |||
if (Object.keys(orgDetailData).length > 0) { | |||
setBrExpiryDate(DateUtils.dateValue(orgDetailData.brExpiryDate)); | |||
setBrNo(orgDetailData.brNo); | |||
setOnReady(true); | |||
}else{ | |||
setBrExpiryDate(DateUtils.dateValue(currentApplicationDetailData.brExpiryDate)); | |||
setBrNo(currentApplicationDetailData.brNo); | |||
setOnReady(true); | |||
} | |||
}else{ | |||
setOnReady(true); | |||
} | |||
} | |||
}, [currentApplicationDetailData]); | |||
// useEffect(() => { | |||
// //if state data are ready and assign to different field | |||
// // console.log(currentApplicationDetailData) | |||
// if (Object.keys(currentApplicationDetailData).length > 0) { | |||
// if( currentApplicationDetailData.orgId!=null){ | |||
// if (Object.keys(orgDetailData).length > 0) { | |||
// setBrExpiryDate(DateUtils.dateValue(orgDetailData.brExpiryDate)); | |||
// setBrNo(orgDetailData.brNo); | |||
// setOnReady(true); | |||
// }else{ | |||
// setBrExpiryDate(DateUtils.dateValue(currentApplicationDetailData.brExpiryDate)); | |||
// setBrNo(currentApplicationDetailData.brNo); | |||
// setOnReady(true); | |||
// } | |||
// }else{ | |||
// setOnReady(true); | |||
// } | |||
// } | |||
// }, [currentApplicationDetailData, orgDetailData]); | |||
useEffect(() => { | |||
if (brNo != undefined && brNo.length > 0) { | |||
@@ -142,24 +142,24 @@ const ApplicationDetailCard = ( | |||
const latestData = {}; | |||
responseData.forEach(item => { | |||
const { appId, timeDiff } = item; | |||
if (latestData[appId] === undefined || timeDiff < latestData[appId].timeDiff) { | |||
latestData[appId] = item; | |||
} | |||
const { appId, timeDiff } = item; | |||
if (latestData[appId] === undefined || timeDiff < latestData[appId].timeDiff) { | |||
latestData[appId] = item; | |||
} | |||
}); | |||
const latestDataObjects = Object.values(latestData); | |||
const filteredData = latestDataObjects.filter(item => item.timeDiff > 20 || item.status !== "APPR"); | |||
const filteredAppIds = filteredData.map(item => item.appId); | |||
const appIdsNotInData = appIdList.filter(appId => !latestDataObjects.some(item => item.appId === appId)); | |||
const combinedAppIdsArray = [...appIdsNotInData, ...filteredAppIds]; | |||
const readyToPayment = appIdList.every(appId => combinedAppIdsArray.includes(appId)); | |||
if (readyToPayment){ | |||
if (readyToPayment) { | |||
setIsPopUp(true); | |||
return; | |||
}else{ | |||
} else { | |||
const appIdsInData = appIdList.filter(appId => !combinedAppIdsArray.some(item => item === appId)); | |||
const HoldingApplication = latestDataObjects.filter(item => appIdsInData.includes(item.appId)); | |||
const resultString = HoldingApplication.map(item => item.appNo).join(' , '); | |||
@@ -211,11 +211,11 @@ const ApplicationDetailCard = ( | |||
onClick={cancelledClick()} | |||
color="edit" | |||
disabled={currentApplicationDetailData.status == "rejected" | |||
|| currentApplicationDetailData.status == "cancelled" | |||
|| (!currentApplicationDetailData.creditor | |||
&& currentApplicationDetailData.status == "paid") | |||
|| (currentApplicationDetailData.creditor | |||
&& currentApplicationDetailData.status == "confirmed") | |||
|| currentApplicationDetailData.status == "cancelled" | |||
|| (!currentApplicationDetailData.creditor | |||
&& currentApplicationDetailData.status == "paid") | |||
|| (currentApplicationDetailData.creditor | |||
&& currentApplicationDetailData.status == "confirmed") | |||
} | |||
title={intl.formatMessage({ id: 'cancel' })} | |||
startIcon={<CloseIcon />} | |||
@@ -265,7 +265,7 @@ const ApplicationDetailCard = ( | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
<Grid item xs={12} sm={12} md={9} lg={5} sx={{ mb: 1, ml: 1 }}> | |||
<Grid item xs={12} sm={12} md={9} lg={5} sx={{ mb: 1}}> | |||
<Grid container alignItems={"center"}> | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
@@ -274,7 +274,7 @@ const ApplicationDetailCard = ( | |||
</Typography></FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={4} lg={4}> | |||
<Grid item xs={12} md={9} lg={9}> | |||
<FormControl variant="outlined"> | |||
{currentApplicationDetailData.status ? StatusUtils.getStatusByTextIntl(currentApplicationDetailData.status, false, intl) : ""} | |||
</FormControl> | |||
@@ -505,12 +505,23 @@ const ApplicationDetailCard = ( | |||
<Grid item xs={12} md={3} lg={3} | |||
sx={{ display: 'flex', alignItems: 'center' }}> | |||
<FormLabel><Typography variant="pnspsFormParagraph"> | |||
<FormattedMessage id="currencyPrice" />(HK$): | |||
<FormattedMessage id="currencyAmount" />(HK$): | |||
</Typography></FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
<FormLabel><Typography variant="pnspsFormParagraph">{FormatUtils.currencyFormat(fee)}</Typography></FormLabel> | |||
<FormControl variant="outlined" fullWidth disabled> | |||
<OutlinedInput | |||
size="small" | |||
value={FormatUtils.currencyFormat(fee)} | |||
sx={{ | |||
"& .MuiInputBase-input.Mui-disabled": { | |||
WebkitTextFillColor: "#000000", | |||
background: "#f8f8f8", | |||
}, | |||
}} | |||
/> | |||
</FormControl> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
@@ -618,7 +629,18 @@ const ApplicationDetailCard = ( | |||
<FormLabel><Typography variant="pnspsFormParagraph"><FormattedMessage id="careOf" />:</Typography></FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
<Typography variant="pnspsFormParagraph">{currentApplicationDetailData.careOf}</Typography> | |||
<FormControl variant="outlined" sx={{ width: '100%' }} disabled> | |||
<OutlinedInput | |||
size="small" | |||
value={currentApplicationDetailData.careOf} | |||
sx={{ | |||
"& .MuiInputBase-input.Mui-disabled": { | |||
WebkitTextFillColor: "#000000", | |||
background: "#f8f8f8", | |||
}, | |||
}} | |||
/> | |||
</FormControl> | |||
</Grid> | |||
</Grid> | |||
</Grid> : null | |||
@@ -632,7 +654,18 @@ const ApplicationDetailCard = ( | |||
</Typography></FormLabel> | |||
</Grid> | |||
<Grid item xs={12} md={9} lg={9}> | |||
<Typography variant="pnspsFormParagraph">{currentApplicationDetailData.remarks}</Typography> | |||
<FormControl variant="outlined" sx={{ width: '100%' }} disabled> | |||
<OutlinedInput | |||
size="small" | |||
value={currentApplicationDetailData.remarks} | |||
sx={{ | |||
"& .MuiInputBase-input.Mui-disabled": { | |||
WebkitTextFillColor: "#000000", | |||
background: "#f8f8f8", | |||
}, | |||
}} | |||
/> | |||
</FormControl> | |||
</Grid> | |||
</Grid> | |||
</Grid> | |||
@@ -45,27 +45,27 @@ const Index = () => { | |||
role: responseData.role, | |||
abilities: responseData.abilities, | |||
creditor: responseData.creditor, | |||
locale: responseData.preferLocale, | |||
//locale: responseData.preferLocale, | |||
//avatar: require('src/assets/images/users/avatar-3.png').default, | |||
} | |||
const data = { ...userData, accessToken: responseData.accessToken, refreshToken: responseData.refreshToken } | |||
if(responseData.type === "GLD"){ | |||
// setLocale("en"); | |||
localStorage.setItem('locale','en'); | |||
}else{ | |||
if (responseData.preferLocale ==="zh_HK"){ | |||
// setLocale("zh-HK"); | |||
localStorage.setItem('locale','zh-HK'); | |||
} | |||
if (responseData.preferLocale ==="zh-CN"){ | |||
// setLocale("zh-CN"); | |||
localStorage.setItem('locale','zh-CN'); | |||
} | |||
if (response.data.preferLocale ==="en"){ | |||
// setLocale("zh-CN"); | |||
localStorage.setItem('locale','en'); | |||
} | |||
} | |||
const data = { ...userData, accessToken: responseData.accessToken, refreshToken: responseData.refreshToken } | |||
// if(responseData.type === "GLD"){ | |||
// // setLocale("en"); | |||
// localStorage.setItem('locale','en'); | |||
// }else{ | |||
// if (responseData.preferLocale ==="zh_HK"){ | |||
// // setLocale("zh-HK"); | |||
// localStorage.setItem('locale','zh-HK'); | |||
// } | |||
// if (responseData.preferLocale ==="zh-CN"){ | |||
// // setLocale("zh-CN"); | |||
// localStorage.setItem('locale','zh-CN'); | |||
// } | |||
// if (response.data.preferLocale ==="en"){ | |||
// // setLocale("zh-CN"); | |||
// localStorage.setItem('locale','en'); | |||
// } | |||
// } | |||
dispatch(handleLogin(data)) | |||
navigate('/dashboard'); | |||
}, | |||