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) {
             <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>
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 (
+        <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;
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 ?
+            <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;
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: <DemandNote_Details/>
         },
+        {
+          path: '/paymentPage/reconReport',
+          element: <ReconReportPage/>
+        },
         {
           path: '/gfmis/search',
           element: <GFMIS_Search/>
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' },
+];