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

Merge branch 'develop' into 'main'

Browse Source 
Develop

See merge request empatnusabangsa/ppob/ppob-frontend!132
This commit is contained in:
ilham dwi pratama 2022-02-04 12:02:50 +00:00
commit 80e1e5bf7b
27 changed files with 1165 additions and 540 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/component/CategoryComponent.js
View File

@ -8,7 +8,7 @@ import {
Space, Space,
Table, Table,
List, List,
Divider Divider,
} from "antd"; } from "antd";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
@ -40,12 +40,12 @@ export const CategoryComponent = observer((props) => {
key: "code", key: "code",
}, },
{ {
title: "Category Name", title: "Kategori",
dataIndex: "name", dataIndex: "name",
key: "name", key: "name",
}, },
{ {
title: "Action", title: "Tindakan",
key: "action", key: "action",
render: (text, record) => ( render: (text, record) => (
<Space size="middle"> <Space size="middle">
@ -55,6 +55,8 @@ export const CategoryComponent = observer((props) => {
}, },
]; ];
if (store.authentication.userData.role === "Customer Service") columns.pop();
const deleteData = async (id) => { const deleteData = async (id) => {
try { try {
console.log(id); console.log(id);
@ -209,7 +211,7 @@ export const CategoryComponent = observer((props) => {
visible={store.category.visibleModalCategory} visible={store.category.visibleModalCategory}
title={idData ? "Edit Category" : "Create a new Category"} title={idData ? "Edit Category" : "Create a new Category"}
okText={idData ? "Edit" : "Create"} okText={idData ? "Edit" : "Create"}
cancelText="Cancel" cancelText="Batal"
onCancel={() => { onCancel={() => {
form.resetFields(); form.resetFields();
handleCancel(); handleCancel();

10
src/component/CommissionComponent.js
View File

@ -23,18 +23,18 @@ export const CommissionComponent = observer((props) => {
const columns = [ const columns = [
{ {
title: "Name", title: "Nama",
dataIndex: "name", dataIndex: "name",
key: "name", key: "name",
}, },
{ {
title: "Amount", title: "Nominal",
dataIndex: "commission", dataIndex: "commission",
key: "commission", key: "commission",
render: (text) => <span>{text}%</span>, render: (text) => <span>{text}%</span>,
}, },
{ {
title: "Action", title: "Tindakan",
key: "action", key: "action",
render: (text, record) => ( render: (text, record) => (
<Space size="middle"> <Space size="middle">
@ -44,6 +44,8 @@ export const CommissionComponent = observer((props) => {
}, },
]; ];
if (store.authentication.userData.role === "Customer Service") columns.pop();
const handleCancel = () => { const handleCancel = () => {
setIdData(""); setIdData("");
store.commission.visibleModalCommission = false; store.commission.visibleModalCommission = false;
@ -93,7 +95,7 @@ export const CommissionComponent = observer((props) => {
visible={store.commission.visibleModalCommission} visible={store.commission.visibleModalCommission}
title={"Edit Commission"} title={"Edit Commission"}
okText={"Edit"} okText={"Edit"}
cancelText="Cancel" cancelText="Batal"
onCancel={() => { onCancel={() => {
form.resetFields(); form.resetFields();
handleCancel(); handleCancel();

18
src/component/PartnerComponent.js
View File

@ -71,7 +71,7 @@ export const PartnerComponent = observer((props) => {
const columns = [ const columns = [
{ {
title: "Name", title: "Nama",
dataIndex: "name", dataIndex: "name",
key: "name", key: "name",
}, },
@ -86,7 +86,7 @@ export const PartnerComponent = observer((props) => {
key: "npwp", key: "npwp",
}, },
{ {
title: "Address", title: "Alamat",
dataIndex: "address", dataIndex: "address",
key: "address", key: "address",
}, },
@ -104,7 +104,7 @@ export const PartnerComponent = observer((props) => {
), ),
}, },
{ {
title: "Action", title: "Tindakan",
key: "action", key: "action",
render: (text, record) => ( render: (text, record) => (
<Space size="middle"> <Space size="middle">
@ -124,6 +124,8 @@ export const PartnerComponent = observer((props) => {
}, },
]; ];
if (store.authentication.userData.role === "Customer Service") columns.pop();
const deleteData = async (id) => { const deleteData = async (id) => {
try { try {
modalLoader.setLoading(true); modalLoader.setLoading(true);
@ -143,12 +145,12 @@ export const PartnerComponent = observer((props) => {
icon: <ExclamationCircleOutlined />, icon: <ExclamationCircleOutlined />,
okText: "Yes", okText: "Yes",
okType: "primary", okType: "primary",
cancelText: "Cancel", cancelText: "Batal",
onOk() { onOk() {
return deleteData(id); return deleteData(id);
}, },
onCancel() { onCancel() {
console.log("Cancel"); console.log("Batal");
}, },
}); });
}; };
@ -273,7 +275,7 @@ export const PartnerComponent = observer((props) => {
<div style={{ marginBottom: 10 }}> <div style={{ marginBottom: 10 }}>
<small>Nama : {item.name}</small> <br /> <small>Nama : {item.name}</small> <br />
<small>Npwp : {item.npwp}</small> <br /> <small>Npwp : {item.npwp}</small> <br />
<small>Address : {item.address}</small> <small>Alamat : {item.address}</small>
</div> </div>
<Space size="small"> <Space size="small">
<Button <Button
@ -333,7 +335,7 @@ export const PartnerComponent = observer((props) => {
: "Create a new partner" : "Create a new partner"
} }
okText={idData ? "Edit" : "Create"} okText={idData ? "Edit" : "Create"}
cancelText="Cancel" cancelText="Batal"
onCancel={() => { onCancel={() => {
form.resetFields(); form.resetFields();
handleCancel(); handleCancel();
@ -450,7 +452,7 @@ export const PartnerComponent = observer((props) => {
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="address" name="address"
label="Address" label="Alamat"
rules={[ rules={[
idData idData
? { required: false } ? { required: false }

20
src/component/ProductComponent.js
View File

@ -95,7 +95,7 @@ export const ProductComponent = observer((props) => {
key: "supplier_name", key: "supplier_name",
}, },
{ {
title: "Sub Category", title: "Sub Kategori",
dataIndex: "sub_categories_name", dataIndex: "sub_categories_name",
key: "sub_categories_name", key: "sub_categories_name",
}, },
@ -113,7 +113,7 @@ export const ProductComponent = observer((props) => {
), ),
}, },
{ {
title: "Action", title: "Tindakan",
key: "action", key: "action",
render: (text, record) => ( render: (text, record) => (
<Button <Button
@ -156,12 +156,12 @@ export const ProductComponent = observer((props) => {
icon: <ExclamationCircleOutlined />, icon: <ExclamationCircleOutlined />,
okText: "Yes", okText: "Yes",
okType: "primary", okType: "primary",
cancelText: "Cancel", cancelText: "Batal",
onOk() { onOk() {
return deleteData(id); return deleteData(id);
}, },
onCancel() { onCancel() {
console.log("Cancel"); console.log("Batal");
}, },
}); });
}; };
@ -241,10 +241,10 @@ export const ProductComponent = observer((props) => {
color: "#fff", color: "#fff",
}} }}
> >
Remove Filter Hapus Filter
</Button>, </Button>,
<Button key={"cancel"} onClick={handleCancelFilter}> <Button key={"cancel"} onClick={handleCancelFilter}>
Cancel Batal
</Button>, </Button>,
<Button <Button
key={"submit"} key={"submit"}
@ -254,7 +254,7 @@ export const ProductComponent = observer((props) => {
color: "#fff", color: "#fff",
}} }}
> >
Apply Terapkan
</Button>, </Button>,
]; ];
@ -349,8 +349,8 @@ export const ProductComponent = observer((props) => {
<div style={{}}> <div style={{}}>
<p> <p>
<small>{item.product_name}</small> <br /> <small>{item.product_name}</small> <br />
<small>Harga Beli : {item.current_price_price}</small> {/* <small>Harga Beli : {item.current_price_price}</small>
<br /> <br /> */}
<small>Harga Jual : {item.mark_up_price}</small> <small>Harga Jual : {item.mark_up_price}</small>
</p> </p>
<p></p> <p></p>
@ -387,7 +387,7 @@ export const ProductComponent = observer((props) => {
visible={store.product.visibleModalProduct} visible={store.product.visibleModalProduct}
title={idData ? "Edit Product" : "Create a new Product"} title={idData ? "Edit Product" : "Create a new Product"}
okText={idData ? "Edit" : "Create"} okText={idData ? "Edit" : "Create"}
cancelText="Cancel" cancelText="Batal"
onCancel={() => { onCancel={() => {
form.resetFields(); form.resetFields();
handleCancel(); handleCancel();

12
src/component/SubcategoryComponent.js
View File

@ -42,22 +42,22 @@ export const SubcategoryComponent = observer((props) => {
const columns = [ const columns = [
{ {
title: "Code", title: "Kode",
dataIndex: "code", dataIndex: "code",
key: "code", key: "code",
}, },
{ {
title: "Sub Category Name", title: "Sub Kategori",
dataIndex: "name", dataIndex: "name",
key: "name", key: "name",
}, },
{ {
title: "Category", title: "Kategori",
dataIndex: "categoryName", dataIndex: "categoryName",
key: "categoryName", key: "categoryName",
}, },
{ {
title: "Action", title: "Tindakan",
key: "action", key: "action",
render: (text, record) => ( render: (text, record) => (
<Space size="middle"> <Space size="middle">
@ -67,6 +67,8 @@ export const SubcategoryComponent = observer((props) => {
}, },
]; ];
if (store.authentication.userData.role === "Customer Service") columns.pop();
const handleCancel = () => { const handleCancel = () => {
setIdData(""); setIdData("");
store.subcategory.visibleModalSubcategory = false; store.subcategory.visibleModalSubcategory = false;
@ -214,7 +216,7 @@ export const SubcategoryComponent = observer((props) => {
visible={store.subcategory.visibleModalSubcategory} visible={store.subcategory.visibleModalSubcategory}
title={idData ? "Edit Sub Category" : "Create a new sub category"} title={idData ? "Edit Sub Category" : "Create a new sub category"}
okText={idData ? "Edit" : "Create"} okText={idData ? "Edit" : "Create"}
cancelText="Cancel" cancelText="Batal"
onCancel={() => { onCancel={() => {
form.resetFields(); form.resetFields();
handleCancel(); handleCancel();

12
src/component/SupplierComponent.js
View File

@ -65,7 +65,7 @@ export const SupplierComponent = observer((props) => {
const columns = [ const columns = [
{ {
title: "Name", title: "Nama",
dataIndex: "name", dataIndex: "name",
key: "name", key: "name",
}, },
@ -112,7 +112,7 @@ export const SupplierComponent = observer((props) => {
), ),
}, },
{ {
title: "Action", title: "Tindakan",
key: "action", key: "action",
width: "20%", width: "20%",
render: (text, record) => ( render: (text, record) => (
@ -130,6 +130,8 @@ export const SupplierComponent = observer((props) => {
}, },
]; ];
if (store.authentication.userData.role === "Customer Service") columns.pop();
const deleteData = async (id) => { const deleteData = async (id) => {
try { try {
console.log(id); console.log(id);
@ -151,12 +153,12 @@ export const SupplierComponent = observer((props) => {
icon: <ExclamationCircleOutlined />, icon: <ExclamationCircleOutlined />,
okText: "Yes", okText: "Yes",
okType: "primary", okType: "primary",
cancelText: "Cancel", cancelText: "Batal",
onOk() { onOk() {
return deleteData(id); return deleteData(id);
}, },
onCancel() { onCancel() {
console.log("Cancel"); console.log("Batal");
}, },
}); });
}; };
@ -342,7 +344,7 @@ export const SupplierComponent = observer((props) => {
visible={store.supplier.visibleModalSupplier} visible={store.supplier.visibleModalSupplier}
title={idData ? "Edit Supplier" : "Create a new Supplier"} title={idData ? "Edit Supplier" : "Create a new Supplier"}
okText={idData ? "Edit" : "Create"} okText={idData ? "Edit" : "Create"}
cancelText="Cancel" cancelText="Batal"
onCancel={() => { onCancel={() => {
form.resetFields(); form.resetFields();
handleCancel(); handleCancel();

4
src/component/TopupsaldoModal.js
View File

@ -34,7 +34,7 @@ export const TopupsaldoModal = observer((props) => {
visible={store.supplier.visibleModalTransaction} visible={store.supplier.visibleModalTransaction}
title="Top Up Saldo" title="Top Up Saldo"
okText="Top Up" okText="Top Up"
cancelText="Cancel" cancelText="Batal"
onCancel={() => { onCancel={() => {
form.resetFields(); form.resetFields();
handleCancelTransaction(); handleCancelTransaction();
@ -66,7 +66,7 @@ export const TopupsaldoModal = observer((props) => {
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="amount" name="amount"
label="Amount" label="Nominal"
rules={[{ required: true, message: "Please input amount!" }]} rules={[{ required: true, message: "Please input amount!" }]}
> >
<InputNumber <InputNumber

4
src/constants/payback.js
View File

@ -2,6 +2,6 @@ export const PAYBACK_STATUS = {
0: 'Pending', 0: 'Pending',
1: 'Success', 1: 'Success',
2: 'Failed', 2: 'Failed',
3: 'Approved', 3: 'Disetujui',
4: 'Rejected', 4: 'Ditolak',
} }

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

@ -25,7 +25,7 @@ import {
DollarCircleOutlined, DollarCircleOutlined,
UsergroupAddOutlined, UsergroupAddOutlined,
UnorderedListOutlined, UnorderedListOutlined,
FormOutlined FormOutlined,
} from "@ant-design/icons"; } from "@ant-design/icons";
import { AppRoute, LINKS } from "../../routes/app"; import { AppRoute, LINKS } from "../../routes/app";
import { useStore } from "../../utils/useStore"; import { useStore } from "../../utils/useStore";
@ -129,7 +129,8 @@ export const DesktopLayout = observer(() => {
}} }}
> >
<Menu> <Menu>
{store.authentication.userData.role === "Admin" && ( {(store.authentication.userData.role === "Admin" ||
store.authentication.userData.role === "Customer Service") && (
<Menu.Item key="home"> <Menu.Item key="home">
<Link to={LINKS.HOME}> <Link to={LINKS.HOME}>
<HomeOutlined /> <HomeOutlined />
@ -145,7 +146,8 @@ export const DesktopLayout = observer(() => {
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
{store.authentication.userData.role === "Admin" && ( {(store.authentication.userData.role === "Admin" ||
store.authentication.userData.role === "Customer Service") && (
<SubMenu <SubMenu
key="keanggotaan" key="keanggotaan"
icon={<UsergroupAddOutlined />} icon={<UsergroupAddOutlined />}
@ -154,7 +156,7 @@ export const DesktopLayout = observer(() => {
<Menu.Item key="membership"> <Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}> <Link to={LINKS.MEMBERSHIP}>
<UnorderedListOutlined /> <UnorderedListOutlined />
<span>List Anggota</span> <span>Daftar Anggota</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="konfirmasi"> <Menu.Item key="konfirmasi">
@ -174,7 +176,7 @@ export const DesktopLayout = observer(() => {
<Menu.Item key="membership"> <Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}> <Link to={LINKS.MEMBERSHIP}>
<UnorderedListOutlined /> <UnorderedListOutlined />
<span>List Anggota</span> <span>Daftar Anggota</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="konfirmasi"> <Menu.Item key="konfirmasi">
@ -201,7 +203,8 @@ export const DesktopLayout = observer(() => {
</Link> </Link>
</Menu.Item> </Menu.Item>
)} */} )} */}
{store.authentication.userData.role === "Admin" && ( {(store.authentication.userData.role === "Admin" ||
store.authentication.userData.role === "Customer Service") && (
<SubMenu <SubMenu
key="config" key="config"
icon={<SettingOutlined />} icon={<SettingOutlined />}
@ -228,7 +231,8 @@ export const DesktopLayout = observer(() => {
</Menu.Item> </Menu.Item>
</SubMenu> </SubMenu>
)} )}
{store.authentication.userData.role === "Admin" && ( {(store.authentication.userData.role === "Admin" ||
store.authentication.userData.role === "Customer Service") && (
<SubMenu <SubMenu
key="product-main" key="product-main"
icon={<PieChartOutlined />} icon={<PieChartOutlined />}
@ -309,13 +313,13 @@ export const DesktopLayout = observer(() => {
</Menu.Item> </Menu.Item>
)} )}
{store.authentication.userData.role !== "Admin" && ( {store.authentication.userData.role !== "Admin" && (
<Menu.Item key="payback-from-user"> <Menu.Item key="payback-from-user">
<Link to={LINKS.PAYBACK_CREATED}> <Link to={LINKS.PAYBACK_CREATED}>
<AlipayOutlined /> <AlipayOutlined />
<span>Dibuat oleh Saya</span> <span>Dibuat oleh Saya</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
</SubMenu> </SubMenu>
)} )}
{store.authentication.userData.role !== "Admin" && ( {store.authentication.userData.role !== "Admin" && (

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

@ -56,7 +56,8 @@ export const MenuList = observer((props) => {
overflowedIndicator={0} overflowedIndicator={0}
forceSubMenuRender={true} forceSubMenuRender={true}
> >
{store.authentication.userData.role === "Admin" && ( {(store.authentication.userData.role === "Admin" ||
store.authentication.userData.role === "Customer Service") && (
<Menu.Item key="home"> <Menu.Item key="home">
<Link to={LINKS.HOME}> <Link to={LINKS.HOME}>
<HomeOutlined /> <HomeOutlined />
@ -72,7 +73,48 @@ export const MenuList = observer((props) => {
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
{store.authentication.userData.role === "Admin" && ( {(store.authentication.userData.role === "Admin" ||
store.authentication.userData.role === "Customer Service") && (
<SubMenu
key="keanggotaan"
icon={<UsergroupAddOutlined />}
title="Keanggotaan"
>
<Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}>
<UnorderedListOutlined />
<span>Daftar 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>Daftar 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 <SubMenu
key="keanggotaan" key="keanggotaan"
icon={<UsergroupAddOutlined />} icon={<UsergroupAddOutlined />}
@ -81,47 +123,7 @@ export const MenuList = observer((props) => {
<Menu.Item key="membership"> <Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}> <Link to={LINKS.MEMBERSHIP}>
<UnorderedListOutlined /> <UnorderedListOutlined />
<span>List Anggota</span> <span>Daftar 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> </Link>
</Menu.Item> </Menu.Item>
</SubMenu> </SubMenu>
@ -142,7 +144,8 @@ export const MenuList = observer((props) => {
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
{store.authentication.userData.role === "Admin" && ( {(store.authentication.userData.role === "Admin" ||
store.authentication.userData.role === "Customer Service") && (
<SubMenu key="config" icon={<SettingOutlined />} title="Config"> <SubMenu key="config" icon={<SettingOutlined />} title="Config">
<Menu.Item key="partner"> <Menu.Item key="partner">
<Link to={LINKS.PARTNER}> <Link to={LINKS.PARTNER}>
@ -164,7 +167,8 @@ export const MenuList = observer((props) => {
</Menu.Item> </Menu.Item>
</SubMenu> </SubMenu>
)} )}
{store.authentication.userData.role === "Admin" && ( {(store.authentication.userData.role === "Admin" ||
store.authentication.userData.role === "Customer Service") && (
<SubMenu <SubMenu
key="product-main" key="product-main"
icon={<AppstoreAddOutlined />} icon={<AppstoreAddOutlined />}
@ -176,22 +180,20 @@ export const MenuList = observer((props) => {
<span>Produk</span> <span>Produk</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
{store.authentication.userData.role === "Admin" && (
<Menu.Item key="sub-category"> <Menu.Item key="sub-category">
<Link to={LINKS.SUBCATEGORY}> <Link to={LINKS.SUBCATEGORY}>
<FileSyncOutlined /> <FileSyncOutlined />
<span>Sub Kategori</span> <span>Sub Kategori</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)}
{store.authentication.userData.role === "Admin" && ( <Menu.Item key="category">
<Menu.Item key="category"> <Link to={LINKS.CATEGORY}>
<Link to={LINKS.CATEGORY}> <FileAddOutlined />
<FileAddOutlined /> <span>Kategori</span>
<span>Kategori</span> </Link>
</Link> </Menu.Item>
</Menu.Item>
)}
</SubMenu> </SubMenu>
)} )}
{store.authentication.userData.role === "Admin Partner" && ( {store.authentication.userData.role === "Admin Partner" && (
@ -241,13 +243,13 @@ export const MenuList = observer((props) => {
</Menu.Item> </Menu.Item>
)} )}
{store.authentication.userData.role !== "Admin" && ( {store.authentication.userData.role !== "Admin" && (
<Menu.Item key="payback-from-user"> <Menu.Item key="payback-from-user">
<Link to={LINKS.PAYBACK_CREATED}> <Link to={LINKS.PAYBACK_CREATED}>
<FileProtectOutlined /> <FileProtectOutlined />
<span>Dibuat oleh Saya</span> <span>Dibuat oleh Saya</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
</SubMenu> </SubMenu>
)} )}
{store.authentication.userData.role !== "Admin" && ( {store.authentication.userData.role !== "Admin" && (

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

@ -1,14 +1,14 @@
import React, {useContext, useEffect, useState} from "react"; import React, { useContext, useEffect, useState } from "react";
import {Button, Card, Col, Input, Row, Tabs,message} from "antd"; import { Button, Card, Col, Input, Row, Tabs, message } from "antd";
import {FilterOutlined, PlusSquareOutlined,} from "@ant-design/icons"; import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import {useStore} from "../../utils/useStore"; import { useStore } from "../../utils/useStore";
import {observer} from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import {PartnerComponent} from "../../component/PartnerComponent"; import { PartnerComponent } from "../../component/PartnerComponent";
import {LINKS} from "../../routes/app"; import { LINKS } from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal"; import { ModalLoaderContext } from "../../utils/modal";
const {Search} = Input; const { Search } = Input;
export const Partner = observer(() => { export const Partner = observer(() => {
const store = useStore(); const store = useStore();
@ -40,22 +40,22 @@ export const Partner = observer(() => {
}, },
{ {
route: LINKS.PARTNER, route: LINKS.PARTNER,
name: <span style={{fontWeight: 'bold'}}>Rekanan</span>, name: <span style={{ fontWeight: "bold" }}>Rekanan</span>,
}, },
]; ];
return ( return (
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/> <BreadcumbComponent data={routeData} />
<Card> <Card>
<Row style={{marginBottom: 20}}> <Row style={{ marginBottom: 20 }}>
{/* <Col span={12}> {/* <Col span={12}>
<Button> <Button>
<FilterOutlined/> <FilterOutlined/>
Filter Filter
</Button> </Button>
</Col> */} </Col> */}
<Col span={24} style={{textAlign: "right"}}> <Col span={24} style={{ textAlign: "right" }}>
{/* <Search {/* <Search
placeholder="input search text" placeholder="input search text"
style={{ style={{
@ -64,12 +64,16 @@ export const Partner = observer(() => {
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} }}
/> */} /> */}
<Button onClick={() => store.partner.visibleModalPartner = true}> {store.authentication.userData.role !== "Customer Service" && (
<PlusSquareOutlined/> New <Button
</Button> onClick={() => (store.partner.visibleModalPartner = true)}
>
<PlusSquareOutlined /> New
</Button>
)}
</Col> </Col>
</Row> </Row>
<PartnerComponent/> <PartnerComponent />
</Card> </Card>
</div> </div>
); );

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

@ -1,4 +1,4 @@
import React, {useContext, useEffect, useState} from "react"; import React, { useContext, useEffect, useState } from "react";
import { import {
Button, Button,
Card, Card,
@ -21,7 +21,7 @@ import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import { SupplierComponent } from "../../component/SupplierComponent"; import { SupplierComponent } from "../../component/SupplierComponent";
import { LINKS } from "../../routes/app"; import { LINKS } from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal"; import { ModalLoaderContext } from "../../utils/modal";
const { Search } = Input; const { Search } = Input;
@ -80,11 +80,13 @@ export const Supplier = observer(() => {
}} }}
onSearch={(value) => console.log(value)} onSearch={(value) => console.log(value)}
/> */} /> */}
<Button {store.authentication.userData.role !== "Customer Service" && (
onClick={() => (store.supplier.visibleModalSupplier = true)} <Button
> onClick={() => (store.supplier.visibleModalSupplier = true)}
<PlusSquareOutlined /> New >
</Button> <PlusSquareOutlined /> New
</Button>
)}
</Col> </Col>
</Row> </Row>
<SupplierComponent /> <SupplierComponent />

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

@ -52,7 +52,8 @@ export const Home = observer(() => {
return ( return (
<div> <div>
{store.ui.mediaQuery.isDesktop && {store.ui.mediaQuery.isDesktop &&
store.authentication.userData.role === "Admin" && ( (store.authentication.userData.role === "Admin" ||
store.authentication.userData.role === "Customer Service") && (
<Row <Row
style={{ style={{
marginTop: 30, marginTop: 30,
@ -281,8 +282,9 @@ export const Home = observer(() => {
</Card> </Card>
</Row> </Row>
)} )}
{store.ui.mediaQuery.isMobile && {store.ui.mediaQuery.isMobile &&
store.authentication.userData.role === "Admin" && ( (store.authentication.userData.role === "Admin" ||
store.authentication.userData.role === "Customer Service") && (
<Row <Row
style={{ style={{
marginTop: 20, marginTop: 20,

357
src/pages/Membership/DetailUser.js
View File

@ -42,6 +42,7 @@ export const DetailUser = observer(() => {
const [filterStart, setFilterStart] = useState([]); const [filterStart, setFilterStart] = useState([]);
const [filterEnd, setFilterEnd] = useState([]); const [filterEnd, setFilterEnd] = useState([]);
const [visibleHis, setVisibleHis] = useState(true); const [visibleHis, setVisibleHis] = useState(true);
const [actionFilter, setAction] = useState(false);
useEffect(() => { useEffect(() => {
(async () => { (async () => {
@ -161,7 +162,12 @@ export const DetailUser = observer(() => {
}; };
const columns = [ const columns = [
{ {
title: "Amount", title: "Pengirim",
dataIndex: "sender_name",
key: "sender_name",
},
{
title: "Nominal",
dataIndex: "amount", dataIndex: "amount",
key: "amount", key: "amount",
render: (text) => render: (text) =>
@ -171,7 +177,7 @@ export const DetailUser = observer(() => {
}).format(text), }).format(text),
}, },
{ {
title: "Transaction Date", title: "Tanggal Transaksi",
dataIndex: "transaction_date", dataIndex: "transaction_date",
key: "transaction_date", key: "transaction_date",
render: (text, record) => { render: (text, record) => {
@ -191,7 +197,7 @@ export const DetailUser = observer(() => {
key: "name", key: "name",
}, },
{ {
title: "Price", title: "Harga",
dataIndex: "price", dataIndex: "price",
key: "price", key: "price",
render: (text) => render: (text) =>
@ -321,19 +327,31 @@ export const DetailUser = observer(() => {
form.resetFields(); form.resetFields();
setFilterStart([]); setFilterStart([]);
setFilterEnd([]); setFilterEnd([]);
await store.transaction.getDetailHistoryTransaction( actionFilter === true
store.authentication.dataProfit.id ? await store.transaction.getDataHistoryTopUp(id)
); : await store.transaction.getDetailHistoryTransaction(
store.authentication.dataProfit.id
);
// await store.transaction.getDetailHistoryTransaction(
// store.authentication.dataProfit.id
// );
store.transaction.visibleModalFilterTransaction = false; store.transaction.visibleModalFilterTransaction = false;
setAction(false);
}; };
const handleCancelFilter = async () => { const handleCancelFilter = async () => {
store.transaction.filterStart = null; store.transaction.filterStart = null;
store.transaction.filterEnd = null; store.transaction.filterEnd = null;
store.transaction.visibleModalFilterTransaction = false; store.transaction.visibleModalFilterTransaction = false;
await store.transaction.getDetailHistoryTransaction( actionFilter === true
store.authentication.dataProfit.id ? await store.transaction.getDataHistoryTopUp(id)
); : await store.transaction.getDetailHistoryTransaction(
store.authentication.dataProfit.id
);
// await store.transaction.getDetailHistoryTransaction(
// store.authentication.dataProfit.id
// );
setAction(false);
}; };
const handleSubmitFilter = async () => { const handleSubmitFilter = async () => {
@ -345,13 +363,16 @@ export const DetailUser = observer(() => {
"YYYY-MM-DD HH:mm:ss" "YYYY-MM-DD HH:mm:ss"
); );
modalLoader.setLoading(true); modalLoader.setLoading(true);
await store.transaction.getDetailHistoryTransaction( actionFilter === true
store.authentication.dataProfit.id ? await store.transaction.getDataHistoryTopUp(id)
); : await store.transaction.getDetailHistoryTransaction(
store.authentication.dataProfit.id
);
modalLoader.setLoading(false); modalLoader.setLoading(false);
store.transaction.filterStart = null; store.transaction.filterStart = null;
store.transaction.filterEnd = null; store.transaction.filterEnd = null;
store.transaction.visibleModalFilterTransaction = false; store.transaction.visibleModalFilterTransaction = false;
setAction(false);
}; };
const footerLayoutFilter = [ const footerLayoutFilter = [
<Button <Button
@ -362,10 +383,10 @@ export const DetailUser = observer(() => {
color: "#fff", color: "#fff",
}} }}
> >
Remove Filter Hapus Filter
</Button>, </Button>,
<Button key={"cancel"} onClick={handleCancelFilter}> <Button key={"cancel"} onClick={handleCancelFilter}>
Cancel Batal
</Button>, </Button>,
<Button <Button
key={"submit"} key={"submit"}
@ -375,7 +396,7 @@ export const DetailUser = observer(() => {
color: "#fff", color: "#fff",
}} }}
> >
Apply Terapkan
</Button>, </Button>,
]; ];
return ( return (
@ -391,8 +412,8 @@ export const DetailUser = observer(() => {
Detail User Detail User
</Title> </Title>
<Col <Col
lg={store.authentication.userData.role === "Admin" ? 18 : 17} lg={store.authentication.userData.role === "Admin" ? 18 : 13}
xs={store.authentication.userData.role === "Admin" ? 18 : 17} xs={store.authentication.userData.role === "Admin" ? 18 : 13}
style={{ textAlign: "right" }} style={{ textAlign: "right" }}
> >
<Space <Space
@ -401,73 +422,79 @@ export const DetailUser = observer(() => {
wrap={true} wrap={true}
style={{ textAlign: "center" }} style={{ textAlign: "center" }}
> >
<Button {store.authentication.userData.role === "Admin" && (
type={ <Space>
store.membership.dataDetail.is_active === true <Button
? "danger" type={
: "primary" store.membership.dataDetail.is_active === true
} ? "danger"
onClick={() => : "primary"
changeStatus( }
store.membership.dataDetail.id, onClick={() =>
store.membership.dataDetail.is_active changeStatus(
) store.membership.dataDetail.id,
} store.membership.dataDetail.is_active
> )
{store.membership.dataDetail.is_active === true }
? "Inactive" >
: "Active"} {store.membership.dataDetail.is_active === true
</Button> ? "Inactive"
<Button : "Active"}
onClick={() => { </Button>
setInitialData({ <Button
id: store.membership.dataDetail.id, onClick={() => {
name: store.membership.dataDetail.userDetail.name, setInitialData({
username: store.membership.dataDetail.username, id: store.membership.dataDetail.id,
identity_number: name: store.membership.dataDetail.userDetail.name,
store.membership.dataDetail.userDetail.identity_number, username: store.membership.dataDetail.username,
image_identity: identity_number:
store.membership.dataDetail?.userDetail.image_identity, store.membership.dataDetail.userDetail
image_store: .identity_number,
store.membership.dataDetail?.userDetail.image_store, image_identity:
phone_number: store.membership.dataDetail?.userDetail
store.membership.dataDetail.userDetail.phone_number, .image_identity,
roleId: store.membership.dataDetail.roles.id, image_store:
isChangePassword: false, store.membership.dataDetail?.userDetail.image_store,
}); phone_number:
console.log( store.membership.dataDetail.userDetail.phone_number,
store.membership.dataDetail.userDetail.identity_number roleId: store.membership.dataDetail.roles.id,
); isChangePassword: false,
console.log(store.membership.dataDetail.userDetail.id); });
console.log( console.log(
store.membership.dataDetail.userDetail.image_identity store.membership.dataDetail.userDetail.identity_number
); );
console.log( console.log(store.membership.dataDetail.userDetail.id);
store.membership.dataDetail.userDetail.image_store, console.log(
"ini store" store.membership.dataDetail.userDetail.image_identity
); );
console.log(store.membership.dataDetail.username); console.log(
setVisibleModal(true); store.membership.dataDetail.userDetail.image_store,
}} "ini store"
> );
Edit console.log(store.membership.dataDetail.username);
</Button> setVisibleModal(true);
<Button }}
onClick={() => { >
setInitialData({ Edit
id: store.membership.dataDetail.id, </Button>
name: store.membership.dataDetail.userDetail.name, <Button
username: store.membership.dataDetail.username, onClick={() => {
phone_number: setInitialData({
store.membership.dataDetail.userDetail.phone_number, id: store.membership.dataDetail.id,
roleId: store.membership.dataDetail.roles.id, name: store.membership.dataDetail.userDetail.name,
isChangePassword: true, username: store.membership.dataDetail.username,
}); phone_number:
setVisibleModal(true); store.membership.dataDetail.userDetail.phone_number,
}} roleId: store.membership.dataDetail.roles.id,
> isChangePassword: true,
Ganti Password });
</Button> setVisibleModal(true);
}}
>
Ganti Password
</Button>
</Space>
)}
{((store.authentication.userData.role === "Sales" && {((store.authentication.userData.role === "Sales" &&
store.membership.dataDetail.is_rejected === true && store.membership.dataDetail.is_rejected === true &&
store.membership.dataDetail.is_active === false) || store.membership.dataDetail.is_active === false) ||
@ -509,12 +536,12 @@ export const DetailUser = observer(() => {
<Col span={12}> <Col span={12}>
<Text>{store.authentication.dataProfit.username}</Text> <Text>{store.authentication.dataProfit.username}</Text>
</Col> </Col>
<Col span={12}> {/* <Col span={12}>
<Text strong>Role</Text> <Text strong>Role</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text>{store.authentication.dataProfit.roles?.name}</Text> <Text>{store.authentication.dataProfit.roles?.name}</Text>
</Col> </Col> */}
<Col span={12}> <Col span={12}>
<Text strong>Phone Number</Text> <Text strong>Phone Number</Text>
</Col> </Col>
@ -537,8 +564,8 @@ export const DetailUser = observer(() => {
<Col span={12}> <Col span={12}>
<Text> <Text>
{store.authentication.dataProfit.is_active === true {store.authentication.dataProfit.is_active === true
? "Active" ? "Aktif"
: "Inactive"} : "Inaktif"}
</Text> </Text>
</Col> </Col>
{store.authentication.userData.role === "Admin" && {store.authentication.userData.role === "Admin" &&
@ -558,7 +585,7 @@ export const DetailUser = observer(() => {
? `${appConfig.apiUrl}/config/image/${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" : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
} }
style={{ width: "10vw" }} style={{ width: "8vw" }}
/> />
</Text> </Text>
</Col> </Col>
@ -578,7 +605,7 @@ export const DetailUser = observer(() => {
? `${appConfig.apiUrl}/config/image/${item}` ? `${appConfig.apiUrl}/config/image/${item}`
: "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg" : "https://st4.depositphotos.com/14953852/24787/v/600/depositphotos_247872612-stock-illustration-no-image-available-icon-vector.jpg"
} }
style={{ width: "10vw", marginRight: 15 }} style={{ width: "8vw", marginRight: 10 }}
/> />
) )
) )
@ -683,7 +710,7 @@ export const DetailUser = observer(() => {
<Row justify={"center"}> <Row justify={"center"}>
<Col lg={12} xs={12}> <Col lg={12} xs={12}>
<Title strong level={3} style={styleSaldoTitle}> <Title strong level={3} style={styleSaldoTitle}>
Profit Keuntungan
</Title> </Title>
</Col> </Col>
<Col lg={24} xs={12}> <Col lg={24} xs={12}>
@ -707,31 +734,124 @@ export const DetailUser = observer(() => {
<Row> <Row>
<Col span={24}> <Col span={24}>
<Tabs defaultActiveKey="1"> <Tabs defaultActiveKey="1">
<TabPane tab="History Top Up" key="1"> <TabPane tab="Riwayat Top Up" key="1">
<Table {store.ui.mediaQuery.isDesktop && (
key="1" <div>
hasEmpty <Button
columns={columns} style={{ marginBottom: "1rem", marginLeft: 5 }}
dataSource={store.transaction.dataHistoryTopUp} onClick={() => {
bordered store.transaction.visibleModalFilterTransaction = true;
pagination={{ setAction(true);
pageSize: store.transaction.pageSizeHistoryTransaction, }}
total: store.transaction.total_dataHistoryTransaction, >
current: store.transaction.pageHistoryTransaction + 1, <FilterOutlined />
showSizeChanger: true, Filter
simple: false, </Button>
}} <Table
onChange={async (page) => { key="1"
let pageNumber = page.current; hasEmpty
store.transaction.pageSize = page.pageSize; columns={columns}
store.transaction.page = pageNumber - 1; dataSource={store.transaction.dataHistoryTopUp}
modalLoader.setLoading(true); bordered
await getData(); pagination={{
modalLoader.setLoading(false); 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);
}}
/>
</div>
)}
{store.ui.mediaQuery.isMobile && (
<div>
<Button
style={{ marginBottom: "1rem" }}
onClick={() => {
store.transaction.visibleModalFilterTransaction = true;
setAction(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.dataHistoryTopUp}
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.sender_name}
description={
<div style={{}}>
<p>
<small>
Amount :{" "}
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(item.amount || 0)}
</small>{" "}
<br />
<small>
Transaction Date :{" "}
{format(
parseISO(item.transaction_date),
"dd-MM-yyyy hh:mm:ss"
)}
</small>{" "}
<br />
</p>
</div>
}
/>
</List.Item>
<Divider plain style={{ margin: 0 }} />
</div>
);
}}
/>
</div>
)}
</TabPane> </TabPane>
<TabPane tab="History Transaction" key="2"> <TabPane tab="Riwayat Transaksi" key="2">
{store.ui.mediaQuery.isDesktop && ( {store.ui.mediaQuery.isDesktop && (
<div> <div>
<Button <Button
@ -911,7 +1031,12 @@ export const DetailUser = observer(() => {
store.transaction.filterStart = null; store.transaction.filterStart = null;
store.transaction.filterEnd = null; store.transaction.filterEnd = null;
store.transaction.visibleModalFilterTransaction = false; store.transaction.visibleModalFilterTransaction = false;
await store.transaction.getDetailHistoryTransaction(); actionFilter === true
? await store.transaction.getDataHistoryTopUp(id)
: await store.transaction.getDetailHistoryTransaction(
store.authentication.dataProfit.id
);
//await store.transaction.getDetailHistoryTransaction();
}} }}
> >
<Row> <Row>

24
src/pages/Membership/Konfirmasi.js
View File

@ -72,7 +72,7 @@ export const Konfirmasi = observer(() => {
const columns = [ const columns = [
{ {
title: "Name", title: "Nama",
dataIndex: "username", dataIndex: "username",
key: "username", key: "username",
}, },
@ -98,8 +98,8 @@ export const Konfirmasi = observer(() => {
title: "Foto Toko", title: "Foto Toko",
render: (text, record) => render: (text, record) =>
record.roles?.name !== "Sales" && record.roles?.name !== "Sales" &&
record.user_detail?.image_store !== "[]" && (record.user_detail?.image_store !== "[]" ||
record.user_detail?.image_store !== '""' ? ( record.user_detail?.image_store !== '""') ? (
<Button <Button
onClick={async () => { onClick={async () => {
setToko(record); setToko(record);
@ -113,7 +113,7 @@ export const Konfirmasi = observer(() => {
), ),
}, },
{ {
title: "Action", title: "Tindakan",
dataIndex: "amount", dataIndex: "amount",
key: "action", key: "action",
width: "10%", width: "10%",
@ -126,14 +126,14 @@ export const Konfirmasi = observer(() => {
title: `Are you sure Accept this submission?`, title: `Are you sure Accept this submission?`,
icon: <CheckOutlined />, icon: <CheckOutlined />,
okText: "Accept", okText: "Accept",
cancelText: "Cancel", cancelText: "Batal",
okType: "primary", okType: "primary",
onOk() { onOk() {
handleApprove(record.id); handleApprove(record.id);
console.log(record.id); console.log(record.id);
}, },
onCancel() { onCancel() {
console.log("Cancel"); console.log("Batal");
}, },
}); });
}} }}
@ -152,13 +152,13 @@ export const Konfirmasi = observer(() => {
title: `Are you sure Reject this submission?`, title: `Are you sure Reject this submission?`,
icon: <StopOutlined />, icon: <StopOutlined />,
okText: "Reject", okText: "Reject",
cancelText: "Cancel", cancelText: "Batal",
okType: "primary", okType: "primary",
onOk() { onOk() {
handleReject(record.id); handleReject(record.id);
}, },
onCancel() { onCancel() {
console.log("Cancel"); console.log("Batal");
}, },
}); });
}} }}
@ -315,13 +315,13 @@ export const Konfirmasi = observer(() => {
title: `Are you sure Accept this submission?`, title: `Are you sure Accept this submission?`,
icon: <CheckOutlined />, icon: <CheckOutlined />,
okText: "Accept", okText: "Accept",
cancelText: "Cancel", cancelText: "Batal",
okType: "primary", okType: "primary",
onOk() { onOk() {
handleApprove(item.id); handleApprove(item.id);
}, },
onCancel() { onCancel() {
console.log("Cancel"); console.log("Batal");
}, },
}); });
}} }}
@ -340,13 +340,13 @@ export const Konfirmasi = observer(() => {
title: `Are you sure Reject this submission?`, title: `Are you sure Reject this submission?`,
icon: <StopOutlined />, icon: <StopOutlined />,
okText: "Reject", okText: "Reject",
cancelText: "Cancel", cancelText: "Batal",
okType: "primary", okType: "primary",
onOk() { onOk() {
handleReject(item.id); handleReject(item.id);
}, },
onCancel() { onCancel() {
console.log("Cancel"); console.log("Batal");
}, },
}); });
}} }}

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

@ -71,7 +71,8 @@ export const Membership = observer(() => {
}, []); }, []);
const getData = async () => { const getData = async () => {
store.authentication.userData.role === "Admin" store.authentication.userData.role === "Admin" ||
store.authentication.userData.role === "Customer Service"
? await store.membership.getData() ? await store.membership.getData()
: await store.membership.getDataBySuperior(); : await store.membership.getDataBySuperior();
}; };
@ -111,10 +112,10 @@ export const Membership = observer(() => {
color: "#fff", color: "#fff",
}} }}
> >
Remove Filter Hapus Filter
</Button>, </Button>,
<Button key={"cancel"} onClick={handleCancelFilter}> <Button key={"cancel"} onClick={handleCancelFilter}>
Cancel Batal
</Button>, </Button>,
<Button <Button
key={"submit"} key={"submit"}
@ -124,7 +125,7 @@ export const Membership = observer(() => {
color: "#fff", color: "#fff",
}} }}
> >
Apply Terapkan
</Button>, </Button>,
]; ];
const handleCancelTransaction = () => { const handleCancelTransaction = () => {
@ -168,10 +169,10 @@ export const Membership = observer(() => {
const columns = [ const columns = [
{ {
title: "Name", title: "Nama",
dataIndex: "name", dataIndex: "name",
key: "name", key: "name",
render: (text, record) => record?.name ?? record?.username, render: (text, record) => record?.name ?? record?.user_detail?.name,
}, },
{ {
title: "Username", title: "Username",
@ -196,7 +197,7 @@ export const Membership = observer(() => {
}).format(text), }).format(text),
}, },
{ {
title: "Action", title: "Tindakan",
key: "action", key: "action",
render: (text, record) => ( render: (text, record) => (
<Space size="middle"> <Space size="middle">
@ -225,6 +226,7 @@ export const Membership = observer(() => {
}, },
]; ];
if (store.authentication.userData.role === "Customer Service") columns.pop();
const routeData = [ const routeData = [
{ {
route: LINKS.HOME, route: LINKS.HOME,
@ -344,14 +346,17 @@ export const Membership = observer(() => {
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} }}
/> */} /> */}
<Button
onClick={() => { {store.authentication.userData.role !== "Customer Service" && (
setInitialData({}); <Button
setVisibleModal(true); onClick={() => {
}} setInitialData({});
> setVisibleModal(true);
<PlusSquareOutlined /> New }}
</Button> >
<PlusSquareOutlined /> New
</Button>
)}
</Col> </Col>
</Row> </Row>
{store.ui.mediaQuery.isDesktop && ( {store.ui.mediaQuery.isDesktop && (
@ -359,16 +364,18 @@ export const Membership = observer(() => {
key="1" key="1"
hasEmpty hasEmpty
columns={columns} columns={columns}
style={{ cursor: "pointer" }} //style={{ cursor: "pointer" }}
dataSource={ dataSource={
store.authentication.userData.role === "Admin" store.authentication.userData.role === "Admin" ||
store.authentication.userData.role === "Customer Service"
? store.membership.dataMember ? store.membership.dataMember
: store.membership.data : store.membership.data
} }
pagination={{ pagination={{
pageSize: store.membership.pageSize, pageSize: store.membership.pageSize,
total: total:
store.authentication.userData.role === "Admin" store.authentication.userData.role === "Admin" ||
store.authentication.userData.role === "Customer Service"
? store.membership.dataTotal ? store.membership.dataTotal
: store.membership.total_data, : store.membership.total_data,
current: store.membership.page + 1, current: store.membership.page + 1,
@ -401,14 +408,16 @@ export const Membership = observer(() => {
}, },
pageSize: store.membership.pageSize, pageSize: store.membership.pageSize,
total: total:
store.authentication.userData.role === "Admin" store.authentication.userData.role === "Admin" ||
store.authentication.userData.role === "Customer Service"
? store.membership.dataTotal ? store.membership.dataTotal
: store.membership.total_data, : store.membership.total_data,
current: store.membership.page + 1, current: store.membership.page + 1,
style: { marginBottom: "1rem", marginRight: "1rem" }, style: { marginBottom: "1rem", marginRight: "1rem" },
}} }}
dataSource={ dataSource={
store.authentication.userData.role === "Admin" store.authentication.userData.role === "Admin" ||
store.authentication.userData.role === "Customer Service"
? store.membership.dataMember ? store.membership.dataMember
: store.membership.data : store.membership.data
} }
@ -496,7 +505,7 @@ export const Membership = observer(() => {
visible={isVisibleTopUpModal} visible={isVisibleTopUpModal}
title="Top Up Saldo" title="Top Up Saldo"
okText="Top Up" okText="Top Up"
cancelText="Cancel" cancelText="Batal"
onCancel={() => { onCancel={() => {
form.resetFields(); form.resetFields();
handleCancelTransaction(); handleCancelTransaction();
@ -517,7 +526,7 @@ export const Membership = observer(() => {
<Form form={form} layout="vertical"> <Form form={form} layout="vertical">
<Form.Item <Form.Item
name="amount" name="amount"
label="Amount" label="Nominal"
rules={[{ required: true, message: "Please input amount!" }]} rules={[{ required: true, message: "Please input amount!" }]}
> >
<InputNumber <InputNumber

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

@ -195,7 +195,7 @@ export const MembershipModal = ({
: "Create a new Membership" : "Create a new Membership"
} }
okText={initialData.id ? "Edit" : "Create"} okText={initialData.id ? "Edit" : "Create"}
cancelText="Cancel" cancelText="Batal"
onCancel={() => { onCancel={() => {
form.resetFields(); form.resetFields();
onCancel(); onCancel();

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

@ -67,12 +67,12 @@ export const Payback = observer(() => {
const columns = [ const columns = [
{ {
title: "Name", title: "Nama",
dataIndex: "userData_name", dataIndex: "userData_name",
key: "userData_name", key: "userData_name",
}, },
{ {
title: "Picture", title: "Gambar",
dataIndex: "image_prove", dataIndex: "image_prove",
key: "image_prove", key: "image_prove",
render: (text, record) => ( render: (text, record) => (
@ -84,7 +84,7 @@ export const Payback = observer(() => {
), ),
}, },
{ {
title: "Amount", title: "Nominal",
dataIndex: "amount", dataIndex: "amount",
key: "amount", key: "amount",
width: "20%", width: "20%",
@ -95,7 +95,7 @@ export const Payback = observer(() => {
}).format(text), }).format(text),
}, },
{ {
title: "Action", title: "Tindakan",
dataIndex: "amount", dataIndex: "amount",
key: "action", key: "action",
width: "10%", width: "10%",
@ -108,13 +108,13 @@ export const Payback = observer(() => {
title: `Are you sure Accept this submission?`, title: `Are you sure Accept this submission?`,
icon: <CheckOutlined />, icon: <CheckOutlined />,
okText: "Accept", okText: "Accept",
cancelText: "Cancel", cancelText: "Batal",
okType: "primary", okType: "primary",
onOk() { onOk() {
handleAction(record.id, "accept"); handleAction(record.id, "accept");
}, },
onCancel() { onCancel() {
console.log("Cancel"); console.log("Batal");
}, },
}); });
}} }}
@ -133,13 +133,13 @@ export const Payback = observer(() => {
title: `Are you sure Reject this submission?`, title: `Are you sure Reject this submission?`,
icon: <StopOutlined />, icon: <StopOutlined />,
okText: "Reject", okText: "Reject",
cancelText: "Cancel", cancelText: "Batal",
okType: "primary", okType: "primary",
onOk() { onOk() {
handleAction(record.id, "reject"); handleAction(record.id, "reject");
}, },
onCancel() { onCancel() {
console.log("Cancel"); console.log("Batal");
}, },
}); });
}} }}
@ -254,10 +254,10 @@ export const Payback = observer(() => {
color: "#fff", color: "#fff",
}} }}
> >
Remove Filter Hapus Filter
</Button>, </Button>,
<Button key={"cancel"} onClick={handleCancelFilter}> <Button key={"cancel"} onClick={handleCancelFilter}>
Cancel Batal
</Button>, </Button>,
<Button <Button
key={"submit"} key={"submit"}
@ -267,7 +267,7 @@ export const Payback = observer(() => {
color: "#fff", color: "#fff",
}} }}
> >
Apply Terapkan
</Button>, </Button>,
]; ];
return ( return (
@ -377,13 +377,13 @@ export const Payback = observer(() => {
title: `Are you sure Accept this submission?`, title: `Are you sure Accept this submission?`,
icon: <CheckOutlined />, icon: <CheckOutlined />,
okText: "Accept", okText: "Accept",
cancelText: "Cancel", cancelText: "Batal",
okType: "primary", okType: "primary",
onOk() { onOk() {
handleAction(item.id, "accept"); handleAction(item.id, "accept");
}, },
onCancel() { onCancel() {
console.log("Cancel"); console.log("Batal");
}, },
}); });
}} }}
@ -402,13 +402,13 @@ export const Payback = observer(() => {
title: `Are you sure Reject this submission?`, title: `Are you sure Reject this submission?`,
icon: <StopOutlined />, icon: <StopOutlined />,
okText: "Reject", okText: "Reject",
cancelText: "Cancel", cancelText: "Batal",
okType: "primary", okType: "primary",
onOk() { onOk() {
handleAction(item.id, "reject"); handleAction(item.id, "reject");
}, },
onCancel() { onCancel() {
console.log("Cancel"); console.log("Batal");
}, },
}); });
}} }}
@ -478,7 +478,7 @@ export const Payback = observer(() => {
<Row> <Row>
<Col span={24}> <Col span={24}>
<Title level={5} type={"secondary"} strong> <Title level={5} type={"secondary"} strong>
Sender Pengirim
</Title> </Title>
<Form layout="vertical" name="filter" form={form}> <Form layout="vertical" name="filter" form={form}>
<Select <Select
@ -498,14 +498,14 @@ export const Payback = observer(() => {
</Select> </Select>
<Form.Item <Form.Item
name="start_date" name="start_date"
label="Dari" label="Dari Tanggal"
rules={[{ required: true, message: "Please input Date!" }]} rules={[{ required: true, message: "Please input Date!" }]}
> >
<DatePicker style={{ width: "100%" }}/> <DatePicker style={{ width: "100%" }}/>
</Form.Item> </Form.Item>
<Form.Item <Form.Item
name="end_date" name="end_date"
label="Sampai" label="Sampai Tanggal"
rules={[{ required: true, message: "Please input Date!" }]} rules={[{ required: true, message: "Please input Date!" }]}
> >
<DatePicker style={{ width: "100%" }} /> <DatePicker style={{ width: "100%" }} />

12
src/pages/Payback/PaybackCreated.js
View File

@ -56,7 +56,7 @@ export const PaybackCreated = observer(() => {
const columns = [ const columns = [
{ {
title: "Picture", title: "Gambar",
dataIndex: "image_prove", dataIndex: "image_prove",
key: "image_prove", key: "image_prove",
render: (text, record) => ( render: (text, record) => (
@ -68,7 +68,7 @@ export const PaybackCreated = observer(() => {
), ),
}, },
{ {
title: "Amount", title: "Nominal",
dataIndex: "amount", dataIndex: "amount",
key: "amount", key: "amount",
render: (text) => render: (text) =>
@ -103,8 +103,8 @@ export const PaybackCreated = observer(() => {
: record.status === 2 : record.status === 2
? "Failed" ? "Failed"
: record.status === 3 : record.status === 3
? "Approved" ? "Disetujui"
: "Rejected"} : "Ditolak"}
</Tag> </Tag>
), ),
}, },
@ -313,8 +313,8 @@ export const PaybackCreated = observer(() => {
: item.status === 2 : item.status === 2
? "Failed" ? "Failed"
: item.status === 3 : item.status === 3
? "Approved" ? "Disetujui"
: "Rejected"} : "Ditolak"}
</Tag> </Tag>
</div> </div>
</div> </div>

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

@ -100,7 +100,7 @@ export const PaybackModal = ({ initialData }) => {
visible={store.payback.visibleModalPayback} visible={store.payback.visibleModalPayback}
title={"Create a new Created"} title={"Create a new Created"}
okText={"Create"} okText={"Create"}
cancelText="Cancel" cancelText="Batal"
onCancel={handleCancel} onCancel={handleCancel}
onOk={() => { onOk={() => {
form form
@ -120,7 +120,7 @@ export const PaybackModal = ({ initialData }) => {
name="form_in_modal" name="form_in_modal"
initialValues={initialData} initialValues={initialData}
> >
<Form.Item label="Upload Picture" name="image_prove"> <Form.Item label="Upload Gambar" name="image_prove">
<div> <div>
<Upload <Upload
listType="picture-card" listType="picture-card"

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

@ -1,13 +1,12 @@
import React, {useContext, useEffect, useState} from "react"; import React, { useContext, useEffect, useState } from "react";
import {Button, Card, Col, Input, Row, Tabs,message} from "antd"; import { Button, Card, Col, Input, Row, Tabs, message } from "antd";
import {FilterOutlined, PlusSquareOutlined} from "@ant-design/icons"; import { FilterOutlined, PlusSquareOutlined } from "@ant-design/icons";
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import {useStore} from "../../utils/useStore"; import { useStore } from "../../utils/useStore";
import {observer} from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import {LINKS} from "../../routes/app"; import { LINKS } from "../../routes/app";
import {CategoryComponent} from "../../component/CategoryComponent"; import { CategoryComponent } from "../../component/CategoryComponent";
import {ModalLoaderContext} from "../../utils/modal"; import { ModalLoaderContext } from "../../utils/modal";
export const Category = observer(() => { export const Category = observer(() => {
const store = useStore(); const store = useStore();
@ -49,11 +48,13 @@ export const Category = observer(() => {
<Card> <Card>
<Row style={{ marginBottom: 20 }}> <Row style={{ marginBottom: 20 }}>
<Col span={24} style={{ textAlign: "right" }}> <Col span={24} style={{ textAlign: "right" }}>
<Button {store.authentication.userData.role !== "Customer Service" && (
onClick={() => (store.category.visibleModalCategory = true)} <Button
> onClick={() => (store.category.visibleModalCategory = true)}
<PlusSquareOutlined /> New >
</Button> <PlusSquareOutlined /> New
</Button>
)}
</Col> </Col>
</Row> </Row>

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

@ -250,7 +250,7 @@ export const Product = observer(() => {
visible={visibleModalUpload} visible={visibleModalUpload}
title={"Upload Excel Product"} title={"Upload Excel Product"}
okText={"Create"} okText={"Create"}
cancelText="Cancel" cancelText="Batal"
onCancel={() => { onCancel={() => {
form.resetFields(); form.resetFields();
handleCancel(); handleCancel();

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

@ -55,11 +55,15 @@ export const Subcategory = observer(() => {
<Card> <Card>
<Row style={{ marginBottom: 20 }}> <Row style={{ marginBottom: 20 }}>
<Col span={24} style={{ textAlign: "right" }}> <Col span={24} style={{ textAlign: "right" }}>
<Button {store.authentication.userData.role !== "Customer Service" && (
onClick={() => (store.subcategory.visibleModalSubcategory = true)} <Button
> onClick={() =>
<PlusSquareOutlined /> New (store.subcategory.visibleModalSubcategory = true)
</Button> }
>
<PlusSquareOutlined /> New
</Button>
)}
</Col> </Col>
</Row> </Row>
<SubcategoryComponent /> <SubcategoryComponent />

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

@ -14,6 +14,7 @@ import {
List, List,
Image, Image,
Tag, Tag,
Tabs,
} from "antd"; } from "antd";
import moment from "moment"; import moment from "moment";
import { BreadcumbComponent } from "../../component/BreadcumbComponent"; import { BreadcumbComponent } from "../../component/BreadcumbComponent";
@ -23,17 +24,19 @@ import { observer } from "mobx-react-lite";
import { FilterOutlined } from "@ant-design/icons"; import { FilterOutlined } from "@ant-design/icons";
import { format, parseISO } from "date-fns"; import { format, parseISO } from "date-fns";
import { appConfig } from "../../config/app"; import { appConfig } from "../../config/app";
import { ModalLoaderContext } from "../../utils/modal"; import { ModalLoaderContext } from "../../utils/modal";
import { useParams } from "react-router-dom";
const { TabPane } = Tabs;
const { Title, Text } = Typography; const { Title, Text } = Typography;
const { RangePicker } = DatePicker; const { RangePicker } = DatePicker;
export const Profile = observer(() => { export const Profile = observer(() => {
const store = useStore(); const store = useStore();
const [form] = Form.useForm(); const [form] = Form.useForm();
const { id } = useParams();
const modalLoader = useContext(ModalLoaderContext); const modalLoader = useContext(ModalLoaderContext);
const [filterStart, setFilterStart] = useState([]); const [filterStart, setFilterStart] = useState([]);
const [filterEnd, setFilterEnd] = useState([]); const [filterEnd, setFilterEnd] = useState([]);
const [actionFilter, setAction] = useState(false);
const routeData = [ const routeData = [
{ {
@ -56,10 +59,14 @@ export const Profile = observer(() => {
useEffect(() => { useEffect(() => {
(async () => { (async () => {
modalLoader.setLoading(true); modalLoader.setLoading(true);
await Promise.allSettled([ await Promise.allSettled([
store.authentication.getProfile(), store.authentication.getProfile(),
store.transaction.getDataHistoryTransaction(), store.transaction.getDataHistoryTransaction(),
]); ]);
await store.transaction.getDataHistoryTopUpProfile(
store.authentication.profileData?.id
);
modalLoader.setLoading(false); modalLoader.setLoading(false);
})(); })();
}, []); }, []);
@ -70,8 +77,14 @@ export const Profile = observer(() => {
form.resetFields(); form.resetFields();
setFilterStart([]); setFilterStart([]);
setFilterEnd([]); setFilterEnd([]);
await store.transaction.getDataHistoryTransaction(); //await store.transaction.getDataHistoryTransaction();
actionFilter === true
? await store.transaction.getDataHistoryTopUpProfile(
store.authentication.profileData?.id
)
: await store.transaction.getDataHistoryTransaction();
store.transaction.visibleModalFilterTransaction = false; store.transaction.visibleModalFilterTransaction = false;
setAction(false);
}; };
const handleCancelFilter = async () => { const handleCancelFilter = async () => {
@ -79,24 +92,35 @@ export const Profile = observer(() => {
//form.resetFields(); //form.resetFields();
store.transaction.filterEnd = null; store.transaction.filterEnd = null;
store.transaction.visibleModalFilterTransaction = false; store.transaction.visibleModalFilterTransaction = false;
await store.transaction.getDataHistoryTransaction(); actionFilter === true
? await store.transaction.getDataHistoryTopUpProfile(
store.authentication.profileData?.id
)
: await store.transaction.getDataHistoryTransaction();
setAction(false);
//await store.transaction.getDataHistoryTransaction();
}; };
const handleSubmitFilter = async () => { const handleSubmitFilter = async () => {
const data = form.getFieldsValue(); const data = form.getFieldsValue();
const awal = (store.transaction.filterStart = moment( store.transaction.filterStart = moment(data.start_date).format(
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" "YYYY-MM-DD HH:mm:ss"
)); );
store.transaction.filterEnd = moment(data.end_date).format(
"YYYY-MM-DD HH:mm:ss"
);
modalLoader.setLoading(true); modalLoader.setLoading(true);
await store.transaction.getDataHistoryTransaction(); actionFilter === true
? await store.transaction.getDataHistoryTopUpProfile(
store.authentication.profileData?.id
)
: await store.transaction.getDataHistoryTransaction();
modalLoader.setLoading(false); modalLoader.setLoading(false);
store.transaction.filterStart = null; store.transaction.filterStart = null;
store.transaction.filterEnd = null; store.transaction.filterEnd = null;
//form.resetFields(); //form.resetFields();
store.transaction.visibleModalFilterTransaction = false; store.transaction.visibleModalFilterTransaction = false;
setAction(false);
}; };
const footerLayoutFilter = [ const footerLayoutFilter = [
@ -108,10 +132,10 @@ export const Profile = observer(() => {
color: "#fff", color: "#fff",
}} }}
> >
Remove Filter Hapus Filter
</Button>, </Button>,
<Button key={"cancel"} onClick={handleCancelFilter}> <Button key={"cancel"} onClick={handleCancelFilter}>
Cancel Batal
</Button>, </Button>,
<Button <Button
key={"submit"} key={"submit"}
@ -121,17 +145,17 @@ export const Profile = observer(() => {
color: "#fff", color: "#fff",
}} }}
> >
Apply Terapkan
</Button>, </Button>,
]; ];
const columns = [ const columns = [
{ {
title: "Name Produk", title: "Nama Produk",
dataIndex: "name", dataIndex: "name",
key: "name", key: "name",
}, },
{ {
title: "Price", title: "Harga",
dataIndex: "price", dataIndex: "price",
key: "price", key: "price",
render: (text) => render: (text) =>
@ -172,10 +196,10 @@ export const Profile = observer(() => {
} }
> >
{record.status === 1 {record.status === 1
? "Success" ? "Sukses"
: record.status === 0 : record.status === 0
? "Pending" ? "Dalam Proses"
: "Failed"} : "Gagal"}
</Tag> </Tag>
); );
}, },
@ -210,6 +234,35 @@ export const Profile = observer(() => {
}, },
]; ];
const column = [
{
title: "Pengirim",
dataIndex: "sender_name",
key: "sender_name",
},
{
title: "Nominal",
dataIndex: "amount",
key: "amount",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
title: "Tanggal Transaksi",
dataIndex: "transaction_date",
key: "transaction_date",
render: (text, record) => {
return (
<Text>
{format(parseISO(record.transaction_date), "dd MMMM yyyy")}
</Text>
);
},
},
];
const styleSaldoTitle = store.ui.mediaQuery.isDesktop const styleSaldoTitle = store.ui.mediaQuery.isDesktop
? { ? {
display: "flex", display: "flex",
@ -240,7 +293,7 @@ export const Profile = observer(() => {
<Col lg={12} xs={24}> <Col lg={12} xs={24}>
<Row> <Row>
<Col span={12}> <Col span={12}>
<Text strong>Name</Text> <Text strong>Nama</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text> <Text>
@ -248,7 +301,7 @@ export const Profile = observer(() => {
</Text> </Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text strong>Phone Number</Text> <Text strong>No. Telepon</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text> <Text>
@ -261,14 +314,14 @@ export const Profile = observer(() => {
<Col span={12}> <Col span={12}>
<Text>{store.authentication.profileData?.username}</Text> <Text>{store.authentication.profileData?.username}</Text>
</Col> </Col>
<Col span={12}> {/* <Col span={12}>
<Text strong>Role</Text> <Text strong>Role</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text>{store.authentication.profileData.roles?.name}</Text> <Text>{store.authentication.profileData.roles?.name}</Text>
</Col> </Col> */}
<Col span={12}> <Col span={12}>
<Text strong>Superior</Text> <Text strong>Upline</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text> <Text>
@ -357,152 +410,268 @@ export const Profile = observer(() => {
</Row> </Row>
<Row> <Row>
<Col span={24}> <Col span={24}>
<div> <Tabs defaultActiveKey="1">
<Title strong level={3}> <TabPane tab="Riwayat Top Up" key="1">
History Transaction <Button
</Title> style={{ marginBottom: "1rem", marginLeft: 5 }}
<Button onClick={() => {
style={{ marginBottom: "1rem" }} store.transaction.visibleModalFilterTransaction = true;
onClick={() => { setAction(true);
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; <FilterOutlined />
store.transaction.pageSizeHistoryTransaction = Filter
page.pageSize; </Button>
store.transaction.pageHistoryTransaction = pageNumber - 1; {store.ui.mediaQuery.isDesktop && (
modalLoader.setLoading(true); <Table
await store.transaction.getDataHistoryTransaction(); key="1"
modalLoader.setLoading(false); hasEmpty
columns={column}
dataSource={store.transaction.dataHistoryTopUpProfile}
bordered
pagination={{
pageSize: store.transaction.pageSize,
total: store.transaction.total_dataHistoryTopUpProfile,
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 store.transaction.getDataHistoryTopUpProfile(
store.authentication.profileData?.id
);
modalLoader.setLoading(false);
}}
/>
)}
{store.ui.mediaQuery.isMobile && (
<div>
<List
itemLayout="horizontal"
position={"top"}
dataSource={store.transaction.dataHistoryTopUpProfile}
pagination={{
onChange: async (page, pageSize) => {
console.log(page, "Page");
console.log(pageSize, "Page size");
store.transaction.pageSize = pageSize;
store.transaction.page = page - 1;
modalLoader.setLoading(true);
await store.transaction.getDataHistoryTopUpProfile(
store.authentication.profileData?.id
);
modalLoader.setLoading(false);
},
pageSize: store.transaction.pageSize,
total: store.transaction.total_dataHistoryTopUpProfile,
current: store.transaction.page + 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.id}
description={
<div style={{}}>
<p>
<small>
Pengirim : {item.sender_name}
</small>{" "}
<br />
<small>
Amount :{" "}
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(item.amount || 0)}
</small>{" "}
<br />
<small>
Transaction Date :{" "}
{format(
parseISO(item.transaction_date),
"dd-MM-yyyy"
)}
</small>{" "}
<br />
</p>
</div>
}
/>
</List.Item>
<Divider plain style={{ margin: 0 }} />
</div>
);
}}
/>
</div>
)}
</TabPane>
<TabPane tab="Riwayat Transaksi" key="2">
<Button
style={{ marginBottom: "1rem", marginLeft: 5 }}
onClick={() => {
store.transaction.visibleModalFilterTransaction = true;
}} }}
/> >
)} <FilterOutlined />
{store.ui.mediaQuery.isMobile && ( Filter
<List </Button>
itemLayout="horizontal" {store.ui.mediaQuery.isDesktop && (
position={"top"} <Table
dataSource={store.transaction.dataHistoryTransaction} columns={columns}
pagination={{ bordered
onChange: async (page, pageSize) => { scroll={{ x: 1300 }}
console.log(page, "Page"); //scroll={{ x: 1500, y: 300 }}
console.log(pageSize, "Page size"); dataSource={store.transaction.dataHistoryTransaction}
store.transaction.pageSizeHistoryTransaction = pageSize; pagination={{
store.transaction.pageHistoryTransaction = page - 1; 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); modalLoader.setLoading(true);
await store.transaction.getDataHistoryTransaction(); await store.transaction.getDataHistoryTransaction();
modalLoader.setLoading(false); modalLoader.setLoading(false);
}, }}
pageSize: store.transaction.pageSizeHistoryTransaction, />
total: store.transaction.total_dataHistoryTransaction, )}
current: store.transaction.pageHistoryTransaction + 1, {store.ui.mediaQuery.isMobile && (
style: { marginBottom: "1rem", marginRight: "1rem" }, <div>
}} <List
style={{ padding: 0 }} itemLayout="horizontal"
renderItem={(item) => { position={"top"}
return ( dataSource={store.transaction.dataHistoryTransaction}
<div> pagination={{
<List.Item onChange: async (page, pageSize) => {
key={item.id} console.log(page, "Page");
style={{ console.log(pageSize, "Page size");
backgroundColor: "#ffffff", store.transaction.pageSizeHistoryTransaction =
paddingTop: 0, pageSize;
paddingBottom: 0, store.transaction.pageHistoryTransaction = page - 1;
display: "flex", modalLoader.setLoading(true);
flexDirection: "row", await store.transaction.getDataHistoryTransaction();
alignItems: "center", modalLoader.setLoading(false);
justifyContent: "center", },
}} pageSize: store.transaction.pageSizeHistoryTransaction,
> total: store.transaction.total_dataHistoryTransaction,
<List.Item.Meta current: store.transaction.pageHistoryTransaction + 1,
className={["cariparkir-container"].join(" ")} style: { marginBottom: "1rem", marginRight: "1rem" },
title={item.buyer} }}
description={ style={{ padding: 0 }}
<div style={{}}> renderItem={(item) => {
<p> return (
<small>Price : {item.price}</small> <br /> <div>
<small> <List.Item
Tujuan : {item.transaction_destination} key={item.id}
</small>{" "} style={{
<br /> backgroundColor: "#ffffff",
<small> paddingTop: 0,
Kode Transaksi : {item.transaction_code} paddingBottom: 0,
</small>{" "} display: "flex",
<br /> flexDirection: "row",
<small> alignItems: "center",
Status :{" "} justifyContent: "center",
{ }}
<Tag >
color={ <List.Item.Meta
item.status === 1 className={["cariparkir-container"].join(" ")}
? "success" title={item.buyer}
: item.status === 0 description={
? "warning" <div style={{}}>
: "processing" <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
? "Sukses"
: item.status === 0
? "Dalam Proses"
: "Gagal"}
</Tag>
} }
> </small>{" "}
{item.status === 1 <br />
? "Success" <small>
: item.status === 0 No.Seri : {item.seri_number}
? "Pending" </small>{" "}
: "Failed"} <br />
</Tag> <small>
} Alasan Gagal : {item.failed_reason}
</small>{" "} </small>{" "}
<br /> <br />
<small> <small>
No.Seri : {item.seri_number} IDTrx Mitra :{" "}
</small>{" "} {item.partner_transaction_code}
<br /> </small>{" "}
<small> <br />
Alasan Gagal : {item.failed_reason} <small>
</small>{" "} Transaction Date :{" "}
<br /> {format(
<small> parseISO(item.created_at),
IDTrx Mitra :{" "} "dd-MM-yyyy"
{item.partner_transaction_code} )}
</small>{" "} </small>{" "}
<br /> <br />
<small> </p>
Transaction Date :{" "} </div>
{format( }
parseISO(item.created_at), />
"dd-MM-yyyy" </List.Item>
)} <Divider plain style={{ margin: 0 }} />
</small>{" "} </div>
<br /> );
</p> }}
</div> />
} </div>
/> )}
</List.Item> </TabPane>
<Divider plain style={{ margin: 0 }} /> </Tabs>
</div>
);
}}
/>
)}
</div>
</Col> </Col>
</Row> </Row>
<div />
</Card> </Card>
<Modal <Modal
visible={store.transaction.visibleModalFilterTransaction} visible={store.transaction.visibleModalFilterTransaction}
@ -513,7 +682,11 @@ export const Profile = observer(() => {
store.transaction.filterStart = null; store.transaction.filterStart = null;
store.transaction.filterEnd = null; store.transaction.filterEnd = null;
store.transaction.visibleModalFilterTransaction = false; store.transaction.visibleModalFilterTransaction = false;
await store.transaction.getDataHistoryTransaction(); actionFilter === true
? await store.transaction.getDataHistoryTopUpProfile(
store.authentication.profileData?.id
)
: await store.transaction.getDataHistoryTransaction();
}} }}
> >
<Row> <Row>

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

@ -122,13 +122,13 @@ export const Product = observer(() => {
<div> <div>
<Row> <Row>
<span style={{ fontWeight: "bold", marginBottom: "10px" }}> <span style={{ fontWeight: "bold", marginBottom: "10px" }}>
Sub Category Jenis Produk
</span> </span>
</Row> </Row>
<Row> <Row>
<Col span={24}> <Col span={24}>
<Select <Select
placeholder={"Select Sub Category"} placeholder={"Pilih Kategori"}
allowClear={true} allowClear={true}
onChange={(val) => handleChangeSubcategory(val)} onChange={(val) => handleChangeSubcategory(val)}
style={{ marginBottom: "10px", width: "100%" }} style={{ marginBottom: "10px", width: "100%" }}
@ -189,7 +189,7 @@ export const Product = observer(() => {
)} )}
<Modal <Modal
visible={visibleModalBuy} visible={visibleModalBuy}
title={`Are you sure buy ${barang?.product_name}?`} title={`Apakah anda yakin membeli ${barang?.product_name}?`}
okText={"Confirm"} okText={"Confirm"}
onCancel={() => { onCancel={() => {
form.resetFields(); form.resetFields();
@ -208,10 +208,10 @@ export const Product = observer(() => {
handleCancel(); handleCancel();
}} }}
> >
Cancel Batal
</Button>, </Button>,
<Button <Button
key="Buy Prod" key="Beli"
style={{ style={{
backgroundColor: "#4e79e7", backgroundColor: "#4e79e7",
color: "#fff", color: "#fff",
@ -229,10 +229,10 @@ export const Product = observer(() => {
}); });
}} }}
> >
Buy Prod Beli
</Button>, </Button>,
<Button <Button
key="Buy Stag" key="Beli Stag"
type="primary" type="primary"
onClick={() => { onClick={() => {
form form
@ -247,18 +247,18 @@ export const Product = observer(() => {
}); });
}} }}
> >
Buy Staging Beli Staging
</Button>, </Button>,
]} ]}
> >
<Form form={form} layout="vertical"> <Form form={form} layout="vertical">
<Form.Item <Form.Item
name="destination" name="destination"
label="Destination" label="Nomor Tujuan"
rules={[ rules={[
{ {
required: true, required: true,
message: "Please input Destination Number!", message: "Tolong masukan nomor tujuan!",
}, },
// { // {
// pattern: /^(?:\d*)$/, // pattern: /^(?:\d*)$/,

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

@ -10,6 +10,8 @@ import {
Modal, Modal,
Row, Row,
DatePicker, DatePicker,
Form,
Input,
} from "antd"; } from "antd";
import { BreadcumbComponent } from "../../component/BreadcumbComponent"; import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { Product } from "./Product"; import { Product } from "./Product";
@ -24,12 +26,16 @@ export const Transaction = observer(() => {
const { Title } = Typography; const { Title } = Typography;
const { Option } = Select; const { Option } = Select;
const modalLoader = useContext(ModalLoaderContext); const modalLoader = useContext(ModalLoaderContext);
const [form] = Form.useForm();
const [visibleModalBuy, setVisibleModalBuy] = useState(false);
const [barang, setBarang] = useState({});
useEffect(() => { useEffect(() => {
const init = async () => { const init = async () => {
try { try {
modalLoader.setLoading(true); modalLoader.setLoading(true);
await store.transaction.getDataCategories(); await store.transaction.getDataCategories();
await store.transaction.getDataSubCategories();
modalLoader.setLoading(false); modalLoader.setLoading(false);
} catch (e) { } catch (e) {
modalLoader.setLoading(false); modalLoader.setLoading(false);
@ -44,22 +50,96 @@ export const Transaction = observer(() => {
init(); init();
}, []); }, []);
const handleChangeTabs = async (key) => { const routeData = [
{
route: LINKS.TRANSACTION,
name: "Transaksi",
},
];
const handleChangeTabs = async (item) => {
modalLoader.setLoading(true); modalLoader.setLoading(true);
store.transaction.dataSubCategories = []; store.transaction.dataSubCategories = [];
store.transaction.data = []; store.transaction.data = [];
store.transaction.filterSubCategory = null; store.transaction.filterSubCategory = null;
store.transaction.filterCategory = key; store.transaction.filterCategory = item;
await store.transaction.getDataSubCategories(); await store.transaction.getDataSubCategories();
modalLoader.setLoading(false); modalLoader.setLoading(false);
}; };
const routeData = [ const handleChangeSubcategory = async (item) => {
{ store.transaction.filterSubCategory = item;
route: LINKS.TRANSACTION, modalLoader.setLoading(true);
name: "Transaksi" 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 ( return (
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
@ -75,13 +155,206 @@ export const Transaction = observer(() => {
Filter Filter
</Button> */} </Button> */}
</Col> </Col>
<Tabs onChange={handleChangeTabs} size="default" tabBarGutter="50"> {store.ui.mediaQuery.isDesktop && (
{store.transaction.dataCategories.map((item, index) => ( <Tabs onChange={handleChangeTabs} size="default" tabBarGutter="50">
<TabPane tab={item.name} key={item.id}> {store.transaction.dataCategories.map((item, index) => (
<Product /> <TabPane tab={item.name} key={item.id}>
</TabPane> <Product />
))} </TabPane>
</Tabs> ))}
</Tabs>
)}
{store.ui.mediaQuery.isMobile && (
<div>
<Row>
<span style={{ fontWeight: "bold", marginBottom: "10px" }}>
Jenis Produk
</span>
</Row>
<Row>
<Col span={24}>
<Select
placeholder={"Pilih Jenis Produk"}
allowClear={true}
onChange={(val) => handleChangeTabs(val)}
style={{ marginBottom: "10px", width: "100%" }}
>
{store.transaction.dataCategories.map((item, index) => (
<Option key={index} value={item.id}>
{item.name}
</Option>
))}
</Select>
</Col>
</Row>
<Row>
<span style={{ fontWeight: "bold", marginBottom: "10px" }}>
Kategori
</span>
</Row>
<Row>
<Col span={24}>
<Select
placeholder={"Pilih Kategori"}
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={`Apakah anda yakin membeli ${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();
}}
>
Batal
</Button>,
<Button
key="Beli"
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);
});
}}
>
Beli
</Button>,
<Button
key="Beli 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);
});
}}
>
Beli Staging
</Button>,
]}
>
<Form form={form} layout="vertical">
<Form.Item
name="destination"
label="Nomor Tujuan"
rules={[
{
required: true,
message: "Tolong masukan nomor tujuan!",
},
// {
// 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>
)}
</Card> </Card>
</div> </div>
); );

20
src/store/transaction.js
View File

@ -23,7 +23,7 @@ export class Transaction {
pageSizeSubCategories = 10; pageSizeSubCategories = 10;
dataSubCategories = []; dataSubCategories = [];
total_dataSubCategories = 0; total_dataSubCategories = 0;
filterSubCategory = null; //filterSubCategory = null;
pageHistoryTransaction = 0; pageHistoryTransaction = 0;
pageSizeHistoryTransaction = 10; pageSizeHistoryTransaction = 10;
@ -40,6 +40,9 @@ export class Transaction {
dataHistoryTopUp = []; dataHistoryTopUp = [];
total_dataHistoryTopUp = 0; total_dataHistoryTopUp = 0;
dataHistoryTopUpProfile = [];
total_dataHistoryTopUpProfile = 0;
dataTransaction = []; dataTransaction = [];
dataTransactionB2B = []; dataTransactionB2B = [];
dataTransactionPartner = []; dataTransactionPartner = [];
@ -155,7 +158,7 @@ export class Transaction {
async getDataHistoryTopUp(id) { async getDataHistoryTopUp(id) {
try { try {
const response = await http.get( const response = await http.get(
`/transaction/history-deposit?page=${this.pageHistoryTopUp}&pageSize=${this.pageSizeHistoryTopUp}&user-destination=${id}` `/transaction/history-deposit?page=${this.pageHistoryTopUp}&pageSize=${this.pageSizeHistoryTopUp}&user-destination=${id}&start=${this.filterStart}&end=${this.filterEnd}`
); );
console.log(response,'get data history') console.log(response,'get data history')
this.dataHistoryTopUp = response.body.data ?? []; this.dataHistoryTopUp = response.body.data ?? [];
@ -165,6 +168,19 @@ export class Transaction {
} }
} }
async getDataHistoryTopUpProfile(id) {
try {
const response = await http.get(
`/transaction/history-deposit-profile?page=${this.page}&pageSize=${this.pageSize}&user-destination=${id}&start=${this.filterStart}&end=${this.filterEnd}`
);
console.log(response,'get data history Profile')
this.dataHistoryTopUpProfile = response.body.data ?? [];
this.total_dataHistoryTopUpProfile = response?.body?.count ?? 0;
} catch (e) {
console.error(e);
}
}
async create(data) { async create(data) {
try { try {
const response = await http.post("/product").send(data); const response = await http.post("/product").send(data);