496 lines
16 KiB
JavaScript
496 lines
16 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";
|
|
import Title from "antd/lib/skeleton/Title";
|
|
|
|
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();
|
|
if (isAdmin) {
|
|
await store.transaction.getDataTransaction();
|
|
await store.transaction.getDataTransactionB2B();
|
|
} else {
|
|
await store.transaction.getDataTransactionPartner();
|
|
}
|
|
|
|
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();
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
{store.ui.mediaQuery.isDesktop &&
|
|
(store.authentication.userData.role === "Admin" ||
|
|
store.authentication.userData.role === "Customer Service") && (
|
|
<Row
|
|
style={{
|
|
marginTop: 30,
|
|
marginLeft: 30,
|
|
}}
|
|
>
|
|
<Card
|
|
className={"shadow"}
|
|
hoverable
|
|
title={
|
|
<span
|
|
style={{
|
|
fontSize: 20,
|
|
fontStyle: "bold",
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
{store.transaction.dataTransaction.total_transaction}{" "}
|
|
Transaksi B2C
|
|
</span>
|
|
}
|
|
style={{
|
|
marginLeft: 20,
|
|
height: 200,
|
|
marginBottom: 10,
|
|
borderColor: "salmon",
|
|
width: "47%",
|
|
}}
|
|
>
|
|
<Row>
|
|
<Row style={{ marginTop: 20 }}>
|
|
<Col style={{ marginRight: 40 }}>
|
|
<p>
|
|
<h4>
|
|
Total Penjualan :{" "}
|
|
{new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
}).format(
|
|
store.transaction.dataTransaction.total_amount
|
|
)}
|
|
</h4>
|
|
|
|
<h4>
|
|
Total Modal :{" "}
|
|
{new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
}).format(
|
|
store.transaction.dataTransaction.total_modal
|
|
)}
|
|
</h4>
|
|
</p>
|
|
</Col>
|
|
<Col>
|
|
<p>
|
|
<h4>
|
|
Total Profit :{" "}
|
|
{new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
}).format(
|
|
store.transaction.dataTransaction.total_profit
|
|
)}
|
|
</h4>
|
|
|
|
<h4>
|
|
Total Komisi :{" "}
|
|
{new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
}).format(
|
|
store.transaction.dataTransaction.total_commission
|
|
)}
|
|
</h4>
|
|
</p>
|
|
</Col>
|
|
</Row>
|
|
</Row>
|
|
</Card>
|
|
<Card
|
|
className={"shadow"}
|
|
hoverable
|
|
title={
|
|
<span
|
|
style={{
|
|
fontSize: 20,
|
|
fontStyle: "bold",
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
{store.transaction.dataTransactionB2B.total_transaction}{" "}
|
|
Transaksi B2B
|
|
</span>
|
|
}
|
|
style={{
|
|
marginLeft: 20,
|
|
height: 200,
|
|
marginBottom: 10,
|
|
borderColor: "salmon",
|
|
width: "47%",
|
|
}}
|
|
>
|
|
<Row>
|
|
<Row style={{ marginTop: 20 }}>
|
|
<Col style={{ marginRight: 40 }}>
|
|
<p>
|
|
<h4>
|
|
Total Penjualan :{" "}
|
|
{new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
}).format(
|
|
store.transaction.dataTransactionB2B.total_amount
|
|
)}
|
|
</h4>
|
|
|
|
<h4>
|
|
Total Modal :{" "}
|
|
{new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
}).format(
|
|
store.transaction.dataTransactionB2B.total_modal
|
|
)}
|
|
</h4>
|
|
</p>
|
|
</Col>
|
|
<Col>
|
|
<p>
|
|
<h4>
|
|
Total Profit :{" "}
|
|
{new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
}).format(
|
|
store.transaction.dataTransactionB2B.total_profit
|
|
)}
|
|
</h4>
|
|
</p>
|
|
</Col>
|
|
</Row>
|
|
</Row>
|
|
</Card>
|
|
{/*<Card*/}
|
|
{/* className={"shadow"}*/}
|
|
{/* hoverable*/}
|
|
{/* style={{*/}
|
|
{/* marginLeft: 20,*/}
|
|
{/* height: 200,*/}
|
|
{/* marginBottom: 10,*/}
|
|
{/* borderColor: "salmon",*/}
|
|
{/* width: "30%",*/}
|
|
{/* }}*/}
|
|
{/*>*/}
|
|
{/* <Row>*/}
|
|
{/* <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.ui.mediaQuery.isDesktop &&
|
|
store.authentication.userData.role === "Admin Partner" && (
|
|
<Row
|
|
style={{
|
|
marginTop: 30,
|
|
marginLeft: 30,
|
|
}}
|
|
>
|
|
<Card
|
|
className={"shadow"}
|
|
hoverable
|
|
style={{
|
|
marginLeft: 20,
|
|
height: 200,
|
|
marginBottom: 10,
|
|
borderColor: "salmon",
|
|
width: "47%",
|
|
}}
|
|
>
|
|
<Row>
|
|
<PageHeader title={<span>Total Transaksi</span>}>
|
|
<p>
|
|
<h4>
|
|
{
|
|
store.transaction.dataTransactionPartner
|
|
.total_transaction
|
|
}
|
|
</h4>
|
|
</p>
|
|
</PageHeader>
|
|
</Row>
|
|
</Card>
|
|
<Card
|
|
className={"shadow"}
|
|
hoverable
|
|
style={{
|
|
marginLeft: 20,
|
|
height: 200,
|
|
marginBottom: 10,
|
|
borderColor: "salmon",
|
|
width: "47%",
|
|
}}
|
|
>
|
|
<Row>
|
|
<PageHeader title={<span>Total Penjualan</span>}>
|
|
<p>
|
|
<h4>
|
|
{new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
}).format(
|
|
store.transaction.dataTransactionPartner.total_amount
|
|
)}
|
|
</h4>
|
|
</p>
|
|
</PageHeader>
|
|
</Row>
|
|
</Card>
|
|
</Row>
|
|
)}
|
|
{store.ui.mediaQuery.isMobile &&
|
|
(store.authentication.userData.role === "Admin" ||
|
|
store.authentication.userData.role === "Customer Service") && (
|
|
<Row
|
|
style={{
|
|
marginTop: 20,
|
|
marginLeft: 10,
|
|
}}
|
|
>
|
|
<Card
|
|
className={"shadow"}
|
|
hoverable
|
|
title={
|
|
<span
|
|
style={{
|
|
fontSize: 20,
|
|
fontStyle: "bold",
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
{store.transaction.dataTransaction.total_transaction}{" "}
|
|
Transaksi B2C
|
|
</span>
|
|
}
|
|
style={{
|
|
marginLeft: 10,
|
|
height: 220,
|
|
marginBottom: 10,
|
|
borderColor: "salmon",
|
|
width: "90%",
|
|
}}
|
|
>
|
|
<Row>
|
|
<Row>
|
|
<Col style={{ marginRight: 40 }}>
|
|
<p>
|
|
<h4>
|
|
Total Penjualan :{" "}
|
|
{new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
}).format(
|
|
store.transaction.dataTransaction.total_amount
|
|
)}
|
|
</h4>
|
|
|
|
<h4>
|
|
Total Modal :{" "}
|
|
{new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
}).format(
|
|
store.transaction.dataTransaction.total_modal
|
|
)}
|
|
</h4>
|
|
</p>
|
|
</Col>
|
|
<Col>
|
|
<p>
|
|
<h4>
|
|
Total Profit :{" "}
|
|
{new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
}).format(
|
|
store.transaction.dataTransaction.total_profit
|
|
)}
|
|
</h4>
|
|
|
|
<h4>
|
|
Total Komisi :{" "}
|
|
{new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
}).format(
|
|
store.transaction.dataTransaction.total_commission
|
|
)}
|
|
</h4>
|
|
</p>
|
|
</Col>
|
|
</Row>
|
|
</Row>
|
|
</Card>
|
|
<Card
|
|
className={"shadow"}
|
|
hoverable
|
|
title={
|
|
<span
|
|
style={{
|
|
fontSize: 20,
|
|
fontStyle: "bold",
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
{store.transaction.dataTransactionB2B.total_transaction}{" "}
|
|
Transaksi B2B
|
|
</span>
|
|
}
|
|
style={{
|
|
marginLeft: 10,
|
|
height: 200,
|
|
borderColor: "salmon",
|
|
width: "90%",
|
|
}}
|
|
>
|
|
<Row>
|
|
<Row>
|
|
<Col style={{ marginRight: 40 }}>
|
|
<p>
|
|
<h4>
|
|
Total Penjualan :{" "}
|
|
{new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
}).format(
|
|
store.transaction.dataTransactionB2B.total_amount
|
|
)}
|
|
</h4>
|
|
|
|
<h4>
|
|
Total Modal :{" "}
|
|
{new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
}).format(
|
|
store.transaction.dataTransactionB2B.total_modal
|
|
)}
|
|
</h4>
|
|
</p>
|
|
</Col>
|
|
<Col>
|
|
<p>
|
|
<h4>
|
|
Total Profit :{" "}
|
|
{new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
}).format(
|
|
store.transaction.dataTransactionB2B.total_profit
|
|
)}
|
|
</h4>
|
|
</p>
|
|
</Col>
|
|
</Row>
|
|
</Row>
|
|
</Card>
|
|
</Row>
|
|
)}
|
|
{store.ui.mediaQuery.isMobile &&
|
|
store.authentication.userData.role === "Admin Partner" && (
|
|
<Row
|
|
style={{
|
|
marginTop: 20,
|
|
marginLeft: 10,
|
|
}}
|
|
>
|
|
<Card
|
|
className={"shadow"}
|
|
hoverable
|
|
style={{
|
|
marginLeft: 10,
|
|
height: 200,
|
|
marginBottom: 10,
|
|
borderColor: "salmon",
|
|
width: "90%",
|
|
}}
|
|
>
|
|
<Row>
|
|
<PageHeader title={<span>Total Transaksi</span>}>
|
|
<p>
|
|
<h4>
|
|
{
|
|
store.transaction.dataTransactionPartner
|
|
.total_transaction
|
|
}
|
|
</h4>
|
|
</p>
|
|
</PageHeader>
|
|
</Row>
|
|
</Card>
|
|
<Card
|
|
className={"shadow"}
|
|
hoverable
|
|
style={{
|
|
marginLeft: 10,
|
|
height: 200,
|
|
marginBottom: 10,
|
|
borderColor: "salmon",
|
|
width: "90%",
|
|
}}
|
|
>
|
|
<Row>
|
|
<PageHeader title={<span>Total Penjualan</span>}>
|
|
<p>
|
|
<h4>
|
|
{new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
}).format(
|
|
store.transaction.dataTransactionPartner.total_amount
|
|
)}
|
|
</h4>
|
|
</p>
|
|
</PageHeader>
|
|
</Row>
|
|
</Card>
|
|
</Row>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|