dn email & public search

src/layout/MainLayout/Header/index.js

@@ -169,10 +169,22 @@ function Header(props) {
           <Link className="documentRecord" to='/proof/search'><Typography variant={"headerTitle1"} sx={{ ml: 1.5 }}>校對記錄</Typography></Link>
         </li>
         <li>
-          <Link className="paymentRecord" to='/paymentPage/search'><Typography variant={"headerTitle1"} sx={{ ml: 1.5 }}>付款記錄</Typography></Link>
+          <Link className="paymentRecord"><Typography variant={"headerTitle1"} sx={{ ml: 1.5 }}>付款記錄</Typography></Link>
+          {isPrimaryLoggedIn() ?
+            <ul className='dropdown'>
+              <li>
+                <Link className="manageOrgUser" to='/paymentPage/search'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>網上付款記錄</Typography></Link>
+              </li>
+              <li>
+                <Link className="manageOrgUser" to='/paymentPage/demandNote'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>繳款通知記錄</Typography></Link>
+              </li>
+            </ul>
+            :
+            <></>
+          }
         </li>
         <li>
-          <Link className="userSetting" to='/dashboard'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>設定</Typography><KeyboardArrowDownIcon /></Link>
+          <Link className="userSetting" ><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>設定</Typography><KeyboardArrowDownIcon /></Link>
           {isPrimaryLoggedIn() ?
             <ul className='dropdown'>
 

src/pages/DemandNote/Search/DataGrid.js

@@ -4,15 +4,22 @@ import {
     Grid,
     Typography,
     Button,
-    Box
+    Box,
+    Dialog, DialogTitle, DialogContent, DialogActions,
 } from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
-import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
+import * as StatusUtils from "utils/statusUtils/DnStatus";
 import { useNavigate } from "react-router-dom";
 import { FiDataGrid } from "components/FiDataGrid";
+
+import * as UrlUtils from "utils/ApiPathConst";
+import * as HttpUtils from "utils/HttpUtils";
 // ==============================|| EVENT TABLE ||============================== //
 
-export default function SeaarchDemandNote({ recordList }) {
+export default function SearchDemandNote({ recordList, reloadFun }) {
+
+    const [isConfirmPopUp, setConfirmPopUp] = React.useState(false);
+    const [isSendPopUp, setSendPopUp] = React.useState(false);
 
     const [rows, setRows] = React.useState(recordList);
     const [selectedRowItems, setSelectedRowItems] = React.useState([]);
@@ -35,14 +42,24 @@ export default function SeaarchDemandNote({ recordList }) {
         });
     };
 
-    const onSendClick = ()=>{
-        let appIdList = [];
+    const onSendClick = () => {
+        setSendPopUp(false)
+        let idList = [];
         const datas = rows?.filter((row) =>
             selectedRowItems.includes(row.id)
         );
         for (var i = 0; i < datas?.length; i++) {
-            appIdList.push(datas[i].appId);
+            idList.push(datas[i].id);
         }
+        HttpUtils.post({
+            url: UrlUtils.DEMAND_NOTE_SEND,
+            params: {
+                dnIdList: idList
+            },
+            onSuccess: () => {
+                if (reloadFun) reloadFun();
+            }
+        });
 
     }
 
@@ -50,8 +67,24 @@ export default function SeaarchDemandNote({ recordList }) {
 
     }
 
-    const markPaid = ()=>{
-        
+    const markPaid = () => {
+        setConfirmPopUp(false);
+        let idList = [];
+        const datas = rows?.filter((row) =>
+            selectedRowItems.includes(row.id)
+        );
+        for (var i = 0; i < datas?.length; i++) {
+            idList.push(datas[i].id);
+        }
+        HttpUtils.post({
+            url: UrlUtils.DEMAND_NOTE_MARK_PAID,
+            params: {
+                dnIdList: idList
+            },
+            onSuccess: () => {
+                if (reloadFun) reloadFun();
+            }
+        });
     }
 
     function handleRowDoubleClick(params) {
@@ -114,7 +147,7 @@ export default function SeaarchDemandNote({ recordList }) {
             headerName: 'Status',
             width: 175,
             renderCell: (params) => {
-                return [StatusUtils.getStatusEng(params)]
+                return [StatusUtils.getStatus_Eng(params)]
             },
         },
         {
@@ -122,7 +155,7 @@ export default function SeaarchDemandNote({ recordList }) {
             headerName: 'DN Sent Date',
             flex: 1,
             valueGetter: (params) => {
-                return params?.value?DateUtils.datetimeStr(params?.value)+" - "+params.row.sentBy:"";
+                return params?.value ? DateUtils.datetimeStr(params?.value) + " - " + params.row.sentBy : "";
             }
         },
         {
@@ -142,7 +175,7 @@ export default function SeaarchDemandNote({ recordList }) {
                     <Button
                         size="large"
                         variant="contained"
-                        onClick={onSendClick}
+                        onClick={()=>setSendPopUp(true)}
                         sx={{
                             textTransform: 'capitalize',
                             alignItems: 'end'
@@ -168,7 +201,7 @@ export default function SeaarchDemandNote({ recordList }) {
                     <Button
                         size="large"
                         variant="contained"
-                        onClick={markPaid}
+                        onClick={()=>setConfirmPopUp(true)}
                         sx={{
                             textTransform: 'capitalize',
                             alignItems: 'end'
@@ -195,6 +228,30 @@ export default function SeaarchDemandNote({ recordList }) {
                     onRowDoubleClick={handleRowDoubleClick}
                 />
             </Box>
+            <div>
+                <Dialog open={isConfirmPopUp} onClose={() => setConfirmPopUp(false)}  >
+                    <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
+                    <DialogContent style={{ display: 'flex', }}>
+                        <Typography variant="h4" style={{ padding: '16px' }}>Are you sure to mark DN paid?</Typography>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={() => setConfirmPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
+                        <Button onClick={() => markPaid()}><Typography variant="h5">Confirm</Typography></Button>
+                    </DialogActions>
+                </Dialog>
+            </div>
+            <div>
+                <Dialog open={isSendPopUp} onClose={() => setSendPopUp(false)}  >
+                    <DialogTitle><Typography variant="h3">Confirm</Typography></DialogTitle>
+                    <DialogContent style={{ display: 'flex', }}>
+                        <Typography variant="h4" style={{ padding: '16px' }}>Are you sure to send DN?</Typography>
+                    </DialogContent>
+                    <DialogActions>
+                        <Button onClick={() => setSendPopUp(false)}><Typography variant="h5">Cancel</Typography></Button>
+                        <Button onClick={() => onSendClick()}><Typography variant="h5">Confirm</Typography></Button>
+                    </DialogActions>
+                </Dialog>
+            </div>
         </div>
     );
 }

src/pages/DemandNote/Search/index.js

@@ -5,8 +5,9 @@ import {
     Stack
 } from '@mui/material';
 import MainCard from "components/MainCard";
-import * as UrlUtils from "utils/ApiPathConst";
+
 import * as React from "react";
+import * as UrlUtils from "utils/ApiPathConst";
 import * as HttpUtils from "utils/HttpUtils";
 import * as DateUtils from "utils/DateUtils";
 
@@ -118,6 +119,7 @@ const UserSearchPage_Individual = () => {
                     >
                         <EventTable
                             recordList={record}
+                            reloadFun={getUserList}
                         />
                     </MainCard>
                 </Grid>

src/pages/DemandNote/Search_Public/DataGrid.js

@@ -0,0 +1,91 @@
+// material-ui
+import * as React from 'react';
+import {
+    Button,
+    Box,
+} from '@mui/material';
+import * as DateUtils from "utils/DateUtils";
+import * as StatusUtils from "utils/statusUtils/DnStatus";
+import { FiDataGrid } from "components/FiDataGrid";
+
+import * as HttpUtils from "utils/HttpUtils";
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function SearchDemandNote({ recordList }) {
+    const [rows, setRows] = React.useState(recordList);
+
+    React.useEffect(() => {
+        setRows(recordList);
+    }, [recordList]);
+
+    const onDownloadClick = (params) => () => {
+        HttpUtils.fileDownload({
+            fileId: params.row.fileId,
+            skey: params.row.skey,
+            filename: params.row.filename,
+        });
+    };
+
+    const columns = [
+        {
+            field: 'dnNo',
+            headerName: '繳款單號',
+            width: 200,
+        },
+        {
+            field: 'appNo',
+            headerName: '申請編號',
+            width: 150,
+        },
+        {
+            id: 'issueDate',
+            field: 'issueDate',
+            headerName: '簽發日期',
+            width: 175,
+            valueGetter: (params) => {
+                return DateUtils.dateStr(params?.value);
+            }
+        },
+        {
+            field: 'status',
+            headerName: '狀態',
+            width: 175,
+            renderCell: (params) => {
+                return [StatusUtils.getStatus_Eng(params)]
+            },
+        },
+        {
+            field: 'sentDate',
+            headerName: '發送日期',
+            flex: 1,
+            valueGetter: (params) => {
+                return params?.value ? DateUtils.datetimeStr(params?.value) + " - " + params.row.sentBy : "";
+            }
+        },
+        {
+            field: 'filename',
+            headerName: '檔案',
+            flex: 1,
+            renderCell: (params) => {
+                return <Button onClick={onDownloadClick(params)}><u>{params.row.filename}</u></Button>;
+            },
+        },
+    ];
+
+    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: 100 },
+                        },
+                    }}
+                    getRowHeight={() => 'auto'}
+                />
+            </Box>
+        </div>
+    );
+}

src/pages/DemandNote/Search_Public/SearchForm.js

@@ -0,0 +1,241 @@
+// 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, searchCriteria, issueComboData
+}) => {
+
+    const [type, setType] = React.useState([]);
+    const [issueSelected, setIssueSelected] = React.useState({});
+    const [issueCombo, setIssueCombo] = React.useState([]);
+    const [selectedStatus, setSelectedStatus] = 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 = {
+            appNo: data.appNo,
+            issueId: issueSelected?.id,
+            dnNo: data.dnNo,
+            sentDateFrom: data.dateFrom,
+            sentDateTo: data.dateTo,
+            status: (selectedStatus?.type && selectedStatus?.type != 'all') ? selectedStatus?.type : "",
+        };
+        applySearch(temp);
+    };
+
+    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">搜尋</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="憲報期數"
+                                        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={"申請編號"}
+                                defaultValue={searchCriteria.appNo}
+                                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="繳款單號"
+                                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={"發送日期(從)"}
+                                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={"發送日期(到)"}
+                                defaultValue={searchCriteria.dateTo}
+                            />
+                        </Grid>
+
+
+                        <Grid item xs={9} s={6} md={5} lg={3} sx={{ ml: 3, mr: 3, mb: 3 }}>
+                            <Autocomplete
+                                {...register("status")}
+                                id="status"
+                                options={ComboData.denmandNoteStatus}
+                                getOptionLabel={(option) => option.labelCht}
+                                inputValue={selectedStatus?.labelCht ? selectedStatus?.labelCht : ""}
+                                value={selectedStatus}
+                                onChange={(event, newValue) => {
+                                    if (newValue !== null) {
+                                        setSelectedStatus(newValue);
+                                    }
+                                }}
+                                renderInput={(params) => (
+                                    <TextField
+                                        {...params}
+                                        label="狀態"
+                                    />
+                                )}
+                                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">重置</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">提交</Typography>
+                            </Button>
+                        </Grid>
+                    </Grid>
+                </Grid>
+            </form>
+        </MainCard>
+    );
+};
+
+export default SearchDemandNoteForm;

src/pages/DemandNote/Search_Public/index.js

@@ -0,0 +1,129 @@
+// material-ui
+import {
+    Grid,
+    Typography,
+    Stack
+} from '@mui/material';
+import MainCard from "components/MainCard";
+
+import * as React from "react";
+import * as UrlUtils from "utils/ApiPathConst";
+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.DEMAND_NOTE_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">繳款通知記錄</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}
+                            reloadFun={getUserList}
+                        />
+                    </MainCard>
+                </Grid>
+            </Grid>
+    );
+}
+export default UserSearchPage_Individual;

src/routes/PublicUserRoutes.js

@@ -22,6 +22,7 @@ const Payment_Card = Loadable(lazy(() => import('pages/Payment/Card')));
 const Payment_Callback = Loadable(lazy(() => import('pages/Payment/PaymentCallback')));
 const PaymentSearch_Public = Loadable(lazy(() => import('pages/Payment/Search_Public')));
 const PaymentDetails_Public = Loadable(lazy(() => import('pages/Payment/Details_Public')));
+const DemandNote_Public = Loadable(lazy(() => import('pages/DemandNote/Search_Public')));
 
 // ==============================|| MAIN ROUTING ||============================== //
 
@@ -100,6 +101,10 @@ const PublicDashboard = {
           path: 'paymentPage/details/:id',
           element: <PaymentDetails_Public/>
         },
+        {
+          path: 'paymentPage/demandNote',
+          element: <DemandNote_Public/>
+        },
       ]
     },
   ]

src/utils/ApiPathConst.js

@@ -98,6 +98,8 @@ export const DEMAND_NOTE_PREVIEW = apiPath+'/demandNote/preview';//GET
 export const DEMAND_NOTE_CREATE = apiPath+'/demandNote/create';//POST
 export const DEMAND_NOTE_LIST = apiPath+'/demandNote/list';//GET
 export const DEMAND_NOTE_LOAD = apiPath+'/demandNote/load';//GET
+export const DEMAND_NOTE_SEND = apiPath+'/demandNote/send-dn';//POST
+export const DEMAND_NOTE_MARK_PAID = apiPath+'/demandNote/mark-as-paid';//POST
 
 
 

src/utils/statusUtils/DnStatus.js

@@ -1,8 +1,8 @@
 import {getStatusTag} from "utils/statusUtils/Base";
 
 const pending = {color:"#f5a83d", eng:"Pending", cht:"待辦"}
-const toBePaid = {color:"#f5a83d", eng:"to be paid", cht:"待支付"}
-const paid = {color:"#8a8784", eng:"paid", cht:"已付費"}
+const toBePaid = {color:"#f5a83d", eng:"To be paid", cht:"待支付"}
+const paid = {color:"#22a13f", eng:"Paid", cht:"已付費"}
 
 export function getStatus_Cht(params) {
     let status = getStatus(params);