PPOB/ppob-frontend
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'develop' into 'devops-staging'

Browse Source 
Develop

See merge request empatnusabangsa/ppob/ppob-frontend!21
This commit is contained in:
ilham dwi pratama 2021-12-28 10:19:26 +00:00
commit d2ebb38727
23 changed files with 770 additions and 417 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/component/PartnerComponent.js
View File

@ -20,6 +20,7 @@ import { ModalLoaderContext } from "../utils/modal";
export const PartnerComponent = observer((props) => { export const PartnerComponent = observer((props) => {
const store = useStore(); const store = useStore();
const [value, setValue] = useState();
const [form] = Form.useForm(); const [form] = Form.useForm();
const history = useHistory(); const history = useHistory();
const [idData, setIdData] = useState(""); const [idData, setIdData] = useState("");
@ -65,6 +66,7 @@ export const PartnerComponent = observer((props) => {
setIsChangePassword(true); setIsChangePassword(true);
store.partner.visibleModalPartner = true; store.partner.visibleModalPartner = true;
setIdData(data.id); setIdData(data.id);
console.log(data.id);
}; };
const columns = [ const columns = [
@ -161,20 +163,22 @@ export const PartnerComponent = observer((props) => {
if (idData !== "") { if (idData !== "") {
modalLoader.setLoading(true); modalLoader.setLoading(true);
try { try {
await store.partner.update(idData, data); isChangePassword
? await store.partner.updatePassword(idData, data)
: await store.partner.update(idData, data);
modalLoader.setLoading(false); modalLoader.setLoading(false);
message.success( message.success(
isChangePassword isChangePassword
? "Failed Change Partner Password" ? "Success Change Password"
: "Success Update Data Partner" : "Success Update Data Partner"
); );
//await store.partner.getData() //await store.partner.getData()
} catch (e) { } catch (e) {
modalLoader.setLoading(true); modalLoader.setLoading(false);
message.error( message.error(
isChangePassword isChangePassword
? "Failed Change Partner Password" ? "Failed Change Password"
: "Failed Update Data Partner" : "Failed Update Data Partner"
); );
} }
@ -280,7 +284,9 @@ export const PartnerComponent = observer((props) => {
> >
{item?.status === true ? "Inactive" : "Active"} {item?.status === true ? "Inactive" : "Active"}
</Button> </Button>
<Button onClick={(owner,name) => handleEditButton(item)}> <Button
onClick={(owner, name) => handleEditButton(item)}
>
Edit Edit
</Button> </Button>
{/* <Button onClick={() => handleDelete(record.id)}>Delete</Button> */} {/* <Button onClick={() => handleDelete(record.id)}>Delete</Button> */}
@ -410,9 +416,21 @@ export const PartnerComponent = observer((props) => {
required: true, required: true,
message: "Please input password phone number!", message: "Please input password phone number!",
}, },
{
pattern: /^(?:\d*)$/,
message: "Value should contain just number",
},
{
pattern: /^[\d]{0,12}$/,
message: "Value should be less than 12 character",
},
]} ]}
> >
<Input /> <Input
onChange={(value) => {
setValue(value);
}}
/>
</Form.Item> </Form.Item>
)} )}
{!isChangePassword && ( {!isChangePassword && (

28
src/component/ProductComponent.js
View File

@ -1,4 +1,4 @@
import React, {useContext, useState} from "react"; import React, { useContext, useState } from "react";
import { import {
Button, Button,
Col, Col,
@ -15,19 +15,19 @@ import {
Tag, Tag,
Typography, Typography,
} from "antd"; } from "antd";
import {observer} from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import {ExclamationCircleOutlined} from "@ant-design/icons"; import { ExclamationCircleOutlined } from "@ant-design/icons";
import {useHistory} from "react-router-dom"; import { useHistory } from "react-router-dom";
import {useStore} from "../utils/useStore"; import { useStore } from "../utils/useStore";
import {LINKS} from "../routes/app"; import { LINKS } from "../routes/app";
import {ModalLoaderContext} from "../utils/modal"; import { ModalLoaderContext } from "../utils/modal";
const {Title, Text} = Typography; const { Title, Text } = Typography;
export const ProductComponent = observer((props) => { export const ProductComponent = observer((props) => {
const store = useStore(); const store = useStore();
const [form] = Form.useForm(); const [form] = Form.useForm();
const {Option} = Select; const { Option } = Select;
const history = useHistory(); const history = useHistory();
const [idData, setIdData] = useState(""); const [idData, setIdData] = useState("");
const [filterSupplier, setFilterSupplier] = useState([]); const [filterSupplier, setFilterSupplier] = useState([]);
@ -108,7 +108,9 @@ export const ProductComponent = observer((props) => {
render: (text, record) => ( render: (text, record) => (
<Button <Button
onClick={async () => { onClick={async () => {
history.push(LINKS.PRODUCT_DETAIL.replace(":id", record.product_id)); history.push(
LINKS.PRODUCT_DETAIL.replace(":id", record.product_id)
);
}} }}
> >
Detail Detail
@ -258,7 +260,11 @@ export const ProductComponent = observer((props) => {
width: store.ui.mediaQuery.isMobile ? 250 : "", width: store.ui.mediaQuery.isMobile ? 250 : "",
}} }}
columns={columns} columns={columns}
dataSource={store.product.data} dataSource={
store.authentication.userData.role === "Admin Partner"
? store.product.dataProductPartner
: store.product.data
}
bordered bordered
pagination={{ pagination={{
pageSize: store.product.pageSize, pageSize: store.product.pageSize,

8
src/component/SupplierComponent.js
View File

@ -192,14 +192,18 @@ export const SupplierComponent = observer((props) => {
try { try {
modalLoader.setLoading(true); modalLoader.setLoading(true);
const response = await store.supplier.create(data); const response = await store.supplier.create(data);
response?.body?.statusCode === 201 || response?.body?.statusCode === 200 console.log(response)
response?.body?.statusCode === 201 && response?.body?.statusCode === 200
? message.success( ? message.success(
response?.body?.message || "Berhasil Tambah Supplier Baru" response?.body?.message || "Berhasil Tambah Supplier Baru"
) )
: message.error( : message.error(
response?.body?.statusCode === 406 response?.body?.error
? response?.body?.error || "Supplier Sudah Ada" ? response?.body?.error || "Supplier Sudah Ada"
: response?.body?.message || "Gagal Tambah Supplier Baru" : response?.body?.message || "Gagal Tambah Supplier Baru"
// response?.body?.statusCode === 406
// ? response?.body?.error || "Supplier Sudah Ada"
// : response?.body?.message || "Gagal Tambah Supplier Baru"
//response?.body?.message || "Gagal Tambah Supplier Baru" //response?.body?.message || "Gagal Tambah Supplier Baru"
); );
} catch (e) { } catch (e) {

114
src/pages/App/DesktopLayout.js
View File

@ -1,7 +1,7 @@
import React, {useState} from "react"; import React, { useState } from "react";
import {Button, Drawer, Layout, Menu, Popover, Typography} from "antd"; import { Button, Drawer, Layout, Menu, Popover, Typography } from "antd";
import {MenuList} from "./MenuList"; import { MenuList } from "./MenuList";
import {Link, useHistory} from "react-router-dom"; import { Link, useHistory } from "react-router-dom";
import { import {
AlipayOutlined, AlipayOutlined,
DatabaseOutlined, DatabaseOutlined,
@ -14,20 +14,26 @@ import {
PayCircleOutlined, PayCircleOutlined,
ProfileOutlined, ProfileOutlined,
ShoppingCartOutlined, ShoppingCartOutlined,
UserOutlined UserOutlined,
IdcardOutlined,
SettingOutlined,
WindowsOutlined,
SlackOutlined,
AppstoreAddOutlined,
AppstoreOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import {AppRoute, LINKS} from "../../routes/app"; import { AppRoute, LINKS } from "../../routes/app";
import {useStore} from "../../utils/useStore"; import { useStore } from "../../utils/useStore";
import {observer} from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import {useMediaQuery} from "react-responsive"; import { useMediaQuery } from "react-responsive";
const {Text, Paragraph} = Typography; const { Text, Paragraph } = Typography;
const {Header, Content, Sider} = Layout; const { Header, Content, Sider } = Layout;
const {SubMenu} = Menu; const { SubMenu } = Menu;
export const DesktopLayout = observer(() => { export const DesktopLayout = observer(() => {
let history = useHistory(); let history = useHistory();
const xl = useMediaQuery({minWidth: 1024}); const xl = useMediaQuery({ minWidth: 1024 });
const store = useStore(); const store = useStore();
const [clicked, setClicked] = useState(false); const [clicked, setClicked] = useState(false);
@ -118,16 +124,26 @@ export const DesktopLayout = observer(() => {
}} }}
> >
<Menu> <Menu>
{/* {store.authentication.userData.role !== "Admin Partner" && ( */}
<Menu.Item key="home"> <Menu.Item key="home">
<Link to={LINKS.HOME}> <Link to={LINKS.HOME}>
<HomeOutlined/> <HomeOutlined />
<span>Beranda</span> <span>Beranda</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
{store.authentication.userData.role !== "Retail" && ( {/* )} */}
{store.authentication.userData.role === "Admin" && (
<Menu.Item key="membership"> <Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}> <Link to={LINKS.MEMBERSHIP}>
<FileProtectOutlined/> <IdcardOutlined />
<span>Keanggotaan</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role === "Supervisor" && (
<Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}>
<IdcardOutlined />
<span>Keanggotaan</span> <span>Keanggotaan</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
@ -135,25 +151,25 @@ export const DesktopLayout = observer(() => {
{store.authentication.userData.role === "Admin" && ( {store.authentication.userData.role === "Admin" && (
<SubMenu <SubMenu
key="config" key="config"
icon={<HomeOutlined />} icon={<SettingOutlined />}
title="Config" title="Config"
style={{ backgroundColor: "#e3e8ee" }} style={{ backgroundColor: "#e3e8ee" }}
> >
<Menu.Item key="partner"> <Menu.Item key="partner">
<Link to={LINKS.PARTNER}> <Link to={LINKS.PARTNER}>
<HomeOutlined/> <WindowsOutlined />
<span>Rekanan</span> <span>Rekanan</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="commision"> <Menu.Item key="commision">
<Link to={LINKS.COMMISSION}> <Link to={LINKS.COMMISSION}>
<HomeOutlined/> <SlackOutlined />
<span>Komisi</span> <span>Komisi</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="supplier"> <Menu.Item key="supplier">
<Link to={LINKS.SUPPLIER}> <Link to={LINKS.SUPPLIER}>
<HomeOutlined /> <AppstoreOutlined />
<span>Supplier</span> <span>Supplier</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
@ -162,19 +178,19 @@ export const DesktopLayout = observer(() => {
{store.authentication.userData.role === "Admin" && ( {store.authentication.userData.role === "Admin" && (
<SubMenu <SubMenu
key="product-main" key="product-main"
icon={<DatabaseOutlined />} icon={<AppstoreAddOutlined />}
title="Product" title="Product"
> >
<Menu.Item key="product"> <Menu.Item key="product">
<Link to={LINKS.PRODUCT}> <Link to={LINKS.PRODUCT}>
<DatabaseOutlined/> <DatabaseOutlined />
<span>Produk</span> <span>Produk</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
{store.authentication.userData.role === "Admin" && ( {store.authentication.userData.role === "Admin" && (
<Menu.Item key="category"> <Menu.Item key="category">
<Link to={LINKS.CATEGORY}> <Link to={LINKS.CATEGORY}>
<FileAddOutlined/> <FileAddOutlined />
<span>Kategori</span> <span>Kategori</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
@ -182,38 +198,56 @@ export const DesktopLayout = observer(() => {
{store.authentication.userData.role === "Admin" && ( {store.authentication.userData.role === "Admin" && (
<Menu.Item key="sub-category"> <Menu.Item key="sub-category">
<Link to={LINKS.SUBCATEGORY}> <Link to={LINKS.SUBCATEGORY}>
<FileSyncOutlined/> <FileSyncOutlined />
<span>Sub Kategori</span> <span>Sub Kategori</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
</SubMenu> </SubMenu>
)} )}
{store.authentication.userData.role !== "Admin" && ( {store.authentication.userData.role === "Supervisor" && (
<Menu.Item key="product"> <Menu.Item key="product">
<Link to={LINKS.PRODUCT}> <Link to={LINKS.PRODUCT}>
<DatabaseOutlined/> <AppstoreAddOutlined />
<span>Produk</span> <span>Produk</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
{store.authentication.userData.role === "Admin Partner" && (
<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" && ( {store.authentication.userData.role === "Retail" && (
<Menu.Item key="transaction"> <Menu.Item key="transaction">
<Link to={LINKS.TRANSACTION}> <Link to={LINKS.TRANSACTION}>
<ShoppingCartOutlined/> <ShoppingCartOutlined />
<span>Transaksi</span> <span>Transaksi</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
{store.authentication.userData.role !== "Admin Partner" &&
store.authentication.userData.role !== "Retail" && (
<SubMenu <SubMenu
key="payback-main" key="payback-main"
icon={<ProfileOutlined/>} icon={<ProfileOutlined />}
title="Pembayaran" title="Pembayaran"
> >
{store.authentication.userData.role !== "Retail" && ( {store.authentication.userData.role !== "Retail" && (
<Menu.Item key="payback-to-user"> <Menu.Item key="payback-to-user">
<Link to={LINKS.PAYBACK}> <Link to={LINKS.PAYBACK}>
<PayCircleOutlined/> <PayCircleOutlined />
<span>Konfirmasi</span> <span>Konfirmasi</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
@ -221,16 +255,17 @@ export const DesktopLayout = observer(() => {
{store.authentication.userData.role !== "Admin" && ( {store.authentication.userData.role !== "Admin" && (
<Menu.Item key="payback-from-user"> <Menu.Item key="payback-from-user">
<Link to={LINKS.PAYBACK_CREATED}> <Link to={LINKS.PAYBACK_CREATED}>
<AlipayOutlined/> <AlipayOutlined />
<span>Dibuat oleh Saya</span> <span>Dibuat oleh Saya</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
</SubMenu> </SubMenu>
)}
{store.authentication.userData.role !== "Admin" && ( {store.authentication.userData.role !== "Admin" && (
<Menu.Item key="profile"> <Menu.Item key="profile">
<Link to={LINKS.PROFILE}> <Link to={LINKS.PROFILE}>
<UserOutlined/> <UserOutlined />
<span>Profil</span> <span>Profil</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
@ -364,20 +399,21 @@ export const DesktopLayout = observer(() => {
}} }}
mode="inline" mode="inline"
> >
{store.authentication.userData.role !== "Admin" && <Menu.Item> {store.authentication.userData.role !== "Admin" && (
<Menu.Item>
<Link to={LINKS.PROFILE}> <Link to={LINKS.PROFILE}>
<UserOutlined/> <UserOutlined />
<span>Profile</span> <span>Profile</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
} )}
<Menu.Item <Menu.Item
onClick={() => { onClick={() => {
store.authentication.logout(); store.authentication.logout();
history.push("/login"); history.push("/login");
}} }}
> >
<LogoutOutlined/> <LogoutOutlined />
<span>Sign out</span> <span>Sign out</span>
</Menu.Item> </Menu.Item>
</Menu> </Menu>
@ -386,7 +422,7 @@ export const DesktopLayout = observer(() => {
<Text> <Text>
{store.user.data.username} {store.user.data.username}
<Paragraph <Paragraph
style={{fontWeight: 400, marginTop: '0.5rem'}} style={{ fontWeight: 400, marginTop: "0.5rem" }}
type={"secondary-dark"} type={"secondary-dark"}
strong strong
> >
@ -468,7 +504,7 @@ export const DesktopLayout = observer(() => {
{store.authentication.userData.role !== "Admin" && ( {store.authentication.userData.role !== "Admin" && (
<Menu.Item key="profile"> <Menu.Item key="profile">
<Link to={LINKS.PROFILE}> <Link to={LINKS.PROFILE}>
<UserOutlined/> <UserOutlined />
<span>Profile</span> <span>Profile</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
@ -480,7 +516,7 @@ export const DesktopLayout = observer(() => {
history.push("/login"); history.push("/login");
}} }}
> >
<LogoutOutlined/> <LogoutOutlined />
<span>Sign out</span> <span>Sign out</span>
</Menu.Item> </Menu.Item>
</Menu> </Menu>
@ -488,7 +524,7 @@ export const DesktopLayout = observer(() => {
title={ title={
<Text> <Text>
<Paragraph <Paragraph
style={{fontWeight: 400, marginTop: '0.5rem'}} style={{ fontWeight: 400, marginTop: "0.5rem" }}
type={"secondary-dark"} type={"secondary-dark"}
strong strong
> >

89
src/pages/App/MenuList.js
View File

@ -1,6 +1,6 @@
import React, {useEffect, useState} from "react"; import React, { useEffect, useState } from "react";
import {Menu} from "antd"; import { Menu } from "antd";
import {Link} from "react-router-dom"; import { Link } from "react-router-dom";
import { import {
AppstoreOutlined, AppstoreOutlined,
DatabaseOutlined, DatabaseOutlined,
@ -9,22 +9,26 @@ import {
FileSyncOutlined, FileSyncOutlined,
HomeOutlined, HomeOutlined,
MenuUnfoldOutlined, MenuUnfoldOutlined,
MoneyCollectOutlined,
ProfileOutlined, ProfileOutlined,
ProjectOutlined,
ShoppingCartOutlined, ShoppingCartOutlined,
UserOutlined, UserOutlined,
SlackOutlined,
CodepenOutlined,
WindowsOutlined,
AliyunOutlined,
SettingOutlined,
IdcardOutlined,
AppstoreAddOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import {observer} from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import {useStore} from "../../utils/useStore"; import { useStore } from "../../utils/useStore";
import {LINKS} from "../../routes/app"; import { LINKS } from "../../routes/app";
const {SubMenu} = Menu; const { SubMenu } = Menu;
export const MenuList = observer((props) => { export const MenuList = observer((props) => {
const store = useStore(); const store = useStore();
useEffect(() => { useEffect(() => {}, []);
}, []);
const [setKeys, setSetKeys] = useState(["dashboard"]); const [setKeys, setSetKeys] = useState(["dashboard"]);
@ -47,31 +51,41 @@ export const MenuList = observer((props) => {
overflowedIndicator={0} overflowedIndicator={0}
forceSubMenuRender={true} forceSubMenuRender={true}
> >
{/* {store.authentication.userData.role === "Admin" && ( */}
<Menu.Item key="home"> <Menu.Item key="home">
<Link to={LINKS.HOME}> <Link to={LINKS.HOME}>
<HomeOutlined /> <HomeOutlined />
<span>Beranda</span> <span>Beranda</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
{store.authentication.userData.role !== "Retail" && ( {/* )} */}
{store.authentication.userData.role === "Admin" && (
<Menu.Item key="membership"> <Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}> <Link to={LINKS.MEMBERSHIP}>
<FileProtectOutlined /> <IdcardOutlined />
<span>Keanggotaan</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role === "Supervisor" && (
<Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}>
<IdcardOutlined />
<span>Keanggotaan</span> <span>Keanggotaan</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
{store.authentication.userData.role === "Admin" && ( {store.authentication.userData.role === "Admin" && (
<SubMenu key="config" icon={<MenuUnfoldOutlined />} title="Config"> <SubMenu key="config" icon={<SettingOutlined />} title="Config">
<Menu.Item key="partner"> <Menu.Item key="partner">
<Link to={LINKS.PARTNER}> <Link to={LINKS.PARTNER}>
<ProjectOutlined /> <WindowsOutlined />
<span>Rekanan</span> <span>Rekanan</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="commision"> <Menu.Item key="commision">
<Link to={LINKS.COMMISSION}> <Link to={LINKS.COMMISSION}>
<MoneyCollectOutlined /> <SlackOutlined />
<span>Komisi</span> <span>Komisi</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
@ -84,10 +98,14 @@ export const MenuList = observer((props) => {
</SubMenu> </SubMenu>
)} )}
{store.authentication.userData.role === "Admin" && ( {store.authentication.userData.role === "Admin" && (
<SubMenu key="product-main" icon={<ProfileOutlined />} title="Product"> <SubMenu
<Menu.Item key="product"> key="product-main"
icon={<AppstoreAddOutlined />}
title="Produk"
>
<Menu.Item key="produk">
<Link to={LINKS.PRODUCT}> <Link to={LINKS.PRODUCT}>
<DatabaseOutlined /> <AliyunOutlined />
<span>Produk</span> <span>Produk</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
@ -109,14 +127,30 @@ export const MenuList = observer((props) => {
)} )}
</SubMenu> </SubMenu>
)} )}
{store.authentication.userData.role === "Admin Partner" && (
<Menu.Item key="retail">
<Link to={LINKS.PRODUCT}>
<AppstoreAddOutlined />
<span>Produk</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role === "Supervisor" && ( {store.authentication.userData.role === "Supervisor" && (
<Menu.Item key="retail"> <Menu.Item key="retail">
<Link to={LINKS.PRODUCT}> <Link to={LINKS.PRODUCT}>
<DatabaseOutlined /> <AppstoreAddOutlined />
<span>Produk</span> <span>Produk</span>
</Link> </Link>
</Menu.Item> </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" && ( {store.authentication.userData.role === "Retail" && (
<Menu.Item key="transaction"> <Menu.Item key="transaction">
<Link to={LINKS.TRANSACTION}> <Link to={LINKS.TRANSACTION}>
@ -125,11 +159,17 @@ export const MenuList = observer((props) => {
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
<SubMenu key="payback-main" icon={<ProfileOutlined />} title="Pembayaran"> {store.authentication.userData.role !== "Retail" &&
store.authentication.userData.role !== "Admin Partner" && (
<SubMenu
key="payback-main"
icon={<CodepenOutlined />}
title="Pembayaran"
>
{store.authentication.userData.role !== "Retail" && ( {store.authentication.userData.role !== "Retail" && (
<Menu.Item key="payback-to-user"> <Menu.Item key="payback-to-user">
<Link to={LINKS.PAYBACK}> <Link to={LINKS.PAYBACK}>
<FileProtectOutlined/> <FileProtectOutlined />
<span>Konfirmasi</span> <span>Konfirmasi</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
@ -137,16 +177,17 @@ export const MenuList = observer((props) => {
{store.authentication.userData.role !== "Admin" && ( {store.authentication.userData.role !== "Admin" && (
<Menu.Item key="payback-from-user"> <Menu.Item key="payback-from-user">
<Link to={LINKS.PAYBACK_CREATED}> <Link to={LINKS.PAYBACK_CREATED}>
<FileProtectOutlined/> <FileProtectOutlined />
<span>Dibuat oleh Saya</span> <span>Dibuat oleh Saya</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
</SubMenu> </SubMenu>
)}
{store.authentication.userData.role !== "Admin" && ( {store.authentication.userData.role !== "Admin" && (
<Menu.Item key="profile"> <Menu.Item key="profile">
<Link to={LINKS.PROFILE}> <Link to={LINKS.PROFILE}>
<UserOutlined/> <UserOutlined />
<span>Profil</span> <span>Profil</span>
</Link> </Link>
</Menu.Item> </Menu.Item>

2
src/pages/Config/Commission.js
View File

@ -38,7 +38,7 @@ export const Commission = observer(() => {
const routeData = [ const routeData = [
{ {
route: LINKS.HOME, route: LINKS.HOME,
name: "Home", name: "Beranda",
}, },
{ {
route: LINKS.COMMISSION, route: LINKS.COMMISSION,

2
src/pages/Config/Partner.js
View File

@ -36,7 +36,7 @@ export const Partner = observer(() => {
const routeData = [ const routeData = [
{ {
route: LINKS.HOME, route: LINKS.HOME,
name: "Home", name: "Beranda",
}, },
{ {
route: LINKS.PARTNER, route: LINKS.PARTNER,

2
src/pages/Config/Supplier.js
View File

@ -51,7 +51,7 @@ export const Supplier = observer(() => {
const routeData = [ const routeData = [
{ {
route: LINKS.HOME, route: LINKS.HOME,
name: "Home", name: "Beranda",
}, },
{ {
route: LINKS.SUPPLIER, route: LINKS.SUPPLIER,

164
src/pages/Home/Home.js
View File

@ -1,25 +1,157 @@
import React from "react"; import React from "react";
import {Button, PageHeader} from "antd"; import { Button, PageHeader, Card, Row, Col } from "antd";
import {store} from "../../utils/useStore"; import { store } from "../../utils/useStore";
import {observer} from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import {
DropboxOutlined,
DollarCircleOutlined,
BarChartOutlined,
} from "@ant-design/icons";
export const Home = observer(() => { export const Home = observer(() => {
return <div className={["ppob-container"].join(" ")}> return (
<PageHeader <div>
{store.ui.mediaQuery.isDesktop && (
<Row
style={{ style={{
padding: 0, marginTop: 30,
margin: 0, marginLeft: 30,
height: 40,
backgroundColor: "transparent",
}} }}
title={"Home"}
> >
<Card
className={"shadow"}
hoverable
style={{
marginLeft: 20,
height: 200,
marginBottom: 10,
borderColor: "salmon",
width: "30%",
}}
>
<Row>
<BarChartOutlined style={{ fontSize: 30 }} />
<PageHeader title={<span>Total Transaksi</span>}>
<span>Total Transaksi : 25 Transaksi</span>
</PageHeader> </PageHeader>
<Button onClick={() => { </Row>
store.ui.setTestValue(); </Card>
}}>{store.ui.testValue}</Button> <Card
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aut recusandae velit! Consequatur corporis, className={"shadow"}
eum fuga, harum incidunt laboriosam minus necessitatibus neque non nostrum pariatur tempore. Dignissimos impedit hoverable
rem tempora! style={{
marginLeft: 20,
height: 200,
marginBottom: 10,
borderColor: "salmon",
width: "30%",
}}
>
<Row>
<DropboxOutlined style={{ fontSize: 30 }} />
<PageHeader title={<span>Total Keuntungan</span>}>
<span>
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(store.authentication.profileData?.wallet || 0)}
</span>
</PageHeader>
</Row>
</Card>
<Card
className={"shadow"}
hoverable
style={{
marginLeft: 20,
height: 200,
marginBottom: 10,
borderColor: "salmon",
width: "30%",
}}
>
<Row>
<DollarCircleOutlined style={{ fontSize: 30 }} />
<PageHeader title={<span>Saldo</span>}>
<span>
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(store.authentication.profileData?.wallet || 0)}
</span>
</PageHeader>
</Row>
</Card>
</Row>
)}
{store.ui.mediaQuery.isMobile && (
<div style={{ marginTop: 10 }}>
<Card
className={"shadow"}
hoverable
style={{
marginLeft: 20,
height: 200,
marginBottom: 10,
marginRight: 20,
borderColor: "salmon",
}}
>
<Row>
<BarChartOutlined style={{ fontSize: 30 }} />
<PageHeader title={<span>Total Transaksi</span>}>
<span>Total Transaksi : 25 Transaksi</span>
</PageHeader>
</Row>
</Card>
<Card
className={"shadow"}
hoverable
style={{
marginLeft: 20,
height: 200,
marginBottom: 10,
marginRight: 20,
borderColor: "salmon",
}}
>
<Row>
<DropboxOutlined style={{ fontSize: 30 }} />
<PageHeader title={<span>Total Keuntungan</span>}>
<span>
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(store.authentication.profileData?.wallet || 0)}
</span>
</PageHeader>
</Row>
</Card>
<Card
className={"shadow"}
hoverable
style={{
marginLeft: 20,
height: 200,
marginBottom: 10,
marginRight: 20,
borderColor: "salmon",
}}
>
<Row>
<DollarCircleOutlined style={{ fontSize: 30 }} />
<PageHeader title={<span>Saldo</span>}>
<span>
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(store.authentication.profileData?.wallet || 0)}
</span>
</PageHeader>
</Row>
</Card>
</div> </div>
)}
</div>
);
}); });

2
src/pages/Membership/DetailUser.js
View File

@ -127,7 +127,7 @@ export const DetailUser = observer(() => {
const routeData = [ const routeData = [
{ {
route: LINKS.HOME, route: LINKS.HOME,
name: "Home", name: "Beranda",
}, },
{ {
route: LINKS.MEMBERSHIP, route: LINKS.MEMBERSHIP,

8
src/pages/Membership/Membership.js
View File

@ -104,15 +104,15 @@ export const Membership = observer(() => {
: (response = await store.transaction.distribute(data)); : (response = await store.transaction.distribute(data));
response?.body?.statusCode === 201 response?.body?.statusCode === 201
? message.success("Success Top Up") ? message.success("Sukses Top Up")
: message.error("Failed Top Up"); : message.error("Saldo Tidak Mencukupi");
modalLoader.setLoading(false); modalLoader.setLoading(false);
await getData(); await getData();
} catch (e) { } catch (e) {
console.log(e, "apa errornya"); console.log(e, "apa errornya");
modalLoader.setLoading(false); modalLoader.setLoading(false);
message.error("Failed Top Up"); message.error("Gagal Top Up");
} }
setConfirmLoading(false); setConfirmLoading(false);
setIsVisibleTopUpModal(false); setIsVisibleTopUpModal(false);
@ -174,7 +174,7 @@ export const Membership = observer(() => {
const routeData = [ const routeData = [
{ {
route: LINKS.HOME, route: LINKS.HOME,
name: "Home", name: "Beranda",
}, },
{ {
route: LINKS.MEMBERSHIP, route: LINKS.MEMBERSHIP,

47
src/pages/Membership/MembershipModal.js
View File

@ -1,16 +1,17 @@
import React from "react"; import React, { useState } from "react";
import {Form, Input, Modal, Select} from "antd"; import { Form, Input, Modal, Select, InputNumber } from "antd";
import {useStore} from "../../utils/useStore"; import { useStore } from "../../utils/useStore";
export const MembershipModal = ({ export const MembershipModal = ({
visible, visible,
onCreate, onCreate,
onCancel, onCancel,
initialData, initialData,
}) => { }) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const {Option} = Select; const { Option } = Select;
const store = useStore(); const store = useStore();
const [value, setValue] = useState();
return ( return (
<Modal <Modal
@ -51,18 +52,18 @@ export const MembershipModal = ({
<Form.Item <Form.Item
name="name" name="name"
label="Name" label="Name"
rules={[{required: true, message: "Please input Name!"}]} rules={[{ required: true, message: "Please input Name!" }]}
> >
<Input/> <Input />
</Form.Item> </Form.Item>
)} )}
{!initialData.id && ( {!initialData.id && (
<Form.Item <Form.Item
name="username" name="username"
label="Username" label="Username"
rules={[{required: true, message: "Please input Username!"}]} rules={[{ required: true, message: "Please input Username!" }]}
> >
<Input/> <Input />
</Form.Item> </Form.Item>
)} )}
{((initialData.id && initialData.isChangePassword) || {((initialData.id && initialData.isChangePassword) ||
@ -70,9 +71,9 @@ export const MembershipModal = ({
<Form.Item <Form.Item
name="password" name="password"
label="Password" label="Password"
rules={[{required: false, message: "Please input password!"}]} rules={[{ required: false, message: "Please input password!" }]}
> >
<Input.Password/> <Input.Password />
</Form.Item> </Form.Item>
)} )}
{((initialData.id && !initialData.isChangePassword) || {((initialData.id && !initialData.isChangePassword) ||
@ -80,9 +81,27 @@ export const MembershipModal = ({
<Form.Item <Form.Item
name="phone_number" name="phone_number"
label="Phone Number" label="Phone Number"
rules={[{required: true, message: "Please input Phone Number!"}]} rules={[
{
required: true,
message: "Please input Phone Number!",
},
{
pattern: /^(?:\d*)$/,
message: "Value should contain just number",
},
{
//pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
pattern: /^[\d]{0,12}$/,
message: "Value should be less than 12 character",
},
]}
> >
<Input/> <Input
onChange={(value) => {
setValue(value);
}}
/>
</Form.Item> </Form.Item>
)} )}
{((initialData.id && !initialData.isChangePassword) || {((initialData.id && !initialData.isChangePassword) ||
@ -90,7 +109,7 @@ export const MembershipModal = ({
<Form.Item <Form.Item
name="roleId" name="roleId"
label="Role" label="Role"
rules={[{required: true, message: "Please input role id!"}]} rules={[{ required: true, message: "Please input role id!" }]}
> >
<Select> <Select>
{store.role.data.map((item) => ( {store.role.data.map((item) => (

105
src/pages/Payback/Payback.js
View File

@ -163,7 +163,7 @@ export const Payback = observer(() => {
const routeData = [ const routeData = [
{ {
route: LINKS.HOME, route: LINKS.HOME,
name: "Home", name: "Beranda",
}, },
{ {
route: LINKS.PAYBACK, route: LINKS.PAYBACK,
@ -175,15 +175,23 @@ export const Payback = observer(() => {
modalLoader.setLoading(true); modalLoader.setLoading(true);
try { try {
const response = await store.payback.confirmPayback(id, type); const response = await store.payback.confirmPayback(id, type);
if (response.body.status !== 201) { console.log(response);
message.error( response.body.statusCode !== 201 && response.body.statusCode !== 200
? message.error(
response?.body?.message || `Failed ${capitalize(type)} Payback` response?.body?.message || `Failed ${capitalize(type)} Payback`
); )
} else { : message.success(
message.success(
response?.body?.message || `Success ${capitalize(type)} Payback` response?.body?.message || `Success ${capitalize(type)} Payback`
); );
} // if (response.body.status !== 201 ) {
// message.error(
// response?.body?.message || `Failed ${capitalize(type)} Payback`
// );
// } else {
// message.success(
// response?.body?.message || `Success ${capitalize(type)} Payback`
// );
// }
} catch (e) { } catch (e) {
console.error(e, "apa errornya"); console.error(e, "apa errornya");
message.error( message.error(
@ -200,10 +208,10 @@ export const Payback = observer(() => {
<div> <div>
<Row style={{ marginBottom: 20 }}> <Row style={{ marginBottom: 20 }}>
<Col span={12}> <Col span={12}>
<Button> {/* <Button>
<FilterOutlined /> <FilterOutlined />
Filter Filter
</Button> </Button> */}
</Col> </Col>
<Col span={12} style={{ textAlign: "right" }}> <Col span={12} style={{ textAlign: "right" }}>
{/* <Search {/* <Search
@ -280,7 +288,79 @@ export const Payback = observer(() => {
title={item.name} title={item.name}
description={ description={
<div style={{}}> <div style={{}}>
<Image src={item.picture} preview={false} /> <p>
<span>{item.userData_name}</span>
<br />
<small>Amount: {item.amount}</small>
<br />
{PAYBACK_STATUS[item.status] ===
PAYBACK_STATUS[0] ? (
<Space size="middle">
<Button
onClick={async () => {
Modal.confirm({
title: `Are you sure Accept this submission?`,
icon: <CheckOutlined />,
okText: "Accept",
cancelText: "Cancel",
okType: "primary",
onOk() {
handleAction(item.id, "accept");
},
onCancel() {
console.log("Cancel");
},
});
}}
icon={<CheckCircleOutlined />}
style={{
backgroundColor: "#1bb91d",
color: "#fff",
borderColor: "#1bb91d",
}}
>
Accept
</Button>
<Button
onClick={async () => {
Modal.confirm({
title: `Are you sure Reject this submission?`,
icon: <StopOutlined />,
okText: "Reject",
cancelText: "Cancel",
okType: "primary",
onOk() {
handleAction(item.id, "reject");
},
onCancel() {
console.log("Cancel");
},
});
}}
icon={<CloseOutlined />}
style={{
backgroundColor: "#ff1c1c",
color: "#fff",
borderColor: "#ff1c1c",
}}
>
Reject
</Button>
</Space>
) : (
<Tag
color={
PAYBACK_STATUS[item.status] ===
PAYBACK_STATUS[3]
? "cyan"
: "red"
}
style={{ color: "#4F566B" }}
>
{PAYBACK_STATUS[item.status]}
</Tag>
)}
</p>
</div> </div>
} }
/> />
@ -291,7 +371,10 @@ export const Payback = observer(() => {
margin: 0, margin: 0,
}} }}
> >
{item.amount} <Image
src={`${appConfig.apiUrl}/config/image/${item.image_prove}`}
style={{ width: "10vw" }}
/>
</p> </p>
</div> </div>
</List.Item> </List.Item>

2
src/pages/Payback/PaybackCreated.js
View File

@ -80,7 +80,7 @@ export const PaybackCreated = observer(() => {
const routeData = [ const routeData = [
{ {
route: LINKS.HOME, route: LINKS.HOME,
name: "Home", name: "Beranda",
}, },
{ {
route: LINKS.PAYBACK_CREATED, route: LINKS.PAYBACK_CREATED,

2
src/pages/Product/Category.js
View File

@ -37,7 +37,7 @@ export const Category = observer(() => {
const routeData = [ const routeData = [
{ {
route: LINKS.HOME, route: LINKS.HOME,
name: "Home", name: "Beranda",
}, },
{ {
route: LINKS.CATEGORY, route: LINKS.CATEGORY,

3
src/pages/Product/Product.js
View File

@ -30,6 +30,7 @@ export const Product = observer(() => {
store.supplier.getData(), store.supplier.getData(),
store.category.getData(), store.category.getData(),
store.product.getDataSubCategories(), store.product.getDataSubCategories(),
store.product.getProductPartner()
]); ]);
await store.product.getData(); await store.product.getData();
modalLoader.setLoading(false); modalLoader.setLoading(false);
@ -53,7 +54,7 @@ export const Product = observer(() => {
const routeData = [ const routeData = [
{ {
route: LINKS.HOME, route: LINKS.HOME,
name: "Home", name: "Beranda",
}, },
{ {
route: LINKS.PRODUCT, route: LINKS.PRODUCT,

2
src/pages/Product/ProductDetail.js
View File

@ -18,7 +18,7 @@ export const ProductDetail = observer(() => {
const routeData = [ const routeData = [
{ {
route: LINKS.HOME, route: LINKS.HOME,
name: "Home", name: "Beranda",
}, },
{ {
route: LINKS.PRODUCT, route: LINKS.PRODUCT,

2
src/pages/Product/Subcategory.js
View File

@ -41,7 +41,7 @@ export const Subcategory = observer(() => {
const routeData = [ const routeData = [
{ {
route: LINKS.HOME, route: LINKS.HOME,
name: "Home", name: "Beranda",
}, },
{ {
route: LINKS.SUBCATEGORY, route: LINKS.SUBCATEGORY,

4
src/pages/Profile/Profile.js
View File

@ -138,12 +138,12 @@ export const Profile = observer(() => {
<div> <div>
<Title strong level={3}>History User Transaction</Title> <Title strong level={3}>History User Transaction</Title>
<Button style={{marginBottom: '1rem'}} onClick={() => { {/* <Button style={{marginBottom: '1rem'}} onClick={() => {
console.log('clicked filter') console.log('clicked filter')
}}> }}>
<FilterOutlined/> <FilterOutlined/>
Filter Filter
</Button> </Button> */}
<Table <Table
columns={columns} columns={columns}
bordered bordered

2
src/pages/Transaction/Transaction.js
View File

@ -46,7 +46,7 @@ export const Transaction = observer(() => {
const routeData = [ const routeData = [
{ {
route: LINKS.HOME, route: LINKS.HOME,
name: "Home", name: "Beranda",
}, },
{ {
route: LINKS.TRANSACTION, route: LINKS.TRANSACTION,

13
src/store/partner.js
View File

@ -27,7 +27,7 @@ export class Partner {
async getData() { async getData() {
try { try {
const response = await http.get(`/users/partner?page=${this.page}&pageSize=${this.pageSize}`); const response = await http.get(`/users/partner?page=${this.page}&pageSize=${this.pageSize}`);
//console.log(response)
this.data = response.body.data.map((item, idx) => { this.data = response.body.data.map((item, idx) => {
item.key = idx; item.key = idx;
return item return item
@ -59,11 +59,12 @@ export class Partner {
} }
} }
// async updateStatus(id, data) { async updatePassword(id, data) {
// const response = await http.put(`/users/partner/${id}`).send(data); const response = await http.put(`/users/change-password-partner/${id}`).send(data);
// await this.getData(); console.log(response)
// return response; await this.getData();
// } return response;
}
async delete(id) { async delete(id) {
try { try {

12
src/store/product.js
View File

@ -26,9 +26,11 @@ export class Product {
dataPriceHistory = []; dataPriceHistory = [];
totalDataPriceHistory = 0; totalDataPriceHistory = 0;
pagePriceHistory = 0; pagePriceHistory = 0;
pageProductPartner = 0;
pageSizePriceHistory = 10 pageSizePriceHistory = 10
dataDetailProduct = {}; dataDetailProduct = {};
dataProductPartner=[]
constructor(ctx) { constructor(ctx) {
this.ctx = ctx; this.ctx = ctx;
@ -94,6 +96,16 @@ export class Product {
} }
} }
async getProductPartner(id) {
try {
const response = await http.get(`/product/by-categories?page=${this.pageProductPartner}&sub-category=${id}`);
console.log(response)
this.dataProductPartner = response.body.data
} catch (e) {
console.error(e);
}
}
async create(data) { async create(data) {
try { try {
const response = await http.post('/product').send(data); const response = await http.post('/product').send(data);