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

Merge branch 'develop' into 'devops-production'

Browse Source 
Develop

See merge request empatnusabangsa/ppob/ppob-frontend!119
This commit is contained in:
ajat sudrajat 2022-02-03 07:02:30 +00:00
commit d51d7e648c
27 changed files with 929 additions and 447 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/component/CategoryComponent.js
View File

@ -45,7 +45,7 @@ export const CategoryComponent = observer((props) => {
key: "name",
},
{
title: "Action",
title: "Tindakan",
key: "action",
render: (text, record) => (
<Space size="middle">
@ -209,7 +209,7 @@ export const CategoryComponent = observer((props) => {
visible={store.category.visibleModalCategory}
title={idData ? "Edit Category" : "Create a new Category"}
okText={idData ? "Edit" : "Create"}
cancelText="Cancel"
cancelText="Batal"
onCancel={() => {
form.resetFields();
handleCancel();

8
src/component/CommissionComponent.js
View File

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

16
src/component/PartnerComponent.js
View File

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

12
src/component/ProductComponent.js
View File

@ -113,7 +113,7 @@ export const ProductComponent = observer((props) => {
),
},
{
title: "Action",
title: "Tindakan",
key: "action",
render: (text, record) => (
<Button
@ -156,12 +156,12 @@ export const ProductComponent = observer((props) => {
icon: <ExclamationCircleOutlined />,
okText: "Yes",
okType: "primary",
cancelText: "Cancel",
cancelText: "Batal",
onOk() {
return deleteData(id);
},
onCancel() {
console.log("Cancel");
console.log("Batal");
},
});
};
@ -349,8 +349,8 @@ export const ProductComponent = observer((props) => {
<div style={{}}>
<p>
<small>{item.product_name}</small> <br />
<small>Harga Beli : {item.current_price_price}</small>
<br />
{/* <small>Harga Beli : {item.current_price_price}</small>
<br /> */}
<small>Harga Jual : {item.mark_up_price}</small>
</p>
<p></p>
@ -387,7 +387,7 @@ export const ProductComponent = observer((props) => {
visible={store.product.visibleModalProduct}
title={idData ? "Edit Product" : "Create a new Product"}
okText={idData ? "Edit" : "Create"}
cancelText="Cancel"
cancelText="Batal"
onCancel={() => {
form.resetFields();
handleCancel();

4
src/component/SubcategoryComponent.js
View File

@ -57,7 +57,7 @@ export const SubcategoryComponent = observer((props) => {
key: "categoryName",
},
{
title: "Action",
title: "Tindakan",
key: "action",
render: (text, record) => (
<Space size="middle">
@ -214,7 +214,7 @@ export const SubcategoryComponent = observer((props) => {
visible={store.subcategory.visibleModalSubcategory}
title={idData ? "Edit Sub Category" : "Create a new sub category"}
okText={idData ? "Edit" : "Create"}
cancelText="Cancel"
cancelText="Batal"
onCancel={() => {
form.resetFields();
handleCancel();

10
src/component/SupplierComponent.js
View File

@ -112,7 +112,7 @@ export const SupplierComponent = observer((props) => {
),
},
{
title: "Action",
title: "Tindakan",
key: "action",
width: "20%",
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) => {
try {
console.log(id);
@ -151,12 +153,12 @@ export const SupplierComponent = observer((props) => {
icon: <ExclamationCircleOutlined />,
okText: "Yes",
okType: "primary",
cancelText: "Cancel",
cancelText: "Batal",
onOk() {
return deleteData(id);
},
onCancel() {
console.log("Cancel");
console.log("Batal");
},
});
};
@ -342,7 +344,7 @@ export const SupplierComponent = observer((props) => {
visible={store.supplier.visibleModalSupplier}
title={idData ? "Edit Supplier" : "Create a new Supplier"}
okText={idData ? "Edit" : "Create"}
cancelText="Cancel"
cancelText="Batal"
onCancel={() => {
form.resetFields();
handleCancel();

4
src/component/TopupsaldoModal.js
View File

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

6
src/constants/payback.js
View File

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

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

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

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

@ -56,7 +56,8 @@ export const MenuList = observer((props) => {
overflowedIndicator={0}
forceSubMenuRender={true}
>
{store.authentication.userData.role === "Admin" && (
{(store.authentication.userData.role === "Admin" ||
store.authentication.userData.role === "Customer Service") && (
<Menu.Item key="home">
<Link to={LINKS.HOME}>
<HomeOutlined />
@ -72,7 +73,48 @@ export const MenuList = observer((props) => {
</Link>
</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
key="keanggotaan"
icon={<UsergroupAddOutlined />}
@ -81,47 +123,7 @@ export const MenuList = observer((props) => {
<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>
<span>Daftar Anggota</span>
</Link>
</Menu.Item>
</SubMenu>
@ -142,7 +144,8 @@ export const MenuList = observer((props) => {
</Link>
</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">
<Menu.Item key="partner">
<Link to={LINKS.PARTNER}>
@ -164,7 +167,8 @@ export const MenuList = observer((props) => {
</Menu.Item>
</SubMenu>
)}
{store.authentication.userData.role === "Admin" && (
{(store.authentication.userData.role === "Admin" ||
store.authentication.userData.role === "Customer Service") && (
<SubMenu
key="product-main"
icon={<AppstoreAddOutlined />}
@ -176,22 +180,20 @@ export const MenuList = observer((props) => {
<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>
)}
<Menu.Item key="sub-category">
<Link to={LINKS.SUBCATEGORY}>
<FileSyncOutlined />
<span>Sub Kategori</span>
</Link>
</Menu.Item>
<Menu.Item key="category">
<Link to={LINKS.CATEGORY}>
<FileAddOutlined />
<span>Kategori</span>
</Link>
</Menu.Item>
</SubMenu>
)}
{store.authentication.userData.role === "Admin Partner" && (
@ -240,14 +242,15 @@ export const MenuList = observer((props) => {
</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>
)}
{store.authentication.userData.role !== "Admin" ||
(store.authentication.userData.role !== "Customer Service" && (
<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" && (

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

@ -1,14 +1,14 @@
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";
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;
const { Search } = Input;
export const Partner = observer(() => {
const store = useStore();
@ -40,22 +40,22 @@ export const Partner = observer(() => {
},
{
route: LINKS.PARTNER,
name: <span style={{fontWeight: 'bold'}}>Rekanan</span>,
name: <span style={{ fontWeight: "bold" }}>Rekanan</span>,
},
];
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/>
<BreadcumbComponent data={routeData} />
<Card>
<Row style={{marginBottom: 20}}>
<Row style={{ marginBottom: 20 }}>
{/* <Col span={12}>
<Button>
<FilterOutlined/>
Filter
</Button>
</Col> */}
<Col span={24} style={{textAlign: "right"}}>
<Col span={24} style={{ textAlign: "right" }}>
{/* <Search
placeholder="input search text"
style={{
@ -64,12 +64,16 @@ export const Partner = observer(() => {
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}}
/> */}
<Button onClick={() => store.partner.visibleModalPartner = true}>
<PlusSquareOutlined/> New
</Button>
{store.authentication.userData.role !== "Customer Service" && (
<Button
onClick={() => (store.partner.visibleModalPartner = true)}
>
<PlusSquareOutlined /> New
</Button>
)}
</Col>
</Row>
<PartnerComponent/>
<PartnerComponent />
</Card>
</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 {
Button,
Card,
@ -21,7 +21,7 @@ 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";
import { ModalLoaderContext } from "../../utils/modal";
const { Search } = Input;
@ -80,11 +80,13 @@ export const Supplier = observer(() => {
}}
onSearch={(value) => console.log(value)}
/> */}
<Button
onClick={() => (store.supplier.visibleModalSupplier = true)}
>
<PlusSquareOutlined /> New
</Button>
{store.authentication.userData.role !== "Customer Service" && (
<Button
onClick={() => (store.supplier.visibleModalSupplier = true)}
>
<PlusSquareOutlined /> New
</Button>
)}
</Col>
</Row>
<SupplierComponent />

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

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

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

@ -161,7 +161,12 @@ export const DetailUser = observer(() => {
};
const columns = [
{
title: "Amount",
title: "Pengirim",
dataIndex: "sender_name",
key: "sender_name",
},
{
title: "Nominal",
dataIndex: "amount",
key: "amount",
render: (text) =>
@ -391,8 +396,8 @@ export const DetailUser = observer(() => {
Detail User
</Title>
<Col
lg={store.authentication.userData.role === "Admin" ? 18 : 17}
xs={store.authentication.userData.role === "Admin" ? 18 : 17}
lg={store.authentication.userData.role === "Admin" ? 18 : 13}
xs={store.authentication.userData.role === "Admin" ? 18 : 13}
style={{ textAlign: "right" }}
>
<Space
@ -401,73 +406,79 @@ export const DetailUser = observer(() => {
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 === "Admin" && (
<Space>
<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>
</Space>
)}
{((store.authentication.userData.role === "Sales" &&
store.membership.dataDetail.is_rejected === true &&
store.membership.dataDetail.is_active === false) ||

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

@ -113,7 +113,7 @@ export const Konfirmasi = observer(() => {
),
},
{
title: "Action",
title: "Tindakan",
dataIndex: "amount",
key: "action",
width: "10%",
@ -126,14 +126,14 @@ export const Konfirmasi = observer(() => {
title: `Are you sure Accept this submission?`,
icon: <CheckOutlined />,
okText: "Accept",
cancelText: "Cancel",
cancelText: "Batal",
okType: "primary",
onOk() {
handleApprove(record.id);
console.log(record.id);
},
onCancel() {
console.log("Cancel");
console.log("Batal");
},
});
}}
@ -152,13 +152,13 @@ export const Konfirmasi = observer(() => {
title: `Are you sure Reject this submission?`,
icon: <StopOutlined />,
okText: "Reject",
cancelText: "Cancel",
cancelText: "Batal",
okType: "primary",
onOk() {
handleReject(record.id);
},
onCancel() {
console.log("Cancel");
console.log("Batal");
},
});
}}
@ -315,13 +315,13 @@ export const Konfirmasi = observer(() => {
title: `Are you sure Accept this submission?`,
icon: <CheckOutlined />,
okText: "Accept",
cancelText: "Cancel",
cancelText: "Batal",
okType: "primary",
onOk() {
handleApprove(item.id);
},
onCancel() {
console.log("Cancel");
console.log("Batal");
},
});
}}
@ -340,13 +340,13 @@ export const Konfirmasi = observer(() => {
title: `Are you sure Reject this submission?`,
icon: <StopOutlined />,
okText: "Reject",
cancelText: "Cancel",
cancelText: "Batal",
okType: "primary",
onOk() {
handleReject(item.id);
},
onCancel() {
console.log("Cancel");
console.log("Batal");
},
});
}}

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

@ -196,7 +196,7 @@ export const Membership = observer(() => {
}).format(text),
},
{
title: "Action",
title: "Tindakan",
key: "action",
render: (text, record) => (
<Space size="middle">
@ -344,14 +344,17 @@ export const Membership = observer(() => {
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}}
/> */}
<Button
onClick={() => {
setInitialData({});
setVisibleModal(true);
}}
>
<PlusSquareOutlined /> New
</Button>
{store.authentication.userData.role !== "Customer Service" && (
<Button
onClick={() => {
setInitialData({});
setVisibleModal(true);
}}
>
<PlusSquareOutlined /> New
</Button>
)}
</Col>
</Row>
{store.ui.mediaQuery.isDesktop && (
@ -496,7 +499,7 @@ export const Membership = observer(() => {
visible={isVisibleTopUpModal}
title="Top Up Saldo"
okText="Top Up"
cancelText="Cancel"
cancelText="Batal"
onCancel={() => {
form.resetFields();
handleCancelTransaction();
@ -517,7 +520,7 @@ export const Membership = observer(() => {
<Form form={form} layout="vertical">
<Form.Item
name="amount"
label="Amount"
label="Nominal"
rules={[{ required: true, message: "Please input amount!" }]}
>
<InputNumber

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

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

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

@ -72,7 +72,7 @@ export const Payback = observer(() => {
key: "userData_name",
},
{
title: "Picture",
title: "Gambar",
dataIndex: "image_prove",
key: "image_prove",
render: (text, record) => (
@ -84,7 +84,7 @@ export const Payback = observer(() => {
),
},
{
title: "Amount",
title: "Nominal",
dataIndex: "amount",
key: "amount",
width: "20%",
@ -95,7 +95,7 @@ export const Payback = observer(() => {
}).format(text),
},
{
title: "Action",
title: "Tindakan",
dataIndex: "amount",
key: "action",
width: "10%",
@ -108,13 +108,13 @@ export const Payback = observer(() => {
title: `Are you sure Accept this submission?`,
icon: <CheckOutlined />,
okText: "Accept",
cancelText: "Cancel",
cancelText: "Batal",
okType: "primary",
onOk() {
handleAction(record.id, "accept");
},
onCancel() {
console.log("Cancel");
console.log("Batal");
},
});
}}
@ -133,13 +133,13 @@ export const Payback = observer(() => {
title: `Are you sure Reject this submission?`,
icon: <StopOutlined />,
okText: "Reject",
cancelText: "Cancel",
cancelText: "Batal",
okType: "primary",
onOk() {
handleAction(record.id, "reject");
},
onCancel() {
console.log("Cancel");
console.log("Batal");
},
});
}}
@ -244,7 +244,7 @@ export const Payback = observer(() => {
modalLoader.setLoading(false);
store.payback.visibleModalFilterPayback = false;
};
const footerLayoutFilter = [
<Button
key={"remove"}
@ -377,13 +377,13 @@ export const Payback = observer(() => {
title: `Are you sure Accept this submission?`,
icon: <CheckOutlined />,
okText: "Accept",
cancelText: "Cancel",
cancelText: "Batal",
okType: "primary",
onOk() {
handleAction(item.id, "accept");
},
onCancel() {
console.log("Cancel");
console.log("Batal");
},
});
}}
@ -402,13 +402,13 @@ export const Payback = observer(() => {
title: `Are you sure Reject this submission?`,
icon: <StopOutlined />,
okText: "Reject",
cancelText: "Cancel",
cancelText: "Batal",
okType: "primary",
onOk() {
handleAction(item.id, "reject");
},
onCancel() {
console.log("Cancel");
console.log("Batal");
},
});
}}
@ -478,7 +478,7 @@ export const Payback = observer(() => {
<Row>
<Col span={24}>
<Title level={5} type={"secondary"} strong>
Sender
Pengirim
</Title>
<Form layout="vertical" name="filter" form={form}>
<Select
@ -498,14 +498,14 @@ export const Payback = observer(() => {
</Select>
<Form.Item
name="start_date"
label="Dari"
label="Dari Tanggal"
rules={[{ required: true, message: "Please input Date!" }]}
>
<DatePicker style={{ width: "100%" }}/>
</Form.Item>
<Form.Item
name="end_date"
label="Sampai"
label="Sampai Tanggal"
rules={[{ required: true, message: "Please input Date!" }]}
>
<DatePicker style={{ width: "100%" }} />

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

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

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

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

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

@ -1,13 +1,12 @@
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";
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();
@ -49,11 +48,13 @@ export const Category = observer(() => {
<Card>
<Row style={{ marginBottom: 20 }}>
<Col span={24} style={{ textAlign: "right" }}>
<Button
onClick={() => (store.category.visibleModalCategory = true)}
>
<PlusSquareOutlined /> New
</Button>
{store.authentication.userData.role !== "Customer Service" && (
<Button
onClick={() => (store.category.visibleModalCategory = true)}
>
<PlusSquareOutlined /> New
</Button>
)}
</Col>
</Row>

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

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

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

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

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

@ -14,6 +14,7 @@ import {
List,
Image,
Tag,
Tabs,
} from "antd";
import moment from "moment";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
@ -23,14 +24,15 @@ 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";
import { useParams } from "react-router-dom";
const { TabPane } = Tabs;
const { Title, Text } = Typography;
const { RangePicker } = DatePicker;
export const Profile = observer(() => {
const store = useStore();
const [form] = Form.useForm();
const { id } = useParams();
const modalLoader = useContext(ModalLoaderContext);
const [filterStart, setFilterStart] = useState([]);
const [filterEnd, setFilterEnd] = useState([]);
@ -59,11 +61,16 @@ export const Profile = observer(() => {
await Promise.allSettled([
store.authentication.getProfile(),
store.transaction.getDataHistoryTransaction(),
store.transaction.getDataHistoryTopUpProfile(
store.authentication.profileData?.id
),
]);
modalLoader.setLoading(false);
})();
}, []);
const handleRemoveFilter = async () => {
store.transaction.filterStart = null;
store.transaction.filterEnd = null;
@ -172,10 +179,10 @@ export const Profile = observer(() => {
}
>
{record.status === 1
? "Success"
? "Sukses"
: record.status === 0
? "Pending"
: "Failed"}
? "Dalam Proses"
: "Gagal"}
</Tag>
);
},
@ -210,6 +217,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: "Transaction Date",
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
? {
display: "flex",
@ -240,7 +276,7 @@ export const Profile = observer(() => {
<Col lg={12} xs={24}>
<Row>
<Col span={12}>
<Text strong>Name</Text>
<Text strong>Nama</Text>
</Col>
<Col span={12}>
<Text>
@ -248,7 +284,7 @@ export const Profile = observer(() => {
</Text>
</Col>
<Col span={12}>
<Text strong>Phone Number</Text>
<Text strong>No. Telepon</Text>
</Col>
<Col span={12}>
<Text>
@ -268,7 +304,7 @@ export const Profile = observer(() => {
<Text>{store.authentication.profileData.roles?.name}</Text>
</Col>
<Col span={12}>
<Text strong>Superior</Text>
<Text strong>Upline</Text>
</Col>
<Col span={12}>
<Text>
@ -357,152 +393,267 @@ export const Profile = observer(() => {
</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,
<Tabs defaultActiveKey="1">
<TabPane tab="History Top Up" key="1">
<Button
style={{ marginBottom: "1rem", marginLeft: 5 }}
onClick={() => {
store.transaction.visibleModalFilterTransaction = true;
}}
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);
>
<FilterOutlined />
Filter
</Button>
{store.ui.mediaQuery.isDesktop && (
<Table
key="1"
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="History Transaction" key="2">
<Button
style={{ marginBottom: "1rem", marginLeft: 5 }}
onClick={() => {
store.transaction.visibleModalFilterTransaction = true;
}}
/>
)}
{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;
>
<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);
},
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"
}}
/>
)}
{store.ui.mediaQuery.isMobile && (
<div>
<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
? "Sukses"
: item.status === 0
? "Dalam Proses"
: "Gagal"}
</Tag>
}
>
{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>
</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>
)}
</TabPane>
</Tabs>
</Col>
</Row>
<div />
</Card>
<Modal
visible={store.transaction.visibleModalFilterTransaction}

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

@ -189,7 +189,7 @@ export const Product = observer(() => {
)}
<Modal
visible={visibleModalBuy}
title={`Are you sure buy ${barang?.product_name}?`}
title={`Apakah anda yakin membeli ${barang?.product_name}?`}
okText={"Confirm"}
onCancel={() => {
form.resetFields();
@ -208,10 +208,10 @@ export const Product = observer(() => {
handleCancel();
}}
>
Cancel
Batal
</Button>,
<Button
key="Buy Prod"
key="Beli"
style={{
backgroundColor: "#4e79e7",
color: "#fff",
@ -229,10 +229,10 @@ export const Product = observer(() => {
});
}}
>
Buy Prod
Beli
</Button>,
<Button
key="Buy Stag"
key="Beli Stag"
type="primary"
onClick={() => {
form
@ -247,18 +247,18 @@ export const Product = observer(() => {
});
}}
>
Buy Staging
Beli Staging
</Button>,
]}
>
<Form form={form} layout="vertical">
<Form.Item
name="destination"
label="Destination"
label="Nomor Tujuan"
rules={[
{
required: true,
message: "Please input Destination Number!",
message: "Tolong masukan nomor tujuan!",
},
// {
// pattern: /^(?:\d*)$/,

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

@ -10,6 +10,8 @@ import {
Modal,
Row,
DatePicker,
Form,
Input,
} from "antd";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { Product } from "./Product";
@ -24,12 +26,16 @@ export const Transaction = observer(() => {
const { Title } = Typography;
const { Option } = Select;
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 store.transaction.getDataCategories();
await store.transaction.getDataSubCategories();
modalLoader.setLoading(false);
} catch (e) {
modalLoader.setLoading(false);
@ -44,22 +50,96 @@ export const Transaction = observer(() => {
init();
}, []);
const handleChangeTabs = async (key) => {
const routeData = [
{
route: LINKS.TRANSACTION,
name: "Transaksi",
},
];
const handleChangeTabs = async (item) => {
modalLoader.setLoading(true);
store.transaction.dataSubCategories = [];
store.transaction.data = [];
store.transaction.filterSubCategory = null;
store.transaction.filterCategory = key;
store.transaction.filterCategory = item;
await store.transaction.getDataSubCategories();
modalLoader.setLoading(false);
};
const routeData = [
{
route: LINKS.TRANSACTION,
name: "Transaksi"
},
];
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 className={["ppob-container"].join(" ")}>
@ -75,13 +155,206 @@ export const Transaction = observer(() => {
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>
))}
</Tabs>
{store.ui.mediaQuery.isDesktop && (
<Tabs onChange={handleChangeTabs} size="default" tabBarGutter="50">
{store.transaction.dataCategories.map((item, index) => (
<TabPane tab={item.name} key={item.id}>
<Product />
</TabPane>
))}
</Tabs>
)}
{store.ui.mediaQuery.isMobile && (
<div>
<Row>
<span style={{ fontWeight: "bold", marginBottom: "10px" }}>
Kategori
</span>
</Row>
<Row>
<Col span={24}>
<Select
placeholder={"Select Category"}
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" }}>
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={`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>
</div>
);

18
src/store/transaction.js
View File

@ -23,7 +23,7 @@ export class Transaction {
pageSizeSubCategories = 10;
dataSubCategories = [];
total_dataSubCategories = 0;
filterSubCategory = null;
//filterSubCategory = null;
pageHistoryTransaction = 0;
pageSizeHistoryTransaction = 10;
@ -40,6 +40,9 @@ export class Transaction {
dataHistoryTopUp = [];
total_dataHistoryTopUp = 0;
dataHistoryTopUpProfile = [];
total_dataHistoryTopUpProfile = 0;
dataTransaction = [];
dataTransactionB2B = [];
dataTransactionPartner = [];
@ -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) {
try {
const response = await http.post("/product").send(data);