update import offline and xml

src/components/FiDataGrid.js

@@ -1,5 +1,6 @@
 // material-ui
 import { useState, useEffect } from 'react';
+import { Box } from "@mui/material";
 import {
     DataGrid, GridOverlay,
 } from "@mui/x-data-grid";
@@ -10,10 +11,10 @@ import { getSearchCriteria, checkSearchCriteriaPath } from "auth/utils";
 
 // ==============================|| EVENT TABLE ||============================== //
 
-export function FiDataGrid({ rows, columns, sx, autoHeight,
+export function FiDataGrid({ rows, columns, sx, autoHeight = true,
     hideFooterSelectedRowCount, rowModesModel, editMode,
     pageSizeOptions, filterItems, customPageSize, doLoad, applyGridOnReady, applySearch,
-    tab, ...props }) {
+    tab, height, maxHeight, pagination = true, ...props }) {
     const intl = useIntl();
     const [_rows, set_rows] = useState([]);
     const [_doLoad, set_doLoad] = useState({});
@@ -26,7 +27,7 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
 
     const [page, setPage] = useState(0);
     const [pageSize, setPageSize] = useState(10);
-    const [_autoHeight, set_autoHeight] = useState(true);
+    // const [_autoHeight, set_autoHeight] = useState(true);
     const [myHideFooterSelectedRowCount, setMyHideFooterSelectedRowCount] = useState(true);
     const [_sx, set_sx] = useState({
         padding: "4 2 4 2",
@@ -50,6 +51,15 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
         },
     });
 
+    const effectiveAutoHeight = autoHeight && !height && !maxHeight;
+
+    const containerSx = {
+        width: '100%',
+        ...(height ? { height } : {}),
+        ...(maxHeight ? { maxHeight, height: '100%' } : {}),
+        overflow: 'hidden',
+    };
+
     const [rowCount, setRowCount] = useState(0);
 
     useEffect(() => {
@@ -97,9 +107,9 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
         if (pageSizeOptions) {
             set_pageSizeOptions(pageSizeOptions)
         }
-        if (autoHeight !== undefined) {
-            set_autoHeight(autoHeight)
-        }
+        // if (autoHeight !== undefined) {
+        //     set_autoHeight(autoHeight)
+        // }
         if (editMode) {
             set_editMode(editMode);
         }
@@ -188,39 +198,58 @@ export function FiDataGrid({ rows, columns, sx, autoHeight,
 
 
     return (
-        <DataGrid
-            {...props}
-            rows={_rows}
-            rowCount={rowCount ? rowCount : 0}
-            columns={_columns}
-            paginationMode="server"
-            disableColumnMenu
-            shrinkWrap={true}
-            rowModesModel={_rowModesModel}
-            pageSizeOptions={_pageSizeOptions}
-            editMode={_editMode}
-            autoHeight={_autoHeight}
-            hideFooterSelectedRowCount={myHideFooterSelectedRowCount}
-            filterModel={{ items: _filterItems }}
-            sx={_sx}
-            loading={loading}
-            components={{
-                noRowsOverlay: CustomNoRowsOverlay,
-                Pagination: () => (
-                    <TablePagination
-                        count={rowCount ? rowCount : 0}
-                        page={page}
-                        rowsPerPage={pageSize}
-                        rowsPerPageOptions={_pageSizeOptions}
-                        labelDisplayedRows={() =>
-                            `${(_rows?.length ? page * pageSize + 1 : 0)}-${page * pageSize + (_rows?.length ?? 0)} ${intl.formatMessage({ id: "of" })} ${rowCount}`
+        <Box sx={containerSx}>
+            <DataGrid
+                {...props}
+                rows={_rows}
+                rowCount={rowCount || 0}
+                columns={_columns}
+                disableColumnMenu
+                shrinkWrap
+                rowModesModel={_rowModesModel}
+                pageSizeOptions={pagination ? _pageSizeOptions : []}
+                editMode={_editMode}
+                autoHeight={effectiveAutoHeight}
+                hideFooterSelectedRowCount={myHideFooterSelectedRowCount}
+                filterModel={{ items: _filterItems }}
+                loading={loading}
+                paginationMode={pagination ? "server" : undefined}
+                sx={{
+                    ..._sx,
+                    '& .MuiDataGrid-virtualScroller': {
+                    overflowY: height || maxHeight ? 'auto' : 'visible',
+                    overflowX: height || maxHeight ? 'auto' : 'visible',
+                    },
+                    // 👇 completely hide the footer when pagination is off
+                    ...(pagination === false && {
+                    '& .MuiDataGrid-footerContainer': {
+                        display: 'none',
+                    },
+                    }),
+                }}
+                components={{
+                    noRowsOverlay: CustomNoRowsOverlay,
+                    ...(pagination
+                    ? {
+                        Pagination: () => (
+                            <TablePagination
+                            count={rowCount || 0}
+                            page={page}
+                            rowsPerPage={pageSize}
+                            rowsPerPageOptions={_pageSizeOptions}
+                            labelDisplayedRows={() =>
+                                `${(_rows?.length ? page * pageSize + 1 : 0)}-${page * pageSize + (_rows?.length ?? 0)} ${intl.formatMessage({ id: "of" })} ${rowCount}`
+                            }
+                            labelRowsPerPage={intl.formatMessage({ id: "rowsPerPage" }) + ":"}
+                            onPageChange={handleChangePage}
+                            onRowsPerPageChange={handleChangePageSize}
+                            />
+                        ),
                         }
-                        labelRowsPerPage={intl.formatMessage({ id: "rowsPerPage" }) + ":"}
-                        onPageChange={handleChangePage}
-                        onRowsPerPageChange={handleChangePageSize}
-                    />
-                ),
-            }}
-        />
+                    : {}),
+                }}
+            />
+
+        </Box>
     );
 }

src/pages/GFMIS/SearchForm.js

@@ -2,8 +2,8 @@
 import {
     Button,
     Grid, 
-    // TextField,
-    // Autocomplete,
+    TextField,
+    Autocomplete,
     Typography
 } from '@mui/material';
 import MainCard from "components/MainCard";
@@ -14,6 +14,7 @@ import {PNSPS_BUTTON_THEME} from "../../themes/buttonConst";
 import {ThemeProvider} from "@emotion/react";
 // import * as ComboData from "utils/ComboData";
 import * as DateUtils from "utils/DateUtils";
+import * as ComboData from "utils/ComboData";
 
 import {DatePicker} from "@mui/x-date-pickers/DatePicker";
 import dayjs from "dayjs";
@@ -21,17 +22,19 @@ 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, generateXML, searchCriteria, onGridReady }) => {
+const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria, onGridReady,selectedIds=[] }) => {
 
     // const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate,setMaxDate] = React.useState(searchCriteria.dateFrom);
     const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy");
     const [toDateValue, setToDateValue] = React.useState("dd / mm / yyyy");
+    const [payMethod, setPayMethod] = React.useState(ComboData.payMethod[0]);
     // const [status, setStatus] = React.useState(ComboData.paymentStatus[0]);
+    const marginBottom = 2.5;
 
     const {
-        // register, 
+        register, 
         handleSubmit, 
     } = useForm()
 
@@ -59,6 +62,8 @@ const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria, onGr
             // transNo: data.transNo,
             dateFrom: sentDateFrom,
             dateTo: sentDateTo,
+            paymentId: selectedIds.join(','),
+            payMethod : (payMethod?.type && payMethod?.type != 'all') ? payMethod?.type : "",
             // status : (status?.type && status?.type != 'all') ? status?.type : "",
         };
         applySearch(temp);
@@ -103,7 +108,7 @@ const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria, onGr
                     {/*row 2*/}
 
                     <Grid container display="flex" alignItems={"center"}>
-                        <Grid item xs={9} s={6} md={4} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}>                 
+                        <Grid item xs={9} s={6} md={3} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>                 
                             <LocalizationProvider dateAdapter={AdapterDayjs}>
                                 <DemoItem  components={['DatePicker']}>
                                     <DatePicker
@@ -130,7 +135,7 @@ const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria, onGr
                             </LocalizationProvider>
                         </Grid>
 
-                        <Grid item xs={9} s={6} md={4} lg={4} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <Grid item xs={9} s={6} md={3} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
                             <LocalizationProvider dateAdapter={AdapterDayjs}>
                                 <DemoItem  components={['DatePicker']}>
                                     <DatePicker
@@ -157,6 +162,35 @@ const SearchPublicNoticeForm = ({ applySearch, generateXML, searchCriteria, onGr
                             </LocalizationProvider>
                         </Grid>
 
+                        <Grid item xs={9} s={6} md={3} lg={3} sx={{ ml: 3, mr: 3, mb: marginBottom }}>
+                                <Autocomplete
+                                    {...register("payMethod")}
+                                    disablePortal={false}
+                                    size="small"
+                                    id="payMethod"
+                                    filterOptions={(options) => options}
+                                    options={ComboData.payMethod}
+                                    value={payMethod}
+                                    getOptionLabel={(option) => option.label}
+                                    inputValue={payMethod?.label ? payMethod?.label : ""}
+                                    onChange={(event, newValue) => {
+                                        if(newValue==null){
+                                            setPayMethod(ComboData.payMethod[0]);
+                                        }else{
+                                            setPayMethod(newValue);
+                                        }
+                                    }}
+                                    renderInput={(params) => (
+                                        <TextField {...params}
+                                            label="Payment Means"
+                                        />
+                                    )}
+                                    InputLabelProps={{
+                                        shrink: true
+                                    }}
+                                />
+                        </Grid>
+
                         {/* <Grid item xs={9} s={6} md={4} lg={3}>
                         </Grid> */}
                     </Grid>

src/pages/GFMIS/TransactionDataGrid.js

@@ -0,0 +1,118 @@
+// material-ui
+import * as React from 'react';
+import * as DateUtils from "utils/DateUtils";
+import {PAYMENT_GFMIS_LIST} from "utils/ApiPathConst";
+// import * as HttpUtils from "utils/HttpUtils";
+import * as FormatUtils from "utils/FormatUtils"
+// import { useNavigate } from "react-router-dom";
+import { FiDataGrid } from "components/FiDataGrid";
+import { clickableLink } from 'utils/CommonFunction';
+import {
+    // Checkbox,
+    // Dialog, DialogTitle, DialogContent, DialogActions,
+    // Button,Typography
+    // MenuItem
+} from '@mui/material';
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function SearchPaymentTable({ searchCriteria, applyGridOnReady, applySearch, selectedIds = [], onSelectionChange,}) {
+    const [_searchCriteria, set_searchCriteria] = React.useState(searchCriteria);
+    // 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(() => {
+        set_searchCriteria(searchCriteria);
+    }, [searchCriteria]);
+
+    const columns = [
+        {
+            id: 'appNos',
+            field: 'appNos',
+            headerName: 'Application No.',
+            flex: 1,
+            minWidth: 150,
+            renderCell: (params) => {
+                let appNo = params.row.appNos;
+                return <div style={{ marginTop: 2, marginBottom: 2 }}>{appNo}</div>
+            },
+        },
+        {
+            field: 'actions',
+            headerName: 'Transaction No.',
+            flex: 1,
+            minWidth: 200,
+            cellClassName: 'actions',
+            renderCell: (params) => {
+                return clickableLink('/paymentPage/details/' + params.row.id, params.row.transNo);
+            },
+        },
+        {
+            id: 'transDateTime',
+            field: 'transDateTime',
+            headerName: 'Transaction Date',
+            flex: 1,
+            minWidth: 150,
+            valueGetter: (params) => {
+                return DateUtils.dateStr(params?.value);
+            }
+        },
+        {
+            field: 'payMethod',
+            headerName: 'Payment Method',
+            flex: 1,
+            width: 150,
+            renderCell: (params) => {
+                return params?.value
+            }
+        },
+        {
+            id: 'payAmount',
+            field: 'payAmount',
+            headerName: 'Amount ($)',
+            width: 150,
+            valueGetter: (params) => {
+                return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
+            }
+        },
+    ];
+
+    return (
+        <div style={{ width: '100%' }}>
+            <FiDataGrid
+                sx={_sx}
+                rowHeight={80}
+                columns={columns}
+                height={500} 
+                autoHeight={false}
+                pagination={false}
+                applyGridOnReady={applyGridOnReady}
+                applySearch={applySearch}
+
+                checkboxSelection
+                disableRowSelectionOnClick
+                rowSelectionModel={selectedIds}
+                onRowSelectionModelChange={(ids) => onSelectionChange?.(ids)}
+
+                doLoad={React.useMemo(() => ({
+                    url: PAYMENT_GFMIS_LIST,
+                    params: _searchCriteria,
+                }), [_searchCriteria])}
+            />
+        </div>
+    );
+}

src/pages/GFMIS/index.js

@@ -22,6 +22,7 @@ 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')));
+const TransactionTable = Loadable(React.lazy(() => import('./TransactionDataGrid')));
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
 
 const BackgroundHead = {
@@ -46,7 +47,7 @@ const Index = () => {
     const [onGridReady, setGridOnReady] = React.useState(false);
     const [isPopUp, setIsPopUp] = React.useState(false);
     const [downloadInput, setDownloadInput] = React.useState();
-
+    const [selectedIds, setSelectedIds] = React.useState([]);
 
     const [inputDate, setInputDate] = React.useState(searchCriteria.dateTo);
     const [inputDateValue, setInputDateValue] = React.useState("dd / mm / yyyy");
@@ -61,7 +62,7 @@ const Index = () => {
 
 
     function downloadXML() {
-        // console.log(input)
+        console.log(selectedIds.join(','))
         setIsPopUp(false)
         let sentDateFrom = "";
         
@@ -73,7 +74,8 @@ const Index = () => {
             params:{
                 dateTo: downloadInput.dateTo,
                 dateFrom: downloadInput.dateFrom,
-                inputDate: sentDateFrom
+                inputDate: sentDateFrom,
+                paymentId: selectedIds.join(',')
             },
             onSuccess: (responseData) => {
                 // console.log(responseData)
@@ -158,9 +160,25 @@ const Index = () => {
                         generateXML={generateXML}
                         searchCriteria={searchCriteria}
                         onGridReady={onGridReady}
+                        selectedIds={selectedIds}
                     />
                 </Grid>
                 {/*row 2*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <MainCard elevation={0}
+                            border={false}
+                            content={false}
+                            sx={{width: "-webkit-fill-available"}}
+                    >
+                        <TransactionTable
+                            searchCriteria={searchCriteria}
+                            applyGridOnReady={applyGridOnReady}
+                            applySearch={applySearch}
+                            selectedIds={selectedIds}
+                            onSelectionChange={setSelectedIds}
+                        />
+                    </MainCard>
+                </Grid>
                 <Grid item xs={12} md={12} lg={12}>
                     <MainCard elevation={0}
                             border={false}

src/pages/Payment/Search_GLD/DataGrid.js

@@ -91,6 +91,15 @@ export default function SearchPaymentTable({ searchCriteria, applyGridOnReady, a
                 return clickableLink('/paymentPage/details/' + params.row.id, params.row.transNo);
             },
         },
+        {
+            field: 'payMethod',
+            headerName: 'Payment Method',
+            flex: 1,
+            width: 150,
+            renderCell: (params) => {
+                return params?.value
+            }
+        },
         {
             id: 'transDateTime',
             field: 'transDateTime',

src/pages/Report/FullListForm.js

@@ -90,6 +90,7 @@ const FullListForm = ({ searchCriteria, issueComboData}) => {
     function resetForm() {
         setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)))
         setMaxDate(DateUtils.dateValue(new Date()))
+        setIssueSelected({});
         reset({contact:""});
     }
 

src/pages/Report/SummaryForm.js

@@ -3,6 +3,7 @@ import {
     Button,
     Grid, 
     TextField,
+    Autocomplete,
     Typography
 } from '@mui/material';
 import MainCard from "components/MainCard";
@@ -13,6 +14,7 @@ import {ThemeProvider} from "@emotion/react";
 import {PNSPS_BUTTON_THEME} from "../../themes/buttonConst";
 import * as HttpUtils from "utils/HttpUtils";
 import * as UrlUtils from "utils/ApiPathConst";
+import * as FormatUtils from "utils/FormatUtils";
 
 import {DatePicker} from "@mui/x-date-pickers/DatePicker";
 import dayjs from "dayjs";
@@ -21,7 +23,7 @@ import {LocalizationProvider} from "@mui/x-date-pickers/LocalizationProvider";
 import {AdapterDayjs} from "@mui/x-date-pickers/AdapterDayjs";
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
-const SummaryForm = ({ searchCriteria}) => {
+const SummaryForm = ({ searchCriteria, issueComboData}) => {
 
     const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
     const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
@@ -29,6 +31,8 @@ const SummaryForm = ({ searchCriteria}) => {
     const [fromDateValue, setFromDateValue] = React.useState("dd / mm / yyyy");
     const [toDateValue, setToDateValue] = React.useState("dd / mm / yyyy");
 
+    const [issueSelected, setIssueSelected] = React.useState({});
+    const [issueCombo, setIssueCombo] = React.useState([]);
 
     const [waitDownload, setWaitDownload] = React.useState(false);
 
@@ -55,6 +59,7 @@ const SummaryForm = ({ searchCriteria}) => {
             dateFrom: sentDateFrom,
             dateTo: sentDateTo,
             contact: data.contact,
+            issueId: issueSelected?.id
         };
         doExport(temp);
     };
@@ -69,9 +74,30 @@ const SummaryForm = ({ searchCriteria}) => {
         });
     };
 
+    React.useEffect(() => {
+        if (issueComboData && issueComboData.length > 0) {
+            setIssueCombo(issueComboData);
+            if(searchCriteria.issueId!=undefined){
+                setIssueSelected(issueComboData.find(item => item.id === searchCriteria.issueId))
+            }
+        }
+    }, [issueComboData]);
+
+    const getIssueLabel=(data)=> {
+        let issueYear = data.issueYear
+        let volume = data.volume;
+        let issueNo = data.issueNo;
+        let issueDate = data.issueDate;
+        return issueYear
+            + " Vol. " + FormatUtils.zeroPad(volume, 3)
+            + ", No. " + FormatUtils.zeroPad(issueNo, 2)
+            + ", " + DateUtils.dateFormat(issueDate, "D MMM YYYY (ddd)");
+    }
+
     function resetForm() {
         setMinDate(DateUtils.dateValue(new Date().setDate(new Date().getDate()-14)))
         setMaxDate(DateUtils.dateValue(new Date()))
+        setIssueSelected({});
         reset({contact:""});
     }
 
@@ -106,6 +132,29 @@ const SummaryForm = ({ searchCriteria}) => {
                             />
 
                         </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={12} s={6} md={5} lg={3} sx={{ml:3, mr:3, mb:marginBottom}}>
                             <Grid container spacing={1}>

src/pages/Report/index.js

@@ -89,6 +89,7 @@ const ReportSearchPage = () => {
                 <Grid item xs={12} md={12} lg={12} sx={{mb: -1}}>
                     <SummaryForm
                         searchCriteria={searchCriteria}
+                        issueComboData={issueCombo}
                     />
                 </Grid>
                 {/*row 2*/}

src/pages/Setting/DrImport/index.js

@@ -73,6 +73,43 @@ const Index = () => {
         }
         document.getElementById("uploadFileBtn").value = "";
     }
+    
+    const readOfflineFile = (event) => {
+        let file = event.target.files[0];
+        setWait(true);
+        if (file) {
+            
+            if (file.name.toLowerCase().substr(file.name.length - 5).includes(".xlsx")
+            ) {
+                HttpUtils.postWithFiles({
+                    url: UrlUtils.OFFLINE_IMPORT,
+                    params:null,
+                    files: [event.target.files[0]],
+                    onSuccess: function (responData) {
+                        setWait(false);
+                        if(responData?.msg){
+                            setResultStr(<>{DateUtils.datetimeStr(new Date())}<br/><span style={{"color": "red"}}>Error</span><br/><span style={{"whiteSpace": "pre-line"}}>{responData?.msg}</span></>)
+                        }else if(responData?.success){
+                            setResultStr(<>{DateUtils.datetimeStr(new Date())}<br/><span style={{"color": "green"}}>Success</span><br/>Record Count: {responData.recordCount}</>)
+                        }
+                    },
+                    onError: function(){
+                        setWait(false);
+                        setResultStr(<>{DateUtils.datetimeStr(new Date())}<br/><span style={{"color": "red"}}>Error</span><br/>Action Fail: Please import valid file.</>)
+                    }
+                });
+            } else {
+                setWait(false);
+                setWarningText("Please upload a valid file (file format: .xlsx)");
+                setIsWarningPopUp(true);
+                document.getElementById("uploadOfflineFileBtn").value = "";
+                return;
+            }
+        }else{
+            setWait(false);
+        }
+        document.getElementById("uploadOfflineFileBtn").value = "";
+    }
 
     return (
         <Grid container sx={{ minHeight: '87vh', backgroundColor: 'backgroundColor.default' }} direction="column" alignItems="center">
@@ -103,39 +140,71 @@ const Index = () => {
                                     }
                                 });
                             }}
-                        >Export DR Excel</Button>
-                            <Grid item sx={{ pl: 4 }}>
-                                <Grid container direction="row" justifyContent="flex-start" alignItems="center">
-                                    <Grid item xs={12} md={6} lg={6} sx={{ wordBreak: 'break-word' }}>
-                                        <input
-                                            id="uploadFileBtn"
-                                            name="file"
-                                            type="file"
-                                            accept=".xlsx"
-                                            style={{ display: 'none' }}
-                                            onChange={(event) => {
-                                                readFile(event)
-                                            }}
-                                        />
-                                    </Grid>
+                        >Export DR Excel
+                        </Button>
+                        <Grid item sx={{ pl: 4 }}>
+                            <Grid container direction="row" justifyContent="flex-start" alignItems="center">
+                                <Grid item xs={12} md={6} lg={6} sx={{ wordBreak: 'break-word' }}>
+                                    <input
+                                        id="uploadFileBtn"
+                                        name="file"
+                                        type="file"
+                                        accept=".xlsx"
+                                        style={{ display: 'none' }}
+                                        onChange={(event) => {
+                                            readFile(event)
+                                        }}
+                                    />
                                 </Grid>
                             </Grid>
-                            <Grid item >
-                                <Grid container direction="row" justifyContent="flex-start" alignItems="center">
-                                    <Grid item xs={12} >
-                                        <label htmlFor="uploadFileBtn">
-                                            <Button
-                                                aria-label={intl.formatMessage({ id: 'uploadFileBtn' })}
-                                                component="span"
-                                                variant="outlined"
-                                                size="large"
-                                            >Import DR Excel</Button>
-                                        </label>
-                                    </Grid>
-                                    
+                        </Grid>
+                        <Grid item >
+                            <Grid container direction="row" justifyContent="flex-start" alignItems="center">
+                                <Grid item xs={12} >
+                                    <label htmlFor="uploadFileBtn">
+                                        <Button
+                                            aria-label={intl.formatMessage({ id: 'uploadFileBtn' })}
+                                            component="span"
+                                            variant="outlined"
+                                            size="large"
+                                        >Import DR Excel</Button>
+                                    </label>
                                 </Grid>
+                                
                             </Grid>
-                     
+                        </Grid>
+                        <Grid item sx={{ pl: 4 }}>
+                            <Grid container direction="row" justifyContent="flex-start" alignItems="center">
+                                <Grid item xs={12} md={6} lg={6} sx={{ wordBreak: 'break-word' }}>
+                                    <input
+                                        id="uploadOfflineFileBtn"
+                                        name="file"
+                                        type="file"
+                                        accept=".xlsx"
+                                        style={{ display: 'none' }}
+                                        onChange={(event) => {
+                                            readOfflineFile(event)
+                                        }}
+                                    />
+                                </Grid>
+                            </Grid>
+                        </Grid>
+                        <Grid item>
+                            <Grid container direction="row" justifyContent="flex-end" alignItems="center">
+                                <Grid item xs={12} >
+                                    <label htmlFor="uploadOfflineFileBtn">
+                                        <Button
+                                            aria-label={intl.formatMessage({ id: 'uploadFileBtn' })}
+                                            component="span"
+                                            variant="outlined"
+                                            size="large"
+                                        >Import Offline Mode Application</Button>
+                                    </label>
+                                </Grid>
+                                
+                            </Grid>
+                        </Grid>
+
                     </Stack>
                 </Box>
             </Grid>

src/utils/ApiPathConst.js

@@ -83,6 +83,7 @@ export const GET_FILE_DELETE = apiPath+'/file/delete';
 
 export const DR_EXPORT = apiPath+'/settings/dr/export';
 export const DR_IMPORT = apiPath+'/settings/dr/import';
+export const OFFLINE_IMPORT = apiPath+'/settings/dr/importOffline';
 export const AUDIT_LOG_EXPORT = apiPath+'/settings/auditLog-export';
 
 
@@ -176,6 +177,7 @@ export const PAYMENT_LOAD = apiPath+'/payment/load';//GET
 export const PAYMENT_APP_LIST = apiPath+'/payment/applist';//POST
 export const PAYMENT_CHECK = apiPath+'/payment/check-payment';//GET
 export const PAYMENT_BIB = apiPath+'/payment/set-bib';//POST
+export const PAYMENT_GFMIS_LIST = apiPath+'/payment/listGFMIS';//GET
 
 export const PAYMENT_LIMIT_SETTING_LIST = apiPath+'/settings/payment';//GET
 // export const PAYMENT_AVAILABLE_PAYMENT = paymentPath+'/api/payment/availability';//POST