diff --git a/src/component/CategoryComponent.js b/src/component/CategoryComponent.js index 98a8239..753342e 100644 --- a/src/component/CategoryComponent.js +++ b/src/component/CategoryComponent.js @@ -1,18 +1,17 @@ -import React, {useState} from "react"; +import React, {useContext, useState} from "react"; import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd"; import {observer} from "mobx-react-lite"; import {useHistory} from "react-router-dom"; import {useStore} from "../utils/useStore"; import {LINKS} from "../routes/app"; +import {ModalLoaderContext} from "../utils/modal"; export const CategoryComponent = observer((props) => { const store = useStore(); const [form] = Form.useForm(); - const {Option} = Select; const history = useHistory(); const [idData, setIdData] = useState(""); - const [confirmLoading, setConfirmLoading] = useState(false); - const [isLoading, setIsLoading] = useState(false); + const modalLoader = useContext(ModalLoaderContext); const handleEditButton = (data) => { console.log(data, "isi data"); @@ -75,7 +74,9 @@ export const CategoryComponent = observer((props) => { const deleteData = async (id) => { try { console.log(id); + modalLoader.setLoading(true); await store.category.delete(id); + modalLoader.setLoading(true); message.success("Data Berhasil Dihapus"); history.push(LINKS.PRODUCT); } catch (err) { @@ -92,19 +93,19 @@ export const CategoryComponent = observer((props) => { const handleSubmit = async (data) => { console.log(data, "isi data2"); if (idData !== "") { - setConfirmLoading(true); + modalLoader.setLoading(true); try { await store.category.update(idData, data); message.success("Success Update Data Category"); } catch (e) { message.error("Failed Update Data Category"); } - setConfirmLoading(false); + modalLoader.setLoading(false); store.category.visibleModalCategory = false; setIdData(""); form.resetFields(); } else { - setConfirmLoading(true); + modalLoader.setLoading(true); try { await store.category.create(data); message.success("Success Add New Category"); @@ -112,7 +113,7 @@ export const CategoryComponent = observer((props) => { console.log(e, "apa errornya"); message.error("Failed Add Category"); } - setConfirmLoading(false); + modalLoader.setLoading(false); store.category.visibleModalCategory = false; setIdData(""); form.resetFields(); @@ -122,7 +123,7 @@ export const CategoryComponent = observer((props) => { return (
{ let pageNumber = page.current; store.category.pageSize = page.pageSize; store.category.page = pageNumber - 1; - // store.membership.isLoading = true; + modalLoader.setLoading(true); await store.category.getData(); - // store.membership.isLoading = false; + modalLoader.setLoading(false); }} /> @@ -169,16 +170,16 @@ export const CategoryComponent = observer((props) => { - + - + diff --git a/src/component/CommissionComponent.js b/src/component/CommissionComponent.js index 031ae59..ae730ca 100644 --- a/src/component/CommissionComponent.js +++ b/src/component/CommissionComponent.js @@ -1,32 +1,17 @@ -import React, {useEffect, useState} from "react"; +import React, {useContext, useEffect, useState} from "react"; import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd"; import {observer} from "mobx-react-lite"; import {useHistory} from "react-router-dom"; import {useStore} from "../utils/useStore"; import {LINKS} from "../routes/app"; +import {ModalLoaderContext} from "../utils/modal"; export const CommissionComponent = observer((props) => { const store = useStore(); const [form] = Form.useForm(); - const {Option} = Select; const history = useHistory(); const [idData, setIdData] = useState(""); - const [confirmLoading, setConfirmLoading] = useState(false); - const [isLoading, setIsLoading] = useState(false); - - useEffect(() => { - const init = async () => { - try { - setIsLoading(true); - //await store.product.getDataSubCategories(); - setIsLoading(false); - } catch (e) { - setIsLoading(false); - } - }; - - init(); - }, []); + const modalLoader = useContext(ModalLoaderContext); const handleEditButton = (data) => { console.log(data, "isi data"); @@ -59,32 +44,20 @@ export const CommissionComponent = observer((props) => { }, ]; - const deleteData = async (id) => { - try { - console.log(id); - await store.commission.delete(id); - message.success("Data Berhasil Dihapus"); - history.push(LINKS.PRODUCT); - } catch (err) { - console.log("error", err); - message.error("Gagal menghapus"); - } - }; - const handleCancel = () => { setIdData(""); store.commission.visibleModalCommission = false; }; const handleSubmit = async (data) => { - setConfirmLoading(true); + modalLoader.setLoading(true); try { await store.commission.update(idData, data); message.success("Success Update Data Member"); } catch (e) { message.error("Failed Update Data Member"); } - setConfirmLoading(false); + modalLoader.setLoading(false); store.commission.visibleModalCommission = false; setIdData(""); form.resetFields(); @@ -93,7 +66,7 @@ export const CommissionComponent = observer((props) => { return (
{ let pageNumber = page.current; store.commission.pageSize = page.pageSize; store.commission.page = pageNumber - 1; - // store.membership.isLoading = true; + modalLoader.setLoading(true); await store.commission.getData(); - // store.membership.isLoading = false; + modalLoader.setLoading(false); }} /> { - form.resetFields(); - handleCancel(); - }} - onOk={() => { - form - .validateFields() - .then((values) => { - console.log(values, "isi form"); - handleSubmit(values); - form.resetFields(); - }) - .catch((info) => { - console.error("Validate Failed:", info); - }); - }} + visible={store.commission.visibleModalCommission} + title={"Edit Commission"} + okText={"Edit"} + cancelText="Cancel" + onCancel={() => { + form.resetFields(); + handleCancel(); + }} + onOk={() => { + form + .validateFields() + .then((values) => { + console.log(values, "isi form"); + handleSubmit(values); + form.resetFields(); + }) + .catch((info) => { + console.error("Validate Failed:", info); + }); + }} >
- + diff --git a/src/component/PartnerComponent.js b/src/component/PartnerComponent.js index b200a82..bd4c46a 100644 --- a/src/component/PartnerComponent.js +++ b/src/component/PartnerComponent.js @@ -1,41 +1,27 @@ -import React, {useEffect, useState} from "react"; +import React, {useContext, useEffect, useState} from "react"; import {Button, Form, Input, message, Modal, Select, Space, Table, Tag,} 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"; export const PartnerComponent = observer((props) => { const store = useStore(); const [form] = Form.useForm(); - const {Option} = Select; const history = useHistory(); const [idData, setIdData] = useState(""); const [isChangePassword, setIsChangePassword] = useState(false); - const [confirmLoading, setConfirmLoading] = useState(false); - const [isLoading, setIsLoading] = useState(false); - - useEffect(() => { - const init = async () => { - try { - setIsLoading(true); - await store.partner.getData(); - setIsLoading(false); - } catch (e) { - setIsLoading(false); - } - }; - - init(); - }, []); + const modalLoader = useContext(ModalLoaderContext); const changeStatus = async (id, isActive) => { const status = isActive ? "inactive" : "active"; const status2 = isActive ? "Inactivating" : "Activating"; + modalLoader.setLoading(true); try { const response = await store.partner.changeStatus(id, status); - + modalLoader.setLoading(false); response?.body?.statusCode === 201 ? message.success(`Success ${status2} Partner`) : message.error(`Failed ${status2} Partner`); @@ -92,7 +78,7 @@ export const PartnerComponent = observer((props) => { render: (text, record) => ( {record?.status === true ? " ACTIVE" : "INACTIVE"} @@ -121,8 +107,9 @@ export const PartnerComponent = observer((props) => { const deleteData = async (id) => { try { - console.log(id); + modalLoader.setLoading(true); await store.partner.delete(id); + modalLoader.setLoading(false); message.success("Data Berhasil Dihapus"); history.push(LINKS.PARTNER); } catch (err) { @@ -134,7 +121,7 @@ export const PartnerComponent = observer((props) => { const handleDelete = (id) => { Modal.confirm({ title: "Are you sure delete this record?", - icon: , + icon: , okText: "Yes", okType: "primary", cancelText: "Cancel", @@ -155,9 +142,10 @@ export const PartnerComponent = observer((props) => { const handleSubmit = async (data) => { console.log(data, "isi data2"); if (idData !== "") { - setConfirmLoading(true); + modalLoader.setLoading(true); try { await store.partner.update(idData, data); + modalLoader.setLoading(false); message.success( isChangePassword ? "Failed Change Partner Password" @@ -165,27 +153,27 @@ export const PartnerComponent = observer((props) => { ); //await store.partner.getData() } catch (e) { + modalLoader.setLoading(true); message.error( isChangePassword ? "Failed Change Partner Password" : "Failed Update Data Partner" ); } - setConfirmLoading(false); store.partner.visibleModalPartner = false; setIdData(""); form.resetFields(); } else { - setConfirmLoading(true); + modalLoader.setLoading(true); try { await store.partner.create(data); message.success("Success Add New Partner"); - //await store.partner.getData() + modalLoader.setLoading(false); } catch (e) { console.log(e, "apa errornya"); message.error("Failed Add Partner"); } - setConfirmLoading(false); + modalLoader.setLoading(false); store.partner.visibleModalPartner = false; setIdData(""); form.resetFields(); @@ -194,7 +182,7 @@ export const PartnerComponent = observer((props) => { return (
{ let pageNumber = page.current; store.partner.pageSize = page.pageSize; store.partner.page = pageNumber - 1; - //store.membership.isLoading = true; + modalLoader.setLoading(true); await store.partner.getData(); - // store.membership.isLoading = false; + modalLoader.setLoading(false); }} /> @@ -221,8 +209,8 @@ export const PartnerComponent = observer((props) => { isChangePassword ? "Change Member Password" : idData - ? "Edit Partner" - : "Create a new partner" + ? "Edit Partner" + : "Create a new partner" } okText={idData ? "Edit" : "Create"} cancelText="Cancel" @@ -250,11 +238,11 @@ export const PartnerComponent = observer((props) => { label="Name" rules={[ idData - ? { required: false } - : { required: true, message: "Please input password name!" }, + ? {required: false} + : {required: true, message: "Please input password name!"}, ]} > - + )} {!idData && ( @@ -263,11 +251,11 @@ export const PartnerComponent = observer((props) => { label="Owner" rules={[ idData - ? { required: false } - : { required: true, message: "Please input password owner!" }, + ? {required: false} + : {required: true, message: "Please input password owner!"}, ]} > - + )} {((idData && isChangePassword) || !idData) && ( @@ -276,27 +264,27 @@ export const PartnerComponent = observer((props) => { label="Password Account" rules={[ idData - ? { required: false } + ? {required: false} : { - required: true, - message: "Please input password account!", - }, + required: true, + message: "Please input password account!", + }, ]} > - + )} -{!idData && ( + {!idData && ( - + )} {!isChangePassword && ( @@ -306,25 +294,25 @@ export const PartnerComponent = observer((props) => { label="Npwp" rules={[ idData - ? { required: false } - : { required: true, message: "Please input npwp!" }, + ? {required: false} + : {required: true, message: "Please input npwp!"}, ]} > - + - + )} diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js index ef52e21..9d62954 100644 --- a/src/component/ProductComponent.js +++ b/src/component/ProductComponent.js @@ -1,4 +1,4 @@ -import React, {useState} from "react"; +import React, {useContext, useState} from "react"; import {Button, Col, Form, Input, message, Modal, Row, Select, Table, Tag, Typography} from "antd"; import {observer} from "mobx-react-lite"; import {ExclamationCircleOutlined} from "@ant-design/icons"; @@ -6,346 +6,348 @@ import {useHistory} from "react-router-dom"; import {capitalize} from "lodash"; import {useStore} from "../utils/useStore"; import {LINKS} from "../routes/app"; +import {ModalLoaderContext} from "../utils/modal"; const {Title, Text} = Typography; export const ProductComponent = observer((props) => { - const store = useStore(); - const [form] = Form.useForm(); - const {Option} = Select; - const history = useHistory(); - const [idData, setIdData] = useState(''); - const [confirmLoading, setConfirmLoading] = useState(false); - const [isLoading, setIsLoading] = useState(false); - const [filterSupplier, setFilterSupplier] = useState(null); - const [filterCategories, setFilterCategories] = useState(null); - const [filterSubCategories, setFilterSubCategories] = useState(null); + const store = useStore(); + const [form] = Form.useForm(); + const {Option} = Select; + const history = useHistory(); + const [idData, setIdData] = useState(''); + const [filterSupplier, setFilterSupplier] = useState(null); + const [filterCategories, setFilterCategories] = useState(null); + const [filterSubCategories, setFilterSubCategories] = useState(null); + const modalLoader = useContext(ModalLoaderContext); - const handleEditButton = (data) => { - console.log(data, "isi data") - form.setFieldsValue({ - name: data.name, - price: data.price, - markUpPrice: data.basePrice, - code: data.code, - status: data.status, - subCategoriesId: data.sub_categories.id, - }); - store.product.visibleModalProduct = true; - setIdData(data.id); + const handleEditButton = (data) => { + console.log(data, "isi data") + form.setFieldsValue({ + name: data.name, + price: data.price, + markUpPrice: data.basePrice, + code: data.code, + status: data.status, + subCategoriesId: data.sub_categories.id, + }); + store.product.visibleModalProduct = true; + setIdData(data.id); + } + + const columns = [ + { + title: "Kode", + dataIndex: "code", + key: "code", + }, + { + title: "Produk", + dataIndex: ["name"], + key: "name", + }, + { + title: "Harga Beli", + dataIndex: ["currentPrice", "price"], + key: ["currentPrice", "price"], + }, + { + title: "Harga Jual", + dataIndex: ["currentPrice", "mark_up_price"], + key: ["currentPrice", "mark_up_price"], + }, + // { + // title: "Gangguan", + // dataIndex: "status", + // key: "status", + // render: (text, record) => ( + // + // {capitalize(record?.status)} + // + // ), + // }, + { + title: "Tersedia", + dataIndex: "tersedia", + key: "tersedia", + render: (text, record) => ( + + {record?.status === "ACTIVE" ? " Tersedia" : "Tidak"} + + ), } + ]; - const columns = [ - { - title: "Kode", - dataIndex: "code", - key: "code", - }, - { - title: "Produk", - dataIndex: ["name"], - key: "name", - }, - { - title: "Harga Beli", - dataIndex: ["currentPrice","price"], - key: ["currentPrice","price"], - }, - { - title: "Harga Jual", - dataIndex: ["currentPrice","mark_up_price"], - key: ["currentPrice","mark_up_price"], - }, - // { - // title: "Gangguan", - // dataIndex: "status", - // key: "status", - // render: (text, record) => ( - // - // {capitalize(record?.status)} - // - // ), - // }, - { - title: "Tersedia", - dataIndex: "tersedia", - key: "tersedia", - render: (text, record) => ( - - {record?.status === "ACTIVE" ? " Tersedia" : "Tidak"} - - ), - } - ]; - - const deleteData = async (id) => { - try { - console.log(id); - await store.product.delete(id); - message.success("Data Berhasil Dihapus"); - history.push(LINKS.PRODUCT); - } catch (err) { - console.log("error", err); - message.error("Gagal menghapus"); - } - }; - - const handleDelete = (id) => { - Modal.confirm({ - title: "Are you sure delete this record?", - icon: , - okText: "Yes", - okType: "primary", - cancelText: "Cancel", - onOk() { - return deleteData(id); - }, - onCancel() { - console.log("Cancel"); - }, - }); - }; - - const handleCancel = () => { - setIdData('') - store.product.visibleModalProduct = false; + const deleteData = async (id) => { + try { + console.log(id); + await store.product.delete(id); + message.success("Data Berhasil Dihapus"); + history.push(LINKS.PRODUCT); + } catch (err) { + console.log("error", err); + message.error("Gagal menghapus"); } + }; - const handleSubmit = async (data) => { - console.log(data, "isi data2") - if (idData !== '') { - setConfirmLoading(true); - try { - await store.product.update(idData, data) - message.success("Success Update Data Member") - } catch (e) { - message.error("Failed Update Data Member") - } - setConfirmLoading(false); - store.product.visibleModalProduct = false; - setIdData(''); - form.resetFields(); - } else { - setConfirmLoading(true); - try { - await store.product.create(data) - message.success("Success Add New Member") - } catch (e) { - console.log(e, "apa errornya") - message.error("Failed Add Member") - } - setConfirmLoading(false); - store.product.visibleModalProduct = false; - setIdData(''); - form.resetFields(); - } + const handleDelete = (id) => { + Modal.confirm({ + title: "Are you sure delete this record?", + icon: , + okText: "Yes", + okType: "primary", + cancelText: "Cancel", + onOk() { + return deleteData(id); + }, + onCancel() { + console.log("Cancel"); + }, + }); + }; + + const handleCancel = () => { + setIdData('') + store.product.visibleModalProduct = false; + } + + const handleSubmit = async (data) => { + console.log(data, "isi data2") + if (idData !== '') { + modalLoader.setLoading(true); + try { + await store.product.update(idData, data) + message.success("Success Update Data Member") + } catch (e) { + message.error("Failed Update Data Member") + } + modalLoader.setLoading(false); + store.product.visibleModalProduct = false; + setIdData(''); + form.resetFields(); + } else { + modalLoader.setLoading(true); + try { + await store.product.create(data) + message.success("Success Add New Member") + } catch (e) { + console.log(e, "apa errornya") + message.error("Failed Add Member") + } + modalLoader.setLoading(false); + store.product.visibleModalProduct = false; + setIdData(''); + form.resetFields(); } + } - const handleRemoveFilter = async () => { - store.product.filterSupplier = null; - store.product.filterSubCategory = null; - setFilterSupplier(null); - setFilterCategories(null); - setFilterSubCategories(null); - await store.product.getData(); - store.product.visibleModalFilterProduct = false; - }; + const handleRemoveFilter = async () => { + store.product.filterSupplier = null; + store.product.filterSubCategory = null; + setFilterSupplier(null); + setFilterCategories(null); + setFilterSubCategories(null); + await store.product.getData(); + store.product.visibleModalFilterProduct = false; + }; - const handleCancelFilter = () => { - setFilterSupplier(null); - setFilterCategories(null); - setFilterSubCategories(null); - store.product.visibleModalFilterProduct = false; - }; + const handleCancelFilter = () => { + setFilterSupplier(null); + setFilterCategories(null); + setFilterSubCategories(null); + store.product.visibleModalFilterProduct = false; + }; - const handleSubmitFilter = async () => { - store.product.filterSupplier = filterSupplier; - store.product.filterSubCategory = filterSubCategories; - await store.product.getData(); - store.product.visibleModalFilterProduct = false; - }; + const handleSubmitFilter = async () => { + store.product.filterSupplier = filterSupplier; + store.product.filterSubCategory = filterSubCategories; + modalLoader.setLoading(true); + await store.product.getData(); + modalLoader.setLoading(false); + store.product.visibleModalFilterProduct = false; + }; - const footerLayoutFilter = [ - , - , - - ] + const footerLayoutFilter = [ + , + , + + ] - return ( -
-
{ - let pageNumber = page.current; - store.product.pageSize = page.pageSize; - store.product.page = pageNumber - 1; - // store.membership.isLoading = true; - await store.product.getData(); - // store.membership.isLoading = false; - }} - /> + return ( +
+
{ + let pageNumber = page.current; + store.product.pageSize = page.pageSize; + store.product.page = pageNumber - 1; + modalLoader.setLoading(true); + await store.product.getData(); + modalLoader.setLoading(false); + }} + /> - { - form.resetFields(); - handleCancel(); - }} - onOk={() => { - form - .validateFields() - .then((values) => { - console.log(values, "isi form") - handleSubmit(values); - form.resetFields(); - }) - .catch((info) => { - console.error("Validate Failed:", info); - }); - }} + { + form.resetFields(); + handleCancel(); + }} + onOk={() => { + form + .validateFields() + .then((values) => { + console.log(values, "isi form") + handleSubmit(values); + form.resetFields(); + }) + .catch((info) => { + console.error("Validate Failed:", info); + }); + }} + > +
+ + + + + + + + + + + + + + + + + + + + + + + + + Filter Supplier + - - - - - - - - - - - - - - - - - - - - ( + + ))} + + + + Filter Categories + { - setFilterSupplier(val); - }} - style={{marginBottom: "20px", width: "100%"}} - > - {store.supplier.data.map((item) => ( - - ))} - - - - Filter Categories - - - - Filter Sub-Categories - - - - - - ); + {store.category.data.map((item) => ( + + ))} + + + + Filter Sub-Categories + + + + + + ); }); diff --git a/src/component/Subcategory.js b/src/component/Subcategory.js index 45d80ff..d044c33 100644 --- a/src/component/Subcategory.js +++ b/src/component/Subcategory.js @@ -1,17 +1,16 @@ -import React, {useState} from "react"; +import React, {useContext, useState} from "react"; import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd"; import {observer} from "mobx-react-lite"; import {useHistory} from "react-router-dom"; import {useStore} from "../utils/useStore"; +import {ModalLoaderContext} from "../utils/modal"; export const SubcategoryComponent = observer((props) => { const store = useStore(); const [form] = Form.useForm(); const {Option} = Select; - const history = useHistory(); const [idData, setIdData] = useState(""); - const [confirmLoading, setConfirmLoading] = useState(false); - const [isLoading, setIsLoading] = useState(false); + const modalLoader = useContext(ModalLoaderContext); const getData = async () => { await store.category.getData(); @@ -64,7 +63,7 @@ export const SubcategoryComponent = observer((props) => { const handleSubmit = async (data) => { console.log(data, "isi data2"); if (idData !== "") { - setConfirmLoading(true); + modalLoader.setLoading(true); try { await store.subcategory.update(idData, data); await getData(); @@ -72,12 +71,12 @@ export const SubcategoryComponent = observer((props) => { } catch (e) { message.error("Failed Update Data Category"); } - setConfirmLoading(false); + modalLoader.setLoading(false); store.subcategory.visibleModalSubcategory = false; setIdData(""); form.resetFields(); } else { - setConfirmLoading(true); + modalLoader.setLoading(true); try { await store.subcategory.create(data); await getData(); @@ -86,7 +85,7 @@ export const SubcategoryComponent = observer((props) => { console.log(e, "apa errornya"); message.error("Failed Add Category"); } - setConfirmLoading(false); + modalLoader.setLoading(false); store.subcategory.visibleModalSubcategory = false; setIdData(""); form.resetFields(); @@ -96,7 +95,7 @@ export const SubcategoryComponent = observer((props) => { return (
{ showSizeChanger: true, simple: false, }} - onChange={(page) => { + onChange={async (page) => { let pageNumber = page.current; store.subcategory.pageSize = page.pageSize; store.subcategory.page = pageNumber - 1; - // store.membership.isLoading = true; - getData(); - // store.membership.isLoading = false; + modalLoader.setLoading(true); + await getData(); + modalLoader.setLoading(false); }} /> @@ -145,24 +144,24 @@ export const SubcategoryComponent = observer((props) => { name="code" label="Code" rules={[ - { required: true, message: "Please input code category!" }, + {required: true, message: "Please input code category!"}, ]} > - + )} - + {!idData && (
{ let pageNumber = page.current; store.supplier.pageSize = page.pageSize; store.supplier.page = pageNumber - 1; + modalLoader.setLoading(true); await store.supplier.getData(); + modalLoader.setLoading(false); }} /> { - + {!idData && ( - + )} - + ); }); diff --git a/src/component/TopupsaldoModal.js b/src/component/TopupsaldoModal.js index 28c6237..376869e 100644 --- a/src/component/TopupsaldoModal.js +++ b/src/component/TopupsaldoModal.js @@ -1,20 +1,21 @@ -import React from "react"; +import React, {useContext} from "react"; import {Form, Input, message, Modal} from "antd"; import {observer} from "mobx-react-lite"; import {useStore} from "../utils/useStore"; +import {ModalLoaderContext} from "../utils/modal"; export const TopupsaldoModal = observer((props) => { const store = useStore(); const [form] = Form.useForm(); + const modalLoader = useContext(ModalLoaderContext); const handleCancelTransaction = () => { store.supplier.visibleModalTransaction = false; }; const handleSubmitTransaction = async (data) => { - console.log(data, "isi data2"); - try { + modalLoader.setLoading(true); await store.supplier.createTransaction(data); message.success("Success Top Up"); } catch (e) { @@ -22,9 +23,11 @@ export const TopupsaldoModal = observer((props) => { message.error("Failed Top Up"); } + modalLoader.setLoading(false); store.supplier.visibleModalTransaction = false; form.resetFields(); }; + return (
{ }} >
- + - + diff --git a/src/pages/App/DesktopLayout.js b/src/pages/App/DesktopLayout.js index 6172ca9..cf007ab 100644 --- a/src/pages/App/DesktopLayout.js +++ b/src/pages/App/DesktopLayout.js @@ -12,6 +12,8 @@ import { FileSyncOutlined, FileProtectOutlined, ShoppingCartOutlined, + AlipayOutlined, + PayCircleOutlined } from "@ant-design/icons"; import { AppRoute, LINKS } from "../../routes/app"; import { useStore } from "../../utils/useStore"; @@ -202,12 +204,24 @@ export const DesktopLayout = observer(() => { )} - - - - Payback - - + } + title="Payback" + > + + + + Payback To + + + + + + Payback + + + {store.authentication.userData.role !== "Admin" && ( diff --git a/src/pages/App/MenuList.js b/src/pages/App/MenuList.js index a099c3b..56137bb 100644 --- a/src/pages/App/MenuList.js +++ b/src/pages/App/MenuList.js @@ -14,6 +14,8 @@ import { ProjectOutlined, ShoppingCartOutlined, UserOutlined, + AlipayOutlined, + PayCircleOutlined } from "@ant-design/icons"; import { observer } from "mobx-react-lite"; import { useStore } from "../../utils/useStore"; @@ -127,14 +129,14 @@ export const MenuList = observer((props) => { } title="Payback"> - - Payback + + Payback To - - Payback User + + Payback diff --git a/src/pages/Config/Commission.js b/src/pages/Config/Commission.js index 8a00f05..b7388bc 100644 --- a/src/pages/Config/Commission.js +++ b/src/pages/Config/Commission.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, {useContext, useEffect, useState} from "react"; import { Button, Card, Col, Input, Row, Tabs } from "antd"; import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons"; import { BreadcumbComponent } from "../../component/BreadcumbComponent"; @@ -6,23 +6,24 @@ import { useStore } from "../../utils/useStore"; import { observer } from "mobx-react-lite"; import { CommissionComponent } from "../../component/CommissionComponent"; import { LINKS } from "../../routes/app"; +import {ModalLoaderContext} from "../../utils/modal"; const { TabPane } = Tabs; const { Search } = Input; export const Commission = observer(() => { - const [isLoading, setIsLoading] = useState(false); const store = useStore(); + const modalLoader = useContext(ModalLoaderContext); useEffect(() => { const init = async () => { try { - setIsLoading(true); + modalLoader.setLoading(true); //await store.commission.getDataCategories(); await store.commission.getData(); - setIsLoading(false); + modalLoader.setLoading(false); } catch (e) { - setIsLoading(false); + modalLoader.setLoading(false); } }; @@ -66,7 +67,7 @@ export const Commission = observer(() => { */}
- +
); diff --git a/src/pages/Config/Partner.js b/src/pages/Config/Partner.js index 0fb2f57..6b5e6c4 100644 --- a/src/pages/Config/Partner.js +++ b/src/pages/Config/Partner.js @@ -1,4 +1,4 @@ -import React, {useEffect, useState} from "react"; +import React, {useContext, useEffect, useState} from "react"; import {Button, Card, Col, Input, Row, Tabs} from "antd"; import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons"; import {BreadcumbComponent} from "../../component/BreadcumbComponent"; @@ -6,72 +6,66 @@ import {useStore} from "../../utils/useStore"; import {observer} from "mobx-react-lite"; import {PartnerComponent} from "../../component/PartnerComponent"; import {LINKS} from "../../routes/app"; +import {ModalLoaderContext} from "../../utils/modal"; -const {TabPane} = Tabs; const {Search} = Input; export const Partner = observer(() => { - const [isLoading, setIsLoading] = useState(false); - const store = useStore(); + const store = useStore(); + const modalLoader = useContext(ModalLoaderContext); - useEffect(() => { - const init = async () => { - try { - setIsLoading(true); - //await store.partner.getDataCategories(); - await store.partner.getData(); - setIsLoading(false); - } catch (e) { - setIsLoading(false); - } - }; + useEffect(() => { + const init = async () => { + try { + modalLoader.setLoading(true); + await store.partner.getData(); + modalLoader.setLoading(false); + } catch (e) { + modalLoader.setLoading(false); + } + }; - init(); - }, []); + init(); + }, []); - // const handleChangeTabPane = async (key) => { - // store.partner.filterCategory = key; - // console.log(key); - // }; + const routeData = [ + { + route: LINKS.HOME, + name: "Home", + }, + { + route: LINKS.PARTNER, + name: Partner, + }, + ]; - const routeData = [ - { - route: LINKS.HOME, - name: "Home", - }, - { - route: LINKS.PARTNER, - name: Partner, - }, - ]; - - return ( -
- - - -
- {/* + {/* */} - - - - - - - - - - ); + + + + + + + + + + ); }); diff --git a/src/pages/Config/Supplier.js b/src/pages/Config/Supplier.js index 1f66dbb..9c42792 100644 --- a/src/pages/Config/Supplier.js +++ b/src/pages/Config/Supplier.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, {useContext, useEffect, useState} from "react"; import { Button, Card, @@ -21,26 +21,22 @@ import { useStore } from "../../utils/useStore"; import { observer } from "mobx-react-lite"; import { SupplierComponent } from "../../component/SupplierComponent"; import { LINKS } from "../../routes/app"; +import {ModalLoaderContext} from "../../utils/modal"; -const { TabPane } = Tabs; const { Search } = Input; -const { Option } = Select; export const Supplier = observer(() => { - const [isLoading, setIsLoading] = useState(false); - const [confirmLoading, setConfirmLoading] = useState(false); - const [form] = Form.useForm(); const store = useStore(); + const modalLoader = useContext(ModalLoaderContext); useEffect(() => { const init = async () => { try { - setIsLoading(true); - //await store.supplier.getDataCategories(); + modalLoader.setLoading(true); await store.supplier.getData(); - setIsLoading(false); + modalLoader.setLoading(false); } catch (e) { - setIsLoading(false); + modalLoader.setLoading(false); } }; diff --git a/src/pages/Login/Login.js b/src/pages/Login/Login.js index a55531b..b71b999 100644 --- a/src/pages/Login/Login.js +++ b/src/pages/Login/Login.js @@ -1,86 +1,91 @@ -import React from "react"; +import React, {useContext} from "react"; import {observer} from 'mobx-react-lite'; import {useStore} from "../../utils/useStore"; import {Button, Card, Col, Form, Input, message, Row, Typography} from 'antd'; import {useHistory} from "react-router-dom"; import {LINKS} from "../../routes/app"; +import {ModalLoaderContext} from "../../utils/modal"; export const Login = observer(() => { - const store = useStore(); - let history = useHistory(); - const [form] = Form.useForm(); + const store = useStore(); + let history = useHistory(); + const [form] = Form.useForm(); + const modalLoader = useContext(ModalLoaderContext); - const handleLogin = async (params) => { - try { - await store.authentication.login({ - username: params.username, - password: params.password, - }); - history.push(LINKS.HOME); - } catch (e) { - if (e.response?.body?.message) { - message.error(e.response.body.message); - return; - } - message.error(e.message); - } + const handleLogin = async (params) => { + try { + modalLoader.setLoading(true); + await store.authentication.login({ + username: params.username, + password: params.password, + }); + modalLoader.setLoading(false); + history.push(LINKS.HOME); + } catch (e) { + modalLoader.setLoading(true); + if (e.response?.body?.message) { + message.error(e.response.body.message); + return; + } + message.error(e.message); } + } - return ( -
- -
-
-
- - Boilerplate - -
- -
- - - - - - -
- -
- - -
- - - - ); + return ( +
+ +
+
+
+ + Boilerplate + +
+ +
+ + + + + + +
+ +
+ + +
+ + + + ); }); diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js index ecc7eb9..0908976 100644 --- a/src/pages/Membership/Membership.js +++ b/src/pages/Membership/Membership.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React, {useContext, useEffect, useState} from "react"; import { Button, Card, @@ -15,20 +15,21 @@ import { Form, Select, } from "antd"; -import { useStore } from "../../utils/useStore"; -import { observer } from "mobx-react-lite"; +import {useStore} from "../../utils/useStore"; +import {observer} from "mobx-react-lite"; import { ExclamationCircleOutlined, FilterOutlined, PlusSquareOutlined, DownloadOutlined, } from "@ant-design/icons"; -import { MembershipModal } from "./MembershipModal"; -import { BreadcumbComponent } from "../../component/BreadcumbComponent"; -import { LINKS } from "../../routes/app"; +import {MembershipModal} from "./MembershipModal"; +import {BreadcumbComponent} from "../../component/BreadcumbComponent"; +import {LINKS} from "../../routes/app"; +import {ModalLoaderContext} from "../../utils/modal"; -const { Search } = Input; -const { Option } = Select; +const {Search} = Input; +const {Option} = Select; export const Membership = observer(() => { const [form] = Form.useForm(); const store = useStore(); @@ -37,55 +38,57 @@ export const Membership = observer(() => { const [destination, setDestination] = useState(null); const [initialData, setInitialData] = useState({}); const [confirmLoading, setConfirmLoading] = useState(false); - const [isLoading, setIsLoading] = useState(false); + const modalLoader = useContext(ModalLoaderContext); useEffect(() => { const init = async () => { try { - setIsLoading(true); + modalLoader.setLoading(true); const isAdmin = store.authentication.userData.role === "Admin"; await getData(); await store.role.getData(isAdmin); - if (isAdmin) await store.supplier.getData(); - setIsLoading(false); + await store.supplier.getData(); + modalLoader.setLoading(false); } catch (e) { - setIsLoading(false); + console.error(e); + modalLoader.setLoading(false); } }; init(); }, []); - const getData = () => { + const getData = async () => { store.authentication.userData.role === "Admin" - ? store.membership.getData() - : store.membership.getDataBySuperior(); + ? await store.membership.getData() + : await store.membership.getDataBySuperior(); }; const changeStatus = async (id, isActive) => { const status = isActive ? "inactive" : "active"; const status2 = isActive ? "Inactivating" : "Activating"; - - console.log(status); - try { + 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`); } catch (err) { - console.log("error", err); + modalLoader.setLoading(false); message.error(`Failed ${status2} Membership`); } }; + const handleCancelTransaction = () => { setIsVisibleTopUpModal(false); setDestination(null); }; + const handleSubmitTransaction = async (data) => { - setConfirmLoading(true); + modalLoader.setLoading(true); try { data.destination = destination; if (data.amount) { @@ -99,9 +102,11 @@ export const Membership = observer(() => { ? store.transaction.distributeAdmin(data) : store.transaction.distribute(data); message.success("Success Top Up"); + modalLoader.setLoading(false); //await store.supplier.getData() } catch (e) { console.log(e, "apa errornya"); + modalLoader.setLoading(false); message.error("Failed Top Up"); } setConfirmLoading(false); @@ -117,16 +122,16 @@ export const Membership = observer(() => { key: "name", render: (text, record) => record?.name ?? record?.username, }, - { - title: "Username", - dataIndex: "username", - key: "username", - }, { title: "Role", dataIndex: "roleName", key: "role", }, + { + title: "Saldo", + dataIndex: ["coa", "amount"], + key: ["coa", "amount"], + }, { title: "Status", dataIndex: "isActive", @@ -134,7 +139,7 @@ export const Membership = observer(() => { render: (text, record) => ( {record?.isActive === true ? " ACTIVE" : "INACTIVE"} @@ -158,7 +163,7 @@ export const Membership = observer(() => { setIsVisibleTopUpModal(true); }} > - Top Up Saldo + Top Up Saldo {/* */} - + { setVisibleModal(true); }} > - New + New @@ -323,9 +333,9 @@ export const Membership = observer(() => { let pageNumber = page.current; store.membership.pageSize = page.pageSize; store.membership.page = pageNumber - 1; - // store.membership.isLoading = true; + modalLoader.setLoading(true); await getData(); - // store.membership.isLoading = false; + modalLoader.setLoading(false); }} /> )} @@ -335,18 +345,20 @@ export const Membership = observer(() => { itemLayout="horizontal" position={"top"} pagination={{ - onChange: (page) => { + onChange: async (page) => { store.membership.pageSize = page.pageSize; store.membership.page = page.current; - getData(); + modalLoader.setLoading(true); + await getData(); + modalLoader.setLoading(false); }, pageSize: store.membership.pageSize, total: store.membership.total_data, current: store.membership.page, - style: { marginBottom: "1rem", marginRight: "1rem" }, + style: {marginBottom: "1rem", marginRight: "1rem"}, }} dataSource={store.membership.data} - style={{ padding: 0 }} + style={{padding: 0}} renderItem={(item) => { return (
@@ -368,12 +380,12 @@ export const Membership = observer(() => { description={

- Username : {item.username}
+ Username : {item.username}

} /> -
+

{

- +
); }} @@ -415,25 +427,25 @@ export const Membership = observer(() => { }} >
- - - + + + - + diff --git a/src/pages/Membership/MembershipModal.js b/src/pages/Membership/MembershipModal.js index df67074..92faaef 100644 --- a/src/pages/Membership/MembershipModal.js +++ b/src/pages/Membership/MembershipModal.js @@ -11,7 +11,6 @@ export const MembershipModal = ({ }) => { const [form] = Form.useForm(); const { Option } = Select; - const dataStatus = ["true", "false"]; const store = useStore(); return ( diff --git a/src/pages/Payback/Payback.js b/src/pages/Payback/Payback.js index 34f9b4c..ba1a29f 100644 --- a/src/pages/Payback/Payback.js +++ b/src/pages/Payback/Payback.js @@ -1,4 +1,4 @@ -import React, { useState ,useEffect} from "react"; +import React, {useState, useEffect, useContext} from "react"; import { Button, Card, @@ -12,42 +12,37 @@ import { Space, Table, } from "antd"; -import { useStore } from "../../utils/useStore"; -import { observer } from "mobx-react-lite"; +import {useStore} from "../../utils/useStore"; +import {observer} from "mobx-react-lite"; import { CheckCircleOutlined, CloseOutlined, FilterOutlined, PlusSquareOutlined, } from "@ant-design/icons"; -import { PaybackModal } from "./PaybackModal"; -import { BreadcumbComponent } from "../../component/BreadcumbComponent"; -import { LINKS } from "../../routes/app"; +import {PaybackModal} from "./PaybackModal"; +import {BreadcumbComponent} from "../../component/BreadcumbComponent"; +import {LINKS} from "../../routes/app"; +import {ModalLoaderContext} from "../../utils/modal"; -const { Search } = Input; +const {Search} = Input; export const Payback = observer(() => { const store = useStore(); - const [visibleModal, setVisibleModal] = useState(false); - const [confirmLoading, setConfirmLoading] = useState(false); - const [initialData, setInitialData] = useState({}); - //const [confirmLoading, setConfirmLoading] = useState(false); - const [isLoading, setIsLoading] = useState(false); - + const modalLoader = useContext(ModalLoaderContext); useEffect(() => { - const init = async () => { - try { - setIsLoading(true); - await store.payback.getDataUser(); - //await store.role.getData(); - setIsLoading(false); - } catch (e) { - setIsLoading(false); - } - }; - - init(); + const init = async () => { + try { + modalLoader.setLoading(true); + await store.payback.getDataUser(); + modalLoader.setLoading(false); + } catch (e) { + modalLoader.setLoading(false); + } + }; + + init(); }, []); @@ -64,7 +59,7 @@ export const Payback = observer(() => { render: (text, record) => ( @@ -85,7 +80,7 @@ export const Payback = observer(() => { onClick={async () => { await handleAction(record, "accept"); }} - icon={} + icon={} style={{ backgroundColor: "#1bb91d", color: "#fff", @@ -98,7 +93,7 @@ export const Payback = observer(() => { onClick={async () => { await handleAction(record, "reject"); }} - icon={} + icon={} style={{ backgroundColor: "#ff1c1c", color: "#fff", @@ -112,7 +107,7 @@ export const Payback = observer(() => { }, ]; - if(store.authentication.userData.role === "Retail") columns.pop(); + if (store.authentication.userData.role === "Retail") columns.pop(); const routeData = [ { @@ -121,12 +116,12 @@ export const Payback = observer(() => { }, { route: LINKS.PAYBACK, - name: Payback, + name: Payback, }, ]; const onSubmit = async (data) => { - setConfirmLoading(true); + modalLoader.setLoading(true); try { // await store.membership.create(data); // message.success("Success Add New Member"); @@ -135,25 +130,25 @@ export const Payback = observer(() => { console.error(e, "apa errornya"); message.error("Failed Add Member"); } - setConfirmLoading(false); - setVisibleModal(false); + modalLoader.setLoading(false); }; - const handleAction = async (record, type) => {}; + const handleAction = async (record, type) => { + }; return (
- +
- +
- + { marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, }} /> - {store.authentication.userData.role !== "Admin" && ( + {/* {store.authentication.userData.role !== "Admin" && ( - )} + )} */} {store.ui.mediaQuery.isDesktop && ( @@ -215,7 +210,7 @@ export const Payback = observer(() => { // style: {marginBottom: "1rem", marginRight: "1rem"}, // }} dataSource={store.payback.data} - style={{ padding: 0 }} + style={{padding: 0}} renderItem={(item) => { return (
@@ -236,11 +231,11 @@ export const Payback = observer(() => { title={item.name} description={
- +
} /> -
+

{

- +
); }} @@ -260,7 +255,7 @@ export const Payback = observer(() => {
- { setInitialData({}); setVisibleModal(false); }} - /> + /> */} ); }); diff --git a/src/pages/Payback/PaybackFromUser.js b/src/pages/Payback/PaybackFromUser.js index 94077a1..1e66284 100644 --- a/src/pages/Payback/PaybackFromUser.js +++ b/src/pages/Payback/PaybackFromUser.js @@ -1,4 +1,4 @@ -import React, { useState ,useEffect} from "react"; +import React, {useState, useEffect, useContext} from "react"; import { Button, Card, @@ -12,59 +12,52 @@ import { Space, Table, } from "antd"; -import { useStore } from "../../utils/useStore"; -import { observer } from "mobx-react-lite"; +import {useStore} from "../../utils/useStore"; +import {observer} from "mobx-react-lite"; import { CheckCircleOutlined, CloseOutlined, FilterOutlined, PlusSquareOutlined, } from "@ant-design/icons"; -import { PaybackModal } from "./PaybackModal"; -import { BreadcumbComponent } from "../../component/BreadcumbComponent"; -import { LINKS } from "../../routes/app"; +import {PaybackModal} from "./PaybackModal"; +import {BreadcumbComponent} from "../../component/BreadcumbComponent"; +import {LINKS} from "../../routes/app"; +import {ModalLoaderContext} from "../../utils/modal"; -const { Search } = Input; +const {Search} = Input; export const PaybackFromUser = observer(() => { const store = useStore(); const [visibleModal, setVisibleModal] = useState(false); - const [confirmLoading, setConfirmLoading] = useState(false); const [initialData, setInitialData] = useState({}); - //const [confirmLoading, setConfirmLoading] = useState(false); - const [isLoading, setIsLoading] = useState(false); - + const modalLoader = useContext(ModalLoaderContext); useEffect(() => { - const init = async () => { - try { - setIsLoading(true); - await store.payback.getData(); - //await store.role.getData(); - setIsLoading(false); - } catch (e) { - setIsLoading(false); - } - }; - - init(); + const init = async () => { + try { + modalLoader.setLoading(true); + await store.payback.getData(); + await store.authentication.getProfile(); + modalLoader.setLoading(false); + } catch (e) { + modalLoader.setLoading(false); + } + }; + + init(); }, []); const columns = [ - // { - // title: "Name", - // dataIndex: "name", - // key: "name", - // }, { title: "Picture", dataIndex: "image_prove", key: "image_prove", render: (text, record) => ( @@ -75,6 +68,41 @@ export const PaybackFromUser = observer(() => { dataIndex: "amount", key: "amount", }, + { + title: "Action", + dataIndex: "amount", + key: "action", + render: (text, record) => ( + + + + + ), + }, // { // title: "Action", // key: "action", @@ -112,8 +140,6 @@ export const PaybackFromUser = observer(() => { // }, ]; - if(store.authentication.userData.role === "Retail") columns.pop(); - const routeData = [ { route: LINKS.HOME, @@ -121,12 +147,12 @@ export const PaybackFromUser = observer(() => { }, { route: LINKS.PAYBACKFROMUSER, - name: Payback User, + name: Payback User, }, ]; const onSubmit = async (data) => { - setConfirmLoading(true); + modalLoader.setLoading(true); try { // await store.membership.create(data); // message.success("Success Add New Member"); @@ -135,25 +161,26 @@ export const PaybackFromUser = observer(() => { console.error(e, "apa errornya"); message.error("Failed Add Member"); } - setConfirmLoading(false); + modalLoader.setLoading(false); setVisibleModal(false); }; - const handleAction = async (record, type) => {}; + const handleAction = async (record, type) => { + }; return (
- +
- +
- + { setVisibleModal(true); }} > - New + New )} @@ -181,21 +208,21 @@ export const PaybackFromUser = observer(() => { columns={columns} dataSource={store.payback.data} bordered - // pagination={{ - // pageSize: store.membership.pageSize, - // total: store.membership.total_data, - // current: store.membership.page + 1, - // showSizeChanger: true, - // simple: false - // }} - // onChange={async (page) => { - // let pageNumber = page.current; - // store.membership.pageSize = page.pageSize; - // store.membership.page = pageNumber - 1; - // // store.membership.isLoading = true; - // await store.membership.getData(); - // // store.membership.isLoading = false; - // }} + pagination={{ + pageSize: store.payback.pageSize, + total: store.payback.total_data, + current: store.payback.page + 1, + showSizeChanger: true, + simple: false + }} + onChange={async (page) => { + let pageNumber = page.current; + store.payback.pageSize = page.pageSize; + store.payback.page = pageNumber - 1; + modalLoader.setLoading(true); + await store.payback.getData(); + modalLoader.setLoading(false); + }} /> )} @@ -203,19 +230,21 @@ export const PaybackFromUser = observer(() => { { - // store.membership.pageSize = page.pageSize; - // store.membership.page = page.current; - // store.membership.getData(); - // }, - // pageSize: store.membership.pageSize, - // total: store.membership.total_data, - // current: store.membership.page, - // style: {marginBottom: "1rem", marginRight: "1rem"}, - // }} + pagination={{ + onChange: async (page) => { + store.payback.pageSize = page.pageSize; + store.payback.page = page.current; + modalLoader.setLoading(true); + await store.payback.getData(); + modalLoader.setLoading(false); + }, + pageSize: store.payback.pageSize, + total: store.payback.total_data, + current: store.payback.page, + style: {marginBottom: "1rem", marginRight: "1rem"}, + }} dataSource={store.payback.data} - style={{ padding: 0 }} + style={{padding: 0}} renderItem={(item) => { return (
@@ -236,11 +265,11 @@ export const PaybackFromUser = observer(() => { title={item.name} description={
- +
} /> -
+

{

- +
); }} @@ -262,7 +291,6 @@ export const PaybackFromUser = observer(() => { { await onSubmit(data); diff --git a/src/pages/Payback/PaybackModal.js b/src/pages/Payback/PaybackModal.js index dc87207..e87f74d 100644 --- a/src/pages/Payback/PaybackModal.js +++ b/src/pages/Payback/PaybackModal.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from "react"; +import React, {useState, useEffect, useContext} from "react"; import { Button, Form, @@ -8,36 +8,22 @@ import { Modal, Upload, } from "antd"; -import { useStore } from "../../utils/useStore"; -import { appConfig } from "../../config/app"; -import { LoadingOutlined, UploadOutlined } from "@ant-design/icons"; +import {useStore} from "../../utils/useStore"; +import {appConfig} from "../../config/app"; +import {LoadingOutlined, UploadOutlined} from "@ant-design/icons"; +import {ModalLoaderContext} from "../../utils/modal"; -export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => { +export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => { const [form] = Form.useForm(); const store = useStore(); const [fileList, setFileList] = useState([]); const [previewTitle, setPreviewTitle] = useState(""); const [previewImage, setPreviewImage] = useState(""); - const [loading, setLoading] = useState(false); const [fileUrl, setFileUrl] = useState(""); const firstIndexFileList = fileList[0]; - const [isLoading, setIsLoading] = useState(false); + const [loading, setLoading] = useState(false); + const modalLoader = useContext(ModalLoaderContext); - useEffect(() => { - const init = async () => { - try { - setIsLoading(true); - //await store.membership.getData(); - //await store.role.getData(); - await store.authentication.getProfile(); - setIsLoading(false); - } catch (e) { - setIsLoading(false); - } - }; - - init(); - }, []); const beforeUpload = (file) => { let isPdf, isLt2M; let allowedFile = ["image/jpeg", "image/png", "application/pdf"]; @@ -58,7 +44,7 @@ export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => { setPreviewTitle(file.url?.substring(file.url?.lastIndexOf("/") + 1)); }; - const handleChange = ({ fileList }) => { + const handleChange = ({fileList}) => { setFileList(fileList); if (fileList.length && fileList[0].status === "done") { form.setFieldsValue({ @@ -74,9 +60,9 @@ export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => { const uploadButton = (
{loading ? ( - + ) : ( - + )}
); @@ -92,14 +78,16 @@ export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => { const handleSubmit = async (data) => { console.log(data, "isi data2"); try { + modalLoader.setLoading(true); await store.payback.create(data); - message.success("Success Add New Member"); + modalLoader.setLoading(false); + message.success("Success Add Payback"); + await store.payback.getData(); } catch (e) { + modalLoader.setLoading(false); console.log(e, "apa errornya"); message.error("Failed Add Member"); } - - store.payback.visibleModalPayback = false; form.resetFields(); }; @@ -135,15 +123,14 @@ export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => { - +
{ beforeUpload={beforeUpload} onPreview={handlePreview} onChange={handleChange} - defaultValue={"tes"} > {!firstIndexFileList ? uploadButton : null} @@ -182,7 +168,7 @@ export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => { preview
{previewTitle}
@@ -196,9 +182,9 @@ export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => { - + diff --git a/src/pages/Product/Category.js b/src/pages/Product/Category.js index e3271e0..fee1dba 100644 --- a/src/pages/Product/Category.js +++ b/src/pages/Product/Category.js @@ -1,4 +1,4 @@ -import React, {useEffect, useState} from "react"; +import React, {useContext, useEffect, useState} from "react"; import {Button, Card, Col, Input, Row, Tabs} from "antd"; import {FilterOutlined, PlusSquareOutlined} from "@ant-design/icons"; import {BreadcumbComponent} from "../../component/BreadcumbComponent"; @@ -6,22 +6,23 @@ import {useStore} from "../../utils/useStore"; import {observer} from "mobx-react-lite"; import {LINKS} from "../../routes/app"; import {CategoryComponent} from "../../component/CategoryComponent"; +import {ModalLoaderContext} from "../../utils/modal"; const {TabPane} = Tabs; const {Search} = Input; export const Category = observer(() => { - const [isLoading, setIsLoading] = useState(false); const store = useStore(); + const modalLoader = useContext(ModalLoaderContext); useEffect(() => { const init = async () => { try { - setIsLoading(true); + modalLoader.setLoading(true); await store.category.getData(); - setIsLoading(false); + modalLoader.setLoading(false); } catch (e) { - setIsLoading(false); + modalLoader.setLoading(false); } }; diff --git a/src/pages/Product/Subcategory.js b/src/pages/Product/Subcategory.js index 663e4ac..edfa0ae 100644 --- a/src/pages/Product/Subcategory.js +++ b/src/pages/Product/Subcategory.js @@ -1,4 +1,4 @@ -import React, {useEffect, useState} from "react"; +import React, {useContext, useEffect, useState} from "react"; import {Button, Card, Col, Input, Row} from "antd"; import {PlusSquareOutlined} from "@ant-design/icons"; import {BreadcumbComponent} from "../../component/BreadcumbComponent"; @@ -6,21 +6,22 @@ import {useStore} from "../../utils/useStore"; import {observer} from "mobx-react-lite"; import {LINKS} from "../../routes/app"; import {SubcategoryComponent} from "../../component/Subcategory"; +import {ModalLoaderContext} from "../../utils/modal"; const {Search} = Input; export const Subcategory = observer(() => { - const [isLoading, setIsLoading] = useState(false); const store = useStore(); + const modalLoader = useContext(ModalLoaderContext); useEffect(() => { const init = async () => { try { - setIsLoading(true); - getData(); - setIsLoading(false); + modalLoader.setLoading(true); + await getData(); + modalLoader.setLoading(false); } catch (e) { - setIsLoading(false); + modalLoader.setLoading(false); } }; @@ -39,22 +40,22 @@ export const Subcategory = observer(() => { }, { route: LINKS.SUBCATEGORY, - name: Sub Category, + name: Sub Category, }, ]; return (
- + - +
{/* */} - + { - + ); diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js index a0aa58e..1096b36 100644 --- a/src/pages/Profile/Profile.js +++ b/src/pages/Profile/Profile.js @@ -1,4 +1,4 @@ -import React, {useEffect} from "react"; +import React, {useContext, useEffect} from "react"; import {Button, Card, Col, Row, Table, Typography} from "antd"; import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {LINKS} from "../../routes/app"; @@ -6,138 +6,143 @@ import {useStore} from "../../utils/useStore"; import {observer} from "mobx-react-lite"; import {FilterOutlined} from "@ant-design/icons"; import {format, parseISO} from "date-fns"; +import {ModalLoaderContext} from "../../utils/modal"; const {Title, Text} = Typography; export const Profile = observer(() => { - const store = useStore(); - const routeData = [ - { - route: LINKS.HOME, - name: "Home", - }, - { - route: LINKS.PROFILE, - name: Profile, - }, - ]; + const store = useStore(); + const modalLoader = useContext(ModalLoaderContext); - useEffect(() => { - (async () => { - await Promise.allSettled([ - store.authentication.getProfile(), - store.transaction.getDataHistoryTransaction(), - ]); - })() - }, []); + const routeData = [ + { + route: LINKS.HOME, + name: "Home", + }, + { + route: LINKS.PROFILE, + name: Profile, + }, + ]; - 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 ( - {format(parseISO(record.created_at), 'dd MMMM yyyy HH:mm')} - ) - }, - }, - ] + useEffect(() => { + (async () => { + modalLoader.setLoading(true); + await Promise.allSettled([ + store.authentication.getProfile(), + store.transaction.getDataHistoryTransaction(), + ]); + modalLoader.setLoading(false); + })() + }, []); - 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; + 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 ( + {format(parseISO(record.created_at), 'dd MMMM yyyy HH:mm')} + ) + }, + }, + ] - return ( -
- - - Profile - -
- - - Name - - - {store.authentication.profileData?.userDetail?.name} - - - Phone Number - - - {store.authentication.profileData?.userDetail?.phone_number} - - - Username - - - {store.authentication.profileData?.username} - - - Role - - - {store.authentication.profileData.roles?.name} - - - Superior - - - {store.authentication.profileData.superior?.username} - - - - - - - Saldo - - - {store.authentication.profileData?.wallet} - - - - - - -
- History User Transaction + 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 ( +
+ + + Profile + +
+ + + Name + + + {store.authentication.profileData?.userDetail?.name} + + + Phone Number + + + {store.authentication.profileData?.userDetail?.phone_number} + + + Username + + + {store.authentication.profileData?.username} + + + Role + + + {store.authentication.profileData.roles?.name} + + + Superior + + + {store.authentication.profileData.superior?.username} + + + + + + + Saldo + + + {store.authentication.profileData?.wallet} + + + + + + +
+ History User Transaction + + +
+ + + +
+ +
+ ) }); diff --git a/src/pages/Transaction/Product.js b/src/pages/Transaction/Product.js index 7e7884d..6e5f103 100644 --- a/src/pages/Transaction/Product.js +++ b/src/pages/Transaction/Product.js @@ -1,8 +1,9 @@ -import React, {useEffect, useState} from "react"; +import React, {useContext, useEffect, useState} from "react"; import {useStore} from "../../utils/useStore"; import {Button, Card, Col, Input, message, Modal, Row, Select} from "antd"; import {observer} from "mobx-react-lite"; import {MoneyCollectOutlined} from "@ant-design/icons"; +import {ModalLoaderContext} from "../../utils/modal"; const {Search} = Input; const {Option} = Select; @@ -10,133 +11,139 @@ const {Option} = Select; export const Product = observer(() => { const store = useStore(); - const [isLoading, setIsLoading] = useState(false); const [productData, setProductData] = useState([]); + const modalLoader = useContext(ModalLoaderContext); useEffect(() => { const init = async () => { try { - setIsLoading(true); - await store.transaction.getDataSubCategories(); - await store.transaction.getDataCategories(); - setIsLoading(false); + modalLoader.setLoading(true); + await Promise.allSettled([ + store.transaction.getDataSubCategories(), + store.transaction.getDataCategories() + ]) + modalLoader.setLoading(false); } catch (e) { - setIsLoading(false); + modalLoader.setLoading(false); } }; - init(); + init(); }, []); - // data - useEffect(() => { - console.log("⚡ transaction data store", store.transaction.data); - setProductData(store.transaction.data); - }, [store.transaction.data]); + // data + useEffect(() => { + console.log("⚡ transaction data store", store.transaction.data); + setProductData(store.transaction.data); + }, [store.transaction.data]); - // Subcategory - useEffect(() => { - console.log( - "⚡ transaction subcategory store", - store.transaction.dataSubCategories - ); - }, [store.transaction.dataSubCategories]); + // Subcategory + useEffect(() => { + console.log( + "⚡ transaction subcategory store", + store.transaction.dataSubCategories + ); + }, [store.transaction.dataSubCategories]); - const handleChangeSubcategory = async (item) => { - store.transaction.filterSubCategory = item; - await store.transaction.getData(); - }; + const handleChangeSubcategory = async (item) => { + store.transaction.filterSubCategory = item; + modalLoader.setLoading(true); + await store.transaction.getData(); + modalLoader.setLoading(false); + }; - const handleBuyProduct = async (data) => { - try { - const response = await store.transaction.buyProduct({productCode: data}); - if (response.status === 200) { - message.success("Success Buy Product"); - } else { - message.error("Failed Buy Product"); - } - } catch (e) { - console.log(e, "apa errornya"); - message.error("Failed Buy Product"); - } - }; + const handleBuyProduct = async (data) => { + modalLoader.setLoading(true); + try { + const response = await store.transaction.buyProduct({productCode: data}); + // if (response.status === 200) { + message.success("Success Buy Product"); + // } else { + //message.error("Failed Buy Product"); + //} + } catch (e) { + console.log(e, "apa errornya"); + message.error("Failed Buy Product"); + } + modalLoader.setLoading(false); + }; - return ( -
- - Sub Category - - -
- - - - - - Produk & Nominal - - - - - - {productData.length != 0 && ( - - {productData.map((item, index) => ( - - { - Modal.confirm({ - title: `Are you sure buy ${item.name}?`, - icon: , - okText: "Confirm", - cancelText: "Cancel", - okType: "primary", - onOk() { - handleBuyProduct(item.code) - }, - onCancel() { - console.log("Cancel"); - }, - }); - }} - style={{cursor: "pointer"}} - > - {item.name} -
- + return ( +
+ + Sub Category + + +
+ + + + + + Produk & Nominal + + + + + + {productData.length != 0 && ( + + {productData.map((item, index) => ( + + { + Modal.confirm({ + title: `Are you sure buy ${item.name}?`, + icon: , + okText: "Confirm", + cancelText: "Cancel", + okType: "primary", + onOk() { + handleBuyProduct(item.code) + }, + onCancel() { + console.log("Cancel"); + }, + }); + }} + style={{cursor: "pointer"}} + > + {item.name} +
+ {new Intl.NumberFormat("id-ID", { - style: "currency", - currency: "IDR", + style: "currency", + currency: "IDR", }).format(item?.currentPrice?.mark_up_price)} - - - ))} + + + ))} )} {productData.length !== 0 && ( - + diff --git a/src/pages/Transaction/Transaction.js b/src/pages/Transaction/Transaction.js index 1b0d0ec..978d6b9 100644 --- a/src/pages/Transaction/Transaction.js +++ b/src/pages/Transaction/Transaction.js @@ -1,27 +1,28 @@ -import React, {useEffect, useState} from "react"; +import React, {useContext, useEffect, useState} from "react"; import {useStore} from "../../utils/useStore"; import {Card, Tabs} from "antd"; import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {Product} from "./Product"; import {LINKS} from "../../routes/app"; import {observer} from "mobx-react-lite"; +import {ModalLoaderContext} from "../../utils/modal"; const {TabPane} = Tabs; export const Transaction = observer(() => { const store = useStore(); - const [isLoading, setIsLoading] = useState(false); + const modalLoader = useContext(ModalLoaderContext); // Init useEffect(() => { const init = async () => { try { - setIsLoading(true); + modalLoader.setLoading(true); await store.transaction.getDataCategories(); - setIsLoading(false); + modalLoader.setLoading(false); } catch (e) { - setIsLoading(false); + modalLoader.setLoading(false); } }; @@ -35,7 +36,9 @@ export const Transaction = observer(() => { const handleChangeTabs = async (key) => { store.transaction.filterCategory = key; + modalLoader.setLoading(true); await store.transaction.getDataSubCategories(); + modalLoader.setLoading(false); }; const routeData = [ @@ -50,22 +53,22 @@ export const Transaction = observer(() => { ]; return ( -
- - - - {store.transaction.dataCategories.map((item, index) => ( - - - - ))} +
+ + + + {store.transaction.dataCategories.map((item, index) => ( + + + + ))} - - -
+ + +
); }); diff --git a/src/store/authentication.js b/src/store/authentication.js index 9a98b01..0edda9e 100644 --- a/src/store/authentication.js +++ b/src/store/authentication.js @@ -34,7 +34,7 @@ export class Authentication { try { const result = await http.post('/auth/login').send({username, password}); - + TokenUtil.setAccessToken(result.body.access_token); TokenUtil.persistToken(); runInAction(() => { diff --git a/src/store/payback.js b/src/store/payback.js index c616825..adbc4f4 100644 --- a/src/store/payback.js +++ b/src/store/payback.js @@ -9,15 +9,15 @@ export class Payback { filterCategory = null; visibleModalPayback = false; - pageCategories = 0; - pageSizeCategories = 10; - dataCategories = []; - total_dataCategories = 0; + pagePayback = 0; + pageSizePayback = 10; + dataPayback = []; + total_dataPayback = 0; - pageSubCategories = 0; - pageSizeSubCategories = 10; - dataSubCategories = []; - total_dataSubCategories = 0; + pageSubPayback = 0; + pageSizeSubPayback = 10; + dataSubPayback = []; + total_dataPayback = 0; constructor(ctx) { this.ctx = ctx; @@ -31,12 +31,12 @@ export class Payback { ); //console.log(response) this.data = - response.body[0].map((item, idx) => { + response.body.data.map((item, idx) => { item.key = idx; return item; }) ?? []; - this.total_data = response?.body?.count ?? 0; + this.total_data = response.body.count ?? 0; } catch (e) { console.error(e); } @@ -47,14 +47,14 @@ export class Payback { const response = await http.get( `/transaction/deposit-return/confirmation?page=${this.page}&pageSize=${this.pageSize}` ); - console.log(response); + //console.log(response); this.data = - response.body[0].map((item, idx) => { + response.body.data.map((item, idx) => { item.key = idx; return item; }) ?? []; - this.total_data = response?.body?.count ?? 0; + this.total_data = response.body.count ?? 0; } catch (e) { console.error(e); }