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

Perbaikan Project PPOB

Browse Source
This commit is contained in:
ajat91.sudrajat 2021-12-28 13:46:52 +07:00
parent bf0e28c4f3
commit 7ad15665cc
6 changed files with 319 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/component/PartnerComponent.js
View File

@ -20,6 +20,7 @@ import { ModalLoaderContext } from "../utils/modal";
export const PartnerComponent = observer((props) => { export const PartnerComponent = observer((props) => {
const store = useStore(); const store = useStore();
const [value, setValue] = useState();
const [form] = Form.useForm(); const [form] = Form.useForm();
const history = useHistory(); const history = useHistory();
const [idData, setIdData] = useState(""); const [idData, setIdData] = useState("");
@ -415,9 +416,21 @@ export const PartnerComponent = observer((props) => {
required: true, required: true,
message: "Please input password phone number!", message: "Please input password phone number!",
}, },
{
pattern: /^(?:\d*)$/,
message: "Value should contain just number",
},
{
pattern: /^[\d]{0,12}$/,
message: "Value should be less than 12 character",
},
]} ]}
> >
<Input /> <Input
onChange={(value) => {
setValue(value);
}}
/>
</Form.Item> </Form.Item>
)} )}
{!isChangePassword && ( {!isChangePassword && (

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

@ -118,23 +118,30 @@ export const DesktopLayout = observer(() => {
}} }}
> >
<Menu> <Menu>
{store.authentication.userData.role !== "Admin Partner" && ( {/* {store.authentication.userData.role !== "Admin Partner" && ( */}
<Menu.Item key="home"> <Menu.Item key="home">
<Link to={LINKS.HOME}> <Link to={LINKS.HOME}>
<HomeOutlined /> <HomeOutlined />
<span>Beranda</span> <span>Beranda</span>
</Link>
</Menu.Item>
{/* )} */}
{store.authentication.userData.role === "Admin" && (
<Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}>
<FileProtectOutlined />
<span>Keanggotaan</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role === "Supervisor" && (
<Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}>
<FileProtectOutlined />
<span>Keanggotaan</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
{store.authentication.userData.role !== "Retail" ||
(store.authentication.userData.role !== "Admin Partner" && (
<Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}>
<FileProtectOutlined />
<span>Keanggotaan</span>
</Link>
</Menu.Item>
))}
{store.authentication.userData.role === "Admin" && ( {store.authentication.userData.role === "Admin" && (
<SubMenu <SubMenu
key="config" key="config"
@ -192,7 +199,7 @@ export const DesktopLayout = observer(() => {
)} )}
</SubMenu> </SubMenu>
)} )}
{store.authentication.userData.role !== "Admin" && ( {store.authentication.userData.role === "Supervisor" && (
<Menu.Item key="product"> <Menu.Item key="product">
<Link to={LINKS.PRODUCT}> <Link to={LINKS.PRODUCT}>
<DatabaseOutlined /> <DatabaseOutlined />
@ -200,39 +207,54 @@ export const DesktopLayout = observer(() => {
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
{store.authentication.userData.role === "Retail" || {store.authentication.userData.role === "Admin Partner" && (
(store.authentication.userData.role === "Admin Partner" && ( <Menu.Item key="product">
<Menu.Item key="transaction"> <Link to={LINKS.PRODUCT}>
<Link to={LINKS.TRANSACTION}> <DatabaseOutlined />
<ShoppingCartOutlined /> <span>Produk</span>
<span>Transaksi</span> </Link>
</Link> </Menu.Item>
</Menu.Item>
))}
{store.authentication.userData.role !== "Admin Partner" && (
<SubMenu
key="payback-main"
icon={<ProfileOutlined />}
title="Pembayaran"
>
{store.authentication.userData.role !== "Retail" && (
<Menu.Item key="payback-to-user">
<Link to={LINKS.PAYBACK}>
<PayCircleOutlined />
<span>Konfirmasi</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role !== "Admin" && (
<Menu.Item key="payback-from-user">
<Link to={LINKS.PAYBACK_CREATED}>
<AlipayOutlined />
<span>Dibuat oleh Saya</span>
</Link>
</Menu.Item>
)}
</SubMenu>
)} )}
{store.authentication.userData.role === "Admin Partner" && (
<Menu.Item key="transaction">
<Link to={LINKS.TRANSACTION}>
<ShoppingCartOutlined />
<span>Transaksi</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role === "Retail" && (
<Menu.Item key="transaction">
<Link to={LINKS.TRANSACTION}>
<ShoppingCartOutlined />
<span>Transaksi</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role !== "Admin Partner" && store.authentication.userData.role !== "Retail" && (
<SubMenu
key="payback-main"
icon={<ProfileOutlined />}
title="Pembayaran"
>
{store.authentication.userData.role !== "Retail" && (
<Menu.Item key="payback-to-user">
<Link to={LINKS.PAYBACK}>
<PayCircleOutlined />
<span>Konfirmasi</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role !== "Admin" && (
<Menu.Item key="payback-from-user">
<Link to={LINKS.PAYBACK_CREATED}>
<AlipayOutlined />
<span>Dibuat oleh Saya</span>
</Link>
</Menu.Item>
)}
</SubMenu>
)}
{store.authentication.userData.role !== "Admin" && ( {store.authentication.userData.role !== "Admin" && (
<Menu.Item key="profile"> <Menu.Item key="profile">
<Link to={LINKS.PROFILE}> <Link to={LINKS.PROFILE}>

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

@ -15,7 +15,7 @@ import {
SlackOutlined, SlackOutlined,
CodepenOutlined, CodepenOutlined,
WindowsOutlined, WindowsOutlined,
AliyunOutlined AliyunOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { useStore } from "../../utils/useStore"; import { useStore } from "../../utils/useStore";
@ -48,23 +48,30 @@ export const MenuList = observer((props) => {
overflowedIndicator={0} overflowedIndicator={0}
forceSubMenuRender={true} forceSubMenuRender={true}
> >
{/* {store.authentication.userData.role === "Admin" && ( */}
<Menu.Item key="home">
<Link to={LINKS.HOME}>
<HomeOutlined />
<span>Beranda</span>
</Link>
</Menu.Item>
{/* )} */}
{store.authentication.userData.role === "Admin" && ( {store.authentication.userData.role === "Admin" && (
<Menu.Item key="home"> <Menu.Item key="membership">
<Link to={LINKS.HOME}> <Link to={LINKS.MEMBERSHIP}>
<HomeOutlined /> <FileProtectOutlined />
<span>Beranda</span> <span>Keanggotaan</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role === "Supervisor" && (
<Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}>
<FileProtectOutlined />
<span>Keanggotaan</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
{store.authentication.userData.role !== "Retail" &&
store.authentication.userData.role !== "Admin Partner" && (
<Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}>
<FileProtectOutlined />
<span>Keanggotaan</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role === "Admin" && ( {store.authentication.userData.role === "Admin" && (
<SubMenu key="config" icon={<MenuUnfoldOutlined />} title="Config"> <SubMenu key="config" icon={<MenuUnfoldOutlined />} title="Config">
<Menu.Item key="partner"> <Menu.Item key="partner">
@ -129,15 +136,22 @@ export const MenuList = observer((props) => {
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
{store.authentication.userData.role === "Retail" || {store.authentication.userData.role === "Admin Partner" && (
(store.authentication.userData.role === "Admin Partner" && ( <Menu.Item key="transaction">
<Menu.Item key="transaction"> <Link to={LINKS.TRANSACTION}>
<Link to={LINKS.TRANSACTION}> <ShoppingCartOutlined />
<ShoppingCartOutlined /> <span>Transaksi</span>
<span>Transaksi</span> </Link>
</Link> </Menu.Item>
</Menu.Item> )}
))} {store.authentication.userData.role === "Retail" && (
<Menu.Item key="transaction">
<Link to={LINKS.TRANSACTION}>
<ShoppingCartOutlined />
<span>Transaksi</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role !== "Retail" && {store.authentication.userData.role !== "Retail" &&
store.authentication.userData.role !== "Admin Partner" && ( store.authentication.userData.role !== "Admin Partner" && (
<SubMenu <SubMenu

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

@ -104,15 +104,15 @@ export const Membership = observer(() => {
: (response = await store.transaction.distribute(data)); : (response = await store.transaction.distribute(data));
response?.body?.statusCode === 201 response?.body?.statusCode === 201
? message.success("Success Top Up") ? message.success("Sukses Top Up")
: message.error("Failed Top Up"); : message.error("Saldo Tidak Mencukupi");
modalLoader.setLoading(false); modalLoader.setLoading(false);
await getData(); await getData();
} catch (e) { } catch (e) {
console.log(e, "apa errornya"); console.log(e, "apa errornya");
modalLoader.setLoading(false); modalLoader.setLoading(false);
message.error("Failed Top Up"); message.error("Gagal Top Up");
} }
setConfirmLoading(false); setConfirmLoading(false);
setIsVisibleTopUpModal(false); setIsVisibleTopUpModal(false);

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

@ -1,107 +1,122 @@
import React from "react"; import React, { useState } from "react";
import {Form, Input, Modal, Select} from "antd"; import { Form, Input, Modal, Select, InputNumber } from "antd";
import {useStore} from "../../utils/useStore"; import { useStore } from "../../utils/useStore";
export const MembershipModal = ({ export const MembershipModal = ({
visible, visible,
onCreate, onCreate,
onCancel, onCancel,
initialData, initialData,
}) => { }) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const {Option} = Select; const { Option } = Select;
const store = useStore(); const store = useStore();
const [value, setValue] = useState();
return ( return (
<Modal <Modal
visible={visible} visible={visible}
title={ title={
initialData.isChangePassword initialData.isChangePassword
? "Change Member Password" ? "Change Member Password"
: initialData.id : initialData.id
? "Edit Member" ? "Edit Member"
: "Create a new Membership" : "Create a new Membership"
} }
okText={initialData.id ? "Edit" : "Create"} okText={initialData.id ? "Edit" : "Create"}
cancelText="Cancel" cancelText="Cancel"
onCancel={() => { onCancel={() => {
form.resetFields(); form.resetFields();
onCancel(); onCancel();
}} }}
onOk={() => { onOk={() => {
form form
.validateFields() .validateFields()
.then((values) => { .then((values) => {
onCreate(values); onCreate(values);
form.resetFields(); form.resetFields();
}) })
.catch((info) => { .catch((info) => {
console.log("Validate Failed:", info); console.log("Validate Failed:", info);
}); });
}} }}
> >
<Form <Form
form={form} form={form}
layout="vertical" layout="vertical"
name="form_in_modal" name="form_in_modal"
initialValues={initialData} initialValues={initialData}
> >
{((initialData.id && !initialData.isChangePassword) || {((initialData.id && !initialData.isChangePassword) ||
!initialData.id) && ( !initialData.id) && (
<Form.Item <Form.Item
name="name" name="name"
label="Name" label="Name"
rules={[{required: true, message: "Please input Name!"}]} rules={[{ required: true, message: "Please input Name!" }]}
> >
<Input/> <Input />
</Form.Item> </Form.Item>
)} )}
{!initialData.id && ( {!initialData.id && (
<Form.Item <Form.Item
name="username" name="username"
label="Username" label="Username"
rules={[{required: true, message: "Please input Username!"}]} rules={[{ required: true, message: "Please input Username!" }]}
> >
<Input/> <Input />
</Form.Item> </Form.Item>
)} )}
{((initialData.id && initialData.isChangePassword) || {((initialData.id && initialData.isChangePassword) ||
!initialData.id) && ( !initialData.id) && (
<Form.Item <Form.Item
name="password" name="password"
label="Password" label="Password"
rules={[{required: false, message: "Please input password!"}]} rules={[{ required: false, message: "Please input password!" }]}
> >
<Input.Password/> <Input.Password />
</Form.Item> </Form.Item>
)} )}
{((initialData.id && !initialData.isChangePassword) || {((initialData.id && !initialData.isChangePassword) ||
!initialData.id) && ( !initialData.id) && (
<Form.Item <Form.Item
name="phone_number" name="phone_number"
label="Phone Number" label="Phone Number"
rules={[{required: true, message: "Please input Phone Number!"}]} rules={[
> { required: true, message: "Please input Phone Number!" },
<Input/> {
</Form.Item> pattern: /^(?:\d*)$/,
)} message: "Value should contain just number",
{((initialData.id && !initialData.isChangePassword) || },
!initialData.id) && ( {
<Form.Item pattern: /^[\d]{0,12}$/,
name="roleId" message: "Value should be less than 12 character",
label="Role" },
rules={[{required: true, message: "Please input role id!"}]} ]}
> >
<Select> <Input
{store.role.data.map((item) => ( onChange={(value) => {
<Option key={item.id} value={item.id}> setValue(value);
{item.name} }}
</Option> />
))} </Form.Item>
</Select> )}
</Form.Item> {((initialData.id && !initialData.isChangePassword) ||
)} !initialData.id) && (
</Form> <Form.Item
</Modal> name="roleId"
); label="Role"
rules={[{ required: true, message: "Please input role id!" }]}
>
<Select>
{store.role.data.map((item) => (
<Option key={item.id} value={item.id}>
{item.name}
</Option>
))}
</Select>
</Form.Item>
)}
</Form>
</Modal>
);
}; };

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

@ -175,7 +175,7 @@ export const Payback = observer(() => {
modalLoader.setLoading(true); modalLoader.setLoading(true);
try { try {
const response = await store.payback.confirmPayback(id, type); const response = await store.payback.confirmPayback(id, type);
console.log(response) console.log(response);
response.body.statusCode !== 201 && response.body.statusCode !== 200 response.body.statusCode !== 201 && response.body.statusCode !== 200
? message.error( ? message.error(
response?.body?.message || `Failed ${capitalize(type)} Payback` response?.body?.message || `Failed ${capitalize(type)} Payback`
@ -288,7 +288,79 @@ export const Payback = observer(() => {
title={item.name} title={item.name}
description={ description={
<div style={{}}> <div style={{}}>
<Image src={item.picture} preview={false} /> <p>
<span>{item.userData_name}</span>
<br />
<small>Amount: {item.amount}</small>
<br />
{PAYBACK_STATUS[item.status] ===
PAYBACK_STATUS[0] ? (
<Space size="middle">
<Button
onClick={async () => {
Modal.confirm({
title: `Are you sure Accept this submission?`,
icon: <CheckOutlined />,
okText: "Accept",
cancelText: "Cancel",
okType: "primary",
onOk() {
handleAction(item.id, "accept");
},
onCancel() {
console.log("Cancel");
},
});
}}
icon={<CheckCircleOutlined />}
style={{
backgroundColor: "#1bb91d",
color: "#fff",
borderColor: "#1bb91d",
}}
>
Accept
</Button>
<Button
onClick={async () => {
Modal.confirm({
title: `Are you sure Reject this submission?`,
icon: <StopOutlined />,
okText: "Reject",
cancelText: "Cancel",
okType: "primary",
onOk() {
handleAction(item.id, "reject");
},
onCancel() {
console.log("Cancel");
},
});
}}
icon={<CloseOutlined />}
style={{
backgroundColor: "#ff1c1c",
color: "#fff",
borderColor: "#ff1c1c",
}}
>
Reject
</Button>
</Space>
) : (
<Tag
color={
PAYBACK_STATUS[item.status] ===
PAYBACK_STATUS[3]
? "cyan"
: "red"
}
style={{ color: "#4F566B" }}
>
{PAYBACK_STATUS[item.status]}
</Tag>
)}
</p>
</div> </div>
} }
/> />
@ -299,7 +371,10 @@ export const Payback = observer(() => {
margin: 0, margin: 0,
}} }}
> >
{item.amount} <Image
src={`${appConfig.apiUrl}/config/image/${item.image_prove}`}
style={{ width: "10vw" }}
/>
</p> </p>
</div> </div>
</List.Item> </List.Item>