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
/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
style={{textAlign: "center"}}
columns={columns}
dataSource={props.data}
dataSource={store.product.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"}

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 {
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;
}

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

@ -1,19 +1,20 @@
import React, {useState} from "react";
import {Button, Drawer, Layout, Menu, Popover, Typography,} from "antd";
import {MenuList} from "./MenuList";
import {Link, useHistory} from "react-router-dom";
import {HomeOutlined, MenuOutlined, UserOutlined,} from "@ant-design/icons";
import {AppRoute, LINKS} from "../../routes/app";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {useMediaQuery} from "react-responsive";
import React, { useState } from "react";
import { Button, Drawer, Layout, Menu, Popover, Typography } from "antd";
import { MenuList } from "./MenuList";
import { Link, useHistory } from "react-router-dom";
import { HomeOutlined, MenuOutlined, UserOutlined } from "@ant-design/icons";
import { AppRoute, LINKS } from "../../routes/app";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { useMediaQuery } from "react-responsive";
const {Text, Paragraph} = Typography;
const {Header, Content, Sider} = Layout;
const { Text, Paragraph } = Typography;
const { Header, Content, Sider } = Layout;
const { SubMenu } = Menu;
export const DesktopLayout = observer(() => {
let history = useHistory();
const xl = useMediaQuery({minWidth: 1024});
const xl = useMediaQuery({ minWidth: 1024 });
const store = useStore();
const [clicked, setClicked] = useState(false);
@ -31,7 +32,8 @@ export const DesktopLayout = observer(() => {
position: "relative",
}}
>
{store.ui.mediaQuery.isDesktop && <Sider
{store.ui.mediaQuery.isDesktop && (
<Sider
className={"transparent"}
width={240}
style={{
@ -76,9 +78,9 @@ export const DesktopLayout = observer(() => {
Admin
</Paragraph>
</div>
<MenuList closeLeftDrawer={() => {
}}/>
</Sider>}
<MenuList closeLeftDrawer={() => {}} />
</Sider>
)}
{store.ui.mediaQuery.isMobile && (
<Drawer
@ -87,7 +89,7 @@ export const DesktopLayout = observer(() => {
closable={false}
width={"50%"}
onClose={() => {
store.ui.toggleLeftDrawerIsShown()
store.ui.toggleLeftDrawerIsShown();
}}
visible={store.ui.leftDrawerIsShown}
key={"dashboard-drawer"}
@ -105,31 +107,64 @@ export const DesktopLayout = observer(() => {
<Menu>
<Menu.Item key="home">
<Link to={LINKS.HOME}>
<HomeOutlined/>
<HomeOutlined />
<span>Home</span>
</Link>
</Menu.Item>
{store.authentication.userData.role !== 'Retail' && <Menu.Item key="membership">
{store.authentication.userData.role !== "Retail" && (
<Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}>
<HomeOutlined/>
<HomeOutlined />
<span>Membership</span>
</Link>
</Menu.Item>}
{store.authentication.userData.role !== 'Retail' && <Menu.Item key="product">
</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/>
<HomeOutlined />
<span>Product</span>
</Link>
</Menu.Item>}
{store.authentication.userData.role === 'Retail' && <Menu.Item key="transaction">
</Menu.Item>
)}
{store.authentication.userData.role === "Retail" && (
<Menu.Item key="transaction">
<Link to={LINKS.TRANSACTION}>
<HomeOutlined/>
<HomeOutlined />
<span>Transaction</span>
</Link>
</Menu.Item>}
</Menu.Item>
)}
<Menu.Item key="profile">
<Link to={LINKS.PROFILE}>
<UserOutlined/>
<UserOutlined />
<span>Profile</span>
</Link>
</Menu.Item>
@ -139,7 +174,9 @@ export const DesktopLayout = observer(() => {
{/* <span>About</span>*/}
{/* </Link>*/}
{/*</Menu.Item>*/}
<Menu.Divider style={{background: "transparent", paddingTop: 15}}/>
<Menu.Divider
style={{ background: "transparent", paddingTop: 15 }}
/>
</Menu>
</div>
</Drawer>
@ -284,7 +321,10 @@ export const DesktopLayout = observer(() => {
title={
<Text>
{store.user.data.username}
<Paragraph style={{fontWeight: 400}} type={"secondary-dark"}>
<Paragraph
style={{ fontWeight: 400 }}
type={"secondary-dark"}
>
{store.authentication.userData.username}
</Paragraph>
</Text>
@ -296,12 +336,16 @@ export const DesktopLayout = observer(() => {
<Button
size={"default"}
type={store.ui.mediaQuery.isDesktop ? "" : "link"}
style={{marginRight: store.ui.mediaQuery.isDesktop ? 20 : 10}}
style={{
marginRight: store.ui.mediaQuery.isDesktop ? 20 : 10,
}}
icon={
store.ui.mediaQuery.isDesktop ? (
<UserOutlined style={{fontSize: "13px"}}/>
<UserOutlined style={{ fontSize: "13px" }} />
) : (
<UserOutlined style={{fontSize: "13px", color: "#5b5b5b"}}/>
<UserOutlined
style={{ fontSize: "13px", color: "#5b5b5b" }}
/>
)
}
/>
@ -340,8 +384,7 @@ export const DesktopLayout = observer(() => {
alignItems: "center",
width: "100%",
}}
>
</div>
></div>
<Popover
className={store.ui.mediaQuery.isDesktop ? "shadow" : null}
autoAdjustOverflow={true}
@ -357,13 +400,13 @@ export const DesktopLayout = observer(() => {
}}
mode="inline"
>
<Menu.Item key={'profile'}>
<Menu.Item key={"profile"}>
<Link to={LINKS.PROFILE}>
<span>Profile</span>
</Link>
</Menu.Item>
<Menu.Item
key={'logout'}
key={"logout"}
onClick={() => {
store.authentication.logout();
history.push("/login");
@ -376,7 +419,10 @@ export const DesktopLayout = observer(() => {
title={
<Text>
{store.user.data.email}{" "}
<Paragraph style={{fontWeight: 400}} type={"secondary-dark"}>
<Paragraph
style={{ fontWeight: 400 }}
type={"secondary-dark"}
>
{store.authentication.userData.username}
</Paragraph>
</Text>
@ -388,17 +434,20 @@ export const DesktopLayout = observer(() => {
<Button
size={"default"}
type={store.ui.mediaQuery.isDesktop ? "" : "link"}
style={{marginRight: store.ui.mediaQuery.isDesktop ? 20 : 10}}
style={{
marginRight: store.ui.mediaQuery.isDesktop ? 20 : 10,
}}
icon={
store.ui.mediaQuery.isDesktop ? (
<UserOutlined style={{fontSize: "13px"}}/>
<UserOutlined style={{ fontSize: "13px" }} />
) : (
<UserOutlined style={{fontSize: "13px", color: "#5b5b5b"}}/>
<UserOutlined
style={{ fontSize: "13px", color: "#5b5b5b" }}
/>
)
}
/>
</Popover>
</div>
)}
</Header>
@ -442,7 +491,7 @@ export const DesktopLayout = observer(() => {
// paddingRight: 8
}}
>
<AppRoute/>
<AppRoute />
</Content>
</Layout>
</Layout>

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

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

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

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

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

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

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

@ -1,25 +1,65 @@
import React from "react";
import {Button, Card, Col, Dropdown, Menu, message, Modal, Row, Space,} from "antd";
import {DownOutlined, TabletOutlined, UserOutlined} from "@ant-design/icons";
import React, { useEffect, useState } from "react";
import { useStore } from "../../utils/useStore";
import { Button, Card, Col, Dropdown, Menu, message, Modal, Row, Space, } from "antd";
import { DownOutlined, TabletOutlined, UserOutlined } from "@ant-design/icons";
export const Pulsa = () => {
function handleMenuClick(e) {
message.info("Click on menu item.");
console.log("click", e);
const store = useStore();
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 = (
<Menu onClick={handleMenuClick}>
<Menu.Item key="1" icon={<UserOutlined/>}>
1st menu item
</Menu.Item>
<Menu.Item key="2" icon={<UserOutlined/>}>
2nd menu item
</Menu.Item>
<Menu.Item key="3" icon={<UserOutlined/>}>
3rd menu item
<Menu style={{
backgroundColor: 'white'
}}>
{store.transaction.dataSubCategories.map((item, index) => (
<Menu.Item key="1" icon={<UserOutlined />} onClick={() => handleMenuClick(item)} >
{item.name}
</Menu.Item>
))}
</Menu>
);
@ -29,53 +69,10 @@ 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 (
<div>
<Row>
<span style={{fontWeight: "bold", marginBottom: "10px"}}>
<span style={{ fontWeight: "bold", marginBottom: "10px" }}>
Sub-Category
</span>
</Row>
@ -88,31 +85,31 @@ export const Pulsa = () => {
color: "grey",
}}
>
<TabletOutlined/>
<TabletOutlined />
Select sub-Category
<DownOutlined/>
<DownOutlined />
</Button>
</Dropdown>
</Space>
</Row>
<Row>
<span style={{fontWeight: "bold", marginBottom: "10px"}}>
<span style={{ fontWeight: "bold", marginBottom: "10px" }}>
Produk & Nominal
</span>
</Row>
<Row>
{dataCard.map((item, index) => (
{productData.map((item, index) => (
<Col key={index} xs={24} md={16} lg={8}>
<Card onClick={success}>
<span style={{color: "black"}}>{item.title}</span>
<br/>
<span style={{color: "grey", fontSize: 10}}>{item.price}</span>
<span style={{ color: "black" }}>{item.name}</span>
<br />
<span style={{ color: "grey", fontSize: 10 }}>{item.price}</span>
</Card>
</Col>
))}
</Row>
<Col style={{textAlign: "right"}}>
<Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
<Col style={{ textAlign: "right" }}>
<Button style={{ backgroundColor: "#2D9CDB", color: "white" }}>
Beli Sekarang
</Button>
</Col>

17
src/routes/app.js
View File

@ -5,6 +5,10 @@ import {Membership} from "../pages/Membership/Membership";
import {Product} from "../pages/Product/Product";
import {Transaction} from "../pages/Transaction/Transaction";
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 = {
HOME: "/app/home",
@ -13,6 +17,10 @@ export const LINKS = {
PRODUCT: "/app/product",
TRANSACTION: "/app/transaction",
PROFILE: "/app/profile",
PARTNER: "/app/partner",
COMMISION: "/app/commision",
SUPPLIER: "/app/supplier",
};
export const AppRoute = () => {
@ -20,12 +28,21 @@ export const AppRoute = () => {
<Route path={LINKS.HOME}>
<Home/>
</Route>
<Route path={LINKS.COMMISION}>
<Commision/>
</Route>
<Route path={LINKS.SUPPLIER}>
<Supplier/>
</Route>
<Route path={LINKS.MEMBERSHIP}>
<Membership/>
</Route>
<Route path={LINKS.PRODUCT}>
<Product/>
</Route>
<Route path={LINKS.PARTNER}>
<Partner/>
</Route>
<Route path={LINKS.TRANSACTION}>
<Transaction/>
</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 {Authentication} from "./authentication";
import {User} from "./user";
import {Membership} from "./membership";
import {Product} from "./product";
import {TokenUtil} from "../utils/token";
import {Role} from "./role";
import { UI } from "./ui";
import { Authentication } from "./authentication";
import { User } from "./user";
import { Membership } from "./membership";
import { Product } from "./product";
import { Partner } from "./partner";
import { Supplier } from "./supplier";
//import { Commision } from "./commision";
import { Transaction } from "./transaction";
import { TokenUtil } from "../utils/token";
import { Role } from "./role";
export class Store {
ui = new UI(this);
@ -12,6 +16,10 @@ export class Store {
user = new User(this);
membership = new Membership(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);
constructor() {

4
src/store/membership.js
View File

@ -26,8 +26,8 @@ export class Membership {
@action
async update(id, data) {
console.log(data)
console.log(id)
// console.log(data)
// console.log(id)
const response = await http.put('/users/' + id).send(data);
console.log(response, 'Data user')
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