diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js index 1e79010..0ffcece 100644 --- a/src/component/ProductComponent.js +++ b/src/component/ProductComponent.js @@ -79,16 +79,6 @@ export const ProductComponent = observer((props) => { currency: "IDR", }).format(text), }, - { - title: "Harga Jual", - dataIndex: "mark_up_price", - key: "mark_up_price", - render: (text) => - new Intl.NumberFormat("id-ID", { - style: "currency", - currency: "IDR", - }).format(text), - }, { title: "Harga", dataIndex: "price", @@ -139,13 +129,13 @@ export const ProductComponent = observer((props) => { }, ]; if (store.authentication.userData.role !== "Admin") columns.pop(); - if (store.authentication.userData.role !== "Admin") delete columns[4]; if (store.authentication.userData.role !== "Admin") delete columns[2]; - if (store.authentication.userData.role !== "Admin") delete columns[3]; + if (store.authentication.userData.role === "Admin Partner") delete columns[3]; if (store.authentication.userData.role !== "Admin") delete columns[6]; - if (store.authentication.userData.role === "Admin") delete columns[3]; - if (store.authentication.userData.role === "Admin") delete columns[5]; + if (store.authentication.userData.role === "Admin Partner") delete columns[7]; + if (store.authentication.userData.role === "Admin") delete columns[4]; if (store.authentication.userData.role !== "Admin") delete columns[8]; + if (store.authentication.userData.role === "Admin Partner") delete columns[5]; const deleteData = async (id) => { try { @@ -502,7 +492,7 @@ export const ProductComponent = observer((props) => { ))} - + {/* Filter Categories @@ -519,7 +509,7 @@ export const ProductComponent = observer((props) => { ))} - + */} Filter Sub-Categories diff --git a/src/component/SubcategoryComponent.js b/src/component/SubcategoryComponent.js index 3cbeb2a..fd742f2 100644 --- a/src/component/SubcategoryComponent.js +++ b/src/component/SubcategoryComponent.js @@ -85,7 +85,7 @@ export const SubcategoryComponent = observer((props) => { : message.error( response?.body?.message || "Gagal Ubah Data Sub Kategori" ); - //await getData(); + await getData(); } catch (e) { message.error( e.response?.body?.message || "Gagal Ubah Data Sub Kategori" @@ -106,6 +106,7 @@ export const SubcategoryComponent = observer((props) => { : message.error( response?.body?.message || "Gagal Tambah Sub Kategori" ); + await getData(); } catch (e) { console.log(e, "apa errornya"); message.error(e.response?.body?.message || "Gagal Tambah Sub Kategori"); diff --git a/src/pages/App/DesktopLayout.js b/src/pages/App/DesktopLayout.js index 2a51446..6eec7f0 100644 --- a/src/pages/App/DesktopLayout.js +++ b/src/pages/App/DesktopLayout.js @@ -103,7 +103,7 @@ export const DesktopLayout = observer(() => { {store.ui.mediaQuery.isMobile && ( <Drawer - title="Navigation" + title={`PPOB ${store.authentication.userData.role}`} placement={"left"} closable={false} width={"50%"} @@ -124,14 +124,14 @@ export const DesktopLayout = observer(() => { }} > <Menu> - {/* {store.authentication.userData.role !== "Admin Partner" && ( */} - <Menu.Item key="home"> - <Link to={LINKS.HOME}> - <HomeOutlined /> - <span>Beranda</span> - </Link> - </Menu.Item> - {/* )} */} + {store.authentication.userData.role !== "Retail" && ( + <Menu.Item key="home"> + <Link to={LINKS.HOME}> + <HomeOutlined /> + <span>Beranda</span> + </Link> + </Menu.Item> + )} {store.authentication.userData.role === "Admin" && ( <Menu.Item key="membership"> <Link to={LINKS.MEMBERSHIP}> @@ -140,6 +140,14 @@ export const DesktopLayout = observer(() => { </Link> </Menu.Item> )} + {store.authentication.userData.role === "Sales" && ( + <Menu.Item key="membership"> + <Link to={LINKS.MEMBERSHIP}> + <IdcardOutlined /> + <span>Keanggotaan</span> + </Link> + </Menu.Item> + )} {store.authentication.userData.role === "Supervisor" && ( <Menu.Item key="membership"> <Link to={LINKS.MEMBERSHIP}> @@ -221,14 +229,22 @@ export const DesktopLayout = observer(() => { </Link> </Menu.Item> )} - {store.authentication.userData.role === "Admin Partner" && ( + {store.authentication.userData.role === "Sales" && ( + <Menu.Item key="product"> + <Link to={LINKS.PRODUCT}> + <AppstoreAddOutlined /> + <span>Produk</span> + </Link> + </Menu.Item> + )} + {/* {store.authentication.userData.role === "Admin Partner" && ( <Menu.Item key="transaction"> <Link to={LINKS.TRANSACTION}> <ShoppingCartOutlined /> <span>Transaksi</span> </Link> </Menu.Item> - )} + )} */} {store.authentication.userData.role === "Retail" && ( <Menu.Item key="transaction"> <Link to={LINKS.TRANSACTION}> @@ -237,31 +253,30 @@ export const DesktopLayout = observer(() => { </Link> </Menu.Item> )} - {store.authentication.userData.role !== "Admin Partner" && - store.authentication.userData.role !== "Retail" && ( - <SubMenu - key="payback-main" - icon={<ProfileOutlined />} - title="Pembayaran" - > - {store.authentication.userData.role !== "Retail" && ( - <Menu.Item key="payback-to-user"> - <Link to={LINKS.PAYBACK}> - <PayCircleOutlined /> - <span>Konfirmasi</span> - </Link> - </Menu.Item> - )} - {store.authentication.userData.role !== "Admin" && ( - <Menu.Item key="payback-from-user"> - <Link to={LINKS.PAYBACK_CREATED}> - <AlipayOutlined /> - <span>Dibuat oleh Saya</span> - </Link> - </Menu.Item> - )} - </SubMenu> - )} + {store.authentication.userData.role !== "Admin Partner" && ( + <SubMenu + key="payback-main" + icon={<ProfileOutlined />} + title="Pembayaran" + > + {store.authentication.userData.role !== "Retail" && ( + <Menu.Item key="payback-to-user"> + <Link to={LINKS.PAYBACK}> + <PayCircleOutlined /> + <span>Konfirmasi</span> + </Link> + </Menu.Item> + )} + {store.authentication.userData.role !== "Admin" && ( + <Menu.Item key="payback-from-user"> + <Link to={LINKS.PAYBACK_CREATED}> + <AlipayOutlined /> + <span>Dibuat oleh Saya</span> + </Link> + </Menu.Item> + )} + </SubMenu> + )} {store.authentication.userData.role !== "Admin" && ( <Menu.Item key="profile"> <Link to={LINKS.PROFILE}> diff --git a/src/pages/App/MenuList.js b/src/pages/App/MenuList.js index f5ee614..607b3ae 100644 --- a/src/pages/App/MenuList.js +++ b/src/pages/App/MenuList.js @@ -51,14 +51,14 @@ export const MenuList = observer((props) => { overflowedIndicator={0} forceSubMenuRender={true} > - {/* {store.authentication.userData.role === "Admin" && ( */} - <Menu.Item key="home"> - <Link to={LINKS.HOME}> - <HomeOutlined /> - <span>Beranda</span> - </Link> - </Menu.Item> - {/* )} */} + {store.authentication.userData.role !== "Retail" && ( + <Menu.Item key="home"> + <Link to={LINKS.HOME}> + <HomeOutlined /> + <span>Beranda</span> + </Link> + </Menu.Item> + )} {store.authentication.userData.role === "Admin" && ( <Menu.Item key="membership"> <Link to={LINKS.MEMBERSHIP}> @@ -75,6 +75,14 @@ export const MenuList = observer((props) => { </Link> </Menu.Item> )} + {store.authentication.userData.role === "Sales" && ( + <Menu.Item key="membership"> + <Link to={LINKS.MEMBERSHIP}> + <IdcardOutlined /> + <span>Keanggotaan</span> + </Link> + </Menu.Item> + )} {store.authentication.userData.role === "Admin" && ( <SubMenu key="config" icon={<SettingOutlined />} title="Config"> <Menu.Item key="partner"> @@ -135,6 +143,14 @@ export const MenuList = observer((props) => { </Link> </Menu.Item> )} + {store.authentication.userData.role === "Sales" && ( + <Menu.Item key="retail"> + <Link to={LINKS.PRODUCT}> + <AppstoreAddOutlined /> + <span>Produk</span> + </Link> + </Menu.Item> + )} {store.authentication.userData.role === "Supervisor" && ( <Menu.Item key="retail"> <Link to={LINKS.PRODUCT}> @@ -151,31 +167,30 @@ export const MenuList = observer((props) => { </Link> </Menu.Item> )} - {store.authentication.userData.role !== "Retail" && - store.authentication.userData.role !== "Admin Partner" && ( - <SubMenu - key="payback-main" - icon={<CodepenOutlined />} - title="Pembayaran" - > - {store.authentication.userData.role !== "Retail" && ( - <Menu.Item key="payback-to-user"> - <Link to={LINKS.PAYBACK}> - <FileProtectOutlined /> - <span>Konfirmasi</span> - </Link> - </Menu.Item> - )} - {store.authentication.userData.role !== "Admin" && ( - <Menu.Item key="payback-from-user"> - <Link to={LINKS.PAYBACK_CREATED}> - <FileProtectOutlined /> - <span>Dibuat oleh Saya</span> - </Link> - </Menu.Item> - )} - </SubMenu> - )} + {store.authentication.userData.role !== "Admin Partner" && ( + <SubMenu + key="payback-main" + icon={<CodepenOutlined />} + title="Pembayaran" + > + {store.authentication.userData.role !== "Retail" && ( + <Menu.Item key="payback-to-user"> + <Link to={LINKS.PAYBACK}> + <FileProtectOutlined /> + <span>Konfirmasi</span> + </Link> + </Menu.Item> + )} + {store.authentication.userData.role !== "Admin" && ( + <Menu.Item key="payback-from-user"> + <Link to={LINKS.PAYBACK_CREATED}> + <FileProtectOutlined /> + <span>Dibuat oleh Saya</span> + </Link> + </Menu.Item> + )} + </SubMenu> + )} {store.authentication.userData.role !== "Admin" && ( <Menu.Item key="profile"> <Link to={LINKS.PROFILE}> diff --git a/src/pages/Login/Login.js b/src/pages/Login/Login.js index 7a46f2e..a0df820 100644 --- a/src/pages/Login/Login.js +++ b/src/pages/Login/Login.js @@ -1,9 +1,9 @@ import React 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 { 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"; export const Login = observer(() => { const store = useStore(); @@ -23,21 +23,31 @@ export const Login = observer(() => { } message.error(e.message); } - history.push(LINKS.HOME); - } + store.authentication.userData.role === "Retail" + ? history.push(LINKS.TRANSACTION) + : history.push(LINKS.HOME); + }; return ( - <div style={{width: '100vw', display: 'flex', justifyContent: 'center'}}> - <Row justify={'center'}> + <div style={{ width: "100vw", display: "flex", justifyContent: "center" }}> + <Row justify={"center"}> <Col> - <div style={{ - display: 'flex', - justifyContent: 'flex-start', - marginTop: '5vh', - flexDirection: 'column', - alignItems: 'center', - }}> - <div style={{display: 'flex', flexDirection: 'column', alignItems: 'stretch'}}> + <div + style={{ + display: "flex", + justifyContent: "flex-start", + marginTop: "5vh", + flexDirection: "column", + alignItems: "center", + }} + > + <div + style={{ + display: "flex", + flexDirection: "column", + alignItems: "stretch", + }} + > <Typography.Paragraph style={{ margin: 0, @@ -52,11 +62,11 @@ export const Login = observer(() => { </Typography.Paragraph> </div> <Card - style={{width: 320, textAlign: 'center'}} - headStyle={{fontSize: 13, fontWeight: 200}} + style={{ width: 320, textAlign: "center" }} + headStyle={{ fontSize: 13, fontWeight: 200 }} className={"shadow"} bordered={true} - title={'Sign in to your account'} + title={"Sign in to your account"} > <Form layout={"vertical"} @@ -64,17 +74,32 @@ export const Login = observer(() => { onFinish={handleLogin} className={"w-9/12"} > - <Form.Item label="Username" name="username" - rules={[{required: true, message: 'Please input your username!'}]}> - <Input/> + <Form.Item + label="Username" + name="username" + rules={[ + { required: true, message: "Please input your username!" }, + ]} + > + <Input /> </Form.Item> - <Form.Item label="Password" name="password" - rules={[{required: true, message: 'Please input your password!'}]}> - <Input.Password/> + <Form.Item + label="Password" + name="password" + rules={[ + { required: true, message: "Please input your password!" }, + ]} + > + <Input.Password /> </Form.Item> <div className={"flex flex-row justify-between content-center"}> - <Button type="primary" htmlType="submit" - loading={store.authentication.isLoginLoading}>Submit</Button> + <Button + type="primary" + htmlType="submit" + loading={store.authentication.isLoginLoading} + > + Submit + </Button> </div> </Form> </Card> diff --git a/src/pages/Membership/FilterUser.js b/src/pages/Membership/FilterUser.js new file mode 100644 index 0000000..814d3c6 --- /dev/null +++ b/src/pages/Membership/FilterUser.js @@ -0,0 +1,82 @@ +import React, { useState } from "react"; +import { Form, Input, Modal, Select, InputNumber,Row,Title,Col,Option } from "antd"; +import { useStore } from "../../utils/useStore"; +import { observer } from "mobx-react-lite"; + + +export const FilterUser = observer(() => { + const store = useStore(); +// const [form] = Form.useForm(); +// const { Option } = Select; +// const store = useStore(); +// const [value, setValue] = useState(); + + return ( + <Modal + visible={store.membership.visibleModalFilterMembership} + title={"Filter"} + //footer={footerLayoutFilter} + > + <Row> + <Col span={24}> + <Title level={5} type={"secondary"} strong> + Filter Supplier + + + + + + Filter Categories + + + + + + Filter Sub-Categories + + + + + + ); +}); diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js index fd5fe25..ae1cd98 100644 --- a/src/pages/Membership/Membership.js +++ b/src/pages/Membership/Membership.js @@ -13,10 +13,17 @@ import { Space, Table, Tag, + Select, + Option, + Typography, } from "antd"; import { useStore } from "../../utils/useStore"; import { observer } from "mobx-react-lite"; -import { DownloadOutlined, PlusSquareOutlined } from "@ant-design/icons"; +import { + DownloadOutlined, + PlusSquareOutlined, + FilterOutlined, +} from "@ant-design/icons"; import { MembershipModal } from "./MembershipModal"; import { BreadcumbComponent } from "../../component/BreadcumbComponent"; import { LINKS } from "../../routes/app"; @@ -25,6 +32,8 @@ import { ModalLoaderContext } from "../../utils/modal"; export const Membership = observer(() => { const history = useHistory(); + const { Option } = Select; + const { Title } = Typography; const [form] = Form.useForm(); const store = useStore(); const [visibleModal, setVisibleModal] = useState(false); @@ -33,14 +42,17 @@ export const Membership = observer(() => { const [initialData, setInitialData] = useState({}); const [confirmLoading, setConfirmLoading] = useState(false); const modalLoader = useContext(ModalLoaderContext); + const [filterMembership, setFilterMembership] = useState([]); + const [filterPartner, setFilterPartner] = useState([]); useEffect(() => { const init = async () => { try { modalLoader.setLoading(true); const isAdmin = store.authentication.userData.role === "Admin"; - await getData(); + await store.membership.getDataBySuperior(); + await store.partner.getData(); await store.role.getData(isAdmin); modalLoader.setLoading(false); } catch (e) { @@ -81,6 +93,59 @@ export const Membership = observer(() => { } }; + const handleRemoveFilter = async () => { + store.membership.filterMembership = null; + store.membership.filterPartner = null; + setFilterMembership([]); + setFilterPartner([]); + //store.product.filterCategory = null; + //setFilterSubCategories([]); + await store.membership.getData(); + store.membership.visibleModalFiltermembership = false; + }; + const handleCancelFilter = () => { + setFilterMembership([]); + setFilterPartner([]); + //store.product.filterCategory = null; + //setFilterSubCategories([]); + store.membership.visibleModalFilterMembership = false; + }; + + const handleSubmitFilter = async () => { + store.membership.filterMembership = filterMembership; + store.membership.filterPartner = filterPartner; + modalLoader.setLoading(true); + await store.membership.getData(); + //await store.product.getData(); + modalLoader.setLoading(false); + store.membership.visibleModalFilterMembership = false; + }; + + const footerLayoutFilter = [ + , + , + , + ]; const handleCancelTransaction = () => { setIsVisibleTopUpModal(false); setDestination(null); @@ -238,10 +303,16 @@ export const Membership = observer(() => {
- {/* */} + {store.authentication.userData.role === "Admin" && ( + + )} {/* { description={

+ Saldo System : {item.name}
Role : {item.roleName}
- Saldo Supplier : {item.coa.amount} - {" "} -
- - Saldo System : {item.coa.amount} + Saldo Supplier : {item.coa?.amount} {" "}

); }); diff --git a/src/pages/Membership/MembershipModal.js b/src/pages/Membership/MembershipModal.js index b7b1ade..c58d4e8 100644 --- a/src/pages/Membership/MembershipModal.js +++ b/src/pages/Membership/MembershipModal.js @@ -1,7 +1,17 @@ import React, { useState } from "react"; -import { Form, Input, Modal, Select, InputNumber } from "antd"; +import { + Form, + Input, + Modal, + Select, + InputNumber, + Row, + Col, + Typography, +} from "antd"; import { useStore } from "../../utils/useStore"; +const { Title, Text } = Typography; export const MembershipModal = ({ visible, onCreate, diff --git a/src/pages/Payback/Payback.js b/src/pages/Payback/Payback.js index 7ffebc2..7a3e6a8 100644 --- a/src/pages/Payback/Payback.js +++ b/src/pages/Payback/Payback.js @@ -1,4 +1,4 @@ -import React, { useContext, useEffect } from "react"; +import React, { useContext, useEffect, useState } from "react"; import { Button, Card, @@ -13,6 +13,9 @@ import { Space, Table, Tag, + Select, + Typography, + DatePicker, } from "antd"; import { useStore } from "../../utils/useStore"; import { observer } from "mobx-react-lite"; @@ -31,10 +34,14 @@ import { capitalize } from "lodash"; import { PAYBACK_STATUS } from "../../constants/payback"; const { Search } = Input; - +const { RangePicker } = DatePicker; export const Payback = observer(() => { + const { Option } = Select; + const { Title } = Typography; const store = useStore(); const modalLoader = useContext(ModalLoaderContext); + const [filterSupplier, setFilterSupplier] = useState([]); + const [filterSubCategories, setFilterSubCategories] = useState([]); useEffect(() => { const init = async () => { @@ -201,6 +208,67 @@ export const Payback = observer(() => { modalLoader.setLoading(false); }; + const handleRemoveFilter = async () => { + store.product.filterSupplier = null; + store.product.filterSubCategory = null; + setFilterSupplier([]); + store.product.filterCategory = null; + setFilterSubCategories([]); + await store.product.getData(); + store.product.visibleModalFilterProduct = false; + }; + + const handleCancelFilter = () => { + setFilterSupplier([]); + store.product.filterCategory = null; + setFilterSubCategories([]); + store.payback.visibleModalFilterPayback = 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 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 (
@@ -208,10 +276,14 @@ export const Payback = observer(() => {
- {/* */} + {/* { )}
+ + + + + From + + + + + + Date + + + {/* */} + + {/* + + Filter Sub-Categories + + + */} + +
); }); diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js index 7bbab08..58017d7 100644 --- a/src/pages/Profile/Profile.js +++ b/src/pages/Profile/Profile.js @@ -1,18 +1,32 @@ -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"; -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; +import React, { useContext, useEffect, useState } from "react"; +import { + Button, + Card, + Col, + Row, + Table, + Typography, + DatePicker, + Modal, + Form, +} from "antd"; +import moment from "moment"; +import { BreadcumbComponent } from "../../component/BreadcumbComponent"; +import { LINKS } from "../../routes/app"; +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; +const { RangePicker } = DatePicker; export const Profile = observer(() => { const store = useStore(); + const [form] = Form.useForm(); const modalLoader = useContext(ModalLoaderContext); + const [filterStart, setFilterStart] = useState([]); + const [filterEnd, setFilterEnd] = useState([]); const routeData = [ { @@ -21,7 +35,7 @@ export const Profile = observer(() => { }, { route: LINKS.PROFILE, - name: Profil, + name: Profil, }, ]; @@ -33,68 +47,144 @@ export const Profile = observer(() => { store.transaction.getDataHistoryTransaction(), ]); modalLoader.setLoading(false); - })() + })(); }, []); + const handleRemoveFilter = async () => { + store.transaction.filterStart = null; + store.transaction.filterEnd = null; + setFilterStart([]); + setFilterEnd([]); + await store.transaction.getDataHistoryTransaction(); + store.product.visibleModalFilterProduct = false; + }; + + const handleCancelFilter = () => { + store.transaction.filterStart = null; + store.transaction.filterEnd = null; + store.transaction.visibleModalFilterTransaction = false; + }; + + const handleSubmitFilter = async () => { + // store.product.filterSupplier = filterSupplier; + // store.product.filterSubCategory = filterSubCategories; + // modalLoader.setLoading(true); + // await store.product.getData(); + // modalLoader.setLoading(false); + // store.transaction.visibleModalFilterTransaction = false; + + console.log(form.getFieldsValue(), "Tes"); + const data = form.getFieldsValue(); + store.transaction.filterStart = data.start_date; + store.transaction.filterEnd = data.end_date; + modalLoader.setLoading(true); + await store.transaction.getDataHistoryTransaction(); + modalLoader.setLoading(false); + store.transaction.visibleModalFilterTransaction = 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 = [ + , + , + , + ]; const columns = [ { - title: 'Markup Price', - dataIndex: 'mark_up_price', - key: 'mark_up_price', - width: '20%', + title: "Markup Price", + dataIndex: "mark_up_price", + key: "mark_up_price", + width: "20%", render: (text) => - new Intl.NumberFormat("id-ID", { - style: "currency", - currency: "IDR", - }).format(text), + new Intl.NumberFormat("id-ID", { + style: "currency", + currency: "IDR", + }).format(text), }, { - title: 'Name', - dataIndex: 'name', - key: 'name', - width: '50%', + title: "Name", + dataIndex: "name", + key: "name", + width: "50%", }, { - title: 'Transaction Date', - dataIndex: 'created_at', - key: 'created_at', + title: "Transaction Date", + dataIndex: "created_at", + key: "created_at", render: (text, record) => { return ( - {format(parseISO(record.created_at), 'mm:HH dd-MM-yyyy')} - ) + {format(parseISO(record.created_at), "mm:HH dd-MM-yyyy")} + ); }, }, - ] + ]; - 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 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} + + {store.authentication.profileData?.userDetail?.name} + Phone Number - {store.authentication.profileData?.userDetail?.phone_number} + + {store.authentication.profileData?.userDetail?.phone_number} + Username @@ -112,63 +202,175 @@ export const Profile = observer(() => { Superior - {store.authentication.profileData.superior?.username} + + {store.authentication.profileData.superior?.username} + - + - - Saldo + + + Saldo + - { - new Intl.NumberFormat("id-ID", { + + {new Intl.NumberFormat("id-ID", { style: "currency", - currency: "IDR" - }) - .format(store.authentication.profileData?.wallet || 0)} + currency: "IDR", + }).format(store.authentication.profileData?.wallet || 0)} + + + + + + + + Profit + + + + + {new Intl.NumberFormat("id-ID", { + style: "currency", + currency: "IDR", + }).format(store.authentication.profileData?.wallet || 0)} + + +
- History User Transaction - - {/* */} + { - let pageNumber = page.current; - store.transaction.pageSizeHistoryTransaction = page.pageSize; - store.transaction.pageHistoryTransaction = pageNumber - 1; - modalLoader.setLoading(true); - await store.transaction.getDataHistoryTransaction(); - modalLoader.setLoading(false); - }} + columns={columns} + bordered + dataSource={store.transaction.dataHistoryTransaction} + pagination={{ + pageSize: store.transaction.pageSizeHistoryTransaction, + total: store.transaction.total_dataHistoryTransaction, + current: store.transaction.pageHistoryTransaction + 1, + showSizeChanger: true, + simple: false, + }} + onChange={async (page) => { + let pageNumber = page.current; + store.transaction.pageSizeHistoryTransaction = page.pageSize; + store.transaction.pageHistoryTransaction = pageNumber - 1; + modalLoader.setLoading(true); + await store.transaction.getDataHistoryTransaction(); + modalLoader.setLoading(false); + }} /> -
+
+ + +
+ + + + + + + + + {/* */} + + {/* + + Filter Categories + + + + + + Filter Sub-Categories + + + */} + + - ) + ); }); diff --git a/src/pages/Transaction/Product.js b/src/pages/Transaction/Product.js index d79abf5..c4558ed 100644 --- a/src/pages/Transaction/Product.js +++ b/src/pages/Transaction/Product.js @@ -160,9 +160,9 @@ export const Product = observer(() => { > diff --git a/src/pages/Transaction/Transaction.js b/src/pages/Transaction/Transaction.js index 7c4b7a3..7984069 100644 --- a/src/pages/Transaction/Transaction.js +++ b/src/pages/Transaction/Transaction.js @@ -1,17 +1,28 @@ -import React, {message, useContext, useEffect} 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; +import React, { message, useContext, useEffect, useState } from "react"; +import { useStore } from "../../utils/useStore"; +import { + Card, + Tabs, + Col, + Button, + Typography, + Select, + Modal, + Row, + DatePicker, +} 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"; +import { FilterOutlined } from "@ant-design/icons"; +const { TabPane } = Tabs; export const Transaction = observer(() => { const store = useStore(); - + const { Title } = Typography; + const { Option } = Select; const modalLoader = useContext(ModalLoaderContext); useEffect(() => { @@ -50,25 +61,30 @@ export const Transaction = observer(() => { }, { route: LINKS.TRANSACTION, - name: Transaksi, + name: Transaksi, }, ]; return (
- + - +
+ {/* */} + + {store.transaction.dataCategories.map((item, index) => ( - + ))} - diff --git a/src/store/category.js b/src/store/category.js index 12e238c..bec46af 100644 --- a/src/store/category.js +++ b/src/store/category.js @@ -22,7 +22,7 @@ export class Category { async getData() { try { const response = await http.get(`/product/categories?page=${this.page}&pageSize=${this.pageSize}`); - console.log(response) + //console.log(response) this.data = response.body.data.map((item, idx) => { item.key = idx; return item diff --git a/src/store/membership.js b/src/store/membership.js index 5fb1f9d..197eb89 100644 --- a/src/store/membership.js +++ b/src/store/membership.js @@ -9,6 +9,11 @@ export class Membership { dataDetail = {}; + + //filter + visibleModalFilterMembership = false; + filterMembership = null; + filterPartner = null; constructor(ctx) { this.ctx = ctx; makeAutoObservable(this); @@ -16,7 +21,10 @@ export class Membership { async getData() { try { - const response = await http.get(`/users?page=${this.page}&pageSize=${this.pageSize}`); + const response = await http.get(`/users?page=${this.page}&pageSize=${this.pageSize}&superrior=${this.filterMembership}&type=${this.filterPartner}`); + // console.log(this.filterMembership) + // console.log(this.filterPartner) + // console.log(response) this.data = response.body.data.map((item, idx) => { item.key = idx; item.name = item?.user_detail?.name; @@ -35,7 +43,7 @@ export class Membership { async getDetail(id) { try { const response = await http.get(`/users/`+id); - console.log(response,'Data Detail') + //console.log(response,'Data Detail') this.dataDetail = response.body.data } catch (e) { console.error(e); diff --git a/src/store/payback.js b/src/store/payback.js index 279d56f..3ef65d0 100644 --- a/src/store/payback.js +++ b/src/store/payback.js @@ -13,7 +13,10 @@ export class Payback { pageSizeConfirmation = 10; dataConfirmation = []; totalDataConfirmation = 0; + //data=[] + //filter + visibleModalFilterPayback = false; constructor(ctx) { this.ctx = ctx; makeAutoObservable(this); @@ -21,8 +24,7 @@ export class Payback { async getDataCreated() { try { - const response = await http.get( - `/transaction/deposit-return?page=${this.pageCreated}&pageSize=${this.pageSizeCreated}` + const response = await http.get(`/transaction/deposit-return?page=${this.pageCreated}&pageSize=${this.pageSizeCreated}` ); this.dataCreated = response.body.data.map((item, idx) => { item.key = idx; @@ -40,6 +42,7 @@ export class Payback { const response = await http.get( `/transaction/deposit-return/confirmation?page=${this.pageConfirmation}&pageSize=${this.pageSizeConfirmation}` ); + console.log(response) this.dataConfirmation = response.body.data.map((item, idx) => { item.key = idx; return item; @@ -84,6 +87,8 @@ export class Payback { async confirmPayback(id, data) { try { const response = await http.put(`/transaction/deposit-return/confirmation/${id}/${data}`); + // console.log(response) + // this.data=response.body.data await Promise.all([ this.getDataConfirmation(), this.getDataCreated() diff --git a/src/store/subcategory.js b/src/store/subcategory.js index e27fa3a..293830b 100644 --- a/src/store/subcategory.js +++ b/src/store/subcategory.js @@ -27,6 +27,7 @@ export class Subcategory { async getData() { try { const response = await http.get(`/product/sub-categories?page=${this.page}&pageSize=${this.pageSize}`); + console.log(response) this.data = response.body.data.map((item, idx) => { item.key = idx; item.categoryName = item.category.name; diff --git a/src/store/transaction.js b/src/store/transaction.js index 951c4d8..47cba84 100644 --- a/src/store/transaction.js +++ b/src/store/transaction.js @@ -1,150 +1,165 @@ -import {makeAutoObservable} from "mobx"; -import {http} from "../utils/http"; +import { makeAutoObservable } from "mobx"; +import { http } from "../utils/http"; export class Transaction { - page = 0; - pageSize = 10 - data = []; - total_data = 0; - filterSubCategory = null; - visibleModalProduct = false; - visibleModalTransaction = false; + page = 0; + pageSize = 10; + data = []; + total_data = 0; + filterSubCategory = null; + visibleModalProduct = false; + visibleModalTransaction = false; - pageCategories = 0; - pageSizeCategories = 10 - dataCategories = []; - total_dataCategories = 0; + pageCategories = 0; + pageSizeCategories = 10; + dataCategories = []; + total_dataCategories = 0; - pageSubCategories = 0; - pageSizeSubCategories = 10 - dataSubCategories = []; - total_dataSubCategories = 0; - filterSubCategory = null; + pageSubCategories = 0; + pageSizeSubCategories = 10; + dataSubCategories = []; + total_dataSubCategories = 0; + filterSubCategory = null; - pageHistoryTransaction = 0; - pageSizeHistoryTransaction = 10 - dataHistoryTransaction = []; - total_dataHistoryTransaction = 0; + pageHistoryTransaction = 0; + pageSizeHistoryTransaction = 10; + dataHistoryTransaction = []; + total_dataHistoryTransaction = 0; - pageHistoryTopUp = 0; - pageSizeHistoryTopUp = 10; - dataHistoryTopUp = []; - total_dataHistoryTopUp = 0; + pageHistoryTopUp = 0; + pageSizeHistoryTopUp = 10; + dataHistoryTopUp = []; + total_dataHistoryTopUp = 0; - constructor(ctx) { - this.ctx = ctx; - makeAutoObservable(this); + //filter + visibleModalFilterTransaction = false; + filterStart = null; + filterEnd = null; + constructor(ctx) { + this.ctx = ctx; + makeAutoObservable(this); + } + + async getData() { + try { + const response = await http.get( + `/product/by-categories-all?sub-category=${this.filterSubCategory}&page=${this.page}&pageSize=${this.pageSize}` + ); + this.data = response.body.data ?? []; + this.total_data = response?.body?.count ?? 0; + } catch (e) { + console.error(e); } + } - async getData() { - try { - const response = await http.get(`/product/by-categories-all?sub-category=${this.filterSubCategory}&page=${this.page}&pageSize=${this.pageSize}`); - this.data = response.body.data ?? [] - this.total_data = response?.body?.count ?? 0 - } catch (e) { - console.error(e); - } + async getDataSubCategories() { + try { + const response = await http.get( + `/product/sub-categories?category=${this.filterCategory}&page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}` + ); + this.dataSubCategories = response.body.data ?? []; + this.total_dataSubCategories = response.body.count ?? 0; + } catch (e) { + console.error(e); } + } - async getDataSubCategories() { - try { - const response = await http.get(`/product/sub-categories?category=${this.filterCategory}&page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`); - this.dataSubCategories = response.body.data ?? [] - this.total_dataSubCategories = response.body.count ?? 0 - } catch (e) { - console.error(e); - } + async getDataCategories() { + try { + const response = await http.get( + `/product/categories?page=${this.pageCategories}&pageSize=${this.pageSizeCategories}` + ); + this.dataCategories = response.body.data ?? []; + this.total_dataCategories = response?.body?.count ?? 0; + if (this.dataCategories.length > 0) { + this.filterCategory = this.dataCategories[0].id; + } + } catch (e) { + console.error(e); } + } - async getDataCategories() { - try { - const response = await http.get(`/product/categories?page=${this.pageCategories}&pageSize=${this.pageSizeCategories}`); - this.dataCategories = response.body.data ?? [] - this.total_dataCategories = response?.body?.count ?? 0 - if (this.dataCategories.length > 0) { - this.filterCategory = this.dataCategories[0].id - } - } catch (e) { - console.error(e); - } + async getDataHistoryTransaction() { + try { + const response = await http.get( + `/transaction/history?page=${this.pageHistoryTransaction}&pageSize=${this.pageSizeHistoryTransaction}&start=${this.filterStart}&end=${this.filterEnd}` + ); + console.log(response); + this.dataHistoryTransaction = response.body.data ?? []; + this.total_dataHistoryTransaction = response?.body?.count ?? 0; + } catch (e) { + console.error(e); } + } - async getDataHistoryTransaction() { - try { - const response = await http.get(`/transaction/history?page=${this.pageHistoryTransaction}&pageSize=${this.pageSizeHistoryTransaction}`); - this.dataHistoryTransaction = response.body.data ?? [] - this.total_dataHistoryTransaction = response?.body?.count ?? 0 - } catch (e) { - console.error(e); - } + async getDataHistoryTopUp(id) { + try { + const response = await http.get( + `/transaction/history-deposit?page=${this.pageHistoryTopUp}&pageSize=${this.pageSizeHistoryTopUp}&user-destination=${id}` + ); + this.dataHistoryTopUp = response.body.data ?? []; + this.total_dataHistoryTopUp = response?.body?.count ?? 0; + } catch (e) { + console.error(e); } + } - async getDataHistoryTopUp(id) { - try { - const response = await http.get(`/transaction/history-deposit?page=${this.pageHistoryTopUp}&pageSize=${this.pageSizeHistoryTopUp}&user-destination=${id}`); - this.dataHistoryTopUp = response.body.data ?? [] - this.total_dataHistoryTopUp = response?.body?.count ?? 0 - } catch (e) { - console.error(e); - } + async create(data) { + try { + const response = await http.post("/product").send(data); + await this.getData(); + return response; + } catch (e) { + console.error(e); } + } - async create(data) { - try { - const response = await http.post('/product').send(data); - await this.getData(); - return response; - } catch (e) { - console.error(e); - } + async buyProduct(data) { + try { + const response = await http.post("/transaction/order").send(data); + return response; + } catch (e) { + console.error(e); } + } - async buyProduct(data) { - try { - const response = await http.post('/transaction/order').send(data); - return response; - } catch (e) { - console.error(e); - } + async update(id, data) { + try { + const response = await http.put(`/product/${id}`).send(data); + await this.getData(); + return response; + } catch (e) { + console.error(e); } + } - async update(id, data) { - try { - const response = await http.put(`/product/${id}`).send(data); - await this.getData(); - return response; - } catch (e) { - console.error(e); - } + async delete(id) { + try { + const response = await http.del(`/product/${id}`); + await this.getData(); + return response; + } catch (e) { + console.error(e); } + } - async delete(id) { - try { - const response = await http.del(`/product/${id}`); - await this.getData(); - return response; - } catch (e) { - console.error(e); - } + async distribute(data) { + try { + const response = await http.post("/transaction/distribute").send(data); + return response; + } catch (e) { + console.error(e); } + } - async distribute(data) { - try { - const response = await http.post('/transaction/distribute').send(data); - return response; - } catch (e) { - console.error(e); - } - } - - async distributeAdmin(data) { - try { - const response = await http.post('/transaction/distribute-admin').send(data); - return response; - } catch (e) { - console.error(e); - } + async distributeAdmin(data) { + try { + const response = await http + .post("/transaction/distribute-admin") + .send(data); + return response; + } catch (e) { + console.error(e); } + } } - - diff --git a/src/store/ui.js b/src/store/ui.js index f5e9710..077cd8f 100644 --- a/src/store/ui.js +++ b/src/store/ui.js @@ -23,7 +23,7 @@ export class UI { }; toggleLeftDrawerIsShown() { - console.log('what') + //console.log('what') this.leftDrawerIsShown = !this.leftDrawerIsShown; }