From ce2d2e1072b848d9764091ff8b29c3f151824c5b Mon Sep 17 00:00:00 2001 From: "ajat91.sudrajat" Date: Thu, 23 Dec 2021 11:53:07 +0700 Subject: [PATCH] Config Menu --- src/component/ProductComponent.js | 27 +- src/pages/App/MenuList.js | 28 +- src/pages/Config/Partner.js | 4 +- src/pages/Config/Supplier.js | 4 +- src/pages/Membership/DetailUser.js | 184 +++++----- src/pages/Membership/Membership.js | 181 +++++----- src/pages/Payback/Payback.js | 518 +++++++++++++++------------- src/pages/Payback/PaybackCreated.js | 4 +- src/pages/Product/Category.js | 4 +- src/pages/Product/Product.js | 99 +++--- src/pages/Product/Subcategory.js | 4 +- src/pages/Profile/Profile.js | 2 +- src/pages/Transaction/Product.js | 6 +- src/routes/app.js | 2 +- src/store/membership.js | 10 + src/store/transaction.js | 2 +- 16 files changed, 572 insertions(+), 507 deletions(-) diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js index 990b7d8..5490a1d 100644 --- a/src/component/ProductComponent.js +++ b/src/component/ProductComponent.js @@ -1,4 +1,4 @@ -import React, {useContext, useState} from "react"; +import React, { useContext, useState } from "react"; import { Button, Col, @@ -15,19 +15,19 @@ import { Tag, Typography, } from "antd"; -import {observer} from "mobx-react-lite"; -import {ExclamationCircleOutlined} from "@ant-design/icons"; -import {useHistory} from "react-router-dom"; -import {useStore} from "../utils/useStore"; -import {LINKS} from "../routes/app"; -import {ModalLoaderContext} from "../utils/modal"; +import { observer } from "mobx-react-lite"; +import { ExclamationCircleOutlined } from "@ant-design/icons"; +import { useHistory } from "react-router-dom"; +import { useStore } from "../utils/useStore"; +import { LINKS } from "../routes/app"; +import { ModalLoaderContext } from "../utils/modal"; -const {Title, Text} = Typography; +const { Title, Text } = Typography; export const ProductComponent = observer((props) => { const store = useStore(); const [form] = Form.useForm(); - const {Option} = Select; + const { Option } = Select; const history = useHistory(); const [idData, setIdData] = useState(""); const [filterSupplier, setFilterSupplier] = useState([]); @@ -92,6 +92,11 @@ export const ProductComponent = observer((props) => { // // ), // }, + { + title: "Supplier", + dataIndex: "supplier", + key: "supplier", + }, { title: "Tersedia", dataIndex: "tersedia", @@ -120,7 +125,7 @@ export const ProductComponent = observer((props) => { ), }, ]; - + if (store.authentication.userData.role !== "Admin") columns.pop(); const deleteData = async (id) => { try { console.log(id); @@ -289,7 +294,7 @@ export const ProductComponent = observer((props) => { pageSize: store.product.pageSize, total: store.product.total_data, current: store.product.page + 1, - style: {marginBottom: "1rem", marginRight: "1rem"}, + style: { marginBottom: "1rem", marginRight: "1rem" }, }} dataSource={store.product.data} style={{ padding: 0 }} diff --git a/src/pages/App/MenuList.js b/src/pages/App/MenuList.js index 6bd6c96..ce7bf9f 100644 --- a/src/pages/App/MenuList.js +++ b/src/pages/App/MenuList.js @@ -52,14 +52,14 @@ export const MenuList = observer((props) => { - Home + Beranda {store.authentication.userData.role !== "Retail" && ( - Membership + Keanggotaan )} @@ -68,13 +68,13 @@ export const MenuList = observer((props) => { - Partner + Rekanan - Commission + Komisi @@ -90,14 +90,14 @@ export const MenuList = observer((props) => { - Product + Produk {store.authentication.userData.role === "Admin" && ( - Category + Kategori )} @@ -105,7 +105,7 @@ export const MenuList = observer((props) => { - Sub Category + Sub Kategori )} @@ -115,7 +115,7 @@ export const MenuList = observer((props) => { - Product + Produk )} @@ -123,24 +123,24 @@ export const MenuList = observer((props) => { - Transaction + Transaksi )} - } title="Payback"> + } title="Pembayaran"> {store.authentication.userData.role !== "Retail" && ( - - Confirmation + + konfirmasi )} {store.authentication.userData.role !== "Admin" && ( - - Created + + Buat Pembayaran )} diff --git a/src/pages/Config/Partner.js b/src/pages/Config/Partner.js index e1e8b41..4b5f5ce 100644 --- a/src/pages/Config/Partner.js +++ b/src/pages/Config/Partner.js @@ -56,14 +56,14 @@ export const Partner = observer(() => { */} - + /> */} diff --git a/src/pages/Config/Supplier.js b/src/pages/Config/Supplier.js index fc088b5..e009362 100644 --- a/src/pages/Config/Supplier.js +++ b/src/pages/Config/Supplier.js @@ -71,7 +71,7 @@ export const Supplier = observer(() => { */} - { marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, }} onSearch={(value) => console.log(value)} - /> + /> */} -
+
- ) + ); }); diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js index 526f41e..83de9c3 100644 --- a/src/pages/Membership/Membership.js +++ b/src/pages/Membership/Membership.js @@ -1,32 +1,32 @@ -import React, {useContext, useEffect, useState} from "react"; +import React, { useContext, useEffect, useState } from "react"; import { - Button, - Card, - Col, - Divider, - Form, - Input, - InputNumber, - List, - message, - Modal, - Row, - Select, - Space, - Table, - Tag, + Button, + Card, + Col, + Divider, + Form, + Input, + InputNumber, + List, + message, + Modal, + Row, + Select, + Space, + Table, + Tag, } from "antd"; -import {useStore} from "../../utils/useStore"; -import {observer} from "mobx-react-lite"; -import {DownloadOutlined, PlusSquareOutlined} from "@ant-design/icons"; -import {MembershipModal} from "./MembershipModal"; -import {BreadcumbComponent} from "../../component/BreadcumbComponent"; -import {LINKS} from "../../routes/app"; -import {useHistory} from "react-router-dom"; -import {ModalLoaderContext} from "../../utils/modal"; +import { useStore } from "../../utils/useStore"; +import { observer } from "mobx-react-lite"; +import { DownloadOutlined, PlusSquareOutlined } from "@ant-design/icons"; +import { MembershipModal } from "./MembershipModal"; +import { BreadcumbComponent } from "../../component/BreadcumbComponent"; +import { LINKS } from "../../routes/app"; +import { useHistory } from "react-router-dom"; +import { ModalLoaderContext } from "../../utils/modal"; -const {Search} = Input; -const {Option} = Select; +const { Search } = Input; +const { Option } = Select; export const Membership = observer(() => { const history = useHistory(); const [form] = Form.useForm(); @@ -71,14 +71,14 @@ export const Membership = observer(() => { const status = isActive ? "inactive" : "active"; const status2 = isActive ? "Inactivating" : "Activating"; try { - modalLoader.setLoading(true); - const response = await store.membership.changeStatus(id, status); - modalLoader.setLoading(false); + modalLoader.setLoading(true); + const response = await store.membership.changeStatus(id, status); + modalLoader.setLoading(false); - response?.body?.statusCode === 201 - ? message.success(`Success ${status2} Membership`) - : message.error(`Failed ${status2} Membership`); - await getData(); + response?.body?.statusCode === 201 + ? message.success(`Success ${status2} Membership`) + : message.error(`Failed ${status2} Membership`); + await getData(); } catch (err) { modalLoader.setLoading(false); message.error(`Failed ${status2} Membership`); @@ -93,26 +93,26 @@ export const Membership = observer(() => { const handleSubmitTransaction = async (data) => { modalLoader.setLoading(true); try { - data.destination = destination; - if (data.amount) { - data = { - ...data, - amount: Number(data.amount), - }; - } + data.destination = destination; + if (data.amount) { + data = { + ...data, + amount: Number(data.amount), + }; + } - let response = null; + let response = null; - (await store.authentication.userData.role) === "Admin" - ? (response = await store.transaction.distributeAdmin(data)) - : (response = await store.transaction.distribute(data)); + (await store.authentication.userData.role) === "Admin" + ? (response = await store.transaction.distributeAdmin(data)) + : (response = await store.transaction.distribute(data)); - response?.body?.statusCode === 201 - ? message.success("Success Top Up") - : message.error("Failed Top Up"); + response?.body?.statusCode === 201 + ? message.success("Success Top Up") + : message.error("Failed Top Up"); - modalLoader.setLoading(false); - await getData(); + modalLoader.setLoading(false); + await getData(); } catch (e) { console.log(e, "apa errornya"); modalLoader.setLoading(false); @@ -142,30 +142,30 @@ export const Membership = observer(() => { key: ["coa", "amount"], width: "20%", render: (text) => - new Intl.NumberFormat("id-ID", { - style: "currency", - currency: "IDR", - }).format(text), - }, - { - title: "Status", - dataIndex: "isActive", - key: "isActive", - render: (text, record) => ( - - {record?.isActive === true ? " ACTIVE" : "INACTIVE"} - - ), + new Intl.NumberFormat("id-ID", { + style: "currency", + currency: "IDR", + }).format(text), }, + // { + // title: "Status", + // dataIndex: "isActive", + // key: "isActive", + // render: (text, record) => ( + // + // {record?.isActive === true ? " ACTIVE" : "INACTIVE"} + // + // ), + // }, { title: "Action", key: "action", render: (text, record) => ( - - {store.authentication.userData.role === "Admin" && } + } */} + + + + ) : ( + ( - - ), - }, - { - 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]} - - ), - }, + style={{ color: "#4F566B" }} + > + {PAYBACK_STATUS[record.status]} + + ), + }, ]; if (store.authentication.userData.role === "Retail") columns.pop(); const routeData = [ - { - route: LINKS.HOME, - name: "Home", - }, - { - route: LINKS.PAYBACK, - name: Payback Confirmation, - }, + { + route: LINKS.HOME, + name: "Home", + }, + { + route: LINKS.PAYBACK, + name: Payback Confirmation, + }, ]; - const handleAction = async (id, type) => { - modalLoader.setLoading(true); - try { - const response = await store.payback.confirmPayback(id, type); - if (response.body.status !== 201) { - message.error(`Failed ${capitalize(type)} Payback`); - } else { - message.success(`Success ${capitalize(type)} Payback`); - } - } catch (e) { - console.error(e, "apa errornya"); - message.error("Failed Handler Action Payback"); - } - modalLoader.setLoading(false); - }; + const handleAction = async (id, type) => { + modalLoader.setLoading(true); + try { + const response = await store.payback.confirmPayback(id, type); + if (response.body.status !== 201) { + message.error(`Failed ${capitalize(type)} Payback`); + } else { + message.success(`Success ${capitalize(type)} Payback`); + } + } catch (e) { + console.error(e, "apa errornya"); + message.error("Failed Handler Action Payback"); + } + modalLoader.setLoading(false); + }; - 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); - }} - /> +
{ + 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 ( -
- - - -
- } - /> -
-

- {item.amount} -

-
- - + { + 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 ( +
+ + + +
+ } + /> +
+

+ {item.amount} +

+
+ + ); }} diff --git a/src/pages/Payback/PaybackCreated.js b/src/pages/Payback/PaybackCreated.js index 54005ef..ee53c93 100644 --- a/src/pages/Payback/PaybackCreated.js +++ b/src/pages/Payback/PaybackCreated.js @@ -101,14 +101,14 @@ export const PaybackCreated = observer(() => { - + /> */} {store.authentication.userData.role !== "Admin" && ( - + /> */} - - - -
- - {store.authentication.userData.role === "Admin" && ( + {store.authentication.userData.role !== "Admin" && ( +
+ +
+ + +
{ textAlign: "right", }} > - - - - + + + + {/* */} +
- )} - - - + + + + )} diff --git a/src/pages/Product/Subcategory.js b/src/pages/Product/Subcategory.js index 0ffa767..cc99349 100644 --- a/src/pages/Product/Subcategory.js +++ b/src/pages/Product/Subcategory.js @@ -61,14 +61,14 @@ export const Subcategory = observer(() => { */} - + /> */} - )} + )} */} ); }); diff --git a/src/routes/app.js b/src/routes/app.js index 00ee1cf..9bc009f 100644 --- a/src/routes/app.js +++ b/src/routes/app.js @@ -29,7 +29,7 @@ export const LINKS = { PAYBACK: "/app/payback", PAYBACK_CREATED: "/app/payback-created", SUBCATEGORY: "/app/subcategory", - USER_DETAIL: "/app/user-detail", + USER_DETAIL: "/app/user-detail/:id", PRODUCT_DETAIL: "/app/product-detail", }; diff --git a/src/store/membership.js b/src/store/membership.js index 7b2d44b..8edbee2 100644 --- a/src/store/membership.js +++ b/src/store/membership.js @@ -28,6 +28,16 @@ export class Membership { 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() { try { diff --git a/src/store/transaction.js b/src/store/transaction.js index 307f4bd..390b91d 100644 --- a/src/store/transaction.js +++ b/src/store/transaction.js @@ -84,7 +84,7 @@ export class Transaction { try { console.log("Top up") const response = await http.get(`/transaction/history-deposit?page=${this.pageHistoryTopUp}&user-destination=${id}`); - + console.log(response,"data") this.dataHistoryTopUp = response.body.data ?? [] this.total_dataHistoryTopUp = response?.body?.count ?? 0 } catch (e) {