alex
/
PNSPS-frontend-MaterialUI
1
0
Bifurcation 0
Code Tickets 0 Demandes d'ajout 0 Versions 0 Wiki Activité
Parcourir la source

add recon report

master
Alex Cheung il y a 1 an
Parent
db4227a67d
révision
f1734d8b8d
6 fichiers modifiés avec 496 ajouts et 2 suppressions
Vue séparée
Option de Diff
Voir les Statistiques Télécharger le Fichier Patch Télécharger le Fichier des Différences
  1. +3
    -0
      src/layout/MainLayout/Header/index.js
  2. +359
    -0
      src/pages/Recon/SearchForm.js
  3. +118
    -0
      src/pages/Recon/index.js
  4. +5
    -1
      src/routes/GLDUserRoutes.js
  5. +2
    -0
      src/utils/ApiPathConst.js
  6. +9
    -1
      src/utils/ComboData.js

+ 3
- 0
src/layout/MainLayout/Header/index.js Voir le fichier

@@ -105,6 +105,9 @@ function Header(props) {
<li>
<Link className="downloadXML" to='/gfmis/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>GFMIS Generate XML</Typography></Link>
</li>
<li>
<Link className="reconReport" to='/paymentPage/reconReport'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Recon Report</Typography></Link>
</li>
<li>
<Link className="createDemandNote" to='/paymentPage/createDemandNote' ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Create Demand Note</Typography></Link>
</li>


+ 359
- 0
src/pages/Recon/SearchForm.js Voir le fichier

@@ -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 (
<MainCard xs={12} md={12} lg={12}
border={false}
content={false}
>

<form onSubmit={handleSubmit(onSubmit)} >
<Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 1}} width="98%">
{/*row 1*/}
<Grid item justifyContent="space-between" alignItems="center" sx={{mt:1,ml:3,mb:2.5}}>
<Typography variant="h5" >
Submit Form
</Typography>
</Grid>

{/*row 2*/}

<Grid item xs={12} s={12} md={12} lg={12} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
<Grid container spacing={3}>
<Grid item xs={9} s={9} md={3} lg={3} >
<Autocomplete
{...register("paymentMethod")}
disablePortal={false}
size="small"
id="paymentMethod"
filterOptions={(options) => 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) => (
<TextField {...params}
label="Payment Method"
/>
)}
InputLabelProps={{
shrink: true
}}
/>
</Grid>

<Grid item xs={9} s={9} md={3} lg={3} >
<Autocomplete
{...register("status")}
disablePortal={false}
size="small"
id="status"
filterOptions={(options) => 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) => (
<TextField {...params}
label="Payment Status"
/>
)}
InputLabelProps={{
shrink: true
}}
/>
</Grid>
</Grid>
</Grid>

<Grid container display="flex" alignItems={"center"}>
<Grid item xs={12} s={12} md={12} lg={12} sx={{ml:3, mr:3, mb:marginBottom}}>
<Grid container spacing={1}>
<Grid item xs={4}>
<TextField
fullWidth
{...register("sysTxnDateFrom")}
id="sysTxnDateFrom"
type="date"
label="PNSPS Transaction Date (From)"
////defaultValue={searchCriteria.dateFrom}
InputProps={{ inputProps: { max: sysTxnMaxDate } }}
onChange={(newValue) => {
setSysTxnMinDate(DateUtils.dateStr(newValue));
}}
InputLabelProps={{
shrink: true
}}
/>
</Grid>
<Grid item xs={4}>
<TextField
fullWidth
InputLabelProps={{
shrink: true
}}
{...register("sysTxnDateTo")}
InputProps={{ inputProps: { min: sysTxnMinDate } }}
onChange={(newValue) => {
setsysTxnMaxDate(DateUtils.dateStr(newValue));
}}
id="sysTxnDateTo"
type="date"
label="PNSPS Transaction Date (To)"
////defaultValue={searchCriteria.dateTo}
/>
</Grid>
</Grid>
</Grid>
</Grid>

{/*row 3*/}
<Grid container display="flex" alignItems={"center"}>
<Grid item xs={12} s={12} md={12} lg={12} sx={{ml:3, mr:3, mb:marginBottom}}>
<Grid container spacing={1}>
<Grid item xs={4}>
<TextField
fullWidth
{...register("txnDateFrom")}
id="txnDateFrom"
type="date"
label="FI Transaction Date (From)"
//defaultValue={searchCriteria.dateFrom}
InputProps={{ inputProps: { max: txnMaxDate } }}
onChange={(newValue) => {
setTxnMaxDate(DateUtils.dateStr(newValue));
}}
InputLabelProps={{
shrink: true
}}
/>
</Grid>
<Grid item xs={4}>
<TextField
fullWidth
InputLabelProps={{
shrink: true
}}
{...register("txnDateTo")}
InputProps={{ inputProps: { min: txnMinDate } }}
onChange={(newValue) => {
setTxnMinDate(DateUtils.dateStr(newValue));
}}
id="txnDateTo"
type="date"
label="FI Transaction Date (To)"
//defaultValue={searchCriteria.dateTo}
/>
</Grid>
</Grid>
</Grid>
</Grid>

{/*row 5*/}
<Grid container display="flex" alignItems={"center"}>
<Grid item xs={12} s={12} md={12} lg={12} sx={{ml:3, mr:3, mb:marginBottom}}>
<Grid container spacing={1}>
<Grid item xs={4}>
<TextField
fullWidth
{...register("collDateFrom")}
id="collDateFrom"
type="date"
label="Bank Credit Date (From)"
//defaultValue={searchCriteria.dateFrom}
InputProps={{ inputProps: { max: collMaxDate } }}
onChange={(newValue) => {
setCollMinDate(DateUtils.dateStr(newValue));
}}
InputLabelProps={{
shrink: true
}}
/>
</Grid>
<Grid item xs={4}>
<TextField
fullWidth
InputLabelProps={{
shrink: true
}}
{...register("collDateTo")}
InputProps={{ inputProps: { min: collMinDate } }}
onChange={(newValue) => {
setCollMaxDate(DateUtils.dateStr(newValue));
}}
id="collDateTo"
type="date"
label="Bank Credit Date (To)"
//defaultValue={searchCriteria.dateTo}
/>
</Grid>
</Grid>
</Grid>
</Grid>

<Grid container justifyContent="flex-end" direction="row" alignItems="center" spacing={3}>
<ThemeProvider theme={PNSPS_BUTTON_THEME}>
<Grid item sx={{ ml: 3, mb: 3, }} >
<Button
variant="contained"
type="submit"
>
View
</Button>
</Grid>

<Grid item sx={{ ml: 3, mb: 3, }} >
{onDownload?
<LoadingComponent disableText={true} alignItems="flex-start"/>
:
<Grid container>
<Grid item sx={{ ml: 3, mb: 3, }} >
<Button
variant="contained"
onClick={generateCSVHandler}
>
Generate CSV
</Button>
</Grid>
<Grid item sx={{ ml: 3, mb: 3, }} >
<Button
variant="contained"
onClick={generatePDFHandler}
>
Generate PDF
</Button>
</Grid>
</Grid>
}
</Grid>
{/* <Grid item sx={{ ml: 3, mr: 3, mb: 3, }} >
{onDownload?
<LoadingComponent disableText={true} alignItems="flex-start"/>
:
<Button
variant="contained"
onClick={generatePDFHandler}
>
Generate PDF
</Button>
}
</Grid> */}
</ThemeProvider>
</Grid>
</Grid>
</form>
</MainCard>
);
};

export default SearchPublicNoticeForm;

+ 118
- 0
src/pages/Recon/index.js Voir le fichier

@@ -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 ?
<LoadingComponent/>
:
<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">
Recon Report
</Typography>
</Stack>
</div>
</Grid>
{/*row 1*/}
<Grid item xs={12} md={12} lg={12} sx={{mb:-1}}>
<SearchForm
applySearch={applySearch}
generateReport={generateReport}
searchCriteria={searchCriteria}
onDownload={onDownload}
/>
</Grid>
{/*row 2*/}
</Grid>
);
};

export default Index;

+ 5
- 1
src/routes/GLDUserRoutes.js Voir le fichier

@@ -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: <DemandNote_Details/>
},
{
path: '/paymentPage/reconReport',
element: <ReconReportPage/>
},
{
path: '/gfmis/search',
element: <GFMIS_Search/>


+ 2
- 0
src/utils/ApiPathConst.js Voir le fichier

@@ -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


+ 9
- 1
src/utils/ComboData.js Voir le fichier

@@ -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' },
];
];

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' },
];

Écrire Aperçu
Chargement…
Annuler
Enregistrer