create demandNote

src/layout/MainLayout/Header/index.js

@@ -121,6 +121,12 @@ function Header(props) {
             <li>
               <Link className="downloadXML" onClick={getXML()} ><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Download XML</Typography></Link>
             </li>
+            <li>
+              <Link className="createDemandNote" to='/paymentPage/createDemandNote' ><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Create DN</Typography></Link>
+            </li>
+            <li>
+              <Link className="demandNote" to='/paymentPage/demandNote' ><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Demand Note</Typography></Link>
+            </li>
           </ul>
         </li>
         <li>

src/pages/DemandNote/Create/DataGrid.js

@@ -0,0 +1,120 @@
+// material-ui
+import * as React from 'react';
+import {
+    Button
+} from '@mui/material';
+import * as DateUtils from "utils/DateUtils";
+import * as PublicNoteStatusUtils from "utils/statusUtils/PublicNoteStatusUtils"
+import { FiDataGrid } from "components/FiDataGrid";
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function SearchPublicNoticeTable({ recordList }) {
+    const [rows, setRows] = React.useState(recordList);
+
+    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) => () => {
+        window.open('/application/' + params.row.id);
+    };
+
+    const columns = [
+        {
+            id: 'appNo',
+            field: 'appNo',
+            headerName: 'App No.',
+            flex: 1,
+            renderCell: (params) => {
+                return <Button onClick={handleEditClick(params)}><u>{params.row.appNo}</u></Button>;
+            },
+        },
+        {
+            field: 'status',
+            headerName: 'Status',
+            flex: 1,
+            renderCell: (params) => {
+                return PublicNoteStatusUtils.getStatusByTextEng(params.row.status);
+            }
+        },
+        {
+            field: 'date',
+            headerName: 'Submit Date',
+            flex: 1,
+            renderCell: (params) => {
+                return DateUtils.datetimeStr(params.row.created);
+            }
+        },
+        {
+            id: 'contactPerson',
+            field: 'contactPerson',
+            headerName: 'Contact Person',
+            flex: 1,
+            valueGetter: (params) => {
+                let company = params.row.enCompanyName != null ? " (" + (params.row.enCompanyName) + ")" : "";
+
+                let phone = JSON.parse(params.row.contactTelNo);
+                let faxNo = JSON.parse(params.row.contactFaxNo);
+
+                let contact = "";
+                if (phone) {
+                    contact = "Phone No.: " + phone?.countryCode + " " + phone?.phoneNumber
+                }
+
+                if (faxNo && faxNo?.faxNumber) {
+                    if (contact != "")
+                        contact = contact + ", "
+                    contact = contact + "Fax No.:" + faxNo?.countryCode + " " + faxNo?.faxNumber
+                }
+
+                return (<>
+                    {params?.value + company}<br />
+                    {contact}
+                </>);
+            }
+        },
+        {
+            id: 'groupNo',
+            field: 'groupNo',
+            headerName: 'Gazette Group',
+            flex: 1,
+            valueGetter: (params) => {
+                return (params?.value) ? (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/DemandNote/Create/SearchForm.js

@@ -0,0 +1,178 @@
+// material-ui
+import {
+    Button,
+    CardContent,
+    Grid, TextField,
+    Autocomplete,
+    Typography,
+    Dialog, DialogTitle, DialogContent, DialogActions,
+} from '@mui/material';
+import MainCard from "components/MainCard";
+import * as React from "react";
+import * as FormatUtils from "utils/FormatUtils";
+import * as DateUtils from "utils/DateUtils";
+import * as UrlUtils from "utils/ApiPathConst";
+import * as HttpUtils from "utils/HttpUtils";
+import { useNavigate } from "react-router-dom";
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+
+const SearchPublicNoticeForm = ({ applySearch, issueComboData }) => {
+
+    const [isFailPopUp, setIsFailPopUp] = React.useState(false);
+    const [failText, setFailText] = React.useState("");
+
+    const [issueSelected, setIssueSelected] = React.useState({});
+    const [issueCombo, setIssueCombo] = React.useState([]);
+    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(() => {
+        if (issueComboData && issueComboData.length > 0) {
+            setIssueCombo(issueComboData);
+        }
+    }, [issueComboData]);
+
+    function getIssueLabel(data) {
+        if (data == {}) return "";
+        return data.year
+            + " Vol. " + FormatUtils.zeroPad(data.volume, 3)
+            + ", No. " + FormatUtils.zeroPad(data.issueNo, 2)
+            + ", " + DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");
+    }
+
+    const onSubmit = () => {
+        if (!issueSelected?.id) {
+            setFailText("Fail Create: Please select Gazette Issue.");
+            setIsFailPopUp(true);
+            return;
+        } else {
+            HttpUtils.post({
+                url: UrlUtils.DEMAND_NOTE_CREATE + "/" + issueSelected.id,
+                onSuccess: function () {
+                    navigate('/paymentPage/demandNote');
+                }
+            });
+        }
+
+    };
+
+    const onPreView = () => {
+        if (!issueSelected?.id) {
+            setFailText("Fail Preview : Please select Gazette Issue.");
+            setIsFailPopUp(true);
+            return;
+        }
+        const temp = {
+            issueId: issueSelected.id,
+        };
+        applySearch(temp);
+    };
+
+    return (
+        <MainCard xs={12} md={12} lg={12}
+            border={false}
+            content={false}
+            sx={_sx}
+        >
+
+            <form>
+                {/*row 1*/}
+                <CardContent sx={{ px: 2.5, pt: 3 }}>
+                    <Grid item justifyContent="space-between" alignItems="center" >
+                        <Typography variant="h4">Create</Typography>
+                    </Grid>
+                </CardContent>
+
+                {/*row 2*/}
+                <Grid container alignItems={"center"}>
+
+
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <Autocomplete
+                            disablePortal
+                            id="issueId"
+                            options={issueCombo}
+                            value={issueSelected}
+                            inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""}
+                            getOptionLabel={(option) => getIssueLabel(option)}
+                            onChange={(event, newValue) => {
+                                if (newValue !== null) {
+                                    setIssueSelected(newValue);
+                                }
+                            }}
+                            renderInput={(params) => (
+                                <TextField {...params}
+                                    label="Gazette Issue"
+                                    InputLabelProps={{
+                                        shrink: true
+                                    }}
+                                />
+                            )}
+                        />
+                    </Grid>
+
+                </Grid>
+
+
+                {/*last row*/}
+                <Grid container maxWidth justifyContent="flex-end">
+                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }} >
+                        <Button
+                            size="large"
+                            variant="contained"
+                            onClick={onPreView}
+                            sx={{
+                                textTransform: 'capitalize',
+                                alignItems: 'end'
+                            }}>
+                            <Typography variant="h5">Preview</Typography>
+                        </Button>
+                    </Grid>
+
+                    <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }} >
+                        <Button
+                            size="large"
+                            variant="contained"
+                            onClick={onSubmit}
+                            color="success"
+                            sx={{
+                                textTransform: 'capitalize',
+                                alignItems: 'end'
+                            }}>
+                            <Typography variant="h5">Create</Typography>
+                        </Button>
+                    </Grid>
+                </Grid>
+            </form>
+            <div>
+                <Dialog open={isFailPopUp} onClose={() => setIsFailPopUp(false)}  >
+                    <DialogTitle><Typography variant="h3">Action Fail</Typography></DialogTitle>
+                    <DialogContent style={{ display: 'flex', }}>
+                        <Typography variant="h4" style={{ padding: '16px' }}>{failText}</Typography>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={() => setIsFailPopUp(false)}><Typography variant="h5">OK</Typography></Button>
+                    </DialogActions>
+                </Dialog>
+            </div>
+        </MainCard>
+    );
+};
+
+export default SearchPublicNoticeForm;

src/pages/DemandNote/Create/index.js

@@ -0,0 +1,108 @@
+// material-ui
+import {
+    Grid,
+    Typography,
+    Stack
+} from '@mui/material';
+import MainCard from "components/MainCard";
+import * as UrlUtils from "utils/ApiPathConst";
+import * as HttpUtils from "utils/HttpUtils";
+import * as React from "react";
+
+
+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 [issueCombo, setIssueCombo] = React.useState([]);
+    const [searchCriteria, setSearchCriteria] = React.useState({});
+    const [onReady, setOnReady] = React.useState(false);
+
+    React.useEffect(()=>{
+        getIssueCombo();
+    },[]);
+
+    React.useEffect(() => {
+        setOnReady(true);
+    }, [record]);
+
+    React.useEffect(() => {
+        loadGrid();
+    }, [searchCriteria]);
+
+    function loadGrid(){
+        HttpUtils.get({
+            url: UrlUtils.DEMAND_NOTE_PREVIEW+"/"+searchCriteria.issueId,
+            onSuccess: function(responseData){
+                setRecord(responseData);
+            }
+        });
+    }
+
+    function getIssueCombo() {
+        HttpUtils.get({
+            url: UrlUtils.GET_ISSUE_COMBO,
+            onSuccess: function (responseData) {
+                let combo = responseData;
+                setIssueCombo(combo);
+            }
+        });
+    }
+
+
+    function applySearch(input) {
+        setSearchCriteria(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">Create DN</Typography>
+                        </Stack>
+                    </div>
+                </Grid>
+                {/*row 1*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <SearchForm 
+                    applySearch={applySearch}
+                    issueComboData={issueCombo}
+                    />
+                </Grid>
+                {/*row 2*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <MainCard elevation={0}
+                            border={false}
+                            content={false}
+                    >
+                        <EventTable
+                            recordList={record}
+                        />
+                    </MainCard>
+                </Grid>
+            </Grid>
+    );
+};
+
+export default Index;

src/pages/DemandNote/Search/DataGrid.js

@@ -0,0 +1,128 @@
+// material-ui
+import * as React from 'react';
+import {
+    Button,
+    Box
+} from '@mui/material';
+import * as DateUtils from "utils/DateUtils";
+import * as FormatUtils from "utils/FormatUtils";
+import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
+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()
+
+    React.useEffect(() => {
+        setRows(recordList);
+    }, [recordList]);
+
+    const handleEditClick = (params) => () => {
+        navigate('/application/' + params.id);
+    };
+
+
+    const columns = [
+        {
+            field: 'actions',
+            headerName: 'App No.',
+            width: 150,
+            cellClassName: 'actions',
+            renderCell: (params) => {
+                return <Button onClick={handleEditClick(params)}><u>{params.row.appNo}</u></Button>;
+            },
+        },
+        {
+            id: 'status',
+            field: 'status',
+            headerName: 'Status',
+            width: 175,
+            renderCell: (params) => {
+                return [StatusUtils.getStatusEng(params)]
+            },
+        },
+        {
+            id: 'created',
+            field: 'created',
+            headerName: 'Submit Date',
+            flex: 1,
+            valueGetter: (params) => {
+                return DateUtils.datetimeStr(params?.value);
+            }
+        },
+        {
+            id: 'contactPerson',
+            field: 'contactPerson',
+            headerName: 'Contact Person',
+            flex: 2,
+            renderCell: (params) => {
+                let company = params.row.enCompanyName != null ? " (" + (params.row.enCompanyName) + ")" : "";
+
+                let phone = JSON.parse(params.row.contactTelNo);
+                let faxNo = JSON.parse(params.row.contactFaxNo);
+
+                let contact = "";
+                if (phone) {
+                    contact = "Phone No.: " + phone?.countryCode + " " + phone?.phoneNumber
+                }
+
+                if (faxNo && faxNo?.faxNumber) {
+                    if (contact != "")
+                        contact = contact + ", "
+                    contact = contact + "Fax No.:" + faxNo?.countryCode + " " + faxNo?.faxNumber
+                }
+
+                return (<>
+                    {params?.value + company}<br />
+                    {contact}
+                </>);
+            }
+        },
+        {
+            id: 'groupNo',
+            field: 'groupNo',
+            headerName: 'Gazette Group',
+            flex: 1,
+            valueGetter: (params) => {
+                return (params?.value) ? (params?.value) : "";
+            }
+        },
+        {
+            id: 'issueId',
+            field: 'issueId',
+            headerName: 'Issue No',
+            flex: 1,
+            valueGetter: (params) => {
+                return params.row.issueYear
+                    + " Vol. " + FormatUtils.zeroPad(params.row.issueVolume, 3)
+                    + ", No. " + FormatUtils.zeroPad(params.row.issueNo, 2)
+                    + ", " + DateUtils.dateFormat(params.row.issueDate, "D MMM YYYY (ddd)");
+            }
+        },
+    ];
+
+    function handleRowDoubleClick(params) {
+        // handleEditClick(params)
+        navigate('/application/' + params.id);
+    }
+
+    return (
+        <div style={{ height: '100%', width: '100%' }}>
+            <Box sx={{ backgroundColor: "#fff", ml: 2 }} width="98%">
+                <FiDataGrid
+                    rows={rows}
+                    columns={columns}
+                    initialState={{
+                        pagination: {
+                            paginationModel: { page: 0, pageSize: 5 },
+                        },
+                    }}
+                    getRowHeight={() => 'auto'}
+                    onRowDoubleClick={handleRowDoubleClick}
+                />
+            </Box>
+        </div>
+    );
+}

src/pages/DemandNote/Search/SearchForm.js

@@ -0,0 +1,293 @@
+// 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 ComboData from "utils/ComboData";
+import * as DateUtils from "utils/DateUtils";
+import * as FormatUtils from "utils/FormatUtils";
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+
+const SearchDemandNoteForm = ({ applySearch, orgComboData, searchCriteria, issueComboData
+}) => {
+
+    const [type, setType] = React.useState([]);
+    // const [status, setStatus] = React.useState({ key: 0, label: 'All', type: 'all' });
+    const [orgSelected, setOrgSelected] = React.useState({});
+    const [orgCombo, setOrgCombo] = React.useState();
+    const [issueSelected, setIssueSelected] = React.useState({});
+    const [issueCombo, setIssueCombo] = React.useState([]);
+    const [selectedStatus, setSelectedStatus] = React.useState([]);
+    const [selectedLabelsString, setSelectedLabelsString] = React.useState('');
+
+    const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
+    const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
+
+    const { reset, register, handleSubmit } = useForm()
+    const onSubmit = (data) => {
+        data.status = selectedLabelsString
+        let typeArray = [];
+
+        for (let i = 0; i < type.length; i++) {
+            typeArray.push(type[i].label);
+        }
+
+        const temp = {
+            appNo: data.appNo,
+            issueId: issueSelected?.id,
+            orgId: (orgSelected?.key && orgSelected?.key > 0) ? orgSelected?.key : "",
+            dnNo: data.dnNo,
+            dateFrom: data.dateFrom,
+            dateTo: data.dateTo,
+            status: (data.status === '' || data.status.includes("all")) ? "" : data.status,          
+        };
+        applySearch(temp);
+    };
+
+    React.useEffect(() => {
+        if (orgComboData && orgComboData.length > 0) {
+            setOrgCombo(orgComboData);
+        }
+    }, [orgComboData]);
+
+    React.useEffect(() => {
+        if (issueComboData && issueComboData.length > 0) {
+            setIssueCombo(issueComboData);
+        }
+    }, [issueComboData]);
+
+    function resetForm() {
+        setType([]);
+        // setStatus({ key: 0, label: 'All', type: 'all' });
+        setOrgSelected({});
+        setIssueSelected({});
+        reset();
+    }
+
+    function getIssueLabel(data) {
+        if (data == {}) return "";
+        return data.year
+            + " Vol. " + FormatUtils.zeroPad(data.volume, 3)
+            + ", No. " + FormatUtils.zeroPad(data.issueNo, 2)
+            + ", " + DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");
+    }
+
+    return (
+        <MainCard xs={12} md={12} lg={12}
+            border={false}
+            content={false}
+            sx={{ backgroundColor: '#fff' }}
+        >
+
+            <form onSubmit={handleSubmit(onSubmit)}>
+                <Grid container sx={{ backgroundColor: '#ffffff', ml: 2, mt: 3, mb: 3 }} width="98%">
+                    {/*row 1*/}
+                    <Grid item xs={12}>
+                        <CardContent sx={{ px: 2.5, pt: 3 }}>
+                            <Grid item justifyContent="space-between" alignItems="center">
+                                <Typography variant="h5">Search Form</Typography>
+                            </Grid>
+                        </CardContent>
+                    </Grid>
+                    {/*row 2*/}
+                    <Grid container display="flex" alignItems={"center"}>
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            <Autocomplete
+                                {...register("issueId")}
+                                disablePortal
+                                id="issueId"
+                                options={issueCombo}
+                                value={issueSelected}
+                                inputValue={(issueSelected?.id) ? getIssueLabel(issueSelected) : ""}
+                                getOptionLabel={(option) => getIssueLabel(option)}
+                                onChange={(event, newValue) => {
+                                    if (newValue !== null) {
+                                        setIssueSelected(newValue);
+                                    }
+                                }}
+                                renderInput={(params) => (
+                                    <TextField {...params}
+                                        label="Gazette Issue"
+                                        InputLabelProps={{
+                                            shrink: true
+                                        }}
+                                    />
+                                )}
+                            />
+                        </Grid>
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            <TextField
+                                fullWidth
+                                {...register("appNo")}
+                                id='appNo'
+                                label={"App No."}
+                                defaultValue={searchCriteria.appNo}
+                                InputLabelProps={{
+                                    shrink: true
+                                }}
+                            />
+                        </Grid>
+
+                        {
+                            orgCombo ?
+                                <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                                    <Autocomplete
+                                        {...register("orgId")}
+                                        disablePortal
+                                        id="orgId"
+                                        options={orgCombo}
+                                        value={orgSelected}
+                                        inputValue={(orgSelected?.label) ? orgSelected?.label : ""}
+                                        onChange={(event, newValue) => {
+                                            if (newValue !== null) {
+                                                setOrgSelected(newValue);
+                                            }
+                                        }}
+                                        renderInput={(params) => (
+                                            <TextField {...params}
+                                                label="Organisation"
+                                                InputLabelProps={{
+                                                    shrink: true
+                                                }}
+                                            />
+                                        )}
+                                    />
+                                </Grid>
+                                : <></>
+                        }
+
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            <TextField
+                                fullWidth
+                                {...register("dnNo")}
+                                id='dnNo'
+                                label="DN No."
+                                defaultValue={searchCriteria.dnNo}
+                                InputLabelProps={{
+                                    shrink: true
+                                }}
+                            />
+                        </Grid>
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            <TextField
+                                fullWidth
+                                {...register("dateFrom")}
+                                id="dateFrom"
+                                type="date"
+                                label={"Issue Date(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={5} lg={3} 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={"Issue Date(To)"}
+                                defaultValue={searchCriteria.dateTo}
+                            />
+                        </Grid>
+
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            <Autocomplete
+                                multiple
+                                {...register("status")}
+                                id="status"
+                                options={ComboData.denmandNoteStatus}
+                                value={selectedStatus}
+                                onChange={(event, newValue) => {
+                                    const findAllIndex = newValue.findIndex((ele) => {
+                                        return ele.type === "all"
+                                    })
+
+                                    if (findAllIndex > -1) {
+                                        setSelectedStatus([newValue[findAllIndex]]);
+                                        setSelectedLabelsString('all')
+                                    } else {
+                                        const selectedLabels = newValue.map(option => option.type);
+                                        const selectedLabelsString = `${selectedLabels.join(',')}`;
+                                        setSelectedStatus(newValue);
+                                        setSelectedLabelsString(selectedLabelsString);
+                                    }
+                                }}
+                                getOptionLabel={(option) => option.label}
+                                renderInput={(params) => (
+                                    <TextField
+                                        {...params}
+                                        label="Status"
+                                        InputLabelProps={{
+                                            shrink: true
+                                        }}
+                                    />
+                                )}
+                            />
+                        </Grid>
+
+
+
+                    </Grid>
+
+                    {/*last row*/}
+                    <Grid container maxWidth justifyContent="flex-end">
+
+                        <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                            <Button
+                                size="large"
+                                variant="contained"
+                                onClick={resetForm}
+                                sx={{
+                                    textTransform: 'capitalize',
+                                    alignItems: 'end'
+                                }}>
+                                <Typography variant="h5">Clear</Typography>
+                            </Button>
+                        </Grid>
+
+                        <Grid item sx={{ ml: 3, mr: 3, mb: 3, mt: 3 }}>
+                            <Button
+                                size="large"
+                                variant="contained"
+                                type="submit"
+                                sx={{
+                                    textTransform: 'capitalize',
+                                    alignItems: 'end'
+                                }}>
+                                <Typography variant="h5">Submit</Typography>
+                            </Button>
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </form>
+        </MainCard>
+    );
+};
+
+export default SearchDemandNoteForm;

src/pages/DemandNote/Search/index.js

@@ -0,0 +1,127 @@
+// 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 UserSearchPage_Individual = () => {
+
+    const [record, setRecord] = React.useState([]);
+    const [orgCombo, setOrgCombo] = React.useState([]);
+    const [issueCombo, setIssueCombo] = 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(() => {
+        getUserList();
+        getOrgCombo();
+        getIssueCombo();
+    }, []);
+
+    React.useEffect(() => {
+        setOnReady(true);
+    }, [record]);
+
+    React.useEffect(() => {
+        getUserList();
+    }, [searchCriteria]);
+
+    function getUserList() {
+        HttpUtils.get({
+            url: UrlUtils.GET_PUBLIC_NOTICE_LIST,
+            params: searchCriteria,
+            onSuccess: function (responseData) {
+                setRecord(responseData);
+            }
+        });
+    }
+
+    function getOrgCombo() {
+        HttpUtils.get({
+            url: UrlUtils.GET_ORG_COMBO,
+            onSuccess: function (responseData) {
+                let combo = responseData;
+                setOrgCombo(combo);
+            }
+        });
+    }
+
+    function getIssueCombo() {
+        HttpUtils.get({
+            url: UrlUtils.GET_ISSUE_COMBO,
+            onSuccess: function (responseData) {
+                let combo = responseData;
+                setIssueCombo(combo);
+            }
+        });
+    }
+
+
+    function applySearch(input) {
+        setSearchCriteria(input);
+    }
+
+    return (
+        !onReady ?
+            <LoadingComponent />
+            :
+            <Grid container sx={{ minHeight: '85vh', 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">Application</Typography>
+                        </Stack>
+                    </div>
+                </Grid>
+                {/*row 1*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <SearchForm
+                        applySearch={applySearch}
+                        orgComboData={orgCombo}
+                        issueComboData={issueCombo}
+                        searchCriteria={searchCriteria}
+                    />
+                </Grid>
+                {/*row 2*/}
+                <Grid item xs={12} md={12} lg={12}>
+                    <MainCard elevation={0}
+                        border={false}
+                        content={false}
+                        sx={{ backgroundColor: '#fff' }}
+                    >
+                        <EventTable
+                            recordList={record}
+                        />
+                    </MainCard>
+                </Grid>
+            </Grid>
+    );
+}
+export default UserSearchPage_Individual;

src/pages/OrganizationDetailPage/OrganizationCard.js → src/pages/Organization/DetailPage/OrganizationCard.js

@@ -3,16 +3,16 @@ import {
     Grid, Button, Checkbox, FormControlLabel, Typography
 } from '@mui/material';
 // import { FormControlLabel } from '@material-ui/core';
-import MainCard from "../../components/MainCard";
+import MainCard from "../../../components/MainCard";
 import * as React from "react";
 import { useFormik } from 'formik';
 import * as yup from 'yup';
 import { useEffect, useState } from "react";
-import * as HttpUtils from '../../utils/HttpUtils';
-import * as UrlUtils from "../../utils/ApiPathConst";
-import * as FieldUtils from "../../utils/FieldUtils";
-import * as ComboData from "../../utils/ComboData";
-const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+import * as HttpUtils from '../../../utils/HttpUtils';
+import * as UrlUtils from "../../../utils/ApiPathConst";
+import * as FieldUtils from "../../../utils/FieldUtils";
+import * as ComboData from "../../../utils/ComboData";
+const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 import { notifySaveSuccess } from 'utils/CommonFunction';

src/pages/OrganizationDetailPage/index.js → src/pages/Organization/DetailPage/index.js

@@ -2,15 +2,15 @@
 import { Grid, Typography, Stack, Box, Button } from '@mui/material';
 import { useEffect, useState } from "react";
 import * as React from "react";
-import * as HttpUtils from "../../utils/HttpUtils";
+import * as HttpUtils from "../../../utils/HttpUtils";
 import { useParams } from "react-router-dom";
-import * as UrlUtils from "../../utils/ApiPathConst";
-import * as DateUtils from "../../utils/DateUtils";
+import * as UrlUtils from "../../../utils/ApiPathConst";
+import * as DateUtils from "../../../utils/DateUtils";
 
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 const InfoCard = Loadable(lazy(() => import('./OrganizationCard')));
-const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 import ForwardIcon from '@mui/icons-material/Forward';
 import { useNavigate } from 'react-router-dom';
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'

src/pages/OrganizationDetailPage_FromUser/OrganizationCard_loadFromUser.js → src/pages/Organization/DetailPage_FromUser/OrganizationCard_loadFromUser.js

@@ -3,17 +3,17 @@ import {
     Grid, Button, Typography,
     Dialog, DialogTitle, DialogContent, DialogActions,
 } from '@mui/material';
-import MainCard from "../../components/MainCard";
+import MainCard from "../../../components/MainCard";
 import * as React from "react";
 import * as yup from 'yup';
 import { useEffect, useState } from "react";
-import * as HttpUtils from '../../utils/HttpUtils';
-import * as UrlUtils from "../../utils/ApiPathConst";
-import * as FieldUtils from "../../utils/FieldUtils";
-import * as ComboData from "../../utils/ComboData";
+import * as HttpUtils from '../../../utils/HttpUtils';
+import * as UrlUtils from "../../../utils/ApiPathConst";
+import * as FieldUtils from "../../../utils/FieldUtils";
+import * as ComboData from "../../../utils/ComboData";
 import { useNavigate } from "react-router-dom";
 import { useFormik } from 'formik';
-const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 import { notifyCreateSuccess } from 'utils/CommonFunction';

src/pages/OrganizationDetailPage_FromUser/index.js → src/pages/Organization/DetailPage_FromUser/index.js

@@ -2,16 +2,16 @@
 import {Grid, Typography} from '@mui/material';
 import {useEffect, useState} from "react";
 import * as React from "react";
-import * as HttpUtils from "../../utils/HttpUtils";
+import * as HttpUtils from "../../../utils/HttpUtils";
 import {useParams} from "react-router-dom";
 import {useNavigate} from "react-router-dom";
-import * as UrlUtils from "../../utils/ApiPathConst";
-import * as DateUtils from "../../utils/DateUtils";
+import * as UrlUtils from "../../../utils/ApiPathConst";
+import * as DateUtils from "../../../utils/DateUtils";
 
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
 const InfoCard = Loadable(lazy(() => import('./OrganizationCard_loadFromUser')));
-const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 

src/pages/OrganizationSearchPage/OrganizationSearchForm.js → src/pages/Organization/SearchPage/OrganizationSearchForm.js

@@ -5,7 +5,7 @@ import {
     Grid, TextField,
     Typography
 } from '@mui/material';
-import MainCard from "../../components/MainCard";
+import MainCard from "../../../components/MainCard";
 import {useForm} from "react-hook-form";
 
 import { useState} from "react";

src/pages/OrganizationSearchPage/index.js → src/pages/Organization/SearchPage/index.js

@@ -2,19 +2,19 @@
 import {
     Grid, Typography, Stack
 } from '@mui/material';
-import MainCard from "../../components/MainCard";
+import MainCard from "../../../components/MainCard";
 
 import { useEffect, useState } from "react";
-import * as UrlUtils from "../../utils/ApiPathConst";
+import * as UrlUtils from "../../../utils/ApiPathConst";
 import * as React from "react";
-import * as HttpUtils from "../../utils/HttpUtils";
+import * as HttpUtils from "../../../utils/HttpUtils";
 
 // import LoadingComponent from "../extra-pages/LoadingComponent";
 // import SearchForm from "./OrganizationSearchForm";
 // import EventTable from "./OrganizationTable";
 import Loadable from 'components/Loadable';
 import { lazy } from 'react';
-const LoadingComponent = Loadable(lazy(() => import('../extra-pages/LoadingComponent')));
+const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
 const SearchForm = Loadable(lazy(() => import('./OrganizationSearchForm')));
 const EventTable = Loadable(lazy(() => import('./OrganizationTable')));
 import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'

src/routes/GLDUserRoutes.js

@@ -14,6 +14,8 @@ const ProofCreate_FromApp = Loadable(lazy(() => import('pages/Proof/Create_FromA
 const ProofReply_GLD = Loadable(lazy(() => import('pages/Proof/Reply_GLD')));
 const PaymentSearch_GLD = Loadable(lazy(() => import('pages/Payment/Search_GLD')));
 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')));
 // ==============================|| MAIN ROUTING ||============================== //
 
 const GLDUserRoutes = {
@@ -58,6 +60,14 @@ const GLDUserRoutes = {
         {
           path: '/paymentPage/details/:id',
           element: <PaymentDetails_GLD/>
+        },
+        {
+          path: '/paymentPage/createDemandNote',
+          element: <DemandNote_Create/>
+        },
+        {
+          path: '/paymentPage/demandNote',
+          element: <DemandNote_Search/>
         }
       ]
     },

src/routes/SettingRoutes.js

@@ -17,9 +17,9 @@ const UserSearchPage_Organization= Loadable(lazy(()=>import ('pages/User/SearchP
 const UserMaintainPage_Organization = Loadable(lazy(() => import('pages/User/DetailsPage_Organization')));
 const UserGroupSearchPage = Loadable(lazy(() => import('pages/pnspsUserGroupSearchPage')));
 const UserGroupDetailPage = Loadable(lazy(() => import('pages/pnspsUserGroupDetailPage')));
-const OrganizationSearchPage = Loadable(lazy(() => import('pages/OrganizationSearchPage')));
-const OrganizationDetailPage = Loadable(lazy(() => import('pages/OrganizationDetailPage')));
-const OrganizationDetailPage_fromUser = Loadable(lazy(() => import('pages/OrganizationDetailPage_FromUser')));
+const OrganizationSearchPage = Loadable(lazy(() => import('pages/Organization/SearchPage')));
+const OrganizationDetailPage = Loadable(lazy(() => import('pages/Organization/DetailPage')));
+const OrganizationDetailPage_fromUser = Loadable(lazy(() => import('pages/Organization/DetailPage_FromUser')));
 const EmailTemplatePage = Loadable(lazy(() => import('pages/EmailTemplate/Search_GLD')));
 const EmailTemplateDetailPage = Loadable(lazy(() => import('pages/EmailTemplate/Detail_GLD')));
 

src/utils/ApiPathConst.js

@@ -94,6 +94,9 @@ export const PAYMENT_LIST = apiPath+'/payment/list';//GET
 export const PAYMENT_LOAD = apiPath+'/payment/load';//GET
 export const PAYMENT_APP_LIST = apiPath+'/payment/applist';//POST
 
+export const DEMAND_NOTE_PREVIEW = apiPath+'/demandNote/preview';//GET
+export const DEMAND_NOTE_CREATE = apiPath+'/demandNote/create';//POST
+
 
 
 

src/utils/ComboData.js

@@ -75,6 +75,15 @@ export const paymentStatus = [
     { key: 0, labelCht: '全部', label: 'All',  type: 'all' }, 
     { key: 1, labelCht: '成功', label:'Success',  type: 'APPR' },
     { key: 2, labelCht: '拒絕', label:'Reject', type: 'REJT' }, 
-    { key: 2, labelCht: '取消', label:'Cancelled', type: 'CANC' }, 
-    { key: 2, labelCht: '進行中', label:'In Progress', type: 'INPR' }, 
+    { key: 3, labelCht: '取消', label:'Cancelled', type: 'CANC' }, 
+    { key: 4, labelCht: '進行中', label:'In Progress', type: 'INPR' }, 
+];
+
+
+export const denmandNoteStatus = [
+    { key: 0, labelCht: '全部', label: 'All',  type: 'all' }, 
+    { key: 1, labelCht: '待辦', label:'Pending',  type: 'pending' },
+    { key: 2, labelCht: '待支付', label:'To be Paid', type: 'to be paid' }, 
+    { key: 3, labelCht: '已付費', label:'Paid', type: 'paid' }, 
+
 ];