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

pages config

Browse Source
This commit is contained in:
ajat91 2021-12-13 18:44:28 +07:00
commit 8f1b07e0e4
22 changed files with 1911 additions and 13562 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -24,3 +24,4 @@ yarn-error.log*
/.idea /.idea
/package-lock.json /package-lock.json
/yarn.lock

244
src/component/CommisionComponent.js Normal file
View File

@ -0,0 +1,244 @@
import React, {useEffect, useState} from "react";
import {Button, Form, Input, message, Modal, Select, Space, Table, Tag} from "antd";
import {observer} from "mobx-react-lite";
import {ExclamationCircleOutlined} from "@ant-design/icons";
import {useHistory} from "react-router-dom";
import {capitalize} from "lodash";
import {useStore} from "../utils/useStore";
import {LINKS} from "../routes/app";
export const CommisionComponent = observer((props) => {
const store = useStore();
const [form] = Form.useForm();
const {Option} = Select;
const history = useHistory();
const [idData, setIdData] = useState('');
const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
await store.product.getDataSubCategories();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
}, []);
const handleEditButton = (data) => {
console.log(data, "isi data")
form.setFieldsValue({
name: data.name,
npwp: data.npwp,
address: data.address,
});
store.product.visibleModalProduct = true;
setIdData(data.id);
}
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
},
{
title: "Npwp",
dataIndex: "npwp",
key: "npwp",
},
{
title: "Address",
dataIndex: "address",
key: "address",
},
{
title: "Status",
dataIndex: "status",
key: "status",
render: (text, record) => (
<Tag
color={record?.status === true ? "processing" : "#E3E8EE"}
style={{ color: "#4F566B" }}
>
{record?.status === true ? " ACTIVE" : "INACTIVE"}
</Tag>
),
},
{
title: "Action",
key: "action",
render: (text, record) => (
<Space size="middle">
<Button
onClick={() => handleEditButton(record)}
>Edit</Button>
<Button
onClick={() => handleDelete(record.id)}
>
Delete
</Button>
</Space>
),
},
];
const deleteData = async (id) => {
try {
console.log(id);
await store.product.delete(id);
message.success("Data Berhasil Dihapus");
history.push(LINKS.PRODUCT);
} catch (err) {
console.log("error", err);
message.error("Gagal menghapus");
}
};
const handleDelete = (id) => {
Modal.confirm({
title: "Are you sure delete this record?",
icon: <ExclamationCircleOutlined/>,
okText: "Yes",
okType: "primary",
cancelText: "Cancel",
onOk() {
return deleteData(id);
},
onCancel() {
console.log("Cancel");
},
});
};
const handleCancel = () => {
setIdData('')
store.product.visibleModalProduct = false;
}
const handleSubmit = async (data) => {
console.log(data, "isi data2")
if (idData !== '') {
setConfirmLoading(true);
try {
await store.product.update(idData, data)
message.success("Success Update Data Member")
} catch (e) {
message.error("Failed Update Data Member")
}
setConfirmLoading(false);
store.product.visibleModalProduct = false;
setIdData('');
form.resetFields();
} else {
setConfirmLoading(true);
try {
await store.partner.create(data)
message.success("Success Add New Member")
} catch (e) {
console.log(e, "apa errornya")
message.error("Failed Add Member")
}
setConfirmLoading(false);
store.product.visibleModalProduct = false;
setIdData('');
form.resetFields();
}
}
return (
<div>
<Table
style={{textAlign: "center"}}
columns={columns}
dataSource={store.partner.data}
bordered
pagination={{
pageSize: store.product.pageSize,
total: store.product.total_data,
current: store.product.page + 1,
showSizeChanger: true,
simple: false
}}
onChange={async (page) => {
let pageNumber = page.current;
store.product.pageSize = page.pageSize;
store.product.page = pageNumber - 1;
// store.membership.isLoading = true;
await store.product.getData();
// store.membership.isLoading = false;
}}
/>
<Modal
visible={store.product.visibleModalProduct}
title={idData ? "Edit Product" : "Create a new Product"}
okText={idData ? "Edit" : "Create"}
cancelText="Cancel"
onCancel={() => {
form.resetFields();
handleCancel();
}}
onOk={() => {
form
.validateFields()
.then((values) => {
console.log(values, "isi form")
handleSubmit(values);
form.resetFields();
})
.catch((info) => {
console.error("Validate Failed:", info);
});
}}
>
<Form
form={form}
layout="vertical"
>
<Form.Item
name="name"
label="Name"
rules={[{required: true, message: 'Please input name!'}]}
>
<Input/>
</Form.Item>
<Form.Item
name="owner"
label="Owner"
rules={[{required: true, message: 'Please input owner!'}]}
>
<Input/>
</Form.Item>
<Form.Item
name="password_account"
label="Password Account"
rules={[{required: true, message: 'Please input password account!'}]}
>
<Input/>
</Form.Item>
<Form.Item
name="npwp"
label="Npwp"
rules={[{required: true, message: 'Please input npwp!'}]}
>
<Input/>
</Form.Item>
<Form.Item
name="address"
label="address"
rules={[{required: true, message: 'Please input password!'}]}
>
<Input/>
</Form.Item>
</Form>
</Modal>
</div>
);
});

244
src/component/PartnerComponent.js Normal file
View File

@ -0,0 +1,244 @@
import React, {useEffect, useState} from "react";
import {Button, Form, Input, message, Modal, Select, Space, Table, Tag} from "antd";
import {observer} from "mobx-react-lite";
import {ExclamationCircleOutlined} from "@ant-design/icons";
import {useHistory} from "react-router-dom";
import {capitalize} from "lodash";
import {useStore} from "../utils/useStore";
import {LINKS} from "../routes/app";
export const PartnerComponent = observer((props) => {
const store = useStore();
const [form] = Form.useForm();
const {Option} = Select;
const history = useHistory();
const [idData, setIdData] = useState('');
const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
await store.partner.getDataSubCategories();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
}, []);
const handleEditButton = (data) => {
console.log(data, "isi data")
form.setFieldsValue({
name: data.name,
npwp: data.npwp,
address: data.address,
});
store.partner.visibleModalPartner = true;
setIdData(data.id);
}
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
},
{
title: "Npwp",
dataIndex: "npwp",
key: "npwp",
},
{
title: "Address",
dataIndex: "address",
key: "address",
},
{
title: "Status",
dataIndex: "status",
key: "status",
render: (text, record) => (
<Tag
color={record?.status === true ? "processing" : "#E3E8EE"}
style={{ color: "#4F566B" }}
>
{record?.status === true ? " ACTIVE" : "INACTIVE"}
</Tag>
),
},
{
title: "Action",
key: "action",
render: (text, record) => (
<Space size="middle">
<Button
onClick={() => handleEditButton(record)}
>Edit</Button>
<Button
onClick={() => handleDelete(record.id)}
>
Delete
</Button>
</Space>
),
},
];
const deleteData = async (id) => {
try {
console.log(id);
await store.product.delete(id);
message.success("Data Berhasil Dihapus");
history.push(LINKS.PRODUCT);
} catch (err) {
console.log("error", err);
message.error("Gagal menghapus");
}
};
const handleDelete = (id) => {
Modal.confirm({
title: "Are you sure delete this record?",
icon: <ExclamationCircleOutlined/>,
okText: "Yes",
okType: "primary",
cancelText: "Cancel",
onOk() {
return deleteData(id);
},
onCancel() {
console.log("Cancel");
},
});
};
const handleCancel = () => {
setIdData('')
store.partner.visibleModalPartner = false;
}
const handleSubmit = async (data) => {
console.log(data, "isi data2")
if (idData !== '') {
setConfirmLoading(true);
try {
await store.partner.update(idData, data)
message.success("Success Update Data Member")
} catch (e) {
message.error("Failed Update Data Member")
}
setConfirmLoading(false);
store.partner.visibleModalPartner = false;
setIdData('');
form.resetFields();
} else {
setConfirmLoading(true);
try {
await store.partner.create(data)
message.success("Success Add New Member")
} catch (e) {
console.log(e, "apa errornya")
message.error("Failed Add Member")
}
setConfirmLoading(false);
store.partner.visibleModalPartner = false;
setIdData('');
form.resetFields();
}
}
return (
<div>
<Table
style={{textAlign: "center"}}
columns={columns}
dataSource={store.partner.data}
bordered
pagination={{
pageSize: store.partner.pageSize,
total: store.partner.total_data,
current: store.partner.page + 1,
showSizeChanger: true,
simple: false
}}
onChange={async (page) => {
let pageNumber = page.current;
store.partner.pageSize = page.pageSize;
store.partner.page = pageNumber - 1;
// store.membership.isLoading = true;
await store.partner.getData();
// store.membership.isLoading = false;
}}
/>
<Modal
visible={store.partner.visibleModalPartner}
title={idData ? "Edit Product" : "Create a new Product"}
okText={idData ? "Edit" : "Create"}
cancelText="Cancel"
onCancel={() => {
form.resetFields();
handleCancel();
}}
onOk={() => {
form
.validateFields()
.then((values) => {
console.log(values, "isi form")
handleSubmit(values);
form.resetFields();
})
.catch((info) => {
console.error("Validate Failed:", info);
});
}}
>
<Form
form={form}
layout="vertical"
>
<Form.Item
name="name"
label="Name"
rules={[{required: true, message: 'Please input name!'}]}
>
<Input/>
</Form.Item>
<Form.Item
name="owner"
label="Owner"
rules={[{required: true, message: 'Please input owner!'}]}
>
<Input/>
</Form.Item>
<Form.Item
name="password_account"
label="Password Account"
rules={[{required: true, message: 'Please input password account!'}]}
>
<Input/>
</Form.Item>
<Form.Item
name="npwp"
label="Npwp"
rules={[{required: true, message: 'Please input npwp!'}]}
>
<Input/>
</Form.Item>
<Form.Item
name="address"
label="address"
rules={[{required: true, message: 'Please input password!'}]}
>
<Input/>
</Form.Item>
</Form>
</Modal>
</div>
);
});

18
src/component/ProductComponent.js
View File

@ -177,9 +177,25 @@ export const ProductComponent = observer((props) => {
<Table <Table
style={{textAlign: "center"}} style={{textAlign: "center"}}
columns={columns} columns={columns}
dataSource={props.data} dataSource={store.product.data}
bordered bordered
pagination={{
pageSize: store.product.pageSize,
total: store.product.total_data,
current: store.product.page + 1,
showSizeChanger: true,
simple: false
}}
onChange={async (page) => {
let pageNumber = page.current;
store.product.pageSize = page.pageSize;
store.product.page = pageNumber - 1;
// store.membership.isLoading = true;
await store.product.getData();
// store.membership.isLoading = false;
}}
/> />
<Modal <Modal
visible={store.product.visibleModalProduct} visible={store.product.visibleModalProduct}
title={idData ? "Edit Product" : "Create a new Product"} title={idData ? "Edit Product" : "Create a new Product"}

219
src/component/SupplierComponent.js Normal file
View File

@ -0,0 +1,219 @@
import React, { useEffect, useState } from "react";
import {
Button,
Form,
Input,
message,
Modal,
Select,
Space,
Table,
Tag,
} from "antd";
import { observer } from "mobx-react-lite";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import { useHistory } from "react-router-dom";
import { capitalize } from "lodash";
import { useStore } from "../utils/useStore";
import { LINKS } from "../routes/app";
export const SupplierComponent = observer((props) => {
const store = useStore();
const [form] = Form.useForm();
const { Option } = Select;
const history = useHistory();
const [idData, setIdData] = useState("");
const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
await store.product.getDataSubCategories();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
}, []);
const handleEditButton = (data) => {
console.log(data, "isi data");
form.setFieldsValue({
name: data.name,
code: data.code,
status:data.status
});
store.supplier.visibleModalSupplier = true;
setIdData(data.id);
};
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
},
{
title: "Kode",
dataIndex: "code",
key: "code",
},
{
title: "Status",
dataIndex: "status",
key: "status",
render: (text, record) => (
<Tag
color={record?.status === true ? "processing" : "#E3E8EE"}
style={{ color: "#4F566B" }}
>
{record?.status === true ? " ACTIVE" : "INACTIVE"}
</Tag>
),
},
{
title: "Action",
key: "action",
render: (text, record) => (
<Space size="middle">
<Button onClick={() => handleEditButton(record)}>Edit</Button>
<Button onClick={() => handleDelete(record.id)}>Delete</Button>
</Space>
),
},
];
const deleteData = async (id) => {
try {
console.log(id);
await store.product.delete(id);
message.success("Data Berhasil Dihapus");
history.push(LINKS.PRODUCT);
} catch (err) {
console.log("error", err);
message.error("Gagal menghapus");
}
};
const handleDelete = (id) => {
Modal.confirm({
title: "Are you sure delete this record?",
icon: <ExclamationCircleOutlined />,
okText: "Yes",
okType: "primary",
cancelText: "Cancel",
onOk() {
return deleteData(id);
},
onCancel() {
console.log("Cancel");
},
});
};
const handleCancel = () => {
setIdData("");
store.supplier.visibleModalSupplier = false;
};
const handleSubmit = async (data) => {
console.log(data, "isi data2");
if (idData !== "") {
setConfirmLoading(true);
try {
await store.supplier.update(idData, data);
message.success("Success Update Data Member");
} catch (e) {
message.error("Failed Update Data Member");
}
setConfirmLoading(false);
store.supplier.visibleModalSupplier = false;
setIdData("");
form.resetFields();
} else {
setConfirmLoading(true);
try {
await store.supplier.create(data);
message.success("Success Add New Member");
//await store.supplier.getData()
} catch (e) {
console.log(e, "apa errornya");
message.error("Failed Add Member");
}
setConfirmLoading(false);
store.supplier.visibleModalSupplier = false;
setIdData("");
form.resetFields();
}
};
return (
<div>
<Table
style={{ textAlign: "center" }}
columns={columns}
dataSource={store.supplier.data}
bordered
pagination={{
pageSize: store.supplier.pageSize,
total: store.supplier.total_data,
current: store.supplier.page + 1,
showSizeChanger: true,
simple: false,
}}
onChange={async (page) => {
let pageNumber = page.current;
store.supplier.pageSize = page.pageSize;
store.supplier.page = pageNumber - 1;
// store.membership.isLoading = true;
await store.supplier.getData();
// store.membership.isLoading = false;
}}
/>
<Modal
visible={store.supplier.visibleModalSupplier}
title={idData ? "Edit Supplier" : "Create a new Supplier"}
okText={idData ? "Edit" : "Create"}
cancelText="Cancel"
onCancel={() => {
form.resetFields();
handleCancel();
}}
onOk={() => {
form
.validateFields()
.then((values) => {
console.log(values, "isi form");
handleSubmit(values);
form.resetFields();
})
.catch((info) => {
console.error("Validate Failed:", info);
});
}}
>
<Form form={form} layout="vertical">
<Form.Item
name="name"
label="Name"
rules={[{ required: true, message: "Please input name!" }]}
>
<Input />
</Form.Item>
<Form.Item
name="code"
label="Kode"
rules={[{ required: true, message: "Please input kode!" }]}
>
<Input />
</Form.Item>
</Form>
</Modal>
</div>
);
});

6
src/index.css
View File

@ -57,3 +57,9 @@ code {
.shadow { .shadow {
box-shadow: 0 7px 14px 0 rgba(60, 66, 87, 0.05), 0 3px 6px 0 rgba(0, 0, 0, 0.05); box-shadow: 0 7px 14px 0 rgba(60, 66, 87, 0.05), 0 3px 6px 0 rgba(0, 0, 0, 0.05);
} }
.ant-menu-sub.ant-menu-inline{
background-color: #e3e8ee !important;
}
.ant-menu-submenu-arrow{
padding-right: 40px !important;
}

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

@ -1,451 +1,500 @@
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 {HomeOutlined, MenuOutlined, UserOutlined,} from "@ant-design/icons"; import { HomeOutlined, MenuOutlined, UserOutlined } 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;
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 <div
className={"transparent"} style={{
width={240} paddingLeft: 20,
style={{ marginBottom: 40,
overflowX: "hidden", }}
bottom: 0, >
justifyContent: "flex-start", <Paragraph
paddingTop: 20, style={{
paddingLeft: 20, margin: 0,
position: "fixed", padding: 0,
top: 0, fontSize: 20,
zIndex: 10, marginLeft: 5,
}} fontWeight: 600,
color: "#828282",
}}
> >
PPOB
</Paragraph>
<Paragraph
style={{
margin: 0,
padding: 0,
fontSize: 11,
marginLeft: 5,
fontWeight: 600,
color: "#413d3e",
}}
>
Admin
</Paragraph>
</div>
<MenuList closeLeftDrawer={() => {}} />
</Sider>
)}
{store.ui.mediaQuery.isMobile && (
<Drawer
title="Navigation"
placement={"left"}
closable={false}
width={"50%"}
onClose={() => {
store.ui.toggleLeftDrawerIsShown();
}}
visible={store.ui.leftDrawerIsShown}
key={"dashboard-drawer"}
bodyStyle={{
padding: 0,
paddingTop: 20,
}}
>
<div
style={{
marginLeft: 0,
paddingLeft: 0,
}}
>
<Menu>
<Menu.Item key="home">
<Link to={LINKS.HOME}>
<HomeOutlined />
<span>Home</span>
</Link>
</Menu.Item>
{store.authentication.userData.role !== "Retail" && (
<Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}>
<HomeOutlined />
<span>Membership</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role !== "Retail" && (
<SubMenu
key="config"
icon={<HomeOutlined />}
title="Config"
style={{ backgroundColor: "#e3e8ee" }}
>
<Menu.Item key="partner">
<Link to={LINKS.PARTNER}>
<HomeOutlined />
<span>Partner</span>
</Link>
</Menu.Item>
<Menu.Item key="commision">
<Link to={LINKS.PARTNER}>
<HomeOutlined />
<span>Commision</span>
</Link>
</Menu.Item>
<Menu.Item key="supplier">
<Link to={LINKS.PARTNER}>
<HomeOutlined />
<span>Supplier</span>
</Link>
</Menu.Item>
</SubMenu>
)}
{store.authentication.userData.role !== "Retail" && (
<Menu.Item key="product">
<Link to={LINKS.PRODUCT}>
<HomeOutlined />
<span>Product</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role === "Retail" && (
<Menu.Item key="transaction">
<Link to={LINKS.TRANSACTION}>
<HomeOutlined />
<span>Transaction</span>
</Link>
</Menu.Item>
)}
<Menu.Item key="profile">
<Link to={LINKS.PROFILE}>
<UserOutlined />
<span>Profile</span>
</Link>
</Menu.Item>
{/*<Menu.Item key="about">*/}
{/* <Link to={'/app/about'}>*/}
{/* <CalendarOutlined/>*/}
{/* <span>About</span>*/}
{/* </Link>*/}
{/*</Menu.Item>*/}
<Menu.Divider
style={{ background: "transparent", paddingTop: 15 }}
/>
</Menu>
</div>
</Drawer>
)}
<Layout
className={"transparent"}
style={{
position: "relative",
display: "block",
paddingLeft: store.ui.mediaQuery.isDesktop ? 200 : 0,
height: "100vh",
}}
>
<Header
theme={"light"}
className={store.ui.mediaQuery.isMobile ? "shadow" : null}
style={{
height: store.ui.mediaQuery.isDesktop ? 24 : 35,
// width: 'calc(100vw - 200px)',
width: "100%",
position: store.ui.mediaQuery.isDesktop ? "fixed" : "fixed",
zIndex: 99,
paddingLeft: store.ui.mediaQuery.isDesktop ? 14 : 0,
paddingRight: store.ui.mediaQuery.isDesktop ? 14 : 0,
backgroundColor: store.ui.mediaQuery.isMobile
? "#fff"
: "transparent",
maxWidth: store.ui.mediaQuery.isDesktop ? 1024 : 768,
// minWidth: store.ui.mediaQuery.isDesktop ? 768 : 0,
top: store.ui.mediaQuery.isMobile ? 0 : 12,
/**/
}}
>
{store.ui.mediaQuery.isMobile && (
<div
className={store.ui.mediaQuery.isMobile ? "shadow" : null}
style={{
top: 0,
left: 0,
paddingTop: 8,
position: "relative",
display: "flex",
justifyContent: "space-between",
alignItems: "stretch",
flexDirection: "column",
// boxShadow: '0 7px 14px 0 rgba(60, 66, 87, 0.05), 0 3px 6px 0 rgba(0, 0, 0, 0.05)'
}}
>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
height: "100%",
width: "100%",
paddingLeft: store.ui.mediaQuery.isMobile ? 10 : 20,
paddingRight: store.ui.mediaQuery.isMobile ? 0 : 20,
paddingBottom: 4,
marginTop: -5,
}}
>
<Button
type="link"
icon={
<MenuOutlined
style={{
fontSize: "12px",
color: "#5b5b5b",
marginLeft: -10,
}}
/>
}
onClick={() => {
store.ui.toggleLeftDrawerIsShown();
}}
/>
<div <div
style={{ style={{
paddingLeft: 20, display: "flex",
marginBottom: 40, flexDirection: "column",
}} justifyContent: "flex-start",
alignItems: "stretch",
padding: 0,
margin: 0,
paddingTop: 5,
}}
> >
<Paragraph {/*<img*/}
style={{ {/* className={[classes.logoFull]}*/}
margin: 0, {/* style={{*/}
padding: 0, {/* maxHeight: 18,*/}
fontSize: 20, {/* maxWidth: 75,*/}
marginLeft: 5, {/* }}*/}
fontWeight: 600, {/* src={parkirLogoFull}*/}
color: "#828282", {/*/>*/}
}} {/*<Paragraph*/}
> {/* style={{*/}
PPOB {/* margin: "-5px 0px 0px 2px",*/}
</Paragraph> {/* padding: 0,*/}
<Paragraph {/* lineHeight: "18px",*/}
style={{ {/* fontSize: 8,*/}
margin: 0, {/* fontWeight: 800,*/}
padding: 0, {/* color: "#8c8c8c",*/}
fontSize: 11, {/* textAlign: "center",*/}
marginLeft: 5, {/* }}*/}
fontWeight: 600, {/*>*/}
color: "#413d3e", {/* {store.authentication.userData.role || "Apps"}*/}
}} {/*</Paragraph>*/}
>
Admin
</Paragraph>
</div> </div>
<MenuList closeLeftDrawer={() => { <Popover
}}/> className={store.ui.mediaQuery.isDesktop ? "shadow" : null}
</Sider>} autoAdjustOverflow={true}
placement="bottomRight"
{store.ui.mediaQuery.isMobile && ( content={
<Drawer <Menu
title="Navigation" type={"line"}
placement={"left"} inlineIndent={0}
closable={false} theme="light"
width={"50%"} style={{
onClose={() => { backgroundColor: "transparent",
store.ui.toggleLeftDrawerIsShown() borderRightWidth: 0,
}} }}
visible={store.ui.leftDrawerIsShown} mode="inline"
key={"dashboard-drawer"}
bodyStyle={{
padding: 0,
paddingTop: 20,
}}
>
<div
style={{
marginLeft: 0,
paddingLeft: 0,
}}
> >
<Menu> <Menu.Item>
<Menu.Item key="home"> <Link to={LINKS.PROFILE}>
<Link to={LINKS.HOME}> <span>Profile</span>
<HomeOutlined/> </Link>
<span>Home</span> </Menu.Item>
</Link> <Menu.Item
</Menu.Item> onClick={() => {
{store.authentication.userData.role !== 'Retail' && <Menu.Item key="membership"> store.authentication.logout();
<Link to={LINKS.MEMBERSHIP}> history.push("/login");
<HomeOutlined/> }}
<span>Membership</span> >
</Link> <span>Sign out</span>
</Menu.Item>} </Menu.Item>
{store.authentication.userData.role !== 'Retail' && <Menu.Item key="product"> </Menu>
<Link to={LINKS.PRODUCT}> }
<HomeOutlined/> title={
<span>Product</span> <Text>
</Link> {store.user.data.username}
</Menu.Item>} <Paragraph
{store.authentication.userData.role === 'Retail' && <Menu.Item key="transaction"> style={{ fontWeight: 400 }}
<Link to={LINKS.TRANSACTION}> type={"secondary-dark"}
<HomeOutlined/> >
<span>Transaction</span> {store.authentication.userData.username}
</Link> </Paragraph>
</Menu.Item>} </Text>
<Menu.Item key="profile"> }
<Link to={LINKS.PROFILE}> trigger="click"
<UserOutlined/> visible={clicked}
<span>Profile</span> onVisibleChange={() => setClicked(!clicked)}
</Link> >
</Menu.Item> <Button
{/*<Menu.Item key="about">*/} size={"default"}
{/* <Link to={'/app/about'}>*/} type={store.ui.mediaQuery.isDesktop ? "" : "link"}
{/* <CalendarOutlined/>*/} style={{
{/* <span>About</span>*/} marginRight: store.ui.mediaQuery.isDesktop ? 20 : 10,
{/* </Link>*/} }}
{/*</Menu.Item>*/} icon={
<Menu.Divider style={{background: "transparent", paddingTop: 15}}/> store.ui.mediaQuery.isDesktop ? (
</Menu> <UserOutlined style={{ fontSize: "13px" }} />
</div> ) : (
</Drawer> <UserOutlined
)} style={{ fontSize: "13px", color: "#5b5b5b" }}
/>
<Layout )
className={"transparent"} }
/>
</Popover>
</div>
<div
style={{ style={{
position: "relative", borderTopWidth: 0.5,
display: "block", borderTopColor: "#e3e3e3",
paddingLeft: store.ui.mediaQuery.isDesktop ? 200 : 0, borderTopStyle: "solid",
height: "100vh",
}} }}
/>
{/*<BreadcumbComponent data={}/>*/}
</div>
)}
{store.ui.mediaQuery.isDesktop && (
<div
className={["transparent"].join(" ")}
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
height: "100%",
maxWidth: 1024,
minWidth: 768,
width: "calc(100vw - 220px)",
}}
> >
<Header <div
theme={"light"} style={{
className={store.ui.mediaQuery.isMobile ? "shadow" : null} flexDirection: "row",
display: "flex",
justifyContent: "flex-start",
alignItems: "center",
width: "100%",
}}
></div>
<Popover
className={store.ui.mediaQuery.isDesktop ? "shadow" : null}
autoAdjustOverflow={true}
placement="bottomRight"
content={
<Menu
type={"line"}
inlineIndent={0}
theme="light"
style={{ style={{
height: store.ui.mediaQuery.isDesktop ? 24 : 35, backgroundColor: "transparent",
// width: 'calc(100vw - 200px)', borderRightWidth: 0,
width: "100%",
position: store.ui.mediaQuery.isDesktop ? "fixed" : "fixed",
zIndex: 99,
paddingLeft: store.ui.mediaQuery.isDesktop ? 14 : 0,
paddingRight: store.ui.mediaQuery.isDesktop ? 14 : 0,
backgroundColor: store.ui.mediaQuery.isMobile
? "#fff"
: "transparent",
maxWidth: store.ui.mediaQuery.isDesktop ? 1024 : 768,
// minWidth: store.ui.mediaQuery.isDesktop ? 768 : 0,
top: store.ui.mediaQuery.isMobile ? 0 : 12,
/**/
}} }}
> mode="inline"
{store.ui.mediaQuery.isMobile && ( >
<div <Menu.Item key={"profile"}>
className={store.ui.mediaQuery.isMobile ? "shadow" : null} <Link to={LINKS.PROFILE}>
style={{ <span>Profile</span>
top: 0, </Link>
left: 0, </Menu.Item>
paddingTop: 8, <Menu.Item
position: "relative", key={"logout"}
display: "flex", onClick={() => {
justifyContent: "space-between", store.authentication.logout();
alignItems: "stretch", history.push("/login");
flexDirection: "column", }}
// boxShadow: '0 7px 14px 0 rgba(60, 66, 87, 0.05), 0 3px 6px 0 rgba(0, 0, 0, 0.05)'
}}
>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
height: "100%",
width: "100%",
paddingLeft: store.ui.mediaQuery.isMobile ? 10 : 20,
paddingRight: store.ui.mediaQuery.isMobile ? 0 : 20,
paddingBottom: 4,
marginTop: -5,
}}
>
<Button
type="link"
icon={
<MenuOutlined
style={{
fontSize: "12px",
color: "#5b5b5b",
marginLeft: -10,
}}
/>
}
onClick={() => {
store.ui.toggleLeftDrawerIsShown();
}}
/>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "flex-start",
alignItems: "stretch",
padding: 0,
margin: 0,
paddingTop: 5,
}}
>
{/*<img*/}
{/* className={[classes.logoFull]}*/}
{/* style={{*/}
{/* maxHeight: 18,*/}
{/* maxWidth: 75,*/}
{/* }}*/}
{/* src={parkirLogoFull}*/}
{/*/>*/}
{/*<Paragraph*/}
{/* style={{*/}
{/* margin: "-5px 0px 0px 2px",*/}
{/* padding: 0,*/}
{/* lineHeight: "18px",*/}
{/* fontSize: 8,*/}
{/* fontWeight: 800,*/}
{/* color: "#8c8c8c",*/}
{/* textAlign: "center",*/}
{/* }}*/}
{/*>*/}
{/* {store.authentication.userData.role || "Apps"}*/}
{/*</Paragraph>*/}
</div>
<Popover
className={store.ui.mediaQuery.isDesktop ? "shadow" : null}
autoAdjustOverflow={true}
placement="bottomRight"
content={
<Menu
type={"line"}
inlineIndent={0}
theme="light"
style={{
backgroundColor: "transparent",
borderRightWidth: 0,
}}
mode="inline"
>
<Menu.Item>
<Link to={LINKS.PROFILE}>
<span>Profile</span>
</Link>
</Menu.Item>
<Menu.Item
onClick={() => {
store.authentication.logout();
history.push("/login");
}}
>
<span>Sign out</span>
</Menu.Item>
</Menu>
}
title={
<Text>
{store.user.data.username}
<Paragraph style={{fontWeight: 400}} type={"secondary-dark"}>
{store.authentication.userData.username}
</Paragraph>
</Text>
}
trigger="click"
visible={clicked}
onVisibleChange={() => setClicked(!clicked)}
>
<Button
size={"default"}
type={store.ui.mediaQuery.isDesktop ? "" : "link"}
style={{marginRight: store.ui.mediaQuery.isDesktop ? 20 : 10}}
icon={
store.ui.mediaQuery.isDesktop ? (
<UserOutlined style={{fontSize: "13px"}}/>
) : (
<UserOutlined style={{fontSize: "13px", color: "#5b5b5b"}}/>
)
}
/>
</Popover>
</div>
<div
style={{
borderTopWidth: 0.5,
borderTopColor: "#e3e3e3",
borderTopStyle: "solid",
}}
/>
{/*<BreadcumbComponent data={}/>*/}
</div>
)}
{store.ui.mediaQuery.isDesktop && (
<div
className={["transparent"].join(" ")}
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
height: "100%",
maxWidth: 1024,
minWidth: 768,
width: "calc(100vw - 220px)",
}}
>
<div
style={{
flexDirection: "row",
display: "flex",
justifyContent: "flex-start",
alignItems: "center",
width: "100%",
}}
>
</div>
<Popover
className={store.ui.mediaQuery.isDesktop ? "shadow" : null}
autoAdjustOverflow={true}
placement="bottomRight"
content={
<Menu
type={"line"}
inlineIndent={0}
theme="light"
style={{
backgroundColor: "transparent",
borderRightWidth: 0,
}}
mode="inline"
>
<Menu.Item key={'profile'}>
<Link to={LINKS.PROFILE}>
<span>Profile</span>
</Link>
</Menu.Item>
<Menu.Item
key={'logout'}
onClick={() => {
store.authentication.logout();
history.push("/login");
}}
>
<span>Sign out</span>
</Menu.Item>
</Menu>
}
title={
<Text>
{store.user.data.email}{" "}
<Paragraph style={{fontWeight: 400}} type={"secondary-dark"}>
{store.authentication.userData.username}
</Paragraph>
</Text>
}
trigger="click"
visible={clicked}
onVisibleChange={() => setClicked(!clicked)}
>
<Button
size={"default"}
type={store.ui.mediaQuery.isDesktop ? "" : "link"}
style={{marginRight: store.ui.mediaQuery.isDesktop ? 20 : 10}}
icon={
store.ui.mediaQuery.isDesktop ? (
<UserOutlined style={{fontSize: "13px"}}/>
) : (
<UserOutlined style={{fontSize: "13px", color: "#5b5b5b"}}/>
)
}
/>
</Popover>
</div>
)}
</Header>
<Layout
className={["transparent"].join(" ")}
tabIndex={"-1"}
style={{
zIndex: 0,
display: "flex",
// overflowX: store.ui.mediaQuery.isMobile ? 'auto' : "hidden",
// paddingLeft: 8,
// paddingRight: 8,
// width: 'calc(90vw - 220px)',
height: "100%",
}}
>
<Content
className={["transparent"].join(" ")}
style={{
// maxHeight: 'calc(100vh - 98px)',
// paddingBottom: 48,
padding: 0,
margin: 0,
position: "relative",
marginTop: store.ui.mediaQuery.isDesktop ? 43 : 37,
// overflow: 'auto',
overflowX: store.ui.mediaQuery.isMobile ? "auto" : "hidden",
// minWidth: 768,
maxWidth: 1024,
// minWidth: 768,
width: store.ui.mediaQuery.isDesktop
? "calc(100vw - 210px)"
: "calc(100vw)",
zIndex: 22,
// height: `calc(100vh - ${store.ui.mediaQuery.isDesktop ? 78 : 71}px)`,
height: `calc(100vh - ${
store.ui.mediaQuery.isDesktop ? 43 : 37
}px)`,
// paddingLeft: 8,
// paddingRight: 8
}}
> >
<AppRoute/> <span>Sign out</span>
</Content> </Menu.Item>
</Layout> </Menu>
</Layout> }
title={
<Text>
{store.user.data.email}{" "}
<Paragraph
style={{ fontWeight: 400 }}
type={"secondary-dark"}
>
{store.authentication.userData.username}
</Paragraph>
</Text>
}
trigger="click"
visible={clicked}
onVisibleChange={() => setClicked(!clicked)}
>
<Button
size={"default"}
type={store.ui.mediaQuery.isDesktop ? "" : "link"}
style={{
marginRight: store.ui.mediaQuery.isDesktop ? 20 : 10,
}}
icon={
store.ui.mediaQuery.isDesktop ? (
<UserOutlined style={{ fontSize: "13px" }} />
) : (
<UserOutlined
style={{ fontSize: "13px", color: "#5b5b5b" }}
/>
)
}
/>
</Popover>
</div>
)}
</Header>
<Layout
className={["transparent"].join(" ")}
tabIndex={"-1"}
style={{
zIndex: 0,
display: "flex",
// overflowX: store.ui.mediaQuery.isMobile ? 'auto' : "hidden",
// paddingLeft: 8,
// paddingRight: 8,
// width: 'calc(90vw - 220px)',
height: "100%",
}}
>
<Content
className={["transparent"].join(" ")}
style={{
// maxHeight: 'calc(100vh - 98px)',
// paddingBottom: 48,
padding: 0,
margin: 0,
position: "relative",
marginTop: store.ui.mediaQuery.isDesktop ? 43 : 37,
// overflow: 'auto',
overflowX: store.ui.mediaQuery.isMobile ? "auto" : "hidden",
// minWidth: 768,
maxWidth: 1024,
// minWidth: 768,
width: store.ui.mediaQuery.isDesktop
? "calc(100vw - 210px)"
: "calc(100vw)",
zIndex: 22,
// height: `calc(100vh - ${store.ui.mediaQuery.isDesktop ? 78 : 71}px)`,
height: `calc(100vh - ${
store.ui.mediaQuery.isDesktop ? 43 : 37
}px)`,
// paddingLeft: 8,
// paddingRight: 8
}}
>
<AppRoute />
</Content>
</Layout> </Layout>
); </Layout>
</Layout>
);
}); });

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

@ -1,76 +1,112 @@
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 {HomeOutlined, UserOutlined,} from "@ant-design/icons"; import {
import {observer} from "mobx-react-lite"; HomeOutlined,
import {useStore} from "../../utils/useStore"; UserOutlined,
import {LINKS} from "../../routes/app"; AppstoreOutlined,
MenuUnfoldOutlined,
DatabaseOutlined,
MoneyCollectOutlined,
ProjectOutlined,
FileProtectOutlined
} from "@ant-design/icons";
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) => { 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"
style={{ style={{
backgroundColor: "transparent", backgroundColor: "transparent",
borderRightWidth: 0, borderRightWidth: 0,
fontWeight: 400, fontWeight: 400,
paddingLeft: 0, paddingLeft: 0,
}} }}
onClick={({keyPath, item}) => { onClick={({ keyPath, item }) => {
props.closeLeftDrawer(); props.closeLeftDrawer();
}} }}
mode="inline" mode="inline"
selectedKeys={setKeys} selectedKeys={setKeys}
onSelect={({setKeys, item, selectedKeys}) => setSetKeys(selectedKeys)} onSelect={({ setKeys, item, selectedKeys }) => setSetKeys(selectedKeys)}
overflowedIndicator={0} overflowedIndicator={0}
forceSubMenuRender={true} forceSubMenuRender={true}
> >
<Menu.Item key="home"> <Menu.Item key="home">
<Link to={LINKS.HOME}> <Link to={LINKS.HOME}>
<HomeOutlined/> <HomeOutlined />
<span>Home</span> <span>Home</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
{store.authentication.userData.role !== 'Retail' && <Menu.Item key="membership"> {store.authentication.userData.role !== "Retail" && (
<Link to={LINKS.MEMBERSHIP}> <Menu.Item key="membership">
<HomeOutlined/> <Link to={LINKS.MEMBERSHIP}>
<span>Membership</span> <FileProtectOutlined />
</Link> <span>Membership</span>
</Menu.Item>} </Link>
{store.authentication.userData.role !== 'Retail' && <Menu.Item key="product"> </Menu.Item>
<Link to={LINKS.PRODUCT}> )}
<HomeOutlined/> {store.authentication.userData.role !== "Retail" && (
<span>Product</span> <SubMenu key="config" icon={<MenuUnfoldOutlined />} title="Config" style={{backgroundColor:'#e3e8ee'}}>
</Link> <Menu.Item key="partner">
</Menu.Item>} <Link to={LINKS.PARTNER}>
{store.authentication.userData.role === ('Retail' || 'Admin') && <Menu.Item key="transaction"> <ProjectOutlined/>
<Link to={LINKS.TRANSACTION}> <span>Partner</span>
<HomeOutlined/> </Link>
<span>Transaction</span> </Menu.Item>
</Link> <Menu.Item key="commision">
</Menu.Item>} <Link to={LINKS.COMMISION}>
<Menu.Item key="profile"> <MoneyCollectOutlined />
<Link to={LINKS.PROFILE}> <span>Commision</span>
<UserOutlined/> </Link>
<span>Profile</span> </Menu.Item>
</Link> <Menu.Item key="supplier">
</Menu.Item> <Link to={LINKS.SUPPLIER}>
{/*<Menu.Item key="about">*/} <AppstoreOutlined/>
{/* <Link to={'/app/about'}>*/} <span>Supplier</span>
{/* <CalendarOutlined/>*/} </Link>
{/* <span>About</span>*/} </Menu.Item>
{/* </Link>*/} </SubMenu>
{/*</Menu.Item>*/} )}
<Menu.Divider style={{background: "transparent", paddingTop: 15}}/> {store.authentication.userData.role !== "Retail" && (
</Menu> <Menu.Item key="product">
); <Link to={LINKS.PRODUCT}>
<DatabaseOutlined />
<span>Product</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role === ("Retail" || "Admin") && (
<Menu.Item key="transaction">
<Link to={LINKS.TRANSACTION}>
<HomeOutlined />
<span>Transaction</span>
</Link>
</Menu.Item>
)}
<Menu.Item key="profile">
<Link to={LINKS.PROFILE}>
<UserOutlined />
<span>Profile</span>
</Link>
</Menu.Item>
{/*<Menu.Item key="about">*/}
{/* <Link to={'/app/about'}>*/}
{/* <CalendarOutlined/>*/}
{/* <span>About</span>*/}
{/* </Link>*/}
{/*</Menu.Item>*/}
<Menu.Divider style={{ background: "transparent", paddingTop: 15 }} />
</Menu>
);
}); });

86
src/pages/Config/Commision.js Normal file
View File

@ -0,0 +1,86 @@
import React, {useEffect, useState} from "react";
import {Button, Card, Col, Input, Row, Tabs} from "antd";
import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {CommisionComponent} from "../../component/CommisionComponent";
import {LINKS} from "../../routes/app";
const {TabPane} = Tabs;
const {Search} = Input;
export const Commision = observer(() => {
const [isLoading, setIsLoading] = useState(false);
const store = useStore();
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
await store.partner.getDataCategories();
await store.partner.getData();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
}, []);
const handleChangeTabPane = async (key) => {
store.product.filterCategory = key;
console.log(key);
};
const routeData = [
{
route: LINKS.HOME,
name: "Home",
},
{
route: LINKS.PARTNER,
name: <span style={{fontWeight: 'bold'}}>Partner</span>,
},
];
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/>
<Card>
<Row style={{marginBottom: 20}}>
<Col span={12}>
<Button>
<FilterOutlined/>
Filter
</Button>
</Col>
<Col span={12} style={{textAlign: "right"}}>
<Search
placeholder="input search text"
style={{width: 200, marginRight: 10}}
/>
<Button onClick={() => store.partner.visibleModalPartner = true}>
<PlusSquareOutlined/> New
</Button>
</Col>
</Row>
<Tabs
onChange={handleChangeTabPane}
size="default"
tabBarGutter="50"
>
<TabPane
tab="Commision"
key="1"
>
<CommisionComponent/>
</TabPane>
))
</Tabs>
</Card>
</div>
);
});

86
src/pages/Config/Partner.js Normal file
View File

@ -0,0 +1,86 @@
import React, {useEffect, useState} from "react";
import {Button, Card, Col, Input, Row, Tabs} from "antd";
import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {PartnerComponent} from "../../component/PartnerComponent";
import {LINKS} from "../../routes/app";
const {TabPane} = Tabs;
const {Search} = Input;
export const Partner = observer(() => {
const [isLoading, setIsLoading] = useState(false);
const store = useStore();
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
await store.partner.getDataCategories();
await store.partner.getData();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
}, []);
const handleChangeTabPane = async (key) => {
store.product.filterCategory = key;
console.log(key);
};
const routeData = [
{
route: LINKS.HOME,
name: "Home",
},
{
route: LINKS.PARTNER,
name: <span style={{fontWeight: 'bold'}}>Partner</span>,
},
];
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/>
<Card>
<Row style={{marginBottom: 20}}>
<Col span={12}>
<Button>
<FilterOutlined/>
Filter
</Button>
</Col>
<Col span={12} style={{textAlign: "right"}}>
<Search
placeholder="input search text"
style={{width: 200, marginRight: 10}}
/>
<Button onClick={() => store.partner.visibleModalPartner = true}>
<PlusSquareOutlined/> New
</Button>
</Col>
</Row>
<Tabs
onChange={handleChangeTabPane}
size="default"
tabBarGutter="50"
>
<TabPane
tab="Partner"
key="1"
>
<PartnerComponent/>
</TabPane>
))
</Tabs>
</Card>
</div>
);
});

86
src/pages/Config/Supplier.js Normal file
View File

@ -0,0 +1,86 @@
import React, {useEffect, useState} from "react";
import {Button, Card, Col, Input, Row, Tabs} from "antd";
import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {SupplierComponent} from "../../component/SupplierComponent";
import {LINKS} from "../../routes/app";
const {TabPane} = Tabs;
const {Search} = Input;
export const Supplier = observer(() => {
const [isLoading, setIsLoading] = useState(false);
const store = useStore();
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
await store.supplier.getDataCategories();
await store.supplier.getData();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
}, []);
const handleChangeTabPane = async (key) => {
store.product.filterCategory = key;
console.log(key);
};
const routeData = [
{
route: LINKS.HOME,
name: "Home",
},
{
route: LINKS.SUPPLIER,
name: <span style={{fontWeight: 'bold'}}>Supplier</span>,
},
];
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/>
<Card>
<Row style={{marginBottom: 20}}>
<Col span={12}>
<Button>
<FilterOutlined/>
Filter
</Button>
</Col>
<Col span={12} style={{textAlign: "right"}}>
<Search
placeholder="input search text"
style={{width: 200, marginRight: 10}}
/>
<Button onClick={() => store.supplier.visibleModalSupplier = true}>
<PlusSquareOutlined/> New
</Button>
</Col>
</Row>
<Tabs
onChange={handleChangeTabPane}
size="default"
tabBarGutter="50"
>
<TabPane
tab="Supplier"
key="1"
>
<SupplierComponent/>
</TabPane>
))
</Tabs>
</Card>
</div>
);
});

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

@ -204,26 +204,26 @@ export const Membership = observer(() => {
</Row> </Row>
{store.ui.mediaQuery.isDesktop && ( {store.ui.mediaQuery.isDesktop && (
<Table <Table
key="1" key="1"
hasEmpty hasEmpty
size={"small"} columns={columns}
columns={columns} dataSource={store.membership.data}
dataSource={store.membership.data} bordered
bordered pagination={{
pageSize: store.membership.pageSize,
// pagination={{ total: store.membership.total_data,
// total: store.membership.total_data, current: store.membership.page + 1,
// current: store.membership.page, showSizeChanger: true,
// pageSize: store.membership.pageSize, simple: false
// simple: true }}
// }} onChange={async (page) => {
// onChange={(page) => { let pageNumber = page.current;
// store.membership.pageSize = page.pageSize; store.membership.pageSize = page.pageSize;
// store.membership.page = page.current; store.membership.page = pageNumber - 1;
// store.membership.getData(); // store.membership.isLoading = true;
// }} await store.membership.getData();
// current={store.membership.page} // store.membership.isLoading = false;
// loading={store.membership.pageSize} }}
/> />
)} )}

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

@ -76,9 +76,7 @@ export const Product = observer(() => {
tab={item.name} tab={item.name}
key={item.id} key={item.id}
> >
<ProductComponent <ProductComponent/>
data={store.product.data}
/>
</TabPane> </TabPane>
))} ))}
</Tabs> </Tabs>

145
src/pages/Transaction/Pulsa.js
View File

@ -1,25 +1,65 @@
import React from "react"; import React, { useEffect, useState } from "react";
import {Button, Card, Col, Dropdown, Menu, message, Modal, Row, Space,} from "antd"; import { useStore } from "../../utils/useStore";
import {DownOutlined, TabletOutlined, UserOutlined} from "@ant-design/icons"; import { Button, Card, Col, Dropdown, Menu, message, Modal, Row, Space, } from "antd";
import { DownOutlined, TabletOutlined, UserOutlined } from "@ant-design/icons";
export const Pulsa = () => { export const Pulsa = () => {
function handleMenuClick(e) { const store = useStore();
message.info("Click on menu item.");
console.log("click", e); const [isLoading, setIsLoading] = useState(false);
const [productData, setProductData] = useState([])
const [productFilter, setProductFilter] = useState("")
// useEffect(()=>{
// if(!productFilter){
// setProductData(store.transaction.data)
// }
// },[productFilter])
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
await store.transaction.getDataSubCategories();
await store.transaction.getData();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
}, []);
// data
useEffect(() => {
console.log('⚡ transaction data store', store.transaction.data)
setProductData(store.transaction.data)
}, [store.transaction.data])
// Subcategory
useEffect(() => {
console.log('⚡ transaction subcategory store', store.transaction.dataSubCategories)
}, [store.transaction.dataSubCategories])
function handleMenuClick(item) {
message.info("⚡ Click on menu item.");
console.log("⚡ click", item);
setProductFilter(item.name)
} }
const menu = ( const menu = (
<Menu onClick={handleMenuClick}> <Menu style={{
<Menu.Item key="1" icon={<UserOutlined/>}> backgroundColor: 'white'
1st menu item }}>
</Menu.Item> {store.transaction.dataSubCategories.map((item, index) => (
<Menu.Item key="2" icon={<UserOutlined/>}> <Menu.Item key="1" icon={<UserOutlined />} onClick={() => handleMenuClick(item)} >
2nd menu item {item.name}
</Menu.Item> </Menu.Item>
<Menu.Item key="3" icon={<UserOutlined/>}> ))}
3rd menu item
</Menu.Item>
</Menu> </Menu>
); );
@ -29,55 +69,12 @@ export const Pulsa = () => {
}); });
} }
const dataCard = [
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
{
title: "DATA AXIS BRONET 2GB-60HR",
price: "Harga : Rp.6.000",
},
]
return ( return (
<div> <div>
<Row> <Row>
<span style={{fontWeight: "bold", marginBottom: "10px"}}> <span style={{ fontWeight: "bold", marginBottom: "10px" }}>
Sub-Category Sub-Category
</span> </span>
</Row> </Row>
<Row> <Row>
<Space wrap> <Space wrap>
@ -88,34 +85,34 @@ export const Pulsa = () => {
color: "grey", color: "grey",
}} }}
> >
<TabletOutlined/> <TabletOutlined />
Select sub-Category Select sub-Category
<DownOutlined/> <DownOutlined />
</Button> </Button>
</Dropdown> </Dropdown>
</Space> </Space>
</Row> </Row>
<Row> <Row>
<span style={{fontWeight: "bold", marginBottom: "10px"}}> <span style={{ fontWeight: "bold", marginBottom: "10px" }}>
Produk & Nominal Produk & Nominal
</span> </span>
</Row> </Row>
<Row> <Row>
{dataCard.map((item, index) => ( {productData.map((item, index) => (
<Col key={index} xs={24} md={16} lg={8}> <Col key={index} xs={24} md={16} lg={8}>
<Card onClick={success}> <Card onClick={success}>
<span style={{color: "black"}}>{item.title}</span> <span style={{ color: "black" }}>{item.name}</span>
<br/> <br />
<span style={{color: "grey", fontSize: 10}}>{item.price}</span> <span style={{ color: "grey", fontSize: 10 }}>{item.price}</span>
</Card> </Card>
</Col> </Col>
))} ))}
</Row> </Row>
<Col style={{textAlign: "right"}}> <Col style={{ textAlign: "right" }}>
<Button style={{backgroundColor: "#2D9CDB", color: "white"}}> <Button style={{ backgroundColor: "#2D9CDB", color: "white" }}>
Beli Sekarang Beli Sekarang
</Button> </Button>
</Col> </Col>
</div> </div>
); );
}; };

17
src/routes/app.js
View File

@ -5,6 +5,10 @@ import {Membership} from "../pages/Membership/Membership";
import {Product} from "../pages/Product/Product"; import {Product} from "../pages/Product/Product";
import {Transaction} from "../pages/Transaction/Transaction"; import {Transaction} from "../pages/Transaction/Transaction";
import {Profile} from "../pages/Profile/Profile"; import {Profile} from "../pages/Profile/Profile";
import {Commision} from "../pages/Config/Commision";
import {Partner} from "../pages/Config/Partner";
import {Supplier} from "../pages/Config/Supplier";
export const LINKS = { export const LINKS = {
HOME: "/app/home", HOME: "/app/home",
@ -13,6 +17,10 @@ export const LINKS = {
PRODUCT: "/app/product", PRODUCT: "/app/product",
TRANSACTION: "/app/transaction", TRANSACTION: "/app/transaction",
PROFILE: "/app/profile", PROFILE: "/app/profile",
PARTNER: "/app/partner",
COMMISION: "/app/commision",
SUPPLIER: "/app/supplier",
}; };
export const AppRoute = () => { export const AppRoute = () => {
@ -20,12 +28,21 @@ export const AppRoute = () => {
<Route path={LINKS.HOME}> <Route path={LINKS.HOME}>
<Home/> <Home/>
</Route> </Route>
<Route path={LINKS.COMMISION}>
<Commision/>
</Route>
<Route path={LINKS.SUPPLIER}>
<Supplier/>
</Route>
<Route path={LINKS.MEMBERSHIP}> <Route path={LINKS.MEMBERSHIP}>
<Membership/> <Membership/>
</Route> </Route>
<Route path={LINKS.PRODUCT}> <Route path={LINKS.PRODUCT}>
<Product/> <Product/>
</Route> </Route>
<Route path={LINKS.PARTNER}>
<Partner/>
</Route>
<Route path={LINKS.TRANSACTION}> <Route path={LINKS.TRANSACTION}>
<Transaction/> <Transaction/>
</Route> </Route>

0
src/store/commision.js Normal file
View File

22
src/store/index.js
View File

@ -1,10 +1,14 @@
import {UI} from "./ui"; import { UI } from "./ui";
import {Authentication} from "./authentication"; import { Authentication } from "./authentication";
import {User} from "./user"; import { User } from "./user";
import {Membership} from "./membership"; import { Membership } from "./membership";
import {Product} from "./product"; import { Product } from "./product";
import {TokenUtil} from "../utils/token"; import { Partner } from "./partner";
import {Role} from "./role"; import { Supplier } from "./supplier";
//import { Commision } from "./commision";
import { Transaction } from "./transaction";
import { TokenUtil } from "../utils/token";
import { Role } from "./role";
export class Store { export class Store {
ui = new UI(this); ui = new UI(this);
@ -12,6 +16,10 @@ export class Store {
user = new User(this); user = new User(this);
membership = new Membership(this); membership = new Membership(this);
product = new Product(this); product = new Product(this);
partner = new Partner(this);
supplier = new Supplier(this);
//commision = new Commision(this);
transaction = new Transaction(this);
role = new Role(this); role = new Role(this);
constructor() { constructor() {

4
src/store/membership.js
View File

@ -26,8 +26,8 @@ export class Membership {
@action @action
async update(id, data) { async update(id, data) {
console.log(data) // console.log(data)
console.log(id) // console.log(id)
const response = await http.put('/users/' + id).send(data); const response = await http.put('/users/' + id).send(data);
console.log(response, 'Data user') console.log(response, 'Data user')
console.log(JSON.stringify(response.body.data), 'Data') console.log(JSON.stringify(response.body.data), 'Data')

69
src/store/partner.js Normal file
View File

@ -0,0 +1,69 @@
import {makeAutoObservable} from "mobx";
import {http} from "../utils/http";
export class Partner {
page = 0;
pageSize = 10
data = [];
total_data = 0;
filterCategory = null;
visibleModalPartner = false;
pageCategories = 0;
pageSizeCategories = 10
dataCategories = [];
total_dataCategories = 0;
pageSubCategories = 0;
pageSizeSubCategories = 10
dataSubCategories = [];
total_dataSubCategories = 0;
constructor(ctx) {
this.ctx = ctx;
makeAutoObservable(this);
}
async getData() {
const response = await http.get(`/users/partner?page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
this.data = response.body.data ?? []
this.total_data = response.body.total_data ?? 0
}
async getDataSubCategories() {
const response = await http.get(`/product/sub-categories?page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
this.dataSubCategories = response.body.data ?? []
this.total_dataSubCategories = response.body.count ?? 0
}
async getDataCategories() {
const response = await http.get(`/product/categories?page=${this.pageCategories}&pageSize=${this.pageSizeCategories}`);
this.dataCategories = response.body.data ?? []
this.total_dataCategories = response.body.total_data ?? 0
if (this.dataCategories.length > 0) {
this.filterCategory = this.dataCategories[0].id
}
}
async create(data) {
const response = await http.post('/users/partner').send(data);
await this.getData();
return response;
}
async update(id, data) {
const response = await http.put(`/product/${id}`).send(data);
await this.getData();
return response;
}
async delete(id) {
const response = await http.del(`/product/${id}`);
await this.getData();
return response;
}
}

69
src/store/supplier.js Normal file
View File

@ -0,0 +1,69 @@
import {makeAutoObservable} from "mobx";
import {http} from "../utils/http";
export class Supplier {
page = 0;
pageSize = 10
data = [];
total_data = 0;
filterCategory = null;
visibleModalSupplier = false;
pageCategories = 0;
pageSizeCategories = 10
dataCategories = [];
total_dataCategories = 0;
pageSubCategories = 0;
pageSizeSubCategories = 10
dataSubCategories = [];
total_dataSubCategories = 0;
constructor(ctx) {
this.ctx = ctx;
makeAutoObservable(this);
}
async getData() {
const response = await http.get(`/users/supplier?page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
this.data = response.body.data ?? []
this.total_data = response.body.total_data ?? 0
}
async getDataSubCategories() {
const response = await http.get(`/product/sub-categories?page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
this.dataSubCategories = response.body.data ?? []
this.total_dataSubCategories = response.body.count ?? 0
}
async getDataCategories() {
const response = await http.get(`/product/categories?page=${this.pageCategories}&pageSize=${this.pageSizeCategories}`);
this.dataCategories = response.body.data ?? []
this.total_dataCategories = response.body.total_data ?? 0
if (this.dataCategories.length > 0) {
this.filterCategory = this.dataCategories[0].id
}
}
async create(data) {
const response = await http.post('/users/supplier').send(data);
await this.getData();
return response;
}
async update(id, data) {
const response = await http.put(`/product/${id}`).send(data);
await this.getData();
return response;
}
async delete(id) {
const response = await http.del(`/product/${id}`);
await this.getData();
return response;
}
}

69
src/store/transaction.js Normal file
View File

@ -0,0 +1,69 @@
import { makeAutoObservable } from "mobx";
import { http } from "../utils/http";
export class Transaction {
page = 0;
pageSize = 10
data = [];
total_data = 0;
filterCategory = null;
visibleModalProduct = false;
pageCategories = 0;
pageSizeCategories = 10
dataCategories = [];
total_dataCategories = 0;
pageSubCategories = 0;
pageSizeSubCategories = 10
dataSubCategories = [];
total_dataSubCategories = 0;
constructor(ctx) {
this.ctx = ctx;
makeAutoObservable(this);
}
async getData() {
const response = await http.get(`/product/by-categories?categories=${this.filterCategory}&page=${this.page}&pageSize=${this.pageSize}`);
this.data = response.body.data ?? []
this.total_data = response.body.total_data ?? 0
}
async getDataSubCategories() {
const response = await http.get(`/product/sub-categories?page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
this.dataSubCategories = response.body.data ?? []
this.total_dataSubCategories = response.body.count ?? 0
}
async getDataCategories() {
const response = await http.get(`/product/categories?page=${this.pageCategories}&pageSize=${this.pageSizeCategories}`);
this.dataCategories = response.body.data ?? []
this.total_dataCategories = response.body.total_data ?? 0
if (this.dataCategories.length > 0) {
this.filterCategory = this.dataCategories[0].id
}
}
async create(data) {
const response = await http.post('/product').send(data);
await this.getData();
return response;
}
async update(id, data) {
const response = await http.put(`/product/${id}`).send(data);
await this.getData();
return response;
}
async delete(id) {
const response = await http.del(`/product/${id}`);
await this.getData();
return response;
}
}

12951
yarn.lock
View File

File diff suppressed because it is too large Load Diff