From f1734d8b8dabe1bfc482e883d924dce68ecfa88c Mon Sep 17 00:00:00 2001 From: Alex Cheung Date: Fri, 15 Mar 2024 17:56:49 +0800 Subject: [PATCH] add recon report --- src/layout/MainLayout/Header/index.js | 3 + src/pages/Recon/SearchForm.js | 359 ++++++++++++++++++++++++++ src/pages/Recon/index.js | 118 +++++++++ src/routes/GLDUserRoutes.js | 6 +- src/utils/ApiPathConst.js | 2 + src/utils/ComboData.js | 10 +- 6 files changed, 496 insertions(+), 2 deletions(-) create mode 100644 src/pages/Recon/SearchForm.js create mode 100644 src/pages/Recon/index.js diff --git a/src/layout/MainLayout/Header/index.js b/src/layout/MainLayout/Header/index.js index 2b29398..7061f0e 100644 --- a/src/layout/MainLayout/Header/index.js +++ b/src/layout/MainLayout/Header/index.js @@ -105,6 +105,9 @@ function Header(props) {
  • GFMIS Generate XML
    • +
  • + Recon Report +
  • Create Demand Note
    • diff --git a/src/pages/Recon/SearchForm.js b/src/pages/Recon/SearchForm.js new file mode 100644 index 0000000..0353df3 --- /dev/null +++ b/src/pages/Recon/SearchForm.js @@ -0,0 +1,359 @@ +// 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 DateUtils from "utils/DateUtils"; +import {PNSPS_BUTTON_THEME} from "../../themes/buttonConst"; +import {ThemeProvider} from "@emotion/react"; +import * as ComboData from "utils/ComboData"; +import * as DateUtils from "utils/DateUtils"; +const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent'))); + +// ==============================|| DASHBOARD - DEFAULT ||============================== // + + +const SearchPublicNoticeForm = ({ applySearch, generateReport, searchCriteria,onDownload }) => { + + const [sysTxnMinDate, setSysTxnMinDate] = React.useState(searchCriteria.dateFrom); + const [sysTxnMaxDate, setsysTxnMaxDate] = React.useState(searchCriteria.dateTo); + const [txnMinDate, setTxnMinDate] = React.useState(searchCriteria.dateFrom); + const [txnMaxDate, setTxnMaxDate] = React.useState(searchCriteria.dateTo); + const [collMinDate, setCollMinDate] = React.useState(searchCriteria.dateFrom); + const [collMaxDate, setCollMaxDate] = React.useState(searchCriteria.dateTo); + const [status, setStatus] = React.useState(ComboData.paymentStatus[0]); + const [method, setMethod] = React.useState(ComboData.paymentMethod[0]); + const marginBottom = 2.5; + + const { register, handleSubmit, getValues } = useForm() + + const onSubmit = () => { + const sysTxnDateFrom = getValues("sysTxnDateFrom") + const sysTxnDateTo = getValues("sysTxnDateTo") + const txnDateFrom = getValues("txnDateFrom") + const txnDateTo = getValues("txnDateTo") + const collDateFrom = getValues("collDateFrom") + const collDateTo = getValues("collDateTo") + + const temp = { + PaymentMethod:(method?.type && method?.type != 'Please Select') ? method?.type : "", + PaymentStatus : (status?.type && status?.type != 'all') ? status?.type : "", + SysTxnDateFrom:sysTxnDateFrom, + SysTxnDateTo:sysTxnDateTo, + TxnDateFrom:txnDateFrom, + TxnDateTo:txnDateTo, + CollDateFrom:collDateFrom, + CollDateTo:collDateTo, + }; + applySearch(temp); + }; + + const generatePDFHandler = () => { + const sysTxnDateFrom = getValues("sysTxnDateFrom") + const sysTxnDateTo = getValues("sysTxnDateTo") + const txnDateFrom = getValues("txnDateFrom") + const txnDateTo = getValues("txnDateTo") + const collDateFrom = getValues("collDateFrom") + const collDateTo = getValues("collDateTo") + + const temp = { + PaymentMethod:(method?.type && method?.type != 'Please Select') ? method?.type : "", + PaymentStatus : (status?.type && status?.type != 'all') ? status?.type : "", + SysTxnDateFrom:sysTxnDateFrom, + SysTxnDateTo:sysTxnDateTo, + TxnDateFrom:txnDateFrom, + TxnDateTo:txnDateTo, + CollDateFrom:collDateFrom, + CollDateTo:collDateTo, + ReportFormat:"pdf" + }; + generateReport(temp); + } + + const generateCSVHandler = () => { + const sysTxnDateFrom = getValues("sysTxnDateFrom") + const sysTxnDateTo = getValues("sysTxnDateTo") + const txnDateFrom = getValues("txnDateFrom") + const txnDateTo = getValues("txnDateTo") + const collDateFrom = getValues("collDateFrom") + const collDateTo = getValues("collDateTo") + + const temp = { + PaymentMethod:(method?.type && method?.type != 'Please Select') ? method?.type : "", + PaymentStatus : (status?.type && status?.type != 'all') ? status?.type : "", + SysTxnDateFrom:sysTxnDateFrom, + SysTxnDateTo:sysTxnDateTo, + TxnDateFrom:txnDateFrom, + TxnDateTo:txnDateTo, + CollDateFrom:collDateFrom, + CollDateTo:collDateTo, + ReportFormat:"csv" + }; + generateReport(temp); + } + + + return ( + + +
    + + {/*row 1*/} + + + Submit Form + + + + {/*row 2*/} + + + + + options} + options={ComboData.paymentMethod} + value={method} + getOptionLabel={(option) => option.label} + inputValue={method?.label ? method?.label : ""} + onChange={(event, newValue) => { + if (newValue !== null) { + setMethod(newValue); + } + }} + renderInput={(params) => ( + + )} + InputLabelProps={{ + shrink: true + }} + /> + + + + options} + options={ComboData.paymentStatus} + value={status} + getOptionLabel={(option) => option.label} + inputValue={status?.label ? status?.label : ""} + onChange={(event, newValue) => { + if (newValue !== null) { + setStatus(newValue); + } + }} + renderInput={(params) => ( + + )} + InputLabelProps={{ + shrink: true + }} + /> + + + + + + + + + + { + setSysTxnMinDate(DateUtils.dateStr(newValue)); + }} + InputLabelProps={{ + shrink: true + }} + /> + + + { + setsysTxnMaxDate(DateUtils.dateStr(newValue)); + }} + id="sysTxnDateTo" + type="date" + label="PNSPS Transaction Date (To)" + ////defaultValue={searchCriteria.dateTo} + /> + + + + + + {/*row 3*/} + + + + + { + setTxnMaxDate(DateUtils.dateStr(newValue)); + }} + InputLabelProps={{ + shrink: true + }} + /> + + + { + setTxnMinDate(DateUtils.dateStr(newValue)); + }} + id="txnDateTo" + type="date" + label="FI Transaction Date (To)" + //defaultValue={searchCriteria.dateTo} + /> + + + + + + {/*row 5*/} + + + + + { + setCollMinDate(DateUtils.dateStr(newValue)); + }} + InputLabelProps={{ + shrink: true + }} + /> + + + { + setCollMaxDate(DateUtils.dateStr(newValue)); + }} + id="collDateTo" + type="date" + label="Bank Credit Date (To)" + //defaultValue={searchCriteria.dateTo} + /> + + + + + + + + + + + + + {onDownload? + + : + + + + + + + + + + } + + + {/* + {onDownload? + + : + + } + */} + + + +
    +     + ); +}; + +export default SearchPublicNoticeForm; diff --git a/src/pages/Recon/index.js b/src/pages/Recon/index.js new file mode 100644 index 0000000..3b36940 --- /dev/null +++ b/src/pages/Recon/index.js @@ -0,0 +1,118 @@ +// material-ui +import { + Grid, + Typography, + Stack +} from '@mui/material'; +// import MainCard from "components/MainCard"; +import * as UrlUtils from "utils/ApiPathConst"; +import * as React from "react"; +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 Index = () => { + + // const [record,setRecord] = React.useState([]); + const [searchCriteria, setSearchCriteria] = React.useState({ + // dateTo: DateUtils.dateStr(new Date()), + // dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)), + }); + const [onReady] = React.useState(true); + const [onDownload, setOnDownload] = React.useState(false); + + // React.useEffect(() => { + // setOnReady(true); + // }, [record]); + + React.useEffect(() => { + if (Object.keys(searchCriteria).length > 0){ + console.log(searchCriteria) + loadGrid(); + } + }, [searchCriteria]); + + function loadGrid(){ + HttpUtils.get({ + url: UrlUtils.VIEW_RECON_REPORT, + params: searchCriteria, + onSuccess: function(responseData){ + console.log(responseData) + var myWindow = window.open(); + myWindow.document.write(responseData); + } + }); + } + + function downloadXML(input) { + // console.log(input) + setOnDownload(true) + HttpUtils.fileDownload({ + url: UrlUtils.GEN_RECON_REPORT, + params:input, + onResponse:(response)=>{ + console.log(response) + setOnDownload(false) + }, + onError:()=>{ + setOnDownload(false) + } + }); + // open(UrlUtils.GEN_GFMIS_XML + "/today?online=true") + } + + + function applySearch(input) { + setSearchCriteria(input); + } + + function generateReport(input) { + downloadXML(input); + } + + return ( + !onReady ? + + : + + +
    + + + Recon Report + + +
    +     + {/*row 1*/} + + + + {/*row 2*/} +     + ); +}; + +export default Index; diff --git a/src/routes/GLDUserRoutes.js b/src/routes/GLDUserRoutes.js index b317f62..84d08ad 100644 --- a/src/routes/GLDUserRoutes.js +++ b/src/routes/GLDUserRoutes.js @@ -28,7 +28,7 @@ const HolidayPage = Loadable(lazy(() => import('pages/Holiday'))); const GazetteIssuePage = Loadable(lazy(() => import('pages/GazetteIssue/index'))); const DrImport = Loadable(lazy(() => import('pages/Setting/DrImport'))); const AuditLogPage = Loadable(lazy(() => import('pages/AuditLog/index'))); - +const ReconReportPage = Loadable(lazy(() => import('pages/Recon'))); // ==============================|| MAIN ROUTING ||============================== // const GLDUserRoutes = { @@ -86,6 +86,10 @@ const GLDUserRoutes = { path: '/paymentPage/demandNote/details/:id', element: }, + { + path: '/paymentPage/reconReport', + element: + }, { path: '/gfmis/search', element: diff --git a/src/utils/ApiPathConst.js b/src/utils/ApiPathConst.js index 32c1b47..63fd471 100644 --- a/src/utils/ApiPathConst.js +++ b/src/utils/ApiPathConst.js @@ -185,6 +185,8 @@ export const GEN_PAYMENT_RECEIPT = apiPath+'/payment/receipt'; //POST //gen report export const GEN_GFMIS_XML = apiPath+'/gfmis'; //GET +export const VIEW_RECON_REPORT = apiPath+'/reportings/report'; //GET +export const GEN_RECON_REPORT = apiPath+'/reportings/download'; //GET //Holiday export const GET_HOLIDAY = apiPath+'/holiday/list'; //GET diff --git a/src/utils/ComboData.js b/src/utils/ComboData.js index bed01a4..c96efe3 100644 --- a/src/utils/ComboData.js +++ b/src/utils/ComboData.js @@ -130,4 +130,12 @@ export const Locale = [ { id: 1, key: 1, label: 'English', type: 'en' }, { id: 2, key: 2, label: '繁體中文', type: 'zh_HK' }, { id: 3, key: 3, label: '简体中文', type: 'zh_CN' }, -]; \ No newline at end of file +]; + +export const paymentMethod = [ + {label: 'Please Select', type: '' }, + {label:'01 EPSCO - PPS', type: '01,PPSB' }, + {label:'02 BCMP - VC/MC/JC', type: '02,BCMP' }, + {label:'03 CUP', type: '03,BCMP' }, + {label:'04 FPS', type: '04,BCFP' }, +];