diff --git a/src/component/CategoryComponent.js b/src/component/CategoryComponent.js index 9005485..753342e 100644 --- a/src/component/CategoryComponent.js +++ b/src/component/CategoryComponent.js @@ -139,7 +139,7 @@ export const CategoryComponent = observer((props) => { store.category.pageSize = page.pageSize; store.category.page = pageNumber - 1; modalLoader.setLoading(true); - //await store.category.getData(); + await store.category.getData(); modalLoader.setLoading(false); }} /> diff --git a/src/component/CommissionComponent.js b/src/component/CommissionComponent.js index 0cf36e8..f6bbdfc 100644 --- a/src/component/CommissionComponent.js +++ b/src/component/CommissionComponent.js @@ -1,9 +1,8 @@ -import React, {useContext, useEffect, useState} from "react"; -import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd"; +import React, {useContext, useState} from "react"; +import {Button, Form, Input, message, Modal, 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) => { @@ -32,6 +31,7 @@ export const CommissionComponent = observer((props) => { title: "Amount", dataIndex: "commission", key: "commission", + render: (text) => {text}%, }, { title: "Action", @@ -82,7 +82,7 @@ export const CommissionComponent = observer((props) => { store.commission.pageSize = page.pageSize; store.commission.page = pageNumber - 1; modalLoader.setLoading(true); - //await store.commission.getData(); + await store.commission.getData(); modalLoader.setLoading(false); }} /> diff --git a/src/component/PartnerComponent.js b/src/component/PartnerComponent.js index 5e49029..7a3afd0 100644 --- a/src/component/PartnerComponent.js +++ b/src/component/PartnerComponent.js @@ -211,7 +211,7 @@ export const PartnerComponent = observer((props) => { store.partner.pageSize = page.pageSize; store.partner.page = pageNumber - 1; modalLoader.setLoading(true); - //await store.partner.getData(); + await store.partner.getData(); modalLoader.setLoading(false); }} /> diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js index 96d0668..47aadb3 100644 --- a/src/component/ProductComponent.js +++ b/src/component/ProductComponent.js @@ -1,5 +1,20 @@ import React, {useContext, useState} from "react"; -import {Button, Col, Divider, Form, Input, List, message, Modal, Row, Select, Table, Tag, Typography,} from "antd"; +import { + Button, + Col, + Divider, + Form, + Input, + InputNumber, + List, + message, + Modal, + Row, + Select, + Table, + Tag, + Typography, +} from "antd"; import {observer} from "mobx-react-lite"; import {ExclamationCircleOutlined} from "@ant-design/icons"; import {useHistory} from "react-router-dom"; @@ -48,11 +63,21 @@ export const ProductComponent = observer((props) => { title: "Harga Beli", dataIndex: "current_price_price", key: "current_price_price", + render: (text) => + new Intl.NumberFormat("id-ID", { + style: "currency", + 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: "Gangguan", @@ -73,10 +98,10 @@ export const ProductComponent = observer((props) => { key: "tersedia", render: (text, record) => ( - {record?.status === "ACTIVE" ? " Tersedia" : "Tidak"} + {record?.product_status === "ACTIVE" ? " Tersedia" : "Tidak"} ), }, @@ -84,14 +109,14 @@ export const ProductComponent = observer((props) => { title: "Action", key: "action", render: (text, record) => ( - + ), }, ]; @@ -197,12 +222,12 @@ export const ProductComponent = observer((props) => { const footerLayoutFilter = [ , @@ -285,16 +310,14 @@ export const ProductComponent = observer((props) => { >

- Nama Produk : {item.name}
- Harga Beli : {item.currentPrice.price} + {item.product_name}
+ Harga Beli : {item.current_price_price}
- - Harga Jual : {item.currentPrice.mark_up_price} - + Harga Jual : {item.mark_up_price}

@@ -308,10 +331,14 @@ export const ProductComponent = observer((props) => { }} > - {item?.status === "ACTIVE" ? " Tersedia" : "Tidak"} + {item?.product_status === "ACTIVE" + ? " Tersedia" + : "Tidak"}

@@ -357,14 +384,26 @@ export const ProductComponent = observer((props) => { label="Price" rules={[{ required: true, message: "Please input price!" }]} > - + + `Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",") + } + parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")} + /> - + + `Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",") + } + parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")} + /> { > @@ -412,18 +451,18 @@ export const ProductComponent = observer((props) => { Filter Supplier @@ -432,16 +471,16 @@ export const ProductComponent = observer((props) => { Filter Categories @@ -450,18 +489,18 @@ export const ProductComponent = observer((props) => { Filter Sub-Categories diff --git a/src/component/Subcategory.js b/src/component/SubcategoryComponent.js similarity index 94% rename from src/component/Subcategory.js rename to src/component/SubcategoryComponent.js index 283aedc..0b01a76 100644 --- a/src/component/Subcategory.js +++ b/src/component/SubcategoryComponent.js @@ -1,30 +1,17 @@ -import React, { useContext, useState,useEffect } from "react"; -import { - Button, - Form, - Input, - message, - Modal, - Select, - Space, - Table, - List, - Tag, - Divider, -} from "antd"; -import { observer } from "mobx-react-lite"; -import { useHistory } from "react-router-dom"; -import { useStore } from "../utils/useStore"; -import { ModalLoaderContext } from "../utils/modal"; +import React, {useContext, useEffect, useState} from "react"; +import {Button, Divider, Form, Input, List, message, Modal, Select, Space, Table,} from "antd"; +import {observer} from "mobx-react-lite"; +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 {Option} = Select; const [idData, setIdData] = useState(""); const modalLoader = useContext(ModalLoaderContext); useEffect(() => { - + getData() }, []) const getData = async () => { @@ -126,7 +113,7 @@ export const SubcategoryComponent = observer((props) => { store.subcategory.pageSize = page.pageSize; store.subcategory.page = pageNumber - 1; modalLoader.setLoading(true); - // await getData(); + await getData(); modalLoader.setLoading(false); }} /> diff --git a/src/component/SupplierComponent.js b/src/component/SupplierComponent.js index dce358e..af6b6e4 100644 --- a/src/component/SupplierComponent.js +++ b/src/component/SupplierComponent.js @@ -219,7 +219,7 @@ export const SupplierComponent = observer((props) => { store.supplier.pageSize = page.pageSize; store.supplier.page = pageNumber - 1; modalLoader.setLoading(true); - //await store.supplier.getData(); + await store.supplier.getData(); modalLoader.setLoading(false); }} /> diff --git a/src/component/TopupsaldoModal.js b/src/component/TopupsaldoModal.js index 376869e..cd9ff86 100644 --- a/src/component/TopupsaldoModal.js +++ b/src/component/TopupsaldoModal.js @@ -1,8 +1,8 @@ -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"; +import React, { useContext } from "react"; +import { Form, Input, message, Modal, InputNumber } 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(); @@ -27,7 +27,7 @@ export const TopupsaldoModal = observer((props) => { store.supplier.visibleModalTransaction = false; form.resetFields(); }; - + return (
{
- + - + + `Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",") + } + parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")} + />
diff --git a/src/index.css b/src/index.css index 3c1a8ed..18d9f14 100644 --- a/src/index.css +++ b/src/index.css @@ -61,8 +61,9 @@ code { background-color: #e3e8ee !important; } .ant-menu-submenu-arrow{ - padding-right: 40px !important; + padding-right: 40px !important; } + .ant-breadcrumb { margin-bottom: 10px !important; } @@ -70,4 +71,8 @@ code { .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn { color: #ed1f24 !important; border-color: #ed1f24 !important; +} + +.profile-container .ant-popover-inner-content { + padding: 0 !important; } \ No newline at end of file diff --git a/src/pages/App/DesktopLayout.js b/src/pages/App/DesktopLayout.js index ffe6524..0769e58 100644 --- a/src/pages/App/DesktopLayout.js +++ b/src/pages/App/DesktopLayout.js @@ -1,64 +1,65 @@ -import React, { useState } from "react"; -import { Button, Drawer, Layout, Menu, Popover, Typography } from "antd"; -import { MenuList } from "./MenuList"; -import { Link, useHistory } from "react-router-dom"; +import React, {useState} from "react"; +import {Button, Drawer, Layout, Menu, Popover, Typography} from "antd"; +import {MenuList} from "./MenuList"; +import {Link, useHistory} from "react-router-dom"; import { - HomeOutlined, - MenuOutlined, - UserOutlined, - ProfileOutlined, - DatabaseOutlined, - FileAddOutlined, - FileSyncOutlined, - FileProtectOutlined, - ShoppingCartOutlined, - AlipayOutlined, - PayCircleOutlined + AlipayOutlined, + DatabaseOutlined, + FileAddOutlined, + FileProtectOutlined, + FileSyncOutlined, + HomeOutlined, + LogoutOutlined, + MenuOutlined, + PayCircleOutlined, + ProfileOutlined, + ShoppingCartOutlined, + UserOutlined } from "@ant-design/icons"; -import { AppRoute, LINKS } from "../../routes/app"; -import { useStore } from "../../utils/useStore"; -import { observer } from "mobx-react-lite"; -import { useMediaQuery } from "react-responsive"; +import {AppRoute, LINKS} from "../../routes/app"; +import {useStore} from "../../utils/useStore"; +import {observer} from "mobx-react-lite"; +import {useMediaQuery} from "react-responsive"; -const { Text, Paragraph } = Typography; -const { Header, Content, Sider } = Layout; -const { SubMenu } = Menu; +const {Text, Paragraph} = Typography; +const {Header, Content, Sider} = Layout; +const {SubMenu} = Menu; export const DesktopLayout = observer(() => { - let history = useHistory(); - const xl = useMediaQuery({ minWidth: 1024 }); - const store = useStore(); - const [clicked, setClicked] = useState(false); + let history = useHistory(); + const xl = useMediaQuery({minWidth: 1024}); + const store = useStore(); + const [clicked, setClicked] = useState(false); - return ( - - {store.ui.mediaQuery.isDesktop && ( - + {store.ui.mediaQuery.isDesktop && ( +
{ )} {store.authentication.userData.role !== "Admin" && ( - - - Payback + + + Payback )} @@ -353,41 +354,45 @@ export const DesktopLayout = observer(() => { autoAdjustOverflow={true} placement="bottomRight" content={ - - - - Profile - - - { - store.authentication.logout(); - history.push("/login"); - }} + - Sign out - - + {store.authentication.userData.role !== "Admin" && + + + Profile + + + } + { + store.authentication.logout(); + history.push("/login"); + }} + > + + Sign out + + } title={ - - {store.user.data.username} - - {store.authentication.userData.username} - - + + {store.user.data.username} + + {store.authentication.userData.username} + + } trigger="click" visible={clicked} @@ -450,41 +455,45 @@ export const DesktopLayout = observer(() => { autoAdjustOverflow={true} placement="bottomRight" content={ - - - - Profile - - - { - store.authentication.logout(); - history.push("/login"); - }} + - Sign out - - + {store.authentication.userData.role !== "Admin" && ( + + + + Profile + + + )} + { + store.authentication.logout(); + history.push("/login"); + }} + > + + Sign out + + } title={ - {store.user.data.email}{" "} - - {store.authentication.userData.username} - + + {store.authentication.userData.username} + } trigger="click" diff --git a/src/pages/App/MenuList.js b/src/pages/App/MenuList.js index 8f744c3..5ece71d 100644 --- a/src/pages/App/MenuList.js +++ b/src/pages/App/MenuList.js @@ -1,35 +1,36 @@ -import React, { useEffect, useState } from "react"; -import { Menu } from "antd"; -import { Link } from "react-router-dom"; +import React, {useEffect, useState} from "react"; +import {Menu} from "antd"; +import {Link} from "react-router-dom"; import { - AppstoreOutlined, - DatabaseOutlined, - FileAddOutlined, - FileProtectOutlined, - FileSyncOutlined, - HomeOutlined, - MenuUnfoldOutlined, - MoneyCollectOutlined, - ProfileOutlined, - ProjectOutlined, - ShoppingCartOutlined, - UserOutlined, - AlipayOutlined, - PayCircleOutlined, + AlipayOutlined, + AppstoreOutlined, + DatabaseOutlined, + FileAddOutlined, + FileProtectOutlined, + FileSyncOutlined, + HomeOutlined, + MenuUnfoldOutlined, + MoneyCollectOutlined, + PayCircleOutlined, + ProfileOutlined, + ProjectOutlined, + ShoppingCartOutlined, + UserOutlined, } from "@ant-design/icons"; -import { observer } from "mobx-react-lite"; -import { useStore } from "../../utils/useStore"; -import { LINKS } from "../../routes/app"; +import {observer} from "mobx-react-lite"; +import {useStore} from "../../utils/useStore"; +import {LINKS} from "../../routes/app"; -const { SubMenu } = Menu; +const {SubMenu} = Menu; export const MenuList = observer((props) => { - const store = useStore(); - useEffect(() => {}, []); + const store = useStore(); + useEffect(() => { + }, []); - const [setKeys, setSetKeys] = useState(["dashboard"]); + const [setKeys, setSetKeys] = useState(["dashboard"]); - return ( + return ( { )} {store.authentication.userData.role !== "Admin" && ( - - - Payback - + + + Payback + )} diff --git a/src/pages/Membership/DetailUser.js b/src/pages/Membership/DetailUser.js index fe5bfdc..ca040f0 100644 --- a/src/pages/Membership/DetailUser.js +++ b/src/pages/Membership/DetailUser.js @@ -7,12 +7,14 @@ import {observer} from "mobx-react-lite"; import {FilterOutlined} from "@ant-design/icons"; import {format, parseISO} from "date-fns"; import {ModalLoaderContext} from "../../utils/modal"; +import {useParams} from "react-router-dom"; const {Title, Text} = Typography; export const DetailUser = observer(() => { const store = useStore(); const modalLoader = useContext(ModalLoaderContext); + const { id } = useParams(); const routeData = [ { @@ -20,16 +22,17 @@ export const DetailUser = observer(() => { name: "Home", }, { - route: LINKS.DETAILUSER, + route: LINKS.USER_DETAIL, name: Detail User, }, ]; - +console.log(id) useEffect(() => { (async () => { modalLoader.setLoading(true); await Promise.allSettled([ store.authentication.getProfile(), + store.transaction.getDataHistoryTopUp(id), store.transaction.getDataHistoryTransaction(), ]); modalLoader.setLoading(false); @@ -83,7 +86,7 @@ export const DetailUser = observer(() => { Name - {store.authentication.profileData?.userDetail?.name} + {store.transaction.data.name} Role @@ -125,7 +128,7 @@ export const DetailUser = observer(() => {
- History User Transaction + History Top Up - + -
+
- - - - + }} + /> + {store.authentication.userData.role === "Admin" && ( +
+ + + + +
+ )}
- +
); diff --git a/src/pages/Product/DetailProduct.js b/src/pages/Product/ProductDetail.js similarity index 93% rename from src/pages/Product/DetailProduct.js rename to src/pages/Product/ProductDetail.js index 40640e4..79887af 100644 --- a/src/pages/Product/DetailProduct.js +++ b/src/pages/Product/ProductDetail.js @@ -10,7 +10,7 @@ import {ModalLoaderContext} from "../../utils/modal"; const {Title, Text} = Typography; -export const DetailProduct = observer(() => { +export const ProductDetail = observer(() => { const store = useStore(); const modalLoader = useContext(ModalLoaderContext); @@ -20,8 +20,12 @@ export const DetailProduct = observer(() => { name: "Home", }, { - route: LINKS.DETAILPRODUCT, - name: Detail Product, + route: LINKS.PRODUCT, + name: Product, + }, + { + route: LINKS.PRODUCT_DETAIL, + name: Product Detail, }, ]; @@ -75,7 +79,7 @@ export const DetailProduct = observer(() => {
- Detail Product + Product Detail diff --git a/src/pages/Product/Subcategory.js b/src/pages/Product/Subcategory.js index 402ab7f..0ffa767 100644 --- a/src/pages/Product/Subcategory.js +++ b/src/pages/Product/Subcategory.js @@ -1,11 +1,11 @@ -import React, {useContext, useEffect, useState} from "react"; -import {Button, Card, Col, Input, Row,message} from "antd"; +import React, {useContext, useEffect} from "react"; +import {Button, Card, Col, Input, message, Row} from "antd"; import {PlusSquareOutlined} from "@ant-design/icons"; import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {useStore} from "../../utils/useStore"; import {observer} from "mobx-react-lite"; import {LINKS} from "../../routes/app"; -import {SubcategoryComponent} from "../../component/Subcategory"; +import {SubcategoryComponent} from "../../component/SubcategoryComponent"; import {ModalLoaderContext} from "../../utils/modal"; const {Search} = Input; diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js index 1096b36..f6ec408 100644 --- a/src/pages/Profile/Profile.js +++ b/src/pages/Profile/Profile.js @@ -42,6 +42,11 @@ export const Profile = observer(() => { dataIndex: 'mark_up_price', key: 'mark_up_price', width: '20%', + render: (text) => + new Intl.NumberFormat("id-ID", { + style: "currency", + currency: "IDR", + }).format(text), }, { title: 'Name', diff --git a/src/routes/app.js b/src/routes/app.js index 04bc5ab..9f2d29c 100644 --- a/src/routes/app.js +++ b/src/routes/app.js @@ -4,7 +4,7 @@ import {About} from "../pages/About/About"; import {Membership} from "../pages/Membership/Membership"; import {DetailUser} from "../pages/Membership/DetailUser"; import {Product} from "../pages/Product/Product"; -import {DetailProduct} from "../pages/Product/DetailProduct"; +import {ProductDetail} from "../pages/Product/ProductDetail"; import {Transaction} from "../pages/Transaction/Transaction"; import {Profile} from "../pages/Profile/Profile"; import {Commission} from "../pages/Config/Commission"; @@ -27,10 +27,10 @@ export const LINKS = { SUPPLIER: "/app/supplier", CATEGORY: "/app/category", PAYBACK: "/app/payback", - PAYBACKFROMUSER: "/app/payback-from-user", + PAYBACK_FROM_USER: "/app/payback-from-user", SUBCATEGORY: "/app/subcategory", - DETAILUSER: "/app/detail-user", - DETAILPRODUCT: "/app/detail-product", + USER_DETAIL: "/app/user-detail", + PRODUCT_DETAIL: "/app/product-detail", }; export const AppRoute = () => { @@ -38,16 +38,16 @@ export const AppRoute = () => { - + - - + + - + diff --git a/src/store/product.js b/src/store/product.js index 7c893de..5881c38 100644 --- a/src/store/product.js +++ b/src/store/product.js @@ -31,6 +31,7 @@ export class Product { async getData() { try { const response = await http.get(`/product/all?supplier=${this.filterSupplier}&sub-category=${this.filterSubCategory}&page=${this.page}&pageSize=${this.pageSize}`); + //console.log(response) this.data = response.body.data.map((item, idx) => { item.key = idx; return item diff --git a/src/store/transaction.js b/src/store/transaction.js index 410e049..cad1219 100644 --- a/src/store/transaction.js +++ b/src/store/transaction.js @@ -22,10 +22,14 @@ export class Transaction { filterSubCategory = null; pageHistoryTransaction = 0; + pageHistoryTopUp = 0; // pageSizeHistoryTransaction = 10 dataHistoryTransaction = []; total_dataHistoryTransaction = 0; + dataHistoryTopUp=[]; + total_dataHistoryTopUp = 0; + constructor(ctx) { this.ctx = ctx; makeAutoObservable(this); @@ -76,6 +80,18 @@ export class Transaction { } } + async getDataHistoryTopUp(id) { + try { + console.log("Top up") + const response = await http.get(`/transaction/history-deposit?page=${this.pageHistoryTopUp}&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);