386 lines
12 KiB
JavaScript
386 lines
12 KiB
JavaScript
import React, { useContext, useEffect } from "react";
|
|
import { Button, PageHeader, Card, Row, Col, message, Table } from "antd";
|
|
import { useStore } from "../../utils/useStore";
|
|
import { observer } from "mobx-react-lite";
|
|
import {
|
|
DropboxOutlined,
|
|
DollarCircleOutlined,
|
|
BarChartOutlined,
|
|
} from "@ant-design/icons";
|
|
import { ModalLoaderContext } from "../../utils/modal";
|
|
|
|
export const Home = observer(() => {
|
|
const modalLoader = useContext(ModalLoaderContext);
|
|
const store = useStore();
|
|
useEffect(() => {
|
|
const init = async () => {
|
|
try {
|
|
modalLoader.setLoading(true);
|
|
const isAdmin = store.authentication.userData.role === "Admin";
|
|
await getData();
|
|
await store.membership.getDataBySuperior();
|
|
await store.partner.getData();
|
|
await store.transaction.getDataTransaction();
|
|
await store.role.getData(isAdmin);
|
|
modalLoader.setLoading(false);
|
|
} catch (e) {
|
|
console.error(e);
|
|
modalLoader.setLoading(false);
|
|
if (e.response?.body?.message) {
|
|
message.error(e.response.body.message);
|
|
return;
|
|
}
|
|
message.error(e.message);
|
|
}
|
|
};
|
|
|
|
init();
|
|
}, []);
|
|
const getData = async () => {
|
|
store.authentication.userData.role === "Admin"
|
|
? await store.membership.getData()
|
|
: await store.membership.getDataBySuperior();
|
|
};
|
|
const columns = [
|
|
{
|
|
title: "Name",
|
|
dataIndex: "name",
|
|
key: "name",
|
|
render: (text, record) => record?.name ?? record?.username,
|
|
},
|
|
{
|
|
title: "Role",
|
|
dataIndex: "roleName",
|
|
key: "role",
|
|
},
|
|
{
|
|
title: "Saldo",
|
|
dataIndex: ["coa", "amount"],
|
|
key: ["coa", "amount"],
|
|
width: "20%",
|
|
render: (text) =>
|
|
new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
}).format(text),
|
|
},
|
|
// {
|
|
// title: "Action",
|
|
// key: "action",
|
|
// render: (text, record) => (
|
|
// <Space size="middle">
|
|
// <Button
|
|
// onClick={() => {
|
|
// setDestination(record?.id);
|
|
// console.log(record?.id);
|
|
// setIsVisibleTopUpModal(true);
|
|
// }}
|
|
// >
|
|
// <DownloadOutlined /> Top Up Saldo
|
|
// </Button>
|
|
// <Button
|
|
// onClick={async () => {
|
|
// await store.transaction.getDataHistoryTopUp(record.id);
|
|
// history.push(LINKS.USER_DETAIL.replace(":id", record.id));
|
|
// console.log(record.id);
|
|
// }}
|
|
// >
|
|
// Detail
|
|
// </Button>
|
|
// </Space>
|
|
// ),
|
|
// },
|
|
];
|
|
return (
|
|
<div>
|
|
{store.ui.mediaQuery.isDesktop && (
|
|
<Row
|
|
style={{
|
|
marginTop: 30,
|
|
marginLeft: 30,
|
|
}}
|
|
>
|
|
<Card
|
|
className={"shadow"}
|
|
hoverable
|
|
style={{
|
|
marginLeft: 20,
|
|
height: 200,
|
|
marginBottom: 10,
|
|
borderColor: "salmon",
|
|
width: "30%",
|
|
}}
|
|
>
|
|
<Row>
|
|
<BarChartOutlined style={{ fontSize: 25 ,marginRight:80}} />
|
|
|
|
<PageHeader title={<span>Total Transaksi</span>}>
|
|
<p>
|
|
<h4>{store.transaction.dataTransaction} Transaksi</h4>
|
|
</p>
|
|
</PageHeader>
|
|
</Row>
|
|
</Card>
|
|
<Card
|
|
className={"shadow"}
|
|
hoverable
|
|
style={{
|
|
marginLeft: 20,
|
|
height: 200,
|
|
marginBottom: 10,
|
|
borderColor: "salmon",
|
|
width: "30%",
|
|
}}
|
|
>
|
|
<Row>
|
|
<DropboxOutlined style={{ fontSize: 25 }} />
|
|
<PageHeader title={<span>Total Keuntungan B2B</span>}>
|
|
<span>
|
|
{new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
}).format(store.authentication.profileData?.wallet || 0)}
|
|
</span>
|
|
</PageHeader>
|
|
</Row>
|
|
</Card>
|
|
<Card
|
|
className={"shadow"}
|
|
hoverable
|
|
style={{
|
|
marginLeft: 20,
|
|
height: 200,
|
|
marginBottom: 10,
|
|
borderColor: "salmon",
|
|
width: "30%",
|
|
}}
|
|
>
|
|
<Row>
|
|
<DollarCircleOutlined style={{ fontSize: 25 }} />
|
|
<PageHeader title={<span>Total Keuntungan B2C</span>}>
|
|
<span>
|
|
{new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
}).format(store.authentication.profileData?.wallet || 0)}
|
|
</span>
|
|
</PageHeader>
|
|
</Row>
|
|
</Card>
|
|
</Row>
|
|
)}
|
|
{store.authentication.userData.role === "Admin" &&
|
|
store.ui.mediaQuery.isDesktop && (
|
|
<Row style={{ marginLeft: 50, marginTop: 10 }}>
|
|
<Card
|
|
className={"shadow"}
|
|
title="List Transaksi B2B"
|
|
style={{
|
|
marginBottom: 30,
|
|
marginRight: 20,
|
|
borderColor: "salmon",
|
|
width: "47%",
|
|
}}
|
|
>
|
|
<Table
|
|
key="1"
|
|
hasEmpty
|
|
size="large"
|
|
columns={columns}
|
|
dataSource={store.membership.data}
|
|
bordered
|
|
pagination={{
|
|
pageSize: store.membership.pageSize,
|
|
total: store.membership.totalData,
|
|
current: store.membership.page + 1,
|
|
showSizeChanger: true,
|
|
simple: false,
|
|
}}
|
|
onChange={async (page) => {
|
|
let pageNumber = page.current;
|
|
store.membership.pageSize = page.pageSize;
|
|
store.membership.page = pageNumber - 1;
|
|
modalLoader.setLoading(true);
|
|
await getData();
|
|
modalLoader.setLoading(false);
|
|
}}
|
|
/>
|
|
</Card>
|
|
<Card
|
|
className={"shadow"}
|
|
title="List Transaksi B2C"
|
|
style={{
|
|
marginBottom: 30,
|
|
borderColor: "salmon",
|
|
width: "47%",
|
|
}}
|
|
>
|
|
<Table
|
|
key="1"
|
|
hasEmpty
|
|
size="large"
|
|
columns={columns}
|
|
dataSource={store.membership.data}
|
|
bordered
|
|
pagination={{
|
|
pageSize: store.membership.pageSize,
|
|
total: store.membership.totalData,
|
|
current: store.membership.page + 1,
|
|
showSizeChanger: true,
|
|
simple: false,
|
|
}}
|
|
onChange={async (page) => {
|
|
let pageNumber = page.current;
|
|
store.membership.pageSize = page.pageSize;
|
|
store.membership.page = pageNumber - 1;
|
|
modalLoader.setLoading(true);
|
|
await getData();
|
|
modalLoader.setLoading(false);
|
|
}}
|
|
/>
|
|
</Card>
|
|
</Row>
|
|
)}
|
|
{store.ui.mediaQuery.isMobile && (
|
|
<div style={{ marginTop: 10 }}>
|
|
<Card
|
|
className={"shadow"}
|
|
hoverable
|
|
style={{
|
|
marginLeft: 20,
|
|
height: 200,
|
|
marginBottom: 10,
|
|
marginRight: 20,
|
|
borderColor: "salmon",
|
|
}}
|
|
>
|
|
<Row>
|
|
<BarChartOutlined style={{ fontSize: 25,marginRight:80 }} />
|
|
<PageHeader title={<span>Total Transaksi</span>}>
|
|
<p>
|
|
<h4>{store.transaction.dataTransaction} Transaksi</h4>
|
|
</p>
|
|
</PageHeader>
|
|
</Row>
|
|
</Card>
|
|
<Card
|
|
className={"shadow"}
|
|
hoverable
|
|
style={{
|
|
marginLeft: 20,
|
|
height: 200,
|
|
marginBottom: 10,
|
|
marginRight: 20,
|
|
borderColor: "salmon",
|
|
}}
|
|
>
|
|
<Row>
|
|
<DropboxOutlined style={{ fontSize: 25 }} />
|
|
<PageHeader title={<span>Total Keuntungan B2B</span>}>
|
|
<span>
|
|
{new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
}).format(store.authentication.profileData?.wallet || 0)}
|
|
</span>
|
|
</PageHeader>
|
|
</Row>
|
|
</Card>
|
|
<Card
|
|
className={"shadow"}
|
|
hoverable
|
|
style={{
|
|
marginLeft: 20,
|
|
height: 200,
|
|
marginBottom: 10,
|
|
marginRight: 20,
|
|
borderColor: "salmon",
|
|
}}
|
|
>
|
|
<Row>
|
|
<DollarCircleOutlined style={{ fontSize: 25 }} />
|
|
<PageHeader title={<span>Total Keuntungan B2C</span>}>
|
|
<span>
|
|
{new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
}).format(store.authentication.profileData?.wallet || 0)}
|
|
</span>
|
|
</PageHeader>
|
|
</Row>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
{store.authentication.userData.role === "Admin" &&
|
|
store.ui.mediaQuery.isMobile && (
|
|
<Row style={{ marginLeft: 20, marginRight: 20, marginTop: 10 }}>
|
|
<Card
|
|
className={"shadow"}
|
|
title="List Transaksi B2B"
|
|
style={{
|
|
marginBottom: 10,
|
|
borderColor: "salmon",
|
|
}}
|
|
>
|
|
<Table
|
|
key="1"
|
|
hasEmpty
|
|
size="small"
|
|
columns={columns}
|
|
dataSource={store.membership.data}
|
|
bordered
|
|
pagination={{
|
|
pageSize: store.membership.pageSize,
|
|
total: store.membership.totalData,
|
|
current: store.membership.page + 1,
|
|
showSizeChanger: true,
|
|
simple: false,
|
|
}}
|
|
onChange={async (page) => {
|
|
let pageNumber = page.current;
|
|
store.membership.pageSize = page.pageSize;
|
|
store.membership.page = pageNumber - 1;
|
|
modalLoader.setLoading(true);
|
|
await getData();
|
|
modalLoader.setLoading(false);
|
|
}}
|
|
/>
|
|
</Card>
|
|
<Card
|
|
className={"shadow"}
|
|
title="List Transaksi B2C"
|
|
style={{
|
|
marginBottom: 30,
|
|
borderColor: "salmon",
|
|
}}
|
|
>
|
|
<Table
|
|
key="1"
|
|
hasEmpty
|
|
size="small"
|
|
columns={columns}
|
|
dataSource={store.membership.data}
|
|
bordered
|
|
pagination={{
|
|
pageSize: store.membership.pageSize,
|
|
total: store.membership.totalData,
|
|
current: store.membership.page + 1,
|
|
showSizeChanger: true,
|
|
simple: false,
|
|
}}
|
|
onChange={async (page) => {
|
|
let pageNumber = page.current;
|
|
store.membership.pageSize = page.pageSize;
|
|
store.membership.page = pageNumber - 1;
|
|
modalLoader.setLoading(true);
|
|
await getData();
|
|
modalLoader.setLoading(false);
|
|
}}
|
|
/>
|
|
</Card>
|
|
</Row>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|