PPOB/ppob-frontend
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: dashboard

Browse Source
This commit is contained in:
ilham 2022-01-02 16:51:18 +07:00
parent 6eb2b104c8
commit 9b7a645622
2 changed files with 365 additions and 240 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

530
src/pages/Home/Home.js
View File

@ -20,7 +20,13 @@ export const Home = observer(() => {
await getData(); await getData();
await store.membership.getDataBySuperior(); await store.membership.getDataBySuperior();
await store.partner.getData(); await store.partner.getData();
if(isAdmin){
await store.transaction.getDataTransaction(); await store.transaction.getDataTransaction();
await store.transaction.getDataTransactionB2B();
} else {
await store.transaction.getDataTransactionPartner();
}
await store.role.getData(isAdmin); await store.role.getData(isAdmin);
modalLoader.setLoading(false); modalLoader.setLoading(false);
} catch (e) { } catch (e) {
@ -93,7 +99,7 @@ export const Home = observer(() => {
]; ];
return ( return (
<div> <div>
{store.ui.mediaQuery.isDesktop && ( {store.ui.mediaQuery.isDesktop && store.authentication.userData.role === "Admin" && (
<Row <Row
style={{ style={{
marginTop: 30, marginTop: 30,
@ -108,15 +114,33 @@ export const Home = observer(() => {
height: 200, height: 200,
marginBottom: 10, marginBottom: 10,
borderColor: "salmon", borderColor: "salmon",
width: "30%", width: "45%",
}} }}
> >
<Row> <Row>
<BarChartOutlined style={{ fontSize: 25 ,marginRight:80}} /> {/*<BarChartOutlined style={{ fontSize: 25 ,marginRight:80}} />*/}
<PageHeader title={<span>Total Transaksi</span>}> <PageHeader title={<span>{store.transaction.dataTransaction.total_transaction} Transaksi B2C</span>}>
<p> <p>
<h4>{store.transaction.dataTransaction} Transaksi</h4> <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>
<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> </p>
</PageHeader> </PageHeader>
</Row> </Row>
@ -129,21 +153,61 @@ export const Home = observer(() => {
height: 200, height: 200,
marginBottom: 10, marginBottom: 10,
borderColor: "salmon", borderColor: "salmon",
width: "30%", width: "45%",
}} }}
> >
<Row> <Row>
<DropboxOutlined style={{ fontSize: 25 }} /> <PageHeader title={<span>{store.transaction.dataTransaction.total_transaction} Transaksi B2B</span>}>
<PageHeader title={<span>Total Keuntungan B2B</span>}> <p>
<span> <h4>Total Penjualan : { new Intl.NumberFormat("id-ID", {
{new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
currency: "IDR", currency: "IDR",
}).format(store.authentication.profileData?.wallet || 0)} }).format(store.transaction.dataTransactionB2B.total_amount)}</h4>
</span>
<h4>Total Modal : { new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(store.transaction.dataTransactionB2B.total_modal)}</h4>
<h4>Total Profit : { new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(store.transaction.dataTransactionB2B.total_profit)}</h4>
</p>
</PageHeader> </PageHeader>
</Row> </Row>
</Card> </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 <Card
className={"shadow"} className={"shadow"}
hoverable hoverable
@ -152,113 +216,13 @@ export const Home = observer(() => {
height: 200, height: 200,
marginBottom: 10, marginBottom: 10,
borderColor: "salmon", borderColor: "salmon",
width: "30%", width: "45%",
}} }}
> >
<Row> <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>}> <PageHeader title={<span>Total Transaksi</span>}>
<p> <p>
<h4>{store.transaction.dataTransaction} Transaksi</h4> <h4>{store.transaction.dataTransactionPartner.total_transaction}</h4>
</p> </p>
</PageHeader> </PageHeader>
</Row> </Row>
@ -270,116 +234,256 @@ export const Home = observer(() => {
marginLeft: 20, marginLeft: 20,
height: 200, height: 200,
marginBottom: 10, marginBottom: 10,
marginRight: 20,
borderColor: "salmon", borderColor: "salmon",
width: "45%",
}} }}
> >
<Row> <Row>
<DropboxOutlined style={{ fontSize: 25 }} /> <PageHeader title={<span>Total Penjualan</span>}>
<PageHeader title={<span>Total Keuntungan B2B</span>}> <p>
<span> <h4>{ new Intl.NumberFormat("id-ID", {
{new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
currency: "IDR", currency: "IDR",
}).format(store.authentication.profileData?.wallet || 0)} }).format(store.transaction.dataTransactionPartner.total_amount)}</h4>
</span> </p>
</PageHeader> </PageHeader>
</Row> </Row>
</Card> </Card>
<Card {/*<Card*/}
className={"shadow"} {/* className={"shadow"}*/}
hoverable {/* hoverable*/}
style={{ {/* style={{*/}
marginLeft: 20, {/* marginLeft: 20,*/}
height: 200, {/* height: 200,*/}
marginBottom: 10, {/* marginBottom: 10,*/}
marginRight: 20, {/* borderColor: "salmon",*/}
borderColor: "salmon", {/* width: "30%",*/}
}} {/* }}*/}
> {/*>*/}
<Row> {/* <Row>*/}
<DollarCircleOutlined style={{ fontSize: 25 }} /> {/* <PageHeader title={<span>Total Keuntungan B2C</span>}>*/}
<PageHeader title={<span>Total Keuntungan B2C</span>}> {/* <span>*/}
<span> {/* {new Intl.NumberFormat("id-ID", {*/}
{new Intl.NumberFormat("id-ID", { {/* style: "currency",*/}
style: "currency", {/* currency: "IDR",*/}
currency: "IDR", {/* }).format(store.authentication.profileData?.wallet || 0)}*/}
}).format(store.authentication.profileData?.wallet || 0)} {/* </span>*/}
</span> {/* </PageHeader>*/}
</PageHeader> {/* </Row>*/}
</Row> {/*</Card>*/}
</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> </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> </div>
); );
}); });

25
src/store/transaction.js
View File

@ -31,6 +31,8 @@ export class Transaction {
dataHistoryTopUp = []; dataHistoryTopUp = [];
total_dataHistoryTopUp = 0; total_dataHistoryTopUp = 0;
dataTransaction = []; dataTransaction = [];
dataTransactionB2B = [];
dataTransactionPartner = [];
dataDetailHistoryTransaction = []; dataDetailHistoryTransaction = [];
total_dataDetailHistoryTransaction=0; total_dataDetailHistoryTransaction=0;
@ -59,8 +61,27 @@ export class Transaction {
try { try {
const response = await http.get(`/transaction/total-order`); const response = await http.get(`/transaction/total-order`);
//console.log(response) //console.log(response)
this.dataTransaction = response.body.data ?? []; this.dataTransaction = response.body.data;
this.total_data = response?.body?.count ?? 0; } catch (e) {
console.error(e);
}
}
async getDataTransactionB2B() {
try {
const response = await http.get(`/transaction/total-order-b2b`);
//console.log(response)
this.dataTransactionB2B = response.body.data;
} catch (e) {
console.error(e);
}
}
async getDataTransactionPartner() {
try {
const response = await http.get(`/transaction/total-order-partner`);
//console.log(response)
this.dataTransactionPartner = response.body.data;
} catch (e) { } catch (e) {
console.error(e); console.error(e);
} }