Merge branch 'develop' into 'devops-staging'

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

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> */}
@ -358,17 +364,17 @@ export const PartnerComponent = observer((props) => {
</Form.Item> </Form.Item>
)} )}
{!idData && ( {!idData && (
<Form.Item <Form.Item
name="code" name="code"
label="Kode" label="Kode"
rules={[ rules={[
idData idData
? { required: false } ? { required: false }
: { required: true, message: "Please input code partner!" }, : { required: true, message: "Please input code partner!" },
]} ]}
> >
<Input /> <Input />
</Form.Item> </Form.Item>
)} )}
{!idData && ( {!idData && (
<Form.Item <Form.Item
@ -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 && (

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([]);
@ -107,12 +107,14 @@ export const ProductComponent = observer((props) => {
key: "action", key: "action",
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 }}
</Button> >
Detail
</Button>
), ),
}, },
]; ];
@ -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,

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) {

View File

@ -1,5 +1,5 @@
export const appConfig = { export const appConfig = {
apiUrl: 'https://ppob-backend.k3s.bangun-kreatif.com/v1' apiUrl: 'https://ppob-backend.k3s.bangun-kreatif.com/v1'
//apiUrl: 'http://localhost:3222/v1' //apiUrl: 'http://localhost:3222/v1'
// apiUrl: 'http://localhost:3222/v1' // apiUrl: 'http://localhost:3222/v1'
}; };

View File

@ -1,65 +1,71 @@
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,
FileAddOutlined, FileAddOutlined,
FileProtectOutlined, FileProtectOutlined,
FileSyncOutlined, FileSyncOutlined,
HomeOutlined, HomeOutlined,
LogoutOutlined, LogoutOutlined,
MenuOutlined, MenuOutlined,
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);
return ( return (
<Layout <Layout
theme={"light"} theme={"light"}
className={"transparent"} className={"transparent"}
hasSider={store.ui.mediaQuery.isDesktop} hasSider={store.ui.mediaQuery.isDesktop}
style={{ style={{
paddingLeft: xl ? "calc(70vw - 1024px)" : "0", paddingLeft: xl ? "calc(70vw - 1024px)" : "0",
display: "flex", display: "flex",
// minWidth: 1024, // minWidth: 1024,
width: "100%", width: "100%",
height: "100%", height: "100%",
position: "relative", position: "relative",
}} }}
>
{store.ui.mediaQuery.isDesktop && (
<Sider
className={"transparent"}
width={240}
style={{
overflowX: "hidden",
bottom: 0,
justifyContent: "flex-start",
paddingTop: 20,
paddingLeft: 20,
position: "fixed",
top: 0,
zIndex: 10,
}}
> >
{store.ui.mediaQuery.isDesktop && (
<Sider
className={"transparent"}
width={240}
style={{
overflowX: "hidden",
bottom: 0,
justifyContent: "flex-start",
paddingTop: 20,
paddingLeft: 20,
position: "fixed",
top: 0,
zIndex: 10,
}}
>
<div <div
style={{ style={{
paddingLeft: 20, paddingLeft: 20,
@ -118,42 +124,52 @@ 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> <span>Keanggotaan</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role === "Supervisor" && (
<Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}>
<IdcardOutlined />
<span>Keanggotaan</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
{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,76 +178,95 @@ 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>
)} )}
{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>
</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> </Link>
</Menu.Item> </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>
)} )}
<SubMenu {store.authentication.userData.role !== "Admin Partner" &&
key="payback-main" store.authentication.userData.role !== "Retail" && (
icon={<ProfileOutlined/>} <SubMenu
title="Pembayaran" key="payback-main"
> icon={<ProfileOutlined />}
{store.authentication.userData.role !== "Retail" && ( title="Pembayaran"
<Menu.Item key="payback-to-user"> >
<Link to={LINKS.PAYBACK}> {store.authentication.userData.role !== "Retail" && (
<PayCircleOutlined/> <Menu.Item key="payback-to-user">
<span>Konfirmasi</span> <Link to={LINKS.PAYBACK}>
</Link> <PayCircleOutlined />
</Menu.Item> <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="payback-from-user">
<Link to={LINKS.PAYBACK_CREATED}>
<AlipayOutlined/>
<span>Dibuat oleh Saya</span>
</Link>
</Menu.Item>
)}
</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>
)} )}
@ -354,45 +389,46 @@ export const DesktopLayout = observer(() => {
autoAdjustOverflow={true} autoAdjustOverflow={true}
placement="bottomRight" placement="bottomRight"
content={ content={
<Menu <Menu
type={"line"} type={"line"}
inlineIndent={0} inlineIndent={0}
theme="light" theme="light"
style={{ style={{
backgroundColor: "transparent", backgroundColor: "transparent",
borderRightWidth: 0, borderRightWidth: 0,
}} }}
mode="inline" mode="inline"
>
{store.authentication.userData.role !== "Admin" && (
<Menu.Item>
<Link to={LINKS.PROFILE}>
<UserOutlined />
<span>Profile</span>
</Link>
</Menu.Item>
)}
<Menu.Item
onClick={() => {
store.authentication.logout();
history.push("/login");
}}
> >
{store.authentication.userData.role !== "Admin" && <Menu.Item> <LogoutOutlined />
<Link to={LINKS.PROFILE}> <span>Sign out</span>
<UserOutlined/> </Menu.Item>
<span>Profile</span> </Menu>
</Link>
</Menu.Item>
}
<Menu.Item
onClick={() => {
store.authentication.logout();
history.push("/login");
}}
>
<LogoutOutlined/>
<span>Sign out</span>
</Menu.Item>
</Menu>
} }
title={ title={
<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
> >
{store.authentication.userData.username} {store.authentication.userData.username}
</Paragraph> </Paragraph>
</Text> </Text>
} }
trigger="click" trigger="click"
visible={clicked} visible={clicked}
@ -455,45 +491,45 @@ export const DesktopLayout = observer(() => {
autoAdjustOverflow={true} autoAdjustOverflow={true}
placement="bottomRight" placement="bottomRight"
content={ content={
<Menu <Menu
type={"line"} type={"line"}
inlineIndent={0} inlineIndent={0}
theme="light" theme="light"
style={{ style={{
backgroundColor: "transparent", backgroundColor: "transparent",
borderRightWidth: 0, borderRightWidth: 0,
}} }}
mode="inline" mode="inline"
>
{store.authentication.userData.role !== "Admin" && (
<Menu.Item key="profile">
<Link to={LINKS.PROFILE}>
<UserOutlined />
<span>Profile</span>
</Link>
</Menu.Item>
)}
<Menu.Item
key={"logout"}
onClick={() => {
store.authentication.logout();
history.push("/login");
}}
> >
{store.authentication.userData.role !== "Admin" && ( <LogoutOutlined />
<Menu.Item key="profile"> <span>Sign out</span>
<Link to={LINKS.PROFILE}> </Menu.Item>
<UserOutlined/> </Menu>
<span>Profile</span>
</Link>
</Menu.Item>
)}
<Menu.Item
key={"logout"}
onClick={() => {
store.authentication.logout();
history.push("/login");
}}
>
<LogoutOutlined/>
<span>Sign out</span>
</Menu.Item>
</Menu>
} }
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
> >
{store.authentication.userData.username} {store.authentication.userData.username}
</Paragraph> </Paragraph>
</Text> </Text>
} }
trigger="click" trigger="click"

View File

@ -1,34 +1,38 @@
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,
FileAddOutlined, FileAddOutlined,
FileProtectOutlined, FileProtectOutlined,
FileSyncOutlined, FileSyncOutlined,
HomeOutlined, HomeOutlined,
MenuUnfoldOutlined, MenuUnfoldOutlined,
MoneyCollectOutlined, ProfileOutlined,
ProfileOutlined, ShoppingCartOutlined,
ProjectOutlined, UserOutlined,
ShoppingCartOutlined, SlackOutlined,
UserOutlined, 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"]);
return ( return (
<Menu <Menu
defaultOpenKeys={["sub4"]} defaultOpenKeys={["sub4"]}
theme="light" theme="light"
@ -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,29 +159,36 @@ 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 !== "Retail" && ( store.authentication.userData.role !== "Admin Partner" && (
<Menu.Item key="payback-to-user"> <SubMenu
<Link to={LINKS.PAYBACK}> key="payback-main"
<FileProtectOutlined/> icon={<CodepenOutlined />}
<span>Konfirmasi</span> title="Pembayaran"
</Link> >
</Menu.Item> {store.authentication.userData.role !== "Retail" && (
)} <Menu.Item key="payback-to-user">
{store.authentication.userData.role !== "Admin" && ( <Link to={LINKS.PAYBACK}>
<Menu.Item key="payback-from-user"> <FileProtectOutlined />
<Link to={LINKS.PAYBACK_CREATED}> <span>Konfirmasi</span>
<FileProtectOutlined/> </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> <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>
)} )}

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,

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,

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,

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>
style={{ {store.ui.mediaQuery.isDesktop && (
padding: 0, <Row
margin: 0, style={{
height: 40, marginTop: 30,
backgroundColor: "transparent", marginLeft: 30,
}} }}
title={"Home"}
> >
</PageHeader> <Card
<Button onClick={() => { className={"shadow"}
store.ui.setTestValue(); hoverable
}}>{store.ui.testValue}</Button> style={{
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aut recusandae velit! Consequatur corporis, marginLeft: 20,
eum fuga, harum incidunt laboriosam minus necessitatibus neque non nostrum pariatur tempore. Dignissimos impedit height: 200,
rem tempora! marginBottom: 10,
borderColor: "salmon",
width: "30%",
}}
>
<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,
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>
);
}); });

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,

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,

View File

@ -1,107 +1,126 @@
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
visible={visible} visible={visible}
title={ title={
initialData.isChangePassword initialData.isChangePassword
? "Change Member Password" ? "Change Member Password"
: initialData.id : initialData.id
? "Edit Member" ? "Edit Member"
: "Create a new Membership" : "Create a new Membership"
} }
okText={initialData.id ? "Edit" : "Create"} okText={initialData.id ? "Edit" : "Create"}
cancelText="Cancel" cancelText="Cancel"
onCancel={() => { onCancel={() => {
form.resetFields(); form.resetFields();
onCancel(); onCancel();
}} }}
onOk={() => { onOk={() => {
form form
.validateFields() .validateFields()
.then((values) => { .then((values) => {
onCreate(values); onCreate(values);
form.resetFields(); form.resetFields();
}) })
.catch((info) => { .catch((info) => {
console.log("Validate Failed:", info); console.log("Validate Failed:", info);
}); });
}} }}
> >
<Form <Form
form={form} form={form}
layout="vertical" layout="vertical"
name="form_in_modal" name="form_in_modal"
initialValues={initialData} initialValues={initialData}
> >
{((initialData.id && !initialData.isChangePassword) || {((initialData.id && !initialData.isChangePassword) ||
!initialData.id) && ( !initialData.id) && (
<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) ||
!initialData.id) && ( !initialData.id) && (
<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) ||
!initialData.id) && ( !initialData.id) && (
<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={[
> {
<Input/> required: true,
</Form.Item> message: "Please input Phone Number!",
)} },
{((initialData.id && !initialData.isChangePassword) || {
!initialData.id) && ( pattern: /^(?:\d*)$/,
<Form.Item message: "Value should contain just number",
name="roleId" },
label="Role" {
rules={[{required: true, message: "Please input role id!"}]} //pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
> pattern: /^[\d]{0,12}$/,
<Select> message: "Value should be less than 12 character",
{store.role.data.map((item) => ( },
<Option key={item.id} value={item.id}> ]}
{item.name} >
</Option> <Input
))} onChange={(value) => {
</Select> setValue(value);
</Form.Item> }}
)} />
</Form> </Form.Item>
</Modal> )}
); {((initialData.id && !initialData.isChangePassword) ||
!initialData.id) && (
<Form.Item
name="roleId"
label="Role"
rules={[{ required: true, message: "Please input role id!" }]}
>
<Select>
{store.role.data.map((item) => (
<Option key={item.id} value={item.id}>
{item.name}
</Option>
))}
</Select>
</Form.Item>
)}
</Form>
</Modal>
);
}; };

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
response?.body?.message || `Failed ${capitalize(type)} Payback` ? message.error(
); 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>

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,

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,

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,

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,

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,

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

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,

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 {

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);