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

Merge remote-tracking branch 'origin/develop' into develop

Browse Source
This commit is contained in:
ilham 2021-12-31 12:00:28 +07:00
commit 99a6bcacde
4 changed files with 355 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -112,7 +112,8 @@ export const Home = observer(() => {
}} }}
> >
<Row> <Row>
<BarChartOutlined style={{ fontSize: 30 }} /> <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.dataTransaction} Transaksi</h4>
@ -132,8 +133,8 @@ export const Home = observer(() => {
}} }}
> >
<Row> <Row>
<DropboxOutlined style={{ fontSize: 30 }} /> <DropboxOutlined style={{ fontSize: 25 }} />
<PageHeader title={<span>Total Keuntungan</span>}> <PageHeader title={<span>Total Keuntungan B2B</span>}>
<span> <span>
{new Intl.NumberFormat("id-ID", { {new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
@ -155,8 +156,8 @@ export const Home = observer(() => {
}} }}
> >
<Row> <Row>
<DollarCircleOutlined style={{ fontSize: 30 }} /> <DollarCircleOutlined style={{ fontSize: 25 }} />
<PageHeader title={<span>Saldo</span>}> <PageHeader title={<span>Total Keuntungan B2C</span>}>
<span> <span>
{new Intl.NumberFormat("id-ID", { {new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
@ -173,7 +174,7 @@ export const Home = observer(() => {
<Row style={{ marginLeft: 50, marginTop: 10 }}> <Row style={{ marginLeft: 50, marginTop: 10 }}>
<Card <Card
className={"shadow"} className={"shadow"}
title="Card title" title="List Transaksi B2B"
style={{ style={{
marginBottom: 30, marginBottom: 30,
marginRight: 20, marginRight: 20,
@ -207,7 +208,7 @@ export const Home = observer(() => {
</Card> </Card>
<Card <Card
className={"shadow"} className={"shadow"}
title="Card title" title="List Transaksi B2C"
style={{ style={{
marginBottom: 30, marginBottom: 30,
borderColor: "salmon", borderColor: "salmon",
@ -254,7 +255,7 @@ export const Home = observer(() => {
}} }}
> >
<Row> <Row>
<BarChartOutlined style={{ fontSize: 30 }} /> <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.dataTransaction} Transaksi</h4>
@ -274,8 +275,8 @@ export const Home = observer(() => {
}} }}
> >
<Row> <Row>
<DropboxOutlined style={{ fontSize: 30 }} /> <DropboxOutlined style={{ fontSize: 25 }} />
<PageHeader title={<span>Total Keuntungan</span>}> <PageHeader title={<span>Total Keuntungan B2B</span>}>
<span> <span>
{new Intl.NumberFormat("id-ID", { {new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
@ -297,8 +298,8 @@ export const Home = observer(() => {
}} }}
> >
<Row> <Row>
<DollarCircleOutlined style={{ fontSize: 30 }} /> <DollarCircleOutlined style={{ fontSize: 25 }} />
<PageHeader title={<span>Saldo</span>}> <PageHeader title={<span>Total Keuntungan B2C</span>}>
<span> <span>
{new Intl.NumberFormat("id-ID", { {new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
@ -315,7 +316,7 @@ export const Home = observer(() => {
<Row style={{ marginLeft: 20, marginRight: 20, marginTop: 10 }}> <Row style={{ marginLeft: 20, marginRight: 20, marginTop: 10 }}>
<Card <Card
className={"shadow"} className={"shadow"}
title="Card title" title="List Transaksi B2B"
style={{ style={{
marginBottom: 10, marginBottom: 10,
borderColor: "salmon", borderColor: "salmon",
@ -347,7 +348,7 @@ export const Home = observer(() => {
</Card> </Card>
<Card <Card
className={"shadow"} className={"shadow"}
title="Card title" title="List Transaksi B2C"
style={{ style={{
marginBottom: 30, marginBottom: 30,
borderColor: "salmon", borderColor: "salmon",

375
src/pages/Membership/DetailUser.js
View File

@ -1,20 +1,32 @@
import React, {useContext, useEffect, useState} from "react"; import React, { useContext, useEffect, useState } from "react";
import {Button, Card, Col, message, Row, Space, Table, Typography,} from "antd"; import {
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; Button,
import {LINKS} from "../../routes/app"; Card,
import {useStore} from "../../utils/useStore"; Col,
import {observer} from "mobx-react-lite"; message,
import {format, parseISO} from "date-fns"; Row,
import {ModalLoaderContext} from "../../utils/modal"; Space,
import {useParams} from "react-router-dom"; Table,
import {MembershipModal} from "./MembershipModal"; Typography,
Tabs,
const {Title, Text} = Typography; List,
Divider
} from "antd";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { format, parseISO } from "date-fns";
import { ModalLoaderContext } from "../../utils/modal";
import { useParams } from "react-router-dom";
import { MembershipModal } from "./MembershipModal";
const { Title, Text } = Typography;
const { TabPane } = Tabs;
export const DetailUser = observer(() => { export const DetailUser = observer(() => {
const store = useStore(); const store = useStore();
const modalLoader = useContext(ModalLoaderContext); const modalLoader = useContext(ModalLoaderContext);
const {id} = useParams(); const { id } = useParams();
const [visibleModal, setVisibleModal] = useState(false); const [visibleModal, setVisibleModal] = useState(false);
const [isVisibleTopUpModal, setIsVisibleTopUpModal] = useState(false); const [isVisibleTopUpModal, setIsVisibleTopUpModal] = useState(false);
const [destination, setDestination] = useState(null); const [destination, setDestination] = useState(null);
@ -24,6 +36,8 @@ export const DetailUser = observer(() => {
useEffect(() => { useEffect(() => {
(async () => { (async () => {
modalLoader.setLoading(true); modalLoader.setLoading(true);
store.transaction.getDataHistoryTransaction();
store.transaction.getDetailHistoryTransaction();
await getData(); await getData();
modalLoader.setLoading(false); modalLoader.setLoading(false);
})(); })();
@ -31,6 +45,7 @@ export const DetailUser = observer(() => {
return () => { return () => {
store.membership.dataDetail = {}; store.membership.dataDetail = {};
store.transaction.dataHistoryTopUp = []; store.transaction.dataHistoryTopUp = [];
store.transaction.dataDetailHistoryTransaction = [];
}; };
}, []); }, []);
@ -38,8 +53,9 @@ export const DetailUser = observer(() => {
const isAdmin = store.authentication.userData.role === "Admin"; const isAdmin = store.authentication.userData.role === "Admin";
await Promise.allSettled([ await Promise.allSettled([
store.transaction.getDataHistoryTopUp(id), store.transaction.getDataHistoryTopUp(id),
store.transaction.getDetailHistoryTransaction(id),
store.membership.getDetail(id), store.membership.getDetail(id),
store.role.getData(isAdmin) store.role.getData(isAdmin),
]); ]);
}; };
@ -77,22 +93,24 @@ export const DetailUser = observer(() => {
if (response?.body?.statusCode === 200) { if (response?.body?.statusCode === 200) {
message.success( message.success(
initialData.isChangePassword initialData.isChangePassword
? "Success Change Member Password" ? "Success Change Member Password"
: "Success Update Data Member"); : "Success Update Data Member"
);
} else { } else {
message.error( message.error(
initialData.isChangePassword initialData.isChangePassword
? "Failed Change Member Password" ? "Failed Change Member Password"
: "Failed Update Data Member"); : "Failed Update Data Member"
);
} }
await getData(); await getData();
} catch (e) { } catch (e) {
modalLoader.setLoading(false); modalLoader.setLoading(false);
message.error( message.error(
initialData.isChangePassword initialData.isChangePassword
? "Failed Update Member Password" ? "Failed Update Member Password"
: "Failed Update Data Member" : "Failed Update Data Member"
); );
} }
modalLoader.setLoading(false); modalLoader.setLoading(false);
@ -105,10 +123,10 @@ export const DetailUser = observer(() => {
dataIndex: "amount", dataIndex: "amount",
key: "amount", key: "amount",
render: (text) => render: (text) =>
new Intl.NumberFormat("id-ID", { new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
currency: "IDR", currency: "IDR",
}).format(text), }).format(text),
}, },
{ {
title: "Transaction Date", title: "Transaction Date",
@ -124,6 +142,57 @@ export const DetailUser = observer(() => {
}, },
]; ];
const column = [
{
title: "Price",
dataIndex: "price",
key: "price",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
title: "Pembeli",
dataIndex: "buyer",
key: "buyer",
},
{
title: "Tujuan",
dataIndex: "transaction_destination",
key: "transaction_destination",
},
{
title: "Kode Transaksi",
dataIndex: "transaction_code",
key: "transaction_code",
},
{
title: "Status",
dataIndex: "status",
key: "status",
},
{
title: "No Seri",
dataIndex: "seri_number",
key: "seri_number",
},
{
title: "IDTrx Mitra",
dataIndex: "partner_transaction_code",
key: "partner_transaction_code",
},
{
title: "Transaction Date",
dataIndex: "created_at",
key: "created_at",
render: (text, record) => {
return <Text>{format(parseISO(record.created_at), "dd-MM-yyyy")}</Text>;
},
},
];
const routeData = [ const routeData = [
{ {
route: LINKS.HOME, route: LINKS.HOME,
@ -135,7 +204,7 @@ export const DetailUser = observer(() => {
}, },
{ {
route: LINKS.USER_DETAIL.replace(":id", id), route: LINKS.USER_DETAIL.replace(":id", id),
name: <span style={{fontWeight: "bold"}}>Detail User</span>, name: <span style={{ fontWeight: "bold" }}>Detail User</span>,
}, },
]; ];
@ -179,71 +248,263 @@ export const DetailUser = observer(() => {
<Col span={12}> <Col span={12}>
<Text> <Text>
{store.membership.dataDetail.isActive === true {store.membership.dataDetail.isActive === true
? "Aktif" ? "Aktif"
: "Inaktif"} : "Inaktif"}
</Text> </Text>
</Col> </Col>
</Row> </Row>
</Col> </Col>
<Col lg={12} xs={24}> <Col lg={12} xs={24}>
{store.authentication.userData.role === "Admin" && <Title strong level={3}>Action User Detail</Title>} {store.authentication.userData.role === "Admin" && (
{store.authentication.userData.role === "Admin" && <Space <Title strong level={3}>
Action User Detail
</Title>
)}
{store.authentication.userData.role === "Admin" && (
<Space
size="middle" size="middle"
align={"center"} align={"center"}
wrap={true} wrap={true}
style={{textAlign: 'center'}} style={{ textAlign: "center" }}
>
<Button
type={store.membership.dataDetail.isActive === true ? "danger" : "primary"}
onClick={() => changeStatus(store.membership.dataDetail.id, store.membership.dataDetail.isActive)}
> >
{store.membership.dataDetail.isActive === true ? "Inactive" : "Active"} <Button
</Button> type={
<Button store.membership.dataDetail.isActive === true
? "danger"
: "primary"
}
onClick={() =>
changeStatus(
store.membership.dataDetail.id,
store.membership.dataDetail.isActive
)
}
>
{store.membership.dataDetail.isActive === true
? "Inactive"
: "Active"}
</Button>
<Button
onClick={() => { onClick={() => {
setInitialData({ setInitialData({
id: store.membership.dataDetail.id, id: store.membership.dataDetail.id,
name: store.membership.dataDetail.userDetail.name, name: store.membership.dataDetail.userDetail.name,
username: store.membership.dataDetail.username, username: store.membership.dataDetail.username,
phone_number: store.membership.dataDetail.userDetail.phone_number, phone_number:
store.membership.dataDetail.userDetail.phone_number,
roleId: store.membership.dataDetail.roles.id, roleId: store.membership.dataDetail.roles.id,
isChangePassword: false, isChangePassword: false,
}); });
setVisibleModal(true); setVisibleModal(true);
}} }}
> >
Edit Edit
</Button> </Button>
<Button <Button
onClick={() => { onClick={() => {
setInitialData({ setInitialData({
id: store.membership.dataDetail.id, id: store.membership.dataDetail.id,
name: store.membership.dataDetail.userDetail.name, name: store.membership.dataDetail.userDetail.name,
username: store.membership.dataDetail.username, username: store.membership.dataDetail.username,
phone_number: store.membership.dataDetail.userDetail.phone_number, phone_number:
store.membership.dataDetail.userDetail.phone_number,
roleId: store.membership.dataDetail.roles.id, roleId: store.membership.dataDetail.roles.id,
isChangePassword: true, isChangePassword: true,
}); });
setVisibleModal(true); setVisibleModal(true);
}} }}
> >
Ganti Password Ganti Password
</Button> </Button>
</Space>} <Button
type={
store.membership.dataDetail.isActive === true
? "danger"
: "primary"
}
onClick={() =>
changeStatus(
store.membership.dataDetail.id,
store.membership.dataDetail.isActive
)
}
>
Withdraw Profit
</Button>
</Space>
)}
</Col> </Col>
</Row> </Row>
<Row> <Row>
<Col span={24}> <Col span={24}>
<div> <Tabs defaultActiveKey="1">
<Title strong level={3}> <TabPane tab="History Top Up" key="1">
History Top Up {/* {store.ui.mediaQuery.isDesktop && ( */}
</Title> <Table
<Table key="1"
hasEmpty
columns={columns} columns={columns}
dataSource={store.transaction.dataHistoryTopUp} dataSource={store.transaction.dataHistoryTopUp}
bordered bordered
/> pagination={{
</div> pageSize: store.transaction.pageSize,
total: store.transaction.total_data,
current: store.transaction.page + 1,
showSizeChanger: true,
simple: false,
}}
onChange={async (page) => {
let pageNumber = page.current;
store.transaction.pageSize = page.pageSize;
store.transaction.page = pageNumber - 1;
modalLoader.setLoading(true);
await getData();
modalLoader.setLoading(false);
}}
/>
{/* )} */}
{/* <Table
columns={columns}
dataSource={store.transaction.dataHistoryTopUp}
bordered
/> */}
</TabPane>
<TabPane tab="History Transaction" key="2">
{store.ui.mediaQuery.isDesktop && (
<Table
key="1"
hasEmpty
columns={column}
dataSource={store.transaction.dataDetailHistoryTransaction}
bordered
pagination={{
pageSize: store.transaction.pageSize,
total: store.transaction.total_data,
current: store.transaction.page + 1,
showSizeChanger: true,
simple: false,
}}
onChange={async (page) => {
let pageNumber = page.current;
store.transaction.pageSize = page.pageSize;
store.transaction.page = pageNumber - 1;
modalLoader.setLoading(true);
await getData();
modalLoader.setLoading(false);
}}
/>
)}
{store.ui.mediaQuery.isMobile && (
<List
itemLayout="horizontal"
position={"top"}
pagination={{
onChange: async (page) => {
store.transaction.pageSize = page.pageSize;
store.transaction.page = page.current - 1;
modalLoader.setLoading(true);
await getData();
modalLoader.setLoading(false);
},
pageSize: store.transaction.pageSize,
total: store.transaction.totalData,
current: store.transaction.page + 1,
style: { marginBottom: "1rem", marginRight: "1rem" },
}}
dataSource={store.membership.data}
style={{ padding: 0 }}
renderItem={(item) => {
return (
<div>
<List.Item
key={item.id}
style={{
backgroundColor: "#ffffff",
paddingTop: 0,
paddingBottom: 0,
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
}}
>
<List.Item.Meta
className={["cariparkir-container"].join(" ")}
title={item.name}
description={
<div style={{}}>
<p>
<small>Saldo System : {item.name}</small>{" "}
<br />
<small>Role : {item.roleName}</small> <br />
<small>
Saldo Supplier : {item.coa?.amount}
</small>{" "}
<br />
{/* <Button
style={{ marginRight: 10 }}
onClick={() => {
setDestination(item?.id);
console.log(item?.id);
setIsVisibleTopUpModal(true);
}}
>
<DownloadOutlined /> Top Up Saldo
</Button>
<Button
onClick={async () => {
await store.transaction.getDataHistoryTopUp(
item.id
);
history.push(
LINKS.USER_DETAIL.replace(
":id",
item.id
)
);
console.log(item.id);
}}
>
Detail
</Button> */}
</p>
</div>
}
/>
<div style={{ marginRight: 16 }}>
<p
style={{
fontSize: 9,
margin: 0,
}}
>
{/* <Button
type={
item?.isActive === true ? "danger" : "primary"
}
onClick={() =>
changeStatus(item?.id, item?.isActive)
}
>
{item?.isActive === true ? "Inactive" : "Active"}
</Button> */}
</p>
</div>
</List.Item>
<Divider plain style={{ margin: 0 }} />
</div>
);
}}
/>
)}
{/* <Table
columns={column}
dataSource={store.transaction.dataDetailHistoryTransaction}
bordered
/> */}
</TabPane>
</Tabs>
</Col> </Col>
</Row> </Row>
<div /> <div />

7
src/pages/Membership/Membership.js
View File

@ -111,6 +111,8 @@ export const Membership = observer(() => {
modalLoader.setLoading(true); modalLoader.setLoading(true);
await store.membership.getData(); await store.membership.getData();
modalLoader.setLoading(false); modalLoader.setLoading(false);
setFilterMembership([]);
setFilterPartner([]);
store.membership.visibleModalFilterMembership = false; store.membership.visibleModalFilterMembership = false;
}; };
@ -218,6 +220,8 @@ export const Membership = observer(() => {
<Button <Button
onClick={async () => { onClick={async () => {
await store.transaction.getDataHistoryTopUp(record.id); await store.transaction.getDataHistoryTopUp(record.id);
await store.transaction.getDetailHistoryTransaction(record.id)
//await store.transaction.getDataHistoryTransaction()
history.push(LINKS.USER_DETAIL.replace(":id", record.id)); history.push(LINKS.USER_DETAIL.replace(":id", record.id));
console.log(record.id); console.log(record.id);
}} }}
@ -507,7 +511,8 @@ export const Membership = observer(() => {
title={"Filter"} title={"Filter"}
footer={footerLayoutFilter} footer={footerLayoutFilter}
onCancel={() => { onCancel={() => {
form.resetFields(); setFilterMembership([]);
setFilterPartner([]);
store.membership.visibleModalFilterMembership = false; store.membership.visibleModalFilterMembership = false;
}} }}
> >

20
src/store/transaction.js
View File

@ -30,7 +30,9 @@ export class Transaction {
pageSizeHistoryTopUp = 10; pageSizeHistoryTopUp = 10;
dataHistoryTopUp = []; dataHistoryTopUp = [];
total_dataHistoryTopUp = 0; total_dataHistoryTopUp = 0;
dataTransaction=[] dataTransaction = [];
dataDetailHistoryTransaction = [];
total_dataDetailHistoryTransaction=0;
//filter //filter
visibleModalFilterTransaction = false; visibleModalFilterTransaction = false;
@ -55,9 +57,7 @@ export class Transaction {
async getDataTransaction() { async getDataTransaction() {
try { try {
const response = await http.get( const response = await http.get(`/transaction/total-order`);
`/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; this.total_data = response?.body?.count ?? 0;
@ -106,11 +106,23 @@ export class Transaction {
} }
} }
async getDetailHistoryTransaction(id) {
try {
const response = await http.get(`/transaction/history-user/${id}`);
console.log(response,'Data Trans');
this.dataDetailHistoryTransaction = response.body.data ?? [];
this.total_dataDetailHistoryTransaction = response?.body?.count ?? 0;
} catch (e) {
console.error(e);
}
}
async getDataHistoryTopUp(id) { async getDataHistoryTopUp(id) {
try { try {
const response = await http.get( const response = await http.get(
`/transaction/history-deposit?page=${this.pageHistoryTopUp}&pageSize=${this.pageSizeHistoryTopUp}&user-destination=${id}` `/transaction/history-deposit?page=${this.pageHistoryTopUp}&pageSize=${this.pageSizeHistoryTopUp}&user-destination=${id}`
); );
console.log(response,'get data history')
this.dataHistoryTopUp = response.body.data ?? []; this.dataHistoryTopUp = response.body.data ?? [];
this.total_dataHistoryTopUp = response?.body?.count ?? 0; this.total_dataHistoryTopUp = response?.body?.count ?? 0;
} catch (e) { } catch (e) {