@@ -107,24 +107,39 @@ function Header(props) { | |||||
<li> | <li> | ||||
<Link className="paymentTop" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Payment</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1vw' }} /></Link> | <Link className="paymentTop" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Payment</Typography><KeyboardArrowDownIcon sx={{ fontSize: '1vw' }} /></Link> | ||||
<ul className='dropdown'> | <ul className='dropdown'> | ||||
{ | |||||
isGranted("MAINTAIN_DEMANDNOTE") ? | |||||
<li> | |||||
<Link className="exportDemandNote" to='/paymentPage/exportGDN' ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Export for GDN</Typography></Link> | |||||
</li> | |||||
: | |||||
<></> | |||||
} | |||||
{ | { | ||||
isGranted("MAINTAIN_PAYMENT") ? | isGranted("MAINTAIN_PAYMENT") ? | ||||
<li> | <li> | ||||
<Link className="payment" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Online Payment Record</Typography></Link> | |||||
<Link className="application" to='/application/markAsPaid/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Mark Payment</Typography></Link> | |||||
</li> | </li> | ||||
: | : | ||||
<></> | <></> | ||||
} | } | ||||
{ | |||||
isGranted("MAINTAIN_PAYMENT") ? | |||||
<li> | |||||
<Link className="payment" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Online Payment Record</Typography></Link> | |||||
</li> | |||||
: | |||||
<></> | |||||
} | |||||
{ | { | ||||
isGranted("MAINTAIN_RECON") ? | isGranted("MAINTAIN_RECON") ? | ||||
<> | <> | ||||
<li> | <li> | ||||
<Link className="downloadXML" to='/gfmis/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>GFMIS Generate XML</Typography></Link> | <Link className="downloadXML" to='/gfmis/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>GFMIS Generate XML</Typography></Link> | ||||
</li> | </li> | ||||
<li> | |||||
<Link className="reconReport" to='/paymentPage/reconReport'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Recon Report</Typography></Link> | |||||
</li> | |||||
</> | </> | ||||
: | : | ||||
@@ -148,15 +163,18 @@ function Header(props) { | |||||
: | : | ||||
<></> | <></> | ||||
} | } | ||||
{ | |||||
isGranted("MAINTAIN_RECON") ? | |||||
<> | |||||
<li> | |||||
<Link className="reconReport" to='/paymentPage/reconReport'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Recon Report</Typography></Link> | |||||
</li> | |||||
</> | |||||
{ | |||||
isGranted("MAINTAIN_DEMANDNOTE") ? | |||||
<li> | |||||
<Link className="exportDemandNote" to='/paymentPage/exportGDN' ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Export for GDN</Typography></Link> | |||||
</li> | |||||
: | : | ||||
<></> | <></> | ||||
} | } | ||||
</ul> | </ul> | ||||
</li> | </li> | ||||
@@ -117,6 +117,10 @@ const ApplicationDetailCard = ( | |||||
setStatus("publish") | setStatus("publish") | ||||
} | } | ||||
const revokeClick = () => () => { | |||||
setStatus("revoke") | |||||
}; | |||||
const onProofClick = () => { | const onProofClick = () => { | ||||
if (applicationDetailData.data.groupNo) { | if (applicationDetailData.data.groupNo) { | ||||
HttpUtils.get({ | HttpUtils.get({ | ||||
@@ -264,6 +268,18 @@ const ApplicationDetailCard = ( | |||||
( | ( | ||||
(currentApplicationDetailData.status == "paid" && currentApplicationDetailData.creditor == 0) ? | (currentApplicationDetailData.status == "paid" && currentApplicationDetailData.creditor == 0) ? | ||||
<> | <> | ||||
<Button | |||||
// size="large" | |||||
variant="contained" | |||||
onClick={revokeClick()} | |||||
sx={{ | |||||
textTransform: 'capitalize', | |||||
alignItems: 'end', | |||||
backgroundColor: '#ffa733' | |||||
}}> | |||||
<ReplayIcon /> | |||||
<Typography ml={1} variant="h5">Revoke Payment</Typography> | |||||
</Button> | |||||
<Button | <Button | ||||
// size="large" | // size="large" | ||||
variant="contained" | variant="contained" | ||||
@@ -33,7 +33,8 @@ import { | |||||
SET_PUBLIC_NOTICE_STATUS_WITHDRAW, | SET_PUBLIC_NOTICE_STATUS_WITHDRAW, | ||||
SET_PUBLIC_NOTICE_STATUS_RESUBMIT, | SET_PUBLIC_NOTICE_STATUS_RESUBMIT, | ||||
SET_PUBLIC_NOTICE_STATUS_REVIEWED, | SET_PUBLIC_NOTICE_STATUS_REVIEWED, | ||||
SET_PUBLIC_NOTICE_STATUS_PUBLISH | |||||
SET_PUBLIC_NOTICE_STATUS_PUBLISH, | |||||
SET_PUBLIC_NOTICE_STATUS_REVOKE | |||||
} from "utils/ApiPathConst"; | } from "utils/ApiPathConst"; | ||||
const StatusChangeDialog = Loadable(lazy(() => import('./StatusChangeDialog'))); | const StatusChangeDialog = Loadable(lazy(() => import('./StatusChangeDialog'))); | ||||
import * as DateUtils from "utils/DateUtils"; | import * as DateUtils from "utils/DateUtils"; | ||||
@@ -187,6 +188,8 @@ const PublicNoticeDetail_GLD = () => { | |||||
onReSubmitClick(getReason); | onReSubmitClick(getReason); | ||||
} else if (getStatus == "publish") { | } else if (getStatus == "publish") { | ||||
onPublishClick(); | onPublishClick(); | ||||
} else if (getStatus == "revoke") { | |||||
onRevokeClick(); | |||||
} | } | ||||
} | } | ||||
}, [statusWindowAccepted]); | }, [statusWindowAccepted]); | ||||
@@ -310,6 +313,19 @@ const PublicNoticeDetail_GLD = () => { | |||||
} | } | ||||
}; | }; | ||||
const onRevokeClick = () => { | |||||
if (params.id <= 0) return; | |||||
HttpUtils.get({ | |||||
url: `${SET_PUBLIC_NOTICE_STATUS_REVOKE}/${params.id}`, | |||||
onSuccess: function () { | |||||
setOpen(false); | |||||
handleClose(); | |||||
loadApplicationDetail() | |||||
notifySaveSuccess() | |||||
} | |||||
}); | |||||
} | |||||
useEffect(() => { | useEffect(() => { | ||||
const status = applicationDetailData.data != undefined ? applicationDetailData.data.status : "" | const status = applicationDetailData.data != undefined ? applicationDetailData.data.status : "" | ||||
if (status === "submitted" && params.id > 0 && getUploadStatus) { | if (status === "submitted" && params.id > 0 && getUploadStatus) { | ||||
@@ -354,7 +370,7 @@ const PublicNoticeDetail_GLD = () => { | |||||
</Grid> | </Grid> | ||||
<Grid item xs={12} sm={12} md={12} lg={12}> | <Grid item xs={12} sm={12} md={12} lg={12}> | ||||
<Stack direction="row"> | <Stack direction="row"> | ||||
<Button title="Back" sx={{ ml: 3.5, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate("/application/search") }}> | |||||
<Button title="Back" sx={{ ml: 3.5, mt: 2.5 }} style={{ border: '2px solid' }} variant="outlined" onClick={() => { navigate(-1) }}> | |||||
<ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} /> | <ForwardIcon style={{ height: 30, width: 50, transform: "rotate(180deg)" }} /> | ||||
</Button> | </Button> | ||||
<Typography ml={4} mt={3} variant="h4">{title}</Typography> | <Typography ml={4} mt={3} variant="h4">{title}</Typography> | ||||
@@ -0,0 +1,251 @@ | |||||
// material-ui | |||||
import * as React from 'react'; | |||||
import { | |||||
//Link, | |||||
Button, | |||||
Grid, | |||||
Typography, | |||||
Stack, | |||||
Dialog, DialogTitle, DialogContent, DialogActions, | |||||
} from '@mui/material'; | |||||
import { | |||||
// GET_PUBLIC_NOTICE_LIST, | |||||
SET_PUBLIC_NOTICE_STATUS_MARK_AS_PAID, | |||||
GET_PUBLIC_NOTICE_OFFLINE_PAYMENT_LIST } from "utils/ApiPathConst"; | |||||
import * as HttpUtils from "utils/HttpUtils"; | |||||
import * as DateUtils from "utils/DateUtils"; | |||||
import * as FormatUtils from "utils/FormatUtils"; | |||||
// import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils"; | |||||
import { useNavigate } from "react-router-dom"; | |||||
import { FiDataGrid } from "components/FiDataGrid"; | |||||
import { notifyActionSuccess, clickableLink } from 'utils/CommonFunction'; | |||||
import { FormattedMessage, useIntl } from "react-intl"; | |||||
import * as utils from "auth/utils" | |||||
// ==============================|| EVENT TABLE ||============================== // | |||||
export default function SearchPublicNoticeTable({ searchCriteria }) { | |||||
const [rows, setRows] = React.useState([]); | |||||
const navigate = useNavigate() | |||||
const [selectedRowItems, setSelectedRowItems] = React.useState([]); | |||||
const [isConfirmPopUp, setIsConfirmPopUp] = React.useState(false); | |||||
const [isWarningPopUp, setIsWarningPopUp] = React.useState(false); | |||||
const intl = useIntl(); | |||||
const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria); | |||||
React.useEffect(() => { | |||||
set_searchCriteria(searchCriteria); | |||||
}, [searchCriteria]); | |||||
function genIssueNo(params) { | |||||
const issueNo = params.row.issueYear + " Vol. " + FormatUtils.zeroPad(params.row.issueVolume, 3) + ", No. " + FormatUtils.zeroPad(params.row.issueNo, 2) + ", " + DateUtils.dateFormat(params.row.issueDate, "D MMM YYYY (ddd)") | |||||
return issueNo | |||||
} | |||||
function genGroupNo(params) { | |||||
let groupNo = params.row.groupNo | |||||
if (groupNo != null) { | |||||
groupNo = <><br /><div>{groupNo}</div></> | |||||
} | |||||
return groupNo | |||||
} | |||||
const columns = [ | |||||
{ | |||||
field: 'actions', | |||||
headerName: 'Application No.', | |||||
sortable: false, | |||||
width: 150, | |||||
cellClassName: 'actions', | |||||
renderCell: (params) => { | |||||
return clickableLink('/application/' + params.id, params.row.appNo); | |||||
}, | |||||
}, | |||||
{ | |||||
id: 'contactPerson', | |||||
field: 'contactPerson', | |||||
headerName: 'Customer Name', | |||||
flex: 1, | |||||
minWidth: 50, | |||||
renderCell: (params) => { | |||||
let company = params.row.enCompanyName != null ? params.row.enCompanyName : params.row.chCompanyName; | |||||
company = company != null ? company : ""; | |||||
if (params.row.sysType != null && params.row.sysType == "dummy"){ | |||||
company = params.row.contactPerson | |||||
} | |||||
return <div> | |||||
{company} | |||||
</div>; | |||||
} | |||||
}, | |||||
{ | |||||
id: 'issueNoAndCode', | |||||
field: 'issueNoAndCode', | |||||
headerName: 'Gazette Issue No. / Gazette Code', | |||||
sortable: false, | |||||
flex: 1.5, | |||||
minWidth: 350, | |||||
renderCell: (params) => ( | |||||
<div> | |||||
{genIssueNo(params)} | |||||
{genGroupNo(params)} | |||||
</div> | |||||
) | |||||
}, | |||||
{ | |||||
id: 'paymentMethod', | |||||
field: 'paymentMethod', | |||||
headerName: 'Payment Method', | |||||
sortable: false, | |||||
minWidth: 250, | |||||
flex: 2, | |||||
renderCell: (params) => { | |||||
let paymentMethod = params.row.paymentMethod!=null?intl.formatMessage({ id: utils.getPaymentMethod(params.row.paymentMethod)}):"" | |||||
return (<> | |||||
{paymentMethod} | |||||
</>); | |||||
} | |||||
}, | |||||
{ | |||||
id: 'fee', | |||||
field: 'fee', | |||||
headerName: 'Amount(HK$)', | |||||
flex: 1, | |||||
minWidth: 100, | |||||
valueGetter: (params) => { | |||||
return FormatUtils.currencyFormat(params?.value); | |||||
} | |||||
}, | |||||
]; | |||||
function handleRowDoubleClick(params) { | |||||
// handleEditClick(params) | |||||
navigate('/application/' + params.id); | |||||
} | |||||
const doPublish = () => { | |||||
setIsConfirmPopUp(false); | |||||
let appIdList = []; | |||||
const datas = rows?.filter((row) => | |||||
selectedRowItems.includes(row.id) | |||||
); | |||||
// console.log(datas) | |||||
for (var i = 0; i < datas?.length; i++) { | |||||
appIdList.push(datas[i].id); | |||||
} | |||||
if (appIdList.length < 1) { | |||||
setIsWarningPopUp(true); | |||||
} else { | |||||
HttpUtils.post({ | |||||
url: SET_PUBLIC_NOTICE_STATUS_MARK_AS_PAID, | |||||
params: { | |||||
ids: appIdList | |||||
}, | |||||
onSuccess: () => { | |||||
searchCriteria.reload = new Date(); | |||||
notifyActionSuccess("Action Success!") | |||||
location.reload() | |||||
} | |||||
}); | |||||
} | |||||
} | |||||
return (<> | |||||
<div style={{ width: '100%' }}> | |||||
<Grid container direction="row" justifyContent="flex-start" alignItems="center" sx={{ p: 1 }} > | |||||
<Button | |||||
variant="contained" | |||||
onClick={() => setIsConfirmPopUp(true)} | |||||
> | |||||
Mark as Paid | |||||
</Button> | |||||
</Grid> | |||||
<FiDataGrid | |||||
checkboxSelection | |||||
disableRowSelectionOnClick | |||||
onRowSelectionModelChange={(newSelection) => { | |||||
setSelectedRowItems(newSelection); | |||||
}} | |||||
isRowSelectable={(params) => { | |||||
return (params.row.paymentMethod != "online" && params.row.status == "confirmed") | |||||
}} | |||||
columns={columns} | |||||
customPageSize={10} | |||||
getRowHeight={() => 'auto'} | |||||
onRowDoubleClick={handleRowDoubleClick} | |||||
doLoad={React.useMemo(() => ({ | |||||
url: GET_PUBLIC_NOTICE_OFFLINE_PAYMENT_LIST, | |||||
params: _searchCriteria, | |||||
callback: function (responseData) { | |||||
setRows(responseData?.records); | |||||
} | |||||
}), [_searchCriteria])} | |||||
/> | |||||
</div> | |||||
<div> | |||||
<Dialog | |||||
open={isConfirmPopUp} | |||||
onClose={() => setIsConfirmPopUp(false)} | |||||
PaperProps={{ | |||||
sx: { | |||||
minWidth: '40vw', | |||||
maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '30vw' }, | |||||
maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '50vh' } | |||||
} | |||||
}} | |||||
> | |||||
<DialogTitle> | |||||
<Typography variant="h3" > | |||||
<FormattedMessage id="confirm" /> | |||||
</Typography> | |||||
</DialogTitle> | |||||
<DialogContent style={{ display: 'flex', }}> | |||||
<Stack direction="column" justifyContent="space-between"> | |||||
<Typography variant="h4" style={{ padding: '16px' }}>Please Confirm to mark selected application as Paid.</Typography> | |||||
</Stack> | |||||
</DialogContent> | |||||
<DialogActions> | |||||
<Button onClick={() => setIsConfirmPopUp(false)} aria-label={intl.formatMessage({ id: 'close' })}> | |||||
<Typography variant="h5"> | |||||
<FormattedMessage id="close" /> | |||||
</Typography></Button> | |||||
<Button onClick={() => doPublish()} aria-label={intl.formatMessage({ id: 'confirm' })}> | |||||
<Typography variant="h5"> | |||||
<FormattedMessage id="confirm" /> | |||||
</Typography></Button> | |||||
</DialogActions> | |||||
</Dialog> | |||||
</div> | |||||
<div> | |||||
<Dialog | |||||
open={isWarningPopUp} | |||||
onClose={() => setIsWarningPopUp(false)} | |||||
PaperProps={{ | |||||
sx: { | |||||
minWidth: '40vw', | |||||
maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' }, | |||||
maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' } | |||||
} | |||||
}} | |||||
> | |||||
<DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle> | |||||
<DialogContent style={{ display: 'flex', }}> | |||||
<Typography variant="h4" style={{ padding: '16px' }}>{intl.formatMessage({ id: "MSG.plzSelectApp" })}</Typography> | |||||
</DialogContent> | |||||
<DialogActions> | |||||
<Button onClick={() => setIsWarningPopUp(false)}><Typography variant="h5">OK</Typography></Button> | |||||
</DialogActions> | |||||
</Dialog> | |||||
</div> | |||||
</> | |||||
); | |||||
} |
@@ -0,0 +1,389 @@ | |||||
// material-ui | |||||
import { | |||||
Button, | |||||
Grid, TextField, | |||||
Autocomplete, | |||||
Typography | |||||
} from '@mui/material'; | |||||
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"; | |||||
import * as FormatUtils from "utils/FormatUtils"; | |||||
import { ThemeProvider } from "@emotion/react"; | |||||
import { PNSPS_BUTTON_THEME } from "../../../themes/buttonConst"; | |||||
import { useIntl } from "react-intl"; | |||||
import {DatePicker} from "@mui/x-date-pickers/DatePicker"; | |||||
import dayjs from "dayjs"; | |||||
import {DemoItem} from "@mui/x-date-pickers/internals/demo"; | |||||
import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider"; | |||||
import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs"; | |||||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||||
const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, issueComboData | |||||
}) => { | |||||
const [type, setType] = React.useState([]); | |||||
// const [status, setStatus] = React.useState({ key: 0, label: 'All', type: 'all' }); | |||||
const [orgSelected, setOrgSelected] = React.useState({}); | |||||
const [orgCombo, setOrgCombo] = React.useState(); | |||||
const [issueSelected, setIssueSelected] = React.useState({}); | |||||
const [issueCombo, setIssueCombo] = React.useState([]); | |||||
const [selectedStatus, setSelectedStatus] = React.useState({key: 0, label: 'All', type: 'all'}); | |||||
const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom); | |||||
const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo); | |||||
const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy"); | |||||
const [toDateValue, setToDateValue] = React.useState("dd / mm / yyyy"); | |||||
React.useEffect(() => { | |||||
setFromDateValue(minDate); | |||||
}, [minDate]); | |||||
React.useEffect(() => { | |||||
setToDateValue(maxDate); | |||||
}, [maxDate]); | |||||
const intl = useIntl(); | |||||
const { locale } = intl; | |||||
const marginBottom = 2.5; | |||||
const { reset, register, handleSubmit } = useForm() | |||||
const onSubmit = (data) => { | |||||
data.status = selectedStatus?.type | |||||
let typeArray = []; | |||||
let sentDateFrom = ""; | |||||
let sentDateTo = ""; | |||||
for (let i = 0; i < type.length; i++) { | |||||
typeArray.push(type[i].label); | |||||
} | |||||
if (fromDateValue != "dd / mm / yyyy" && toDateValue != "dd / mm / yyyy") { | |||||
sentDateFrom = DateUtils.dateValue(fromDateValue) | |||||
sentDateTo = DateUtils.dateValue(toDateValue) | |||||
} | |||||
const temp = { | |||||
appNo: data.appNo, | |||||
dateFrom: sentDateFrom, | |||||
dateTo: sentDateTo, | |||||
contact: data.contact, | |||||
status: (data.status === '' || data.status?.includes("all")) ? "" : data.status, | |||||
orgId: (orgSelected?.key && orgSelected?.key > 0) ? orgSelected?.key : "", | |||||
issueId: issueSelected?.id, | |||||
groupNo: data.groupNo, | |||||
}; | |||||
applySearch(temp); | |||||
}; | |||||
React.useEffect(() => { | |||||
if (orgComboData && orgComboData.length > 0) { | |||||
setOrgCombo(orgComboData); | |||||
} | |||||
}, [orgComboData]); | |||||
React.useEffect(() => { | |||||
if (issueComboData && issueComboData.length > 0) { | |||||
setIssueCombo(issueComboData); | |||||
} | |||||
}, [issueComboData]); | |||||
function resetForm() { | |||||
setType([]); | |||||
// setStatus({ key: 0, label: 'All', type: 'all' }); | |||||
setOrgSelected({}); | |||||
setIssueSelected({}); | |||||
setSelectedStatus({key: 0, label: 'All', type: 'all'}); | |||||
setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14))) | |||||
setMaxDate(DateUtils.dateValue(new Date())) | |||||
reset(); | |||||
} | |||||
const getIssueLabel=(data)=> { | |||||
let issueYear = data.issueYear | |||||
let volume = data.volume; | |||||
let issueNo = data.issueNo; | |||||
let issueDate = data.issueDate; | |||||
if (locale === 'zh-HK') { | |||||
return issueYear | |||||
+ " 第" + volume + "卷," | |||||
+ " 第" + issueNo + "期," | |||||
+ " " + DateUtils.dateFormat(issueDate, "YYYY年MM月DD日") | |||||
+ " (" + DateUtils.getWeekdayStr_ZH(issueDate) + ")"; | |||||
} else if (locale === 'zh-CN') { | |||||
return issueYear | |||||
+ " 第" + volume + "卷," | |||||
+ " 第" + issueNo + "期," | |||||
+ " " + DateUtils.dateFormat(issueDate, "YYYY年MM月DD日") | |||||
+ " (" + DateUtils.getWeekdayStr_CN(issueDate) + ")"; | |||||
} | |||||
return issueYear | |||||
+ " Vol. " + FormatUtils.zeroPad(volume, 3) | |||||
+ ", No. " + FormatUtils.zeroPad(issueNo, 2) | |||||
+ ", " + DateUtils.dateFormat(issueDate, "D MMM YYYY (ddd)"); | |||||
} | |||||
return ( | |||||
<MainCard xs={12} md={12} lg={12} | |||||
border={false} | |||||
content={false} | |||||
sx={{ backgroundColor: '#fff' }} | |||||
> | |||||
<form onSubmit={handleSubmit(onSubmit)}> | |||||
<Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1, mb: marginBottom }} width="98%"> | |||||
{/*row 1*/} | |||||
<Grid item justifyContent="space-between" alignItems="center" sx={{ mt: 1, ml: 3, mb: marginBottom }}> | |||||
<Typography variant="pnspsFormHeader" > | |||||
Search | |||||
</Typography> | |||||
</Grid> | |||||
{/*row 2*/} | |||||
<Grid container display="flex" alignItems={"center"}> | |||||
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}> | |||||
<TextField | |||||
fullWidth | |||||
{...register("appNo")} | |||||
id='appNo' | |||||
label={"Application No."} | |||||
defaultValue={searchCriteria.appNo} | |||||
InputLabelProps={{ | |||||
shrink: true | |||||
}} | |||||
/> | |||||
</Grid> | |||||
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}> | |||||
<Grid container spacing={1}> | |||||
<Grid item xs={6}> | |||||
<LocalizationProvider dateAdapter={AdapterDayjs}> | |||||
<DemoItem components={['DatePicker']}> | |||||
<DatePicker | |||||
id="dateFrom" | |||||
// onError={(newError) => setReceiptFromError(newError)} | |||||
slotProps={{ | |||||
field: { readOnly: true, }, | |||||
// textField: { | |||||
// helperText: receiptFromErrorMessage, | |||||
// }, | |||||
}} | |||||
format="DD/MM/YYYY" | |||||
label={"Submit Date (From)"} | |||||
value={minDate === null ? null : dayjs(minDate)} | |||||
maxDate={maxDate === null ? null : dayjs(maxDate)} | |||||
onChange={(newValue) => { | |||||
// console.log(newValue) | |||||
if(newValue!=null){ | |||||
setMinDate(newValue); | |||||
} | |||||
}} | |||||
/> | |||||
</DemoItem > | |||||
</LocalizationProvider> | |||||
</Grid> | |||||
<Grid item xs={6}> | |||||
<LocalizationProvider dateAdapter={AdapterDayjs}> | |||||
<DemoItem components={['DatePicker']}> | |||||
<DatePicker | |||||
id="dateTo" | |||||
// onError={(newError) => setReceiptFromError(newError)} | |||||
slotProps={{ | |||||
field: { readOnly: true, }, | |||||
// textField: { | |||||
// helperText: receiptFromErrorMessage, | |||||
// }, | |||||
}} | |||||
format="DD/MM/YYYY" | |||||
label={"Submit Date (To)"} | |||||
value={maxDate === null ? null : dayjs(maxDate)} | |||||
minDate={minDate === null ? null : dayjs(minDate)} | |||||
onChange={(newValue) => { | |||||
// console.log(newValue) | |||||
if(newValue!=null){ | |||||
setMaxDate(newValue); | |||||
} | |||||
}} | |||||
/> | |||||
</DemoItem > | |||||
</LocalizationProvider> | |||||
</Grid> | |||||
</Grid> | |||||
</Grid> | |||||
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}> | |||||
<TextField | |||||
fullWidth | |||||
{...register("contact")} | |||||
id="contact" | |||||
label={"Client"} | |||||
defaultValue={searchCriteria.contact} | |||||
InputLabelProps={{ | |||||
shrink: true | |||||
}} | |||||
/> | |||||
</Grid> | |||||
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}> | |||||
<Autocomplete | |||||
{...register("status")} | |||||
id="status" | |||||
size="small" | |||||
options={ComboData.publicNoticeStatic_GLD} | |||||
value={selectedStatus} | |||||
onChange={(event, newValue) => { | |||||
if(newValue==null){ | |||||
setSelectedStatus(ComboData.publicNoticeStatic_GLD[0]); | |||||
}else{ | |||||
setSelectedStatus(newValue); | |||||
} | |||||
}} | |||||
getOptionLabel={(option) => option.label} | |||||
renderInput={(params) => ( | |||||
<TextField | |||||
{...params} | |||||
label="Status" | |||||
InputLabelProps={{ | |||||
shrink: true | |||||
}} | |||||
/> | |||||
)} | |||||
/> | |||||
{/* <Autocomplete | |||||
multiple | |||||
{...register("status")} | |||||
id="status" | |||||
size="small" | |||||
options={ComboData.publicNoticeStatic_GLD} | |||||
value={selectedStatus} | |||||
onChange={(event, newValue) => { | |||||
const findAllIndex = newValue.findIndex((ele) => { | |||||
return ele.type === "all" | |||||
}) | |||||
if (findAllIndex > -1) { | |||||
setSelectedStatus([newValue[findAllIndex]]); | |||||
setSelectedLabelsString('all') | |||||
} else { | |||||
const selectedLabels = newValue.map(option => option.type); | |||||
const selectedLabelsString = `${selectedLabels.join(',')}`; | |||||
setSelectedStatus(newValue); | |||||
setSelectedLabelsString(selectedLabelsString); | |||||
} | |||||
}} | |||||
getOptionLabel={(option) => option.label} | |||||
renderInput={(params) => ( | |||||
<TextField | |||||
{...params} | |||||
label="Status" | |||||
InputLabelProps={{ | |||||
shrink: true | |||||
}} | |||||
/> | |||||
)} | |||||
/> */} | |||||
</Grid> | |||||
{ | |||||
orgCombo ? | |||||
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}> | |||||
<Autocomplete | |||||
{...register("orgId")} | |||||
disablePortal | |||||
id="orgId" | |||||
options={orgCombo} | |||||
size="small" | |||||
value={orgSelected} | |||||
getOptionLabel={(option) => option.name? option.name : ""} | |||||
inputValue={orgSelected ? orgSelected.name : ""} | |||||
onChange={(event, newValue) => { | |||||
if (newValue !== null) { | |||||
setOrgSelected(newValue); | |||||
}else{ | |||||
setOrgSelected({}); | |||||
} | |||||
}} | |||||
renderInput={(params) => ( | |||||
<TextField {...params} | |||||
label="Organisation" | |||||
InputLabelProps={{ | |||||
shrink: true | |||||
}} | |||||
/> | |||||
)} | |||||
/> | |||||
</Grid> | |||||
: <></> | |||||
} | |||||
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}> | |||||
<Autocomplete | |||||
{...register("issueId")} | |||||
disablePortal | |||||
size="small" | |||||
id="issueId" | |||||
options={issueCombo} | |||||
value={issueSelected} | |||||
inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""} | |||||
getOptionLabel={(option) => getIssueLabel(option)} | |||||
onChange={(event, newValue) => { | |||||
setIssueSelected(newValue); | |||||
}} | |||||
renderInput={(params) => ( | |||||
<TextField {...params} | |||||
label="Gazette Issue No." | |||||
InputLabelProps={{ | |||||
shrink: true | |||||
}} | |||||
/> | |||||
)} | |||||
/> | |||||
</Grid> | |||||
<Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}> | |||||
<TextField | |||||
fullWidth | |||||
{...register("groupNo")} | |||||
id='groupNo' | |||||
label="Gazette Code" | |||||
defaultValue={searchCriteria.groupNo} | |||||
InputLabelProps={{ | |||||
shrink: true | |||||
}} | |||||
/> | |||||
</Grid> | |||||
</Grid> | |||||
{/*last row*/} | |||||
<Grid container maxWidth justifyContent="flex-end"> | |||||
<ThemeProvider theme={PNSPS_BUTTON_THEME}> | |||||
<Grid item sx={{ ml: 3 }}> | |||||
<Button | |||||
variant="contained" | |||||
color="cancel" | |||||
onClick={resetForm} | |||||
> | |||||
Reset | |||||
</Button> | |||||
</Grid> | |||||
<Grid item sx={{ ml: 3 }}> | |||||
<Button | |||||
variant="contained" | |||||
type="submit" | |||||
> | |||||
Submit | |||||
</Button> | |||||
</Grid> | |||||
</ThemeProvider> | |||||
</Grid> | |||||
</Grid> | |||||
</form> | |||||
</MainCard> | |||||
); | |||||
}; | |||||
export default SearchPublicNoticeForm; |
@@ -0,0 +1,113 @@ | |||||
// material-ui | |||||
import { | |||||
Grid, | |||||
Typography, | |||||
Stack | |||||
} from '@mui/material'; | |||||
import MainCard from "components/MainCard"; | |||||
import * as React from "react"; | |||||
import * as UrlUtils from "utils/ApiPathConst"; | |||||
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'))); | |||||
const SearchForm = Loadable(React.lazy(() => import('./SearchForm'))); | |||||
const EventTable = Loadable(React.lazy(() => import('./DataGrid'))); | |||||
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png' | |||||
const BackgroundHead = { | |||||
backgroundImage: `url(${titleBackgroundImg})`, | |||||
width: '100%', | |||||
height: '100%', | |||||
backgroundSize: 'contain', | |||||
backgroundRepeat: 'no-repeat', | |||||
backgroundColor: '#0C489E', | |||||
backgroundPosition: 'right' | |||||
} | |||||
// ==============================|| DASHBOARD - DEFAULT ||============================== // | |||||
const UserSearchPage_Individual = () => { | |||||
const [orgCombo, setOrgCombo] = React.useState([]); | |||||
const [issueCombo, setIssueCombo] = React.useState([]); | |||||
const [searchCriteria, setSearchCriteria] = React.useState({ | |||||
dateTo: DateUtils.dateValue(new Date()), | |||||
dateFrom: DateUtils.dateValue(new Date().setDate(new Date().getDate() - 14)) | |||||
}); | |||||
const [onReady, setOnReady] = React.useState(false); | |||||
React.useEffect(() => { | |||||
getOrgCombo(); | |||||
getIssueCombo(); | |||||
}, []); | |||||
React.useEffect(() => { | |||||
setOnReady(true); | |||||
}, [searchCriteria]); | |||||
function getOrgCombo() { | |||||
HttpUtils.get({ | |||||
url: UrlUtils.GET_ORG_COMBO, | |||||
onSuccess: function (responseData) { | |||||
let combo = responseData; | |||||
setOrgCombo(combo); | |||||
} | |||||
}); | |||||
} | |||||
function getIssueCombo() { | |||||
HttpUtils.get({ | |||||
url: UrlUtils.GET_ISSUE_COMBO, | |||||
onSuccess: function (responseData) { | |||||
let combo = responseData; | |||||
setIssueCombo(combo); | |||||
} | |||||
}); | |||||
} | |||||
function applySearch(input) { | |||||
setSearchCriteria(input); | |||||
} | |||||
return ( | |||||
!onReady ? | |||||
<Grid container sx={{ minHeight: '87vh', mb: 3 }} direction="column" justifyContent="center" alignItems="center"> | |||||
<Grid item> | |||||
<LoadingComponent /> | |||||
</Grid> | |||||
</Grid> | |||||
: | |||||
<Grid container sx={{ minHeight: '87vh',backgroundColor: 'backgroundColor.default' }} direction="column"> | |||||
<Grid item xs={12}> | |||||
<div style={BackgroundHead}> | |||||
<Stack direction="row" height='70px' justifyContent="flex-start" alignItems="center"> | |||||
<Typography ml={15} color='#FFF' variant="h4" sx={{ "textShadow": "0px 0px 25px #0C489E" }}>Mark Payment</Typography> | |||||
</Stack> | |||||
</div> | |||||
</Grid> | |||||
{/*row 1*/} | |||||
<Grid item xs={12} md={12} lg={12} sx={{mb: -1}}> | |||||
<SearchForm | |||||
applySearch={applySearch} | |||||
orgComboData={orgCombo} | |||||
issueComboData={issueCombo} | |||||
searchCriteria={searchCriteria} | |||||
/> | |||||
</Grid> | |||||
{/*row 2*/} | |||||
<Grid item xs={12} md={12} lg={12}> | |||||
<MainCard elevation={0} | |||||
border={false} | |||||
content={false} | |||||
sx={{ backgroundColor: '#fff' }} | |||||
> | |||||
<EventTable | |||||
searchCriteria={searchCriteria} | |||||
/> | |||||
</MainCard> | |||||
</Grid> | |||||
</Grid> | |||||
); | |||||
} | |||||
export default UserSearchPage_Individual; |
@@ -10,6 +10,7 @@ import {isGranted, isGrantedAny} from "auth/utils"; | |||||
const DashboardDefault = Loadable(lazy(() => import('pages/Dashboard/GLD'))); | const DashboardDefault = Loadable(lazy(() => import('pages/Dashboard/GLD'))); | ||||
const ApplicationDetail = Loadable(lazy(() => import('pages/PublicNotice/Details_GLD'))); | const ApplicationDetail = Loadable(lazy(() => import('pages/PublicNotice/Details_GLD'))); | ||||
const ApplicationSearch = Loadable(lazy(() => import('pages/PublicNotice/Search_GLD'))); | const ApplicationSearch = Loadable(lazy(() => import('pages/PublicNotice/Search_GLD'))); | ||||
const ApplicationMarkAsPaidSearch = Loadable(lazy(() => import('pages/PublicNotice/Search_Mark_As_Paid_GLD'))); | |||||
const ProofSearch = Loadable(lazy(() => import('pages/Proof/Search_GLD'))); | const ProofSearch = Loadable(lazy(() => import('pages/Proof/Search_GLD'))); | ||||
const ProofCreate_FromApp = Loadable(lazy(() => import('pages/Proof/Create_FromApp'))); | const ProofCreate_FromApp = Loadable(lazy(() => import('pages/Proof/Create_FromApp'))); | ||||
const ProofReply_GLD = Loadable(lazy(() => import('pages/Proof/Reply_GLD'))); | const ProofReply_GLD = Loadable(lazy(() => import('pages/Proof/Reply_GLD'))); | ||||
@@ -56,6 +57,12 @@ const GLDUserRoutes = { | |||||
path: '/application/search', | path: '/application/search', | ||||
element: <ApplicationSearch/> | element: <ApplicationSearch/> | ||||
}, | }, | ||||
isGranted(["MAINTAIN_PAYMENT"])? | |||||
{ | |||||
path: '/application/markAsPaid/search', | |||||
element: <ApplicationMarkAsPaidSearch/> | |||||
}:{}, | |||||
isGrantedAny(["VIEW_PROOF","MAINTAIN_PROOF"])?{ | isGrantedAny(["VIEW_PROOF","MAINTAIN_PROOF"])?{ | ||||
path: '/proof/search', | path: '/proof/search', | ||||
@@ -108,6 +108,9 @@ export const GET_PUBLIC_NOTICE_getApplyUser = apiPath+'/application/get-apply-us | |||||
export const POST_PUBLIC_NOTICE_APPLY = apiPath+'/application/apply'; | export const POST_PUBLIC_NOTICE_APPLY = apiPath+'/application/apply'; | ||||
export const POST_CHECK_APP_EXPRITY_DATE = apiPath+'/application/checkExprityDate'; | export const POST_CHECK_APP_EXPRITY_DATE = apiPath+'/application/checkExprityDate'; | ||||
export const GET_PUBLIC_NOTICE_OFFLINE_PAYMENT_LIST = apiPath+'/application/list-Mask-As-Paid'; | |||||
export const SET_PUBLIC_NOTICE_STATUS_MARK_AS_PAID = apiPath+'/application/application-detail-status-Mark-As-Paid'; | |||||
//GLD User | //GLD User | ||||
export const POST_ADMIN_USER_REGISTER = apiPath+'/user/registry'; | export const POST_ADMIN_USER_REGISTER = apiPath+'/user/registry'; | ||||
export const DELETE_USER = apiPath+'/user'; | export const DELETE_USER = apiPath+'/user'; | ||||
@@ -124,6 +127,7 @@ export const SET_PUBLIC_NOTICE_STATUS_WITHDRAW = apiPath+'/application/applicati | |||||
export const SET_PUBLIC_NOTICE_STATUS_RESUBMIT = apiPath+'/application/application-detail-status-resubmit'; | export const SET_PUBLIC_NOTICE_STATUS_RESUBMIT = apiPath+'/application/application-detail-status-resubmit'; | ||||
export const SET_PUBLIC_NOTICE_STATUS_REVIEWED = apiPath+'/application/application-detail-status-reviewed'; | export const SET_PUBLIC_NOTICE_STATUS_REVIEWED = apiPath+'/application/application-detail-status-reviewed'; | ||||
export const SET_PUBLIC_NOTICE_STATUS_PUBLISH = apiPath+'/application/application-detail-status-publish'; | export const SET_PUBLIC_NOTICE_STATUS_PUBLISH = apiPath+'/application/application-detail-status-publish'; | ||||
export const SET_PUBLIC_NOTICE_STATUS_REVOKE = apiPath+'/application/application-detail-status-Revoke-Payment'; | |||||
export const SET_PUBLIC_NOTICE_STATUS_PUBLISH_BULK = apiPath+'/application/application-detail-status-publish-bulk'; | export const SET_PUBLIC_NOTICE_STATUS_PUBLISH_BULK = apiPath+'/application/application-detail-status-publish-bulk'; | ||||
export const UPDATE_PUBLIC_NOTICE_APPLY_DETAIL = apiPath+'/application/save'; | export const UPDATE_PUBLIC_NOTICE_APPLY_DETAIL = apiPath+'/application/save'; | ||||
export const GET_AUDIT_LOG_LIST = apiPath+'/settings/auditLogList'; | export const GET_AUDIT_LOG_LIST = apiPath+'/settings/auditLogList'; | ||||