alex
/
PNSPS-frontend-MaterialUI
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

add payment gld & app payment list tab

master
Anna Ho 1 year ago
parent
0236ab1704
commit
be95cafa9d
14 changed files with 813 additions and 228 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -1
      src/layout/MainLayout/Header/index.js
  2. +64
    -0
      src/pages/Payment/Details_GLD/DataGrid.js
  3. +151
    -0
      src/pages/Payment/Details_GLD/PaymentDetails.js
  4. +114
    -0
      src/pages/Payment/Details_GLD/index.js
  5. +106
    -0
      src/pages/Payment/Search_GLD/DataGrid.js
  6. +156
    -0
      src/pages/Payment/Search_GLD/SearchForm.js
  7. +97
    -0
      src/pages/Payment/Search_GLD/index.js
  8. +3
    -0
      src/pages/PublicNotice/Details_GLD/index.js
  9. +0
    -84
      src/pages/PublicNotice/Details_GLD/tabTableDetail/BaseGrid.js
  10. +79
    -0
      src/pages/PublicNotice/Details_GLD/tabTableDetail/PaymentTab.js
  11. +0
    -135
      src/pages/PublicNotice/Details_GLD/tabTableDetail/PendingPaymentTab.js
  12. +22
    -2
      src/pages/PublicNotice/Details_GLD/tabTableDetail/ProofTab.js
  13. +10
    -6
      src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js
  14. +10
    -0
      src/routes/GLDUserRoutes.js

+ 1
- 1
src/layout/MainLayout/Header/index.js View File

@@ -83,7 +83,7 @@ function Header(props) {
<Link className="proof" to='/proof/search'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Proof</Typography></Link>
</li>
<li>
<Link className="payment" to='/dashboard'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Payment</Typography></Link>
<Link className="payment" to='/paymentPage/search'><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Payment</Typography></Link>
</li>
<li>
<Link className="client" ><Typography variant={"headerTitle1"} sx={{ ml: 2 }}>Client</Typography><KeyboardArrowDownIcon /></Link>


+ 64
- 0
src/pages/Payment/Details_GLD/DataGrid.js View File

@@ -0,0 +1,64 @@
// material-ui
import {
Typography,
} from '@mui/material';

import * as React from 'react';
import * as FormatUtils from "utils/FormatUtils"
import { FiDataGrid } from "components/FiDataGrid";
// ==============================|| EVENT TABLE ||============================== //

export default function SearchPublicNoticeTable({ recordList }) {
const [rows, setRows] = React.useState(recordList);
const [total, setTotal] = React.useState(0);

React.useEffect(() => {
setRows(recordList);
let countTotal = 0;
recordList.forEach(item => {
countTotal+=item.fee;
});

setTotal(countTotal)
}, [recordList]);

const columns = [
{
id: 'appNo',
field: 'appNo',
headerName: 'App No.',
flex: 1,
renderCell: (params) => {
let appNo = params.row.appNo;
return <div style={{ margin: 4 }}>{appNo}<br/>{params.row.remarks}</div>
},
},
{
id: 'fee',
field: 'fee',
headerName: 'Amount (HK$)',
width: 150,
valueGetter: (params) => {
return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
}
},
];

return (
<div style={{ height: 400, width: '100%' }}>

<FiDataGrid
rowHeight={80}
rows={rows}
columns={columns}
initialState={{
pagination: {
paginationModel: { page: 0, pageSize: 5 },
},
}}
/>

<Typography align="right" variant= "h3">Total Amount: <span style={{ color: "blue", fontWeight: "bold", }}> HK$ {FormatUtils.currencyFormat(total)}</span></Typography>
</div>
);
}

+ 151
- 0
src/pages/Payment/Details_GLD/PaymentDetails.js View File

@@ -0,0 +1,151 @@
// material-ui
import {
Grid,
Typography,
FormLabel,
} from '@mui/material';

import * as React from "react";
import * as FormatUtils from "utils/FormatUtils";
import * as PaymentStatus from "utils/statusUtils/PaymentStatus";
import Loadable from 'components/Loadable';
const MainCard = Loadable(React.lazy(() => import('components/MainCard')));
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
// ==============================|| DASHBOARD - DEFAULT ||============================== //
const PaymentDetails = ({ formData, }) => {

const [data, setData] = React.useState({});
const [onReady, setOnReady] = React.useState(false);

React.useEffect(() => {
if (formData != null && formData != undefined && Object.keys(formData).length > 0) {
setData(formData);
}
}, [formData]);

React.useEffect(() => {
if (formData != null && formData != undefined && Object.keys(formData).length > 0) {
setOnReady(data != {});
}
}, [data]);


return (
!onReady ?
<LoadingComponent />
:
<MainCard elevation={0}
border={false}
content={false}
>
<Typography variant="h5" sx={{ textAlign: "left", mb: 2, borderBottom: "1px solid black" }}>
Payment Details
</Typography>
<form>
<Grid container>
<Grid item xs={12} md={12} >
<Grid container >
<Grid item xs={3} md={3} sx={{ display: 'flex', alignItems: 'center', color: "#000000" }}>
<FormLabel sx={{ color: "#000000" }}>
Status:
</FormLabel>
</Grid>
<Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
<FormLabel sx={{ display: 'flex', alignItems: 'center', color: "#000000" }}>
{PaymentStatus.getStatus_Eng(data.status)}
</FormLabel>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
<FormLabel sx={{ color: "#000000" }}>
Trans No.:
</FormLabel>
</Grid>
<Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
<FormLabel sx={{ color: "#000000" }}>
{data.payload?.transactionid}
</FormLabel>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
<FormLabel sx={{ color: "#000000" }}>
Trans Date:
</FormLabel>
</Grid>
<Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
<FormLabel sx={{ color: "#000000" }}>
{data.transDateStr + " (DD/MM/YYYY)"}
</FormLabel>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
<FormLabel sx={{ color: "#000000" }}>
Trans Time:
</FormLabel>
</Grid>
<Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
<FormLabel sx={{ color: "#000000" }}>
{data.transTimeStr + " (HH:MI:SS)"}
</FormLabel>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
<FormLabel sx={{ color: "#000000" }}>
EGIS Ref No.:
</FormLabel>
</Grid>
<Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
<FormLabel sx={{ color: "#000000" }}>
{data.egisRefNo}
</FormLabel>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
<FormLabel sx={{ color: "#000000" }}>
Payment Amount:
</FormLabel>
</Grid>
<Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
<FormLabel sx={{ color: "#000000" }}>
{"HK$ " + FormatUtils.currencyFormat(data.payload?.amount)}
</FormLabel>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} md={12}>
<Grid container >
<Grid item xs={3} md={3} sx={{ textAlign: "left" }}>
<FormLabel sx={{ color: "#000000" }}>
Payment Method:
</FormLabel>
</Grid>
<Grid item xs={9} md={9} sx={{ textAlign: "left" }}>
<FormLabel sx={{ color: "#000000" }}>
{data.payload?.paymentdetail?.subtype ?? (data.payload.paymentdetail.paymentmethod === "01" ? "PPS" : "")}
</FormLabel>
</Grid>
</Grid>
</Grid>

</Grid>
</form>
</MainCard>
);
};

export default PaymentDetails;

+ 114
- 0
src/pages/Payment/Details_GLD/index.js View File

@@ -0,0 +1,114 @@
// material-ui
import {
Grid,
Typography,
Stack,
Box
} from '@mui/material';
import * as UrlUtils from "utils/ApiPathConst";
import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";
import * as DateUtils from "utils/DateUtils";
import { useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom";

import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
const PaymentDetails = Loadable(React.lazy(() => import('./PaymentDetails')));
const DataGrid = 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 params = useParams();
const navigate = useNavigate()

const [record, setRecord] = React.useState();
const [itemList, setItemList] = React.useState([]);
const [onReady, setOnReady] = React.useState(false);

React.useEffect(() => {
loadForm();
}, []);

React.useEffect(() => {
setOnReady(true);
}, [record]);


const loadForm = () => {
if (params.id > 0) {

HttpUtils.get({
url: UrlUtils.PAYMENT_LOAD + "/" + params.id,
onSuccess: (responseData) => {
if (!responseData.data?.id) {
navigate("/paymentPage/search");
}
responseData.data["transDateStr"] = DateUtils.dateFormat(responseData.data.transDateTime, "DD/MM/YYYY");
responseData.data["transTimeStr"] = DateUtils.dateFormat(responseData.data.transDateTime, "HH:mm:ss");
setItemList(responseData.paymentItemList)
setRecord(responseData.data);
}
});
}
}

return (
!onReady ?
<LoadingComponent />
:
(
<Grid container sx={{ minHeight: '110vh', backgroundColor: '#fff' }} direction="column" justifyContent="flex-start" alignItems="center" >
<Grid item xs={12} width="100%">
<div style={BackgroundHead} width="100%">
<Stack direction="row" height='70px'>
<Typography ml={15} color='#FFF' variant="h4" sx={{ pt: 2 }}>Payment Details</Typography>
</Stack>
</div>
</Grid>
{/*row 1*/}
<Grid item xs={12} md={12} sx={{ textAlign: "center" }}>
<Grid container justifyContent="center" spacing={2} sx={{ p: 2 }} alignitems="stretch" >
<Grid item xs={12} md={5} sx={{ pt: 1, pb: 2 }} style={{ height: '100%' }}>
<Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
<DataGrid
recordList={itemList}
/>
</Box>
</Grid>
<Grid item xs={12} md={5} sx={{ pt: 2 }} style={{ height: '100%' }}>
<Box xs={12} md={12} sx={{ p: 4, border: '3px solid #eee', borderRadius: '10px' }} >
<PaymentDetails
formData={record}
style={{
display: "flex",
height: "100%",
flex: 1
}}
/>
</Box>
</Grid>
</Grid>
</Grid>
{/*row 2*/}
</Grid >


)


);
};

export default Index;

+ 106
- 0
src/pages/Payment/Search_GLD/DataGrid.js View File

@@ -0,0 +1,106 @@
// material-ui
import * as React from 'react';
import {
Button
} from '@mui/material';
import * as DateUtils from "utils/DateUtils";
import * as FormatUtils from "utils/FormatUtils"
import * as PaymentStatus from "utils/statusUtils/PaymentStatus"
import { useNavigate } from "react-router-dom";
import { FiDataGrid } from "components/FiDataGrid";
// ==============================|| EVENT TABLE ||============================== //

export default function SearchPublicNoticeTable({ recordList }) {
const [rows, setRows] = React.useState(recordList);
const navigate = useNavigate()

const _sx = {
padding: "4 2 4 2",
boxShadow: 1,
border: 1,
borderColor: '#DDD',
'& .MuiDataGrid-cell': {
borderTop: 1,
borderBottom: 1,
borderColor: "#EEE"
},
'& .MuiDataGrid-footerContainer': {
border: 1,
borderColor: "#EEE"
}
}

React.useEffect(() => {
setRows(recordList);
}, [recordList]);

const handleEditClick = (params) => () => {
navigate('/paymentPage/details/' + params.row.id);
};

const columns = [
{
field: 'actions',
headerName: 'Trans. No.',
flex: 1,
cellClassName: 'actions',
renderCell: (params) => {
return <Button onClick={handleEditClick(params)}><u>{params.row.transNo}</u></Button>;
},
},
{
id: 'appNos',
field: 'appNos',
headerName: 'App No.',
flex: 1,
renderCell: (params) => {
let appNo = params.row.appNos;
return <div style={{ margin: 4 }}>{appNo}</div>
},
},
{
id: 'transDateTime',
field: 'transDateTime',
headerName: 'Trans. Date',
flex: 1,
valueGetter: (params) => {
return DateUtils.datetimeStr(params?.value);
}
},
{
field: 'action',
headerName: 'Status',
width: 150,
renderCell: (params) => {
return PaymentStatus.getStatus_Cht(params);
}
},
{
id: 'payAmount',
field: 'payAmount',
headerName: 'Amount',
width: 150,
valueGetter: (params) => {
return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
}
},
];

return (
<div style={{ height: 400, width: '100%' }}>

<FiDataGrid
sx={_sx}
rowHeight={80}
rows={rows}
columns={columns}
initialState={{
pagination: {
paginationModel: { page: 0, pageSize: 5 },
},
}}
onRowDoubleClick={handleEditClick}
/>
</div>
);
}

+ 156
- 0
src/pages/Payment/Search_GLD/SearchForm.js View File

@@ -0,0 +1,156 @@
// material-ui
import {
Button,
CardContent,
Grid, TextField,
Typography
} from '@mui/material';
import MainCard from "components/MainCard";
import { useForm } from "react-hook-form";
import * as React from "react";
import * as DateUtils from "utils/DateUtils";
// ==============================|| DASHBOARD - DEFAULT ||============================== //


const SearchPublicNoticeForm = ({ applySearch, searchCriteria }) => {

const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);

const _sx = {
padding: "4 2 4 2",
boxShadow: 1,
border: 1,
borderColor: '#DDD',
'& .MuiDataGrid-cell': {
borderTop: 1,
borderBottom: 1,
borderColor: "#EEE"
},
'& .MuiDataGrid-footerContainer': {
border: 1,
borderColor: "#EEE"
}
}

const { reset, register, handleSubmit } = useForm()

const onSubmit = (data) => {
const temp = {
code: data.code,
dateFrom: data.dateFrom,
dateTo: data.dateTo,
};
applySearch(temp);
};

function resetForm() {
reset();
}


return (
<MainCard xs={12} md={12} lg={12}
border={false}
content={false}
sx={_sx}
>

<form onSubmit={handleSubmit(onSubmit)}>
{/*row 1*/}
<CardContent sx={{ px: 2.5, pt: 3 }}>
<Grid item justifyContent="space-between" alignItems="center" >
<Typography variant="h4">Search</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 }}>
<TextField
fullWidth
{...register("code")}
id='code'
label="App No.:"
defaultValue={searchCriteria.code}
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="Trans. 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="Trans. Date To"
defaultValue={searchCriteria.dateTo}
/>
</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">Reset</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>
</form>
</MainCard>
);
};

export default SearchPublicNoticeForm;

+ 97
- 0
src/pages/Payment/Search_GLD/index.js View File

@@ -0,0 +1,97 @@
// material-ui
import {
Grid,
Typography,
Stack
} from '@mui/material';
import MainCard from "components/MainCard";
import * as UrlUtils from "utils/ApiPathConst";
import * as React from "react";
import * as HttpUtils from "utils/HttpUtils";
import * as DateUtils from "utils/DateUtils";

import Loadable from 'components/Loadable';
const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
const SearchForm = Loadable(React.lazy(() => import('./SearchForm')));
const EventTable = Loadable(React.lazy(() => import('./DataGrid')));
import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'

const BackgroundHead = {
backgroundImage: `url(${titleBackgroundImg})`,
width: '100%',
height: '100%',
backgroundSize:'contain',
backgroundRepeat: 'no-repeat',
backgroundColor: '#0C489E',
backgroundPosition: 'right'
}

// ==============================|| DASHBOARD - DEFAULT ||============================== //

const Index = () => {

const [record,setRecord] = React.useState([]);
const [searchCriteria, setSearchCriteria] = React.useState({
dateTo: DateUtils.dateStr(new Date()),
dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
});
const [onReady, setOnReady] = React.useState(false);

React.useEffect(() => {
setOnReady(true);
}, [record]);

React.useEffect(() => {
loadGrid();
}, [searchCriteria]);

function loadGrid(){
HttpUtils.get({
url: UrlUtils.PAYMENT_LIST,
params: searchCriteria,
onSuccess: function(responseData){
setRecord(responseData);
}
});
}


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">Payment Record</Typography>
</Stack>
</div>
</Grid>
{/*row 1*/}
<Grid item xs={12} md={12} lg={12}>
<SearchForm
applySearch={applySearch}
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 Index;

+ 3
- 0
src/pages/PublicNotice/Details_GLD/index.js View File

@@ -47,6 +47,7 @@ const PublicNoticeDetail_GLD = () => {
const navigate = useNavigate()
const [applicationDetailData, setApplicationDetailData] = useState({});
const [proofList, setProofList] = useState([]);
const [paymentList, setPaymentList] = useState([]);
// const [refApplicationDetailData, setRefApplicationDetailData] = React.useState({});
const [isLoading, setLoading] = useState(false);
const LoadingComponent = Loadable(lazy(() => import('../../extra-pages/LoadingComponent')));
@@ -115,6 +116,7 @@ const PublicNoticeDetail_GLD = () => {
setIssueDate(DateUtils.dateFormat(gazetteIssueDetail.issueDate, "D MMM YYYY (ddd)"));
setGroupNo(response.data.data.groupNo);
setProofList(response.data.proofList);
setPaymentList(response.data.paymentList);
setLoading(false);
}
})
@@ -371,6 +373,7 @@ const PublicNoticeDetail_GLD = () => {
<TabTableDetail
applicationDetailData={applicationDetailData}
proofList={proofList}
paymentList={paymentList}
/>
</Box>
<br/>


+ 0
- 84
src/pages/PublicNotice/Details_GLD/tabTableDetail/BaseGrid.js View File

@@ -1,84 +0,0 @@
// material-ui
import * as React from 'react';
import {FiDataGrid} from "components/FiDataGrid";
import {
Button
} from '@mui/material';
import * as DateUtils from "utils/DateUtils"
// ==============================|| EVENT TABLE ||============================== //

export default function BaseGrid({rows}) {
const columns = [
{
id: 'appNo',
field: 'appNo',
headerName: 'Application No.',
flex: 1,
},
{
id: 'created',
field: 'created',
headerName: 'Created',
flex: 1,
valueGetter:(params)=>{
return DateUtils.datetimeStr(params?.value);
}
},
{
id: 'contactPerson',
field: 'contactPerson',
headerName: 'Contact Person',
flex: 2,
renderCell: (params) => {
let phone = JSON.parse(params.row.contactTelNo);
let faxNo = JSON.parse(params.row.contactFaxNo);

let contact = "";
if (phone) {
contact = "電話: " + phone?.countryCode + " " + phone?.phoneNumber
}

if (faxNo) {
if (contact != "")
contact = contact + ", "
contact = contact + "傳真:" + faxNo?.countryCode + " " + faxNo?.faxNumber
}

return (<>
{params?.value}<br />
{contact}
</>);
}
},
{
id: 'remarks',
field: 'remarks',
headerName: 'remarks',
flex: 3,
},
{
field: 'actions',
type: 'actions',
headerName: '',
width: 50,
cellClassName: 'actions',
renderCell: () => {
return <Button onClick={()=>{}}>查看詳細</Button>;
},
}
];

return (
<div style={{height:'20%', width: '100%'}}>
<FiDataGrid
rows={rows}
columns={columns}
initialState={{
pagination: {
paginationModel: {page: 0, pageSize: 5},
},
}}
/>
</div>
);
}

+ 79
- 0
src/pages/PublicNotice/Details_GLD/tabTableDetail/PaymentTab.js View File

@@ -0,0 +1,79 @@
// material-ui
import * as React from 'react';
import {
Button
} from '@mui/material';
import { useNavigate } from "react-router-dom";
import {FiDataGrid} from "components/FiDataGrid";
import * as FormatUtils from "utils/FormatUtils"
import * as DateUtils from "utils/DateUtils"
import * as PaymentStatus from "utils/statusUtils/PaymentStatus"
// import * as StatusUtils from "./PublicNoteStatusUtils";
// ==============================|| EVENT TABLE ||============================== //

export default function SubmittedTab({ rows }) {

const navigate = useNavigate()

const handleEditClick = (params) => () => {
navigate('/paymentPage/details/' + params.row.id);
};

const columns = [
{
field: 'actions',
headerName: 'Trans. No.',
flex: 1,
cellClassName: 'actions',
renderCell: (params) => {
return <Button onClick={handleEditClick(params)}><u>{params.row.transNo}</u></Button>;
},
},
{
id: 'transDateTime',
field: 'transDateTime',
headerName: 'Trans. Date',
flex: 1,
valueGetter: (params) => {
return DateUtils.datetimeStr(params.value);
}
},
{
id: 'status',
field: 'status',
headerName: 'Status',
flex: 1,
renderCell: (params) => {
return PaymentStatus.getStatus_Eng(params);
}
},
{
id: 'payAmount',
field: 'payAmount',
headerName: 'Amount',
width: 150,
valueGetter: (params) => {
return (params?.value) ? "$ " + FormatUtils.currencyFormat(params?.value) : "";
}
},
];

return (
<>
<div style={{ height: 400, width: '100%' }}>
<FiDataGrid
rows={rows}
columns={columns}
initialState={{
pagination: {
paginationModel: { page: 0, pageSize: 5 },
},
}}
/>
</div>
</>
);



}

+ 0
- 135
src/pages/PublicNotice/Details_GLD/tabTableDetail/PendingPaymentTab.js View File

@@ -1,135 +0,0 @@
// material-ui
import * as React from 'react';
import {FiDataGrid} from "components/FiDataGrid";
import {
Stack,
Typography,
Button,
Dialog, DialogTitle, DialogContent, DialogActions
} from '@mui/material';
import * as DateUtils from "utils/DateUtils"
// import * as StatusUtils from "./PublicNoteStatusUtils";
// ==============================|| EVENT TABLE ||============================== //

export default function SubmittedTab({ rows }) {
const [selectedRowItems, setSelectedRowItems] = React.useState([]);
const [isPopUp, setIsPopUp] = React.useState(false);


const columns = [
{
id: 'appNo',
field: 'appNo',
headerName: '申請編號',
flex: 1,
},
{
id: 'created',
field: 'created',
headerName: '提交日期',
flex: 1,
valueGetter: (params) => {
return DateUtils.datetimeStr(params.value);
}
},
{
id: 'contactPerson',
field: 'contactPerson',
headerName: '聯絡人',
flex: 2,
renderCell: (params) => {
let phone = JSON.parse(params.row.contactTelNo);
let faxNo = JSON.parse(params.row.contactFaxNo);

let contact = "";
if (phone) {
contact = "電話: " + phone?.countryCode + " " + phone?.phoneNumber
}

if (faxNo) {
if (contact != "")
contact = contact + ", "
contact = contact + "傳真:" + faxNo?.countryCode + " " + faxNo?.faxNumber
}

return (<>
{params?.value}<br />
{contact}
</>);
}
},
{
id: 'remarks',
field: 'remarks',
headerName: '我的備註',
flex: 3,

},
{
field: 'actions',
type: 'actions',
headerName: '',
width: 50,
cellClassName: 'actions',
renderCell: () => {
return <Button onClick={() => { }}>查看詳細</Button>;
},
}
];

const getWindowContent = () => {
var content = [];
const datas = rows?.filter((row) =>
selectedRowItems.includes(row.id)
);
for (var i = 0; i < datas?.length; i++) {
content.push(<>
<Stack direction="row" justifyContent="space-between"><Typography variant="h5">申請編號: {datas[i].appNo}</Typography>({DateUtils.datetimeStr(datas[i].created)})</Stack>
備註: {datas[i].remarks}
<br /><br />
</>);
}
return content;
}

return (
<>
<div style={{ height: 400, width: '100%' }}>
<FiDataGrid
checkboxSelection
disableRowSelectionOnClick
rows={rows}
columns={columns}
initialState={{
pagination: {
paginationModel: { page: 0, pageSize: 5 },
},
}}
onRowSelectionModelChange={(newSelection) => {
setSelectedRowItems(newSelection);
}}
/>
<Button variant="contained" onClick={() => { setIsPopUp(true) }}>付款</Button>
</div>

<div>
<Dialog open={isPopUp} onClose={() => setIsPopUp(false)} >
<DialogTitle></DialogTitle>
<Typography variant="h2" style={{ padding: '16px' }}>確認付款</Typography>
<DialogContent style={{ display: 'flex', }}>
<Stack direction="column" justifyContent="space-between">
{getWindowContent()}
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={() => setIsPopUp(false)}>Close</Button>
<Button onClick={() => setIsPopUp(false)}>確認</Button>
</DialogActions>
</Dialog>
</div>
</>
);



}

+ 22
- 2
src/pages/PublicNotice/Details_GLD/tabTableDetail/ProofTab.js View File

@@ -1,21 +1,41 @@
// material-ui
import * as React from 'react';
import {
Button,
} from '@mui/material';
import { useNavigate } from "react-router-dom";
import * as DateUtils from "utils/DateUtils";
import * as ProofStatus from "utils/statusUtils/ProofStatus";
import {FiDataGrid} from "components/FiDataGrid";
import * as FormatUtils from "utils/FormatUtils"
// ==============================|| EVENT TABLE ||============================== //

export default function ProofTab({rows}) {

const navigate = useNavigate()

const handleEditClick = (params) => () => {
navigate('/proof/reply/' + params.row.id);
};

const columns = [
{
id: 'refNo',
field: 'refNo',
field: 'actions',
headerName: 'Proof No.',
width: 200,
cellClassName: 'actions',
renderCell: (params) => {
return <Button onClick={handleEditClick(params)}><u>{params.row.refNo}</u></Button>;
},
},
{
id: 'actions',
headerName: 'Status',
flex: 1,
renderCell: (params) => {
return ProofStatus.getStatus_Eng(params);
},
},
{
id: 'created',


+ 10
- 6
src/pages/PublicNotice/Details_GLD/tabTableDetail/TabTable.js View File

@@ -13,17 +13,17 @@ import * as React from "react";

import Loadable from 'components/Loadable';
import { lazy } from 'react';
const BaseGrid = Loadable(lazy(() => import('./BaseGrid')));
const StatusHistoryTab = Loadable(lazy(() => import('./StatusHistoryTab')));
const LoadingComponent = Loadable(lazy(() => import('../../../extra-pages/LoadingComponent')));
const ProofTab = Loadable(lazy(() => import('./ProofTab')));
const PaymentTab = Loadable(lazy(() => import('./PaymentTab')));


// ==============================|| DASHBOARD - DEFAULT ||============================== //

const PublicNotice = ({ applicationDetailData, proofList }) => {
const PublicNotice = ({ applicationDetailData, proofList, paymentList }) => {
const [_proofList, setProofList] = React.useState([]);
const [inProgressList,] = React.useState([]);
const [_paymentList, setPaymentList] = React.useState([]);
const [onReady, setOnReady] = React.useState(false);
const [selectedTab, setSelectedTab] = React.useState("1");
// const navigate = useNavigate();
@@ -43,6 +43,10 @@ const PublicNotice = ({ applicationDetailData, proofList }) => {
setProofList(proofList);
}, [proofList]);

React.useEffect(() => {
setPaymentList(paymentList);
}, [paymentList]);

React.useEffect(() => {
//if state data are ready and assign to different field
if (statusHistoryList.length > 0) {
@@ -73,7 +77,7 @@ const PublicNotice = ({ applicationDetailData, proofList }) => {
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<TabList onChange={handleChange} aria-label="lab API tabs example">
<Tab label={"Proof(" + (_proofList?.length ? _proofList?.length : 0) + ")"} value="1" />
<Tab label={"Payment(" + inProgressList.length + ")"} value="2" />
<Tab label={"Payment(" + _paymentList.length + ")"} value="2" />
<Tab label={"Status History(" + statusHistoryList.length + ")"} value="3" />
</TabList>
</Box>
@@ -84,8 +88,8 @@ const PublicNotice = ({ applicationDetailData, proofList }) => {
/>
</TabPanel>
<TabPanel value="2">
<BaseGrid
rows={inProgressList}
<PaymentTab
rows={_paymentList}
reloadFunction={reloadPage}
/>
</TabPanel>


+ 10
- 0
src/routes/GLDUserRoutes.js View File

@@ -12,6 +12,8 @@ const ApplicationSearch = Loadable(lazy(() => import('pages/PublicNotice/Search_
const ProofSearch = Loadable(lazy(() => import('pages/Proof/Search_GLD')));
const ProofCreate_FromApp = Loadable(lazy(() => import('pages/Proof/Create_FromApp')));
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')));
// ==============================|| MAIN ROUTING ||============================== //

const GLDUserRoutes = {
@@ -48,6 +50,14 @@ const GLDUserRoutes = {
{
path: '/proof/reply/:id',
element: <ProofReply_GLD/>
},
{
path: '/paymentPage/search',
element: <PaymentSearch_GLD/>
},
{
path: '/paymentPage/details/:id',
element: <PaymentDetails_GLD/>
}
]
},


Write Preview
Loading…
Cancel
Save