add gfmis ui

src/layout/MainLayout/Header/index.js

@@ -43,8 +43,6 @@ import Profile from './HeaderContent/Profile';
 import "assets/style/navbarStyles.css";
 import { isUserLoggedIn, isGLDLoggedIn, isPrimaryLoggedIn } from "utils/Utils";
 import { handleLogoutFunction } from 'auth/index';
-import * as HttpUtils from "utils/HttpUtils";
-import * as UrlUtils from "utils/ApiPathConst"
 
 // assets
 // import { MenuFoldOutlined,MenuOutlined } from '@ant-design/icons';
@@ -73,34 +71,6 @@ function Header(props) {
     navigate('/login');
   };
 
-  const getXML = () => () => {
-    HttpUtils.get({
-        url: UrlUtils.GEN_GFMIS_XML + "/today?online=true",
-        params:{},
-        onSuccess: (responseData) => {
-          console.log(responseData)
-          const parser = new DOMParser();
-          const xmlDoc = parser.parseFromString(responseData, 'application/xml');
-          const filename = xmlDoc.querySelector('FileHeader').getAttribute('H_Filename');
-          const blob = new Blob([responseData], { type: 'application/xml' });
-          // Create a download link
-          const link = document.createElement('a');
-          link.href = URL.createObjectURL(blob);
-          link.download = filename+'.xml';
-
-          // Append the link to the document body
-          document.body.appendChild(link);
-
-          // Programmatically click the link to trigger the download
-          link.click();
-
-          // Clean up the link
-          document.body.removeChild(link);
-        }
-      });
-    // open(UrlUtils.GEN_GFMIS_XML + "/today?online=true") 
-  }
-
   const loginContent = (
     isGLDLoggedIn() ?
       <div id="adminContent">
@@ -124,7 +94,7 @@ function Header(props) {
               <Link className="payment" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Payment Record</Typography></Link>
             </li>
             <li>
-              <Link className="downloadXML" onClick={getXML()} ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Download XML</Typography></Link>
+              <Link className="downloadXML" to='/gfmis/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>GFMIS Generate XML</Typography></Link>
             </li>
             <li>
               <Link className="createDemandNote" to='/paymentPage/createDemandNote' ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>Create DN</Typography></Link>

src/pages/GFMIS/DataGrid.js

@@ -0,0 +1,88 @@
+// material-ui
+import * as React from 'react';
+// import {
+//     Button
+// } from '@mui/material';
+import * as FormatUtils from "utils/FormatUtils"
+import { useNavigate } from "react-router-dom";
+import { FiDataGrid } from "components/FiDataGrid";
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function SearchPublicNoticeTable({ recordList }) {
+    const [rows, setRows] = React.useState(recordList);
+    const navigate = useNavigate()
+
+    const _sx = {
+        padding: "4 2 4 2",
+        boxShadow: 1,
+        border: 1,
+        borderColor: '#DDD',
+        '& .MuiDataGrid-cell': {
+            borderTop: 1,
+            borderBottom: 1,
+            borderColor: "#EEE"
+        },
+        '& .MuiDataGrid-footerContainer': {
+            border: 1,
+            borderColor: "#EEE"
+        }
+    }
+
+    React.useEffect(() => {
+        setRows(recordList);
+    }, [recordList]);
+
+    const handleEditClick = (params) => () => {
+        navigate('/paymentPage/details/' + params.row.id);
+    };
+
+    const columns = [
+        // {
+        //     field: 'actions',
+        //     headerName: 'Trans. No.',
+        //     flex: 1,
+        //     cellClassName: 'actions',
+        //     renderCell: (params) => {
+        //         return <Button onClick={handleEditClick(params)}><u>{params.row.transNo}</u></Button>;
+        //     },
+        // },
+        {
+            id: 'paymentMethod',
+            field: 'paymentMethod',
+            headerName: 'Payment Method',
+            flex: 4,
+            renderCell: (params) => {
+                let paymentMethod = params.row.paymentMethod;
+                return <div style={{ margin: 4 }}>{paymentMethod}</div>
+            },
+        },
+        {
+            id: 'payAmount',
+            field: 'payAmount',
+            headerName: 'Payment Amount',
+            flex: 5,            
+            valueGetter: (params) => {
+                return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
+            }
+        },
+    ];
+    
+
+    return (
+        <div style={{ minHeight:400, width: '100%' }}>
+
+            <FiDataGrid
+                sx={_sx}
+                rowHeight={80}
+                rows={rows}
+                columns={columns}
+                initialState={{
+                    pagination: {
+                        paginationModel: { page: 0, pageSize: 5 },
+                    },
+                }}
+                onRowDoubleClick={handleEditClick}
+            />
+        </div>
+    );
+}

src/pages/GFMIS/SearchForm.js

@@ -0,0 +1,155 @@
+// material-ui
+import {
+    Button,
+    CardContent,
+    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 * as ComboData from "utils/ComboData";
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+
+const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria }) => {
+
+    const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
+    const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
+    // const [status, setStatus] = React.useState(ComboData.paymentStatus[0]);
+
+    const _sx = {
+        padding: "4 2 4 2",
+        boxShadow: 1,
+        border: 1,
+        borderColor: '#DDD',
+        '& .MuiDataGrid-cell': {
+            borderTop: 1,
+            borderBottom: 1,
+            borderColor: "#EEE"
+        },
+        '& .MuiDataGrid-footerContainer': {
+            border: 1,
+            borderColor: "#EEE"
+        }
+    }
+
+    const { register, handleSubmit, getValues } = useForm()
+
+    const onSubmit = (data) => {
+        const temp = {
+            // code: data.code,
+            // transNo: data.transNo,
+            dateFrom: data.dateFrom,
+            dateTo: data.dateTo,
+            // status : (status?.type && status?.type != 'all') ? status?.type : "",
+        };
+        applySearch(temp);
+    };
+
+    const generateHandler = () => {
+        const dateFrom = getValues("dateFrom")
+        const dateTo = getValues("dateTo")
+        const temp = {
+            // code: data.code,
+            // transNo: data.transNo,
+            dateFrom: dateFrom,
+            dateTo: dateTo,
+            // status : (status?.type && status?.type != 'all') ? status?.type : "",
+        };
+        generateXML(temp);
+    }
+
+
+    return (
+        <MainCard xs={12} md={12} lg={12}
+            border={false}
+            content={false}
+            sx={_sx}
+            >
+
+            <form onSubmit={handleSubmit(onSubmit)}>
+                {/*row 1*/}
+                <CardContent sx={{ px: 2.5, pt: 3 }}>
+                    <Grid item justifyContent="space-between" alignItems="center" >
+                        <Typography variant="h5">Credit Date</Typography>
+                    </Grid>
+                </CardContent>
+
+                {/*row 2*/}
+                <Grid container  alignItems="center">
+
+                    <Grid item xs={9} s={6} md={4} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <TextField
+                            fullWidth
+                            {...register("dateFrom")}
+                            id="dateFrom"
+                            type="date"
+                            label="From"
+                            defaultValue={searchCriteria.dateFrom}
+                            InputProps={{ inputProps: { max: maxDate } }}
+                            onChange={(newValue) => {
+                                setMinDate(DateUtils.dateStr(newValue));
+                            }}
+                            InputLabelProps={{
+                                shrink: true
+                            }}
+                        />
+                    </Grid>
+
+                    <Grid item xs={9} s={6} md={4} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <TextField
+                            fullWidth
+                            InputLabelProps={{
+                                shrink: true
+                            }}
+                            {...register("dateTo")}
+                            InputProps={{ inputProps: { min: minDate } }}
+                            onChange={(newValue) => {
+                                setMaxDate(DateUtils.dateStr(newValue));
+                            }}
+                            id="dateTo"
+                            type="date"
+                            label="To"
+                            defaultValue={searchCriteria.dateTo}
+                        />
+                    </Grid>
+
+                    {/* <Grid item xs={9} s={6} md={4} lg={3}>
+                    </Grid> */}
+                </Grid>
+                <Grid container justifyContent="flex-end" direction="row"  alignItems="center" spacing={3}>
+                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, }} >
+                        <Button
+                            size="large"
+                            variant="contained"
+                            type="submit"
+                            sx={{
+                                textTransform: 'capitalize',
+                                alignItems: 'end'
+                            }}>
+                            <Typography variant="h5">Preview</Typography>
+                        </Button>
+                    </Grid>
+
+                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, }} >
+                        <Button
+                            size="large"
+                            variant="contained"
+                            onClick={generateHandler}
+                            sx={{
+                                textTransform: 'capitalize',
+                                alignItems: 'end'
+                            }}>
+                            <Typography variant="h5">Generate</Typography>
+                        </Button>
+                    </Grid>
+                </Grid>
+            </form>
+        </MainCard>
+    );
+};
+
+export default SearchPublicNoticeForm;

src/pages/GFMIS/index.js

@@ -0,0 +1,133 @@
+// 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, setOnReady] = React.useState(false);
+
+    React.useEffect(() => {
+        setOnReady(true);
+    }, [record]);
+
+    React.useEffect(() => {
+        console.log(searchCriteria)
+        loadGrid();
+    }, [searchCriteria]);
+
+    function loadGrid(){
+        HttpUtils.get({
+            url: UrlUtils.GFIMIS_LIST,
+            params: searchCriteria,
+            onSuccess: function(responseData){
+                setRecord(responseData);
+            }
+        });
+    }
+
+    function downloadXML(input) {
+        console.log(input)
+        HttpUtils.get({
+            url: UrlUtils.GEN_GFMIS_XML + "/today?online=true",
+            params:{},
+            onSuccess: (responseData) => {
+              console.log(responseData)
+              const parser = new DOMParser();
+              const xmlDoc = parser.parseFromString(responseData, 'application/xml');
+              const filename = xmlDoc.querySelector('FileHeader').getAttribute('H_Filename');
+              const blob = new Blob([responseData], { type: 'application/xml' });
+              // Create a download link
+              const link = document.createElement('a');
+              link.href = URL.createObjectURL(blob);
+              link.download = filename+'.xml';
+    
+              // Append the link to the document body
+              document.body.appendChild(link);
+    
+              // Programmatically click the link to trigger the download
+              link.click();
+    
+              // Clean up the link
+              document.body.removeChild(link);
+            }
+          });
+        // open(UrlUtils.GEN_GFMIS_XML + "/today?online=true") 
+      }
+
+
+    function applySearch(input) {
+        setSearchCriteria(input);
+    }
+
+    function generateXML(input) {
+        downloadXML(input);
+    }
+
+    return (
+        !onReady ?
+            <LoadingComponent/>
+            :
+            <Grid container sx={{minHeight: '85vh',backgroundColor:'#ffffff'}} 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">GFMIS</Typography>
+                        </Stack>
+                    </div>
+                </Grid>
+                {/*row 1*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <SearchForm 
+                    applySearch={applySearch}
+                    generateXML={generateXML}
+                    searchCriteria={searchCriteria}
+                    />
+                </Grid>
+                {/*row 2*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <MainCard elevation={0}
+                            border={false}
+                            content={false}
+                            sx={{width: "-webkit-fill-available"}}
+                    >
+                        <EventTable
+                            recordList={record}
+                        />
+                    </MainCard>
+                </Grid>
+            </Grid>
+    );
+};
+
+export default Index;

src/pages/Payment/Search_GLD/index.js

@@ -84,6 +84,7 @@ const Index = () => {
                     <MainCard elevation={0}
                             border={false}
                             content={false}
+                            sx={{width: "-webkit-fill-available"}}
                     >
                         <EventTable
                             recordList={record}

src/pages/Payment/Search_Public/index.js

@@ -84,6 +84,7 @@ const Index = () => {
                     <MainCard elevation={0}
                             border={false}
                             content={false}
+                            sx={{width: "-webkit-fill-available"}}
                     >
                         <EventTable
                             recordList={record}

src/routes/GLDUserRoutes.js

@@ -17,6 +17,7 @@ const PaymentDetails_GLD = Loadable(lazy(() => import('pages/Payment/Details_GLD
 const DemandNote_Create = Loadable(lazy(() => import('pages/DemandNote/Create')));
 const DemandNote_Search = Loadable(lazy(() => import('pages/DemandNote/Search')));
 const DemandNote_Details = Loadable(lazy(() => import('pages/DemandNote/Details')));
+const GFMIS_Search = Loadable(lazy(() => import('pages/GFMIS')));
 // ==============================|| MAIN ROUTING ||============================== //
 
 const GLDUserRoutes = {
@@ -73,6 +74,10 @@ const GLDUserRoutes = {
         {
           path: '/paymentPage/demandNote/details/:id',
           element: <DemandNote_Details/>
+        },
+        {
+          path: '/gfmis/search',
+          element: <GFMIS_Search/>
         }
       ]
     },

src/utils/ApiPathConst.js

@@ -108,7 +108,7 @@ export const DEMAND_NOTE_MARK_PAID = apiPath+'/demandNote/mark-as-paid';//POST
 export const DEMAND_NOTE_ATTACH = apiPath+'/demandNote/attach';//POST
 export const DEMAND_NOTE_EXPORT = apiPath+'/demandNote/export';//POST
 
-
+export const GFIMIS_LIST = apiPath+'/gfmis/list';//GET
 
 
 //User Group