You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
3.5 KiB
JavaScript
123 lines
3.5 KiB
JavaScript
import { NavLink, useNavigate } from "react-router-dom";
|
|
import { useEffect, useState } from "react";
|
|
import { observer } from "mobx-react";
|
|
import { toJS } from "mobx";
|
|
import { Row, Col, Space, Button, Table, Input, DatePicker, Typography, App, Steps } from "antd";
|
|
import { useStore } from "@/stores/StoreContext.js";
|
|
import * as config from "@/config";
|
|
import { formatDate, isNotEmpty } from "@/utils/commons";
|
|
import { AuditOutlined, SmileOutlined, SolutionOutlined, EditOutlined } from "@ant-design/icons";
|
|
|
|
const { Title } = Typography;
|
|
|
|
function Index() {
|
|
const { authStore, invoiceStore } = useStore();
|
|
const { invoiceList, search_date_start, search_date_end } = invoiceStore;
|
|
const [groupNo, onGroupNoChange] = useState("");
|
|
const navigate = useNavigate();
|
|
const { notification } = App.useApp();
|
|
const showTotal = total => `Total ${invoiceList.length} items`;
|
|
|
|
const invoiceListColumns = [
|
|
{
|
|
title: "Ref.No",
|
|
dataIndex: "GroupName",
|
|
key: "GroupName",
|
|
render: (text, record) => <NavLink to={`/invoice/detail/${record.key}/${record.gmd_gri_sn}`}>{text}</NavLink>,
|
|
},
|
|
{
|
|
title: "Arrival Date",
|
|
key: "GetGDate",
|
|
dataIndex: "GetGDate",
|
|
render: (text, record) => (isNotEmpty(text) ? formatDate(new Date(text)) : ""),
|
|
},
|
|
{
|
|
title: "Total Amount",
|
|
key: "AllMoney",
|
|
dataIndex: "AllMoney",
|
|
render: (text, record) => (isNotEmpty(record.GMD_Currency) ? record.GMD_Currency + " " + text : text),
|
|
},
|
|
{
|
|
title: "Status",
|
|
key: "status",
|
|
render: BillStatus,
|
|
},
|
|
];
|
|
|
|
function BillStatus(text, record) {
|
|
let FKState = record.FKState - 1;
|
|
return (
|
|
<Steps
|
|
current={FKState}
|
|
initial={1}
|
|
items={[
|
|
{
|
|
title: "Submitted",
|
|
icon: <EditOutlined />,
|
|
},
|
|
{
|
|
title: "Travel Advisor",
|
|
icon: <SolutionOutlined />,
|
|
},
|
|
{
|
|
title: "Finance Dept",
|
|
icon: <AuditOutlined />,
|
|
},
|
|
{
|
|
title: "Paid",
|
|
icon: <SmileOutlined />,
|
|
},
|
|
]}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Space direction="vertical" style={{ width: "100%" }}>
|
|
<Title level={3}></Title>
|
|
<Row gutter={16}>
|
|
<Col md={24} lg={6} xxl={4}>
|
|
<Input
|
|
placeholder="Reference Number"
|
|
onChange={e => {
|
|
onGroupNoChange(e.target.value);
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col md={24} lg={8} xxl={6}>
|
|
<Space direction="horizontal">
|
|
Arrival Date
|
|
<DatePicker.RangePicker format={config.DATE_FORMAT} allowClear={false} style={{ width: "100%" }} value={[search_date_start, search_date_end]} presets={config.DATE_PRESETS} onChange={invoiceStore.onDateRangeChange} />
|
|
</Space>
|
|
</Col>
|
|
<Col md={24} lg={4} xxl={4}>
|
|
<Button
|
|
type="primary"
|
|
loading={invoiceStore.loading}
|
|
onClick={() => invoiceStore.fetchInvoiceList(authStore.login.travelAgencyId, groupNo, search_date_start.format(config.DATE_FORMAT), search_date_end.format(config.DATE_FORMAT))}>
|
|
Search
|
|
</Button>
|
|
</Col>
|
|
<Col md={24} lg={4} xxl={4}>
|
|
<Button icon={<AuditOutlined />} onClick={() => navigate(`/invoice/detail/0/338787`)}>
|
|
Misc. Invoice
|
|
</Button>
|
|
</Col>
|
|
<Col md={24} lg={4} xxl={4}>
|
|
<Button icon={<AuditOutlined />} onClick={() => navigate(`/invoice/paid`)}>
|
|
Bank statement
|
|
</Button>
|
|
</Col>
|
|
</Row>
|
|
<Title level={3}></Title>
|
|
<Row>
|
|
<Col md={24} lg={24} xxl={24}>
|
|
<Table bordered pagination={{ defaultPageSize: 20, showTotal: showTotal }} columns={invoiceListColumns} dataSource={toJS(invoiceList)} />
|
|
</Col>
|
|
</Row>
|
|
</Space>
|
|
);
|
|
}
|
|
|
|
export default observer(Index);
|