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

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

@ -1,20 +1,32 @@
import React, {useContext, useEffect, useState} from "react";
import {Button, Card, Col, message, Row, Space, Table, Typography,} 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;
import React, { useContext, useEffect, useState } from "react";
import {
Button,
Card,
Col,
message,
Row,
Space,
Table,
Typography,
Tabs,
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(() => {
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
const {id} = useParams();
const { id } = useParams();
const [visibleModal, setVisibleModal] = useState(false);
const [isVisibleTopUpModal, setIsVisibleTopUpModal] = useState(false);
const [destination, setDestination] = useState(null);
@ -24,6 +36,8 @@ export const DetailUser = observer(() => {
useEffect(() => {
(async () => {
modalLoader.setLoading(true);
store.transaction.getDataHistoryTransaction();
store.transaction.getDetailHistoryTransaction();
await getData();
modalLoader.setLoading(false);
})();
@ -31,6 +45,7 @@ export const DetailUser = observer(() => {
return () => {
store.membership.dataDetail = {};
store.transaction.dataHistoryTopUp = [];
store.transaction.dataDetailHistoryTransaction = [];
};
}, []);
@ -38,8 +53,9 @@ export const DetailUser = observer(() => {
const isAdmin = store.authentication.userData.role === "Admin";
await Promise.allSettled([
store.transaction.getDataHistoryTopUp(id),
store.transaction.getDetailHistoryTransaction(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) {
message.success(
initialData.isChangePassword
? "Success Change Member Password"
: "Success Update Data Member");
initialData.isChangePassword
? "Success Change Member Password"
: "Success Update Data Member"
);
} else {
message.error(
initialData.isChangePassword
? "Failed Change Member Password"
: "Failed Update Data Member");
initialData.isChangePassword
? "Failed Change Member Password"
: "Failed Update Data Member"
);
}
await getData();
} catch (e) {
modalLoader.setLoading(false);
message.error(
initialData.isChangePassword
? "Failed Update Member Password"
: "Failed Update Data Member"
initialData.isChangePassword
? "Failed Update Member Password"
: "Failed Update Data Member"
);
}
modalLoader.setLoading(false);
@ -105,10 +123,10 @@ export const DetailUser = observer(() => {
dataIndex: "amount",
key: "amount",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
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 = [
{
route: LINKS.HOME,
@ -135,7 +204,7 @@ export const DetailUser = observer(() => {
},
{
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}>
<Text>
{store.membership.dataDetail.isActive === true
? "Aktif"
: "Inaktif"}
? "Aktif"
: "Inaktif"}
</Text>
</Col>
</Row>
</Col>
<Col lg={12} xs={24}>
{store.authentication.userData.role === "Admin" && <Title strong level={3}>Action User Detail</Title>}
{store.authentication.userData.role === "Admin" && <Space
{store.authentication.userData.role === "Admin" && (
<Title strong level={3}>
Action User Detail
</Title>
)}
{store.authentication.userData.role === "Admin" && (
<Space
size="middle"
align={"center"}
wrap={true}
style={{textAlign: 'center'}}
>
<Button
type={store.membership.dataDetail.isActive === true ? "danger" : "primary"}
onClick={() => changeStatus(store.membership.dataDetail.id, store.membership.dataDetail.isActive)}
style={{ textAlign: "center" }}
>
{store.membership.dataDetail.isActive === true ? "Inactive" : "Active"}
</Button>
<Button
<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
onClick={() => {
setInitialData({
id: store.membership.dataDetail.id,
name: store.membership.dataDetail.userDetail.name,
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,
isChangePassword: false,
});
setVisibleModal(true);
}}
>
Edit
</Button>
<Button
>
Edit
</Button>
<Button
onClick={() => {
setInitialData({
id: store.membership.dataDetail.id,
name: store.membership.dataDetail.userDetail.name,
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,
isChangePassword: true,
});
setVisibleModal(true);
}}
>
Ganti Password
</Button>
</Space>}
>
Ganti Password
</Button>
<Button
type={
store.membership.dataDetail.isActive === true
? "danger"
: "primary"
}
onClick={() =>
changeStatus(
store.membership.dataDetail.id,
store.membership.dataDetail.isActive
)
}
>
Withdraw Profit
</Button>
</Space>
)}
</Col>
</Row>
<Row>
<Col span={24}>
<div>
<Title strong level={3}>
History Top Up
</Title>
<Table
<Tabs defaultActiveKey="1">
<TabPane tab="History Top Up" key="1">
{/* {store.ui.mediaQuery.isDesktop && ( */}
<Table
key="1"
hasEmpty
columns={columns}
dataSource={store.transaction.dataHistoryTopUp}
bordered
/>
</div>
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);
}}
/>
{/* )} */}
{/* <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>
</Row>
<div />

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

@ -111,6 +111,8 @@ export const Membership = observer(() => {
modalLoader.setLoading(true);
await store.membership.getData();
modalLoader.setLoading(false);
setFilterMembership([]);
setFilterPartner([]);
store.membership.visibleModalFilterMembership = false;
};
@ -218,6 +220,8 @@ export const Membership = observer(() => {
<Button
onClick={async () => {
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));
console.log(record.id);
}}
@ -507,7 +511,8 @@ export const Membership = observer(() => {
title={"Filter"}
footer={footerLayoutFilter}
onCancel={() => {
form.resetFields();
setFilterMembership([]);
setFilterPartner([]);
store.membership.visibleModalFilterMembership = false;
}}
>

20
src/store/transaction.js
View File

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