From 9720ed91ce9d77d7f637228d2acb1879bb84ddec Mon Sep 17 00:00:00 2001 From: "ajat91.sudrajat" Date: Thu, 20 Jan 2022 11:20:31 +0700 Subject: [PATCH] Bug Fixing PPOB --- src/pages/App/DesktopLayout.js | 26 +- src/pages/App/MenuList.js | 28 +- src/pages/Membership/Konfirmasi.js | 528 +++++++++++++++++++++++++++++ src/routes/app.js | 6 + 4 files changed, 575 insertions(+), 13 deletions(-) create mode 100644 src/pages/Membership/Konfirmasi.js diff --git a/src/pages/App/DesktopLayout.js b/src/pages/App/DesktopLayout.js index 224c1aa..610ad4c 100644 --- a/src/pages/App/DesktopLayout.js +++ b/src/pages/App/DesktopLayout.js @@ -23,6 +23,8 @@ import { PieChartOutlined, AppstoreOutlined, DollarCircleOutlined, + UsergroupAddOutlined, + UnorderedListOutlined } from "@ant-design/icons"; import { AppRoute, LINKS } from "../../routes/app"; import { useStore } from "../../utils/useStore"; @@ -143,12 +145,24 @@ export const DesktopLayout = observer(() => { )} {store.authentication.userData.role === "Admin" && ( - - - - Keanggotaan - - + } + title="Keanggotaan" + > + + + + List Anggota + + + + + + Konfirmasi Retail + + + )} {store.authentication.userData.role === "Sales" && ( diff --git a/src/pages/App/MenuList.js b/src/pages/App/MenuList.js index b6e21dd..beee72b 100644 --- a/src/pages/App/MenuList.js +++ b/src/pages/App/MenuList.js @@ -20,7 +20,9 @@ import { IdcardOutlined, AppstoreAddOutlined, DollarCircleOutlined, - PieChartOutlined + PieChartOutlined, + UsergroupAddOutlined, + UnorderedListOutlined, } from "@ant-design/icons"; import { observer } from "mobx-react-lite"; import { useStore } from "../../utils/useStore"; @@ -70,12 +72,24 @@ export const MenuList = observer((props) => { )} {store.authentication.userData.role === "Admin" && ( - - - - Keanggotaan - - + } + title="Keanggotaan" + > + + + + List Anggota + + + + + + Konfirm Retail + + + )} {store.authentication.userData.role === "Supervisor" && ( diff --git a/src/pages/Membership/Konfirmasi.js b/src/pages/Membership/Konfirmasi.js new file mode 100644 index 0000000..528431a --- /dev/null +++ b/src/pages/Membership/Konfirmasi.js @@ -0,0 +1,528 @@ +import React, { useContext, useEffect, useState } from "react"; +import { + Button, + Card, + Col, + Divider, + Image, + Input, + List, + message, + Modal, + Row, + Space, + Table, + Tag, + Select, + Typography, + DatePicker, + Form, +} 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"; +import moment from "moment"; + +export const Konfirmasi = observer(() => { + const { Option } = Select; + const { Title } = Typography; + const [form] = Form.useForm(); + const store = useStore(); + const modalLoader = useContext(ModalLoaderContext); + const [filterMembership, setFilterMembership] = useState([]); + const [filterSubCategories, setFilterSubCategories] = useState([]); + + useEffect(() => { + const init = async () => { + try { + modalLoader.setLoading(true); + await store.membership.getData(); + await store.payback.getDataConfirmation(); + modalLoader.setLoading(false); + } catch (e) { + modalLoader.setLoading(false); + if (e.response?.body?.message) { + message.error(e.response.body.message); + return; + } + 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) => ( + {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] ? ( + + + + + ) : ( + + {PAYBACK_STATUS[record.status]} + + ), + }, + ]; + + if (store.authentication.userData.role === "Retail") columns.pop(); + + const routeData = [ + { + route: LINKS.HOME, + name: "Beranda", + }, + { + route: LINKS.KONFIRMASI, + name: Konfirmasi Retail, + }, + ]; + + const dataRoute = [ + { + route: LINKS.PAYBACK, + name: "Konfirmasi Pembayaran", + }, + ]; + + const handleAction = async (id, type) => { + modalLoader.setLoading(true); + try { + const response = await store.payback.confirmPayback(id, type); + console.log(response); + response.body.statusCode !== 201 && response.body.statusCode !== 200 + ? message.error( + response?.body?.message || `Failed ${capitalize(type)} Payback` + ) + : message.success( + response?.body?.message || `Success ${capitalize(type)} Payback` + ); + } catch (e) { + console.error(e, "apa errornya"); + message.error( + e.response?.body?.message || "Failed Handler Action Payback" + ); + } + modalLoader.setLoading(false); + }; + + const handleRemoveFilter = async () => { + store.payback.filterMembership = null; + store.payback.filterStart = null; + store.payback.filterEnd = null; + setFilterMembership([]); + form.resetFields(); + await store.payback.getDataConfirmation(); + store.payback.visibleModalFilterPayback = false; + }; + + const handleCancelFilter = async () => { + //setFilterMembership([]); + //form.resetFields(); + store.payback.filterMembership = null; + store.payback.filterStart = null; + store.payback.filterEnd = null; + store.payback.visibleModalFilterPayback = false; + await store.payback.getDataConfirmation(); + }; + + const handleSubmitFilter = async () => { + const data = form.getFieldsValue(); + //console.log(data); + store.payback.filterMembership = filterMembership; + store.payback.filterStart = data.start_date + ? moment(data.start_date).format("YYYY-MM-DD") + " 00:00:00" + : null; + store.payback.filterEnd = data.end_date + ? moment(data.end_date).format("YYYY-MM-DD") + " 23:59:59" + : null; + modalLoader.setLoading(true); + await store.payback.getDataConfirmation(); + modalLoader.setLoading(false); + store.payback.visibleModalFilterPayback = false; + }; + + const handleFilterCategory = async (value) => { + if (value) { + store.product.filterCategory = value; + await store.product.getDataSubCategories(); + } else { + store.product.filterCategory = null; + await store.product.getDataSubCategories(); + } + }; + + const footerLayoutFilter = [ + , + , + , + ]; + return ( +
+ + +
+ + + + + + {/* */} + + + {store.ui.mediaQuery.isDesktop && ( + { + let pageNumber = page.current; + store.payback.pageSizeConfirmation = page.pageSize; + store.payback.pageConfirmation = pageNumber - 1; + modalLoader.setLoading(true); + await store.payback.getDataConfirmation(); + modalLoader.setLoading(false); + }} + /> + )} + + {store.ui.mediaQuery.isMobile && ( + { + store.payback.pageSizeConfirmation = page.pageSize; + store.payback.pageConfirmation = page.current - 1; + modalLoader.setLoading(true); + await store.payback.getDataConfirmation(); + modalLoader.setLoading(false); + }, + pageSize: store.payback.pageSizeConfirmation, + total: store.payback.totalDataConfirmation, + current: store.payback.pageConfirmation + 1, + style: { marginBottom: "1rem", marginRight: "1rem" }, + }} + dataSource={store.payback.dataConfirmation} + style={{ padding: 0 }} + renderItem={(item) => { + return ( +
+ + +

+ Amount: {item.amount} +
+ {PAYBACK_STATUS[item.status] === + PAYBACK_STATUS[0] ? ( + + + + + ) : ( + + {PAYBACK_STATUS[item.status]} + + )} +

+
+ } + /> +
+

+ +

+
+ + + + ); + }} + /> + )} + + + { + //form.resetFields(); + //setFilterMembership([]); + store.payback.filterMembership = null; + store.payback.filterStart = null; + store.payback.filterEnd = null; + store.payback.visibleModalFilterPayback = false; + await store.payback.getDataConfirmation(); + }} + > + + + + Sender + + + + + + + + + + + + + + + ); +}); diff --git a/src/routes/app.js b/src/routes/app.js index 8df28d0..0b03e7e 100644 --- a/src/routes/app.js +++ b/src/routes/app.js @@ -14,6 +14,8 @@ import {Category} from "../pages/Product/Category"; import {Payback} from "../pages/Payback/Payback"; import {PaybackCreated} from "../pages/Payback/PaybackCreated"; import {Subcategory} from "../pages/Product/Subcategory"; +import {Konfirmasi} from "../pages/Membership/Konfirmasi"; + export const LINKS = { HOME: "/app/home", @@ -27,6 +29,7 @@ export const LINKS = { SUPPLIER: "/app/supplier", CATEGORY: "/app/category", PAYBACK: "/app/payback", + KONFIRMASI: "/app/konfirmasi", PAYBACK_CREATED: "/app/payback-created", SUBCATEGORY: "/app/subcategory", USER_DETAIL: "/app/user-detail/:id", @@ -41,6 +44,9 @@ export const AppRoute = () => { + + +