GHHub/src/views/invoice/PaidDetail.jsx

import { NavLink, useNavigate ,useParams} from "react-router-dom";
import { useEffect, useState } from "react";
import { observer } from "mobx-react";
import { toJS } from "mobx";
import { Row, Col, Space, Button, Table,  Typography } from "antd";
import { useStore } from "@/stores/StoreContext.js";
import * as config from "@/config";
import { formatDate, isNotEmpty } from "@/utils/commons";
import useAuthStore from '@/stores/Auth';

const { Title } = Typography;

function PaidDetail(){
    const navigate = useNavigate();
    const { invoiceStore } = useStore();
    const { invoicePaidDetail } = invoiceStore;
    const [travelAgencyId] = useAuthStore((state) => [state.loginUser.travelAgencyId]);
    const { flid } = useParams();

    useEffect(() => {
        invoiceStore.fetchInvoicePaidDetail(travelAgencyId,flid);

    },[flid]);

    const invoicePaidColumns = [
		{
			title: "Ref.NO",
			dataIndex: "fl2_GroupName",
			key: "fl2_GroupName",
		},
		{
			title: "Arrival date",
			key: "fl2_ArriveDate",
			dataIndex: "fl2_ArriveDate",
			render: (text, record) => (isNotEmpty(text) ? formatDate(new Date(text)) : ""),
		},
		{
			title: "Payment amount",
			key: "fl2_price",
			dataIndex: "fl2_price",
		},
		{
			title: "Currency",
			key: "fl2_memo",
            dataIndex: "fl2_memo",
		},
	];

    return (
		<Space direction="vertical" style={{ width: "100%" }}>
            <Row gutter={16}>
					<Col span={20}>
					</Col>
					<Col span={4}>
						<Button type="link" onClick={() => navigate("/invoice/paid")}>
							Back
						</Button>
					</Col>
			</Row>
			<Title level={3}></Title>
			<Row>
				<Col md={24} lg={24} xxl={24}>
					<Table bordered columns={invoicePaidColumns} dataSource={toJS(invoicePaidDetail)} />
				</Col>
			</Row>
		</Space>
	);
}

export default observer(PaidDetail);