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

Config Menu

Browse Source
This commit is contained in:
ajat91.sudrajat 2021-12-23 11:53:07 +07:00
parent 6b22d2e264
commit ce2d2e1072
16 changed files with 572 additions and 507 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/component/ProductComponent.js
View File

@ -1,4 +1,4 @@
import React, {useContext, useState} from "react"; import React, { useContext, useState } from "react";
import { import {
Button, Button,
Col, Col,
@ -15,19 +15,19 @@ import {
Tag, Tag,
Typography, Typography,
} from "antd"; } from "antd";
import {observer} from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import {ExclamationCircleOutlined} from "@ant-design/icons"; import { ExclamationCircleOutlined } from "@ant-design/icons";
import {useHistory} from "react-router-dom"; import { useHistory } from "react-router-dom";
import {useStore} from "../utils/useStore"; import { useStore } from "../utils/useStore";
import {LINKS} from "../routes/app"; import { LINKS } from "../routes/app";
import {ModalLoaderContext} from "../utils/modal"; import { ModalLoaderContext } from "../utils/modal";
const {Title, Text} = Typography; const { Title, Text } = Typography;
export const ProductComponent = observer((props) => { export const ProductComponent = observer((props) => {
const store = useStore(); const store = useStore();
const [form] = Form.useForm(); const [form] = Form.useForm();
const {Option} = Select; const { Option } = Select;
const history = useHistory(); const history = useHistory();
const [idData, setIdData] = useState(""); const [idData, setIdData] = useState("");
const [filterSupplier, setFilterSupplier] = useState([]); const [filterSupplier, setFilterSupplier] = useState([]);
@ -92,6 +92,11 @@ export const ProductComponent = observer((props) => {
// </Tag> // </Tag>
// ), // ),
// }, // },
{
title: "Supplier",
dataIndex: "supplier",
key: "supplier",
},
{ {
title: "Tersedia", title: "Tersedia",
dataIndex: "tersedia", dataIndex: "tersedia",
@ -120,7 +125,7 @@ export const ProductComponent = observer((props) => {
), ),
}, },
]; ];
if (store.authentication.userData.role !== "Admin") columns.pop();
const deleteData = async (id) => { const deleteData = async (id) => {
try { try {
console.log(id); console.log(id);
@ -289,7 +294,7 @@ export const ProductComponent = observer((props) => {
pageSize: store.product.pageSize, pageSize: store.product.pageSize,
total: store.product.total_data, total: store.product.total_data,
current: store.product.page + 1, current: store.product.page + 1,
style: {marginBottom: "1rem", marginRight: "1rem"}, style: { marginBottom: "1rem", marginRight: "1rem" },
}} }}
dataSource={store.product.data} dataSource={store.product.data}
style={{ padding: 0 }} style={{ padding: 0 }}

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

@ -52,14 +52,14 @@ export const MenuList = observer((props) => {
<Menu.Item key="home"> <Menu.Item key="home">
<Link to={LINKS.HOME}> <Link to={LINKS.HOME}>
<HomeOutlined /> <HomeOutlined />
<span>Home</span> <span>Beranda</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
{store.authentication.userData.role !== "Retail" && ( {store.authentication.userData.role !== "Retail" && (
<Menu.Item key="membership"> <Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}> <Link to={LINKS.MEMBERSHIP}>
<FileProtectOutlined /> <FileProtectOutlined />
<span>Membership</span> <span>Keanggotaan</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
@ -68,13 +68,13 @@ export const MenuList = observer((props) => {
<Menu.Item key="partner"> <Menu.Item key="partner">
<Link to={LINKS.PARTNER}> <Link to={LINKS.PARTNER}>
<ProjectOutlined /> <ProjectOutlined />
<span>Partner</span> <span>Rekanan</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="commision"> <Menu.Item key="commision">
<Link to={LINKS.COMMISSION}> <Link to={LINKS.COMMISSION}>
<MoneyCollectOutlined /> <MoneyCollectOutlined />
<span>Commission</span> <span>Komisi</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="supplier"> <Menu.Item key="supplier">
@ -90,14 +90,14 @@ export const MenuList = observer((props) => {
<Menu.Item key="product"> <Menu.Item key="product">
<Link to={LINKS.PRODUCT}> <Link to={LINKS.PRODUCT}>
<DatabaseOutlined /> <DatabaseOutlined />
<span>Product</span> <span>Produk</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
{store.authentication.userData.role === "Admin" && ( {store.authentication.userData.role === "Admin" && (
<Menu.Item key="category"> <Menu.Item key="category">
<Link to={LINKS.CATEGORY}> <Link to={LINKS.CATEGORY}>
<FileAddOutlined /> <FileAddOutlined />
<span>Category</span> <span>Kategori</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
@ -105,7 +105,7 @@ export const MenuList = observer((props) => {
<Menu.Item key="sub-category"> <Menu.Item key="sub-category">
<Link to={LINKS.SUBCATEGORY}> <Link to={LINKS.SUBCATEGORY}>
<FileSyncOutlined /> <FileSyncOutlined />
<span>Sub Category</span> <span>Sub Kategori</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
@ -115,7 +115,7 @@ export const MenuList = observer((props) => {
<Menu.Item key="retail"> <Menu.Item key="retail">
<Link to={LINKS.PRODUCT}> <Link to={LINKS.PRODUCT}>
<DatabaseOutlined /> <DatabaseOutlined />
<span>Product</span> <span>Produk</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
@ -123,24 +123,24 @@ export const MenuList = observer((props) => {
<Menu.Item key="transaction"> <Menu.Item key="transaction">
<Link to={LINKS.TRANSACTION}> <Link to={LINKS.TRANSACTION}>
<ShoppingCartOutlined /> <ShoppingCartOutlined />
<span>Transaction</span> <span>Transaksi</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
<SubMenu key="payback-main" icon={<ProfileOutlined />} title="Payback"> <SubMenu key="payback-main" icon={<ProfileOutlined />} title="Pembayaran">
{store.authentication.userData.role !== "Retail" && ( {store.authentication.userData.role !== "Retail" && (
<Menu.Item key="payback-to-user"> <Menu.Item key="payback-to-user">
<Link to={LINKS.PAYBACK}> <Link to={LINKS.PAYBACK}>
<PayCircleOutlined/> <FileProtectOutlined/>
<span>Confirmation</span> <span>konfirmasi</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
{store.authentication.userData.role !== "Admin" && ( {store.authentication.userData.role !== "Admin" && (
<Menu.Item key="payback-from-user"> <Menu.Item key="payback-from-user">
<Link to={LINKS.PAYBACK_CREATED}> <Link to={LINKS.PAYBACK_CREATED}>
<AlipayOutlined/> <FileProtectOutlined/>
<span>Created</span> <span>Buat Pembayaran</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}

4
src/pages/Config/Partner.js
View File

@ -56,14 +56,14 @@ export const Partner = observer(() => {
</Button> */} </Button> */}
</Col> </Col>
<Col span={12} style={{textAlign: "right"}}> <Col span={12} style={{textAlign: "right"}}>
<Search {/* <Search
placeholder="input search text" placeholder="input search text"
style={{ style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200, width: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10, marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} }}
/> /> */}
<Button onClick={() => store.partner.visibleModalPartner = true}> <Button onClick={() => store.partner.visibleModalPartner = true}>
<PlusSquareOutlined/> New <PlusSquareOutlined/> New
</Button> </Button>

4
src/pages/Config/Supplier.js
View File

@ -71,7 +71,7 @@ export const Supplier = observer(() => {
</Button> </Button>
</Col> */} </Col> */}
<Col span={24} style={{ textAlign: "right" }}> <Col span={24} style={{ textAlign: "right" }}>
<Search {/* <Search
placeholder="input search text" placeholder="input search text"
style={{ style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200, width: store.ui.mediaQuery.isMobile ? 160 : 200,
@ -79,7 +79,7 @@ export const Supplier = observer(() => {
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} }}
onSearch={(value) => console.log(value)} onSearch={(value) => console.log(value)}
/> /> */}
<Button <Button
onClick={() => (store.supplier.visibleModalSupplier = true)} onClick={() => (store.supplier.visibleModalSupplier = true)}
> >

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

@ -1,20 +1,67 @@
import React, {useContext, useEffect} from "react"; import React, { useContext, useEffect, useState } from "react";
import {Button, Card, Col, Row, 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"; Row,
import {FilterOutlined} from "@ant-design/icons"; Table,
import {format, parseISO} from "date-fns"; Typography,
import {ModalLoaderContext} from "../../utils/modal"; Tag,
import {useParams} from "react-router-dom"; Space,
message,
} from "antd";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { FilterOutlined, DownloadOutlined } from "@ant-design/icons";
import { format, parseISO } from "date-fns";
import { ModalLoaderContext } from "../../utils/modal";
import { useParams } from "react-router-dom";
const {Title, Text} = Typography; const { Title, Text } = Typography;
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 [isVisibleTopUpModal, setIsVisibleTopUpModal] = useState(false);
const [destination, setDestination] = useState(null);
const [initialData, setInitialData] = useState({});
const [confirmLoading, setConfirmLoading] = useState(false);
//console.log(id)
useEffect(() => {
(async () => {
modalLoader.setLoading(true);
await Promise.allSettled([
store.transaction.getDataHistoryTopUp(id),
store.membership.getDetail(id),
]);
modalLoader.setLoading(false);
})();
}, []);
const columns = [
{
title: "Amount",
dataIndex: "amount",
key: "amount",
},
{
title: "Transaction Date",
dataIndex: "transaction_date",
key: "transaction_date",
render: (text, record) => {
return (
<Text>
{format(parseISO(record.transaction_date), "dd MMMM yyyy ")}
</Text>
);
},
},
];
const routeData = [ const routeData = [
{ {
@ -23,129 +70,96 @@ export const DetailUser = observer(() => {
}, },
{ {
route: LINKS.USER_DETAIL, route: LINKS.USER_DETAIL,
name: <span style={{fontWeight: 'bold'}}>Detail User</span>, name: <span style={{ fontWeight: "bold" }}>Detail User</span>,
}, },
]; ];
console.log(id)
useEffect(() => {
(async () => {
modalLoader.setLoading(true);
await Promise.allSettled([
store.authentication.getProfile(),
store.transaction.getDataHistoryTopUp(id),
store.transaction.getDataHistoryTransaction(),
]);
modalLoader.setLoading(false);
})()
}, []);
const columns = [
{
title: 'Markup Price',
dataIndex: 'mark_up_price',
key: 'mark_up_price',
width: '20%',
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: '50%',
},
{
title: 'Transaction Date',
dataIndex: 'created_at',
key: 'created_at',
render: (text, record) => {
return (
<Text>{format(parseISO(record.created_at), 'dd MMMM yyyy HH:mm')}</Text>
)
},
},
]
const styleSaldoTitle = store.ui.mediaQuery.isDesktop ? {
display: "flex",
justifyContent: "center"
} : {fontSize: "0.75rem"};
const styleSaldoContent = store.ui.mediaQuery.isDesktop ? {
fontSize: '1.25rem',
display: "flex",
justifyContent: "center"
} : null;
return ( return (
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/> <BreadcumbComponent data={routeData} />
<Card> <Card>
<Title strong>Detail User</Title> <Title strong>Detail User</Title>
<Row style={{marginBottom: 20}}> <Row style={{ marginBottom: 20 }}>
<Col lg={12} xs={24}> <Col lg={12} xs={24}>
<Row> <Row>
<Col span={12}> <Col span={12}>
<Text strong>Name</Text> <Text strong>Name</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text>{store.transaction.data.name}</Text> <Text>{store.membership.data.userDetail?.name}</Text>
</Col>
<Col span={12}>
<Text strong>Username</Text>
</Col>
<Col span={12}>
<Text>
{store.membership.data.superior?.username}
</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text strong>Role</Text> <Text strong>Role</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text>{store.authentication.profileData?.userDetail?.phone_number}</Text> <Text>
{store.membership.data.roles?.name}
</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text strong>Saldo Supplier</Text> <Text strong>Phone Number</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text>{store.authentication.profileData?.username}</Text> <Text>{store.membership.data.userDetail?.phone_number}</Text>
</Col>
<Col span={12}>
<Text strong>Saldo System</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData.roles?.name}</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text strong>Status</Text> <Text strong>Status</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text>{store.authentication.profileData.superior?.username}</Text> <Text>
{store.authentication.profileData.superior?.isActive === true ? "Inaktif": "Aktif"}
</Text>
</Col> </Col>
</Row> </Row>
</Col> </Col>
<Col lg={12} xs={24}> {/* <Col lg={12} xs={24}>
<Row justify={"center"}> <Row justify={"center"}>
<Col lg={24} xs={12}> <Col lg={24} xs={12}>
<Title strong level={3} style={styleSaldoTitle}>Saldo</Title> <Title strong level={3} style={styleSaldoTitle}>
Saldo
</Title>
</Col> </Col>
<Col lg={24} xs={12}> <Col lg={24} xs={12}>
<Text style={styleSaldoContent}>{store.authentication.profileData?.wallet}</Text> <Text style={styleSaldoContent}>
{store.transaction?.data.amount}
</Text>
</Col> </Col>
</Row> </Row>
</Col> </Col> */}
</Row> </Row>
<Row> <Row>
<Col span={24}> <Col span={24}>
<div> <div>
<Title strong level={3}>History Top Up</Title> <Title strong level={3}>
History Top Up
</Title>
<Button style={{marginBottom: '1rem'}} onClick={() => { <Button
console.log('clicked filter') style={{ marginBottom: "1rem" }}
}}> onClick={() => {
<FilterOutlined/> console.log("clicked filter");
}}
>
<FilterOutlined />
Filter Filter
</Button> </Button>
<Table <Table
columns={columns} columns={columns}
dataSource={store.transaction.dataHistoryTransaction} dataSource={store.transaction.dataHistoryTopUp}
bordered bordered
/> />
</div> </div>
</Col> </Col>
</Row> </Row>
<div/> <div />
</Card> </Card>
</div> </div>
) );
}); });

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

@ -1,32 +1,32 @@
import React, {useContext, useEffect, useState} from "react"; import React, { useContext, useEffect, useState } from "react";
import { import {
Button, Button,
Card, Card,
Col, Col,
Divider, Divider,
Form, Form,
Input, Input,
InputNumber, InputNumber,
List, List,
message, message,
Modal, Modal,
Row, Row,
Select, Select,
Space, Space,
Table, Table,
Tag, Tag,
} from "antd"; } from "antd";
import {useStore} from "../../utils/useStore"; import { useStore } from "../../utils/useStore";
import {observer} from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import {DownloadOutlined, PlusSquareOutlined} from "@ant-design/icons"; import { DownloadOutlined, PlusSquareOutlined } from "@ant-design/icons";
import {MembershipModal} from "./MembershipModal"; import { MembershipModal } from "./MembershipModal";
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app"; import { LINKS } from "../../routes/app";
import {useHistory} from "react-router-dom"; import { useHistory } from "react-router-dom";
import {ModalLoaderContext} from "../../utils/modal"; import { ModalLoaderContext } from "../../utils/modal";
const {Search} = Input; const { Search } = Input;
const {Option} = Select; const { Option } = Select;
export const Membership = observer(() => { export const Membership = observer(() => {
const history = useHistory(); const history = useHistory();
const [form] = Form.useForm(); const [form] = Form.useForm();
@ -71,14 +71,14 @@ export const Membership = observer(() => {
const status = isActive ? "inactive" : "active"; const status = isActive ? "inactive" : "active";
const status2 = isActive ? "Inactivating" : "Activating"; const status2 = isActive ? "Inactivating" : "Activating";
try { try {
modalLoader.setLoading(true); modalLoader.setLoading(true);
const response = await store.membership.changeStatus(id, status); const response = await store.membership.changeStatus(id, status);
modalLoader.setLoading(false); modalLoader.setLoading(false);
response?.body?.statusCode === 201 response?.body?.statusCode === 201
? message.success(`Success ${status2} Membership`) ? message.success(`Success ${status2} Membership`)
: message.error(`Failed ${status2} Membership`); : message.error(`Failed ${status2} Membership`);
await getData(); await getData();
} catch (err) { } catch (err) {
modalLoader.setLoading(false); modalLoader.setLoading(false);
message.error(`Failed ${status2} Membership`); message.error(`Failed ${status2} Membership`);
@ -93,26 +93,26 @@ export const Membership = observer(() => {
const handleSubmitTransaction = async (data) => { const handleSubmitTransaction = async (data) => {
modalLoader.setLoading(true); modalLoader.setLoading(true);
try { try {
data.destination = destination; data.destination = destination;
if (data.amount) { if (data.amount) {
data = { data = {
...data, ...data,
amount: Number(data.amount), amount: Number(data.amount),
}; };
} }
let response = null; let response = null;
(await store.authentication.userData.role) === "Admin" (await store.authentication.userData.role) === "Admin"
? (response = await store.transaction.distributeAdmin(data)) ? (response = await store.transaction.distributeAdmin(data))
: (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("Success Top Up")
: message.error("Failed Top Up"); : message.error("Failed Top Up");
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);
@ -142,30 +142,30 @@ export const Membership = observer(() => {
key: ["coa", "amount"], key: ["coa", "amount"],
width: "20%", width: "20%",
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: "Status",
dataIndex: "isActive",
key: "isActive",
render: (text, record) => (
<Tag
color={record?.isActive === true ? "processing" : "#E3E8EE"}
style={{ color: "#4F566B" }}
>
{record?.isActive === true ? " ACTIVE" : "INACTIVE"}
</Tag>
),
}, },
// {
// title: "Status",
// dataIndex: "isActive",
// key: "isActive",
// render: (text, record) => (
// <Tag
// color={record?.isActive === true ? "processing" : "#E3E8EE"}
// style={{ color: "#4F566B" }}
// >
// {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
// </Tag>
// ),
// },
{ {
title: "Action", title: "Action",
key: "action", key: "action",
render: (text, record) => ( render: (text, record) => (
<Space size="middle"> <Space size="middle">
{store.authentication.userData.role === "Admin" && <Button {/* {store.authentication.userData.role === "Admin" && <Button
type={record?.isActive === true ? "danger" : "primary"} type={record?.isActive === true ? "danger" : "primary"}
onClick={() => changeStatus(record?.id, record?.isActive)} onClick={() => changeStatus(record?.id, record?.isActive)}
> >
@ -209,12 +209,21 @@ export const Membership = observer(() => {
}} }}
> >
Ganti Password Ganti Password
</Button>} </Button>} */}
<Button
onClick={() => {
setDestination(record?.id);
console.log(record?.id);
setIsVisibleTopUpModal(true);
}}
>
<DownloadOutlined /> Top Up Saldo
</Button>
<Button <Button
onClick={async () => { onClick={async () => {
await store.transaction.getDataHistoryTopUp(record.id) await store.transaction.getDataHistoryTopUp(record.id);
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);
}} }}
> >
Detail Detail
@ -264,9 +273,9 @@ export const Membership = observer(() => {
setConfirmLoading(true); setConfirmLoading(true);
modalLoader.setLoading(true); modalLoader.setLoading(true);
try { try {
await store.membership.create(data); await store.membership.create(data);
message.success("Success Add New Member"); message.success("Success Add New Member");
await getData(); await getData();
} catch (e) { } catch (e) {
console.log(e, "apa errornya"); console.log(e, "apa errornya");
message.error("Failed Add Member"); message.error("Failed Add Member");
@ -339,17 +348,17 @@ export const Membership = observer(() => {
itemLayout="horizontal" itemLayout="horizontal"
position={"top"} position={"top"}
pagination={{ pagination={{
onChange: async (page) => { onChange: async (page) => {
store.membership.pageSize = page.pageSize; store.membership.pageSize = page.pageSize;
store.membership.page = page.current - 1; store.membership.page = page.current - 1;
modalLoader.setLoading(true); modalLoader.setLoading(true);
await getData(); await getData();
modalLoader.setLoading(false); modalLoader.setLoading(false);
}, },
pageSize: store.membership.pageSize, pageSize: store.membership.pageSize,
total: store.membership.total_data, total: store.membership.total_data,
current: store.membership.page + 1, current: store.membership.page + 1,
style: {marginBottom: "1rem", marginRight: "1rem"}, style: { marginBottom: "1rem", marginRight: "1rem" },
}} }}
dataSource={store.membership.data} dataSource={store.membership.data}
style={{ padding: 0 }} style={{ padding: 0 }}

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

@ -1,271 +1,295 @@
import React, {useContext, useEffect} from "react"; import React, { useContext, useEffect } from "react";
import {Button, Card, Col, Divider, Image, Input, List, message, Modal, Row, Space, Table, Tag,} from "antd"; import {
import {useStore} from "../../utils/useStore"; Button,
import {observer} from "mobx-react-lite"; Card,
import {CheckCircleOutlined, CheckOutlined, CloseOutlined, FilterOutlined, StopOutlined,} from "@ant-design/icons"; Col,
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; Divider,
import {LINKS} from "../../routes/app"; Image,
import {ModalLoaderContext} from "../../utils/modal"; Input,
import {appConfig} from "../../config/app"; List,
import {capitalize} from "lodash"; message,
import {PAYBACK_STATUS} from "../../constants/payback"; Modal,
Row,
Space,
Table,
Tag,
} from "antd";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import {
CheckCircleOutlined,
CheckOutlined,
CloseOutlined,
FilterOutlined,
StopOutlined,
} from "@ant-design/icons";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import { ModalLoaderContext } from "../../utils/modal";
import { appConfig } from "../../config/app";
import { capitalize } from "lodash";
import { PAYBACK_STATUS } from "../../constants/payback";
const {Search} = Input; const { Search } = Input;
export const Payback = observer(() => { export const Payback = observer(() => {
const store = useStore(); const store = useStore();
const modalLoader = useContext(ModalLoaderContext); const modalLoader = useContext(ModalLoaderContext);
useEffect(() => { useEffect(() => {
const init = async () => { const init = async () => {
try { try {
modalLoader.setLoading(true); modalLoader.setLoading(true);
await store.payback.getDataConfirmation(); await store.payback.getDataConfirmation();
modalLoader.setLoading(false); modalLoader.setLoading(false);
} catch (e) { } catch (e) {
modalLoader.setLoading(false); modalLoader.setLoading(false);
if (e.response?.body?.message) { if (e.response?.body?.message) {
message.error(e.response.body.message); message.error(e.response.body.message);
return; return;
} }
message.error(e.message); message.error(e.message);
}
};
init();
}, []);
const columns = [
{
title: "Name",
dataIndex: "userData_name",
key: "userData_name",
},
{
title: "Picture",
dataIndex: "image_prove",
key: "image_prove",
render: (text, record) => (
<Image
src={`${appConfig.apiUrl}/config/image/${text}`}
style={{ width: "5vw" }}
alt={record.id}
/>
),
},
{
title: "Amount",
dataIndex: "amount",
key: "amount",
width: "20%",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
title: "Action",
dataIndex: "amount",
key: "action",
width: "10%",
render: (text, record) =>
PAYBACK_STATUS[record.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(record.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(record.id, "reject");
},
onCancel() {
console.log("Cancel");
},
});
}}
icon={<CloseOutlined />}
style={{
backgroundColor: "#ff1c1c",
color: "#fff",
borderColor: "#ff1c1c",
}}
>
Reject
</Button>
</Space>
) : (
<Tag
color={
PAYBACK_STATUS[record.status] === PAYBACK_STATUS[3]
? "cyan"
: "red"
} }
}; style={{ color: "#4F566B" }}
>
init(); {PAYBACK_STATUS[record.status]}
}, []); </Tag>
),
const columns = [ },
{
title: "Name",
dataIndex: "userData_name",
key: "userData_name",
},
{
title: "Picture",
dataIndex: "image_prove",
key: "image_prove",
render: (text, record) => (
<Image
src={`${appConfig.apiUrl}/config/image/${text}`}
style={{width: '5vw'}}
alt={record.id}
/>
),
},
{
title: "Amount",
dataIndex: "amount",
key: "amount",
width: '20%',
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
title: "Action",
dataIndex: "amount",
key: "action",
width: '10%',
render: (text, record) => (
PAYBACK_STATUS[record.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(record.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(record.id, "reject");
},
onCancel() {
console.log("Cancel");
},
})
}}
icon={<CloseOutlined/>}
style={{
backgroundColor: "#ff1c1c",
color: "#fff",
borderColor: "#ff1c1c",
}}
>
Reject
</Button>
</Space> :
<Tag
color={PAYBACK_STATUS[record.status] === PAYBACK_STATUS[3] ? "cyan" : "red"}
style={{color: "#4F566B"}}
>
{PAYBACK_STATUS[record.status]}
</Tag>
),
},
]; ];
if (store.authentication.userData.role === "Retail") columns.pop(); if (store.authentication.userData.role === "Retail") columns.pop();
const routeData = [ const routeData = [
{ {
route: LINKS.HOME, route: LINKS.HOME,
name: "Home", name: "Home",
}, },
{ {
route: LINKS.PAYBACK, route: LINKS.PAYBACK,
name: <span style={{fontWeight: "bold"}}>Payback Confirmation</span>, name: <span style={{ fontWeight: "bold" }}>Payback Confirmation</span>,
}, },
]; ];
const handleAction = async (id, type) => { const handleAction = async (id, type) => {
modalLoader.setLoading(true); modalLoader.setLoading(true);
try { try {
const response = await store.payback.confirmPayback(id, type); const response = await store.payback.confirmPayback(id, type);
if (response.body.status !== 201) { if (response.body.status !== 201) {
message.error(`Failed ${capitalize(type)} Payback`); message.error(`Failed ${capitalize(type)} Payback`);
} else { } else {
message.success(`Success ${capitalize(type)} Payback`); message.success(`Success ${capitalize(type)} Payback`);
} }
} catch (e) { } catch (e) {
console.error(e, "apa errornya"); console.error(e, "apa errornya");
message.error("Failed Handler Action Payback"); message.error("Failed Handler Action Payback");
} }
modalLoader.setLoading(false); modalLoader.setLoading(false);
}; };
return ( return (
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/> <BreadcumbComponent data={routeData} />
<Card> <Card>
<div> <div>
<Row style={{marginBottom: 20}}> <Row style={{ marginBottom: 20 }}>
<Col span={12}> <Col span={12}>
<Button> <Button>
<FilterOutlined/> <FilterOutlined />
Filter Filter
</Button> </Button>
</Col> </Col>
<Col span={12} style={{textAlign: "right"}}> <Col span={12} style={{ textAlign: "right" }}>
<Search {/* <Search
placeholder="input search text" placeholder="input search text"
style={{ style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200, width: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10, marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} }}
/> /> */}
</Col> </Col>
</Row> </Row>
{store.ui.mediaQuery.isDesktop && ( {store.ui.mediaQuery.isDesktop && (
<Table <Table
key="1" key="1"
hasEmpty hasEmpty
columns={columns} columns={columns}
dataSource={store.payback.dataConfirmation} dataSource={store.payback.dataConfirmation}
bordered bordered
pagination={{ pagination={{
pageSize: store.payback.pageSizeConfirmation, pageSize: store.payback.pageSizeConfirmation,
total: store.payback.totalDataConfirmation, total: store.payback.totalDataConfirmation,
current: store.payback.pageSizeConfirmation + 1, current: store.payback.pageSizeConfirmation + 1,
showSizeChanger: true, showSizeChanger: true,
simple: false simple: false,
}} }}
onChange={async (page) => { onChange={async (page) => {
let pageNumber = page.current; let pageNumber = page.current;
store.payback.pageSizeConfirmation = page.pageSize; store.payback.pageSizeConfirmation = page.pageSize;
store.payback.pageConfirmation = pageNumber - 1; store.payback.pageConfirmation = pageNumber - 1;
modalLoader.setLoading(true); modalLoader.setLoading(true);
await store.payback.getDataConfirmation(); await store.payback.getDataConfirmation();
modalLoader.setLoading(false); modalLoader.setLoading(false);
}} }}
/> />
)} )}
{store.ui.mediaQuery.isMobile && ( {store.ui.mediaQuery.isMobile && (
<List <List
itemLayout="horizontal" itemLayout="horizontal"
position={"top"} position={"top"}
pagination={{ pagination={{
onChange: async (page) => { onChange: async (page) => {
store.payback.pageSizeConfirmation = page.pageSize; store.payback.pageSizeConfirmation = page.pageSize;
store.payback.pageConfirmation = page.current - 1; store.payback.pageConfirmation = page.current - 1;
modalLoader.setLoading(true); modalLoader.setLoading(true);
await store.payback.getDataConfirmation(); await store.payback.getDataConfirmation();
modalLoader.setLoading(false); modalLoader.setLoading(false);
}, },
pageSize: store.payback.pageSizeConfirmation, pageSize: store.payback.pageSizeConfirmation,
total: store.payback.totalDataConfirmation, total: store.payback.totalDataConfirmation,
current: store.payback.pageConfirmation + 1, current: store.payback.pageConfirmation + 1,
style: {marginBottom: "1rem", marginRight: "1rem"}, style: { marginBottom: "1rem", marginRight: "1rem" },
}} }}
dataSource={store.payback.dataConfirmation} dataSource={store.payback.dataConfirmation}
style={{padding: 0}} style={{ padding: 0 }}
renderItem={(item) => { renderItem={(item) => {
return ( return (
<div> <div>
<List.Item <List.Item
key={item.id} key={item.id}
style={{ style={{
backgroundColor: "#ffffff", backgroundColor: "#ffffff",
paddingTop: 0, paddingTop: 0,
paddingBottom: 0, paddingBottom: 0,
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
}} }}
> >
<List.Item.Meta <List.Item.Meta
className={["cariparkir-container"].join(" ")} className={["cariparkir-container"].join(" ")}
title={item.name} title={item.name}
description={ description={
<div style={{}}> <div style={{}}>
<Image src={item.picture} preview={false}/> <Image src={item.picture} preview={false} />
</div> </div>
} }
/> />
<div style={{marginRight: 16}}> <div style={{ marginRight: 16 }}>
<p <p
style={{ style={{
fontSize: 9, fontSize: 9,
margin: 0, margin: 0,
}} }}
> >
{item.amount} {item.amount}
</p> </p>
</div> </div>
</List.Item> </List.Item>
<Divider plain style={{margin: 0}}/> <Divider plain style={{ margin: 0 }} />
</div> </div>
); );
}} }}

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

@ -101,14 +101,14 @@ export const PaybackCreated = observer(() => {
</Button> </Button>
</Col> </Col>
<Col span={12} style={{textAlign: "right"}}> <Col span={12} style={{textAlign: "right"}}>
<Search {/* <Search
placeholder="input search text" placeholder="input search text"
style={{ style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200, width: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10, marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} }}
/> /> */}
{store.authentication.userData.role !== "Admin" && ( {store.authentication.userData.role !== "Admin" && (
<Button <Button
onClick={() => { onClick={() => {

4
src/pages/Product/Category.js
View File

@ -57,14 +57,14 @@ export const Category = observer(() => {
</Button> </Button>
</Col> </Col>
<Col span={12} style={{ textAlign: "right" }}> <Col span={12} style={{ textAlign: "right" }}>
<Search {/* <Search
placeholder="input search text" placeholder="input search text"
style={{ style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200, width: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10, marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} }}
/> /> */}
<Button <Button
onClick={() => (store.category.visibleModalCategory = true)} onClick={() => (store.category.visibleModalCategory = true)}
> >

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

@ -57,34 +57,20 @@ export const Product = observer(() => {
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} /> <BreadcumbComponent data={routeData} />
<Card> <Card>
<Row style={{ marginBottom: 20 }}> {store.authentication.userData.role !== "Admin" && (
<Col span={12}> <div>
<Button <Row style={{ marginBottom: 20 }}>
onClick={() => { <Col span={12}>
store.product.visibleModalFilterProduct = true; <Button
}} onClick={() => {
> store.product.visibleModalFilterProduct = true;
<FilterOutlined /> }}
Filter >
</Button> <FilterOutlined />
</Col> Filter
<Col span={12}> </Button>
<div </Col>
style={{ <Col span={12}>
display: store.ui.mediaQuery.isMobile ? "" : "flex",
justifyContent: "flex-end",
textAlign: "right",
}}
>
<Search
placeholder="input search text"
style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}}
/>
{store.authentication.userData.role === "Admin" && (
<div <div
style={{ style={{
display: store.ui.mediaQuery.isMobile ? "" : "flex", display: store.ui.mediaQuery.isMobile ? "" : "flex",
@ -92,28 +78,45 @@ export const Product = observer(() => {
textAlign: "right", textAlign: "right",
}} }}
> >
<Upload> {/* <Search
<Button placeholder="input search text"
disabled={store.product.uploadBtnProduct} style={{
style={{ width: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10, marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10, marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} }}
icon={<UploadOutlined />} /> */}
>
Upload Product <div
</Button> style={{
</Upload> display: store.ui.mediaQuery.isMobile ? "" : "flex",
<Button justifyContent: "flex-end",
onClick={() => (store.product.visibleModalProduct = true)} textAlign: "right",
}}
> >
<PlusSquareOutlined /> New <Upload>
</Button> <Button
disabled={store.product.uploadBtnProduct}
style={{
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
}}
icon={<UploadOutlined />}
>
Upload Product
</Button>
</Upload>
{/* <Button
onClick={() => (store.product.visibleModalProduct = true)}
>
<PlusSquareOutlined /> New
</Button> */}
</div>
</div> </div>
)} </Col>
</div> </Row>
</Col> </div>
</Row> )}
<ProductComponent /> <ProductComponent />
</Card> </Card>
</div> </div>

4
src/pages/Product/Subcategory.js
View File

@ -61,14 +61,14 @@ export const Subcategory = observer(() => {
</Button> */} </Button> */}
</Col> </Col>
<Col span={12} style={{textAlign: "right"}}> <Col span={12} style={{textAlign: "right"}}>
<Search {/* <Search
placeholder="input search text" placeholder="input search text"
style={{ style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200, width: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10, marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} }}
/> /> */}
<Button <Button
onClick={() => (store.subcategory.visibleModalSubcategory = true)} onClick={() => (store.subcategory.visibleModalSubcategory = true)}
> >

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

@ -60,7 +60,7 @@ export const Profile = observer(() => {
key: 'created_at', key: 'created_at',
render: (text, record) => { render: (text, record) => {
return ( return (
<Text>{format(parseISO(record.created_at), 'dd MMMM yyyy HH:mm')}</Text> <Text>{format(parseISO(record.created_at), 'mm:HH dd MM YYYY')}</Text>
) )
}, },
}, },

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

@ -117,7 +117,7 @@ export const Product = observer(() => {
}, },
}); });
}} }}
style={{cursor: "pointer"}} style={{cursor: "pointer",marginLeft:10}}
> >
<span style={{color: "black"}}>{item.product_name}</span> <span style={{color: "black"}}>{item.product_name}</span>
<br/> <br/>
@ -132,13 +132,13 @@ export const Product = observer(() => {
))} ))}
</Row> </Row>
)} )}
{store.transaction.data.length !== 0 && ( {/* {store.transaction.data.length !== 0 && (
<Col style={{textAlign: "right", marginTop: "1em"}}> <Col style={{textAlign: "right", marginTop: "1em"}}>
<Button style={{backgroundColor: "#2D9CDB", color: "white"}}> <Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
Beli Sekarang Beli Sekarang
</Button> </Button>
</Col> </Col>
)} )} */}
</div> </div>
); );
}); });

2
src/routes/app.js
View File

@ -29,7 +29,7 @@ export const LINKS = {
PAYBACK: "/app/payback", PAYBACK: "/app/payback",
PAYBACK_CREATED: "/app/payback-created", PAYBACK_CREATED: "/app/payback-created",
SUBCATEGORY: "/app/subcategory", SUBCATEGORY: "/app/subcategory",
USER_DETAIL: "/app/user-detail", USER_DETAIL: "/app/user-detail/:id",
PRODUCT_DETAIL: "/app/product-detail", PRODUCT_DETAIL: "/app/product-detail",
}; };

10
src/store/membership.js
View File

@ -28,6 +28,16 @@ export class Membership {
console.error(e); console.error(e);
} }
} }
async getDetail(id) {
try {
const response = await http.get(`/users/`+id);
console.log(response,'Data Detail')
this.data = response.body.data
this.total_data = response?.body?.count ?? 0
} catch (e) {
console.error(e);
}
}
async getDataBySuperior() { async getDataBySuperior() {
try { try {

2
src/store/transaction.js
View File

@ -84,7 +84,7 @@ export class Transaction {
try { try {
console.log("Top up") console.log("Top up")
const response = await http.get(`/transaction/history-deposit?page=${this.pageHistoryTopUp}&user-destination=${id}`); const response = await http.get(`/transaction/history-deposit?page=${this.pageHistoryTopUp}&user-destination=${id}`);
console.log(response,"data")
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) {