add proof search

src/layout/MainLayout/Header/index.js

@@ -80,7 +80,7 @@ function Header(props) {
           <Link className="application" to='/application/search'>Application</Link>
         </li>
         <li>
-          <Link className="proof" to='/dashboard'>Proof</Link>
+          <Link className="proof" to='/proof/search'>Proof</Link>
         </li>
         <li>
           <Link className="payment" to='/dashboard'>Payment</Link>

src/pages/ProofSearch/DataGrid.js

@@ -0,0 +1,136 @@
+// material-ui
+import * as React from 'react';
+import {
+    Button
+} from '@mui/material';
+import * as DateUtils from "utils/DateUtils";
+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: 'Proof No.',
+            width: 150,
+            cellClassName: 'actions',
+            renderCell: (params) => {
+                return <Button onClick={handleEditClick(params)}><u>{params.row.refNo}</u></Button>;
+            },
+        },
+        {
+            id: 'appId',
+            field: 'appId',
+            headerName: 'Application No./ Gazette Code/ Gazette Issue',
+            flex: 1,
+            renderCell: (params) => {
+                let appNo = "";
+                let code = "";
+                let isssue = params.row.issueYear
+                +" Vol. "+zeroPad(params.row.issueVolume,3)
+                +", No. "+zeroPad(params.row.issueNo,2)
+                +", "+DateUtils.dateFormat(params.row.issueDate, "D MMM YYYY (ddd)");
+
+                return [appNo+" ("+code+")"+isssue]
+            },
+        },
+        {
+            id: 'created',
+            field: 'created',
+            headerName: 'Proof Date',
+            flex: 1,
+            valueGetter: (params) => {
+                return DateUtils.datetimeStr(params?.value);
+            }
+        },
+        {
+            id: 'created',
+            field: 'created',
+            headerName: 'Confirmed/Return Date',
+            flex: 1,
+            valueGetter: (params) => {
+                return DateUtils.datetimeStr(params?.value);
+            }
+        },
+        {
+            id: 'contactPerson',
+            field: 'contactPerson',
+            headerName: 'Contact Person',
+            flex: 1,
+            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: 'fee',
+            field: 'fee',
+            headerName: 'Fee',
+            flex: 1,
+            valueGetter: (params) => {
+                return (params?.value)?(params?.value):"";
+            }
+        },
+    ];
+
+    function zeroPad(num, places) {
+        num=num?num:0;
+        var zero = places - num.toString().length + 1;
+        return Array(+(zero > 0 && zero)).join("0") + num;
+    }
+
+    return (
+        <div style={{ height: 400, width: '100%' }}>
+
+            <FiDataGrid
+                rows={rows}
+                columns={columns}
+                initialState={{
+                    pagination: {
+                        paginationModel: { page: 0, pageSize: 5 },
+                    },
+                }}
+            />
+        </div>
+    );
+}

src/pages/ProofSearch/SearchForm.js

@@ -0,0 +1,322 @@
+// material-ui
+import {
+    Button,
+    CardContent,
+    Grid, TextField,
+    Autocomplete
+} 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";
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+
+const SearchPublicNoticeForm = ({ 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 [groupSelected, setGroupSelected] = React.useState({});
+
+    const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
+    const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
+
+
+    const { reset, register, handleSubmit } = useForm()
+    const onSubmit = (data) => {
+
+        let typeArray = [];
+
+        for (let i = 0; i < type.length; i++) {
+            typeArray.push(type[i].label);
+        }
+
+        const temp = {
+            refNo: data.refNo,
+            code: data.code,
+            issueId: issueSelected?.id,
+            gazettGroup: groupSelected?.type,
+            dateFrom: data.dateFrom,
+            dateTo: data.dateTo,
+            contact: data.contact,
+            status: (status?.type && status?.type != 'all') ? status?.type : "",
+            orgId: (orgSelected?.key && orgSelected?.key > 0) ? orgSelected?.key : "",
+            
+        };
+        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({});
+        setGroupSelected({});
+        reset();
+    }
+
+    function getIssueLabel(data){
+        if(data=={}) return "";
+        return  data.year
+        +" Vol. "+zeroPad(data.volume,3)
+        +", No. "+zeroPad(data.issueNo,2)
+        +", "+DateUtils.dateFormat(data.issueDate, "D MMM YYYY (ddd)");
+    }
+
+    function zeroPad(num, places) {
+        num=num?num:0;
+        var zero = places - num.toString().length + 1;
+        return Array(+(zero > 0 && zero)).join("0") + num;
+    }
+
+    return (
+        <MainCard xs={12} md={12} lg={12}
+            border={false}
+            content={false}>
+
+            <form onSubmit={handleSubmit(onSubmit)}>
+                {/*row 1*/}
+                <CardContent sx={{ px: 2.5, pt: 3 }}>
+                    <Grid item justifyContent="space-between" alignItems="center">
+                        Search Form
+                    </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 }}>
+                        <TextField
+                            fullWidth
+                            {...register("refNo")}
+                            id='refNo'
+                            label="Proof No."
+                            defaultValue={searchCriteria.refNo}
+                            InputLabelProps={{
+                                shrink: true
+                            }}
+                        />
+                    </Grid>
+
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <TextField
+                            fullWidth
+                            {...register("code")}
+                            id='code'
+                            label="Application / Gazette Code"
+                            defaultValue={searchCriteria.code}
+                            InputLabelProps={{
+                                shrink: true
+                            }}
+                        />
+                    </Grid>
+
+                    <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 }}>
+                        <Autocomplete
+                            {...register("gazettGroup")}
+                            disablePortal
+                            id="gazettGroup"
+                            options={ComboData.groupTitle}
+                            value={groupSelected}
+                            inputValue={(groupSelected?.label)?groupSelected?.label:""}
+                            getOptionLabel={(option)=>option.label}
+                            onChange={(event, newValue) => {
+                                if (newValue !== null) {
+                                    setGroupSelected(newValue);
+                                }
+                            }}
+                            renderInput={(params) => (
+                                <TextField {...params}
+                                    label="Gazette Group"
+                                    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="Proof 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="Proof Date(To)"
+                            defaultValue={searchCriteria.dateTo}
+                        />
+                    </Grid>
+
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <TextField
+                            fullWidth
+                            {...register("contact")}
+                            id="contact"
+                            label="Contact Person"
+                            defaultValue={searchCriteria.contact}
+                            InputLabelProps={{
+                                shrink: true
+                            }}
+                        />
+
+                    </Grid>
+
+                    <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                        <Autocomplete
+                            {...register("status")}
+                            disablePortal
+                            id="status"
+                            filterOptions={(options) => options}
+                            options={ComboData.publicNoticeStaticEng}
+                            value={status}
+                            inputValue={status?.label}
+                            onChange={(event, newValue) => {
+                                if (newValue !== null) {
+                                    setStatus(newValue);
+                                }
+                            }}
+                            renderInput={(params) => (
+                                <TextField {...params}
+                                    label="Status"
+                                />
+                            )}
+                            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="Organization"
+                                            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'
+                            }}>
+                            Clear
+                        </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'
+                            }}>
+                            Submit
+                        </Button>
+                    </Grid>
+                </Grid>
+            </form>
+        </MainCard>
+    );
+};
+
+export default SearchPublicNoticeForm;

src/pages/ProofSearch/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:'#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">Proof</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}
+                    >
+                        <EventTable
+                            recordList={record}
+                        />
+                    </MainCard>
+                </Grid>
+            </Grid>
+    );
+};
+
+export default UserSearchPage_Individual;

src/routes/GLDUserRoutes.js

@@ -9,6 +9,7 @@ const MainLayout = Loadable(lazy(() => import('layout/MainLayout')));
 const DashboardDefault = Loadable(lazy(() => import('pages/gldDashboard')));
 const ApplicationDetail = Loadable(lazy(() => import('pages/PublicNoticeDetail_GLD')));
 const ApplicationSearch = Loadable(lazy(() => import('pages/PublicNoticeSearch_GLD')));
+const ProofSearch = Loadable(lazy(() => import('pages/ProofSearch')));
 // ==============================|| MAIN ROUTING ||============================== //
 
 const GLDUserRoutes = {
@@ -33,6 +34,10 @@ const GLDUserRoutes = {
         {
           path: '/application/search',
           element: <ApplicationSearch/>
+        },
+        {
+          path: '/proof/search',
+          element: <ProofSearch/>
         }
       ]
     },