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

Merge branch 'develop' into 'devops-staging'

Browse Source 
Tambah Role Customer Service

See merge request empatnusabangsa/ppob/ppob-frontend!115
This commit is contained in:
ajat sudrajat 2022-02-03 05:15:07 +00:00
commit c5c1743fff
13 changed files with 476 additions and 278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/component/CommissionComponent.js
View File

@ -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;

2
src/component/PartnerComponent.js
View File

@ -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);

2
src/component/SupplierComponent.js
View File

@ -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);

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 />}
@ -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 />}
@ -308,14 +312,16 @@ export const DesktopLayout = observer(() => {
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
{store.authentication.userData.role !== "Admin" && ( {store.authentication.userData.role !== "Admin" ||
<Menu.Item key="payback-from-user"> (store.authentication.userData.role !==
<Link to={LINKS.PAYBACK_CREATED}> "Customer Service" && (
<AlipayOutlined /> <Menu.Item key="payback-from-user">
<span>Dibuat oleh Saya</span> <Link to={LINKS.PAYBACK_CREATED}>
</Link> <AlipayOutlined />
</Menu.Item> <span>Dibuat oleh Saya</span>
)} </Link>
</Menu.Item>
))}
</SubMenu> </SubMenu>
)} )}
{store.authentication.userData.role !== "Admin" && ( {store.authentication.userData.role !== "Admin" && (

139
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,47 +73,48 @@ export const MenuList = observer((props) => {
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
{store.authentication.userData.role === "Admin" && ( {(store.authentication.userData.role === "Admin" ||
<SubMenu store.authentication.userData.role === "Customer Service") && (
key="keanggotaan" <SubMenu
icon={<UsergroupAddOutlined />} key="keanggotaan"
title="Keanggotaan" icon={<UsergroupAddOutlined />}
> title="Keanggotaan"
<Menu.Item key="membership"> >
<Link to={LINKS.MEMBERSHIP}> <Menu.Item key="membership">
<UnorderedListOutlined /> <Link to={LINKS.MEMBERSHIP}>
<span>Daftar Anggota</span> <UnorderedListOutlined />
</Link> <span>Daftar Anggota</span>
</Menu.Item> </Link>
<Menu.Item key="konfirmasi"> </Menu.Item>
<Link to={LINKS.KONFIRMASI}> <Menu.Item key="konfirmasi">
<FormOutlined /> <Link to={LINKS.KONFIRMASI}>
<span>Konfirm Retail</span> <FormOutlined />
</Link> <span>Konfirm Retail</span>
</Menu.Item> </Link>
</SubMenu> </Menu.Item>
)} </SubMenu>
{store.authentication.userData.role === "Supervisor" && ( )}
<SubMenu {store.authentication.userData.role === "Supervisor" && (
key="keanggotaan" <SubMenu
icon={<UsergroupAddOutlined />} key="keanggotaan"
title="Keanggotaan" icon={<UsergroupAddOutlined />}
> title="Keanggotaan"
<Menu.Item key="membership"> >
<Link to={LINKS.MEMBERSHIP}> <Menu.Item key="membership">
<UnorderedListOutlined /> <Link to={LINKS.MEMBERSHIP}>
<span>Daftar Anggota</span> <UnorderedListOutlined />
</Link> <span>Daftar Anggota</span>
</Menu.Item> </Link>
<Menu.Item key="konfirmasi"> </Menu.Item>
<Link to={LINKS.KONFIRMASI}> <Menu.Item key="konfirmasi">
<FormOutlined /> <Link to={LINKS.KONFIRMASI}>
<span>Konfirm Retail</span> <FormOutlined />
</Link> <span>Konfirm Retail</span>
</Menu.Item> </Link>
</SubMenu> </Menu.Item>
)} </SubMenu>
{/* {store.authentication.userData.role === "Sales" && ( )}
{/* {store.authentication.userData.role === "Sales" && (
<SubMenu <SubMenu
key="keanggotaan" key="keanggotaan"
icon={<UsergroupAddOutlined />} icon={<UsergroupAddOutlined />}
@ -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" && (
@ -240,14 +242,15 @@ export const MenuList = observer((props) => {
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
{store.authentication.userData.role !== "Admin" && ( {store.authentication.userData.role !== "Admin" ||
<Menu.Item key="payback-from-user"> (store.authentication.userData.role !== "Customer Service" && (
<Link to={LINKS.PAYBACK_CREATED}> <Menu.Item key="payback-from-user">
<FileProtectOutlined /> <Link to={LINKS.PAYBACK_CREATED}>
<span>Dibuat oleh Saya</span> <FileProtectOutlined />
</Link> <span>Dibuat oleh Saya</span>
</Menu.Item> </Link>
)} </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,

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

@ -344,14 +344,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 && (

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>

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 />

431
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,14 +24,15 @@ 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([]);
@ -59,11 +61,16 @@ export const Profile = observer(() => {
await Promise.allSettled([ await Promise.allSettled([
store.authentication.getProfile(), store.authentication.getProfile(),
store.transaction.getDataHistoryTransaction(), store.transaction.getDataHistoryTransaction(),
store.transaction.getDataHistoryTopUpProfile(
store.authentication.profileData?.id
),
]); ]);
modalLoader.setLoading(false); modalLoader.setLoading(false);
})(); })();
}, []); }, []);
const handleRemoveFilter = async () => { const handleRemoveFilter = async () => {
store.transaction.filterStart = null; store.transaction.filterStart = null;
store.transaction.filterEnd = null; store.transaction.filterEnd = null;
@ -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 const styleSaldoTitle = store.ui.mediaQuery.isDesktop
? { ? {
display: "flex", display: "flex",
@ -357,152 +393,267 @@ export const Profile = observer(() => {
</Row> </Row>
<Row> <Row>
<Col span={24}> <Col span={24}>
<div> <Tabs defaultActiveKey="1">
<Title strong level={3}> <TabPane tab="History Top Up" key="1">
Riwayat Transaksi <Button
</Title> style={{ marginBottom: "1rem", marginLeft: 5 }}
<Button onClick={() => {
style={{ marginBottom: "1rem" }} store.transaction.visibleModalFilterTransaction = true;
onClick={() => {
store.transaction.visibleModalFilterTransaction = true;
}}
>
<FilterOutlined />
Filter
</Button>
{store.ui.mediaQuery.isDesktop && (
<Table
columns={columns}
bordered
scroll={{ x: 1300 }}
//scroll={{ x: 1500, y: 300 }}
dataSource={store.transaction.dataHistoryTransaction}
pagination={{
pageSize: store.transaction.pageSizeHistoryTransaction,
total: store.transaction.total_dataHistoryTransaction,
current: store.transaction.pageHistoryTransaction + 1,
showSizeChanger: true,
simple: false,
}} }}
onChange={async (page) => { >
let pageNumber = page.current; <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="History Transaction" 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 />
? "Sukses" <small>
: item.status === 0 No.Seri : {item.seri_number}
? "Dalam Proses" </small>{" "}
: "Gagal"} <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}

16
src/store/transaction.js
View File

@ -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 = [];
@ -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}`
);
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);