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

Merge

Browse Source
This commit is contained in:
ajat91.sudrajat
2022-01-28 16:00:20 +07:00
parent c1f8a79ad7 f638ca70f7
commit 240a8d8869
75 changed files with 14075 additions and 5269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/pages/App/App.js
View File

@@ -1,12 +1,11 @@
import React, {useEffect} from "react";
import React, {useEffect, useState} from "react";
import {DesktopLayout} from "./DesktopLayout";
import {useMediaQuery} from 'react-responsive';
import {useStore} from "../../utils/useStore";
import {useHistory} from "react-router-dom";
import {ModalLoader} from "../../component/Modal/ModalLoader";
import {ModalLoaderContext} from "../../utils/modal";
export const App = () => {
// TODO: add mobile layout
const store = useStore();
const mediaQuery = {
isDesktop: useMediaQuery({minWidth: 1024}),
@@ -15,11 +14,23 @@ export const App = () => {
isNotMobile: useMediaQuery({minWidth: 768}),
};
const [modalLoading, setModalLoading] = useState(false);
const [modalText, setModalText] = useState(undefined);
const modalContextValue = {
setLoading: setModalLoading,
setText: setModalText,
};
useEffect(() => {
store.ui.setMediaQuery(mediaQuery);
});
// const isMobileDevice = useMediaQuery({
// query: "(min-device-width: 480px)",
// });
return <DesktopLayout/>;
return (
<>
<ModalLoader isOpen={modalLoading} text={modalText}/>
<ModalLoaderContext.Provider value={modalContextValue}>
<DesktopLayout/>
</ModalLoaderContext.Provider>
</>
);
};

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

File diff suppressed because it is too large Load Diff

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

@@ -1,69 +1,264 @@
import React, {useEffect, useState} from "react";
import {Menu} from "antd";
import {Link} from "react-router-dom";
import {HomeOutlined,} from "@ant-design/icons";
import {observer} from "mobx-react-lite";
import {useStore} from "../../utils/useStore";
import React, { useEffect, useState } from "react";
import { Menu } from "antd";
import { Link } from "react-router-dom";
import {
AppstoreOutlined,
DatabaseOutlined,
FileAddOutlined,
FileProtectOutlined,
FileSyncOutlined,
HomeOutlined,
MenuUnfoldOutlined,
ProfileOutlined,
ShoppingCartOutlined,
UserOutlined,
SlackOutlined,
CodepenOutlined,
WindowsOutlined,
AliyunOutlined,
SettingOutlined,
IdcardOutlined,
AppstoreAddOutlined,
DollarCircleOutlined,
PieChartOutlined,
UsergroupAddOutlined,
UnorderedListOutlined,
FormOutlined,
} from "@ant-design/icons";
import { observer } from "mobx-react-lite";
import { useStore } from "../../utils/useStore";
import { LINKS } from "../../routes/app";
const {SubMenu} = Menu;
const { SubMenu } = Menu;
export const MenuList = observer((props) => {
const store = useStore();
useEffect(() => {
}, []);
const store = useStore();
useEffect(() => {}, []);
const [setKeys, setSetKeys] = useState(["dashboard"]);
const [setKeys, setSetKeys] = useState(["dashboard"]);
return (
<Menu
defaultOpenKeys={["sub4"]}
theme="light"
style={{
backgroundColor: "transparent",
borderRightWidth: 0,
fontWeight: 400,
paddingLeft: 0,
}}
onClick={({keyPath, item}) => {
props.closeLeftDrawer();
}}
mode="inline"
selectedKeys={setKeys}
onSelect={({setKeys, item, selectedKeys}) => setSetKeys(selectedKeys)}
overflowedIndicator={0}
forceSubMenuRender={true}
>
<Menu.Item key="home">
<Link to={'/app/home'}>
<HomeOutlined/>
<span>Home</span>
</Link>
</Menu.Item>
{store.authentication.userData.role !== 'Retail' && <Menu.Item key="membership">
<Link to={'/app/membership'}>
<HomeOutlined/>
<span>Membership</span>
</Link>
</Menu.Item>}
{store.authentication.userData.role !== 'Retail' && <Menu.Item key="product">
<Link to={'/app/product'}>
<HomeOutlined/>
<span>Product</span>
</Link>
</Menu.Item>}
{store.authentication.userData.role === 'Retail' && <Menu.Item key="transaction">
<Link to={'/app/transaction'}>
<HomeOutlined/>
<span>Transaction</span>
</Link>
</Menu.Item>}
{/*<Menu.Item key="about">*/}
{/* <Link to={'/app/about'}>*/}
{/* <CalendarOutlined/>*/}
{/* <span>About</span>*/}
{/* </Link>*/}
{/*</Menu.Item>*/}
<Menu.Divider style={{background: "transparent", paddingTop: 15}}/>
</Menu>
);
return (
<Menu
defaultOpenKeys={["sub4"]}
theme="light"
style={{
backgroundColor: "transparent",
borderRightWidth: 0,
fontWeight: 400,
paddingLeft: 0,
}}
onClick={({ keyPath, item }) => {
props.closeLeftDrawer();
}}
mode="inline"
selectedKeys={setKeys}
onSelect={({ setKeys, item, selectedKeys }) => setSetKeys(selectedKeys)}
overflowedIndicator={0}
forceSubMenuRender={true}
>
{store.authentication.userData.role === "Admin" && (
<Menu.Item key="home">
<Link to={LINKS.HOME}>
<HomeOutlined />
<span>Beranda</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role === "Admin Partner" && (
<Menu.Item key="home">
<Link to={LINKS.HOME}>
<HomeOutlined />
<span>Beranda</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role === "Admin" && (
<SubMenu
key="keanggotaan"
icon={<UsergroupAddOutlined />}
title="Keanggotaan"
>
<Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}>
<UnorderedListOutlined />
<span>List Anggota</span>
</Link>
</Menu.Item>
<Menu.Item key="konfirmasi">
<Link to={LINKS.KONFIRMASI}>
<FormOutlined />
<span>Konfirm Retail</span>
</Link>
</Menu.Item>
</SubMenu>
)}
{store.authentication.userData.role === "Supervisor" && (
<SubMenu
key="keanggotaan"
icon={<UsergroupAddOutlined />}
title="Keanggotaan"
>
<Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}>
<UnorderedListOutlined />
<span>List Anggota</span>
</Link>
</Menu.Item>
<Menu.Item key="konfirmasi">
<Link to={LINKS.KONFIRMASI}>
<FormOutlined />
<span>Konfirm Retail</span>
</Link>
</Menu.Item>
</SubMenu>
)}
{/* {store.authentication.userData.role === "Sales" && (
<SubMenu
key="keanggotaan"
icon={<UsergroupAddOutlined />}
title="Keanggotaan"
>
<Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}>
<UnorderedListOutlined />
<span>List Anggota</span>
</Link>
</Menu.Item>
</SubMenu>
)} */}
{/* {store.authentication.userData.role === "Supervisor" && (
<Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}>
<IdcardOutlined />
<span>Keanggotaan</span>
</Link>
</Menu.Item>
)} */}
{store.authentication.userData.role === "Sales" && (
<Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}>
<IdcardOutlined />
<span>Keanggotaan</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role === "Admin" && (
<SubMenu key="config" icon={<SettingOutlined />} title="Config">
<Menu.Item key="partner">
<Link to={LINKS.PARTNER}>
<WindowsOutlined />
<span>Rekanan</span>
</Link>
</Menu.Item>
<Menu.Item key="commision">
<Link to={LINKS.COMMISSION}>
<SlackOutlined />
<span>Komisi</span>
</Link>
</Menu.Item>
<Menu.Item key="supplier">
<Link to={LINKS.SUPPLIER}>
<AppstoreOutlined />
<span>Supplier</span>
</Link>
</Menu.Item>
</SubMenu>
)}
{store.authentication.userData.role === "Admin" && (
<SubMenu
key="product-main"
icon={<AppstoreAddOutlined />}
title="Produk"
>
<Menu.Item key="produk">
<Link to={LINKS.PRODUCT}>
<PieChartOutlined />
<span>Produk</span>
</Link>
</Menu.Item>
{store.authentication.userData.role === "Admin" && (
<Menu.Item key="sub-category">
<Link to={LINKS.SUBCATEGORY}>
<FileSyncOutlined />
<span>Sub Kategori</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role === "Admin" && (
<Menu.Item key="category">
<Link to={LINKS.CATEGORY}>
<FileAddOutlined />
<span>Kategori</span>
</Link>
</Menu.Item>
)}
</SubMenu>
)}
{store.authentication.userData.role === "Admin Partner" && (
<Menu.Item key="retail">
<Link to={LINKS.PRODUCT}>
<PieChartOutlined />
<span>Produk</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role === "Sales" && (
<Menu.Item key="retail">
<Link to={LINKS.PRODUCT}>
<PieChartOutlined />
<span>Produk</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role === "Supervisor" && (
<Menu.Item key="retail">
<Link to={LINKS.PRODUCT}>
<PieChartOutlined />
<span>Produk</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role === "Retail" && (
<Menu.Item key="transaction">
<Link to={LINKS.TRANSACTION}>
<ShoppingCartOutlined />
<span>Transaksi</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role !== "Admin Partner" && (
<SubMenu
key="payback-main"
icon={<DollarCircleOutlined />}
title="Pembayaran"
>
{store.authentication.userData.role !== "Retail" && (
<Menu.Item key="payback-to-user">
<Link to={LINKS.PAYBACK}>
<FileProtectOutlined />
<span>Konfirmasi</span>
</Link>
</Menu.Item>
)}
{store.authentication.userData.role !== "Admin" && (
<Menu.Item key="payback-from-user">
<Link to={LINKS.PAYBACK_CREATED}>
<FileProtectOutlined />
<span>Dibuat oleh Saya</span>
</Link>
</Menu.Item>
)}
</SubMenu>
)}
{store.authentication.userData.role !== "Admin" && (
<Menu.Item key="profile">
<Link to={LINKS.PROFILE}>
<UserOutlined />
<span>Profil</span>
</Link>
</Menu.Item>
)}
<Menu.Divider style={{ background: "transparent", paddingTop: 15 }} />
</Menu>
);
});

79
src/pages/Config/Commission.js Normal file
View File

@@ -0,0 +1,79 @@
import React, {useContext, useEffect, useState} from "react";
import { Button, Card, Col, Input, Row, Tabs ,message} from "antd";
import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { CommissionComponent } from "../../component/CommissionComponent";
import { LINKS } from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
const { TabPane } = Tabs;
const { Search } = Input;
export const Commission = observer(() => {
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
modalLoader.setLoading(true);
//await store.commission.getDataCategories();
await store.commission.getData();
modalLoader.setLoading(false);
} catch (e) {
modalLoader.setLoading(false);
if (e.response?.body?.message) {
message.error(e.response.body.message);
return;
}
message.error(e.message);
}
};
init();
}, []);
const routeData = [
{
route: LINKS.HOME,
name: "Beranda",
},
{
route: LINKS.COMMISSION,
name: <span style={{ fontWeight: "bold" }}>Commission</span>,
},
];
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} />
<Card>
{/* <Row style={{ marginBottom: 20 }}> */}
{/* <Col span={12}>
<Button>
<FilterOutlined />
Filter
</Button>
</Col> */}
{/* <Col span={24} style={{ textAlign: "right" }}>
<Search
placeholder="input search text"
style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}}
/>
<Button onClick={() => (store.commission.visibleModalCommission = true)}>
<PlusSquareOutlined /> New
</Button>
</Col>
</Row> */}
<div style={{marginTop:20}}> <CommissionComponent/></div>
</Card>
</div>
);
});

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

@@ -0,0 +1,76 @@
import React, {useContext, useEffect, useState} from "react";
import {Button, Card, Col, Input, Row, Tabs,message} from "antd";
import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {PartnerComponent} from "../../component/PartnerComponent";
import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
const {Search} = Input;
export const Partner = observer(() => {
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
modalLoader.setLoading(true);
await store.partner.getData();
modalLoader.setLoading(false);
} catch (e) {
modalLoader.setLoading(false);
if (e.response?.body?.message) {
message.error(e.response.body.message);
return;
}
message.error(e.message);
}
};
init();
}, []);
const routeData = [
{
route: LINKS.HOME,
name: "Beranda",
},
{
route: LINKS.PARTNER,
name: <span style={{fontWeight: 'bold'}}>Rekanan</span>,
},
];
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/>
<Card>
<Row style={{marginBottom: 20}}>
{/* <Col span={12}>
<Button>
<FilterOutlined/>
Filter
</Button>
</Col> */}
<Col span={24} style={{textAlign: "right"}}>
{/* <Search
placeholder="input search text"
style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}}
/> */}
<Button onClick={() => store.partner.visibleModalPartner = true}>
<PlusSquareOutlined/> New
</Button>
</Col>
</Row>
<PartnerComponent/>
</Card>
</div>
);
});

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

@@ -0,0 +1,94 @@
import React, {useContext, useEffect, useState} from "react";
import {
Button,
Card,
Col,
Input,
Row,
Tabs,
Form,
message,
Modal,
Select,
} from "antd";
import {
FilterOutlined,
PlusSquareOutlined,
DownloadOutlined,
} from "@ant-design/icons";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { SupplierComponent } from "../../component/SupplierComponent";
import { LINKS } from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
const { Search } = Input;
export const Supplier = observer(() => {
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
modalLoader.setLoading(true);
await store.supplier.getData();
modalLoader.setLoading(false);
} catch (e) {
modalLoader.setLoading(false);
if (e.response?.body?.message) {
message.error(e.response.body.message);
return;
}
message.error(e.message);
}
};
init();
}, []);
const routeData = [
{
route: LINKS.HOME,
name: "Beranda",
},
{
route: LINKS.SUPPLIER,
name: <span style={{ fontWeight: "bold" }}>Supplier</span>,
},
];
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} />
<Card>
<Row style={{ marginBottom: 20 }}>
{/* <Col span={12}>
<Button>
<FilterOutlined />
Filter
</Button>
</Col> */}
<Col span={24} style={{ textAlign: "right" }}>
{/* <Search
placeholder="input search text"
style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 10 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}}
onSearch={(value) => console.log(value)}
/> */}
<Button
onClick={() => (store.supplier.visibleModalSupplier = true)}
>
<PlusSquareOutlined /> New
</Button>
</Col>
</Row>
<SupplierComponent />
</Card>
</div>
);
});

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

@@ -1,25 +1,493 @@
import React from "react";
import {Button, PageHeader} from "antd";
import {store} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import React, { useContext, useEffect } from "react";
import { Button, PageHeader, Card, Row, Col, message, Table } from "antd";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import {
DropboxOutlined,
DollarCircleOutlined,
BarChartOutlined,
} from "@ant-design/icons";
import { ModalLoaderContext } from "../../utils/modal";
import Title from "antd/lib/skeleton/Title";
export const Home = observer(() => {
return <div className={["ppob-container"].join(" ")}>
<PageHeader
const modalLoader = useContext(ModalLoaderContext);
const store = useStore();
useEffect(() => {
const init = async () => {
try {
modalLoader.setLoading(true);
const isAdmin = store.authentication.userData.role === "Admin";
await getData();
await store.membership.getDataBySuperior();
await store.partner.getData();
if (isAdmin) {
await store.transaction.getDataTransaction();
await store.transaction.getDataTransactionB2B();
} else {
await store.transaction.getDataTransactionPartner();
}
await store.role.getData(isAdmin);
modalLoader.setLoading(false);
} catch (e) {
console.error(e);
modalLoader.setLoading(false);
if (e.response?.body?.message) {
message.error(e.response.body.message);
return;
}
message.error(e.message);
}
};
init();
}, []);
const getData = async () => {
store.authentication.userData.role === "Admin"
? await store.membership.getData()
: await store.membership.getDataBySuperior();
};
return (
<div>
{store.ui.mediaQuery.isDesktop &&
store.authentication.userData.role === "Admin" && (
<Row
style={{
padding: 0,
margin: 0,
height: 40,
backgroundColor: "transparent",
marginTop: 30,
marginLeft: 30,
}}
title={"Home"}
>
</PageHeader>
<Button onClick={() => {
store.ui.setTestValue();
}}>{store.ui.testValue}</Button>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aut recusandae velit! Consequatur corporis,
eum fuga, harum incidunt laboriosam minus necessitatibus neque non nostrum pariatur tempore. Dignissimos impedit
rem tempora!
>
<Card
className={"shadow"}
hoverable
title={
<span
style={{
fontSize: 20,
fontStyle: "bold",
textAlign: "center",
}}
>
{store.transaction.dataTransaction.total_transaction}{" "}
Transaksi B2C
</span>
}
style={{
marginLeft: 20,
height: 200,
marginBottom: 10,
borderColor: "salmon",
width: "45%",
}}
>
<Row>
<Row style={{ marginTop: 20 }}>
<Col style={{ marginRight: 40 }}>
<p>
<h4>
Total Penjualan :{" "}
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(
store.transaction.dataTransaction.total_amount
)}
</h4>
<h4>
Total Modal :{" "}
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(
store.transaction.dataTransaction.total_modal
)}
</h4>
</p>
</Col>
<Col>
<p>
<h4>
Total Profit :{" "}
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(
store.transaction.dataTransaction.total_profit
)}
</h4>
<h4>
Total Komisi :{" "}
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(
store.transaction.dataTransaction.total_commission
)}
</h4>
</p>
</Col>
</Row>
</Row>
</Card>
<Card
className={"shadow"}
hoverable
title={
<span
style={{
fontSize: 20,
fontStyle: "bold",
textAlign: "center",
}}
>
{store.transaction.dataTransactionB2B.total_transaction}{" "}
Transaksi B2B
</span>
}
style={{
marginLeft: 20,
height: 200,
marginBottom: 10,
borderColor: "salmon",
width: "45%",
}}
>
<Row>
<Row style={{ marginTop: 20 }}>
<Col style={{ marginRight: 40 }}>
<p>
<h4>
Total Penjualan :{" "}
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(
store.transaction.dataTransactionB2B.total_amount
)}
</h4>
<h4>
Total Modal :{" "}
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(
store.transaction.dataTransactionB2B.total_modal
)}
</h4>
</p>
</Col>
<Col>
<p>
<h4>
Total Profit :{" "}
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(
store.transaction.dataTransactionB2B.total_profit
)}
</h4>
</p>
</Col>
</Row>
</Row>
</Card>
{/*<Card*/}
{/* className={"shadow"}*/}
{/* hoverable*/}
{/* style={{*/}
{/* marginLeft: 20,*/}
{/* height: 200,*/}
{/* marginBottom: 10,*/}
{/* borderColor: "salmon",*/}
{/* width: "30%",*/}
{/* }}*/}
{/*>*/}
{/* <Row>*/}
{/* <PageHeader title={<span>Total Keuntungan B2C</span>}>*/}
{/* <span>*/}
{/* {new Intl.NumberFormat("id-ID", {*/}
{/* style: "currency",*/}
{/* currency: "IDR",*/}
{/* }).format(store.authentication.profileData?.wallet || 0)}*/}
{/* </span>*/}
{/* </PageHeader>*/}
{/* </Row>*/}
{/*</Card>*/}
</Row>
)}
{store.ui.mediaQuery.isDesktop &&
store.authentication.userData.role === "Admin Partner" && (
<Row
style={{
marginTop: 30,
marginLeft: 30,
}}
>
<Card
className={"shadow"}
hoverable
style={{
marginLeft: 20,
height: 200,
marginBottom: 10,
borderColor: "salmon",
width: "45%",
}}
>
<Row>
<PageHeader title={<span>Total Transaksi</span>}>
<p>
<h4>
{
store.transaction.dataTransactionPartner
.total_transaction
}
</h4>
</p>
</PageHeader>
</Row>
</Card>
<Card
className={"shadow"}
hoverable
style={{
marginLeft: 20,
height: 200,
marginBottom: 10,
borderColor: "salmon",
width: "45%",
}}
>
<Row>
<PageHeader title={<span>Total Penjualan</span>}>
<p>
<h4>
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(
store.transaction.dataTransactionPartner.total_amount
)}
</h4>
</p>
</PageHeader>
</Row>
</Card>
</Row>
)}
{store.ui.mediaQuery.isMobile &&
store.authentication.userData.role === "Admin" && (
<Row
style={{
marginTop: 20,
marginLeft: 10,
}}
>
<Card
className={"shadow"}
hoverable
title={
<span
style={{
fontSize: 20,
fontStyle: "bold",
textAlign: "center",
}}
>
{store.transaction.dataTransaction.total_transaction}{" "}
Transaksi B2C
</span>
}
style={{
marginLeft: 10,
height: 220,
marginBottom: 10,
borderColor: "salmon",
width: "90%",
}}
>
<Row>
<Row>
<Col style={{ marginRight: 40 }}>
<p>
<h4>
Total Penjualan :{" "}
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(
store.transaction.dataTransaction.total_amount
)}
</h4>
<h4>
Total Modal :{" "}
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(
store.transaction.dataTransaction.total_modal
)}
</h4>
</p>
</Col>
<Col>
<p>
<h4>
Total Profit :{" "}
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(
store.transaction.dataTransaction.total_profit
)}
</h4>
<h4>
Total Komisi :{" "}
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(
store.transaction.dataTransaction.total_commission
)}
</h4>
</p>
</Col>
</Row>
</Row>
</Card>
<Card
className={"shadow"}
hoverable
title={
<span
style={{
fontSize: 20,
fontStyle: "bold",
textAlign: "center",
}}
>
{store.transaction.dataTransactionB2B.total_transaction}{" "}
Transaksi B2B
</span>
}
style={{
marginLeft: 10,
height: 200,
borderColor: "salmon",
width: "90%",
}}
>
<Row>
<Row>
<Col style={{ marginRight: 40 }}>
<p>
<h4>
Total Penjualan :{" "}
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(
store.transaction.dataTransactionB2B.total_amount
)}
</h4>
<h4>
Total Modal :{" "}
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(
store.transaction.dataTransactionB2B.total_modal
)}
</h4>
</p>
</Col>
<Col>
<p>
<h4>
Total Profit :{" "}
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(
store.transaction.dataTransactionB2B.total_profit
)}
</h4>
</p>
</Col>
</Row>
</Row>
</Card>
</Row>
)}
{store.ui.mediaQuery.isMobile &&
store.authentication.userData.role === "Admin Partner" && (
<Row
style={{
marginTop: 20,
marginLeft: 10,
}}
>
<Card
className={"shadow"}
hoverable
style={{
marginLeft: 10,
height: 200,
marginBottom: 10,
borderColor: "salmon",
width: "90%",
}}
>
<Row>
<PageHeader title={<span>Total Transaksi</span>}>
<p>
<h4>
{
store.transaction.dataTransactionPartner
.total_transaction
}
</h4>
</p>
</PageHeader>
</Row>
</Card>
<Card
className={"shadow"}
hoverable
style={{
marginLeft: 10,
height: 200,
marginBottom: 10,
borderColor: "salmon",
width: "90%",
}}
>
<Row>
<PageHeader title={<span>Total Penjualan</span>}>
<p>
<h4>
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(
store.transaction.dataTransactionPartner.total_amount
)}
</h4>
</p>
</PageHeader>
</Row>
</Card>
</Row>
)}
</div>
);
});

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

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

940
src/pages/Membership/DetailUser.js Normal file
View File

@@ -0,0 +1,940 @@
import React, { useContext, useEffect, useState } from "react";
import {
Button,
Card,
Col,
message,
Row,
Space,
Table,
Typography,
Tabs,
List,
Tag,
Divider,
Image,
Modal,
Form,
DatePicker,
} from "antd";
import { UserOutlined, FilterOutlined } from "@ant-design/icons";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { format, parseISO } from "date-fns";
import { ModalLoaderContext } from "../../utils/modal";
import { useParams } from "react-router-dom";
import { appConfig } from "../../config/app";
import { MembershipModal } from "./MembershipModal";
import moment from "moment";
const { Title, Text } = Typography;
const { TabPane } = Tabs;
export const DetailUser = observer(() => {
const store = useStore();
const [form] = Form.useForm();
const modalLoader = useContext(ModalLoaderContext);
const { id } = useParams();
const [visibleModal, setVisibleModal] = useState(false);
const [initialData, setInitialData] = useState({});
const [confirmLoading, setConfirmLoading] = useState(false);
const [filterStart, setFilterStart] = useState([]);
const [filterEnd, setFilterEnd] = useState([]);
const [visibleHis, setVisibleHis] = useState(true);
useEffect(() => {
(async () => {
modalLoader.setLoading(true);
await getData();
modalLoader.setLoading(false);
})();
return () => {
store.membership.dataDetail = {};
store.transaction.dataHistoryTopUp = [];
store.authentication.dataProfit = [];
store.transaction.dataDetailHistoryTransaction = [];
};
}, []);
const getData = async () => {
const isAdmin = store.authentication.userData.role === "Admin";
await Promise.allSettled([
store.transaction.getDataHistoryTopUp(id),
store.authentication.getProfit(id),
store.authentication.getProfile(),
store.transaction.getDetailHistoryTransaction(id),
store.membership.getDetail(id),
store.role.getData(isAdmin),
]);
};
const changeStatus = async (id, is_active) => {
let status = is_active ? "inactive" : "active";
let status2 = is_active ? "Inactivating" : "Activating";
console.log(status, "status terbaru");
try {
modalLoader.setLoading(true);
const response = await store.membership.changeStatus(id, status);
modalLoader.setLoading(false);
response?.body?.statusCode === 201 || response?.body?.statusCode === 200
? message.success(`Success ${status2} Membership`)
: message.error(`Failed ${status2} Membership`);
await getData();
} catch (err) {
modalLoader.setLoading(false);
message.error(`Failed ${status2} Membership`);
}
};
const withdrawProfit = async (id) => {
try {
modalLoader.setLoading(true);
const response = await store.membership.withdrawProfit(id);
modalLoader.setLoading(false);
response?.body?.statusCode === 201 || response?.body?.statusCode === 200
? message.success(`Success Withdraw Profit`)
: message.error(`Failed Withdraw Profit`);
await getData();
} catch (err) {
modalLoader.setLoading(false);
message.error(`Failed Withdraw Profit`);
}
};
const onSubmit = async (data) => {
data.superior = true;
setConfirmLoading(true);
modalLoader.setLoading(true);
try {
let response;
if (initialData.isChangePassword) {
response = await store.membership.changePassword(initialData.id, data);
} else {
response = await store.membership.update(initialData.id, data);
}
setVisibleModal(false);
if (response?.body?.statusCode === 200) {
message.success(
initialData.isChangePassword
? "Success Change Member Password"
: "Success Update Data Member"
);
} else {
message.error(
initialData.isChangePassword
? "Failed Change Member Password"
: "Failed Update Data Member"
);
}
await getData();
} catch (e) {
modalLoader.setLoading(false);
message.error(
initialData.isChangePassword
? "Failed Update Member Password"
: "Failed Update Data Member"
);
}
modalLoader.setLoading(false);
setConfirmLoading(false);
};
const handleResend = async (id) => {
modalLoader.setLoading(true);
try {
const response = await store.approval.resendUser(id);
console.log(response);
response.body.statusCode !== 201 && response.body.statusCode !== 200
? message.error(response?.body?.message || `Failed Approve`)
: message.success(response?.body?.message || `Success Approve`);
await getData();
} catch (e) {
console.error(e, "apa errornya");
message.error(e.response?.body?.message || "Fail Approve");
}
modalLoader.setLoading(false);
};
const columns = [
{
title: "Amount",
dataIndex: "amount",
key: "amount",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
title: "Transaction Date",
dataIndex: "transaction_date",
key: "transaction_date",
render: (text, record) => {
return (
<Text>
{format(parseISO(record.transaction_date), "dd MMMM yyyy")}
</Text>
);
},
},
];
const column = [
{
title: "Nama Produk",
dataIndex: "name",
key: "name",
},
{
title: "Price",
dataIndex: "price",
key: "price",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
title: "Pembeli",
dataIndex: "buyer",
key: "buyer",
},
{
title: "Tujuan",
dataIndex: "transaction_destination",
key: "transaction_destination",
},
{
title: "Kode Transaksi",
dataIndex: "transaction_code",
key: "transaction_code",
},
{
title: "Status",
dataIndex: "status",
key: "status",
render: (text, record) => {
return (
<Tag
color={
record.status === 1
? "success"
: record.status === 0
? "warning"
: "processing"
}
>
{record.status === 1
? "Success"
: record.status === 0
? "Pending"
: "Failed"}
</Tag>
);
},
},
{
title: "No Seri",
dataIndex: "seri_number",
key: "seri_number",
},
{
title: "IDTrx Mitra",
dataIndex: "partner_transaction_code",
key: "partner_transaction_code",
},
{
title: "Tanggal Transaksi",
dataIndex: "created_at",
key: "created_at",
width: "15%",
render: (text, record) => {
return (
<Text>
{format(parseISO(record.created_at), "dd-MM-yyyy HH:mm:ss")}
</Text>
);
},
},
{
title: "Alasan Gagal",
dataIndex: "failed_reason",
key: "failed_reason",
},
];
const routeData = [
{
route: LINKS.HOME,
name: "Beranda",
},
{
route: LINKS.MEMBERSHIP,
name: <span style={{ fontWeight: "bold" }}>Keanggotaan</span>,
},
{
route: LINKS.USER_DETAIL.replace(":id", id),
name: <span style={{ fontWeight: "bold" }}>Detail User</span>,
},
];
const dataRoute = [
{
route: LINKS.MEMBERSHIP,
name: "Keanggotaan",
},
{
route: LINKS.USER_DETAIL.replace(":id", id),
name: <span style={{ fontWeight: "bold" }}>Detail User</span>,
},
];
const styleSaldoTitle = store.ui.mediaQuery.isDesktop
? {
display: "flex",
justifyContent: "center",
}
: { fontSize: "0.75rem" };
const styleSaldoContent = store.ui.mediaQuery.isDesktop
? {
fontSize: "1.25rem",
display: "flex",
justifyContent: "center",
}
: null;
const data = store.authentication.listImage;
console.log(data, "ini data");
console.log(
store.authentication.dataProfit.userDetail?.image_identity,
"detail"
);
const handleRemoveFilter = async () => {
store.transaction.filterStart = null;
store.transaction.filterEnd = null;
form.resetFields();
setFilterStart([]);
setFilterEnd([]);
await store.transaction.getDetailHistoryTransaction(
store.authentication.dataProfit.id
);
store.transaction.visibleModalFilterTransaction = false;
};
const handleCancelFilter = async () => {
store.transaction.filterStart = null;
store.transaction.filterEnd = null;
store.transaction.visibleModalFilterTransaction = false;
await store.transaction.getDetailHistoryTransaction(
store.authentication.dataProfit.id
);
};
const handleSubmitFilter = async () => {
const data = form.getFieldsValue();
store.transaction.filterStart = moment(data.start_date).format(
"YYYY-MM-DD HH:mm:ss"
);
store.transaction.filterEnd = moment(data.end_date).format(
"YYYY-MM-DD HH:mm:ss"
);
modalLoader.setLoading(true);
await store.transaction.getDetailHistoryTransaction(
store.authentication.dataProfit.id
);
modalLoader.setLoading(false);
store.transaction.filterStart = null;
store.transaction.filterEnd = null;
store.transaction.visibleModalFilterTransaction = false;
};
const footerLayoutFilter = [
<Button
key={"remove"}
onClick={handleRemoveFilter}
style={{
backgroundColor: "#e74e5e",
color: "#fff",
}}
>
Remove Filter
</Button>,
<Button key={"cancel"} onClick={handleCancelFilter}>
Cancel
</Button>,
<Button
key={"submit"}
onClick={handleSubmitFilter}
style={{
backgroundColor: "#4e79e7",
color: "#fff",
}}
>
Apply
</Button>,
];
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent
data={
store.authentication.userData.role === "Admin" ? routeData : dataRoute
}
/>
<Card>
<Row style={{ marginBottom: 10 }}>
<Title strong level={2}>
Detail User
</Title>
<Col
lg={store.authentication.userData.role === "Admin" ? 18 : 17}
xs={store.authentication.userData.role === "Admin" ? 18 : 17}
style={{ textAlign: "right" }}
>
<Space
size="small"
align={"center"}
wrap={true}
style={{ textAlign: "center" }}
>
<Button
type={
store.membership.dataDetail.is_active === true
? "danger"
: "primary"
}
onClick={() =>
changeStatus(
store.membership.dataDetail.id,
store.membership.dataDetail.is_active
)
}
>
{store.membership.dataDetail.is_active === true
? "Inactive"
: "Active"}
</Button>
<Button
onClick={() => {
setInitialData({
id: store.membership.dataDetail.id,
name: store.membership.dataDetail.userDetail.name,
username: store.membership.dataDetail.username,
identity_number:
store.membership.dataDetail.userDetail.identity_number,
image_identity:
store.membership.dataDetail?.userDetail.image_identity,
image_store:
store.membership.dataDetail?.userDetail.image_store,
phone_number:
store.membership.dataDetail.userDetail.phone_number,
roleId: store.membership.dataDetail.roles.id,
isChangePassword: false,
});
console.log(
store.membership.dataDetail.userDetail.identity_number
);
console.log(store.membership.dataDetail.userDetail.id);
console.log(
store.membership.dataDetail.userDetail.image_identity
);
console.log(
store.membership.dataDetail.userDetail.image_store,
"ini store"
);
console.log(store.membership.dataDetail.username);
setVisibleModal(true);
}}
>
Edit
</Button>
<Button
onClick={() => {
setInitialData({
id: store.membership.dataDetail.id,
name: store.membership.dataDetail.userDetail.name,
username: store.membership.dataDetail.username,
phone_number:
store.membership.dataDetail.userDetail.phone_number,
roleId: store.membership.dataDetail.roles.id,
isChangePassword: true,
});
setVisibleModal(true);
}}
>
Ganti Password
</Button>
{((store.authentication.userData.role === "Sales" &&
store.membership.dataDetail.is_rejected === true &&
store.membership.dataDetail.is_active === false) ||
(store.authentication.userData.role === "Supervisor" &&
store.membership.dataDetail.is_rejected === true &&
store.membership.dataDetail.is_active === false)) && (
<Button
style={{
backgroundColor: "#1bb91d",
color: "#fff",
}}
onClick={() => handleResend(store.membership.dataDetail.id)}
>
Resend
</Button>
)}
{store.authentication.userData.role === "Admin" && (
<Button
onClick={() => withdrawProfit(store.membership.dataDetail.id)}
>
Withdraw Profit
</Button>
)}
</Space>
</Col>
</Row>
<Row style={{ marginBottom: 20 }}>
<Col lg={12} xs={24}>
<Row>
<Col span={12}>
<Text strong>Name</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.dataProfit.userDetail?.name}</Text>
</Col>
<Col span={12}>
<Text strong>Username</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.dataProfit.username}</Text>
</Col>
<Col span={12}>
<Text strong>Role</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.dataProfit.roles?.name}</Text>
</Col>
<Col span={12}>
<Text strong>Phone Number</Text>
</Col>
<Col span={12}>
<Text>
{store.authentication.dataProfit.userDetail?.phone_number}
</Text>
</Col>
<Col span={12}>
<Text strong>Id Number</Text>
</Col>
<Col span={12}>
<Text>
{store.authentication.dataProfit.userDetail?.identity_number}
</Text>
</Col>
<Col span={12}>
<Text strong>Status</Text>
</Col>
<Col span={12}>
<Text>
{store.authentication.dataProfit.is_active === true
? "Active"
: "Inactive"}
</Text>
</Col>
{store.authentication.userData.role === "Admin" &&
store.authentication.dataProfit.roles?.name !==
"Admin Partner" && (
<Row>
<Col span={12}>
<Text strong>Foto Identitas</Text>
</Col>
<Col span={12}></Col>
<Col span={12}>
<Text>
<Image
src={
store.authentication.dataProfit.userDetail
?.image_identity
? `${appConfig.apiUrl}/config/image/${store.authentication.dataProfit.userDetail?.image_identity}`
: "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
}
style={{ width: "10vw" }}
/>
</Text>
</Col>
{store.authentication.dataProfit.roles?.name ===
"Retail" && (
<Col span={24}>
<Text strong>Foto Toko</Text>
<Text>
<Row>
{store.authentication.listImage
? store.authentication.listImage.map(
(item, index) => (
<Image
key={index}
src={
item
? `${appConfig.apiUrl}/config/image/${item}`
: "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
}
style={{ width: "10vw", marginRight: 15 }}
/>
)
)
: ""}
</Row>
</Text>
</Col>
)}
</Row>
)}
{store.authentication.userData.role === "Sales" && (
<Row>
<Col span={12}>
<Text strong>Foto Identitas</Text>
</Col>
<Col span={12}></Col>
<Col span={12}>
<Text>
<Image
src={
store.authentication.dataProfit.userDetail
?.image_identity
? `${appConfig.apiUrl}/config/image/${store.authentication.dataProfit.userDetail?.image_identity}`
: "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
}
style={{ width: "10vw" }}
/>
</Text>
</Col>
<Col span={24}>
<Text strong>Foto Toko</Text>
<Text>
<Row>
{store.authentication.listImage
? store.authentication.listImage.map(
(item, index) => (
<Image
key={index}
src={
item
? `${appConfig.apiUrl}/config/image/${item}`
: "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
}
style={{ width: "10vw", marginRight: 15 }}
/>
)
)
: ""}
</Row>
</Text>
</Col>
</Row>
)}
{store.authentication.userData.role === "Supervisor" && (
<Row>
<Col span={12}>
<Text strong>Foto Identitas</Text>
</Col>
<Col span={12}></Col>
<Col span={12}>
<Text>
<Image
src={
store.authentication.dataProfit.userDetail
?.image_identity
? `${appConfig.apiUrl}/config/image/${store.authentication.dataProfit.userDetail?.image_identity}`
: "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
}
style={{ width: "10vw" }}
/>
</Text>
</Col>
</Row>
)}
</Row>
</Col>
<Col lg={12} xs={24}>
<Row>
<Col lg={24} xs={24}>
<Row>
<Col span={store.ui.mediaQuery.isMobile ? 24 : 10}>
<Row justify={"center"}>
<Col lg={12} xs={12}>
<Title strong level={3} style={styleSaldoTitle}>
Saldo
</Title>
</Col>
<Col lg={24} xs={12}>
<Text style={styleSaldoContent}>
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(
store.authentication.dataProfit.wallet || 0
)}
</Text>
</Col>
<Col></Col>
</Row>
</Col>
<Col span={store.ui.mediaQuery.isMobile ? 24 : 10}>
<Row justify={"center"}>
<Col lg={12} xs={12}>
<Title strong level={3} style={styleSaldoTitle}>
Profit
</Title>
</Col>
<Col lg={24} xs={12}>
<Text style={styleSaldoContent}>
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(
store.authentication.dataProfit?.profit || 0
)}
</Text>
</Col>
<Col></Col>
</Row>
</Col>
</Row>
</Col>
</Row>
</Col>
</Row>
<Row>
<Col span={24}>
<Tabs defaultActiveKey="1">
<TabPane tab="History Top Up" key="1">
<Table
key="1"
hasEmpty
columns={columns}
dataSource={store.transaction.dataHistoryTopUp}
bordered
pagination={{
pageSize: store.transaction.pageSizeHistoryTransaction,
total: store.transaction.total_dataHistoryTransaction,
current: store.transaction.pageHistoryTransaction + 1,
showSizeChanger: true,
simple: false,
}}
onChange={async (page) => {
let pageNumber = page.current;
store.transaction.pageSize = page.pageSize;
store.transaction.page = pageNumber - 1;
modalLoader.setLoading(true);
await getData();
modalLoader.setLoading(false);
}}
/>
</TabPane>
<TabPane tab="History Transaction" key="2">
{store.ui.mediaQuery.isDesktop && (
<div>
<Button
style={{ marginBottom: "1rem", marginLeft: 5 }}
onClick={() => {
store.transaction.visibleModalFilterTransaction = true;
}}
>
<FilterOutlined />
Filter
</Button>
<Table
key="1"
hasEmpty
scroll={{ x: 1300 }}
columns={column}
dataSource={
store.transaction.dataDetailHistoryTransactionDetailUser
}
bordered
pagination={{
pageSize: store.transaction.pageSize,
total: store.transaction.total_data,
current: store.transaction.page + 1,
showSizeChanger: true,
simple: false,
}}
onChange={async (page) => {
let pageNumber = page.current;
store.transaction.pageSize = page.pageSize;
store.transaction.page = pageNumber - 1;
modalLoader.setLoading(true);
await getData();
modalLoader.setLoading(false);
}}
/>
</div>
)}
{store.ui.mediaQuery.isMobile && (
<div>
<Button
style={{ marginBottom: "1rem" }}
onClick={() => {
store.transaction.visibleModalFilterTransaction = true;
}}
>
<FilterOutlined />
Filter
</Button>
<List
itemLayout="horizontal"
position={"top"}
pagination={{
onChange: async (page, pageSize) => {
store.transaction.pageSize = pageSize;
store.transaction.page = page - 1;
modalLoader.setLoading(true);
await getData();
modalLoader.setLoading(false);
},
pageSize: store.transaction.pageSize,
total: store.transaction.total_data,
current: store.transaction.page + 1,
style: { marginBottom: "1rem", marginRight: "1rem" },
}}
dataSource={
store.transaction.dataDetailHistoryTransactionDetailUser
}
style={{ padding: 0 }}
renderItem={(item) => {
return (
<div>
<List.Item
key={item.id}
style={{
backgroundColor: "#ffffff",
paddingTop: 0,
paddingBottom: 0,
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
}}
>
<List.Item.Meta
className={["cariparkir-container"].join(" ")}
title={item.name}
description={
<div style={{}}>
<p>
<small>Pembeli : {item.buyer}</small>{" "}
<br />
<small>Price : {item.price}</small> <br />
<small>
Tujuan : {item.transaction_destination}
</small>{" "}
<br />
<small>
Kode Transaksi : {item.transaction_code}
</small>{" "}
<br />
<small>
Status :{" "}
{
<Tag
color={
item.status === 1
? "success"
: item.status === 0
? "warning"
: "processing"
}
>
{item.status === 1
? "Success"
: item.status === 0
? "Pending"
: "Failed"}
</Tag>
}
</small>{" "}
<br />
<small>
No.Seri : {item.seri_number}
</small>{" "}
<br />
<small>
IDTrx Mitra :{" "}
{item.partner_transaction_code}
</small>{" "}
<br />
<small>
Transaction Date :{" "}
{format(
parseISO(item.created_at),
"dd-MM-yyyy hh:mm:ss"
)}
</small>{" "}
<br />
</p>
</div>
}
/>
</List.Item>
<Divider plain style={{ margin: 0 }} />
</div>
);
}}
/>
</div>
)}
</TabPane>
</Tabs>
</Col>
</Row>
<div />
</Card>
<MembershipModal
visible={visibleModal}
confirmLoading={confirmLoading}
initialData={initialData}
onCreate={async (data) => {
onSubmit(data);
}}
onCancel={() => {
setInitialData({});
setVisibleModal(false);
}}
/>
<Modal
visible={store.transaction.visibleModalFilterTransaction}
title={"Filter"}
footer={footerLayoutFilter}
onCancel={async () => {
//form.resetFields();
store.transaction.filterStart = null;
store.transaction.filterEnd = null;
store.transaction.visibleModalFilterTransaction = false;
await store.transaction.getDetailHistoryTransaction();
}}
>
<Row>
<Col span={24}>
<Form layout="vertical" name="filter" form={form}>
<Form.Item
name="start_date"
label="Dari"
rules={[{ required: true, message: "Please input Date!" }]}
>
<DatePicker style={{ width: "100%" }} />
</Form.Item>
<Form.Item
name="end_date"
label="Sampai"
rules={[{ required: true, message: "Please input Date!" }]}
>
<DatePicker style={{ width: "100%" }} />
</Form.Item>
</Form>
</Col>
</Row>
</Modal>
</div>
);
});

74
src/pages/Membership/FilterUser.js Normal file
View File

@@ -0,0 +1,74 @@
import React from "react";
import {
Modal,
Select,
Row,
Title,
Col,
Option,
} from "antd";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
export const FilterUser = observer(() => {
const store = useStore();
return (
<Modal
visible={store.membership.visibleModalFilterMembership}
title={"Filter"}
//footer={footerLayoutFilter}
>
<Row>
<Col span={24}>
<Title level={5} type={"secondary"} strong>
Filter Supplier
</Title>
<Select
mode={"multiple"}
placeholder="Choose Supplier"
style={{ marginBottom: "20px", width: "100%" }}
>
{store.supplier.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 Categories
</Title>
<Select
mode={"multiple"}
placeholder="Choose Category"
style={{ marginBottom: "20px", width: "100%" }}
value={store.product.filterCategory || []}
>
{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"
style={{ marginBottom: "20px", width: "100%" }}
>
{store.product.dataSubCategories.map((item) => (
<Option value={item.id} key={item.id}>
{item.name}
</Option>
))}
</Select>
</Col>
</Row>
</Modal>
);
});

473
src/pages/Membership/Konfirmasi.js Normal file
View File

@@ -0,0 +1,473 @@
import React, { useContext, useEffect, useState } from "react";
import {
Button,
Card,
Col,
Divider,
Image,
Input,
List,
message,
Modal,
Row,
Space,
Table,
Tag,
Select,
Typography,
DatePicker,
Form,
Divinder,
} from "antd";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import {
CheckCircleOutlined,
CheckOutlined,
CloseOutlined,
FilterOutlined,
StopOutlined,
} from "@ant-design/icons";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import { ModalLoaderContext } from "../../utils/modal";
import { appConfig } from "../../config/app";
import { capitalize } from "lodash";
import { PAYBACK_STATUS } from "../../constants/payback";
import moment from "moment";
import { useHistory } from "react-router-dom";
export const Konfirmasi = observer(() => {
const history = useHistory();
const { Option } = Select;
const { Title } = Typography;
const [form] = Form.useForm();
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
const [filterMembership, setFilterMembership] = useState([]);
const [filterSubCategories, setFilterSubCategories] = useState([]);
const [visibleModalToko, setVisibleModalToko] = useState(false);
const [VisibleModalIdentitas, setVisibleModalIdentitas] = useState(false);
const [toko, setToko] = useState({});
const [identitas, setIdentitas] = useState({});
useEffect(() => {
const init = async () => {
try {
modalLoader.setLoading(true);
await store.approval.getData();
modalLoader.setLoading(false);
} catch (e) {
modalLoader.setLoading(false);
if (e.response?.body?.message) {
message.error(e.response.body.message);
return;
}
message.error(e.message);
}
};
init();
}, []);
const columns = [
{
title: "Name",
dataIndex: "username",
key: "username",
},
{
title: "Foto Identitas",
dataIndex: ["user_detail", "image_identity"],
key: "user_detail.image_identity",
render: (text, record) =>
record.user_detail?.image_identity ? (
<Image
src={`${appConfig.apiUrl}/config/image/${text}`}
style={{ width: "5vw" }}
alt={record.image_identity}
/>
) : (
<Image
src="https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
style={{ width: "5vw" }}
/>
),
},
{
title: "Foto Toko",
render: (text, record) =>
record.roles?.name !== "Sales" &&
record.user_detail?.image_store !== "[]" &&
record.user_detail?.image_store !== '""' ? (
<Button
onClick={async () => {
setToko(record);
setVisibleModalToko(true);
}}
>
Lihat Foto
</Button>
) : (
""
),
},
{
title: "Action",
dataIndex: "amount",
key: "action",
width: "10%",
render: (text, record) =>
record.is_active === false ? (
<Space size="small">
<Button
onClick={async () => {
Modal.confirm({
title: `Are you sure Accept this submission?`,
icon: <CheckOutlined />,
okText: "Accept",
cancelText: "Cancel",
okType: "primary",
onOk() {
handleApprove(record.id);
console.log(record.id);
},
onCancel() {
console.log("Cancel");
},
});
}}
icon={<CheckCircleOutlined />}
style={{
backgroundColor: "#1bb91d",
color: "#fff",
borderColor: "#1bb91d",
}}
>
Accept
</Button>
<Button
onClick={async () => {
Modal.confirm({
title: `Are you sure Reject this submission?`,
icon: <StopOutlined />,
okText: "Reject",
cancelText: "Cancel",
okType: "primary",
onOk() {
handleReject(record.id);
},
onCancel() {
console.log("Cancel");
},
});
}}
icon={<CloseOutlined />}
style={{
backgroundColor: "#ff1c1c",
color: "#fff",
borderColor: "#ff1c1c",
}}
>
Reject
</Button>
</Space>
) : (
<Tag
color={record.is_active === false ? "red" : "cyan"}
style={{ color: "#4F566B" }}
>
{record.is_active === false ? "Tidak Aktif" : "Aktif"}
</Tag>
),
},
];
const routeData = [
{
route: LINKS.HOME,
name: "Beranda",
},
{
route: LINKS.KONFIRMASI,
name: <span style={{ fontWeight: "bold" }}>Konfirmasi Retail</span>,
},
];
const dataRoute = [
{
route: LINKS.PAYBACK,
name: "Konfirmasi Retail",
},
];
const handleApprove = async (id) => {
modalLoader.setLoading(true);
try {
const response = await store.approval.approveUser(id);
console.log(response);
response.body.statusCode !== 201 && response.body.statusCode !== 200
? message.error(response?.body?.message || `Failed Approve`)
: message.success(response?.body?.message || `Success Approve`);
} catch (e) {
console.error(e, "apa errornya");
message.error(e.response?.body?.message || "Fail Approve");
}
modalLoader.setLoading(false);
};
const handleReject = async (id) => {
modalLoader.setLoading(true);
try {
const response = await store.approval.rejectUser(id);
console.log(response);
response.body.statusCode !== 201 && response.body.statusCode !== 200
? message.error(response?.body?.message || `Failed Reject`)
: message.success(response?.body?.message || `Success Reject`);
} catch (e) {
console.error(e, "apa errornya");
message.error(e.response?.body?.message || "Fail Approve");
}
modalLoader.setLoading(false);
};
//if (store.approval.user_detail.image_store === []) delete columns[2];
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent
data={
store.authentication.userData.role === "Admin" ? routeData : dataRoute
}
/>
<Card>
<div style={{ marginTop: 30 }}>
{store.ui.mediaQuery.isDesktop && (
<Table
key="1"
hasEmpty
columns={columns}
dataSource={store.approval.data}
bordered
pagination={{
pageSize: store.approval.pageSize,
total: store.approval.total_data,
current: store.approval.pageSize + 1,
showSizeChanger: true,
simple: false,
}}
onChange={async (page) => {
let pageNumber = page.current;
store.approval.pageSize = page.pageSize;
store.approval.page = pageNumber - 1;
modalLoader.setLoading(true);
await store.approval.getData();
modalLoader.setLoading(false);
}}
/>
)}
{store.ui.mediaQuery.isMobile && (
<List
itemLayout="horizontal"
position={"top"}
pagination={{
onChange: async (page) => {
store.approval.pageSize = page.pageSize;
store.approval.page = page.current - 1;
modalLoader.setLoading(true);
await store.approval.getData();
modalLoader.setLoading(false);
},
pageSize: store.approval.pageSize,
total: store.approval.total_data,
current: store.approval.page + 1,
style: { marginBottom: "1rem", marginRight: "1rem" },
}}
dataSource={store.approval.data}
style={{ padding: 0 }}
renderItem={(item) => {
return (
<div>
<List.Item
key={item.id}
style={{
backgroundColor: "#ffffff",
paddingTop: 0,
paddingBottom: 0,
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
}}
>
<List.Item.Meta
className={[""].join(" ")}
description={
<div style={{}}>
<p>
<b>Username: {item.username}</b>
<br />
{item.is_active === false ? (
<Space size="small">
<Button
onClick={async () => {
Modal.confirm({
title: `Are you sure Accept this submission?`,
icon: <CheckOutlined />,
okText: "Accept",
cancelText: "Cancel",
okType: "primary",
onOk() {
handleApprove(item.id);
},
onCancel() {
console.log("Cancel");
},
});
}}
icon={<CheckCircleOutlined />}
style={{
backgroundColor: "#1bb91d",
color: "#fff",
borderColor: "#1bb91d",
}}
>
Accept
</Button>
<Button
onClick={async () => {
Modal.confirm({
title: `Are you sure Reject this submission?`,
icon: <StopOutlined />,
okText: "Reject",
cancelText: "Cancel",
okType: "primary",
onOk() {
handleReject(item.id);
},
onCancel() {
console.log("Cancel");
},
});
}}
icon={<CloseOutlined />}
style={{
backgroundColor: "#ff1c1c",
color: "#fff",
borderColor: "#ff1c1c",
}}
>
Reject
</Button>
</Space>
) : (
<Tag
color={
item.is_active === false ? "red" : "cyan"
}
style={{ color: "#4F566B" }}
>
{item.is_active === false
? "Tidak Aktif"
: "Aktif"}
</Tag>
)}
{item.user_detail?.image_identity !== "" ? <Button
style={
item.is_active === true
? {
marginTop: 5,
}
: { marginLeft: 10, marginTop: 5 }
}
onClick={async () => {
setIdentitas(item);
setVisibleModalIdentitas(true);
}}
>
Foto Identitas
</Button>: ""}
{item.user_detail?.image_store !== '""' ? (
<Button
style={
item.is_active === true
? {
marginLeft: 10,
}
: { marginTop: 10 }
}
onClick={async () => {
setToko(item);
setVisibleModalToko(true);
}}
>
Foto Toko
</Button>
) : (
""
)}
</p>
</div>
}
/>
<div style={{ marginRight: 16 }}></div>
</List.Item>
<Divider plain style={{ margin: 0 }} />
</div>
);
}}
/>
)}
</div>
</Card>
<Modal
visible={
visibleModalToko === true ? visibleModalToko : VisibleModalIdentitas
}
okText={"Confirm"}
onCancel={() => {
form.resetFields();
setVisibleModalToko(false);
setVisibleModalIdentitas(false);
}}
width={1000}
footer={false}
>
{visibleModalToko === true ? (
<Row>
{JSON.parse(toko.user_detail.image_store).map((gmbr, idx) => (
<Card
style={
store.ui.mediaQuery.isDesktop
? {
width: "20vw",
borderColor: "salmon",
marginLeft: "10px",
}
: {
width: "75vw",
borderColor: "salmon",
marginBottom: "10px",
}
}
>
<Image
src={`${appConfig.apiUrl}/config/image/${gmbr}`}
alt={idx}
preview={false}
/>
</Card>
))}
</Row>
) : (
<Image
src={`${appConfig.apiUrl}/config/image/${identitas.user_detail?.image_identity}`}
alt="No image"
preview={false}
/>
)}
</Modal>
</div>
);
});

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

@@ -1,58 +1,199 @@
import React, {useEffect, useState} from "react";
import {Button, Card, Col, Divider, Input, List, message, Modal, Row, Space, Table, Tag,} from "antd";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {ExclamationCircleOutlined, FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
import {MembershipModal} from "./MembershipModal";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
const {Search} = Input;
import React, { useContext, useEffect, useState } from "react";
import {
Button,
Card,
Col,
Divider,
Form,
InputNumber,
List,
message,
Modal,
Row,
Space,
Table,
Tag,
Select,
Option,
Typography,
} from "antd";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import {
DownloadOutlined,
PlusSquareOutlined,
FilterOutlined,
} from "@ant-design/icons";
import { MembershipModal } from "./MembershipModal";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import { useHistory } from "react-router-dom";
import { ModalLoaderContext } from "../../utils/modal";
export const Membership = observer(() => {
const history = useHistory();
const { Option } = Select;
const { Title } = Typography;
const [form] = Form.useForm();
const store = useStore();
const [visibleModal, setVisibleModal] = useState(false);
const [isVisibleTopUpModal, setIsVisibleTopUpModal] = useState(false);
const [destination, setDestination] = useState(null);
const [initialData, setInitialData] = useState({});
const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const modalLoader = useContext(ModalLoaderContext);
const [filterMembership, setFilterMembership] = useState([]);
const [filterPartner, setFilterPartner] = useState([]);
useEffect(() => {
const init = async () => {
try {
setIsLoading(true);
modalLoader.setLoading(true);
const isAdmin = store.authentication.userData.role === "Admin";
await getData();
await store.membership.getData();
await store.role.getData();
setIsLoading(false);
await store.membership.getDataBySuperior();
await store.partner.getData();
await store.role.getData(isAdmin);
modalLoader.setLoading(false);
} catch (e) {
setIsLoading(false);
console.error(e);
modalLoader.setLoading(false);
if (e.response?.body?.message) {
message.error(e.response.body.message);
return;
}
message.error(e.message);
}
};
init();
}, []);
const getData = async () => {
store.authentication.userData.role === "Admin"
? await store.membership.getData()
: await store.membership.getDataBySuperior();
};
const handleRemoveFilter = async () => {
store.membership.filterMembership = null;
store.membership.filterPartner = null;
setFilterMembership([]);
setFilterPartner([]);
store.membership.visibleModalFilterMembership = false;
await store.membership.getData();
};
const handleCancelFilter = async () => {
store.membership.filterMembership = null;
store.membership.filterPartner = null;
store.membership.visibleModalFilterMembership = false;
await store.membership.getData();
};
const handleSubmitFilter = async () => {
store.membership.filterMembership = filterMembership;
store.membership.filterPartner = filterPartner;
modalLoader.setLoading(true);
await store.membership.getData();
modalLoader.setLoading(false);
setFilterMembership([]);
setFilterPartner([]);
store.membership.visibleModalFilterMembership = false;
};
const footerLayoutFilter = [
<Button
key={"remove"}
onClick={handleRemoveFilter}
style={{
backgroundColor: "#e74e5e",
color: "#fff",
}}
>
Remove Filter
</Button>,
<Button key={"cancel"} onClick={handleCancelFilter}>
Cancel
</Button>,
<Button
key={"submit"}
onClick={handleSubmitFilter}
style={{
backgroundColor: "#4e79e7",
color: "#fff",
}}
>
Apply
</Button>,
];
const handleCancelTransaction = () => {
setIsVisibleTopUpModal(false);
setDestination(null);
};
const handleSubmitTransaction = async (data) => {
modalLoader.setLoading(true);
try {
data.destination = destination;
if (data.amount) {
data = {
...data,
amount: Number(data.amount),
};
}
let response = null;
(await store.authentication.userData.role) === "Admin"
? (response = await store.transaction.distributeAdmin(data))
: (response = await store.transaction.distribute(data));
response?.body?.statusCode === 201
? message.success("Sukses Top Up")
: message.error("Saldo Tidak Mencukupi");
modalLoader.setLoading(false);
await getData();
} catch (e) {
console.log(e, "apa errornya");
modalLoader.setLoading(false);
message.error("Gagal Top Up");
}
setConfirmLoading(false);
setIsVisibleTopUpModal(false);
form.resetFields();
setDestination(null);
};
const columns = [
{
title: "Name",
dataIndex: "username",
key: "username",
dataIndex: "name",
key: "name",
render: (text, record) => record?.name ?? record?.username,
},
{
title: "Username",
dataIndex: "username",
key: "username",
render: (text, record) => record?.name ?? record?.username,
},
{
title: "Status",
dataIndex: "status",
key: "status",
render: (text, record) => (
<Tag
color={record?.isActive === true ? "processing" : "#E3E8EE"}
style={{ color: "#4F566B" }}
>
{record?.isActive === true ? " ACTIVE" : "INACTIVE"}
</Tag>
),
title: "Role",
dataIndex: ["roles", "name"],
key: "role",
},
{
title: "Saldo",
dataIndex: ["coa", "amount"],
key: ["coa", "amount"],
width: "20%",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
title: "Action",
@@ -61,21 +202,23 @@ export const Membership = observer(() => {
<Space size="middle">
<Button
onClick={() => {
setVisibleModal(true);
setInitialData({
...record,
roleId: record.roles.id,
});
setDestination(record?.id);
console.log(record?.id);
setIsVisibleTopUpModal(true);
}}
>
Edit
<DownloadOutlined /> Top Up Saldo
</Button>
<Button
onClick={async () => {
handleDelete(record.id);
await store.transaction.getDataHistoryTopUp(record.id);
await store.transaction.getDetailHistoryTransaction(record.id);
await store.authentication.getProfit(record.id);
history.push(LINKS.USER_DETAIL.replace(":id", record.id));
console.log(record.id);
}}
>
Delete
Detail
</Button>
</Space>
),
@@ -84,87 +227,130 @@ export const Membership = observer(() => {
const routeData = [
{
route: "/app/home",
name: "Home",
route: LINKS.HOME,
name: "Beranda",
},
{
route: "/app/membership",
name: <span style={{ fontWeight: "bold" }}>Membership</span>,
route: LINKS.MEMBERSHIP,
name: <span style={{ fontWeight: "bold" }}>Keanggotaan</span>,
},
];
const onSubmit = async (data) => {
const dataRoute = [
{
route: LINKS.MEMBERSHIP,
name: "Keanggotaan",
},
];
const onSubmit = async (data, image, imageStore) => {
data.superior = true;
console.log(imageStore, "Apa imageStore");
if (!imageStore) {
imageStore = [];
}
if (initialData.id) {
data.image_identity = image;
data.image_store = imageStore;
}
if (initialData.id) {
setInitialData({});
setConfirmLoading(true);
modalLoader.setLoading(true);
try {
await store.membership.update(initialData.id, data);
message.success("Success Update Data Member");
await store.membership.getData();
console.log(data, "edit data");
const request = {
...data,
image_identity: image,
image_store: imageStore,
};
await store.membership.update(initialData.id, request);
console.log(data, "edit data");
message.success(
initialData.isChangePassword
? "Success Change Member Password"
: "Success Update Data Member"
);
await getData();
modalLoader.setLoading(false);
} catch (e) {
message.error("Failed Update Data Member");
modalLoader.setLoading(true);
message.error(
initialData.isChangePassword
? "Failed Update Member Password"
: "Failed Update Data Member"
);
}
setConfirmLoading(false);
setVisibleModal(false);
} else {
setInitialData({});
setConfirmLoading(true);
modalLoader.setLoading(true);
try {
await store.membership.create(data);
message.success("Success Add New Member");
await store.membership.getData();
console.log(data, "data member");
const request = {
...data,
image_identity: image,
image_store: JSON.stringify(imageStore),
};
const response = await store.membership.create(request);
response?.body?.statusCode === 201 || response?.body?.statusCode === 200
? message.success(
response?.body?.message || "Berhasil Tambah Member Baru"
)
: message.error(response?.body?.error || "Gagal");
await getData();
} catch (e) {
console.log(e, "apa errornya");
message.error("Failed Add Member");
message.error(e.response?.body?.message || "Gagal Tambah Member Baru");
}
modalLoader.setLoading(false);
setConfirmLoading(false);
setVisibleModal(false);
setInitialData({});
form.resetFields();
}
};
const handleDelete = (record) => {
Modal.confirm({
title: "Are you sure reject this record?",
icon: <ExclamationCircleOutlined />,
okText: "Yes",
okType: "primary",
cancelText: "Cancel",
onOk() {
try {
//TODO: minta apinya ke ka ilham ya, jangan di uncomment kalo pake api reconcile, nanti beneran ke apus datanya
// await store.membership.delete(record.id)
message.success("Success Delete Data");
} catch (e) {
message.error("Failed Delete Data");
}
},
onCancel() {
console.log("Cancel");
},
});
};
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} />
<BreadcumbComponent
data={
store.authentication.userData.role === "Admin" ? routeData : dataRoute
}
/>
<Card>
<div>
<Row style={{ marginBottom: 20 }}>
<Col span={12}>
<Button>
<FilterOutlined/>
Filter
</Button>
{store.authentication.userData.role === "Admin" && (
<Button
onClick={() => {
store.membership.visibleModalFilterMembership = true;
}}
>
<FilterOutlined />
Filter
</Button>
)}
</Col>
<Col span={12} style={{textAlign: "right"}}>
<Search
placeholder="input search text"
style={{width: 200, marginRight: 10}}
/>
<Button onClick={() => {
setInitialData({});
setVisibleModal(true);
}}>
<PlusSquareOutlined/> New
<Col span={12} style={{ textAlign: "right" }}>
{/* <Search
placeholder="input search text"
style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}}
/> */}
<Button
onClick={() => {
setInitialData({});
setVisibleModal(true);
}}
>
<PlusSquareOutlined /> New
</Button>
</Col>
</Row>
@@ -172,23 +358,32 @@ export const Membership = observer(() => {
<Table
key="1"
hasEmpty
size={"small"}
columns={columns}
dataSource={store.membership.data}
bordered
// pagination={{
// total: store.membership.total_data,
// current: store.membership.page,
// pageSize: store.membership.pageSize,
// simple: true
// }}
// onChange={(page) => {
// store.membership.pageSize = page.pageSize;
// store.membership.page = page.current;
// store.membership.getData();
// }}
// current={store.membership.page}
// loading={store.membership.pageSize}
style={{ cursor: "pointer" }}
dataSource={
store.authentication.userData.role === "Admin"
? store.membership.dataMember
: store.membership.data
}
pagination={{
pageSize: store.membership.pageSize,
total:
store.authentication.userData.role === "Admin"
? store.membership.dataTotal
: store.membership.total_data,
current: store.membership.page + 1,
showSizeChanger: true,
simple: false,
}}
onChange={async (page) => {
let pageNumber = page.current;
store.membership.pageSize = page.pageSize;
store.membership.page = pageNumber - 1;
modalLoader.setLoading(true);
await store.membership.getData();
await getData();
modalLoader.setLoading(false);
}}
/>
)}
@@ -197,17 +392,26 @@ export const Membership = observer(() => {
itemLayout="horizontal"
position={"top"}
pagination={{
onChange: (page) => {
store.membership.pageSize = page.pageSize;
store.membership.page = page.current;
store.membership.getData();
onChange: async (page, pageSize) => {
store.membership.pageSize = pageSize;
store.membership.page = page - 1;
modalLoader.setLoading(true);
await getData();
modalLoader.setLoading(false);
},
pageSize: store.membership.pageSize,
total: store.membership.total_data,
current: store.membership.page,
total:
store.authentication.userData.role === "Admin"
? store.membership.dataTotal
: store.membership.total_data,
current: store.membership.page + 1,
style: { marginBottom: "1rem", marginRight: "1rem" },
}}
dataSource={store.membership.data}
dataSource={
store.authentication.userData.role === "Admin"
? store.membership.dataMember
: store.membership.data
}
style={{ padding: 0 }}
renderItem={(item) => {
return (
@@ -225,12 +429,37 @@ export const Membership = observer(() => {
}}
>
<List.Item.Meta
className={["cariparkir-container"].join(" ")}
title={item.username}
className={[""].join(" ")}
title={item.user_detail?.name}
description={
<div style={{}}>
<p>
<small>Username : {item.username}</small> <br />
<small>Role : {item.roles?.name}</small> <br />
<small>Saldo : {item.coa?.amount}</small> <br />
<Button
style={{ marginRight: 10, marginTop: 7 }}
onClick={() => {
setDestination(item?.id);
console.log(item?.id);
setIsVisibleTopUpModal(true);
}}
>
<DownloadOutlined /> Top Up Saldo
</Button>
<Button
onClick={async () => {
await store.transaction.getDataHistoryTopUp(
item.id
);
history.push(
LINKS.USER_DETAIL.replace(":id", item.id)
);
console.log(item.id);
}}
>
Detail
</Button>
</p>
</div>
}
@@ -242,7 +471,16 @@ export const Membership = observer(() => {
margin: 0,
}}
>
{item.username}
{/* <Button
type={
item?.isActive === true ? "danger" : "primary"
}
onClick={() =>
changeStatus(item?.id, item?.isActive)
}
>
{item?.isActive === true ? "Inactive" : "Active"}
</Button> */}
</p>
</div>
</List.Item>
@@ -254,18 +492,110 @@ export const Membership = observer(() => {
)}
</div>
</Card>
<Modal
visible={isVisibleTopUpModal}
title="Top Up Saldo"
okText="Top Up"
cancelText="Cancel"
onCancel={() => {
form.resetFields();
handleCancelTransaction();
}}
onOk={() => {
form
.validateFields()
.then((values) => {
console.log(values, "isi form");
handleSubmitTransaction(values);
form.resetFields();
})
.catch((info) => {
console.error("Validate Failed:", info);
});
}}
>
<Form form={form} layout="vertical">
<Form.Item
name="amount"
label="Amount"
rules={[{ required: true, message: "Please input amount!" }]}
>
<InputNumber
style={{ width: "100%" }}
formatter={(value) =>
`Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
/>
</Form.Item>
</Form>
</Modal>
<MembershipModal
visible={visibleModal}
confirmLoading={confirmLoading}
initialData={initialData}
onCreate={async (data) => {
onSubmit(data);
onCreate={async (data, image, imageStore) => {
onSubmit(data, image, imageStore);
}}
onCancel={() => {
onCancel={async () => {
setInitialData({});
setVisibleModal(false);
await store.membership.getData();
}}
/>
<Modal
visible={store.membership.visibleModalFilterMembership}
title={"Filter"}
footer={footerLayoutFilter}
onCancel={async () => {
// setFilterMembership([]);
// setFilterPartner([]);
store.membership.filterMembership = null;
store.membership.filterPartner = null;
store.membership.visibleModalFilterMembership = false;
await store.membership.getData();
}}
>
<Row>
<Col span={24}>
<Title level={5} type={"secondary"} strong>
Atasan/Superior
</Title>
<Select
mode={"multiple"}
placeholder="Choose Superior"
onChange={(val) => {
setFilterMembership(val);
}}
style={{ marginBottom: "20px", width: "100%" }}
value={filterMembership}
>
{store.membership.data.map((item) => (
<Option value={item.id} key={item.id}>
{item.name}
</Option>
))}
</Select>
</Col>
<Col span={24}>
<Title level={5} type={"secondary"} strong>
Type
</Title>
<Select
mode={"multiple"}
placeholder="Choose Type"
onChange={(val) => {
setFilterPartner(val);
}}
style={{ marginBottom: "20px", width: "100%" }}
value={filterPartner}
>
<Option value="partner">Partner</Option>
<Option value="b2c">B2C</Option>
</Select>
</Col>
</Row>
</Modal>
</div>
);
});

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

@@ -1,96 +1,615 @@
import React from 'react';
import {Form, Input, Modal, Select,} from 'antd';
import {capitalize} from "lodash";
import {useStore} from "../../utils/useStore";
import React, { useState, useEffect } from "react";
import {
Form,
Input,
Modal,
Select,
InputNumber,
Row,
Col,
Typography,
Upload,
message,
} from "antd";
import { useStore } from "../../utils/useStore";
import { appConfig } from "../../config/app";
import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
export const MembershipModal = ({
visible,
onCreate,
onCancel,
initialData,
}) => {
const [form] = Form.useForm();
const {Option} = Select;
const dataStatus = ["true", "false"]
const store = useStore();
visible,
onCreate,
onCancel,
initialData,
}) => {
const [form] = Form.useForm();
const { Option } = Select;
const store = useStore();
const [value, setValue] = useState();
const [image, setImage] = useState("");
const [imageStore, setImageStore] = useState("");
const [fileList, setFileList] = useState([]);
const [fileStore, setFileStore] = useState([]);
const [previewImage, setPreviewImage] = useState("");
const [previewImageStore, setPreviewImageStore] = useState("");
const [responseFilename, setResponseFilename] = useState("");
const [responseFilenameStore, setResponseFilenameStore] = useState("");
const [loading, setLoading] = useState(false);
const [loadingStore, setLoadingStore] = useState(false);
const [previewVisible, setPreviewVisible] = useState(false);
const [previewImage1, setPreviewImage1] = useState("");
const [previewTitle, setPreviewTitle] = useState("");
useEffect(() => {
if (initialData.id) {
setFileList([
{
url: `${appConfig.apiUrl}/config/image/${initialData.image_identity}`,
},
]);
setFileStore([
{
url: `${appConfig.apiUrl}/config/image/${initialData.image_store}`,
},
]);
setImage(
`${appConfig.apiUrl}/config/image/${initialData.image_identity}`
);
setImageStore(
`${appConfig.apiUrl}/config/image/${initialData.image_store}`
);
}
return () => {};
}, [initialData]);
return (
<Modal
visible={visible}
title={initialData.id ? "Edit Member" : "Create a new Membership"}
okText={initialData.id ? "Edit" : "Create"}
cancelText="Cancel"
onCancel={() => {
form.resetFields()
onCancel()
}}
onOk={() => {
form
.validateFields()
.then(values => {
onCreate(values);
form.resetFields()
})
.catch(info => {
console.log('Validate Failed:', info);
});
}}
>
<Form
form={form}
layout="vertical"
name="form_in_modal"
initialValues={initialData}
>
<Form.Item
name="username"
label="Username"
rules={[{required: true, message: 'Please input Username!'}]}
>
<Input/>
</Form.Item>
<Form.Item
name="password"
label="Password"
rules={[{required: true, message: 'Please input password!'}]}
>
<Input/>
</Form.Item>
<Form.Item
name="roleId"
label="Role"
rules={[{required: true, message: 'Please input role id!'}]}
>
<Select>
{store.role.data.map(item => (
<Option key={item.id} value={item.id}>{item.name}</Option>
))}
</Select>
</Form.Item>
<Form.Item
name="superior"
label="Superior"
rules={[{required: true, message: 'Please select superior status!'}]}
>
<Select
showSearch
placeholder="Select Status"
optionFilterProp="children"
filterOption={(input, option) =>
option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
}
filterSort={(optionA, optionB) =>
optionA.children.toLowerCase().localeCompare(optionB.children.toLowerCase())
}
>
{dataStatus.map(it => {
return <Option value={it}>{capitalize(it)}</Option>
})}
</Select>
</Form.Item>
</Form>
</Modal>
const getBase64 = (file) => {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = (error) => reject(error);
});
};
const handlePreviewData = async (file) => {
if (!file.url && !file.preview) {
file.preview = await getBase64(file.originFileObj);
}
setPreviewImage1(file.url || file.preview);
setPreviewVisible(true);
setPreviewTitle(
file.name || file.url.substring(file.url.lastIndexOf("/") + 1)
);
};
const handleCancel1 = () => {
setPreviewVisible(false);
};
const beforeUpload = (file) => {
let isLt2M;
let allowedFile = ["image/jpeg", "image/png"];
let isValid = allowedFile.includes(file.type);
if (!isValid) {
message.error("You can only upload Image file!");
}
isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error("File must smaller than 2MB!");
}
return isValid && isLt2M ? true : Upload.LIST_IGNORE;
};
const beforeUploadStore = (file) => {
let isLt2M;
let allowedFile = ["image/jpeg", "image/png"];
let isValid = allowedFile.includes(file.type);
if (!isValid) {
message.error("You can only upload Image file!");
}
isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error("File must smaller than 2MB!");
}
return isValid && isLt2M ? true : Upload.LIST_IGNORE;
};
const uploadHandler = async (args) => {
const file = args.file;
const res = await store.payback.uploadImages(file);
console.log(res, "ini respon 1");
setImage(`${appConfig.apiUrl}/config/image/${res.body.filename}`);
console.log(initialData.image_identity);
initialData.image_identity !== ""
? file === ""
? setResponseFilename(initialData.image_identity)
: setResponseFilename(res.body.filename)
: setResponseFilename(res.body.filename);
setFileList([
{
uid: "-1",
name: res.body.filename,
status: "done",
url: `${appConfig.apiUrl}/config/image/${res.body.filename}`,
},
]);
setLoading(false);
};
const uploadHandlerStore = async (args) => {
const file = args.file;
const res = await store.payback.uploadImages(file);
console.log(res, "ini respon 2");
setImageStore(`${appConfig.apiUrl}/config/image/${res.body.filename}`);
setResponseFilenameStore([...responseFilenameStore, res.body.filename]);
setFileStore([
...fileStore,
{
uid: "-1",
name: res.body.filename,
status: "done",
url: `${appConfig.apiUrl}/config/image/${res.body.filename}`,
},
]);
setLoadingStore(false);
};
const handleChange = (info) => {
if (info.file.status === "uploading") {
setLoading(true);
} else {
setLoading(false);
}
};
const handleChangeStore = (info) => {
if (info.file.status === "uploading") {
setLoadingStore(true);
} else {
setLoadingStore(false);
}
};
const uploadButton = (
<div>
{loading ? <LoadingOutlined /> : <PlusOutlined />}
<div style={{ marginTop: 8 }}>Click to Upload</div>
</div>
);
const uploadButtonStore = (
<div>
{loadingStore ? <LoadingOutlined /> : <PlusOutlined />}
<div style={{ marginTop: 8 }}>Click to Upload</div>
</div>
);
return (
<Modal
visible={visible}
title={
initialData.isChangePassword
? "Change Member Password"
: initialData.id
? "Edit Member"
: "Create a new Membership"
}
okText={initialData.id ? "Edit" : "Create"}
cancelText="Cancel"
onCancel={() => {
form.resetFields();
onCancel();
setImage("");
setFileList([]);
setPreviewImage("");
setResponseFilename("");
setImageStore("");
setFileStore([]);
setPreviewImageStore("");
setResponseFilenameStore("");
}}
onOk={() => {
form
.validateFields()
.then((values) => {
console.log(values, "apa valuesanya");
values.image_identity = responseFilename;
values.image_store = JSON.stringify(responseFilenameStore);
onCreate(values, responseFilename, responseFilenameStore);
form.resetFields();
setFileStore([]);
setImage("");
setFileList([]);
setPreviewImage("");
setResponseFilename("");
setImageStore("");
setFileStore([]);
setPreviewImageStore("");
setResponseFilenameStore("");
})
.catch((info) => {
console.log("Validate Failed:", info);
});
}}
>
<Form
form={form}
layout="vertical"
name="form_in_modal"
initialValues={initialData}
>
{((initialData.id && !initialData.isChangePassword) ||
!initialData.id) && (
<Form.Item
name="name"
label="Name"
rules={[{ required: true, message: "Please input Name!" }]}
>
<Input />
</Form.Item>
)}
{!initialData.id && (
<Form.Item
name="username"
label="Username"
rules={[{ required: true, message: "Please input Username!" }]}
>
<Input />
</Form.Item>
)}
{((initialData.id && initialData.isChangePassword) ||
!initialData.id) && (
<Form.Item
name="password"
label="Password"
rules={[{ required: false, message: "Please input password!" }]}
>
<Input.Password />
</Form.Item>
)}
{((initialData.id && !initialData.isChangePassword) ||
!initialData.id) && (
<Form.Item
name="phone_number"
label="Phone Number"
rules={[
{
required: true,
message: "Please input Phone Number!",
},
{
pattern: /^(?:\d*)$/,
message: "Phone number should contain just number",
},
{
//pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
pattern: /^[\d]{10,12}$/,
message: "Phone number should be 10 - 12 character",
},
]}
>
<Input
onChange={(value) => {
setValue(value);
}}
/>
</Form.Item>
)}
{((initialData.id && !initialData.isChangePassword) ||
!initialData.id) &&
store.authentication.userData.role === "Admin" && (
<div>
<Form.Item
name="identity_number"
label="Identity Number"
rules={[
{
required: true,
message: "Please input identity number!",
},
{
pattern: /^(?:\d*)$/,
message: "Phone number should contain just number",
},
]}
>
<Input
onChange={(value) => {
setValue(value);
}}
/>
</Form.Item>
<Form.Item
label="Upload identity image"
name="image_identity"
rules={[
{ required: true, message: "Please insert image identity" },
]}
>
<div>
<Upload
listType="picture-card"
fileList={fileList}
showUploadList={true}
onPreview={handlePreviewData}
onChange={handleChange}
beforeUpload={(file) => beforeUpload(file)}
customRequest={(args) => uploadHandler(args)}
maxCount={1}
onRemove={(file) => {
setImage("");
setLoading(false);
setFileList([]);
}}
>
{image === "" ? uploadButton : null}
</Upload>
<Modal
visible={previewVisible}
title={previewTitle}
footer={null}
onCancel={handleCancel1}
>
<img
alt="example"
style={{ width: "100%" }}
src={previewImage1}
/>
</Modal>
<h5
style={{
marginTop: 12,
color: "rgba(0, 0, 0, 0.45)",
}}
>
Max size of file 2 MB
</h5>
</div>
</Form.Item>
<Form.Item
name="roleId"
label="Role"
rules={[{ required: true, message: "Please input role id!" }]}
>
<Select>
{store.role.data.map((item) => (
<Option key={item.id} value={item.id}>
{item.name}
</Option>
))}
</Select>
</Form.Item>
</div>
)}
{((initialData.id && !initialData.isChangePassword) ||
!initialData.id) &&
store.authentication.userData.role === "Supervisor" && (
<div>
<Form.Item
name="identity_number"
label="Identity Number"
rules={[
{
required: true,
message: "Please input identity number!",
},
{
pattern: /^(?:\d*)$/,
message: "Phone number should contain just number",
},
]}
>
<Input
onChange={(value) => {
setValue(value);
}}
/>
</Form.Item>
<Form.Item
label="Upload identity image"
name="image_identity"
rules={[
{ required: true, message: "Please insert image identity" },
]}
>
<div>
<Upload
listType="picture-card"
fileList={fileList}
// onPreview={(file) => {
// setPreviewImage(file.url || file.filename);
// }}
showUploadList={true}
onPreview={handlePreviewData}
onChange={handleChange}
beforeUpload={(file) => beforeUpload(file)}
customRequest={(args) => uploadHandler(args)}
onRemove={(file) => {
setImage("");
setLoading(false);
setFileList([]);
}}
>
{image === "" ? uploadButton : null}
</Upload>
<Modal
visible={previewVisible}
title={previewTitle}
footer={null}
onCancel={handleCancel1}
>
<img
alt="example"
style={{ width: "100%" }}
src={previewImage1}
/>
</Modal>
<h5
style={{
marginTop: 12,
color: "rgba(0, 0, 0, 0.45)",
}}
>
Max size of file 2 MB
</h5>
</div>
</Form.Item>
<Form.Item
name="roleId"
label="Role"
rules={[{ required: true, message: "Please input role id!" }]}
>
<Select>
<Option
key="e4dfb6a3-2348-464a-8fb8-5cbc089d4209"
value="e4dfb6a3-2348-464a-8fb8-5cbc089d4209"
>
Sales
</Option>
</Select>
</Form.Item>
</div>
)}
{((initialData.id && !initialData.isChangePassword) ||
!initialData.id) &&
store.authentication.userData.role === "Sales" && (
<div>
<Form.Item
name="identity_number"
label="Identity Number"
rules={[
{
required: true,
message: "Please input identity number!",
},
{
pattern: /^(?:\d*)$/,
message: "Phone number should contain just number",
},
]}
>
<Input
onChange={(value) => {
setValue(value);
}}
/>
</Form.Item>
<Form.Item
label="Upload identity image"
name="image_identity"
rules={[
{ required: true, message: "Please insert image identity" },
]}
>
<div>
<Upload
listType="picture-card"
fileList={fileList}
// onPreview={(file) => {
// setPreviewImage(file.url || file.filename);
// }}
showUploadList={true}
onPreview={handlePreviewData}
onChange={handleChange}
beforeUpload={(file) => beforeUpload(file)}
customRequest={(args) => uploadHandler(args)}
onRemove={(file) => {
setImage("");
setLoading(false);
setFileList([]);
}}
>
{image === "" ? uploadButton : null}
</Upload>
<Modal
visible={previewVisible}
title={previewTitle}
footer={null}
onCancel={handleCancel1}
>
<img
alt="example"
style={{ width: "100%" }}
src={previewImage1}
/>
</Modal>
<h5
style={{
marginTop: 12,
color: "rgba(0, 0, 0, 0.45)",
}}
>
Max size of file 2 MB
</h5>
</div>
</Form.Item>
<Form.Item
label="Upload foto toko tampak samping kanan,kiri dan depan"
name="image_store"
rules={[
{ required: true, message: "Please insert image store" },
]}
>
<div>
<Upload
listType="picture-card"
fileList={fileStore}
// onPreview={(file) => {
// setPreviewImageStore(file.url || file.filename);
// }}
showUploadList={true}
onPreview={handlePreviewData}
onChange={handleChangeStore}
beforeUpload={(file) => beforeUploadStore(file)}
customRequest={(args) => uploadHandlerStore(args)}
maxCount={3}
onRemove={(file) => {
setImageStore("");
setLoadingStore(false);
setFileStore([]);
}}
>
{fileStore.length >= 3 ? null : uploadButtonStore}
</Upload>
<Modal
visible={previewVisible}
title={previewTitle}
footer={null}
onCancel={handleCancel1}
>
<img
alt="example"
style={{ width: "100%" }}
src={previewImage1}
/>
</Modal>
<h5
style={{
marginTop: 12,
color: "rgba(0, 0, 0, 0.45)",
}}
>
Max size of file 2 MB
</h5>
</div>
</Form.Item>
<Form.Item
name="roleId"
label="Role"
rules={[{ required: true, message: "Please input role id!" }]}
>
<Select>
<Option
key="e4dfb6a3-2338-464a-8fb8-5cbc089d4209"
value="e4dfb6a3-2338-464a-8fb8-5cbc089d4209"
>
Retail
</Option>
</Select>
</Form.Item>
</div>
)}
</Form>
</Modal>
);
};

519
src/pages/Payback/Payback.js Normal file
View File

@@ -0,0 +1,519 @@
import React, { useContext, useEffect, useState } from "react";
import {
Button,
Card,
Col,
Divider,
Image,
Input,
List,
message,
Modal,
Row,
Space,
Table,
Tag,
Select,
Typography,
DatePicker,
Form,
} from "antd";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import {
CheckCircleOutlined,
CheckOutlined,
CloseOutlined,
FilterOutlined,
StopOutlined,
} from "@ant-design/icons";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import { ModalLoaderContext } from "../../utils/modal";
import { appConfig } from "../../config/app";
import { capitalize } from "lodash";
import { PAYBACK_STATUS } from "../../constants/payback";
import moment from "moment";
export const Payback = observer(() => {
const { Option } = Select;
const { Title } = Typography;
const [form] = Form.useForm();
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
const [filterMembership, setFilterMembership] = useState([]);
const [filterSubCategories, setFilterSubCategories] = useState([]);
useEffect(() => {
const init = async () => {
try {
modalLoader.setLoading(true);
await store.membership.getData();
await store.payback.getDataConfirmation();
modalLoader.setLoading(false);
} catch (e) {
modalLoader.setLoading(false);
if (e.response?.body?.message) {
message.error(e.response.body.message);
return;
}
message.error(e.message);
}
};
init();
}, []);
const columns = [
{
title: "Name",
dataIndex: "userData_name",
key: "userData_name",
},
{
title: "Picture",
dataIndex: "image_prove",
key: "image_prove",
render: (text, record) => (
<Image
src={`${appConfig.apiUrl}/config/image/${text}`}
style={{ width: "5vw" }}
alt={record.id}
/>
),
},
{
title: "Amount",
dataIndex: "amount",
key: "amount",
width: "20%",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
title: "Action",
dataIndex: "amount",
key: "action",
width: "10%",
render: (text, record) =>
PAYBACK_STATUS[record.status] === PAYBACK_STATUS[0] ? (
<Space size="middle">
<Button
onClick={async () => {
Modal.confirm({
title: `Are you sure Accept this submission?`,
icon: <CheckOutlined />,
okText: "Accept",
cancelText: "Cancel",
okType: "primary",
onOk() {
handleAction(record.id, "accept");
},
onCancel() {
console.log("Cancel");
},
});
}}
icon={<CheckCircleOutlined />}
style={{
backgroundColor: "#1bb91d",
color: "#fff",
borderColor: "#1bb91d",
}}
>
Accept
</Button>
<Button
onClick={async () => {
Modal.confirm({
title: `Are you sure Reject this submission?`,
icon: <StopOutlined />,
okText: "Reject",
cancelText: "Cancel",
okType: "primary",
onOk() {
handleAction(record.id, "reject");
},
onCancel() {
console.log("Cancel");
},
});
}}
icon={<CloseOutlined />}
style={{
backgroundColor: "#ff1c1c",
color: "#fff",
borderColor: "#ff1c1c",
}}
>
Reject
</Button>
</Space>
) : (
<Tag
color={
PAYBACK_STATUS[record.status] === PAYBACK_STATUS[3]
? "cyan"
: "red"
}
style={{ color: "#4F566B" }}
>
{PAYBACK_STATUS[record.status]}
</Tag>
),
},
];
if (store.authentication.userData.role === "Retail") columns.pop();
const routeData = [
{
route: LINKS.HOME,
name: "Beranda",
},
{
route: LINKS.PAYBACK,
name: <span style={{ fontWeight: "bold" }}>Konfirmasi Pembayaran</span>,
},
];
const dataRoute = [
{
route: LINKS.PAYBACK,
name: "Konfirmasi Pembayaran",
},
];
const handleAction = async (id, type) => {
modalLoader.setLoading(true);
try {
const response = await store.payback.confirmPayback(id, type);
console.log(response);
response.body.statusCode !== 201 && response.body.statusCode !== 200
? message.error(
response?.body?.message || `Failed ${capitalize(type)} Payback`
)
: message.success(
response?.body?.message || `Success ${capitalize(type)} Payback`
);
} catch (e) {
console.error(e, "apa errornya");
message.error(
e.response?.body?.message || "Failed Handler Action Payback"
);
}
modalLoader.setLoading(false);
};
const handleRemoveFilter = async () => {
store.payback.filterMembership = null;
store.payback.filterStart = null;
store.payback.filterEnd = null;
setFilterMembership([]);
form.resetFields();
await store.payback.getDataConfirmation();
store.payback.visibleModalFilterPayback = false;
};
const handleCancelFilter = async () => {
//setFilterMembership([]);
//form.resetFields();
store.payback.filterMembership = null;
store.payback.filterStart = null;
store.payback.filterEnd = null;
store.payback.visibleModalFilterPayback = false;
await store.payback.getDataConfirmation();
};
const handleSubmitFilter = async () => {
const data = form.getFieldsValue();
//console.log(data);
store.payback.filterMembership = filterMembership;
store.payback.filterStart = data.start_date
? moment(data.start_date).format("YYYY-MM-DD") + " 00:00:00"
: null;
store.payback.filterEnd = data.end_date
? moment(data.end_date).format("YYYY-MM-DD") + " 23:59:59"
: null;
modalLoader.setLoading(true);
await store.payback.getDataConfirmation();
modalLoader.setLoading(false);
store.payback.visibleModalFilterPayback = false;
};
const footerLayoutFilter = [
<Button
key={"remove"}
onClick={handleRemoveFilter}
style={{
backgroundColor: "#e74e5e",
color: "#fff",
}}
>
Remove Filter
</Button>,
<Button key={"cancel"} onClick={handleCancelFilter}>
Cancel
</Button>,
<Button
key={"submit"}
onClick={handleSubmitFilter}
style={{
backgroundColor: "#4e79e7",
color: "#fff",
}}
>
Apply
</Button>,
];
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent
data={
store.authentication.userData.role === "Admin" ? routeData : dataRoute
}
/>
<Card>
<div>
<Row style={{ marginBottom: 20 }}>
<Col span={12}>
<Button
onClick={() => {
store.payback.visibleModalFilterPayback = true;
}}
>
<FilterOutlined />
Filter
</Button>
</Col>
<Col span={12} style={{ textAlign: "right" }}>
{/* <Search
placeholder="input search text"
style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}}
/> */}
</Col>
</Row>
{store.ui.mediaQuery.isDesktop && (
<Table
key="1"
hasEmpty
columns={columns}
dataSource={store.payback.dataConfirmation}
bordered
pagination={{
pageSize: store.payback.pageSizeConfirmation,
total: store.payback.totalDataConfirmation,
current: store.payback.pageSizeConfirmation + 1,
showSizeChanger: true,
simple: false,
}}
onChange={async (page) => {
let pageNumber = page.current;
store.payback.pageSizeConfirmation = page.pageSize;
store.payback.pageConfirmation = pageNumber - 1;
modalLoader.setLoading(true);
await store.payback.getDataConfirmation();
modalLoader.setLoading(false);
}}
/>
)}
{store.ui.mediaQuery.isMobile && (
<List
itemLayout="horizontal"
position={"top"}
pagination={{
onChange: async (page) => {
store.payback.pageSizeConfirmation = page.pageSize;
store.payback.pageConfirmation = page.current - 1;
modalLoader.setLoading(true);
await store.payback.getDataConfirmation();
modalLoader.setLoading(false);
},
pageSize: store.payback.pageSizeConfirmation,
total: store.payback.totalDataConfirmation,
current: store.payback.pageConfirmation + 1,
style: { marginBottom: "1rem", marginRight: "1rem" },
}}
dataSource={store.payback.dataConfirmation}
style={{ padding: 0 }}
renderItem={(item) => {
return (
<div>
<List.Item
key={item.id}
style={{
backgroundColor: "#ffffff",
paddingTop: 0,
paddingBottom: 0,
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
}}
>
<List.Item.Meta
className={[""].join(" ")}
title={item.userData_name}
description={
<div style={{}}>
<p>
<small>Amount: {item.amount}</small>
<br />
{PAYBACK_STATUS[item.status] ===
PAYBACK_STATUS[0] ? (
<Space size="middle">
<Button
onClick={async () => {
Modal.confirm({
title: `Are you sure Accept this submission?`,
icon: <CheckOutlined />,
okText: "Accept",
cancelText: "Cancel",
okType: "primary",
onOk() {
handleAction(item.id, "accept");
},
onCancel() {
console.log("Cancel");
},
});
}}
icon={<CheckCircleOutlined />}
style={{
backgroundColor: "#1bb91d",
color: "#fff",
borderColor: "#1bb91d",
}}
>
Accept
</Button>
<Button
onClick={async () => {
Modal.confirm({
title: `Are you sure Reject this submission?`,
icon: <StopOutlined />,
okText: "Reject",
cancelText: "Cancel",
okType: "primary",
onOk() {
handleAction(item.id, "reject");
},
onCancel() {
console.log("Cancel");
},
});
}}
icon={<CloseOutlined />}
style={{
backgroundColor: "#ff1c1c",
color: "#fff",
borderColor: "#ff1c1c",
}}
>
Reject
</Button>
</Space>
) : (
<Tag
color={
PAYBACK_STATUS[item.status] ===
PAYBACK_STATUS[3]
? "cyan"
: "red"
}
style={{ color: "#4F566B" }}
>
{PAYBACK_STATUS[item.status]}
</Tag>
)}
</p>
</div>
}
/>
<div style={{ marginRight: 16 }}>
<p
style={{
fontSize: 9,
margin: 0,
}}
>
<Image
src={`${appConfig.apiUrl}/config/image/${item.image_prove}`}
style={{ width: "10vw" }}
/>
</p>
</div>
</List.Item>
<Divider plain style={{ margin: 0 }} />
</div>
);
}}
/>
)}
</div>
</Card>
<Modal
visible={store.payback.visibleModalFilterPayback}
title={"Filter"}
footer={footerLayoutFilter}
onCancel={async () => {
//form.resetFields();
//setFilterMembership([]);
store.payback.filterMembership = null;
store.payback.filterStart = null;
store.payback.filterEnd = null;
store.payback.visibleModalFilterPayback = false;
await store.payback.getDataConfirmation();
}}
>
<Row>
<Col span={24}>
<Title level={5} type={"secondary"} strong>
Sender
</Title>
<Form layout="vertical" name="filter" form={form}>
<Select
mode={"multiple"}
placeholder="Pilih Pengirim"
onChange={(val) => {
setFilterMembership(val);
}}
style={{ marginBottom: "20px", width: "100%" }}
value={filterMembership}
>
{store.payback.dataConfirmation.map((item) => (
<Option value={item.id} key={item.id}>
{item.userData_name}
</Option>
))}
</Select>
<Form.Item
name="start_date"
label="Dari"
rules={[{ required: true, message: "Please input Date!" }]}
>
<DatePicker style={{ width: "100%" }}/>
</Form.Item>
<Form.Item
name="end_date"
label="Sampai"
rules={[{ required: true, message: "Please input Date!" }]}
>
<DatePicker style={{ width: "100%" }} />
</Form.Item>
</Form>
</Col>
</Row>
</Modal>
</div>
);
});

383
src/pages/Payback/PaybackCreated.js Normal file
View File

@@ -0,0 +1,383 @@
import React, { useContext, useEffect, useState } from "react";
import {
Button,
Card,
Col,
Divider,
Image,
List,
message,
DatePicker,
Row,
Table,
Tag,
Form,
Modal,
} from "antd";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
import { PaybackModal } from "./PaybackModal";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import { ModalLoaderContext } from "../../utils/modal";
import { appConfig } from "../../config/app";
import { PAYBACK_STATUS } from "../../constants/payback";
import moment from "moment";
export const PaybackCreated = observer(() => {
const [form] = Form.useForm();
const store = useStore();
const [filterMembership, setFilterMembership] = useState([]);
const [initialData, setInitialData] = useState({});
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
modalLoader.setLoading(true);
await Promise.allSettled([
store.payback.getDataCreated(),
store.authentication.getProfile(),
]);
modalLoader.setLoading(false);
} catch (e) {
modalLoader.setLoading(false);
if (e.response?.body?.message) {
message.error(e.response.body.message);
return;
}
message.error(e.message);
}
};
init();
}, []);
const columns = [
{
title: "Picture",
dataIndex: "image_prove",
key: "image_prove",
render: (text, record) => (
<Image
src={`${appConfig.apiUrl}/config/image/${text}`}
style={{ width: "5vw" }}
alt={record.id}
/>
),
},
{
title: "Amount",
dataIndex: "amount",
key: "amount",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
title: "Status",
dataIndex: "status",
key: "status",
width: "10%",
render: (text, record) => (
<Tag
color={
record.status === 0
? "purple"
: record.status === 1
? "blue"
: record.status === 2
? "warning"
: record.status === 3
? "success"
: "red"
}
>
{record.status === 0
? "Pending"
: record.status === 1
? "Success"
: record.status === 2
? "Failed"
: record.status === 3
? "Approved"
: "Rejected"}
</Tag>
),
},
];
const routeData = [
{
route: LINKS.HOME,
name: "Beranda",
},
{
route: LINKS.PAYBACK_CREATED,
name: <span style={{ fontWeight: "bold" }}>Buat Pembayaran</span>,
},
];
const dataRoute = [
{
route: LINKS.PAYBACK_CREATED,
name: "Buat Pembayaran",
},
];
const handleRemoveFilter = async () => {
store.payback.filterStart = null;
store.payback.filterEnd = null;
form.resetFields();
await store.payback.getDataCreated();
store.payback.visibleModalFilterCreate = false;
};
const handleCancelFilter = async () => {
store.payback.filterStart = null;
store.payback.filterEnd = null;
store.payback.visibleModalFilterCreate = false;
await store.payback.getDataCreated();
};
const handleSubmitFilter = async () => {
const data = form.getFieldsValue();
console.log(data);
store.payback.filterStart = moment(data.start_date).format(
"YYYY-MM-DD 00:00:00"
);
store.payback.filterEnd = moment(data.end_date).format(
"YYYY-MM-DD HH:mm:ss"
);
modalLoader.setLoading(true);
await store.payback.getDataCreated();
modalLoader.setLoading(false);
store.payback.visibleModalFilterCreate = false;
};
const footerLayoutFilter = [
<Button
key={"remove"}
onClick={handleRemoveFilter}
style={{
backgroundColor: "#e74e5e",
color: "#fff",
}}
>
Remove Filter
</Button>,
<Button key={"cancel"} onClick={handleCancelFilter}>
Cancel
</Button>,
<Button
key={"submit"}
onClick={handleSubmitFilter}
style={{
backgroundColor: "#4e79e7",
color: "#fff",
}}
>
Apply
</Button>,
];
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent
data={
store.authentication.userData.role === "Admin" ? routeData : dataRoute
}
/>
<Card>
<div>
<Row style={{ marginBottom: 20 }}>
<Col span={12}>
<Button
onClick={() => {
store.payback.visibleModalFilterCreate = true;
}}
>
<FilterOutlined />
Filter
</Button>
</Col>
<Col span={12} style={{ textAlign: "right" }}>
{/* <Search
placeholder="input search text"
style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}}
/> */}
{store.authentication.userData.role !== "Admin" && (
<Button
onClick={() => {
setInitialData({});
store.payback.visibleModalPayback = true;
}}
>
<PlusSquareOutlined /> New
</Button>
)}
</Col>
</Row>
{store.ui.mediaQuery.isDesktop && (
<Table
key="1"
hasEmpty
columns={columns}
dataSource={store.payback.dataCreated}
bordered
pagination={{
pageSize: store.payback.pageSizeCreated,
total: store.payback.totalDataCreated,
current: store.payback.pageCreated + 1,
showSizeChanger: true,
simple: false,
}}
onChange={async (page) => {
let pageNumber = page.current;
store.payback.pageSizeCreated = page.pageSize;
store.payback.pageCreated = pageNumber - 1;
modalLoader.setLoading(true);
await store.payback.getDataCreated();
modalLoader.setLoading(false);
}}
/>
)}
{store.ui.mediaQuery.isMobile && (
<List
itemLayout="horizontal"
position={"top"}
pagination={{
onChange: async (page, pageSize) => {
store.payback.pageSizeCreated = pageSize;
store.payback.pageCreated = page - 1;
modalLoader.setLoading(true);
await store.payback.getDataCreated();
modalLoader.setLoading(false);
},
pageSize: store.payback.pageSizeCreated,
total: store.payback.totalDataCreated,
current: store.payback.pageCreated + 1,
style: { marginBottom: "1rem", marginRight: "1rem" },
}}
dataSource={store.payback.dataCreated}
style={{ padding: 0 }}
renderItem={(item) => {
return (
<div>
<List.Item
key={item.id}
style={{
backgroundColor: "#ffffff",
paddingTop: 0,
paddingBottom: 0,
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
}}
>
<List.Item.Meta
className={[""].join(" ")}
title={item.name}
description={
<div style={{ marginBottom: 10 }}>
<small>Amount: {item.amount}</small>
<br />
<div style={{ marginTop: 5 }}>
<small>Status : </small>
<Tag
color={
item.status === 0
? "purple"
: item.status === 1
? "blue"
: item.status === 2
? "warning"
: item.status === 3
? "success"
: "red"
}
>
{item.status === 0
? "Pending"
: item.status === 1
? "Success"
: item.status === 2
? "Failed"
: item.status === 3
? "Approved"
: "Rejected"}
</Tag>
</div>
</div>
}
/>
<div style={{ marginRight: 16 }}>
<p
style={{
fontSize: 9,
margin: 0,
}}
>
{" "}
<Image
src={`${appConfig.apiUrl}/config/image/${item.image_prove}`}
style={{ width: "20vw" }}
preview={true}
/>
</p>
</div>
</List.Item>
<Divider plain style={{ margin: 0 }} />
</div>
);
}}
/>
)}
</div>
</Card>
<Modal
visible={store.payback.visibleModalFilterCreate}
title={"Filter"}
footer={footerLayoutFilter}
onCancel={async () => {
//form.resetFields();
store.payback.filterStart = null;
store.payback.filterEnd = null;
store.payback.visibleModalFilterCreate = false;
await store.payback.getDataCreated();
}}
>
<Row>
<Col span={24}>
<Form layout="vertical" name="filter" form={form}>
<Form.Item
name="start_date"
label="Dari"
rules={[{ required: true, message: "Please input Date!" }]}
>
<DatePicker style={{ width: "100%" }} />
</Form.Item>
<Form.Item
name="end_date"
label="Sampai"
rules={[{ required: true, message: "Please input Date!" }]}
>
<DatePicker style={{ width: "100%" }} />
</Form.Item>
</Form>
</Col>
</Row>
</Modal>
<PaybackModal initialData={initialData} />
</div>
);
});

169
src/pages/Payback/PaybackModal.js Normal file
View File

@@ -0,0 +1,169 @@
import React, { useContext, useState } from "react";
import { Form, InputNumber, message, Modal, Upload } from "antd";
import { useStore } from "../../utils/useStore";
import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
import { ModalLoaderContext } from "../../utils/modal";
import { appConfig } from "../../config/app";
export const PaybackModal = ({ initialData }) => {
const [form] = Form.useForm();
const store = useStore();
const [image, setImage] = useState("");
const [fileList, setFileList] = useState([]);
const [previewImage, setPreviewImage] = useState("");
const [responseFilename, setResponseFilename] = useState("");
const [loading, setLoading] = useState(false);
const modalLoader = useContext(ModalLoaderContext);
const beforeUpload = (file) => {
let isLt2M;
let allowedFile = ["image/jpeg", "image/png"];
let isValid = allowedFile.includes(file.type);
if (!isValid) {
message.error("You can only upload Image file!");
}
isLt2M = file.size / 1024 / 1024 < 2;
if (!isLt2M) {
message.error("File must smaller than 2MB!");
}
return isValid && isLt2M ? true : Upload.LIST_IGNORE;
};
const uploadHandler = async (args) => {
const file = args.file;
const res = await store.payback.uploadImages(file);
setImage(`${appConfig.apiUrl}/config/image/${res.body.filename}`);
setResponseFilename(res.body.filename);
setFileList([
{
uid: "-1",
name: res.body.filename,
status: "done",
url: `${appConfig.apiUrl}/config/image/${res.body.filename}`,
},
]);
setLoading(false);
};
const handleChange = (info) => {
if (info.file.status === "uploading") {
setLoading(true);
} else {
setLoading(false);
}
};
const uploadButton = (
<div>
{loading ? <LoadingOutlined /> : <PlusOutlined />}
<div style={{ marginTop: 8 }}>Click to Upload</div>
</div>
);
const handleSubmit = async (data) => {
modalLoader.setLoading(true);
try {
const request = {
...data,
destination: store.authentication.profileData.superior?.id,
image_prove: responseFilename,
};
const response = await store.payback.create(request);
message.success(response?.body?.message || "Success Add Created");
} catch (e) {
if (e.response?.body?.message) {
message.error(e.response.body.message);
return;
}
message.error(e.message);
}
modalLoader.setLoading(false);
store.payback.visibleModalPayback = false;
form.resetFields();
setImage("");
setFileList([]);
setPreviewImage("");
setResponseFilename("");
};
const handleCancel = () => {
form.resetFields();
setImage("");
setFileList([]);
setPreviewImage("");
setResponseFilename("");
store.payback.visibleModalPayback = false;
};
return (
<Modal
visible={store.payback.visibleModalPayback}
title={"Create a new Created"}
okText={"Create"}
cancelText="Cancel"
onCancel={handleCancel}
onOk={() => {
form
.validateFields()
.then((values) => {
handleSubmit(values);
form.resetFields();
})
.catch((info) => {
console.log("Validate Failed:", info);
});
}}
>
<Form
form={form}
layout="vertical"
name="form_in_modal"
initialValues={initialData}
>
<Form.Item label="Upload Picture" name="image_prove">
<div>
<Upload
listType="picture-card"
fileList={fileList}
onPreview={(file) => {
setPreviewImage(file.url || file.filename);
}}
showUploadList={true}
onChange={handleChange}
beforeUpload={(file) => beforeUpload(file)}
customRequest={(args) => uploadHandler(args)}
onRemove={(file) => {
setImage("");
setLoading(false);
setFileList([]);
}}
>
{image === "" ? uploadButton : null}
</Upload>
<h5
style={{
marginTop: 12,
color: "rgba(0, 0, 0, 0.45)",
}}
>
Max size of file 2 MB
</h5>
</div>
</Form.Item>
<Form.Item
name="amount"
label="amount"
rules={[{ required: true, message: "Please input Amount!" }]}
>
<InputNumber
style={{ width: "100%" }}
formatter={(value) =>
`Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
/>
</Form.Item>
</Form>
</Modal>
);
};

64
src/pages/Product/Category.js Normal file
View File

@@ -0,0 +1,64 @@
import React, {useContext, useEffect, useState} from "react";
import {Button, Card, Col, Input, Row, Tabs,message} from "antd";
import {FilterOutlined, PlusSquareOutlined} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {LINKS} from "../../routes/app";
import {CategoryComponent} from "../../component/CategoryComponent";
import {ModalLoaderContext} from "../../utils/modal";
export const Category = observer(() => {
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
modalLoader.setLoading(true);
await store.category.getData();
modalLoader.setLoading(false);
} catch (e) {
modalLoader.setLoading(false);
if (e.response?.body?.message) {
message.error(e.response.body.message);
return;
}
message.error(e.message);
}
};
init();
}, []);
const routeData = [
{
route: LINKS.HOME,
name: "Beranda",
},
{
route: LINKS.CATEGORY,
name: <span style={{ fontWeight: "bold" }}>Kategori</span>,
},
];
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} />
<Card>
<Row style={{ marginBottom: 20 }}>
<Col span={24} style={{ textAlign: "right" }}>
<Button
onClick={() => (store.category.visibleModalCategory = true)}
>
<PlusSquareOutlined /> New
</Button>
</Col>
</Row>
<CategoryComponent />
</Card>
</div>
);
});

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

@@ -1,120 +1,324 @@
import React,{useState,useEffect} from "react";
import {Button, Card, Col, Input, Row, Tabs,message} from "antd";
import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {Pulsa} from "./Pulsa";
import {PulsaModal} from "./PulsaModal";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import React, { useContext, useEffect, useState } from "react";
import {
Button,
Card,
Col,
Form,
Input,
message,
Modal,
Row,
Select,
Upload,
} from "antd";
import {
FilterOutlined,
PlusOutlined,
UploadOutlined,
} from "@ant-design/icons";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { ProductComponent } from "../../component/ProductComponent";
import { LINKS } from "../../routes/app";
import { ModalLoaderContext } from "../../utils/modal";
const { Search } = Input;
const { Option } = Select;
const {TabPane} = Tabs;
const {Search} = Input;
export const Product =observer(() => {
const [visibleModal, setVisibleModal] = useState(false)
const [initialData, setInitialData] = useState({})
const [confirmLoading, setConfirmLoading] = useState(false);
const [isLoading, setIsLoading] = useState(false);
export const Product = observer(() => {
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
const [loading, setLoading] = useState(false);
const [visibleModalUpload, setVisibleModalUpload] = useState(false);
const [excel, setExcel] = useState("");
const [fileList, setFileList] = useState([]);
const [form] = Form.useForm();
useEffect(() => {
const init = async () => {
try {
store.supplier.page = 0;
store.supplier.pageSize = 1000;
modalLoader.setLoading(true);
await Promise.allSettled([
store.supplier.getData(),
store.category.getData(),
store.product.getDataSubCategories(),
store.product.getProductPartner(),
]);
await store.product.getData();
modalLoader.setLoading(false);
} catch (e) {
modalLoader.setLoading(false);
if (e.response?.body?.message) {
message.error(e.response.body.message);
return;
}
message.error(e.message);
}
};
init();
return () => {
store.supplier.pageSize = 10;
};
}, []);
const callback = (key) => {
console.log(key);
};
const routeData = [
{
route: "/app/home",
name: "Home",
route: LINKS.HOME,
name: "Beranda",
},
{
route: "/app/product",
name: <span style={{fontWeight: 'bold'}}>Product</span>,
route: LINKS.PRODUCT,
name: <span style={{ fontWeight: "bold" }}>Produk</span>,
},
];
const onSubmit = async (data) => {
if (initialData.id) {
setInitialData({})
setConfirmLoading(true);
try {
await store.product.update(initialData.id, data)
message.success("Success Update Data Member")
} catch (e) {
message.error("Failed Update Data Member")
}
setConfirmLoading(false);
setVisibleModal(false);
} else {
setInitialData({})
setConfirmLoading(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")
}
setConfirmLoading(false);
setVisibleModal(false);
const dataRoute = [
{
route: LINKS.PRODUCT,
name: "Produk",
},
];
const beforeUpload = (file) => {
let isLt2M;
let allowedFile = [
"text/csv",
"application/csv",
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
"application/vnd.ms-excel.sheet.binary.macroEnabled.12",
"application/vnd.ms-excel",
"application/vnd.ms-excel.sheet.macroEnabled.12",
];
let isValid = allowedFile.includes(file.type);
if (!isValid) {
message.error("You can only upload Excel file!");
}
}
isLt2M = file.size / 1024 / 1024 < 10;
if (!isLt2M) {
message.error("File must smaller than 10MB!");
}
return isValid && isLt2M ? true : Upload.LIST_IGNORE;
};
const uploadHandler = async (args) => {
const file = args.file;
try {
const response = await store.product.uploadExcel(file);
if (response.status === 201) {
message.success("Success upload excel!");
} else {
message.error("Failed upload excel!");
}
setFileList([
{
uid: "-1",
name: response.body.filename,
status: "done",
url: "",
},
]);
setExcel(response.body.filename);
} catch (e) {
setLoading(false);
message.error("Failed upload excel!");
}
};
const handleChange = (info) => {
if (info.file.status === "uploading") {
setLoading(true);
} else {
setLoading(false);
}
};
const handleUploadProduct = async (data) => {
try {
const response = await store.product.uploadProduct(data);
if (response.status === 201) {
message.success("Success Create Product by Excel!");
} else {
message.error("Failed Create Product by Excel!");
}
return response;
} catch (e) {
setLoading(false);
message.error("Failed Create Product by Excel!");
}
};
const handleCancel = () => {
form.resetFields();
setFileList([]);
setExcel("");
setVisibleModalUpload(false);
};
const handleSubmit = async (data) => {
const request = {
fileName: excel,
supplierCode: data.supplierCode,
};
const responseUploadProduct = await handleUploadProduct(request);
await store.product.getData();
setLoading(false);
setFileList([]);
setExcel("");
setVisibleModalUpload(false);
};
return (
<div>
<BreadcumbComponent data={routeData}/>
<Card>
<Row style={{marginBottom: 20}}>
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent
data={
store.authentication.userData.role === "Admin" ||
store.authentication.userData.role === "Admin Partner"
? routeData
: dataRoute
}
/>
<Card>
<div>
<Row style={{ marginBottom: 20 }}>
<Col span={12}>
<Button>
<FilterOutlined/>
<Button
onClick={() => {
store.product.visibleModalFilterProduct = true;
}}
>
<FilterOutlined />
Filter
</Button>
</Col>
<Col span={12} style={{textAlign: "right"}}>
<Search
placeholder="input search text"
style={{width: 200, marginRight: 10}}
/>
<Button onClick={() => setVisibleModal(true)}>
<PlusSquareOutlined/> New
</Button>
<Col span={12}>
<div
style={{
display: store.ui.mediaQuery.isMobile ? "" : "flex",
justifyContent: "flex-end",
textAlign: "right",
}}
>
{/* <Search
placeholder="input search text"
style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}}
/> */}
{store.authentication.userData.role == "Admin" && (
<div
style={{
display: store.ui.mediaQuery.isMobile ? "" : "flex",
justifyContent: "flex-end",
textAlign: "right",
}}
>
<Button
disabled={visibleModalUpload}
style={{
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
}}
icon={<PlusOutlined />}
onClick={() => setVisibleModalUpload(true)}
>
Tambah Produk
</Button>
</div>
)}
</div>
</Col>
</Row>
<Tabs
defaultActiveKey="1"
onChange={callback}
size="default"
tabBarGutter="50"
</div>
<ProductComponent />
</Card>
<Modal
visible={visibleModalUpload}
title={"Upload Excel Product"}
okText={"Create"}
cancelText="Cancel"
onCancel={() => {
form.resetFields();
handleCancel();
}}
onOk={() => {
form
.validateFields()
.then((values) => {
console.log(values, "isi form");
handleSubmit(values);
form.resetFields();
})
.catch((info) => {
console.error("Validate Failed:", info);
});
}}
>
<Form form={form} layout="vertical">
<Form.Item
name="fileName"
label="Upload Excel Product"
rules={[
{ required: true, message: "Please Upload Excel Product!" },
]}
>
<TabPane tab="Pulsa" key="1">
<Pulsa/>
</TabPane>
<TabPane tab="Game Voucher" key="2">
Game Voucher
</TabPane>
<TabPane tab="Product" key="3">
Product
</TabPane>
<TabPane tab="Prduct" key="4">
Prduct
</TabPane>
<TabPane tab="Prdct" key="5">
Prdct
</TabPane>
</Tabs>
</Card>
<PulsaModal visible={visibleModal}
confirmLoading={confirmLoading}
initialData={initialData}
onCreate={async (data) => {
onSubmit(data)
}}
onCancel={() => {
setInitialData({})
setVisibleModal(false);
}}/>
</div>
<Upload
fileList={fileList}
onChange={handleChange}
beforeUpload={(file) => beforeUpload(file)}
customRequest={(args) => uploadHandler(args)}
onRemove={(file) => {
setLoading(false);
setFileList([]);
setExcel("");
}}
>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "center",
}}
>
<Button
disabled={loading}
style={{
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
}}
icon={<UploadOutlined />}
>
Upload Product
</Button>
</div>
</Upload>
</Form.Item>
<Form.Item
name="supplierCode"
label="Supplier Code"
rules={[{ required: true, message: "Please input Supplier Code!" }]}
>
<Select>
{store.supplier.data.map((data) => (
<Option key={data.id} value={data.code}>
{data.name}
</Option>
))}
</Select>
</Form.Item>
</Form>
</Modal>
</div>
);
});

171
src/pages/Product/ProductDetail.js Normal file
View File

@@ -0,0 +1,171 @@
import React, { useContext, useEffect } from "react";
import { Card, Col, Row, Table, Typography, Tag } from "antd";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { format, parseISO } from "date-fns";
import { ModalLoaderContext } from "../../utils/modal";
import { useParams } from "react-router-dom";
const { Title, Text } = Typography;
export const ProductDetail = observer(() => {
const store = useStore();
const { id } = useParams();
const modalLoader = useContext(ModalLoaderContext);
const routeData = [
{
route: LINKS.HOME,
name: "Beranda",
},
{
route: LINKS.PRODUCT,
name: <span style={{ fontWeight: "bold" }}>Produk</span>,
},
{
route: LINKS.PRODUCT_DETAIL.replace(":id", `${id}`),
name: <span style={{ fontWeight: "bold" }}>Detail Produk</span>,
},
];
useEffect(() => {
(async () => {
modalLoader.setLoading(true);
await Promise.allSettled([
store.product.getPriceHistoryByProduct(id),
store.product.getDetailProduct(id),
]);
modalLoader.setLoading(false);
})();
}, []);
const columns = [
{
title: "Markup Price",
dataIndex: "mark_up_price",
key: "mark_up_price",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
title: "Price",
dataIndex: "price",
key: "price",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
title: "Tanggal Berlaku",
dataIndex: "startDate",
key: "startDate",
render: (text) => {
return (
<Text>{text ? format(parseISO(text), "dd MMMM yyyy") : "-"}</Text>
);
},
},
{
title: "Tanggal Berakhir",
dataIndex: "endDate",
key: "endDate",
render: (text) => {
return (
<Text>
{text ? format(parseISO(text), "dd MMMM yyyy") : "Sampai Sekarang"}
</Text>
);
},
},
];
const styleSaldoTitle = store.ui.mediaQuery.isDesktop
? {
display: "flex",
justifyContent: "center",
}
: { fontSize: "0.75rem" };
const styleSaldoContent = store.ui.mediaQuery.isDesktop
? {
fontSize: "1.25rem",
display: "flex",
justifyContent: "center",
}
: null;
return (
<div className={[""].join(" ")}>
<BreadcumbComponent data={routeData} />
<Card>
<Title strong>Product Detail</Title>
<Row style={{ marginBottom: 20 }}>
<Col lg={12} xs={24}>
<Row>
<Col span={12}>
<Text strong>Kode</Text>
</Col>
<Col span={12}>
<Text>{store.product?.dataDetailProduct?.code}</Text>
</Col>
<Col span={12}>
<Text strong>Nama Produk</Text>
</Col>
<Col span={10}>
<Text>{store.product?.dataDetailProduct?.name}</Text>
</Col>
<Col span={12}>
<Text strong>Supplier</Text>
</Col>
<Col span={12}>
<Text>{store.product?.dataDetailProduct?.supplier?.name}</Text>
</Col>
<Col span={12}>
<Text strong>Status</Text>
</Col>
<Col span={12}>
<Text>{store.product?.dataDetailProduct?.status}</Text>
</Col>
</Row>
</Col>
</Row>
<Row>
<Col span={24}>
<div>
<Title strong level={3}>
Product Price History
</Title>
<Table
columns={columns}
dataSource={store.product.dataPriceHistory}
bordered
pagination={{
pageSize: store.product.pageSizePriceHistory,
total: store.product.totalDataPriceHistory,
current: store.product.pagePriceHistory + 1,
showSizeChanger: true,
simple: false,
}}
onChange={async (page) => {
let pageNumber = page.current;
store.product.pageSizePriceHistory = page.pageSize;
store.product.pagePriceHistory = pageNumber - 1;
modalLoader.setLoading(true);
await store.product.getPriceHistoryByProduct(id);
modalLoader.setLoading(false);
}}
/>
</div>
</Col>
</Row>
<div />
</Card>
</div>
);
});

69
src/pages/Product/Subcategory.js Normal file
View File

@@ -0,0 +1,69 @@
import React, { useContext, useEffect } from "react";
import { Button, Card, Col, Input, message, Row } from "antd";
import { PlusSquareOutlined } from "@ant-design/icons";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { LINKS } from "../../routes/app";
import { SubcategoryComponent } from "../../component/SubcategoryComponent";
import { ModalLoaderContext } from "../../utils/modal";
const { Search } = Input;
export const Subcategory = observer(() => {
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
useEffect(() => {
const init = async () => {
try {
modalLoader.setLoading(true);
await getData();
modalLoader.setLoading(false);
} catch (e) {
modalLoader.setLoading(false);
if (e.response?.body?.message) {
message.error(e.response.body.message);
return;
}
message.error(e.message);
}
};
init();
}, []);
const getData = async () => {
await store.category.getData();
await store.subcategory.getData();
};
const routeData = [
{
route: LINKS.HOME,
name: "Beranda",
},
{
route: LINKS.SUBCATEGORY,
name: <span style={{ fontWeight: "bold" }}>Sub Kategori</span>,
},
];
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} />
<Card>
<Row style={{ marginBottom: 20 }}>
<Col span={24} style={{ textAlign: "right" }}>
<Button
onClick={() => (store.subcategory.visibleModalSubcategory = true)}
>
<PlusSquareOutlined /> New
</Button>
</Col>
</Row>
<SubcategoryComponent />
</Card>
</div>
);
});

542
src/pages/Profile/Profile.js Normal file
View File

@@ -0,0 +1,542 @@
import React, { useContext, useEffect, useState } from "react";
import {
Button,
Card,
Col,
Row,
Table,
Typography,
DatePicker,
Modal,
Form,
Input,
Divider,
List,
Image,
Tag,
} from "antd";
import moment from "moment";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { FilterOutlined } from "@ant-design/icons";
import { format, parseISO } from "date-fns";
import { appConfig } from "../../config/app";
import { ModalLoaderContext } from "../../utils/modal";
const { Title, Text } = Typography;
const { RangePicker } = DatePicker;
export const Profile = observer(() => {
const store = useStore();
const [form] = Form.useForm();
const modalLoader = useContext(ModalLoaderContext);
const [filterStart, setFilterStart] = useState([]);
const [filterEnd, setFilterEnd] = useState([]);
const routeData = [
{
route: LINKS.HOME,
name: "Beranda",
},
{
route: LINKS.PROFILE,
name: <span style={{ fontWeight: "bold" }}>Profil</span>,
},
];
const dataRoute = [
{
route: LINKS.PROFILE,
name: "Profil",
},
];
useEffect(() => {
(async () => {
modalLoader.setLoading(true);
await Promise.allSettled([
store.authentication.getProfile(),
store.transaction.getDataHistoryTransaction(),
]);
modalLoader.setLoading(false);
})();
}, []);
const handleRemoveFilter = async () => {
store.transaction.filterStart = null;
store.transaction.filterEnd = null;
form.resetFields();
setFilterStart([]);
setFilterEnd([]);
await store.transaction.getDataHistoryTransaction();
store.transaction.visibleModalFilterTransaction = false;
};
const handleCancelFilter = async () => {
store.transaction.filterStart = null;
//form.resetFields();
store.transaction.filterEnd = null;
store.transaction.visibleModalFilterTransaction = false;
await store.transaction.getDataHistoryTransaction();
};
const handleSubmitFilter = async () => {
const data = form.getFieldsValue();
const awal = (store.transaction.filterStart = moment(
data.start_date
).format("YYYY-MM-DD HH:mm:ss"));
const akhir = (store.transaction.filterEnd = moment(data.end_date).format(
"YYYY-MM-DD HH:mm:ss"
));
modalLoader.setLoading(true);
await store.transaction.getDataHistoryTransaction();
modalLoader.setLoading(false);
store.transaction.filterStart = null;
store.transaction.filterEnd = null;
//form.resetFields();
store.transaction.visibleModalFilterTransaction = false;
};
const footerLayoutFilter = [
<Button
key={"remove"}
onClick={handleRemoveFilter}
style={{
backgroundColor: "#e74e5e",
color: "#fff",
}}
>
Remove Filter
</Button>,
<Button key={"cancel"} onClick={handleCancelFilter}>
Cancel
</Button>,
<Button
key={"submit"}
onClick={handleSubmitFilter}
style={{
backgroundColor: "#4e79e7",
color: "#fff",
}}
>
Apply
</Button>,
];
const columns = [
{
title: "Name Produk",
dataIndex: "name",
key: "name",
},
{
title: "Price",
dataIndex: "price",
key: "price",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
title: "Pembeli",
dataIndex: "buyer",
key: "buyer",
width: "10%",
},
{
title: "Tujuan",
dataIndex: "transaction_destination",
key: "transaction_destination",
},
{
title: "Kode Transaksi",
dataIndex: "transaction_code",
key: "transaction_code",
},
{
title: "Status",
dataIndex: "status",
key: "status",
render: (text, record) => {
return (
<Tag
color={
record.status === 1
? "success"
: record.status === 0
? "warning"
: "processing"
}
>
{record.status === 1
? "Success"
: record.status === 0
? "Pending"
: "Failed"}
</Tag>
);
},
},
{
title: "No Seri",
dataIndex: "seri_number",
key: "seri_number",
},
{
title: "IDTrx Mitra",
dataIndex: "partner_transaction_code",
key: "partner_transaction_code",
},
{
title: "Tanggal Transaksi",
dataIndex: "created_at",
key: "created_at",
width: "15%",
render: (text, record) => {
return (
<Text>
{format(parseISO(record.created_at), "dd-MM-yyyy HH:mm:ss")}
</Text>
);
},
},
{
title: "Alasan Gagal",
dataIndex: "failed_reason",
key: "failed_reason",
},
];
const styleSaldoTitle = store.ui.mediaQuery.isDesktop
? {
display: "flex",
justifyContent: "center",
}
: { fontSize: "0.75rem" };
const styleSaldoContent = store.ui.mediaQuery.isDesktop
? {
fontSize: "1.25rem",
display: "flex",
justifyContent: "center",
}
: null;
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent
data={
store.authentication.userData.role === "Admin" ||
store.authentication.userData.role === "Admin Partner"
? routeData
: dataRoute
}
/>
<Card>
<Title strong>Profile</Title>
<Row style={{ marginBottom: 20 }}>
<Col lg={12} xs={24}>
<Row>
<Col span={12}>
<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>
{store.authentication.userData.role === "Retail" && (
<Row>
<Col span={12}>
<Text strong>Foto Identitas</Text>
</Col>
<Col span={12}></Col>
<Col span={12}>
<Text>
<Image
src={
store.authentication.profileData.userDetail
?.image_identity
? `${appConfig.apiUrl}/config/image/${store.authentication.profileData.userDetail?.image_identity}`
: "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
}
style={{ width: "10vw" }}
/>
</Text>
</Col>
<Col span={24}>
<Text strong>Foto Toko</Text>
<Text>
<Row>
{store.authentication.imageProfil.map((item) => (
<Image
src={
item
? `${appConfig.apiUrl}/config/image/${item}`
: "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
}
style={{ width: "10vw", marginRight: 15 }}
/>
))}
</Row>
</Text>
</Col>
</Row>
)}
</Row>
</Col>
<Col span={store.ui.mediaQuery.isMobile ? 24 : 5}>
<Row justify={"center"}>
<Col lg={12} xs={12}>
<Title strong level={3} style={styleSaldoTitle}>
Saldo
</Title>
</Col>
<Col lg={24} xs={12}>
<Text style={styleSaldoContent}>
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(store.authentication.profileData?.wallet || 0)}
</Text>
</Col>
<Col></Col>
</Row>
</Col>
{store.authentication.userData.role != "Admin Partner" &&
store.authentication.userData.role != "Retail" && (
<Col span={store.ui.mediaQuery.isMobile ? 24 : 5}>
<Row justify={"center"}>
<Col lg={12} xs={12}>
<Title strong level={3} style={styleSaldoTitle}>
Profit
</Title>
</Col>
<Col lg={24} xs={12}>
<Text style={styleSaldoContent}>
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(store.authentication.profileData?.profit || 0)}
</Text>
</Col>
<Col></Col>
</Row>
</Col>
)}
</Row>
<Row>
<Col span={24}>
<div>
<Title strong level={3}>
History Transaction
</Title>
<Button
style={{ marginBottom: "1rem" }}
onClick={() => {
store.transaction.visibleModalFilterTransaction = true;
}}
>
<FilterOutlined />
Filter
</Button>
{store.ui.mediaQuery.isDesktop && (
<Table
columns={columns}
bordered
scroll={{ x: 1300 }}
//scroll={{ x: 1500, y: 300 }}
dataSource={store.transaction.dataHistoryTransaction}
pagination={{
pageSize: store.transaction.pageSizeHistoryTransaction,
total: store.transaction.total_dataHistoryTransaction,
current: store.transaction.pageHistoryTransaction + 1,
showSizeChanger: true,
simple: false,
}}
onChange={async (page) => {
let pageNumber = page.current;
store.transaction.pageSizeHistoryTransaction =
page.pageSize;
store.transaction.pageHistoryTransaction = pageNumber - 1;
modalLoader.setLoading(true);
await store.transaction.getDataHistoryTransaction();
modalLoader.setLoading(false);
}}
/>
)}
{store.ui.mediaQuery.isMobile && (
<List
itemLayout="horizontal"
position={"top"}
dataSource={store.transaction.dataHistoryTransaction}
pagination={{
onChange: async (page, pageSize) => {
console.log(page, "Page");
console.log(pageSize, "Page size");
store.transaction.pageSizeHistoryTransaction = pageSize;
store.transaction.pageHistoryTransaction = page - 1;
modalLoader.setLoading(true);
await store.transaction.getDataHistoryTransaction();
modalLoader.setLoading(false);
},
pageSize: store.transaction.pageSizeHistoryTransaction,
total: store.transaction.total_dataHistoryTransaction,
current: store.transaction.pageHistoryTransaction + 1,
style: { marginBottom: "1rem", marginRight: "1rem" },
}}
style={{ padding: 0 }}
renderItem={(item) => {
return (
<div>
<List.Item
key={item.id}
style={{
backgroundColor: "#ffffff",
paddingTop: 0,
paddingBottom: 0,
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
}}
>
<List.Item.Meta
className={["cariparkir-container"].join(" ")}
title={item.buyer}
description={
<div style={{}}>
<p>
<small>Price : {item.price}</small> <br />
<small>
Tujuan : {item.transaction_destination}
</small>{" "}
<br />
<small>
Kode Transaksi : {item.transaction_code}
</small>{" "}
<br />
<small>
Status :{" "}
{
<Tag
color={
item.status === 1
? "success"
: item.status === 0
? "warning"
: "processing"
}
>
{item.status === 1
? "Success"
: item.status === 0
? "Pending"
: "Failed"}
</Tag>
}
</small>{" "}
<br />
<small>
No.Seri : {item.seri_number}
</small>{" "}
<br />
<small>
Alasan Gagal : {item.failed_reason}
</small>{" "}
<br />
<small>
IDTrx Mitra :{" "}
{item.partner_transaction_code}
</small>{" "}
<br />
<small>
Transaction Date :{" "}
{format(
parseISO(item.created_at),
"dd-MM-yyyy"
)}
</small>{" "}
<br />
</p>
</div>
}
/>
</List.Item>
<Divider plain style={{ margin: 0 }} />
</div>
);
}}
/>
)}
</div>
</Col>
</Row>
<div />
</Card>
<Modal
visible={store.transaction.visibleModalFilterTransaction}
title={"Filter"}
footer={footerLayoutFilter}
onCancel={async () => {
//form.resetFields();
store.transaction.filterStart = null;
store.transaction.filterEnd = null;
store.transaction.visibleModalFilterTransaction = false;
await store.transaction.getDataHistoryTransaction();
}}
>
<Row>
<Col span={24}>
<Form layout="vertical" name="filter" form={form}>
<Form.Item
name="start_date"
label="Dari"
rules={[{ required: true, message: "Please input Date!" }]}
>
<DatePicker style={{ width: "100%" }} />
</Form.Item>
<Form.Item
name="end_date"
label="Sampai"
rules={[{ required: true, message: "Please input Date!" }]}
>
<DatePicker style={{ width: "100%" }} />
</Form.Item>
</Form>
</Col>
</Row>
</Modal>
</div>
);
});

279
src/pages/Transaction/Product.js Normal file
View File

@@ -0,0 +1,279 @@
import React, { useContext, useEffect, useState } from "react";
import { useStore } from "../../utils/useStore";
import {
Card,
Col,
Form,
Input,
message,
Modal,
Row,
Select,
Button,
} from "antd";
import { observer } from "mobx-react-lite";
import { ModalLoaderContext } from "../../utils/modal";
const { Search } = Input;
const { Option } = Select;
export const Product = observer(() => {
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
const [form] = Form.useForm();
const [visibleModalBuy, setVisibleModalBuy] = useState(false);
const [barang, setBarang] = useState({});
useEffect(() => {
const init = async () => {
try {
modalLoader.setLoading(true);
await Promise.allSettled([
store.transaction.getDataSubCategories(),
store.transaction.getDataCategories(),
]);
modalLoader.setLoading(false);
} catch (e) {
modalLoader.setLoading(false);
if (e.response?.body?.message) {
message.error(e.response.body.message);
return;
}
message.error(e.message);
}
};
init();
}, []);
const handleChangeSubcategory = async (item) => {
store.transaction.filterSubCategory = item;
modalLoader.setLoading(true);
await store.transaction.getData();
modalLoader.setLoading(false);
};
const handleBuyProduct = async (data, productCode) => {
modalLoader.setLoading(true);
try {
const response = await store.transaction.buyProd({
...data,
productCode: productCode,
});
if (response.status === 201) {
message.success(response?.body?.message || "Berhasil Beli Produk");
} else {
message.error(response?.body?.error || "Gagal Beli Produk", 3);
}
} catch (e) {
console.log("testingan");
console.log(e.response, "testingan");
console.log(e.result, "testingan1");
if (e.response?.body?.error) {
message.error(e.response.body.error);
setVisibleModalBuy(false);
modalLoader.setLoading(false);
return;
}
console.log(e, "apa errornya");
message.error("Gagal Beli Product");
}
setVisibleModalBuy(false);
modalLoader.setLoading(false);
};
const handleBuyStag = async (data, productCode) => {
modalLoader.setLoading(true);
try {
const response = await store.transaction.buyProduct({
...data,
productCode: productCode,
});
if (response.status === 201) {
message.success(response?.body?.message || "Berhasil Beli Produk");
} else {
message.error(response?.body?.error || "Gagal Beli Produk", 3);
}
} catch (e) {
console.log("testingan");
console.log(e.response, "testingan");
console.log(e.result, "testingan1");
if (e.response?.body?.error) {
message.error(e.response.body.error);
setVisibleModalBuy(false);
modalLoader.setLoading(false);
return;
}
console.log(e, "apa errornya");
message.error("Gagal Beli Product");
}
// setDataProd(false);
// setDataStag(false);
setVisibleModalBuy(false);
modalLoader.setLoading(false);
};
const handleCancel = () => {
form.resetFields();
setVisibleModalBuy(false);
};
return (
<div>
<Row>
<span style={{ fontWeight: "bold", marginBottom: "10px" }}>
Sub Category
</span>
</Row>
<Row>
<Col span={24}>
<Select
placeholder={"Select Sub Category"}
allowClear={true}
onChange={(val) => handleChangeSubcategory(val)}
style={{ marginBottom: "10px", width: "100%" }}
value={store.transaction.filterSubCategory}
>
{store.transaction.dataSubCategories.map((item, index) => (
<Option key={item.id} value={item.id}>
{item.name}
</Option>
))}
</Select>
</Col>
</Row>
<Row justify={"center"} align={"center"} style={{ marginBottom: "1rem" }}>
<Col
span={12}
style={{ fontWeight: "bold", display: "flex", alignItems: "center" }}
>
Produk & Nominal
</Col>
<Col span={12} style={{ textAlign: "right" }}>
{/* <Search
placeholder="input search text"
style={{ width: 200, marginRight: 10 }}
/> */}
</Col>
</Row>
{store.transaction.data.length != 0 && (
<Row>
{store.transaction.data.map((item, index) => (
<Col key={index} xs={24} md={16} lg={8}>
<Card
onClick={() => {
setVisibleModalBuy(true);
setBarang(item);
}}
hoverable
style={{
cursor: "pointer",
marginLeft: 10,
borderColor: "salmon",
height: 100,
marginBottom: 10,
}}
>
<span style={{ color: "black" }}>{item?.product_name}</span>
<br />
<span style={{ color: "grey", fontSize: 10 }}>
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(item?.price)}
</span>
</Card>
</Col>
))}
</Row>
)}
<Modal
visible={visibleModalBuy}
title={`Are you sure buy ${barang?.product_name}?`}
okText={"Confirm"}
onCancel={() => {
form.resetFields();
setVisibleModalBuy(false);
}}
// footer={footerLayoutFilter}
footer={[
<Button
key="back"
style={{
backgroundColor: "#e74e5e",
color: "#fff",
}}
onClick={() => {
form.resetFields();
handleCancel();
}}
>
Cancel
</Button>,
<Button
key="Buy Prod"
style={{
backgroundColor: "#4e79e7",
color: "#fff",
}}
onClick={() => {
form
.validateFields()
.then((values) => {
console.log(values, "isi form");
handleBuyProduct(values, barang.product_code);
form.resetFields();
})
.catch((info) => {
console.error("Validate Failed:", info);
});
}}
>
Buy Prod
</Button>,
<Button
key="Buy Stag"
type="primary"
onClick={() => {
form
.validateFields()
.then((values) => {
console.log(values, "isi form");
handleBuyStag(values, barang.product_code);
form.resetFields();
})
.catch((info) => {
console.error("Validate Failed:", info);
});
}}
>
Buy Staging
</Button>,
]}
>
<Form form={form} layout="vertical">
<Form.Item
name="destination"
label="Destination"
rules={[
{
required: true,
message: "Please input Destination Number!",
},
// {
// pattern: /^(?:\d*)$/,
// message: "Value should contain just number",
// },
// {
// pattern: /^[\d]{1,12}$/,
// message: "Value should be 1 - 12 character",
// },
]}
>
<Input />
</Form.Item>
</Form>
</Modal>
</div>
);
});

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

@@ -1,67 +1,88 @@
import React from "react";
import {Button, Card, Col, Input, Row, Tabs} from "antd";
import {FilterOutlined,} from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {Pulsa} from "./Pulsa";
import React, { message, useContext, useEffect, useState } from "react";
import { useStore } from "../../utils/useStore";
import {
Card,
Tabs,
Col,
Button,
Typography,
Select,
Modal,
Row,
DatePicker,
} from "antd";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { Product } from "./Product";
import { LINKS } from "../../routes/app";
import { observer } from "mobx-react-lite";
import { ModalLoaderContext } from "../../utils/modal";
import { FilterOutlined } from "@ant-design/icons";
const {TabPane} = Tabs;
const {Search} = Input;
const { TabPane } = Tabs;
export const Transaction = observer(() => {
const store = useStore();
const { Title } = Typography;
const { Option } = Select;
const modalLoader = useContext(ModalLoaderContext);
export const Transaction = () => {
const callback = (key) => {
console.log(key);
useEffect(() => {
const init = async () => {
try {
modalLoader.setLoading(true);
await store.transaction.getDataCategories();
modalLoader.setLoading(false);
} catch (e) {
modalLoader.setLoading(false);
if (e.response?.body?.message) {
message.error(e.response.body.message);
return;
}
message.error(e.message);
}
};
init();
}, []);
const handleChangeTabs = async (key) => {
modalLoader.setLoading(true);
store.transaction.dataSubCategories = [];
store.transaction.data = [];
store.transaction.filterSubCategory = null;
store.transaction.filterCategory = key;
await store.transaction.getDataSubCategories();
modalLoader.setLoading(false);
};
const routeData = [
{
route: "/app/home",
name: "Home",
},
{
route: "/app/transaction",
name: <span style={{fontWeight: 'bold'}}>Transaction</span>,
route: LINKS.TRANSACTION,
name: "Transaksi"
},
];
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} text=""/>
<Card>
<Row style={{marginBottom: 20}}>
<Col span={12}>
<Button>
<FilterOutlined/>
Filter
</Button>
</Col>
<Col span={12} style={{textAlign: "right"}}>
<Search
placeholder="input search text"
style={{width: 200, marginRight: 10}}
/>
</Col>
</Row>
<Tabs
defaultActiveKey="1"
onChange={callback}
size="default"
tabBarGutter="50"
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} text="" />
<Card>
<Col span={12} style={{ marginBottom: 30 }}>
{/* <Button
onClick={() => {
store.transaction.visibleModalFilterTransaction = true;
}}
>
<TabPane tab="Pulsa" key="1">
<Pulsa/>
<FilterOutlined />
Filter
</Button> */}
</Col>
<Tabs onChange={handleChangeTabs} size="default" tabBarGutter="50">
{store.transaction.dataCategories.map((item, index) => (
<TabPane tab={item.name} key={item.id}>
<Product />
</TabPane>
<TabPane tab="Game Voucher" key="2">
Game Voucher
</TabPane>
<TabPane tab="Product" key="3">
Product
</TabPane>
<TabPane tab="Prduct" key="4">
Product
</TabPane>
<TabPane tab="Prdct" key="5">
Product
</TabPane>
</Tabs>
</Card>
</div>
))}
</Tabs>
</Card>
</div>
);
};
});