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

Merge branch 'develop' of https://gitlab.com/empatnusabangsa/ppob/ppob-frontend

Browse Source
This commit is contained in:
Fadli
2022-06-22 00:14:05 +07:00
parent 203df99976 bb75451a4e
commit 2916b53cd6
22 changed files with 950 additions and 331 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/pages/App/DesktopLayout.js
View File

@@ -1,7 +1,8 @@
import React, { useState } from "react";
import { Button, Drawer, Layout, Menu, Popover, Typography } from "antd";
import React, { useState, useEffect, useContext } from "react";
import { Button, Drawer, Layout, Menu, Popover, Typography, Card } from "antd";
import { MenuList } from "./MenuList";
import { Link, useHistory } from "react-router-dom";
import { ModalLoaderContext } from "../../utils/modal";
import {
AlipayOutlined,
DatabaseOutlined,
@@ -37,11 +38,19 @@ const { Header, Content, Sider } = Layout;
const { SubMenu } = Menu;
export const DesktopLayout = observer(() => {
const modalLoader = useContext(ModalLoaderContext);
let history = useHistory();
const xl = useMediaQuery({ minWidth: 1024 });
const store = useStore();
const [clicked, setClicked] = useState(false);
useEffect(() => {
(async () => {
modalLoader.setLoading(true);
await Promise.allSettled([store.authentication.getProfile()]);
modalLoader.setLoading(false);
})();
}, []);
return (
<Layout
theme={"light"}
@@ -312,7 +321,9 @@ export const DesktopLayout = observer(() => {
</Link>
</Menu.Item>
)}
{store.authentication.userData.role !== "Admin" && (
{store.authentication.userData.role !== "Admin" &&
store.authentication.userData.role !==
"Customer Service" && (
<Menu.Item key="payback-from-user">
<Link to={LINKS.PAYBACK_CREATED}>
<AlipayOutlined />
@@ -369,7 +380,6 @@ export const DesktopLayout = observer(() => {
>
{store.ui.mediaQuery.isMobile && (
<div
className={store.ui.mediaQuery.isMobile ? "shadow" : null}
style={{
top: 0,
left: 0,
@@ -392,8 +402,8 @@ export const DesktopLayout = observer(() => {
width: "100%",
paddingLeft: store.ui.mediaQuery.isMobile ? 10 : 20,
paddingRight: store.ui.mediaQuery.isMobile ? 0 : 20,
paddingBottom: 4,
marginTop: -5,
marginTop: -20,
}}
>
<Button
@@ -422,28 +432,29 @@ export const DesktopLayout = observer(() => {
paddingTop: 5,
}}
>
{/*<img*/}
{/* className={[classes.logoFull]}*/}
{/* style={{*/}
{/* maxHeight: 18,*/}
{/* maxWidth: 75,*/}
{/* }}*/}
{/* src={parkirLogoFull}*/}
{/*/>*/}
{/*<Paragraph*/}
{/* style={{*/}
{/* margin: "-5px 0px 0px 2px",*/}
{/* padding: 0,*/}
{/* lineHeight: "18px",*/}
{/* fontSize: 8,*/}
{/* fontWeight: 800,*/}
{/* color: "#8c8c8c",*/}
{/* textAlign: "center",*/}
{/* }}*/}
{/*>*/}
{/* {store.authentication.userData.role || "Apps"}*/}
{/*</Paragraph>*/}
{/* <img
className={[classes.logoFull]}
style={{
maxHeight: 18,
maxWidth: 75,
}}
src={parkirLogoFull}
/> */}
{/* <Paragraph
style={{
padding: 0,
lineHeight: "18px",
fontSize: 8,
fontWeight: 800,
color: "#8c8c8c",
}}
>
{store.authentication.userData.role || "Apps"}
</Paragraph> */}
</div>
<Popover
className={store.ui.mediaQuery.isDesktop ? "shadow" : null}
autoAdjustOverflow={true}
@@ -494,9 +505,17 @@ export const DesktopLayout = observer(() => {
visible={clicked}
onVisibleChange={() => setClicked(!clicked)}
>
{store.authentication.userData.role !== "Admin" &&
store.authentication.userData.role !== "Customer Service" &&
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(store.authentication.profileData?.wallet || 0)}
<Button
size={"default"}
type={store.ui.mediaQuery.isDesktop ? "" : "link"}
title="tes"
style={{
marginRight: store.ui.mediaQuery.isDesktop ? 20 : 10,
}}
@@ -546,6 +565,33 @@ export const DesktopLayout = observer(() => {
width: "100%",
}}
></div>
{store.authentication.userData.role !== "Admin" &&
store.authentication.userData.role !== "Customer Service" && (
<Card
size="small"
title={
<span
style={{
fontStyle: "bold",
textAlign: "center",
}}
>
Saldo :{" "}
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(
store.authentication.profileData?.wallet || 0
)}
</span>
}
style={{
marginRight: 10,
width: 210,
height: 31,
}}
></Card>
)}
<Popover
className={store.ui.mediaQuery.isDesktop ? "shadow" : null}
autoAdjustOverflow={true}
@@ -600,11 +646,12 @@ export const DesktopLayout = observer(() => {
size={"default"}
type={store.ui.mediaQuery.isDesktop ? "" : "link"}
style={{
marginRight: store.ui.mediaQuery.isDesktop ? 20 : 10,
marginRight: store.ui.mediaQuery.isDesktop ? 30 : 10,
width: 50,
}}
icon={
store.ui.mediaQuery.isDesktop ? (
<UserOutlined style={{ fontSize: "13px" }} />
<UserOutlined style={{ fontSize: "15px" }} />
) : (
<UserOutlined
style={{ fontSize: "13px", color: "#5b5b5b" }}

3
src/pages/App/MenuList.js
View File

@@ -242,7 +242,8 @@ export const MenuList = observer((props) => {
</Link>
</Menu.Item>
)}
{store.authentication.userData.role !== "Admin" && (
{store.authentication.userData.role !== "Admin" &&
store.authentication.userData.role !== "Customer Service" && (
<Menu.Item key="payback-from-user">
<Link to={LINKS.PAYBACK_CREATED}>
<FileProtectOutlined />

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

@@ -80,7 +80,7 @@ export const Home = observer(() => {
height: 200,
marginBottom: 10,
borderColor: "salmon",
width: "45%",
width: "47%",
}}
>
<Row>
@@ -154,7 +154,7 @@ export const Home = observer(() => {
height: 200,
marginBottom: 10,
borderColor: "salmon",
width: "45%",
width: "47%",
}}
>
<Row>
@@ -238,7 +238,7 @@ export const Home = observer(() => {
height: 200,
marginBottom: 10,
borderColor: "salmon",
width: "45%",
width: "47%",
}}
>
<Row>
@@ -262,7 +262,7 @@ export const Home = observer(() => {
height: 200,
marginBottom: 10,
borderColor: "salmon",
width: "45%",
width: "47%",
}}
>
<Row>

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

@@ -412,8 +412,8 @@ export const DetailUser = observer(() => {
Detail User
</Title>
<Col
lg={store.authentication.userData.role === "Admin" ? 18 : 13}
xs={store.authentication.userData.role === "Admin" ? 18 : 13}
lg={store.authentication.userData.role === "Admin" ? 18 : 17}
xs={store.authentication.userData.role === "Admin" ? 18 : 17}
style={{ textAlign: "right" }}
>
<Space
@@ -445,6 +445,7 @@ export const DetailUser = observer(() => {
onClick={() => {
setInitialData({
id: store.membership.dataDetail.id,
code: store.membership.dataDetail.partner.code,
name: store.membership.dataDetail.userDetail.name,
username: store.membership.dataDetail.username,
identity_number:
@@ -558,6 +559,14 @@ export const DetailUser = observer(() => {
{store.authentication.dataProfit.userDetail?.identity_number}
</Text>
</Col>
<Col span={12}>
<Text strong>Code</Text>
</Col>
<Col span={12}>
<Text>
{store.authentication.dataProfit.partner?.code}
</Text>
</Col>
<Col span={12}>
<Text strong>Status</Text>
</Col>
@@ -741,6 +750,7 @@ export const DetailUser = observer(() => {
style={{ marginBottom: "1rem", marginLeft: 5 }}
onClick={() => {
store.transaction.visibleModalFilterTransaction = true;
store.transaction.page=0;
setAction(true);
}}
>
@@ -777,6 +787,7 @@ export const DetailUser = observer(() => {
style={{ marginBottom: "1rem" }}
onClick={() => {
store.transaction.visibleModalFilterTransaction = true;
store.transaction.page=0;
setAction(true);
}}
>
@@ -858,6 +869,7 @@ export const DetailUser = observer(() => {
style={{ marginBottom: "1rem", marginLeft: 5 }}
onClick={() => {
store.transaction.visibleModalFilterTransaction = true;
store.transaction.page=0;
}}
>
<FilterOutlined />
@@ -897,6 +909,7 @@ export const DetailUser = observer(() => {
style={{ marginBottom: "1rem" }}
onClick={() => {
store.transaction.visibleModalFilterTransaction = true;
store.transaction.page=0;
}}
>
<FilterOutlined />
@@ -938,7 +951,7 @@ export const DetailUser = observer(() => {
}}
>
<List.Item.Meta
className={["cariparkir-container"].join(" ")}
className={[""].join(" ")}
title={item.name}
description={
<div style={{}}>

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

@@ -99,7 +99,7 @@ export const Konfirmasi = observer(() => {
render: (text, record) =>
record.roles?.name !== "Sales" &&
(record.user_detail?.image_store !== "[]" ||
record.user_detail?.image_store !== '""') ? (
record.user_detail?.image_store !== '""') ? (
<Button
onClick={async () => {
setToko(record);
@@ -236,7 +236,10 @@ export const Konfirmasi = observer(() => {
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent
data={
store.authentication.userData.role === "Admin" ? routeData : dataRoute
store.authentication.userData.role === "Admin" ||
store.authentication.userData.role === "Customer Service"
? routeData
: dataRoute
}
/>
<Card>

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

@@ -201,15 +201,17 @@ export const Membership = observer(() => {
key: "action",
render: (text, record) => (
<Space size="middle">
<Button
onClick={() => {
setDestination(record?.id);
console.log(record?.id);
setIsVisibleTopUpModal(true);
}}
>
<DownloadOutlined /> Top Up Saldo
</Button>
{store.authentication.userData.role !== "Customer Service" && (
<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);
@@ -226,7 +228,7 @@ export const Membership = observer(() => {
},
];
if (store.authentication.userData.role === "Customer Service") columns.pop();
//if (store.authentication.userData.role === "Customer Service") columns.pop();
const routeData = [
{
route: LINKS.HOME,
@@ -299,13 +301,15 @@ export const Membership = observer(() => {
const response = await store.membership.create(request);
response?.body?.statusCode === 201 || response?.body?.statusCode === 200
? message.success(
response?.body?.message || "Berhasil Tambah Member Baru"
response?.body?.message
? "Berhasil Tambah Member Baru"
: response?.body?.message
)
: message.error(response?.body?.error || "Gagal");
: message.error("Username Tersebut Sudah Terdaftar");
await getData();
} catch (e) {
console.log(e, "apa errornya");
message.error(e.response?.body?.message || "Gagal Tambah Member Baru");
message.error(e.response?.body?.error);
}
modalLoader.setLoading(false);
setConfirmLoading(false);
@@ -319,7 +323,10 @@ export const Membership = observer(() => {
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent
data={
store.authentication.userData.role === "Admin" ? routeData : dataRoute
store.authentication.userData.role === "Admin" ||
store.authentication.userData.role === "Customer Service"
? routeData
: dataRoute
}
/>
<Card>
@@ -330,6 +337,7 @@ export const Membership = observer(() => {
<Button
onClick={() => {
store.membership.visibleModalFilterMembership = true;
store.membership.page = 0;
}}
>
<FilterOutlined />
@@ -446,16 +454,19 @@ export const Membership = observer(() => {
<small>Username : {item.username}</small> <br />
<small>Role : {item.roles?.name}</small> <br />
<small>Saldo : {item.coa?.amount}</small> <br />
<Button
style={{ marginRight: 10, marginTop: 7 }}
onClick={() => {
setDestination(item?.id);
console.log(item?.id);
setIsVisibleTopUpModal(true);
}}
>
<DownloadOutlined /> Top Up Saldo
</Button>
{store.authentication.userData.role !==
"Customer Service" && (
<Button
style={{ marginRight: 10, marginTop: 7 }}
onClick={() => {
setDestination(item?.id);
console.log(item?.id);
setIsVisibleTopUpModal(true);
}}
>
<DownloadOutlined /> Top Up Saldo
</Button>
)}
<Button
onClick={async () => {
await store.transaction.getDataHistoryTopUp(
@@ -588,7 +599,7 @@ export const Membership = observer(() => {
</Col>
<Col span={24}>
<Title level={5} type={"secondary"} strong>
Type
Tipe
</Title>
<Select
mode={"multiple"}

6
src/pages/Membership/MembershipModal.js
View File

@@ -189,10 +189,10 @@ export const MembershipModal = ({
visible={visible}
title={
initialData.isChangePassword
? "Change Member Password"
? "Ganti Password Anggota"
: initialData.id
? "Edit Member"
: "Create a new Membership"
? "Edit Anggota"
: "Buat Anggota Baru"
}
okText={initialData.id ? "Edit" : "Create"}
cancelText="Batal"

8
src/pages/Payback/Payback.js
View File

@@ -35,7 +35,6 @@ import { capitalize } from "lodash";
import { PAYBACK_STATUS } from "../../constants/payback";
import moment from "moment";
export const Payback = observer(() => {
const { Option } = Select;
const { Title } = Typography;
@@ -274,7 +273,10 @@ export const Payback = observer(() => {
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent
data={
store.authentication.userData.role === "Admin" ? routeData : dataRoute
store.authentication.userData.role === "Admin" ||
store.authentication.userData.role === "Customer Service"
? routeData
: dataRoute
}
/>
<Card>
@@ -501,7 +503,7 @@ export const Payback = observer(() => {
label="Dari Tanggal"
rules={[{ required: true, message: "Please input Date!" }]}
>
<DatePicker style={{ width: "100%" }}/>
<DatePicker style={{ width: "100%" }} />
</Form.Item>
<Form.Item
name="end_date"

4
src/pages/Payback/PaybackCreated.js
View File

@@ -117,14 +117,14 @@ export const PaybackCreated = observer(() => {
},
{
route: LINKS.PAYBACK_CREATED,
name: <span style={{ fontWeight: "bold" }}>Buat Pembayaran</span>,
name: <span style={{ fontWeight: "bold" }}>Bukti Pembayaran</span>,
},
];
const dataRoute = [
{
route: LINKS.PAYBACK_CREATED,
name: "Buat Pembayaran",
name: "Bukti Pembayaran",
},
];

4
src/pages/Payback/PaybackModal.js
View File

@@ -98,8 +98,8 @@ export const PaybackModal = ({ initialData }) => {
return (
<Modal
visible={store.payback.visibleModalPayback}
title={"Create a new Created"}
okText={"Create"}
title={"Buat Pembayaran Baru"}
okText={"Buat"}
cancelText="Batal"
onCancel={handleCancel}
onOk={() => {

8
src/pages/Product/Product.js
View File

@@ -183,7 +183,8 @@ export const Product = observer(() => {
<BreadcumbComponent
data={
store.authentication.userData.role === "Admin" ||
store.authentication.userData.role === "Admin Partner"
store.authentication.userData.role === "Admin Partner" ||
store.authentication.userData.role === "Customer Service"
? routeData
: dataRoute
}
@@ -195,6 +196,7 @@ export const Product = observer(() => {
<Button
onClick={() => {
store.product.visibleModalFilterProduct = true;
store.product.page = 0;
}}
>
<FilterOutlined />
@@ -248,8 +250,8 @@ export const Product = observer(() => {
<Modal
visible={visibleModalUpload}
title={"Upload Excel Product"}
okText={"Create"}
title={"Upload Excel Produk"}
okText={"Buat"}
cancelText="Batal"
onCancel={() => {
form.resetFields();

199
src/pages/Product/ProductDetail.js
View File

@@ -1,5 +1,15 @@
import React, { useContext, useEffect } from "react";
import { Card, Col, Row, Table, Typography, Tag } from "antd";
import {
Card,
Col,
Row,
Table,
Typography,
Tag,
List,
Button,
Divider,
} from "antd";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import { useStore } from "../../utils/useStore";
@@ -62,6 +72,25 @@ export const ProductDetail = observer(() => {
currency: "IDR",
}).format(text),
},
{
title: "Biaya Admin",
dataIndex: "admin_price",
key: "admin_price",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
}, {
title: "Partner fee",
dataIndex: "partner_fee",
key: "partner_fee",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
title: "Tanggal Berlaku",
dataIndex: "startDate",
@@ -88,20 +117,20 @@ export const ProductDetail = observer(() => {
const styleSaldoTitle = store.ui.mediaQuery.isDesktop
? {
display: "flex",
justifyContent: "center",
}
display: "flex",
justifyContent: "center",
}
: { fontSize: "0.75rem" };
const styleSaldoContent = store.ui.mediaQuery.isDesktop
? {
fontSize: "1.25rem",
display: "flex",
justifyContent: "center",
}
fontSize: "1.25rem",
display: "flex",
justifyContent: "center",
}
: null;
return (
<div className={[""].join(" ")}>
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} />
<Card>
<Title strong>Product Detail</Title>
@@ -141,26 +170,138 @@ export const ProductDetail = observer(() => {
<Title strong level={3}>
Product Price History
</Title>
<Table
columns={columns}
dataSource={store.product.dataPriceHistory}
bordered
pagination={{
pageSize: store.product.pageSizePriceHistory,
total: store.product.totalDataPriceHistory,
current: store.product.pagePriceHistory + 1,
showSizeChanger: true,
simple: false,
}}
onChange={async (page) => {
let pageNumber = page.current;
store.product.pageSizePriceHistory = page.pageSize;
store.product.pagePriceHistory = pageNumber - 1;
modalLoader.setLoading(true);
await store.product.getPriceHistoryByProduct(id);
modalLoader.setLoading(false);
}}
/>
{store.ui.mediaQuery.isDesktop && (
<Table
columns={columns}
dataSource={store.product.dataPriceHistory}
bordered
pagination={{
pageSize: store.product.pageSizePriceHistory,
total: store.product.totalDataPriceHistory,
current: store.product.pagePriceHistory + 1,
showSizeChanger: true,
simple: false,
}}
onChange={async (page) => {
let pageNumber = page.current;
store.product.pageSizePriceHistory = page.pageSize;
store.product.pagePriceHistory = pageNumber - 1;
modalLoader.setLoading(true);
await store.product.getPriceHistoryByProduct(id);
modalLoader.setLoading(false);
}}
/>
)}
{store.ui.mediaQuery.isMobile && (
<List
itemLayout="horizontal"
position={"top"}
pagination={{
onChange: async (page, pageSize) => {
store.product.pageSizePriceHistory = pageSize;
store.product.pagePriceHistory = page - 1;
modalLoader.setLoading(true);
await store.product.getPriceHistoryByProduct(id);
modalLoader.setLoading(false);
},
pageSize: store.product.pageSizePriceHistory,
total: store.product.totalDataPriceHistory,
current: store.product.pagePriceHistory + 1,
style: { marginBottom: "1rem", marginRight: "1rem" },
}}
dataSource={store.product.dataPriceHistory}
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={[""].join(" ")}
//title={item.mark_up_price}
description={
<div style={{}}>
<p>
<small>
Markup Price :{" "}
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(item.mark_up_price)}
</small>{" "}
<br />
<small>
Price:{" "}
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(item.price)}
</small>{" "}
<br />
<small>
{" "}
Tanggal Berlaku :
{item.startDate
? format(
parseISO(item.startDate),
"dd MMMM yyyy"
)
: "-"}
</small>{" "}
<br />
<small>
Tanggal Berakhir :{" "}
{item.endDate
? format(
parseISO(item.endDate),
"dd MMMM yyyy"
)
: "Sampai Sekarang"}
</small>{" "}
<br />
</p>
<p></p>
</div>
}
/>
{/* <div style={{ marginRight: 16 }}>
<p
style={{
fontSize: 9,
margin: 0,
}}
>
<Tag
color={
item?.product_status === "ACTIVE"
? "blue"
: "#E3E8EE"
}
style={{ color: "#4F566B" }}
>
{item?.product_status === "ACTIVE"
? " Tersedia"
: "Tidak"}
</Tag>
</p>
</div> */}
</List.Item>
<Divider plain style={{ margin: 0 }} />
</div>
);
}}
/>
)}
</div>
</Col>
</Row>

359
src/pages/Profile/Profile.js
View File

@@ -15,6 +15,8 @@ import {
Image,
Tag,
Tabs,
Space,
message,
} from "antd";
import moment from "moment";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
@@ -37,6 +39,7 @@ export const Profile = observer(() => {
const [filterStart, setFilterStart] = useState([]);
const [filterEnd, setFilterEnd] = useState([]);
const [actionFilter, setAction] = useState(false);
const [visible, setVisible] = useState(false);
const routeData = [
{
@@ -63,13 +66,14 @@ export const Profile = observer(() => {
await Promise.allSettled([
store.authentication.getProfile(),
store.transaction.getDataHistoryTransaction(),
store.transaction.getDataHistoryCheckBill(),
]);
await store.transaction.getDataHistoryTopUpProfile(
store.authentication.profileData?.id
);
modalLoader.setLoading(false);
})();
}, []);
}, [store.transaction.filterStart, store.transaction.filterEnd]);
const handleRemoveFilter = async () => {
store.transaction.filterStart = null;
@@ -78,11 +82,11 @@ export const Profile = observer(() => {
setFilterStart([]);
setFilterEnd([]);
//await store.transaction.getDataHistoryTransaction();
actionFilter === true
? await store.transaction.getDataHistoryTopUpProfile(
store.authentication.profileData?.id
)
: await store.transaction.getDataHistoryTransaction();
// actionFilter === true
// ? await store.transaction.getDataHistoryTopUpProfile(
// store.authentication.profileData?.id
// )
// : await store.transaction.getDataHistoryTransaction();
store.transaction.visibleModalFilterTransaction = false;
setAction(false);
};
@@ -92,11 +96,11 @@ export const Profile = observer(() => {
//form.resetFields();
store.transaction.filterEnd = null;
store.transaction.visibleModalFilterTransaction = false;
actionFilter === true
? await store.transaction.getDataHistoryTopUpProfile(
store.authentication.profileData?.id
)
: await store.transaction.getDataHistoryTransaction();
// actionFilter === true
// ? await store.transaction.getDataHistoryTopUpProfile(
// store.authentication.profileData?.id
// )
// : await store.transaction.getDataHistoryTransaction();
setAction(false);
//await store.transaction.getDataHistoryTransaction();
};
@@ -110,14 +114,14 @@ export const Profile = observer(() => {
"YYYY-MM-DD HH:mm:ss"
);
modalLoader.setLoading(true);
actionFilter === true
? await store.transaction.getDataHistoryTopUpProfile(
store.authentication.profileData?.id
)
: await store.transaction.getDataHistoryTransaction();
// actionFilter === true
// ? await store.transaction.getDataHistoryTopUpProfile(
// store.authentication.profileData?.id
// )
// : await store.transaction.getDataHistoryTransaction();
modalLoader.setLoading(false);
store.transaction.filterStart = null;
store.transaction.filterEnd = null;
// store.transaction.filterStart = null;
// store.transaction.filterEnd = null;
//form.resetFields();
store.transaction.visibleModalFilterTransaction = false;
setAction(false);
@@ -191,15 +195,15 @@ export const Profile = observer(() => {
record.status === 1
? "success"
: record.status === 0
? "warning"
: "processing"
? "warning"
: "processing"
}
>
{record.status === 1
? "Sukses"
: record.status === 0
? "Dalam Proses"
: "Gagal"}
? "Dalam Proses"
: "Gagal"}
</Tag>
);
},
@@ -257,38 +261,131 @@ export const Profile = observer(() => {
render: (text, record) => {
return (
<Text>
{format(parseISO(record.transaction_date), "dd MMMM yyyy")}
{format(parseISO(record.transaction_date), "dd MMMM yyyy HH:mm:ss")}
</Text>
);
},
},
];
const columnBill = [
{
title: "Code Product",
dataIndex: "product_code",
key: "product_code",
},
{
title: "Admin Price",
dataIndex: "admin_price",
key: "admin_price",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
title: "Tagihan Postpaid",
dataIndex: "amount",
key: "amount",
},
{
title: "Nomor tujuan",
dataIndex: "destination",
key: "destination",
},
{
title: "Transaction Id",
dataIndex: "trx_id",
key: "trx_id",
},
{
title: "Partner Transaction Id",
dataIndex: "partner_trx_id",
key: "partner_trx_id",
},
{
title: "Tanggal Transaksi",
dataIndex: "createdAt",
key: "createdAt",
render: (text, record) => {
return (
<Text>
{format(parseISO(record.createdAt), "dd MMMM yyyy HH:mm:ss")}
</Text>
);
},
},
{
title: "Status",
dataIndex: "status",
key: "status",
render: (text, record) => {
console.log("status", record)
return (
<Tag
color={
record.status === "SUCCESS"
? "success"
: record.status === 0
? "warning"
: "processing"
}
>
{record.status === "SUCCESS"
? "Sukses"
: record.status === 0
? "Dalam Proses"
: "Gagal"}
</Tag>
);
},
},
];
const styleSaldoTitle = store.ui.mediaQuery.isDesktop
? {
display: "flex",
justifyContent: "center",
}
display: "flex",
justifyContent: "center",
}
: { fontSize: "0.75rem" };
const styleSaldoContent = store.ui.mediaQuery.isDesktop
? {
fontSize: "1.25rem",
display: "flex",
justifyContent: "center",
}
fontSize: "1.25rem",
display: "flex",
justifyContent: "center",
}
: null;
const handleSubmit = async (id, data) => {
try {
modalLoader.setLoading(true);
const response = await store.membership.changePassword(id, data);
console.log(id, "id yang masuk");
console.log(data, "data yang masuk");
message.success(response?.body?.message || "Berhasil Ganti Password");
} catch (e) {
console.log(e, "apa errornya");
message.error(e.response?.body?.message || "Gagal Ganti Password");
}
modalLoader.setLoading(false);
setVisible(false);
form.resetFields();
};
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent
data={
store.authentication.userData.role === "Admin" ||
store.authentication.userData.role === "Admin Partner"
store.authentication.userData.role === "Admin Partner" ||
store.authentication.userData.role === "Customer Service"
? routeData
: dataRoute
}
/>
<Card>
<Title strong>Profile</Title>
<Row style={{ marginBottom: 20 }}>
<Col lg={12} xs={24}>
<Row>
@@ -407,6 +504,20 @@ export const Profile = observer(() => {
</Row>
</Col>
)}
{store.authentication.userData.role === "Retail" && (
<Button
onClick={() => {
console.log(store.authentication.profileData?.id, "id nya");
console.log(
store.authentication.profileData?.userDetail.id,
"id member"
);
setVisible(true);
}}
>
Ganti Password
</Button>
)}
</Row>
<Row>
<Col span={24}>
@@ -416,6 +527,7 @@ export const Profile = observer(() => {
style={{ marginBottom: "1rem", marginLeft: 5 }}
onClick={() => {
store.transaction.visibleModalFilterTransaction = true;
store.transaction.page = 0;
setAction(true);
}}
>
@@ -531,6 +643,7 @@ export const Profile = observer(() => {
style={{ marginBottom: "1rem", marginLeft: 5 }}
onClick={() => {
store.transaction.visibleModalFilterTransaction = true;
store.transaction.page = 0;
}}
>
<FilterOutlined />
@@ -544,17 +657,16 @@ export const Profile = observer(() => {
//scroll={{ x: 1500, y: 300 }}
dataSource={store.transaction.dataHistoryTransaction}
pagination={{
pageSize: store.transaction.pageSizeHistoryTransaction,
pageSize: store.transaction.pageSize,
total: store.transaction.total_dataHistoryTransaction,
current: store.transaction.pageHistoryTransaction + 1,
current: store.transaction.page + 1,
showSizeChanger: true,
simple: false,
}}
onChange={async (page) => {
let pageNumber = page.current;
store.transaction.pageSizeHistoryTransaction =
page.pageSize;
store.transaction.pageHistoryTransaction = pageNumber - 1;
store.transaction.pageSize = page.pageSize;
store.transaction.page = pageNumber - 1;
modalLoader.setLoading(true);
await store.transaction.getDataHistoryTransaction();
modalLoader.setLoading(false);
@@ -569,18 +681,15 @@ export const Profile = observer(() => {
dataSource={store.transaction.dataHistoryTransaction}
pagination={{
onChange: async (page, pageSize) => {
console.log(page, "Page");
console.log(pageSize, "Page size");
store.transaction.pageSizeHistoryTransaction =
pageSize;
store.transaction.pageHistoryTransaction = page - 1;
store.transaction.page = pageSize;
store.transaction.page = page - 1;
modalLoader.setLoading(true);
await store.transaction.getDataHistoryTransaction();
modalLoader.setLoading(false);
},
pageSize: store.transaction.pageSizeHistoryTransaction,
pageSize: store.transaction.pageSize,
total: store.transaction.total_dataHistoryTransaction,
current: store.transaction.pageHistoryTransaction + 1,
current: store.transaction.page + 1,
style: { marginBottom: "1rem", marginRight: "1rem" },
}}
style={{ padding: 0 }}
@@ -622,15 +731,15 @@ export const Profile = observer(() => {
item.status === 1
? "success"
: item.status === 0
? "warning"
: "processing"
? "warning"
: "processing"
}
>
{item.status === 1
? "Sukses"
: item.status === 0
? "Dalam Proses"
: "Gagal"}
? "Dalam Proses"
: "Gagal"}
</Tag>
}
</small>{" "}
@@ -669,6 +778,118 @@ export const Profile = observer(() => {
</div>
)}
</TabPane>
<TabPane tab="Riwayat Check Bill" key="3">
<Button
style={{ marginBottom: "1rem", marginLeft: 5 }}
onClick={() => {
store.transaction.visibleModalFilterTransaction = true;
store.transaction.page = 0;
setAction(true);
}}
>
<FilterOutlined />
Filter
</Button>
{store.ui.mediaQuery.isDesktop && (
<Table
key="1"
hasEmpty
columns={columnBill}
dataSource={store.transaction.dataHistorybillProfile}
bordered
pagination={{
pageSize: store.transaction.pageSize,
total: store.transaction.total_dataHistorybillProfile,
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 store.transaction.getDataHistoryCheckBill();
modalLoader.setLoading(false);
}}
/>
)}
{store.ui.mediaQuery.isMobile && (
<div>
<List
itemLayout="horizontal"
position={"top"}
dataSource={store.transaction.dataHistorybillProfile}
pagination={{
onChange: async (page, pageSize) => {
console.log(page, "Page");
console.log(pageSize, "Page size");
store.transaction.pageSize = pageSize;
store.transaction.page = page - 1;
modalLoader.setLoading(true);
await store.transaction.getDataHistoryCheckBill();
modalLoader.setLoading(false);
},
pageSize: store.transaction.pageSize,
total: store.transaction.total_dataHistorybillProfile,
current: store.transaction.page + 1,
style: { marginBottom: "1rem", marginRight: "1rem" },
}}
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.id}
description={
<div style={{}}>
<p>
<small>
Pengirim : {item.sender_name}
</small>{" "}
<br />
<small>
Amount :{" "}
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(item.amount || 0)}
</small>{" "}
<br />
<small>
Transaction Date :{" "}
{format(
parseISO(item.transaction_date),
"dd-MM-yyyy"
)}
</small>{" "}
<br />
</p>
</div>
}
/>
</List.Item>
<Divider plain style={{ margin: 0 }} />
</div>
);
}}
/>
</div>
)}
</TabPane>
</Tabs>
</Col>
</Row>
@@ -684,8 +905,8 @@ export const Profile = observer(() => {
store.transaction.visibleModalFilterTransaction = false;
actionFilter === true
? await store.transaction.getDataHistoryTopUpProfile(
store.authentication.profileData?.id
)
store.authentication.profileData?.id
)
: await store.transaction.getDataHistoryTransaction();
}}
>
@@ -710,6 +931,46 @@ export const Profile = observer(() => {
</Col>
</Row>
</Modal>
<Modal
visible={visible}
title={"Ganti Password"}
okText={"Ganti"}
cancelText="Batal"
onCancel={() => {
form.resetFields();
//handleCancelTransaction();
setVisible(false);
}}
onOk={() => {
form
.validateFields()
.then((values) => {
console.log(store.authentication.profileData?.id, "id pass");
console.log(values, "id data");
console.log(store.membership.dataDetail.id, "id member");
handleSubmit(store.authentication.profileData?.id, values);
form.resetFields();
})
.catch((info) => {
console.error("Validate Failed:", info);
});
}}
>
<Form
form={form}
layout="vertical"
initialValues={{ id: store.authentication.profileData?.id }}
>
<Form.Item
name="password"
label="Password"
rules={[{ required: false, message: "Please input password!" }]}
>
<Input.Password />
</Form.Item>
</Form>
</Modal>
</div>
);
});

37
src/pages/Transaction/Product.js
View File

@@ -215,6 +215,7 @@ export const Product = observer(() => {
style={{
backgroundColor: "#4e79e7",
color: "#fff",
marginRight:10
}}
onClick={() => {
form
@@ -231,24 +232,24 @@ export const Product = observer(() => {
>
Beli
</Button>,
<Button
key="Beli Stag"
type="primary"
onClick={() => {
form
.validateFields()
.then((values) => {
console.log(values, "isi form");
handleBuyStag(values, barang.product_code);
form.resetFields();
})
.catch((info) => {
console.error("Validate Failed:", info);
});
}}
>
Beli Staging
</Button>,
// <Button
// key="Beli Stag"
// type="primary"
// onClick={() => {
// form
// .validateFields()
// .then((values) => {
// console.log(values, "isi form");
// handleBuyStag(values, barang.product_code);
// form.resetFields();
// })
// .catch((info) => {
// console.error("Validate Failed:", info);
// });
// }}
// >
// Beli Staging
// </Button>,
]}
>
<Form form={form} layout="vertical">

108
src/pages/Transaction/Transaction.js
View File

@@ -1,4 +1,4 @@
import React, { message, useContext, useEffect, useState } from "react";
import React, { useContext, useEffect, useState } from "react";
import { useStore } from "../../utils/useStore";
import {
Card,
@@ -11,8 +11,10 @@ import {
Row,
DatePicker,
Form,
Input,
message,
Input
} from "antd";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { Product } from "./Product";
import { LINKS } from "../../routes/app";
@@ -89,6 +91,7 @@ export const Transaction = observer(() => {
} else {
message.error(response?.body?.error || "Gagal Beli Produk", 3);
}
setVisibleModalBuy(false);
} catch (e) {
console.log("testingan");
console.log(e.response, "testingan");
@@ -102,40 +105,43 @@ export const Transaction = observer(() => {
console.log(e, "apa errornya");
message.error("Gagal Beli Product");
}
// message.success("Berhasil Beli Produk");
setVisibleModalBuy(false);
modalLoader.setLoading(false);
};
const handleBuyStag = async (data, productCode) => {
modalLoader.setLoading(true);
try {
const response = await store.transaction.buyProduct({
...data,
productCode: productCode,
});
if (response.status === 201) {
message.success(response?.body?.message || "Berhasil Beli Produk");
} else {
message.error(response?.body?.error || "Gagal Beli Produk", 3);
}
} catch (e) {
console.log("testingan");
console.log(e.response, "testingan");
console.log(e.result, "testingan1");
if (e.response?.body?.error) {
message.error(e.response.body.error);
setVisibleModalBuy(false);
modalLoader.setLoading(false);
return;
}
console.log(e, "apa errornya");
message.error("Gagal Beli Product");
}
// setDataProd(false);
// setDataStag(false);
setVisibleModalBuy(false);
modalLoader.setLoading(false);
};
// const handleBuyStag = async (data, productCode) => {
// modalLoader.setLoading(true);
// try {
// const response = await store.transaction.buyProduct({
// ...data,
// productCode: productCode,
// });
// if (response.status === 201) {
// message.success(response?.body?.message || "Berhasil Beli Produk");
// } else {
// message.error(response?.body?.error || "Gagal Beli Produk", 3);
// }
// } catch (e) {
// console.log("testingan");
// console.log(e.response, "testingan");
// console.log(e.result, "testingan1");
// if (e.response?.body?.error) {
// message.error(e.response.body.error);
// setVisibleModalBuy(false);
// modalLoader.setLoading(false);
// return;
// }
// console.log(e, "apa errornya");
// message.error("Gagal Beli Product");
// }
// // setDataProd(false);
// // setDataStag(false);
// setVisibleModalBuy(false);
// modalLoader.setLoading(false);
// };
const handleCancel = () => {
form.resetFields();
setVisibleModalBuy(false);
@@ -241,6 +247,7 @@ export const Transaction = observer(() => {
onClick={() => {
setVisibleModalBuy(true);
setBarang(item);
console.log(item?.product_name)
}}
hoverable
style={{
@@ -294,6 +301,7 @@ export const Transaction = observer(() => {
style={{
backgroundColor: "#4e79e7",
color: "#fff",
marginRight:10
}}
onClick={() => {
form
@@ -310,24 +318,24 @@ export const Transaction = observer(() => {
>
Beli
</Button>,
<Button
key="Beli Stag"
type="primary"
onClick={() => {
form
.validateFields()
.then((values) => {
console.log(values, "isi form");
handleBuyStag(values, barang.product_code);
form.resetFields();
})
.catch((info) => {
console.error("Validate Failed:", info);
});
}}
>
Beli Staging
</Button>,
// <Button
// key="Beli Stag"
// type="primary"
// onClick={() => {
// form
// .validateFields()
// .then((values) => {
// console.log(values, "isi form");
// handleBuyStag(values, barang.product_code);
// form.resetFields();
// })
// .catch((info) => {
// console.error("Validate Failed:", info);
// });
// }}
// >
// Beli Staging
// </Button>,
]}
>
<Form form={form} layout="vertical">