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

feat: add modal loader for each API request

Browse Source
This commit is contained in:
Hasta Ragil Saputra 2021-12-21 09:00:31 +07:00
parent 178d52f5cc
commit 47578366a8
21 changed files with 1094 additions and 1110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/component/CategoryComponent.js
View File

@ -1,18 +1,17 @@
import React, {useState} from "react"; import React, {useContext, useState} from "react";
import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd"; import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import {useHistory} from "react-router-dom"; import {useHistory} from "react-router-dom";
import {useStore} from "../utils/useStore"; import {useStore} from "../utils/useStore";
import {LINKS} from "../routes/app"; import {LINKS} from "../routes/app";
import {ModalLoaderContext} from "../utils/modal";
export const CategoryComponent = observer((props) => { export const CategoryComponent = observer((props) => {
const store = useStore(); const store = useStore();
const [form] = Form.useForm(); const [form] = Form.useForm();
const {Option} = Select;
const history = useHistory(); const history = useHistory();
const [idData, setIdData] = useState(""); const [idData, setIdData] = useState("");
const [confirmLoading, setConfirmLoading] = useState(false); const modalLoader = useContext(ModalLoaderContext);
const [isLoading, setIsLoading] = useState(false);
const handleEditButton = (data) => { const handleEditButton = (data) => {
console.log(data, "isi data"); console.log(data, "isi data");
@ -75,7 +74,9 @@ export const CategoryComponent = observer((props) => {
const deleteData = async (id) => { const deleteData = async (id) => {
try { try {
console.log(id); console.log(id);
modalLoader.setLoading(true);
await store.category.delete(id); await store.category.delete(id);
modalLoader.setLoading(true);
message.success("Data Berhasil Dihapus"); message.success("Data Berhasil Dihapus");
history.push(LINKS.PRODUCT); history.push(LINKS.PRODUCT);
} catch (err) { } catch (err) {
@ -92,19 +93,19 @@ export const CategoryComponent = observer((props) => {
const handleSubmit = async (data) => { const handleSubmit = async (data) => {
console.log(data, "isi data2"); console.log(data, "isi data2");
if (idData !== "") { if (idData !== "") {
setConfirmLoading(true); modalLoader.setLoading(true);
try { try {
await store.category.update(idData, data); await store.category.update(idData, data);
message.success("Success Update Data Category"); message.success("Success Update Data Category");
} catch (e) { } catch (e) {
message.error("Failed Update Data Category"); message.error("Failed Update Data Category");
} }
setConfirmLoading(false); modalLoader.setLoading(false);
store.category.visibleModalCategory = false; store.category.visibleModalCategory = false;
setIdData(""); setIdData("");
form.resetFields(); form.resetFields();
} else { } else {
setConfirmLoading(true); modalLoader.setLoading(true);
try { try {
await store.category.create(data); await store.category.create(data);
message.success("Success Add New Category"); message.success("Success Add New Category");
@ -112,7 +113,7 @@ export const CategoryComponent = observer((props) => {
console.log(e, "apa errornya"); console.log(e, "apa errornya");
message.error("Failed Add Category"); message.error("Failed Add Category");
} }
setConfirmLoading(false); modalLoader.setLoading(false);
store.category.visibleModalCategory = false; store.category.visibleModalCategory = false;
setIdData(""); setIdData("");
form.resetFields(); form.resetFields();
@ -122,7 +123,7 @@ export const CategoryComponent = observer((props) => {
return ( return (
<div> <div>
<Table <Table
style={{ textAlign: "center" }} style={{textAlign: "center"}}
columns={columns} columns={columns}
dataSource={store.category.data} dataSource={store.category.data}
bordered bordered
@ -137,9 +138,9 @@ export const CategoryComponent = observer((props) => {
let pageNumber = page.current; let pageNumber = page.current;
store.category.pageSize = page.pageSize; store.category.pageSize = page.pageSize;
store.category.page = pageNumber - 1; store.category.page = pageNumber - 1;
// store.membership.isLoading = true; modalLoader.setLoading(true);
await store.category.getData(); await store.category.getData();
// store.membership.isLoading = false; modalLoader.setLoading(false);
}} }}
/> />
@ -169,16 +170,16 @@ export const CategoryComponent = observer((props) => {
<Form.Item <Form.Item
name="code" name="code"
label="Code" label="Code"
rules={[{ required: true, message: "Please input name code!" }]} rules={[{required: true, message: "Please input name code!"}]}
> >
<Input /> <Input/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="name" name="name"
label="Name" label="Name"
rules={[{ required: true, message: "Please input name category!" }]} rules={[{required: true, message: "Please input name category!"}]}
> >
<Input /> <Input/>
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </Modal>

87
src/component/CommissionComponent.js
View File

@ -1,32 +1,17 @@
import React, {useEffect, useState} from "react"; import React, {useContext, useEffect, useState} from "react";
import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd"; import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import {useHistory} from "react-router-dom"; import {useHistory} from "react-router-dom";
import {useStore} from "../utils/useStore"; import {useStore} from "../utils/useStore";
import {LINKS} from "../routes/app"; import {LINKS} from "../routes/app";
import {ModalLoaderContext} from "../utils/modal";
export const CommissionComponent = observer((props) => { export const CommissionComponent = observer((props) => {
const store = useStore(); const store = useStore();
const [form] = Form.useForm(); const [form] = Form.useForm();
const {Option} = Select;
const history = useHistory(); const history = useHistory();
const [idData, setIdData] = useState(""); const [idData, setIdData] = useState("");
const [confirmLoading, setConfirmLoading] = useState(false); const modalLoader = useContext(ModalLoaderContext);
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) => { const handleEditButton = (data) => {
console.log(data, "isi data"); console.log(data, "isi data");
@ -59,32 +44,20 @@ export const CommissionComponent = observer((props) => {
}, },
]; ];
const deleteData = async (id) => {
try {
console.log(id);
await store.commission.delete(id);
message.success("Data Berhasil Dihapus");
history.push(LINKS.PRODUCT);
} catch (err) {
console.log("error", err);
message.error("Gagal menghapus");
}
};
const handleCancel = () => { const handleCancel = () => {
setIdData(""); setIdData("");
store.commission.visibleModalCommission = false; store.commission.visibleModalCommission = false;
}; };
const handleSubmit = async (data) => { const handleSubmit = async (data) => {
setConfirmLoading(true); modalLoader.setLoading(true);
try { try {
await store.commission.update(idData, data); await store.commission.update(idData, data);
message.success("Success Update Data Member"); message.success("Success Update Data Member");
} catch (e) { } catch (e) {
message.error("Failed Update Data Member"); message.error("Failed Update Data Member");
} }
setConfirmLoading(false); modalLoader.setLoading(false);
store.commission.visibleModalCommission = false; store.commission.visibleModalCommission = false;
setIdData(""); setIdData("");
form.resetFields(); form.resetFields();
@ -93,7 +66,7 @@ export const CommissionComponent = observer((props) => {
return ( return (
<div> <div>
<Table <Table
style={{ textAlign: "center" }} style={{textAlign: "center"}}
columns={columns} columns={columns}
dataSource={store.commission.data} dataSource={store.commission.data}
bordered bordered
@ -108,41 +81,41 @@ export const CommissionComponent = observer((props) => {
let pageNumber = page.current; let pageNumber = page.current;
store.commission.pageSize = page.pageSize; store.commission.pageSize = page.pageSize;
store.commission.page = pageNumber - 1; store.commission.page = pageNumber - 1;
// store.membership.isLoading = true; modalLoader.setLoading(true);
await store.commission.getData(); await store.commission.getData();
// store.membership.isLoading = false; modalLoader.setLoading(false);
}} }}
/> />
<Modal <Modal
visible={store.commission.visibleModalCommission} visible={store.commission.visibleModalCommission}
title={"Edit Commission"} title={"Edit Commission"}
okText={"Edit"} okText={"Edit"}
cancelText="Cancel" cancelText="Cancel"
onCancel={() => { onCancel={() => {
form.resetFields(); form.resetFields();
handleCancel(); handleCancel();
}} }}
onOk={() => { onOk={() => {
form form
.validateFields() .validateFields()
.then((values) => { .then((values) => {
console.log(values, "isi form"); console.log(values, "isi form");
handleSubmit(values); handleSubmit(values);
form.resetFields(); form.resetFields();
}) })
.catch((info) => { .catch((info) => {
console.error("Validate Failed:", info); console.error("Validate Failed:", info);
}); });
}} }}
> >
<Form form={form} layout="vertical"> <Form form={form} layout="vertical">
<Form.Item <Form.Item
name="value" name="value"
label="Commission" label="Commission"
rules={[{ required: true, message: "Please input commission!" }]} rules={[{required: true, message: "Please input commission!"}]}
> >
<Input /> <Input/>
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </Modal>

98
src/component/PartnerComponent.js
View File

@ -1,41 +1,27 @@
import React, {useEffect, useState} from "react"; import React, {useContext, useEffect, useState} from "react";
import {Button, Form, Input, message, Modal, Select, Space, Table, Tag,} from "antd"; import {Button, Form, Input, message, Modal, Select, Space, Table, Tag,} from "antd";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import {ExclamationCircleOutlined} from "@ant-design/icons"; import {ExclamationCircleOutlined} from "@ant-design/icons";
import {useHistory} from "react-router-dom"; import {useHistory} from "react-router-dom";
import {useStore} from "../utils/useStore"; import {useStore} from "../utils/useStore";
import {LINKS} from "../routes/app"; import {LINKS} from "../routes/app";
import {ModalLoaderContext} from "../utils/modal";
export const PartnerComponent = observer((props) => { export const PartnerComponent = observer((props) => {
const store = useStore(); const store = useStore();
const [form] = Form.useForm(); const [form] = Form.useForm();
const {Option} = Select;
const history = useHistory(); const history = useHistory();
const [idData, setIdData] = useState(""); const [idData, setIdData] = useState("");
const [isChangePassword, setIsChangePassword] = useState(false); const [isChangePassword, setIsChangePassword] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false); const modalLoader = useContext(ModalLoaderContext);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
await store.partner.getData();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
}, []);
const changeStatus = async (id, isActive) => { const changeStatus = async (id, isActive) => {
const status = isActive ? "inactive" : "active"; const status = isActive ? "inactive" : "active";
const status2 = isActive ? "Inactivating" : "Activating"; const status2 = isActive ? "Inactivating" : "Activating";
modalLoader.setLoading(true);
try { try {
const response = await store.partner.changeStatus(id, status); const response = await store.partner.changeStatus(id, status);
modalLoader.setLoading(false);
response?.body?.statusCode === 201 response?.body?.statusCode === 201
? message.success(`Success ${status2} Partner`) ? message.success(`Success ${status2} Partner`)
: message.error(`Failed ${status2} Partner`); : message.error(`Failed ${status2} Partner`);
@ -92,7 +78,7 @@ export const PartnerComponent = observer((props) => {
render: (text, record) => ( render: (text, record) => (
<Tag <Tag
color={record?.status === true ? "processing" : "#E3E8EE"} color={record?.status === true ? "processing" : "#E3E8EE"}
style={{ color: "#4F566B", cursor: "pointer" }} style={{color: "#4F566B", cursor: "pointer"}}
> >
{record?.status === true ? " ACTIVE" : "INACTIVE"} {record?.status === true ? " ACTIVE" : "INACTIVE"}
</Tag> </Tag>
@ -121,8 +107,9 @@ export const PartnerComponent = observer((props) => {
const deleteData = async (id) => { const deleteData = async (id) => {
try { try {
console.log(id); modalLoader.setLoading(true);
await store.partner.delete(id); await store.partner.delete(id);
modalLoader.setLoading(false);
message.success("Data Berhasil Dihapus"); message.success("Data Berhasil Dihapus");
history.push(LINKS.PARTNER); history.push(LINKS.PARTNER);
} catch (err) { } catch (err) {
@ -134,7 +121,7 @@ export const PartnerComponent = observer((props) => {
const handleDelete = (id) => { const handleDelete = (id) => {
Modal.confirm({ Modal.confirm({
title: "Are you sure delete this record?", title: "Are you sure delete this record?",
icon: <ExclamationCircleOutlined />, icon: <ExclamationCircleOutlined/>,
okText: "Yes", okText: "Yes",
okType: "primary", okType: "primary",
cancelText: "Cancel", cancelText: "Cancel",
@ -155,9 +142,10 @@ export const PartnerComponent = observer((props) => {
const handleSubmit = async (data) => { const handleSubmit = async (data) => {
console.log(data, "isi data2"); console.log(data, "isi data2");
if (idData !== "") { if (idData !== "") {
setConfirmLoading(true); modalLoader.setLoading(true);
try { try {
await store.partner.update(idData, data); await store.partner.update(idData, data);
modalLoader.setLoading(false);
message.success( message.success(
isChangePassword isChangePassword
? "Failed Change Partner Password" ? "Failed Change Partner Password"
@ -165,27 +153,27 @@ export const PartnerComponent = observer((props) => {
); );
//await store.partner.getData() //await store.partner.getData()
} catch (e) { } catch (e) {
modalLoader.setLoading(true);
message.error( message.error(
isChangePassword isChangePassword
? "Failed Change Partner Password" ? "Failed Change Partner Password"
: "Failed Update Data Partner" : "Failed Update Data Partner"
); );
} }
setConfirmLoading(false);
store.partner.visibleModalPartner = false; store.partner.visibleModalPartner = false;
setIdData(""); setIdData("");
form.resetFields(); form.resetFields();
} else { } else {
setConfirmLoading(true); modalLoader.setLoading(true);
try { try {
await store.partner.create(data); await store.partner.create(data);
message.success("Success Add New Partner"); message.success("Success Add New Partner");
//await store.partner.getData() modalLoader.setLoading(false);
} catch (e) { } catch (e) {
console.log(e, "apa errornya"); console.log(e, "apa errornya");
message.error("Failed Add Partner"); message.error("Failed Add Partner");
} }
setConfirmLoading(false); modalLoader.setLoading(false);
store.partner.visibleModalPartner = false; store.partner.visibleModalPartner = false;
setIdData(""); setIdData("");
form.resetFields(); form.resetFields();
@ -194,7 +182,7 @@ export const PartnerComponent = observer((props) => {
return ( return (
<div> <div>
<Table <Table
style={{ textAlign: "center" }} style={{textAlign: "center"}}
columns={columns} columns={columns}
dataSource={store.partner.data} dataSource={store.partner.data}
bordered bordered
@ -209,9 +197,9 @@ export const PartnerComponent = observer((props) => {
let pageNumber = page.current; let pageNumber = page.current;
store.partner.pageSize = page.pageSize; store.partner.pageSize = page.pageSize;
store.partner.page = pageNumber - 1; store.partner.page = pageNumber - 1;
//store.membership.isLoading = true; modalLoader.setLoading(true);
await store.partner.getData(); await store.partner.getData();
// store.membership.isLoading = false; modalLoader.setLoading(false);
}} }}
/> />
@ -221,8 +209,8 @@ export const PartnerComponent = observer((props) => {
isChangePassword isChangePassword
? "Change Member Password" ? "Change Member Password"
: idData : idData
? "Edit Partner" ? "Edit Partner"
: "Create a new partner" : "Create a new partner"
} }
okText={idData ? "Edit" : "Create"} okText={idData ? "Edit" : "Create"}
cancelText="Cancel" cancelText="Cancel"
@ -250,11 +238,11 @@ export const PartnerComponent = observer((props) => {
label="Name" label="Name"
rules={[ rules={[
idData idData
? { required: false } ? {required: false}
: { required: true, message: "Please input password name!" }, : {required: true, message: "Please input password name!"},
]} ]}
> >
<Input /> <Input/>
</Form.Item> </Form.Item>
)} )}
{!idData && ( {!idData && (
@ -263,11 +251,11 @@ export const PartnerComponent = observer((props) => {
label="Owner" label="Owner"
rules={[ rules={[
idData idData
? { required: false } ? {required: false}
: { required: true, message: "Please input password owner!" }, : {required: true, message: "Please input password owner!"},
]} ]}
> >
<Input /> <Input/>
</Form.Item> </Form.Item>
)} )}
{((idData && isChangePassword) || !idData) && ( {((idData && isChangePassword) || !idData) && (
@ -276,27 +264,27 @@ export const PartnerComponent = observer((props) => {
label="Password Account" label="Password Account"
rules={[ rules={[
idData idData
? { required: false } ? {required: false}
: { : {
required: true, required: true,
message: "Please input password account!", message: "Please input password account!",
}, },
]} ]}
> >
<Input /> <Input/>
</Form.Item> </Form.Item>
)} )}
{!idData && ( {!idData && (
<Form.Item <Form.Item
name="phone_number" name="phone_number"
label="Phone Number" label="Phone Number"
rules={[ rules={[
idData idData
? { required: false } ? {required: false}
: { required: true, message: "Please input password phone number!" }, : {required: true, message: "Please input password phone number!"},
]} ]}
> >
<Input /> <Input/>
</Form.Item> </Form.Item>
)} )}
{!isChangePassword && ( {!isChangePassword && (
@ -306,25 +294,25 @@ export const PartnerComponent = observer((props) => {
label="Npwp" label="Npwp"
rules={[ rules={[
idData idData
? { required: false } ? {required: false}
: { required: true, message: "Please input npwp!" }, : {required: true, message: "Please input npwp!"},
]} ]}
> >
<Input /> <Input/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="address" name="address"
label="Address" label="Address"
rules={[ rules={[
idData idData
? { required: false } ? {required: false}
: { : {
required: true, required: true,
message: "Please input address!", message: "Please input address!",
}, },
]} ]}
> >
<Input /> <Input/>
</Form.Item> </Form.Item>
</> </>
)} )}

652
src/component/ProductComponent.js
View File

@ -1,4 +1,4 @@
import React, {useState} from "react"; import React, {useContext, useState} from "react";
import {Button, Col, Form, Input, message, Modal, Row, Select, Table, Tag, Typography} from "antd"; import {Button, Col, Form, Input, message, Modal, Row, Select, Table, Tag, Typography} from "antd";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import {ExclamationCircleOutlined} from "@ant-design/icons"; import {ExclamationCircleOutlined} from "@ant-design/icons";
@ -6,346 +6,348 @@ import {useHistory} from "react-router-dom";
import {capitalize} from "lodash"; import {capitalize} from "lodash";
import {useStore} from "../utils/useStore"; import {useStore} from "../utils/useStore";
import {LINKS} from "../routes/app"; import {LINKS} from "../routes/app";
import {ModalLoaderContext} from "../utils/modal";
const {Title, Text} = Typography; const {Title, Text} = Typography;
export const ProductComponent = observer((props) => { export const ProductComponent = observer((props) => {
const store = useStore(); const store = useStore();
const [form] = Form.useForm(); const [form] = Form.useForm();
const {Option} = Select; const {Option} = Select;
const history = useHistory(); const history = useHistory();
const [idData, setIdData] = useState(''); const [idData, setIdData] = useState('');
const [confirmLoading, setConfirmLoading] = useState(false); const [filterSupplier, setFilterSupplier] = useState(null);
const [isLoading, setIsLoading] = useState(false); const [filterCategories, setFilterCategories] = useState(null);
const [filterSupplier, setFilterSupplier] = useState(null); const [filterSubCategories, setFilterSubCategories] = useState(null);
const [filterCategories, setFilterCategories] = useState(null); const modalLoader = useContext(ModalLoaderContext);
const [filterSubCategories, setFilterSubCategories] = useState(null);
const handleEditButton = (data) => { const handleEditButton = (data) => {
console.log(data, "isi data") console.log(data, "isi data")
form.setFieldsValue({ form.setFieldsValue({
name: data.name, name: data.name,
price: data.price, price: data.price,
markUpPrice: data.basePrice, markUpPrice: data.basePrice,
code: data.code, code: data.code,
status: data.status, status: data.status,
subCategoriesId: data.sub_categories.id, subCategoriesId: data.sub_categories.id,
}); });
store.product.visibleModalProduct = true; store.product.visibleModalProduct = true;
setIdData(data.id); setIdData(data.id);
}
const columns = [
{
title: "Kode",
dataIndex: "code",
key: "code",
},
{
title: "Produk",
dataIndex: ["name"],
key: "name",
},
{
title: "Harga Beli",
dataIndex: ["currentPrice", "price"],
key: ["currentPrice", "price"],
},
{
title: "Harga Jual",
dataIndex: ["currentPrice", "mark_up_price"],
key: ["currentPrice", "mark_up_price"],
},
// {
// title: "Gangguan",
// dataIndex: "status",
// key: "status",
// render: (text, record) => (
// <Tag
// color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
// style={{color: "#4F566B"}}
// >
// {capitalize(record?.status)}
// </Tag>
// ),
// },
{
title: "Tersedia",
dataIndex: "tersedia",
key: "tersedia",
render: (text, record) => (
<Tag
color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
style={{color: "#4F566B"}}
>
{record?.status === "ACTIVE" ? " Tersedia" : "Tidak"}
</Tag>
),
} }
];
const columns = [ const deleteData = async (id) => {
{ try {
title: "Kode", console.log(id);
dataIndex: "code", await store.product.delete(id);
key: "code", message.success("Data Berhasil Dihapus");
}, history.push(LINKS.PRODUCT);
{ } catch (err) {
title: "Produk", console.log("error", err);
dataIndex: ["name"], message.error("Gagal menghapus");
key: "name",
},
{
title: "Harga Beli",
dataIndex: ["currentPrice","price"],
key: ["currentPrice","price"],
},
{
title: "Harga Jual",
dataIndex: ["currentPrice","mark_up_price"],
key: ["currentPrice","mark_up_price"],
},
// {
// title: "Gangguan",
// dataIndex: "status",
// key: "status",
// render: (text, record) => (
// <Tag
// color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
// style={{color: "#4F566B"}}
// >
// {capitalize(record?.status)}
// </Tag>
// ),
// },
{
title: "Tersedia",
dataIndex: "tersedia",
key: "tersedia",
render: (text, record) => (
<Tag
color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
style={{color: "#4F566B"}}
>
{record?.status === "ACTIVE" ? " Tersedia" : "Tidak"}
</Tag>
),
}
];
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) => { const handleDelete = (id) => {
console.log(data, "isi data2") Modal.confirm({
if (idData !== '') { title: "Are you sure delete this record?",
setConfirmLoading(true); icon: <ExclamationCircleOutlined/>,
try { okText: "Yes",
await store.product.update(idData, data) okType: "primary",
message.success("Success Update Data Member") cancelText: "Cancel",
} catch (e) { onOk() {
message.error("Failed Update Data Member") return deleteData(id);
} },
setConfirmLoading(false); onCancel() {
store.product.visibleModalProduct = false; console.log("Cancel");
setIdData(''); },
form.resetFields(); });
} else { };
setConfirmLoading(true);
try { const handleCancel = () => {
await store.product.create(data) setIdData('')
message.success("Success Add New Member") store.product.visibleModalProduct = false;
} catch (e) { }
console.log(e, "apa errornya")
message.error("Failed Add Member") const handleSubmit = async (data) => {
} console.log(data, "isi data2")
setConfirmLoading(false); if (idData !== '') {
store.product.visibleModalProduct = false; modalLoader.setLoading(true);
setIdData(''); try {
form.resetFields(); await store.product.update(idData, data)
} message.success("Success Update Data Member")
} catch (e) {
message.error("Failed Update Data Member")
}
modalLoader.setLoading(false);
store.product.visibleModalProduct = false;
setIdData('');
form.resetFields();
} else {
modalLoader.setLoading(true);
try {
await store.product.create(data)
message.success("Success Add New Member")
} catch (e) {
console.log(e, "apa errornya")
message.error("Failed Add Member")
}
modalLoader.setLoading(false);
store.product.visibleModalProduct = false;
setIdData('');
form.resetFields();
} }
}
const handleRemoveFilter = async () => { const handleRemoveFilter = async () => {
store.product.filterSupplier = null; store.product.filterSupplier = null;
store.product.filterSubCategory = null; store.product.filterSubCategory = null;
setFilterSupplier(null); setFilterSupplier(null);
setFilterCategories(null); setFilterCategories(null);
setFilterSubCategories(null); setFilterSubCategories(null);
await store.product.getData(); await store.product.getData();
store.product.visibleModalFilterProduct = false; store.product.visibleModalFilterProduct = false;
}; };
const handleCancelFilter = () => { const handleCancelFilter = () => {
setFilterSupplier(null); setFilterSupplier(null);
setFilterCategories(null); setFilterCategories(null);
setFilterSubCategories(null); setFilterSubCategories(null);
store.product.visibleModalFilterProduct = false; store.product.visibleModalFilterProduct = false;
}; };
const handleSubmitFilter = async () => { const handleSubmitFilter = async () => {
store.product.filterSupplier = filterSupplier; store.product.filterSupplier = filterSupplier;
store.product.filterSubCategory = filterSubCategories; store.product.filterSubCategory = filterSubCategories;
await store.product.getData(); modalLoader.setLoading(true);
store.product.visibleModalFilterProduct = false; await store.product.getData();
}; modalLoader.setLoading(false);
store.product.visibleModalFilterProduct = false;
};
const footerLayoutFilter = [ const footerLayoutFilter = [
<Button key={'remove'} onClick={handleRemoveFilter} style={{ <Button key={'remove'} onClick={handleRemoveFilter} style={{
backgroundColor: '#e74e5e', color: '#fff' backgroundColor: '#e74e5e', color: '#fff'
}}>Remove Filter</Button>, }}>Remove Filter</Button>,
<Button key={'cancel'} onClick={handleCancelFilter}>Cancel</Button>, <Button key={'cancel'} onClick={handleCancelFilter}>Cancel</Button>,
<Button key={'submit'} onClick={handleSubmitFilter} style={{ <Button key={'submit'} onClick={handleSubmitFilter} style={{
backgroundColor: '#4e79e7', color: '#fff' backgroundColor: '#4e79e7', color: '#fff'
}}>Apply</Button> }}>Apply</Button>
] ]
return ( return (
<div> <div>
<Table <Table
style={{textAlign: "center"}} style={{textAlign: "center"}}
columns={columns} columns={columns}
dataSource={store.product.data} dataSource={store.product.data}
bordered bordered
pagination={{ pagination={{
pageSize: store.product.pageSize, pageSize: store.product.pageSize,
total: store.product.total_data, total: store.product.total_data,
current: store.product.page + 1, current: store.product.page + 1,
showSizeChanger: true, showSizeChanger: true,
simple: false simple: false
}} }}
onChange={async (page) => { onChange={async (page) => {
let pageNumber = page.current; let pageNumber = page.current;
store.product.pageSize = page.pageSize; store.product.pageSize = page.pageSize;
store.product.page = pageNumber - 1; store.product.page = pageNumber - 1;
// store.membership.isLoading = true; modalLoader.setLoading(true);
await store.product.getData(); await store.product.getData();
// store.membership.isLoading = false; modalLoader.setLoading(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"}
okText={idData ? "Edit" : "Create"} okText={idData ? "Edit" : "Create"}
cancelText="Cancel" cancelText="Cancel"
onCancel={() => { onCancel={() => {
form.resetFields(); form.resetFields();
handleCancel(); handleCancel();
}} }}
onOk={() => { onOk={() => {
form form
.validateFields() .validateFields()
.then((values) => { .then((values) => {
console.log(values, "isi form") console.log(values, "isi form")
handleSubmit(values); handleSubmit(values);
form.resetFields(); form.resetFields();
}) })
.catch((info) => { .catch((info) => {
console.error("Validate Failed:", 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="price"
label="Price"
rules={[{required: true, message: "Please input price!"}]}
>
<Input/>
</Form.Item>
<Form.Item
name="markUpPrice"
label="Mark Up Price"
rules={[{required: true, message: "Please input mark up price!"}]}
>
<Input/>
</Form.Item>
<Form.Item
name="code"
label="Code"
rules={[{required: true, message: "Please input code!"}]}
>
<Input/>
</Form.Item>
<Form.Item
name="status"
label="Status"
rules={[{required: true, message: "Please select Status!"}]}
>
<Select placeholder="Select Sub Category" allowClear>
<Option value="ACTIVE">ACTIVE</Option>
<Option value="INACTIVE">INACTIVE</Option>
</Select>
</Form.Item>
<Form.Item
name="subCategoriesId"
label="Sub categories"
rules={[{required: true, message: "Please select sub categories!"}]}
>
<Select placeholder="Select Sub Category" allowClear>
{store.product.dataSubCategories.map((item) => (
<Option value={item.id} key={item.id}>
{item.name}
</Option>
))}
</Select>
</Form.Item>
</Form>
</Modal>
<Modal
visible={store.product.visibleModalFilterProduct}
title={"Filter"}
footer={footerLayoutFilter}
>
<Row>
<Col span={24}>
<Title level={5} type={"secondary"} strong>Filter Supplier</Title>
<Select
mode={"multiple"}
placeholder="Choose Supplier"
onChange={(val) => {
setFilterSupplier(val);
}}
style={{marginBottom: "20px", width: "100%"}}
> >
<Form {store.supplier.data.map((item) => (
form={form} <Option value={item.id} key={item.id}>
layout="vertical" {item.name}
> </Option>
<Form.Item ))}
name="name" </Select>
label="Name" </Col>
rules={[{required: true, message: "Please input name!"}]} <Col span={24}>
> <Title level={5} type={"secondary"} strong>Filter Categories</Title>
<Input/> <Select
</Form.Item> mode={"multiple"}
<Form.Item placeholder="Choose Category"
name="price" onChange={async (val) => {
label="Price" setFilterCategories(val);
rules={[{required: true, message: "Please input price!"}]} store.product.filterByCategory = val;
> await store.product.getDataSubCategories();
<Input/> }}
</Form.Item> style={{marginBottom: "20px", width: "100%"}}
<Form.Item
name="markUpPrice"
label="Mark Up Price"
rules={[{required: true, message: "Please input mark up price!"}]}
>
<Input/>
</Form.Item>
<Form.Item
name="code"
label="Code"
rules={[{required: true, message: "Please input code!"}]}
>
<Input/>
</Form.Item>
<Form.Item
name="status"
label="Status"
rules={[{required: true, message: "Please select Status!"}]}
>
<Select placeholder="Select Sub Category" allowClear>
<Option value="ACTIVE">ACTIVE</Option>
<Option value="INACTIVE">INACTIVE</Option>
</Select>
</Form.Item>
<Form.Item
name="subCategoriesId"
label="Sub categories"
rules={[{required: true, message: "Please select sub categories!"}]}
>
<Select placeholder="Select Sub Category" allowClear>
{store.product.dataSubCategories.map((item) => (
<Option value={item.id} key={item.id}>
{item.name}
</Option>
))}
</Select>
</Form.Item>
</Form>
</Modal>
<Modal
visible={store.product.visibleModalFilterProduct}
title={"Filter"}
footer={footerLayoutFilter}
> >
<Row> {store.category.data.map((item) => (
<Col span={24}> <Option value={item.id} key={item.id}>
<Title level={5} type={"secondary"} strong>Filter Supplier</Title> {item.name}
<Select </Option>
mode={"multiple"} ))}
placeholder="Choose Supplier" </Select>
onChange={(val) => { </Col>
setFilterSupplier(val); <Col span={24}>
}} <Title level={5} type={"secondary"} strong>Filter Sub-Categories</Title>
style={{marginBottom: "20px", width: "100%"}} <Select
> mode={"multiple"}
{store.supplier.data.map((item) => ( placeholder="Choose Sub-Category"
<Option value={item.id} key={item.id}> onChange={(val) => {
{item.name} setFilterSubCategories(val);
</Option> }}
))} style={{marginBottom: "20px", width: "100%"}}
</Select> >
</Col> {store.product.dataSubCategories.map((item) => (
<Col span={24}> <Option value={item.id} key={item.id}>
<Title level={5} type={"secondary"} strong>Filter Categories</Title> {item.name}
<Select </Option>
mode={"multiple"} ))}
placeholder="Choose Category" </Select>
onChange={async (val) => { </Col>
setFilterCategories(val); </Row>
store.product.filterByCategory = val; </Modal>
await store.product.getDataSubCategories(); </div>
}} );
style={{marginBottom: "20px", width: "100%"}}
>
{store.category.data.map((item) => (
<Option value={item.id} key={item.id}>
{item.name}
</Option>
))}
</Select>
</Col>
<Col span={24}>
<Title level={5} type={"secondary"} strong>Filter Sub-Categories</Title>
<Select
mode={"multiple"}
placeholder="Choose Sub-Category"
onChange={(val) => {
setFilterSubCategories(val);
}}
style={{marginBottom: "20px", width: "100%"}}
>
{store.product.dataSubCategories.map((item) => (
<Option value={item.id} key={item.id}>
{item.name}
</Option>
))}
</Select>
</Col>
</Row>
</Modal>
</div>
);
}); });

35
src/component/Subcategory.js
View File

@ -1,17 +1,16 @@
import React, {useState} from "react"; import React, {useContext, useState} from "react";
import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd"; import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import {useHistory} from "react-router-dom"; import {useHistory} from "react-router-dom";
import {useStore} from "../utils/useStore"; import {useStore} from "../utils/useStore";
import {ModalLoaderContext} from "../utils/modal";
export const SubcategoryComponent = observer((props) => { export const SubcategoryComponent = observer((props) => {
const store = useStore(); const store = useStore();
const [form] = Form.useForm(); const [form] = Form.useForm();
const {Option} = Select; const {Option} = Select;
const history = useHistory();
const [idData, setIdData] = useState(""); const [idData, setIdData] = useState("");
const [confirmLoading, setConfirmLoading] = useState(false); const modalLoader = useContext(ModalLoaderContext);
const [isLoading, setIsLoading] = useState(false);
const getData = async () => { const getData = async () => {
await store.category.getData(); await store.category.getData();
@ -64,7 +63,7 @@ export const SubcategoryComponent = observer((props) => {
const handleSubmit = async (data) => { const handleSubmit = async (data) => {
console.log(data, "isi data2"); console.log(data, "isi data2");
if (idData !== "") { if (idData !== "") {
setConfirmLoading(true); modalLoader.setLoading(true);
try { try {
await store.subcategory.update(idData, data); await store.subcategory.update(idData, data);
await getData(); await getData();
@ -72,12 +71,12 @@ export const SubcategoryComponent = observer((props) => {
} catch (e) { } catch (e) {
message.error("Failed Update Data Category"); message.error("Failed Update Data Category");
} }
setConfirmLoading(false); modalLoader.setLoading(false);
store.subcategory.visibleModalSubcategory = false; store.subcategory.visibleModalSubcategory = false;
setIdData(""); setIdData("");
form.resetFields(); form.resetFields();
} else { } else {
setConfirmLoading(true); modalLoader.setLoading(true);
try { try {
await store.subcategory.create(data); await store.subcategory.create(data);
await getData(); await getData();
@ -86,7 +85,7 @@ export const SubcategoryComponent = observer((props) => {
console.log(e, "apa errornya"); console.log(e, "apa errornya");
message.error("Failed Add Category"); message.error("Failed Add Category");
} }
setConfirmLoading(false); modalLoader.setLoading(false);
store.subcategory.visibleModalSubcategory = false; store.subcategory.visibleModalSubcategory = false;
setIdData(""); setIdData("");
form.resetFields(); form.resetFields();
@ -96,7 +95,7 @@ export const SubcategoryComponent = observer((props) => {
return ( return (
<div> <div>
<Table <Table
style={{ textAlign: "center" }} style={{textAlign: "center"}}
columns={columns} columns={columns}
dataSource={store.subcategory.data} dataSource={store.subcategory.data}
bordered bordered
@ -107,13 +106,13 @@ export const SubcategoryComponent = observer((props) => {
showSizeChanger: true, showSizeChanger: true,
simple: false, simple: false,
}} }}
onChange={(page) => { onChange={async (page) => {
let pageNumber = page.current; let pageNumber = page.current;
store.subcategory.pageSize = page.pageSize; store.subcategory.pageSize = page.pageSize;
store.subcategory.page = pageNumber - 1; store.subcategory.page = pageNumber - 1;
// store.membership.isLoading = true; modalLoader.setLoading(true);
getData(); await getData();
// store.membership.isLoading = false; modalLoader.setLoading(false);
}} }}
/> />
@ -145,24 +144,24 @@ export const SubcategoryComponent = observer((props) => {
name="code" name="code"
label="Code" label="Code"
rules={[ rules={[
{ required: true, message: "Please input code category!" }, {required: true, message: "Please input code category!"},
]} ]}
> >
<Input /> <Input/>
</Form.Item> </Form.Item>
)} )}
<Form.Item <Form.Item
name="name" name="name"
label="Name" label="Name"
rules={[{ required: true, message: "Please input name category!" }]} rules={[{required: true, message: "Please input name category!"}]}
> >
<Input /> <Input/>
</Form.Item> </Form.Item>
{!idData && ( {!idData && (
<Form.Item <Form.Item
name="categoryId" name="categoryId"
label="Categories" label="Categories"
rules={[{ required: true, message: "Please input category id!" }]} rules={[{required: true, message: "Please input category id!"}]}
> >
<Select placeholder="Select Category" allowClear> <Select placeholder="Select Category" allowClear>
{store.category.data.map((item) => ( {store.category.data.map((item) => (

43
src/component/SupplierComponent.js
View File

@ -1,4 +1,4 @@
import React, {useState} from "react"; import React, {useContext, useState} from "react";
import {Button, Form, Input, message, Modal, Space, Table, Tag} from "antd"; import {Button, Form, Input, message, Modal, Space, Table, Tag} from "antd";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import {ExclamationCircleOutlined} from "@ant-design/icons"; import {ExclamationCircleOutlined} from "@ant-design/icons";
@ -6,12 +6,14 @@ import {useHistory} from "react-router-dom";
import {useStore} from "../utils/useStore"; import {useStore} from "../utils/useStore";
import {LINKS} from "../routes/app"; import {LINKS} from "../routes/app";
import {TopupsaldoModal} from "./TopupsaldoModal"; import {TopupsaldoModal} from "./TopupsaldoModal";
import {ModalLoaderContext} from "../utils/modal";
export const SupplierComponent = observer((props) => { export const SupplierComponent = observer((props) => {
const store = useStore(); const store = useStore();
const [form] = Form.useForm(); const [form] = Form.useForm();
const history = useHistory(); const history = useHistory();
const [idData, setIdData] = useState(""); const [idData, setIdData] = useState("");
const modalLoader = useContext(ModalLoaderContext);
const handleEditButton = (data) => { const handleEditButton = (data) => {
console.log(data, "isi data"); console.log(data, "isi data");
@ -37,12 +39,14 @@ export const SupplierComponent = observer((props) => {
const status = isActive ? "inactive" : "active"; const status = isActive ? "inactive" : "active";
const status2 = isActive ? "Inactivating" : "Activating"; const status2 = isActive ? "Inactivating" : "Activating";
try { try {
modalLoader.setLoading(true);
const response = await store.supplier.changeStatus(id, status); const response = await store.supplier.changeStatus(id, status);
modalLoader.setLoading(false);
response?.body?.statusCode === 201 response?.body?.statusCode === 201
? message.success(`Success ${status2} Supplier`) ? message.success(`Success ${status2} Supplier`)
: message.error(`Failed ${status2} Supplier`); : message.error(`Failed ${status2} Supplier`);
} catch (err) { } catch (err) {
modalLoader.setLoading(false);
console.log("error", err); console.log("error", err);
message.error(`Failed ${status2} Supplier`); message.error(`Failed ${status2} Supplier`);
} }
@ -66,10 +70,10 @@ export const SupplierComponent = observer((props) => {
key: ["coa", "amount"], key: ["coa", "amount"],
width: "20%", width: "20%",
render: (text, record) => render: (text, record) =>
new Intl.NumberFormat("id-ID", { new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
currency: "IDR", currency: "IDR",
}).format(text) }).format(text)
}, },
{ {
title: "Status", title: "Status",
@ -79,7 +83,7 @@ export const SupplierComponent = observer((props) => {
render: (text, record) => ( render: (text, record) => (
<Tag <Tag
color={record?.status === true ? "processing" : "#E3E8EE"} color={record?.status === true ? "processing" : "#E3E8EE"}
style={{ color: "#4F566B" }} style={{color: "#4F566B"}}
> >
{record?.status === true ? " ACTIVE" : "INACTIVE"} {record?.status === true ? " ACTIVE" : "INACTIVE"}
</Tag> </Tag>
@ -107,10 +111,13 @@ export const SupplierComponent = observer((props) => {
const deleteData = async (id) => { const deleteData = async (id) => {
try { try {
console.log(id); console.log(id);
modalLoader.setLoading(true);
await store.supplier.delete(id); await store.supplier.delete(id);
modalLoader.setLoading(false);
message.success("Data Berhasil Dihapus"); message.success("Data Berhasil Dihapus");
history.push(LINKS.PRODUCT); history.push(LINKS.PRODUCT);
} catch (err) { } catch (err) {
modalLoader.setLoading(false);
console.log("error", err); console.log("error", err);
message.error("Gagal menghapus"); message.error("Gagal menghapus");
} }
@ -119,7 +126,7 @@ export const SupplierComponent = observer((props) => {
const handleDelete = (id) => { const handleDelete = (id) => {
Modal.confirm({ Modal.confirm({
title: "Are you sure delete this record?", title: "Are you sure delete this record?",
icon: <ExclamationCircleOutlined />, icon: <ExclamationCircleOutlined/>,
okText: "Yes", okText: "Yes",
okType: "primary", okType: "primary",
cancelText: "Cancel", cancelText: "Cancel",
@ -141,18 +148,21 @@ export const SupplierComponent = observer((props) => {
console.log(data, "isi data2"); console.log(data, "isi data2");
if (idData !== "") { if (idData !== "") {
try { try {
modalLoader.setLoading(true);
await store.supplier.update(idData, data); await store.supplier.update(idData, data);
message.success("Success Update Data Member"); message.success("Success Update Data Member");
await store.supplier.getData();
} catch (e) { } catch (e) {
modalLoader.setLoading(false);
message.error("Failed Update Data Member"); message.error("Failed Update Data Member");
} }
modalLoader.setLoading(false);
store.supplier.visibleModalSupplier = false; store.supplier.visibleModalSupplier = false;
setIdData(""); setIdData("");
form.resetFields(); form.resetFields();
} else { } else {
try { try {
modalLoader.setLoading(true);
await store.supplier.create(data); await store.supplier.create(data);
message.success("Success Add New Member"); message.success("Success Add New Member");
} catch (e) { } catch (e) {
@ -160,6 +170,7 @@ export const SupplierComponent = observer((props) => {
message.error("Failed Add Member"); message.error("Failed Add Member");
} }
modalLoader.setLoading(false);
store.supplier.visibleModalSupplier = false; store.supplier.visibleModalSupplier = false;
setIdData(""); setIdData("");
form.resetFields(); form.resetFields();
@ -169,7 +180,7 @@ export const SupplierComponent = observer((props) => {
return ( return (
<div> <div>
<Table <Table
style={{ textAlign: "center" }} style={{textAlign: "center"}}
columns={columns} columns={columns}
dataSource={store.supplier.data} dataSource={store.supplier.data}
bordered bordered
@ -184,7 +195,9 @@ export const SupplierComponent = observer((props) => {
let pageNumber = page.current; let pageNumber = page.current;
store.supplier.pageSize = page.pageSize; store.supplier.pageSize = page.pageSize;
store.supplier.page = pageNumber - 1; store.supplier.page = pageNumber - 1;
modalLoader.setLoading(true);
await store.supplier.getData(); await store.supplier.getData();
modalLoader.setLoading(false);
}} }}
/> />
<Modal <Modal
@ -213,22 +226,22 @@ export const SupplierComponent = observer((props) => {
<Form.Item <Form.Item
name="name" name="name"
label="Name" label="Name"
rules={[{ required: true, message: "Please input name!" }]} rules={[{required: true, message: "Please input name!"}]}
> >
<Input /> <Input/>
</Form.Item> </Form.Item>
{!idData && ( {!idData && (
<Form.Item <Form.Item
name="code" name="code"
label="Kode" label="Kode"
rules={[{ required: true, message: "Please input kode!" }]} rules={[{required: true, message: "Please input kode!"}]}
> >
<Input /> <Input/>
</Form.Item> </Form.Item>
)} )}
</Form> </Form>
</Modal> </Modal>
<TopupsaldoModal code={store.supplier.code} /> <TopupsaldoModal code={store.supplier.code}/>
</div> </div>
); );
}); });

29
src/component/TopupsaldoModal.js
View File

@ -1,20 +1,21 @@
import React from "react"; import React, {useContext} from "react";
import {Form, Input, message, Modal} from "antd"; import {Form, Input, message, Modal} from "antd";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import {useStore} from "../utils/useStore"; import {useStore} from "../utils/useStore";
import {ModalLoaderContext} from "../utils/modal";
export const TopupsaldoModal = observer((props) => { export const TopupsaldoModal = observer((props) => {
const store = useStore(); const store = useStore();
const [form] = Form.useForm(); const [form] = Form.useForm();
const modalLoader = useContext(ModalLoaderContext);
const handleCancelTransaction = () => { const handleCancelTransaction = () => {
store.supplier.visibleModalTransaction = false; store.supplier.visibleModalTransaction = false;
}; };
const handleSubmitTransaction = async (data) => { const handleSubmitTransaction = async (data) => {
console.log(data, "isi data2");
try { try {
modalLoader.setLoading(true);
await store.supplier.createTransaction(data); await store.supplier.createTransaction(data);
message.success("Success Top Up"); message.success("Success Top Up");
} catch (e) { } catch (e) {
@ -22,9 +23,11 @@ export const TopupsaldoModal = observer((props) => {
message.error("Failed Top Up"); message.error("Failed Top Up");
} }
modalLoader.setLoading(false);
store.supplier.visibleModalTransaction = false; store.supplier.visibleModalTransaction = false;
form.resetFields(); form.resetFields();
}; };
return ( return (
<div> <div>
<Modal <Modal
@ -50,23 +53,23 @@ export const TopupsaldoModal = observer((props) => {
}} }}
> >
<Form <Form
form={form} form={form}
layout="vertical" layout="vertical"
initialValues={{supplier: store.supplier.code}} initialValues={{supplier: store.supplier.code}}
> >
<Form.Item <Form.Item
name="supplier" name="supplier"
label="Supplier" label="Supplier"
rules={[{required: true, message: "Please input supplier!"}]} rules={[{required: true, message: "Please input supplier!"}]}
> >
<Input disabled={true} /> <Input disabled={true}/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="amount" name="amount"
label="Amount" label="Amount"
rules={[{ required: true, message: "Please input amount!" }]} rules={[{required: true, message: "Please input amount!"}]}
> >
<Input /> <Input/>
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </Modal>

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

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react"; import React, {useContext, useEffect, useState} from "react";
import { Button, Card, Col, Input, Row, Tabs } from "antd"; import { Button, Card, Col, Input, Row, Tabs } from "antd";
import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons"; import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
import { BreadcumbComponent } from "../../component/BreadcumbComponent"; import { BreadcumbComponent } from "../../component/BreadcumbComponent";
@ -6,23 +6,24 @@ import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { CommissionComponent } from "../../component/CommissionComponent"; import { CommissionComponent } from "../../component/CommissionComponent";
import { LINKS } from "../../routes/app"; import { LINKS } from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
const { TabPane } = Tabs; const { TabPane } = Tabs;
const { Search } = Input; const { Search } = Input;
export const Commission = observer(() => { export const Commission = observer(() => {
const [isLoading, setIsLoading] = useState(false);
const store = useStore(); const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => { useEffect(() => {
const init = async () => { const init = async () => {
try { try {
setIsLoading(true); modalLoader.setLoading(true);
//await store.commission.getDataCategories(); //await store.commission.getDataCategories();
await store.commission.getData(); await store.commission.getData();
setIsLoading(false); modalLoader.setLoading(false);
} catch (e) { } catch (e) {
setIsLoading(false); modalLoader.setLoading(false);
} }
}; };
@ -66,7 +67,7 @@ export const Commission = observer(() => {
</Col> </Col>
</Row> */} </Row> */}
<div style={{marginTop:20}}> <CommissionComponent/></div> <div style={{marginTop:20}}> <CommissionComponent/></div>
</Card> </Card>
</div> </div>
); );

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

@ -1,4 +1,4 @@
import React, {useEffect, useState} from "react"; import React, {useContext, useEffect, useState} from "react";
import {Button, Card, Col, Input, Row, Tabs} from "antd"; import {Button, Card, Col, Input, Row, Tabs} from "antd";
import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons"; import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {BreadcumbComponent} from "../../component/BreadcumbComponent";
@ -6,72 +6,66 @@ import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import {PartnerComponent} from "../../component/PartnerComponent"; import {PartnerComponent} from "../../component/PartnerComponent";
import {LINKS} from "../../routes/app"; import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
const {TabPane} = Tabs;
const {Search} = Input; const {Search} = Input;
export const Partner = observer(() => { export const Partner = observer(() => {
const [isLoading, setIsLoading] = useState(false); const store = useStore();
const store = useStore(); const modalLoader = useContext(ModalLoaderContext);
useEffect(() => { useEffect(() => {
const init = async () => { const init = async () => {
try { try {
setIsLoading(true); modalLoader.setLoading(true);
//await store.partner.getDataCategories(); await store.partner.getData();
await store.partner.getData(); modalLoader.setLoading(false);
setIsLoading(false); } catch (e) {
} catch (e) { modalLoader.setLoading(false);
setIsLoading(false); }
} };
};
init(); init();
}, []); }, []);
// const handleChangeTabPane = async (key) => { const routeData = [
// store.partner.filterCategory = key; {
// console.log(key); route: LINKS.HOME,
// }; name: "Home",
},
{
route: LINKS.PARTNER,
name: <span style={{fontWeight: 'bold'}}>Partner</span>,
},
];
const routeData = [ return (
{ <div className={["ppob-container"].join(" ")}>
route: LINKS.HOME, <BreadcumbComponent data={routeData}/>
name: "Home", <Card>
}, <Row style={{marginBottom: 20}}>
{ <Col span={12}>
route: LINKS.PARTNER, {/* <Button>
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/> <FilterOutlined/>
Filter Filter
</Button> */} </Button> */}
</Col> </Col>
<Col span={12} style={{textAlign: "right"}}> <Col span={12} style={{textAlign: "right"}}>
<Search <Search
placeholder="input search text" placeholder="input search text"
style={{ style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200, width: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10, marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} }}
/> />
<Button onClick={() => store.partner.visibleModalPartner = true}> <Button onClick={() => store.partner.visibleModalPartner = true}>
<PlusSquareOutlined/> New <PlusSquareOutlined/> New
</Button> </Button>
</Col> </Col>
</Row> </Row>
<PartnerComponent /> <PartnerComponent/>
</Card> </Card>
</div> </div>
); );
}); });

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

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react"; import React, {useContext, useEffect, useState} from "react";
import { import {
Button, Button,
Card, Card,
@ -21,26 +21,22 @@ import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { SupplierComponent } from "../../component/SupplierComponent"; import { SupplierComponent } from "../../component/SupplierComponent";
import { LINKS } from "../../routes/app"; import { LINKS } from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
const { TabPane } = Tabs;
const { Search } = Input; const { Search } = Input;
const { Option } = Select;
export const Supplier = observer(() => { export const Supplier = observer(() => {
const [isLoading, setIsLoading] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
const [form] = Form.useForm();
const store = useStore(); const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => { useEffect(() => {
const init = async () => { const init = async () => {
try { try {
setIsLoading(true); modalLoader.setLoading(true);
//await store.supplier.getDataCategories();
await store.supplier.getData(); await store.supplier.getData();
setIsLoading(false); modalLoader.setLoading(false);
} catch (e) { } catch (e) {
setIsLoading(false); modalLoader.setLoading(false);
} }
}; };

155
src/pages/Login/Login.js
View File

@ -1,86 +1,91 @@
import React from "react"; import React, {useContext} from "react";
import {observer} from 'mobx-react-lite'; import {observer} from 'mobx-react-lite';
import {useStore} from "../../utils/useStore"; import {useStore} from "../../utils/useStore";
import {Button, Card, Col, Form, Input, message, Row, Typography} from 'antd'; import {Button, Card, Col, Form, Input, message, Row, Typography} from 'antd';
import {useHistory} from "react-router-dom"; import {useHistory} from "react-router-dom";
import {LINKS} from "../../routes/app"; import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
export const Login = observer(() => { export const Login = observer(() => {
const store = useStore(); const store = useStore();
let history = useHistory(); let history = useHistory();
const [form] = Form.useForm(); const [form] = Form.useForm();
const modalLoader = useContext(ModalLoaderContext);
const handleLogin = async (params) => { const handleLogin = async (params) => {
try { try {
await store.authentication.login({ modalLoader.setLoading(true);
username: params.username, await store.authentication.login({
password: params.password, username: params.username,
}); password: params.password,
history.push(LINKS.HOME); });
} catch (e) { modalLoader.setLoading(false);
if (e.response?.body?.message) { history.push(LINKS.HOME);
message.error(e.response.body.message); } catch (e) {
return; modalLoader.setLoading(true);
} if (e.response?.body?.message) {
message.error(e.message); message.error(e.response.body.message);
} return;
}
message.error(e.message);
} }
}
return ( return (
<div style={{width: '100vw', display: 'flex', justifyContent: 'center'}}> <div style={{width: '100vw', display: 'flex', justifyContent: 'center'}}>
<Row justify={'center'}> <Row justify={'center'}>
<Col> <Col>
<div style={{ <div style={{
display: 'flex', display: 'flex',
justifyContent: 'flex-start', justifyContent: 'flex-start',
marginTop: '5vh', marginTop: '5vh',
flexDirection: 'column', flexDirection: 'column',
alignItems: 'center', alignItems: 'center',
}}> }}>
<div style={{display: 'flex', flexDirection: 'column', alignItems: 'stretch'}}> <div style={{display: 'flex', flexDirection: 'column', alignItems: 'stretch'}}>
<Typography.Paragraph <Typography.Paragraph
style={{ style={{
margin: 0, margin: 0,
padding: 0, padding: 0,
fontSize: 20, fontSize: 20,
marginLeft: 5, marginLeft: 5,
fontWeight: 600, fontWeight: 600,
color: "#413d3e", color: "#413d3e",
}} }}
> >
Boilerplate Boilerplate
</Typography.Paragraph> </Typography.Paragraph>
</div> </div>
<Card <Card
style={{width: 320, textAlign: 'center'}} style={{width: 320, textAlign: 'center'}}
headStyle={{fontSize: 13, fontWeight: 200}} headStyle={{fontSize: 13, fontWeight: 200}}
className={"shadow"} className={"shadow"}
bordered={true} bordered={true}
title={'Sign in to your account'} title={'Sign in to your account'}
> >
<Form <Form
layout={"vertical"} layout={"vertical"}
form={form} form={form}
onFinish={handleLogin} onFinish={handleLogin}
className={"w-9/12"} className={"w-9/12"}
> >
<Form.Item label="Username" name="username" <Form.Item label="Username" name="username"
rules={[{required: true, message: 'Please input your username!'}]}> rules={[{required: true, message: 'Please input your username!'}]}>
<Input/> <Input/>
</Form.Item> </Form.Item>
<Form.Item label="Password" name="password" <Form.Item label="Password" name="password"
rules={[{required: true, message: 'Please input your password!'}]}> rules={[{required: true, message: 'Please input your password!'}]}>
<Input.Password/> <Input.Password/>
</Form.Item> </Form.Item>
<div className={"flex flex-row justify-between content-center"}> <div className={"flex flex-row justify-between content-center"}>
<Button type="primary" htmlType="submit" <Button type="primary" htmlType="submit"
loading={store.authentication.isLoginLoading}>Submit</Button> loading={store.authentication.isLoginLoading}>Submit</Button>
</div> </div>
</Form> </Form>
</Card> </Card>
</div> </div>
</Col> </Col>
</Row> </Row>
</div> </div>
); );
}); });

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

@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react"; import React, {useContext, useEffect, useState} from "react";
import { import {
Button, Button,
Card, Card,
@ -15,20 +15,21 @@ import {
Form, Form,
Select, Select,
} from "antd"; } from "antd";
import { useStore } from "../../utils/useStore"; import {useStore} from "../../utils/useStore";
import { observer } from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import { import {
ExclamationCircleOutlined, ExclamationCircleOutlined,
FilterOutlined, FilterOutlined,
PlusSquareOutlined, PlusSquareOutlined,
DownloadOutlined, DownloadOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { MembershipModal } from "./MembershipModal"; import {MembershipModal} from "./MembershipModal";
import { BreadcumbComponent } from "../../component/BreadcumbComponent"; import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app"; import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
const { Search } = Input; const {Search} = Input;
const { Option } = Select; const {Option} = Select;
export const Membership = observer(() => { export const Membership = observer(() => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const store = useStore(); const store = useStore();
@ -37,55 +38,57 @@ export const Membership = observer(() => {
const [destination, setDestination] = useState(null); const [destination, setDestination] = useState(null);
const [initialData, setInitialData] = useState({}); const [initialData, setInitialData] = useState({});
const [confirmLoading, setConfirmLoading] = useState(false); const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false); const modalLoader = useContext(ModalLoaderContext);
useEffect(() => { useEffect(() => {
const init = async () => { const init = async () => {
try { try {
setIsLoading(true); modalLoader.setLoading(true);
const isAdmin = store.authentication.userData.role === "Admin"; const isAdmin = store.authentication.userData.role === "Admin";
await getData(); await getData();
await store.role.getData(isAdmin); await store.role.getData(isAdmin);
await store.supplier.getData(); await store.supplier.getData();
setIsLoading(false); modalLoader.setLoading(false);
} catch (e) { } catch (e) {
setIsLoading(false); console.error(e);
modalLoader.setLoading(false);
} }
}; };
init(); init();
}, []); }, []);
const getData = () => { const getData = async () => {
store.authentication.userData.role === "Admin" store.authentication.userData.role === "Admin"
? store.membership.getData() ? await store.membership.getData()
: store.membership.getDataBySuperior(); : await store.membership.getDataBySuperior();
}; };
const changeStatus = async (id, isActive) => { const changeStatus = async (id, isActive) => {
const status = isActive ? "inactive" : "active"; const status = isActive ? "inactive" : "active";
const status2 = isActive ? "Inactivating" : "Activating"; const status2 = isActive ? "Inactivating" : "Activating";
console.log(status);
try { try {
modalLoader.setLoading(true);
const response = await store.membership.changeStatus(id, status); const response = await store.membership.changeStatus(id, status);
modalLoader.setLoading(false);
response?.body?.statusCode === 201 response?.body?.statusCode === 201
? message.success(`Success ${status2} Membership`) ? message.success(`Success ${status2} Membership`)
: message.error(`Failed ${status2} Membership`); : message.error(`Failed ${status2} Membership`);
} catch (err) { } catch (err) {
console.log("error", err); modalLoader.setLoading(false);
message.error(`Failed ${status2} Membership`); message.error(`Failed ${status2} Membership`);
} }
}; };
const handleCancelTransaction = () => { const handleCancelTransaction = () => {
setIsVisibleTopUpModal(false); setIsVisibleTopUpModal(false);
setDestination(null); setDestination(null);
}; };
const handleSubmitTransaction = async (data) => { const handleSubmitTransaction = async (data) => {
setConfirmLoading(true); modalLoader.setLoading(true);
try { try {
data.destination = destination; data.destination = destination;
if (data.amount) { if (data.amount) {
@ -99,9 +102,11 @@ export const Membership = observer(() => {
? store.transaction.distributeAdmin(data) ? store.transaction.distributeAdmin(data)
: store.transaction.distribute(data); : store.transaction.distribute(data);
message.success("Success Top Up"); message.success("Success Top Up");
modalLoader.setLoading(false);
//await store.supplier.getData() //await store.supplier.getData()
} catch (e) { } catch (e) {
console.log(e, "apa errornya"); console.log(e, "apa errornya");
modalLoader.setLoading(false);
message.error("Failed Top Up"); message.error("Failed Top Up");
} }
setConfirmLoading(false); setConfirmLoading(false);
@ -124,8 +129,8 @@ export const Membership = observer(() => {
}, },
{ {
title: "Saldo", title: "Saldo",
dataIndex: ["coa","amount"], dataIndex: ["coa", "amount"],
key: ["coa","amount"], key: ["coa", "amount"],
}, },
{ {
title: "Status", title: "Status",
@ -134,7 +139,7 @@ export const Membership = observer(() => {
render: (text, record) => ( render: (text, record) => (
<Tag <Tag
color={record?.isActive === true ? "processing" : "#E3E8EE"} color={record?.isActive === true ? "processing" : "#E3E8EE"}
style={{ color: "#4F566B" }} style={{color: "#4F566B"}}
> >
{record?.isActive === true ? " ACTIVE" : "INACTIVE"} {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
</Tag> </Tag>
@ -158,7 +163,7 @@ export const Membership = observer(() => {
setIsVisibleTopUpModal(true); setIsVisibleTopUpModal(true);
}} }}
> >
<DownloadOutlined /> Top Up Saldo <DownloadOutlined/> Top Up Saldo
</Button> </Button>
<Button <Button
onClick={() => { onClick={() => {
@ -209,7 +214,7 @@ export const Membership = observer(() => {
}, },
{ {
route: "/app/membership", route: "/app/membership",
name: <span style={{ fontWeight: "bold" }}>Membership</span>, name: <span style={{fontWeight: "bold"}}>Membership</span>,
}, },
]; ];
@ -218,6 +223,7 @@ export const Membership = observer(() => {
if (initialData.id) { if (initialData.id) {
setConfirmLoading(true); setConfirmLoading(true);
modalLoader.setLoading(true);
try { try {
await store.membership.update(initialData.id, data); await store.membership.update(initialData.id, data);
message.success( message.success(
@ -226,7 +232,9 @@ export const Membership = observer(() => {
: "Success Update Data Member" : "Success Update Data Member"
); );
await getData(); await getData();
modalLoader.setLoading(false);
} catch (e) { } catch (e) {
modalLoader.setLoading(true);
message.error( message.error(
initialData.isChangePassword initialData.isChangePassword
? "Failed Update Member Password" ? "Failed Update Member Password"
@ -237,6 +245,7 @@ export const Membership = observer(() => {
setVisibleModal(false); setVisibleModal(false);
} else { } else {
setConfirmLoading(true); setConfirmLoading(true);
modalLoader.setLoading(true);
try { try {
await store.membership.create(data); await store.membership.create(data);
message.success("Success Add New Member"); message.success("Success Add New Member");
@ -245,6 +254,7 @@ export const Membership = observer(() => {
console.log(e, "apa errornya"); console.log(e, "apa errornya");
message.error("Failed Add Member"); message.error("Failed Add Member");
} }
modalLoader.setLoading(false);
setConfirmLoading(false); setConfirmLoading(false);
setVisibleModal(false); setVisibleModal(false);
setInitialData({}); setInitialData({});
@ -254,7 +264,7 @@ export const Membership = observer(() => {
const handleDelete = (record) => { const handleDelete = (record) => {
Modal.confirm({ Modal.confirm({
title: "Are you sure delete this record?", title: "Are you sure delete this record?",
icon: <ExclamationCircleOutlined />, icon: <ExclamationCircleOutlined/>,
okText: "Yes", okText: "Yes",
okType: "primary", okType: "primary",
cancelText: "Cancel", cancelText: "Cancel",
@ -276,17 +286,17 @@ export const Membership = observer(() => {
return ( return (
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} /> <BreadcumbComponent data={routeData}/>
<Card> <Card>
<div> <div>
<Row style={{ marginBottom: 20 }}> <Row style={{marginBottom: 20}}>
<Col span={12}> <Col span={12}>
{/* <Button> {/* <Button>
<FilterOutlined /> <FilterOutlined />
Filter Filter
</Button> */} </Button> */}
</Col> </Col>
<Col span={12} style={{ textAlign: "right" }}> <Col span={12} style={{textAlign: "right"}}>
<Search <Search
placeholder="input search text" placeholder="input search text"
style={{ style={{
@ -301,7 +311,7 @@ export const Membership = observer(() => {
setVisibleModal(true); setVisibleModal(true);
}} }}
> >
<PlusSquareOutlined /> New <PlusSquareOutlined/> New
</Button> </Button>
</Col> </Col>
</Row> </Row>
@ -323,9 +333,9 @@ export const Membership = observer(() => {
let pageNumber = page.current; let pageNumber = page.current;
store.membership.pageSize = page.pageSize; store.membership.pageSize = page.pageSize;
store.membership.page = pageNumber - 1; store.membership.page = pageNumber - 1;
// store.membership.isLoading = true; modalLoader.setLoading(true);
await getData(); await getData();
// store.membership.isLoading = false; modalLoader.setLoading(false);
}} }}
/> />
)} )}
@ -335,18 +345,20 @@ export const Membership = observer(() => {
itemLayout="horizontal" itemLayout="horizontal"
position={"top"} position={"top"}
pagination={{ pagination={{
onChange: (page) => { onChange: async (page) => {
store.membership.pageSize = page.pageSize; store.membership.pageSize = page.pageSize;
store.membership.page = page.current; store.membership.page = page.current;
getData(); modalLoader.setLoading(true);
await getData();
modalLoader.setLoading(false);
}, },
pageSize: store.membership.pageSize, pageSize: store.membership.pageSize,
total: store.membership.total_data, total: store.membership.total_data,
current: store.membership.page, current: store.membership.page,
style: { marginBottom: "1rem", marginRight: "1rem" }, style: {marginBottom: "1rem", marginRight: "1rem"},
}} }}
dataSource={store.membership.data} dataSource={store.membership.data}
style={{ padding: 0 }} style={{padding: 0}}
renderItem={(item) => { renderItem={(item) => {
return ( return (
<div> <div>
@ -368,12 +380,12 @@ export const Membership = observer(() => {
description={ description={
<div style={{}}> <div style={{}}>
<p> <p>
<small>Username : {item.username}</small> <br /> <small>Username : {item.username}</small> <br/>
</p> </p>
</div> </div>
} }
/> />
<div style={{ marginRight: 16 }}> <div style={{marginRight: 16}}>
<p <p
style={{ style={{
fontSize: 9, fontSize: 9,
@ -384,7 +396,7 @@ export const Membership = observer(() => {
</p> </p>
</div> </div>
</List.Item> </List.Item>
<Divider plain style={{ margin: 0 }} /> <Divider plain style={{margin: 0}}/>
</div> </div>
); );
}} }}
@ -415,25 +427,25 @@ export const Membership = observer(() => {
}} }}
> >
<Form form={form} layout="vertical"> <Form form={form} layout="vertical">
<Form.Item <Form.Item
name="supplier" name="supplier"
label="Supplier" label="Supplier"
rules={[{ required: true, message: "Please input supplier!" }]} rules={[{required: true, message: "Please input supplier!"}]}
> >
<Select placeholder="Select Code Supplier" allowClear> <Select placeholder="Select Code Supplier" allowClear>
{store.supplier.data.map((item) => ( {store.supplier.data.map((item) => (
<Option value={item.code} key={item.code}> <Option value={item.code} key={item.code}>
{item.code} {item.code}
</Option> </Option>
))} ))}
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="amount" name="amount"
label="Amount" label="Amount"
rules={[{ required: true, message: "Please input amount!" }]} rules={[{required: true, message: "Please input amount!"}]}
> >
<Input /> <Input/>
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </Modal>

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

@ -11,7 +11,6 @@ export const MembershipModal = ({
}) => { }) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const { Option } = Select; const { Option } = Select;
const dataStatus = ["true", "false"];
const store = useStore(); const store = useStore();
return ( return (

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

@ -1,4 +1,4 @@
import React, { useState ,useEffect} from "react"; import React, {useState, useEffect, useContext} from "react";
import { import {
Button, Button,
Card, Card,
@ -12,42 +12,37 @@ import {
Space, Space,
Table, Table,
} from "antd"; } from "antd";
import { useStore } from "../../utils/useStore"; import {useStore} from "../../utils/useStore";
import { observer } from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import { import {
CheckCircleOutlined, CheckCircleOutlined,
CloseOutlined, CloseOutlined,
FilterOutlined, FilterOutlined,
PlusSquareOutlined, PlusSquareOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { PaybackModal } from "./PaybackModal"; import {PaybackModal} from "./PaybackModal";
import { BreadcumbComponent } from "../../component/BreadcumbComponent"; import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app"; import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
const { Search } = Input; const {Search} = Input;
export const Payback = observer(() => { export const Payback = observer(() => {
const store = useStore(); const store = useStore();
const [visibleModal, setVisibleModal] = useState(false); const modalLoader = useContext(ModalLoaderContext);
const [confirmLoading, setConfirmLoading] = useState(false);
const [initialData, setInitialData] = useState({});
//const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => { useEffect(() => {
const init = async () => { const init = async () => {
try { try {
setIsLoading(true); modalLoader.setLoading(true);
await store.payback.getDataUser(); await store.payback.getDataUser();
//await store.role.getData(); modalLoader.setLoading(false);
setIsLoading(false); } catch (e) {
} catch (e) { modalLoader.setLoading(false);
setIsLoading(false); }
} };
};
init();
init();
}, []); }, []);
@ -64,7 +59,7 @@ export const Payback = observer(() => {
render: (text, record) => ( render: (text, record) => (
<Image <Image
src={record.picture} src={record.picture}
style={{ width: 50, height: 50 }} style={{width: 50, height: 50}}
shape="circle" shape="circle"
alt="avatar" alt="avatar"
/> />
@ -85,7 +80,7 @@ export const Payback = observer(() => {
onClick={async () => { onClick={async () => {
await handleAction(record, "accept"); await handleAction(record, "accept");
}} }}
icon={<CheckCircleOutlined />} icon={<CheckCircleOutlined/>}
style={{ style={{
backgroundColor: "#1bb91d", backgroundColor: "#1bb91d",
color: "#fff", color: "#fff",
@ -98,7 +93,7 @@ export const Payback = observer(() => {
onClick={async () => { onClick={async () => {
await handleAction(record, "reject"); await handleAction(record, "reject");
}} }}
icon={<CloseOutlined />} icon={<CloseOutlined/>}
style={{ style={{
backgroundColor: "#ff1c1c", backgroundColor: "#ff1c1c",
color: "#fff", color: "#fff",
@ -112,7 +107,7 @@ export const Payback = observer(() => {
}, },
]; ];
if(store.authentication.userData.role === "Retail") columns.pop(); if (store.authentication.userData.role === "Retail") columns.pop();
const routeData = [ const routeData = [
{ {
@ -121,12 +116,12 @@ export const Payback = observer(() => {
}, },
{ {
route: LINKS.PAYBACK, route: LINKS.PAYBACK,
name: <span style={{ fontWeight: "bold" }}>Payback</span>, name: <span style={{fontWeight: "bold"}}>Payback</span>,
}, },
]; ];
const onSubmit = async (data) => { const onSubmit = async (data) => {
setConfirmLoading(true); modalLoader.setLoading(true);
try { try {
// await store.membership.create(data); // await store.membership.create(data);
// message.success("Success Add New Member"); // message.success("Success Add New Member");
@ -135,25 +130,25 @@ export const Payback = observer(() => {
console.error(e, "apa errornya"); console.error(e, "apa errornya");
message.error("Failed Add Member"); message.error("Failed Add Member");
} }
setConfirmLoading(false); modalLoader.setLoading(false);
setVisibleModal(false);
}; };
const handleAction = async (record, type) => {}; const handleAction = async (record, type) => {
};
return ( return (
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} /> <BreadcumbComponent data={routeData}/>
<Card> <Card>
<div> <div>
<Row style={{ marginBottom: 20 }}> <Row style={{marginBottom: 20}}>
<Col span={12}> <Col span={12}>
<Button> <Button>
<FilterOutlined /> <FilterOutlined/>
Filter Filter
</Button> </Button>
</Col> </Col>
<Col span={12} style={{ textAlign: "right" }}> <Col span={12} style={{textAlign: "right"}}>
<Search <Search
placeholder="input search text" placeholder="input search text"
style={{ style={{
@ -215,7 +210,7 @@ export const Payback = observer(() => {
// style: {marginBottom: "1rem", marginRight: "1rem"}, // style: {marginBottom: "1rem", marginRight: "1rem"},
// }} // }}
dataSource={store.payback.data} dataSource={store.payback.data}
style={{ padding: 0 }} style={{padding: 0}}
renderItem={(item) => { renderItem={(item) => {
return ( return (
<div> <div>
@ -236,11 +231,11 @@ export const Payback = observer(() => {
title={item.name} title={item.name}
description={ description={
<div style={{}}> <div style={{}}>
<Image src={item.picture} preview={false} /> <Image src={item.picture} preview={false}/>
</div> </div>
} }
/> />
<div style={{ marginRight: 16 }}> <div style={{marginRight: 16}}>
<p <p
style={{ style={{
fontSize: 9, fontSize: 9,
@ -251,7 +246,7 @@ export const Payback = observer(() => {
</p> </p>
</div> </div>
</List.Item> </List.Item>
<Divider plain style={{ margin: 0 }} /> <Divider plain style={{margin: 0}}/>
</div> </div>
); );
}} }}

124
src/pages/Payback/PaybackFromUser.js
View File

@ -1,4 +1,4 @@
import React, { useState ,useEffect} from "react"; import React, {useState, useEffect, useContext} from "react";
import { import {
Button, Button,
Card, Card,
@ -12,42 +12,40 @@ import {
Space, Space,
Table, Table,
} from "antd"; } from "antd";
import { useStore } from "../../utils/useStore"; import {useStore} from "../../utils/useStore";
import { observer } from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import { import {
CheckCircleOutlined, CheckCircleOutlined,
CloseOutlined, CloseOutlined,
FilterOutlined, FilterOutlined,
PlusSquareOutlined, PlusSquareOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { PaybackModal } from "./PaybackModal"; import {PaybackModal} from "./PaybackModal";
import { BreadcumbComponent } from "../../component/BreadcumbComponent"; import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app"; import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
const { Search } = Input; const {Search} = Input;
export const PaybackFromUser = observer(() => { export const PaybackFromUser = observer(() => {
const store = useStore(); const store = useStore();
const [visibleModal, setVisibleModal] = useState(false); const [visibleModal, setVisibleModal] = useState(false);
const [confirmLoading, setConfirmLoading] = useState(false);
const [initialData, setInitialData] = useState({}); const [initialData, setInitialData] = useState({});
//const [confirmLoading, setConfirmLoading] = useState(false); const modalLoader = useContext(ModalLoaderContext);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => { useEffect(() => {
const init = async () => { const init = async () => {
try { try {
setIsLoading(true); modalLoader.setLoading(true);
await store.payback.getData(); await store.payback.getData();
//await store.role.getData(); await store.authentication.getProfile();
setIsLoading(false); modalLoader.setLoading(false);
} catch (e) { } catch (e) {
setIsLoading(false); modalLoader.setLoading(false);
} }
}; };
init(); init();
}, []); }, []);
@ -59,7 +57,7 @@ export const PaybackFromUser = observer(() => {
render: (text, record) => ( render: (text, record) => (
<Image <Image
src={record.image_prove} src={record.image_prove}
style={{ width: 50, height: 50 }} style={{width: 50, height: 50}}
shape="circle" shape="circle"
alt="avatar" alt="avatar"
/> />
@ -80,7 +78,7 @@ export const PaybackFromUser = observer(() => {
onClick={async () => { onClick={async () => {
await handleAction(record, "accept"); await handleAction(record, "accept");
}} }}
icon={<CheckCircleOutlined />} icon={<CheckCircleOutlined/>}
style={{ style={{
backgroundColor: "#1bb91d", backgroundColor: "#1bb91d",
color: "#fff", color: "#fff",
@ -93,7 +91,7 @@ export const PaybackFromUser = observer(() => {
onClick={async () => { onClick={async () => {
await handleAction(record, "reject"); await handleAction(record, "reject");
}} }}
icon={<CloseOutlined />} icon={<CloseOutlined/>}
style={{ style={{
backgroundColor: "#ff1c1c", backgroundColor: "#ff1c1c",
color: "#fff", color: "#fff",
@ -149,12 +147,12 @@ export const PaybackFromUser = observer(() => {
}, },
{ {
route: LINKS.PAYBACKFROMUSER, route: LINKS.PAYBACKFROMUSER,
name: <span style={{ fontWeight: "bold" }}>Payback User</span>, name: <span style={{fontWeight: "bold"}}>Payback User</span>,
}, },
]; ];
const onSubmit = async (data) => { const onSubmit = async (data) => {
setConfirmLoading(true); modalLoader.setLoading(true);
try { try {
// await store.membership.create(data); // await store.membership.create(data);
// message.success("Success Add New Member"); // message.success("Success Add New Member");
@ -163,25 +161,26 @@ export const PaybackFromUser = observer(() => {
console.error(e, "apa errornya"); console.error(e, "apa errornya");
message.error("Failed Add Member"); message.error("Failed Add Member");
} }
setConfirmLoading(false); modalLoader.setLoading(false);
setVisibleModal(false); setVisibleModal(false);
}; };
const handleAction = async (record, type) => {}; const handleAction = async (record, type) => {
};
return ( return (
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} /> <BreadcumbComponent data={routeData}/>
<Card> <Card>
<div> <div>
<Row style={{ marginBottom: 20 }}> <Row style={{marginBottom: 20}}>
<Col span={12}> <Col span={12}>
<Button> <Button>
<FilterOutlined /> <FilterOutlined/>
Filter Filter
</Button> </Button>
</Col> </Col>
<Col span={12} style={{ textAlign: "right" }}> <Col span={12} style={{textAlign: "right"}}>
<Search <Search
placeholder="input search text" placeholder="input search text"
style={{ style={{
@ -197,7 +196,7 @@ export const PaybackFromUser = observer(() => {
setVisibleModal(true); setVisibleModal(true);
}} }}
> >
<PlusSquareOutlined /> New <PlusSquareOutlined/> New
</Button> </Button>
)} )}
</Col> </Col>
@ -210,19 +209,19 @@ export const PaybackFromUser = observer(() => {
dataSource={store.payback.data} dataSource={store.payback.data}
bordered bordered
pagination={{ pagination={{
pageSize: store.payback.pageSize, pageSize: store.payback.pageSize,
total: store.payback.total_data, total: store.payback.total_data,
current: store.payback.page + 1, current: store.payback.page + 1,
showSizeChanger: true, showSizeChanger: true,
simple: false simple: false
}} }}
onChange={async (page) => { onChange={async (page) => {
let pageNumber = page.current; let pageNumber = page.current;
store.payback.pageSize = page.pageSize; store.payback.pageSize = page.pageSize;
store.payback.page = pageNumber - 1; store.payback.page = pageNumber - 1;
// store.membership.isLoading = true; modalLoader.setLoading(true);
await store.payback.getData(); await store.payback.getData();
// store.membership.isLoading = false; modalLoader.setLoading(false);
}} }}
/> />
)} )}
@ -231,19 +230,21 @@ export const PaybackFromUser = observer(() => {
<List <List
itemLayout="horizontal" itemLayout="horizontal"
position={"top"} position={"top"}
// pagination={{ pagination={{
// onChange: (page) => { onChange: async (page) => {
// store.membership.pageSize = page.pageSize; store.payback.pageSize = page.pageSize;
// store.membership.page = page.current; store.payback.page = page.current;
// store.membership.getData(); modalLoader.setLoading(true);
// }, await store.payback.getData();
// pageSize: store.membership.pageSize, modalLoader.setLoading(false);
// total: store.membership.total_data, },
// current: store.membership.page, pageSize: store.payback.pageSize,
// style: {marginBottom: "1rem", marginRight: "1rem"}, total: store.payback.total_data,
// }} current: store.payback.page,
style: {marginBottom: "1rem", marginRight: "1rem"},
}}
dataSource={store.payback.data} dataSource={store.payback.data}
style={{ padding: 0 }} style={{padding: 0}}
renderItem={(item) => { renderItem={(item) => {
return ( return (
<div> <div>
@ -264,11 +265,11 @@ export const PaybackFromUser = observer(() => {
title={item.name} title={item.name}
description={ description={
<div style={{}}> <div style={{}}>
<Image src={item.image_prove} preview={false} /> <Image src={item.image_prove} preview={false}/>
</div> </div>
} }
/> />
<div style={{ marginRight: 16 }}> <div style={{marginRight: 16}}>
<p <p
style={{ style={{
fontSize: 9, fontSize: 9,
@ -279,7 +280,7 @@ export const PaybackFromUser = observer(() => {
</p> </p>
</div> </div>
</List.Item> </List.Item>
<Divider plain style={{ margin: 0 }} /> <Divider plain style={{margin: 0}}/>
</div> </div>
); );
}} }}
@ -290,7 +291,6 @@ export const PaybackFromUser = observer(() => {
<PaybackModal <PaybackModal
visible={visibleModal} visible={visibleModal}
confirmLoading={confirmLoading}
initialData={initialData} initialData={initialData}
onCreate={async (data) => { onCreate={async (data) => {
await onSubmit(data); await onSubmit(data);

52
src/pages/Payback/PaybackModal.js
View File

@ -1,4 +1,4 @@
import React, { useState, useEffect } from "react"; import React, {useState, useEffect, useContext} from "react";
import { import {
Button, Button,
Form, Form,
@ -8,37 +8,22 @@ import {
Modal, Modal,
Upload, Upload,
} from "antd"; } from "antd";
import { useStore } from "../../utils/useStore"; import {useStore} from "../../utils/useStore";
import { appConfig } from "../../config/app"; import {appConfig} from "../../config/app";
import { LoadingOutlined, UploadOutlined } from "@ant-design/icons"; import {LoadingOutlined, UploadOutlined} from "@ant-design/icons";
import {ModalLoaderContext} from "../../utils/modal";
export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => { export const PaybackModal = ({visible, onCreate, onCancel, initialData}) => {
const [form] = Form.useForm(); const [form] = Form.useForm();
const store = useStore(); const store = useStore();
const [fileList, setFileList] = useState([]); const [fileList, setFileList] = useState([]);
const [previewTitle, setPreviewTitle] = useState(""); const [previewTitle, setPreviewTitle] = useState("");
const [previewImage, setPreviewImage] = useState(""); const [previewImage, setPreviewImage] = useState("");
const [loading, setLoading] = useState(false);
const [fileUrl, setFileUrl] = useState(""); const [fileUrl, setFileUrl] = useState("");
const firstIndexFileList = fileList[0]; const firstIndexFileList = fileList[0];
const [isLoading, setIsLoading] = useState(false); const [loading, setLoading] = useState(false);
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
//await store.membership.getData();
//await store.role.getData();
await store.authentication.getProfile();
setIsLoading(false);
} catch (e) {
setIsLoading(false);
}
};
init();
}, []);
const beforeUpload = (file) => { const beforeUpload = (file) => {
let isPdf, isLt2M; let isPdf, isLt2M;
let allowedFile = ["image/jpeg", "image/png", "application/pdf"]; let allowedFile = ["image/jpeg", "image/png", "application/pdf"];
@ -59,7 +44,7 @@ export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => {
setPreviewTitle(file.url?.substring(file.url?.lastIndexOf("/") + 1)); setPreviewTitle(file.url?.substring(file.url?.lastIndexOf("/") + 1));
}; };
const handleChange = ({ fileList }) => { const handleChange = ({fileList}) => {
setFileList(fileList); setFileList(fileList);
if (fileList.length && fileList[0].status === "done") { if (fileList.length && fileList[0].status === "done") {
form.setFieldsValue({ form.setFieldsValue({
@ -75,9 +60,9 @@ export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => {
const uploadButton = ( const uploadButton = (
<div> <div>
{loading ? ( {loading ? (
<LoadingOutlined /> <LoadingOutlined/>
) : ( ) : (
<Button icon={<UploadOutlined />}>Click to Upload</Button> <Button icon={<UploadOutlined/>}>Click to Upload</Button>
)} )}
</div> </div>
); );
@ -93,15 +78,16 @@ export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => {
const handleSubmit = async (data) => { const handleSubmit = async (data) => {
console.log(data, "isi data2"); console.log(data, "isi data2");
try { try {
modalLoader.setLoading(true);
await store.payback.create(data); await store.payback.create(data);
modalLoader.setLoading(false);
message.success("Success Add Payback"); message.success("Success Add Payback");
await store.payback.getData(); await store.payback.getData();
} catch (e) { } catch (e) {
modalLoader.setLoading(false);
console.log(e, "apa errornya"); console.log(e, "apa errornya");
message.error("Failed Add Member"); message.error("Failed Add Member");
} }
//store.payback.visibleModalPayback = false;
form.resetFields(); form.resetFields();
}; };
@ -137,10 +123,10 @@ export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => {
<Form.Item <Form.Item
name="destination" name="destination"
label="destination" label="destination"
rules={[{ required: true, message: "Please input Name!" }]} rules={[{required: true, message: "Please input Name!"}]}
initialValue={store.authentication.profileData.superior?.id} initialValue={store.authentication.profileData.superior?.id}
> >
<Input /> <Input/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
label="Upload Picture" label="Upload Picture"
@ -182,7 +168,7 @@ export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => {
<img <img
src={previewImage} src={previewImage}
alt="preview" alt="preview"
style={{ width: "100%" }} style={{width: "100%"}}
/> />
</div> </div>
<h5>{previewTitle}</h5> <h5>{previewTitle}</h5>
@ -196,9 +182,9 @@ export const PaybackModal = ({ visible, onCreate, onCancel, initialData }) => {
<Form.Item <Form.Item
name="amount" name="amount"
label="amount" label="amount"
rules={[{ required: true, message: "Please input Amount!" }]} rules={[{required: true, message: "Please input Amount!"}]}
> >
<Input /> <Input/>
</Form.Item> </Form.Item>
</Form> </Form>
</Modal> </Modal>

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

@ -1,4 +1,4 @@
import React, {useEffect, useState} from "react"; import React, {useContext, useEffect, useState} from "react";
import {Button, Card, Col, Input, Row, Tabs} from "antd"; import {Button, Card, Col, Input, Row, Tabs} from "antd";
import {FilterOutlined, PlusSquareOutlined} from "@ant-design/icons"; import {FilterOutlined, PlusSquareOutlined} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {BreadcumbComponent} from "../../component/BreadcumbComponent";
@ -6,22 +6,23 @@ import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import {LINKS} from "../../routes/app"; import {LINKS} from "../../routes/app";
import {CategoryComponent} from "../../component/CategoryComponent"; import {CategoryComponent} from "../../component/CategoryComponent";
import {ModalLoaderContext} from "../../utils/modal";
const {TabPane} = Tabs; const {TabPane} = Tabs;
const {Search} = Input; const {Search} = Input;
export const Category = observer(() => { export const Category = observer(() => {
const [isLoading, setIsLoading] = useState(false);
const store = useStore(); const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => { useEffect(() => {
const init = async () => { const init = async () => {
try { try {
setIsLoading(true); modalLoader.setLoading(true);
await store.category.getData(); await store.category.getData();
setIsLoading(false); modalLoader.setLoading(false);
} catch (e) { } catch (e) {
setIsLoading(false); modalLoader.setLoading(false);
} }
}; };

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

@ -1,4 +1,4 @@
import React, {useEffect, useState} from "react"; import React, {useContext, useEffect, useState} from "react";
import {Button, Card, Col, Input, Row} from "antd"; import {Button, Card, Col, Input, Row} from "antd";
import {PlusSquareOutlined} from "@ant-design/icons"; import {PlusSquareOutlined} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {BreadcumbComponent} from "../../component/BreadcumbComponent";
@ -6,21 +6,22 @@ import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import {LINKS} from "../../routes/app"; import {LINKS} from "../../routes/app";
import {SubcategoryComponent} from "../../component/Subcategory"; import {SubcategoryComponent} from "../../component/Subcategory";
import {ModalLoaderContext} from "../../utils/modal";
const {Search} = Input; const {Search} = Input;
export const Subcategory = observer(() => { export const Subcategory = observer(() => {
const [isLoading, setIsLoading] = useState(false);
const store = useStore(); const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => { useEffect(() => {
const init = async () => { const init = async () => {
try { try {
setIsLoading(true); modalLoader.setLoading(true);
getData(); await getData();
setIsLoading(false); modalLoader.setLoading(false);
} catch (e) { } catch (e) {
setIsLoading(false); modalLoader.setLoading(false);
} }
}; };
@ -39,22 +40,22 @@ export const Subcategory = observer(() => {
}, },
{ {
route: LINKS.SUBCATEGORY, route: LINKS.SUBCATEGORY,
name: <span style={{ fontWeight: "bold" }}>Sub Category</span>, name: <span style={{fontWeight: "bold"}}>Sub Category</span>,
}, },
]; ];
return ( return (
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} /> <BreadcumbComponent data={routeData}/>
<Card> <Card>
<Row style={{ marginBottom: 20 }}> <Row style={{marginBottom: 20}}>
<Col span={12}> <Col span={12}>
{/* <Button> {/* <Button>
<FilterOutlined /> <FilterOutlined />
Filter Filter
</Button> */} </Button> */}
</Col> </Col>
<Col span={12} style={{ textAlign: "right" }}> <Col span={12} style={{textAlign: "right"}}>
<Search <Search
placeholder="input search text" placeholder="input search text"
style={{ style={{
@ -66,11 +67,11 @@ export const Subcategory = observer(() => {
<Button <Button
onClick={() => (store.subcategory.visibleModalSubcategory = true)} onClick={() => (store.subcategory.visibleModalSubcategory = true)}
> >
<PlusSquareOutlined /> New <PlusSquareOutlined/> New
</Button> </Button>
</Col> </Col>
</Row> </Row>
<SubcategoryComponent /> <SubcategoryComponent/>
</Card> </Card>
</div> </div>
); );

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

@ -1,4 +1,4 @@
import React, {useEffect} from "react"; import React, {useContext, useEffect} from "react";
import {Button, Card, Col, Row, Table, Typography} from "antd"; import {Button, Card, Col, Row, Table, Typography} from "antd";
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app"; import {LINKS} from "../../routes/app";
@ -6,138 +6,143 @@ import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import {FilterOutlined} from "@ant-design/icons"; import {FilterOutlined} from "@ant-design/icons";
import {format, parseISO} from "date-fns"; import {format, parseISO} from "date-fns";
import {ModalLoaderContext} from "../../utils/modal";
const {Title, Text} = Typography; const {Title, Text} = Typography;
export const Profile = observer(() => { export const Profile = observer(() => {
const store = useStore(); const store = useStore();
const routeData = [ const modalLoader = useContext(ModalLoaderContext);
{
route: LINKS.HOME,
name: "Home",
},
{
route: LINKS.PROFILE,
name: <span style={{fontWeight: 'bold'}}>Profile</span>,
},
];
useEffect(() => { const routeData = [
(async () => { {
await Promise.allSettled([ route: LINKS.HOME,
store.authentication.getProfile(), name: "Home",
store.transaction.getDataHistoryTransaction(), },
]); {
})() route: LINKS.PROFILE,
}, []); name: <span style={{fontWeight: 'bold'}}>Profile</span>,
},
];
const columns = [ useEffect(() => {
{ (async () => {
title: 'Markup Price', modalLoader.setLoading(true);
dataIndex: 'mark_up_price', await Promise.allSettled([
key: 'mark_up_price', store.authentication.getProfile(),
width: '20%', store.transaction.getDataHistoryTransaction(),
}, ]);
{ modalLoader.setLoading(false);
title: 'Name', })()
dataIndex: 'name', }, []);
key: 'name',
width: '50%',
},
{
title: 'Transaction Date',
dataIndex: 'created_at',
key: 'created_at',
render: (text, record) => {
return (
<Text>{format(parseISO(record.created_at), 'dd MMMM yyyy HH:mm')}</Text>
)
},
},
]
const styleSaldoTitle = store.ui.mediaQuery.isDesktop ? { const columns = [
display: "flex", {
justifyContent: "center" title: 'Markup Price',
} : {fontSize: "0.75rem"}; dataIndex: 'mark_up_price',
const styleSaldoContent = store.ui.mediaQuery.isDesktop ? { key: 'mark_up_price',
fontSize: '1.25rem', width: '20%',
display: "flex", },
justifyContent: "center" {
} : null; title: 'Name',
dataIndex: 'name',
key: 'name',
width: '50%',
},
{
title: 'Transaction Date',
dataIndex: 'created_at',
key: 'created_at',
render: (text, record) => {
return (
<Text>{format(parseISO(record.created_at), 'dd MMMM yyyy HH:mm')}</Text>
)
},
},
]
return ( const styleSaldoTitle = store.ui.mediaQuery.isDesktop ? {
<div className={["ppob-container"].join(" ")}> display: "flex",
<BreadcumbComponent data={routeData}/> justifyContent: "center"
<Card> } : {fontSize: "0.75rem"};
<Title strong>Profile</Title> const styleSaldoContent = store.ui.mediaQuery.isDesktop ? {
<Row style={{marginBottom: 20}}> fontSize: '1.25rem',
<Col lg={12} xs={24}> display: "flex",
<Row> justifyContent: "center"
<Col span={12}> } : null;
<Text strong>Name</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData?.userDetail?.name}</Text>
</Col>
<Col span={12}>
<Text strong>Phone Number</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData?.userDetail?.phone_number}</Text>
</Col>
<Col span={12}>
<Text strong>Username</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData?.username}</Text>
</Col>
<Col span={12}>
<Text strong>Role</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData.roles?.name}</Text>
</Col>
<Col span={12}>
<Text strong>Superior</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData.superior?.username}</Text>
</Col>
</Row>
</Col>
<Col lg={12} xs={24}>
<Row justify={"center"}>
<Col lg={24} xs={12}>
<Title strong level={3} style={styleSaldoTitle}>Saldo</Title>
</Col>
<Col lg={24} xs={12}>
<Text style={styleSaldoContent}>{store.authentication.profileData?.wallet}</Text>
</Col>
</Row>
</Col>
</Row>
<Row>
<Col span={24}>
<div>
<Title strong level={3}>History User Transaction</Title>
<Button style={{marginBottom: '1rem'}} onClick={() => { return (
console.log('clicked filter') <div className={["ppob-container"].join(" ")}>
}}> <BreadcumbComponent data={routeData}/>
<FilterOutlined/> <Card>
Filter <Title strong>Profile</Title>
</Button> <Row style={{marginBottom: 20}}>
<Table <Col lg={12} xs={24}>
columns={columns} <Row>
dataSource={store.transaction.dataHistoryTransaction} <Col span={12}>
bordered <Text strong>Name</Text>
/> </Col>
</div> <Col span={12}>
</Col> <Text>{store.authentication.profileData?.userDetail?.name}</Text>
</Row> </Col>
<div/> <Col span={12}>
</Card> <Text strong>Phone Number</Text>
</div> </Col>
) <Col span={12}>
<Text>{store.authentication.profileData?.userDetail?.phone_number}</Text>
</Col>
<Col span={12}>
<Text strong>Username</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData?.username}</Text>
</Col>
<Col span={12}>
<Text strong>Role</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData.roles?.name}</Text>
</Col>
<Col span={12}>
<Text strong>Superior</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData.superior?.username}</Text>
</Col>
</Row>
</Col>
<Col lg={12} xs={24}>
<Row justify={"center"}>
<Col lg={24} xs={12}>
<Title strong level={3} style={styleSaldoTitle}>Saldo</Title>
</Col>
<Col lg={24} xs={12}>
<Text style={styleSaldoContent}>{store.authentication.profileData?.wallet}</Text>
</Col>
</Row>
</Col>
</Row>
<Row>
<Col span={24}>
<div>
<Title strong level={3}>History User Transaction</Title>
<Button style={{marginBottom: '1rem'}} onClick={() => {
console.log('clicked filter')
}}>
<FilterOutlined/>
Filter
</Button>
<Table
columns={columns}
dataSource={store.transaction.dataHistoryTransaction}
bordered
/>
</div>
</Col>
</Row>
<div/>
</Card>
</div>
)
}); });

221
src/pages/Transaction/Product.js
View File

@ -1,8 +1,9 @@
import React, {useEffect, useState} from "react"; import React, {useContext, useEffect, useState} from "react";
import {useStore} from "../../utils/useStore"; import {useStore} from "../../utils/useStore";
import {Button, Card, Col, Input, message, Modal, Row, Select} from "antd"; import {Button, Card, Col, Input, message, Modal, Row, Select} from "antd";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import {MoneyCollectOutlined} from "@ant-design/icons"; import {MoneyCollectOutlined} from "@ant-design/icons";
import {ModalLoaderContext} from "../../utils/modal";
const {Search} = Input; const {Search} = Input;
const {Option} = Select; const {Option} = Select;
@ -10,133 +11,139 @@ const {Option} = Select;
export const Product = observer(() => { export const Product = observer(() => {
const store = useStore(); const store = useStore();
const [isLoading, setIsLoading] = useState(false);
const [productData, setProductData] = useState([]); const [productData, setProductData] = useState([]);
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => { useEffect(() => {
const init = async () => { const init = async () => {
try { try {
setIsLoading(true); modalLoader.setLoading(true);
await store.transaction.getDataSubCategories(); await Promise.allSettled([
await store.transaction.getDataCategories(); store.transaction.getDataSubCategories(),
setIsLoading(false); store.transaction.getDataCategories()
])
modalLoader.setLoading(false);
} catch (e) { } catch (e) {
setIsLoading(false); modalLoader.setLoading(false);
} }
}; };
init(); init();
}, []); }, []);
// data // data
useEffect(() => { useEffect(() => {
console.log("⚡ transaction data store", store.transaction.data); console.log("⚡ transaction data store", store.transaction.data);
setProductData(store.transaction.data); setProductData(store.transaction.data);
}, [store.transaction.data]); }, [store.transaction.data]);
// Subcategory // Subcategory
useEffect(() => { useEffect(() => {
console.log( console.log(
"⚡ transaction subcategory store", "⚡ transaction subcategory store",
store.transaction.dataSubCategories store.transaction.dataSubCategories
); );
}, [store.transaction.dataSubCategories]); }, [store.transaction.dataSubCategories]);
const handleChangeSubcategory = async (item) => { const handleChangeSubcategory = async (item) => {
store.transaction.filterSubCategory = item; store.transaction.filterSubCategory = item;
await store.transaction.getData(); modalLoader.setLoading(true);
}; await store.transaction.getData();
modalLoader.setLoading(false);
};
const handleBuyProduct = async (data) => { const handleBuyProduct = async (data) => {
try { modalLoader.setLoading(true);
const response = await store.transaction.buyProduct({productCode: data}); try {
// if (response.status === 200) { const response = await store.transaction.buyProduct({productCode: data});
message.success("Success Buy Product"); // if (response.status === 200) {
// } else { message.success("Success Buy Product");
//message.error("Failed Buy Product"); // } else {
//} //message.error("Failed Buy Product");
} catch (e) { //}
console.log(e, "apa errornya"); } catch (e) {
message.error("Failed Buy Product"); console.log(e, "apa errornya");
} message.error("Failed Buy Product");
}; }
modalLoader.setLoading(false);
};
return ( return (
<div> <div>
<Row> <Row>
<span style={{fontWeight: "bold", marginBottom: "10px"}}>Sub Category</span> <span style={{fontWeight: "bold", marginBottom: "10px"}}>Sub Category</span>
</Row> </Row>
<Row> <Row>
<Col span={24}> <Col span={24}>
<Select <Select
placeholder={"Select Sub Category"} placeholder={"Select Sub Category"}
allowClear={true} allowClear={true}
onChange={(val) => { onChange={(val) => {
if (val) { if (val) {
handleChangeSubcategory(val); handleChangeSubcategory(val);
} }
}} }}
style={{marginBottom: "10px", width: "100%"}} style={{marginBottom: "10px", width: "100%"}}
> >
{store.transaction.dataSubCategories.map((item, index) => ( {store.transaction.dataSubCategories.map((item, index) => (
<Option key={item.id} value={item.id}> <Option key={item.id} value={item.id}>
{item.name} {item.name}
</Option> </Option>
))} ))}
</Select> </Select>
</Col> </Col>
</Row> </Row>
<Row justify={"center"} align={"center"} style={{marginBottom: "1rem"}}> <Row justify={"center"} align={"center"} style={{marginBottom: "1rem"}}>
<Col <Col
span={12} span={12}
style={{fontWeight: "bold", display: "flex", alignItems: "center"}} style={{fontWeight: "bold", display: "flex", alignItems: "center"}}
> >
Produk & Nominal Produk & Nominal
</Col> </Col>
<Col span={12} style={{textAlign: "right"}}> <Col span={12} style={{textAlign: "right"}}>
<Search <Search
placeholder="input search text" placeholder="input search text"
style={{width: 200, marginRight: 10}} style={{width: 200, marginRight: 10}}
/> />
</Col> </Col>
</Row> </Row>
{productData.length != 0 && ( {productData.length != 0 && (
<Row> <Row>
{productData.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 <Card
onClick={() => { onClick={() => {
Modal.confirm({ Modal.confirm({
title: `Are you sure buy ${item.name}?`, title: `Are you sure buy ${item.name}?`,
icon: <MoneyCollectOutlined/>, icon: <MoneyCollectOutlined/>,
okText: "Confirm", okText: "Confirm",
cancelText: "Cancel", cancelText: "Cancel",
okType: "primary", okType: "primary",
onOk() { onOk() {
handleBuyProduct(item.code) handleBuyProduct(item.code)
}, },
onCancel() { onCancel() {
console.log("Cancel"); console.log("Cancel");
}, },
}); });
}} }}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
> >
<span style={{color: "black"}}>{item.name}</span> <span style={{color: "black"}}>{item.name}</span>
<br/> <br/>
<span style={{color: "grey", fontSize: 10}}> <span style={{color: "grey", fontSize: 10}}>
{new Intl.NumberFormat("id-ID", { {new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
currency: "IDR", currency: "IDR",
}).format(item?.currentPrice?.mark_up_price)} }).format(item?.currentPrice?.mark_up_price)}
</span> </span>
</Card> </Card>
</Col> </Col>
))} ))}
</Row> </Row>
)} )}
{productData.length !== 0 && ( {productData.length !== 0 && (
<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>

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

@ -1,27 +1,28 @@
import React, {useEffect, useState} from "react"; import React, {useContext, useEffect, useState} from "react";
import {useStore} from "../../utils/useStore"; import {useStore} from "../../utils/useStore";
import {Card, Tabs} from "antd"; import {Card, Tabs} from "antd";
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {Product} from "./Product"; import {Product} from "./Product";
import {LINKS} from "../../routes/app"; import {LINKS} from "../../routes/app";
import {observer} from "mobx-react-lite"; import {observer} from "mobx-react-lite";
import {ModalLoaderContext} from "../../utils/modal";
const {TabPane} = Tabs; const {TabPane} = Tabs;
export const Transaction = observer(() => { export const Transaction = observer(() => {
const store = useStore(); const store = useStore();
const [isLoading, setIsLoading] = useState(false); const modalLoader = useContext(ModalLoaderContext);
// Init // Init
useEffect(() => { useEffect(() => {
const init = async () => { const init = async () => {
try { try {
setIsLoading(true); modalLoader.setLoading(true);
await store.transaction.getDataCategories(); await store.transaction.getDataCategories();
setIsLoading(false); modalLoader.setLoading(false);
} catch (e) { } catch (e) {
setIsLoading(false); modalLoader.setLoading(false);
} }
}; };
@ -35,7 +36,9 @@ export const Transaction = observer(() => {
const handleChangeTabs = async (key) => { const handleChangeTabs = async (key) => {
store.transaction.filterCategory = key; store.transaction.filterCategory = key;
modalLoader.setLoading(true);
await store.transaction.getDataSubCategories(); await store.transaction.getDataSubCategories();
modalLoader.setLoading(false);
}; };
const routeData = [ const routeData = [
@ -50,22 +53,22 @@ export const Transaction = observer(() => {
]; ];
return ( return (
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} text=""/> <BreadcumbComponent data={routeData} text=""/>
<Card> <Card>
<Tabs <Tabs
onChange={handleChangeTabs} onChange={handleChangeTabs}
size="default" size="default"
tabBarGutter="50" tabBarGutter="50"
> >
{store.transaction.dataCategories.map((item, index) => ( {store.transaction.dataCategories.map((item, index) => (
<TabPane tab={item.name} key={item.id}> <TabPane tab={item.name} key={item.id}>
<Product/> <Product/>
</TabPane> </TabPane>
))} ))}
</Tabs> </Tabs>
</Card> </Card>
</div> </div>
); );
}); });