Perbaikan PPOB
This commit is contained in:
parent
ba5eef89fb
commit
036cba0528
|
|
@ -492,7 +492,7 @@ export const ProductComponent = observer((props) => {
|
|||
))}
|
||||
</Select>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
{/* <Col span={24}>
|
||||
<Title level={5} type={"secondary"} strong>
|
||||
Filter Categories
|
||||
</Title>
|
||||
|
|
@ -509,7 +509,7 @@ export const ProductComponent = observer((props) => {
|
|||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Col>
|
||||
</Col> */}
|
||||
<Col span={24}>
|
||||
<Title level={5} type={"secondary"} strong>
|
||||
Filter Sub-Categories
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@ export const DesktopLayout = observer(() => {
|
|||
|
||||
{store.ui.mediaQuery.isMobile && (
|
||||
<Drawer
|
||||
title="Navigation"
|
||||
title={`PPOB ${store.authentication.userData.role}`}
|
||||
placement={"left"}
|
||||
closable={false}
|
||||
width={"50%"}
|
||||
|
|
@ -124,14 +124,14 @@ export const DesktopLayout = observer(() => {
|
|||
}}
|
||||
>
|
||||
<Menu>
|
||||
{/* {store.authentication.userData.role !== "Admin Partner" && ( */}
|
||||
{store.authentication.userData.role !== "Retail" && (
|
||||
<Menu.Item key="home">
|
||||
<Link to={LINKS.HOME}>
|
||||
<HomeOutlined />
|
||||
<span>Beranda</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
{/* )} */}
|
||||
)}
|
||||
{store.authentication.userData.role === "Admin" && (
|
||||
<Menu.Item key="membership">
|
||||
<Link to={LINKS.MEMBERSHIP}>
|
||||
|
|
@ -237,14 +237,14 @@ export const DesktopLayout = observer(() => {
|
|||
</Link>
|
||||
</Menu.Item>
|
||||
)}
|
||||
{store.authentication.userData.role === "Admin Partner" && (
|
||||
{/* {store.authentication.userData.role === "Admin Partner" && (
|
||||
<Menu.Item key="transaction">
|
||||
<Link to={LINKS.TRANSACTION}>
|
||||
<ShoppingCartOutlined />
|
||||
<span>Transaksi</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
)}
|
||||
)} */}
|
||||
{store.authentication.userData.role === "Retail" && (
|
||||
<Menu.Item key="transaction">
|
||||
<Link to={LINKS.TRANSACTION}>
|
||||
|
|
|
|||
82
src/pages/Membership/FilterUser.js
Normal file
82
src/pages/Membership/FilterUser.js
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
import React, { useState } from "react";
|
||||
import { Form, Input, Modal, Select, InputNumber,Row,Title,Col,Option } from "antd";
|
||||
import { useStore } from "../../utils/useStore";
|
||||
import { observer } from "mobx-react-lite";
|
||||
|
||||
|
||||
export const FilterUser = observer(() => {
|
||||
const store = useStore();
|
||||
// const [form] = Form.useForm();
|
||||
// const { Option } = Select;
|
||||
// const store = useStore();
|
||||
// const [value, setValue] = useState();
|
||||
|
||||
return (
|
||||
<Modal
|
||||
visible={store.membership.visibleModalFilterMembership}
|
||||
title={"Filter"}
|
||||
//footer={footerLayoutFilter}
|
||||
>
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<Title level={5} type={"secondary"} strong>
|
||||
Filter Supplier
|
||||
</Title>
|
||||
<Select
|
||||
mode={"multiple"}
|
||||
placeholder="Choose Supplier"
|
||||
// onChange={(val) => {
|
||||
// setFilterSupplier(val);
|
||||
// }}
|
||||
style={{ marginBottom: "20px", width: "100%" }}
|
||||
// value={filterSupplier}
|
||||
>
|
||||
{store.supplier.data.map((item) => (
|
||||
<Option value={item.id} key={item.id}>
|
||||
{item.name}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Title level={5} type={"secondary"} strong>
|
||||
Filter Categories
|
||||
</Title>
|
||||
<Select
|
||||
mode={"multiple"}
|
||||
placeholder="Choose Category"
|
||||
// onChange={async (val) => handleFilterCategory(val)}
|
||||
style={{ marginBottom: "20px", width: "100%" }}
|
||||
value={store.product.filterCategory || []}
|
||||
>
|
||||
{store.category.data.map((item) => (
|
||||
<Option value={item.id} key={item.id}>
|
||||
{item.name}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Title level={5} type={"secondary"} strong>
|
||||
Filter Sub-Categories
|
||||
</Title>
|
||||
<Select
|
||||
mode={"multiple"}
|
||||
placeholder="Choose Sub-Category"
|
||||
// onChange={(val) => {
|
||||
// setFilterSubCategories(val);
|
||||
// }}
|
||||
style={{ marginBottom: "20px", width: "100%" }}
|
||||
// value={filterSubCategories}
|
||||
>
|
||||
{store.product.dataSubCategories.map((item) => (
|
||||
<Option value={item.id} key={item.id}>
|
||||
{item.name}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Col>
|
||||
</Row>
|
||||
</Modal>
|
||||
);
|
||||
});
|
||||
|
|
@ -13,10 +13,17 @@ import {
|
|||
Space,
|
||||
Table,
|
||||
Tag,
|
||||
Select,
|
||||
Option,
|
||||
Typography,
|
||||
} from "antd";
|
||||
import { useStore } from "../../utils/useStore";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { DownloadOutlined, PlusSquareOutlined } from "@ant-design/icons";
|
||||
import {
|
||||
DownloadOutlined,
|
||||
PlusSquareOutlined,
|
||||
FilterOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { MembershipModal } from "./MembershipModal";
|
||||
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
|
||||
import { LINKS } from "../../routes/app";
|
||||
|
|
@ -25,6 +32,8 @@ import { ModalLoaderContext } from "../../utils/modal";
|
|||
|
||||
export const Membership = observer(() => {
|
||||
const history = useHistory();
|
||||
const { Option } = Select;
|
||||
const { Title } = Typography;
|
||||
const [form] = Form.useForm();
|
||||
const store = useStore();
|
||||
const [visibleModal, setVisibleModal] = useState(false);
|
||||
|
|
@ -33,14 +42,17 @@ export const Membership = observer(() => {
|
|||
const [initialData, setInitialData] = useState({});
|
||||
const [confirmLoading, setConfirmLoading] = useState(false);
|
||||
const modalLoader = useContext(ModalLoaderContext);
|
||||
const [filterMembership, setFilterMembership] = useState([]);
|
||||
const [filterPartner, setFilterPartner] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
try {
|
||||
modalLoader.setLoading(true);
|
||||
const isAdmin = store.authentication.userData.role === "Admin";
|
||||
|
||||
await getData();
|
||||
await store.membership.getDataBySuperior();
|
||||
await store.partner.getData();
|
||||
await store.role.getData(isAdmin);
|
||||
modalLoader.setLoading(false);
|
||||
} catch (e) {
|
||||
|
|
@ -81,6 +93,59 @@ export const Membership = observer(() => {
|
|||
}
|
||||
};
|
||||
|
||||
const handleRemoveFilter = async () => {
|
||||
store.membership.filterMembership = null;
|
||||
store.membership.filterPartner = null;
|
||||
setFilterMembership([]);
|
||||
setFilterPartner([]);
|
||||
//store.product.filterCategory = null;
|
||||
//setFilterSubCategories([]);
|
||||
await store.membership.getData();
|
||||
store.membership.visibleModalFiltermembership = false;
|
||||
};
|
||||
const handleCancelFilter = () => {
|
||||
setFilterMembership([]);
|
||||
setFilterPartner([]);
|
||||
//store.product.filterCategory = null;
|
||||
//setFilterSubCategories([]);
|
||||
store.membership.visibleModalFilterMembership = false;
|
||||
};
|
||||
|
||||
const handleSubmitFilter = async () => {
|
||||
store.membership.filterMembership = filterMembership;
|
||||
store.membership.filterPartner = filterPartner;
|
||||
modalLoader.setLoading(true);
|
||||
await store.membership.getData();
|
||||
//await store.product.getData();
|
||||
modalLoader.setLoading(false);
|
||||
store.membership.visibleModalFilterMembership = false;
|
||||
};
|
||||
|
||||
const footerLayoutFilter = [
|
||||
<Button
|
||||
key={"remove"}
|
||||
onClick={handleRemoveFilter}
|
||||
style={{
|
||||
backgroundColor: "#e74e5e",
|
||||
color: "#fff",
|
||||
}}
|
||||
>
|
||||
Remove Filter
|
||||
</Button>,
|
||||
<Button key={"cancel"} onClick={handleCancelFilter}>
|
||||
Cancel
|
||||
</Button>,
|
||||
<Button
|
||||
key={"submit"}
|
||||
onClick={handleSubmitFilter}
|
||||
style={{
|
||||
backgroundColor: "#4e79e7",
|
||||
color: "#fff",
|
||||
}}
|
||||
>
|
||||
Apply
|
||||
</Button>,
|
||||
];
|
||||
const handleCancelTransaction = () => {
|
||||
setIsVisibleTopUpModal(false);
|
||||
setDestination(null);
|
||||
|
|
@ -238,10 +303,16 @@ export const Membership = observer(() => {
|
|||
<div>
|
||||
<Row style={{ marginBottom: 20 }}>
|
||||
<Col span={12}>
|
||||
{/* <Button>
|
||||
{store.authentication.userData.role === "Admin" && (
|
||||
<Button
|
||||
onClick={() => {
|
||||
store.membership.visibleModalFilterMembership = true;
|
||||
}}
|
||||
>
|
||||
<FilterOutlined />
|
||||
Filter
|
||||
</Button> */}
|
||||
</Button>
|
||||
)}
|
||||
</Col>
|
||||
<Col span={12} style={{ textAlign: "right" }}>
|
||||
{/* <Search
|
||||
|
|
@ -438,6 +509,58 @@ export const Membership = observer(() => {
|
|||
setVisibleModal(false);
|
||||
}}
|
||||
/>
|
||||
<Modal
|
||||
visible={store.membership.visibleModalFilterMembership}
|
||||
title={"Filter"}
|
||||
footer={footerLayoutFilter}
|
||||
>
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<Title level={5} type={"secondary"} strong>
|
||||
Atasan/Superior
|
||||
</Title>
|
||||
<Select
|
||||
mode={"multiple"}
|
||||
placeholder="Choose Superior"
|
||||
onChange={(val) => {
|
||||
setFilterMembership(val);
|
||||
}}
|
||||
style={{ marginBottom: "20px", width: "100%" }}
|
||||
value={filterMembership}
|
||||
>
|
||||
{store.membership.data.map((item) => (
|
||||
<Option value={item.name} key={item.name}>
|
||||
{item.name}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Title level={5} type={"secondary"} strong>
|
||||
Type
|
||||
</Title>
|
||||
<Select
|
||||
mode={"multiple"}
|
||||
placeholder="Choose Type"
|
||||
//onChange={async (val) => handleFilterPartner(val)}
|
||||
onChange={(val) => {
|
||||
setFilterPartner(val);
|
||||
}}
|
||||
style={{ marginBottom: "20px", width: "100%" }}
|
||||
value={filterPartner}
|
||||
// value={store.membership.filterMembership || []}
|
||||
>
|
||||
<Option value="partner">Partner</Option>
|
||||
<Option value="b2c">B2C</Option>
|
||||
{/* {store.partner.data.map((item) => (
|
||||
<Option value={item.id} key={item.id}>
|
||||
{item.name}
|
||||
</Option>
|
||||
))} */}
|
||||
</Select>
|
||||
</Col>
|
||||
</Row>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,7 +1,17 @@
|
|||
import React, { useState } from "react";
|
||||
import { Form, Input, Modal, Select, InputNumber } from "antd";
|
||||
import {
|
||||
Form,
|
||||
Input,
|
||||
Modal,
|
||||
Select,
|
||||
InputNumber,
|
||||
Row,
|
||||
Col,
|
||||
Typography,
|
||||
} from "antd";
|
||||
import { useStore } from "../../utils/useStore";
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
export const MembershipModal = ({
|
||||
visible,
|
||||
onCreate,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useContext, useEffect } from "react";
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
|
|
@ -13,6 +13,9 @@ import {
|
|||
Space,
|
||||
Table,
|
||||
Tag,
|
||||
Select,
|
||||
Typography,
|
||||
DatePicker,
|
||||
} from "antd";
|
||||
import { useStore } from "../../utils/useStore";
|
||||
import { observer } from "mobx-react-lite";
|
||||
|
|
@ -31,10 +34,14 @@ import { capitalize } from "lodash";
|
|||
import { PAYBACK_STATUS } from "../../constants/payback";
|
||||
|
||||
const { Search } = Input;
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
export const Payback = observer(() => {
|
||||
const { Option } = Select;
|
||||
const { Title } = Typography;
|
||||
const store = useStore();
|
||||
const modalLoader = useContext(ModalLoaderContext);
|
||||
const [filterSupplier, setFilterSupplier] = useState([]);
|
||||
const [filterSubCategories, setFilterSubCategories] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
|
|
@ -201,6 +208,67 @@ export const Payback = observer(() => {
|
|||
modalLoader.setLoading(false);
|
||||
};
|
||||
|
||||
const handleRemoveFilter = async () => {
|
||||
store.product.filterSupplier = null;
|
||||
store.product.filterSubCategory = null;
|
||||
setFilterSupplier([]);
|
||||
store.product.filterCategory = null;
|
||||
setFilterSubCategories([]);
|
||||
await store.product.getData();
|
||||
store.product.visibleModalFilterProduct = false;
|
||||
};
|
||||
|
||||
const handleCancelFilter = () => {
|
||||
setFilterSupplier([]);
|
||||
store.product.filterCategory = null;
|
||||
setFilterSubCategories([]);
|
||||
store.payback.visibleModalFilterPayback = false;
|
||||
};
|
||||
|
||||
const handleSubmitFilter = async () => {
|
||||
store.product.filterSupplier = filterSupplier;
|
||||
store.product.filterSubCategory = filterSubCategories;
|
||||
modalLoader.setLoading(true);
|
||||
await store.product.getData();
|
||||
modalLoader.setLoading(false);
|
||||
store.product.visibleModalFilterProduct = false;
|
||||
};
|
||||
|
||||
const handleFilterCategory = async (value) => {
|
||||
if (value) {
|
||||
store.product.filterCategory = value;
|
||||
await store.product.getDataSubCategories();
|
||||
} else {
|
||||
store.product.filterCategory = null;
|
||||
await store.product.getDataSubCategories();
|
||||
}
|
||||
};
|
||||
|
||||
const footerLayoutFilter = [
|
||||
<Button
|
||||
key={"remove"}
|
||||
onClick={handleRemoveFilter}
|
||||
style={{
|
||||
backgroundColor: "#e74e5e",
|
||||
color: "#fff",
|
||||
}}
|
||||
>
|
||||
Remove Filter
|
||||
</Button>,
|
||||
<Button key={"cancel"} onClick={handleCancelFilter}>
|
||||
Cancel
|
||||
</Button>,
|
||||
<Button
|
||||
key={"submit"}
|
||||
onClick={handleSubmitFilter}
|
||||
style={{
|
||||
backgroundColor: "#4e79e7",
|
||||
color: "#fff",
|
||||
}}
|
||||
>
|
||||
Apply
|
||||
</Button>,
|
||||
];
|
||||
return (
|
||||
<div className={["ppob-container"].join(" ")}>
|
||||
<BreadcumbComponent data={routeData} />
|
||||
|
|
@ -208,10 +276,14 @@ export const Payback = observer(() => {
|
|||
<div>
|
||||
<Row style={{ marginBottom: 20 }}>
|
||||
<Col span={12}>
|
||||
{/* <Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
store.payback.visibleModalFilterPayback = true;
|
||||
}}
|
||||
>
|
||||
<FilterOutlined />
|
||||
Filter
|
||||
</Button> */}
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={12} style={{ textAlign: "right" }}>
|
||||
{/* <Search
|
||||
|
|
@ -386,6 +458,73 @@ export const Payback = observer(() => {
|
|||
)}
|
||||
</div>
|
||||
</Card>
|
||||
<Modal
|
||||
visible={store.payback.visibleModalFilterPayback}
|
||||
title={"Filter"}
|
||||
footer={footerLayoutFilter}
|
||||
>
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<Title level={5} type={"secondary"} strong>
|
||||
From
|
||||
</Title>
|
||||
<Select
|
||||
mode={"multiple"}
|
||||
placeholder="Pilih Anggota"
|
||||
onChange={(val) => {
|
||||
setFilterSupplier(val);
|
||||
}}
|
||||
style={{ marginBottom: "20px", width: "100%" }}
|
||||
value={filterSupplier}
|
||||
>
|
||||
{store.payback.dataConfirmation.map((item) => (
|
||||
<Option value={item.id} key={item.id}>
|
||||
{item.userData_name}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Title level={5} type={"secondary"} strong>
|
||||
Date
|
||||
</Title>
|
||||
<RangePicker style={{ marginBottom: "20px", width: "100%" }} />
|
||||
{/* <Select
|
||||
mode={"multiple"}
|
||||
placeholder="Choose Category"
|
||||
onChange={async (val) => handleFilterCategory(val)}
|
||||
style={{ marginBottom: "20px", width: "100%" }}
|
||||
value={store.product.filterCategory || []}
|
||||
>
|
||||
{store.category.data.map((item) => (
|
||||
<Option value={item.id} key={item.id}>
|
||||
{item.name}
|
||||
</Option>
|
||||
))}
|
||||
</Select> */}
|
||||
</Col>
|
||||
{/* <Col span={24}>
|
||||
<Title level={5} type={"secondary"} strong>
|
||||
Filter Sub-Categories
|
||||
</Title>
|
||||
<Select
|
||||
mode={"multiple"}
|
||||
placeholder="Choose Sub-Category"
|
||||
onChange={(val) => {
|
||||
setFilterSubCategories(val);
|
||||
}}
|
||||
style={{ marginBottom: "20px", width: "100%" }}
|
||||
value={filterSubCategories}
|
||||
>
|
||||
{store.product.dataSubCategories.map((item) => (
|
||||
<Option value={item.id} key={item.id}>
|
||||
{item.name}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Col> */}
|
||||
</Row>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,16 @@
|
|||
import React, {useContext, useEffect} from "react";
|
||||
import {Button, Card, Col, Row, Table, Typography} from "antd";
|
||||
import React, { useContext, useEffect, useState } from "react";
|
||||
import {
|
||||
Button,
|
||||
Card,
|
||||
Col,
|
||||
Row,
|
||||
Table,
|
||||
Typography,
|
||||
DatePicker,
|
||||
Modal,
|
||||
Form,
|
||||
} from "antd";
|
||||
import moment from "moment";
|
||||
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
|
||||
import { LINKS } from "../../routes/app";
|
||||
import { useStore } from "../../utils/useStore";
|
||||
|
|
@ -9,10 +20,13 @@ import {format, parseISO} from "date-fns";
|
|||
import { ModalLoaderContext } from "../../utils/modal";
|
||||
|
||||
const { Title, Text } = Typography;
|
||||
|
||||
const { RangePicker } = DatePicker;
|
||||
export const Profile = observer(() => {
|
||||
const store = useStore();
|
||||
const [form] = Form.useForm();
|
||||
const modalLoader = useContext(ModalLoaderContext);
|
||||
const [filterStart, setFilterStart] = useState([]);
|
||||
const [filterEnd, setFilterEnd] = useState([]);
|
||||
|
||||
const routeData = [
|
||||
{
|
||||
|
|
@ -21,7 +35,7 @@ export const Profile = observer(() => {
|
|||
},
|
||||
{
|
||||
route: LINKS.PROFILE,
|
||||
name: <span style={{fontWeight: 'bold'}}>Profil</span>,
|
||||
name: <span style={{ fontWeight: "bold" }}>Profil</span>,
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -33,15 +47,83 @@ export const Profile = observer(() => {
|
|||
store.transaction.getDataHistoryTransaction(),
|
||||
]);
|
||||
modalLoader.setLoading(false);
|
||||
})()
|
||||
})();
|
||||
}, []);
|
||||
|
||||
const handleRemoveFilter = async () => {
|
||||
store.transaction.filterStart = null;
|
||||
store.transaction.filterEnd = null;
|
||||
setFilterStart([]);
|
||||
setFilterEnd([]);
|
||||
await store.transaction.getDataHistoryTransaction();
|
||||
store.product.visibleModalFilterProduct = false;
|
||||
};
|
||||
|
||||
const handleCancelFilter = () => {
|
||||
store.transaction.filterStart = null;
|
||||
store.transaction.filterEnd = null;
|
||||
store.transaction.visibleModalFilterTransaction = false;
|
||||
};
|
||||
|
||||
const handleSubmitFilter = async () => {
|
||||
// store.product.filterSupplier = filterSupplier;
|
||||
// store.product.filterSubCategory = filterSubCategories;
|
||||
// modalLoader.setLoading(true);
|
||||
// await store.product.getData();
|
||||
// modalLoader.setLoading(false);
|
||||
// store.transaction.visibleModalFilterTransaction = false;
|
||||
|
||||
console.log(form.getFieldsValue(), "Tes");
|
||||
const data = form.getFieldsValue();
|
||||
store.transaction.filterStart = data.start_date;
|
||||
store.transaction.filterEnd = data.end_date;
|
||||
modalLoader.setLoading(true);
|
||||
await store.transaction.getDataHistoryTransaction();
|
||||
modalLoader.setLoading(false);
|
||||
store.transaction.visibleModalFilterTransaction = false;
|
||||
};
|
||||
|
||||
// const handleFilterCategory = async (value) => {
|
||||
// if (value) {
|
||||
// store.product.filterCategory = value;
|
||||
// await store.product.getDataSubCategories();
|
||||
// } else {
|
||||
// store.product.filterCategory = null;
|
||||
// await store.product.getDataSubCategories();
|
||||
// }
|
||||
// };
|
||||
|
||||
const footerLayoutFilter = [
|
||||
<Button
|
||||
key={"remove"}
|
||||
onClick={handleRemoveFilter}
|
||||
style={{
|
||||
backgroundColor: "#e74e5e",
|
||||
color: "#fff",
|
||||
}}
|
||||
>
|
||||
Remove Filter
|
||||
</Button>,
|
||||
<Button key={"cancel"} onClick={handleCancelFilter}>
|
||||
Cancel
|
||||
</Button>,
|
||||
<Button
|
||||
key={"submit"}
|
||||
onClick={handleSubmitFilter}
|
||||
style={{
|
||||
backgroundColor: "#4e79e7",
|
||||
color: "#fff",
|
||||
}}
|
||||
>
|
||||
Apply
|
||||
</Button>,
|
||||
];
|
||||
const columns = [
|
||||
{
|
||||
title: 'Markup Price',
|
||||
dataIndex: 'mark_up_price',
|
||||
key: 'mark_up_price',
|
||||
width: '20%',
|
||||
title: "Markup Price",
|
||||
dataIndex: "mark_up_price",
|
||||
key: "mark_up_price",
|
||||
width: "20%",
|
||||
render: (text) =>
|
||||
new Intl.NumberFormat("id-ID", {
|
||||
style: "currency",
|
||||
|
|
@ -49,32 +131,36 @@ export const Profile = observer(() => {
|
|||
}).format(text),
|
||||
},
|
||||
{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
width: '50%',
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: "50%",
|
||||
},
|
||||
{
|
||||
title: 'Transaction Date',
|
||||
dataIndex: 'created_at',
|
||||
key: 'created_at',
|
||||
title: "Transaction Date",
|
||||
dataIndex: "created_at",
|
||||
key: "created_at",
|
||||
render: (text, record) => {
|
||||
return (
|
||||
<Text>{format(parseISO(record.created_at), 'mm:HH dd-MM-yyyy')}</Text>
|
||||
)
|
||||
<Text>{format(parseISO(record.created_at), "mm:HH dd-MM-yyyy")}</Text>
|
||||
);
|
||||
},
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
const styleSaldoTitle = store.ui.mediaQuery.isDesktop ? {
|
||||
const styleSaldoTitle = store.ui.mediaQuery.isDesktop
|
||||
? {
|
||||
display: "flex",
|
||||
justifyContent: "center"
|
||||
} : {fontSize: "0.75rem"};
|
||||
const styleSaldoContent = store.ui.mediaQuery.isDesktop ? {
|
||||
fontSize: '1.25rem',
|
||||
justifyContent: "center",
|
||||
}
|
||||
: { fontSize: "0.75rem" };
|
||||
const styleSaldoContent = store.ui.mediaQuery.isDesktop
|
||||
? {
|
||||
fontSize: "1.25rem",
|
||||
display: "flex",
|
||||
justifyContent: "center"
|
||||
} : null;
|
||||
justifyContent: "center",
|
||||
}
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div className={["ppob-container"].join(" ")}>
|
||||
|
|
@ -88,13 +174,17 @@ export const Profile = observer(() => {
|
|||
<Text strong>Name</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text>{store.authentication.profileData?.userDetail?.name}</Text>
|
||||
<Text>
|
||||
{store.authentication.profileData?.userDetail?.name}
|
||||
</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text strong>Phone Number</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text>{store.authentication.profileData?.userDetail?.phone_number}</Text>
|
||||
<Text>
|
||||
{store.authentication.profileData?.userDetail?.phone_number}
|
||||
</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text strong>Username</Text>
|
||||
|
|
@ -112,38 +202,64 @@ export const Profile = observer(() => {
|
|||
<Text strong>Superior</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text>{store.authentication.profileData.superior?.username}</Text>
|
||||
<Text>
|
||||
{store.authentication.profileData.superior?.username}
|
||||
</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col lg={12} xs={24}>
|
||||
<Col>
|
||||
<Row justify={"center"}>
|
||||
<Col lg={24} xs={12}>
|
||||
<Title strong level={3} style={styleSaldoTitle}>Saldo</Title>
|
||||
<Col lg={12} xs={12}>
|
||||
<Title strong level={3} style={styleSaldoTitle}>
|
||||
Saldo
|
||||
</Title>
|
||||
</Col>
|
||||
<Col lg={24} xs={12}>
|
||||
<Text style={styleSaldoContent}>{
|
||||
new Intl.NumberFormat("id-ID", {
|
||||
<Text style={styleSaldoContent}>
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
style: "currency",
|
||||
currency: "IDR"
|
||||
})
|
||||
.format(store.authentication.profileData?.wallet || 0)}
|
||||
currency: "IDR",
|
||||
}).format(store.authentication.profileData?.wallet || 0)}
|
||||
</Text>
|
||||
</Col>
|
||||
<Col></Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col>
|
||||
<Row justify={"center"}>
|
||||
<Col lg={12} xs={12}>
|
||||
<Title strong level={3} style={styleSaldoTitle}>
|
||||
Profit
|
||||
</Title>
|
||||
</Col>
|
||||
<Col lg={24} xs={12}>
|
||||
<Text style={styleSaldoContent}>
|
||||
{new Intl.NumberFormat("id-ID", {
|
||||
style: "currency",
|
||||
currency: "IDR",
|
||||
}).format(store.authentication.profileData?.wallet || 0)}
|
||||
</Text>
|
||||
</Col>
|
||||
<Col></Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<div>
|
||||
<Title strong level={3}>History User Transaction</Title>
|
||||
|
||||
{/* <Button style={{marginBottom: '1rem'}} onClick={() => {
|
||||
console.log('clicked filter')
|
||||
}}>
|
||||
<Title strong level={3}>
|
||||
History User Transaction
|
||||
</Title>
|
||||
<Button
|
||||
style={{ marginBottom: "1rem" }}
|
||||
onClick={() => {
|
||||
store.transaction.visibleModalFilterTransaction = true;
|
||||
}}
|
||||
>
|
||||
<FilterOutlined />
|
||||
Filter
|
||||
</Button> */}
|
||||
</Button>
|
||||
<Table
|
||||
columns={columns}
|
||||
bordered
|
||||
|
|
@ -169,6 +285,92 @@ export const Profile = observer(() => {
|
|||
</Row>
|
||||
<div />
|
||||
</Card>
|
||||
<Modal
|
||||
visible={store.transaction.visibleModalFilterTransaction}
|
||||
title={"Filter"}
|
||||
footer={footerLayoutFilter}
|
||||
>
|
||||
<Row>
|
||||
<Col span={24}>
|
||||
<Form
|
||||
layout="vertical"
|
||||
name="filter"
|
||||
form={form}
|
||||
>
|
||||
<Form.Item
|
||||
name="start_date"
|
||||
label="Dari"
|
||||
rules={[{ required: true, message: "Please input Date!" }]}
|
||||
>
|
||||
<DatePicker style={{ width: "100%" }}/>
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
name="end_date"
|
||||
label="Sampai"
|
||||
rules={[{ required: true, message: "Please input Date!" }]}
|
||||
>
|
||||
<DatePicker
|
||||
style={{ width: "100%" }}
|
||||
// defaultValue={moment("YYYY-MM-DD")}
|
||||
/>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
{/* <Select
|
||||
mode={"multiple"}
|
||||
placeholder="Choose Supplier"
|
||||
onChange={(val) => {
|
||||
setFilterSupplier(val);
|
||||
}}
|
||||
style={{ marginBottom: "20px", width: "100%" }}
|
||||
value={filterSupplier}
|
||||
>
|
||||
{store.supplier.data.map((item) => (
|
||||
<Option value={item.id} key={item.id}>
|
||||
{item.name}
|
||||
</Option>
|
||||
))}
|
||||
</Select> */}
|
||||
</Col>
|
||||
{/* <Col span={24}>
|
||||
<Title level={5} type={"secondary"} strong>
|
||||
Filter Categories
|
||||
</Title>
|
||||
<Select
|
||||
mode={"multiple"}
|
||||
placeholder="Choose Category"
|
||||
onChange={async (val) => handleFilterCategory(val)}
|
||||
style={{ marginBottom: "20px", width: "100%" }}
|
||||
value={store.product.filterCategory || []}
|
||||
>
|
||||
{store.category.data.map((item) => (
|
||||
<Option value={item.id} key={item.id}>
|
||||
{item.name}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Col>
|
||||
<Col span={24}>
|
||||
<Title level={5} type={"secondary"} strong>
|
||||
Filter Sub-Categories
|
||||
</Title>
|
||||
<Select
|
||||
mode={"multiple"}
|
||||
placeholder="Choose Sub-Category"
|
||||
onChange={(val) => {
|
||||
setFilterSubCategories(val);
|
||||
}}
|
||||
style={{ marginBottom: "20px", width: "100%" }}
|
||||
value={filterSubCategories}
|
||||
>
|
||||
{store.product.dataSubCategories.map((item) => (
|
||||
<Option value={item.id} key={item.id}>
|
||||
{item.name}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</Col> */}
|
||||
</Row>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -160,9 +160,9 @@ export const Product = observer(() => {
|
|||
>
|
||||
<Form form={form} layout="vertical">
|
||||
<Form.Item
|
||||
name="phoneNumber"
|
||||
label="Phone Number"
|
||||
rules={[{required: true, message: "Please input Phone Number!"}]}
|
||||
name="destination"
|
||||
label="Destination"
|
||||
rules={[{required: true, message: "Please input Destination Number!"}]}
|
||||
>
|
||||
<Input/>
|
||||
</Form.Item>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,28 @@
|
|||
import React, {message, useContext, useEffect} from "react";
|
||||
import React, { message, useContext, useEffect, useState } from "react";
|
||||
import { useStore } from "../../utils/useStore";
|
||||
import {Card, Tabs} from "antd";
|
||||
import {
|
||||
Card,
|
||||
Tabs,
|
||||
Col,
|
||||
Button,
|
||||
Typography,
|
||||
Select,
|
||||
Modal,
|
||||
Row,
|
||||
DatePicker,
|
||||
} from "antd";
|
||||
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
|
||||
import { Product } from "./Product";
|
||||
import { LINKS } from "../../routes/app";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import { ModalLoaderContext } from "../../utils/modal";
|
||||
import { FilterOutlined } from "@ant-design/icons";
|
||||
|
||||
const { TabPane } = Tabs;
|
||||
|
||||
export const Transaction = observer(() => {
|
||||
const store = useStore();
|
||||
|
||||
const { Title } = Typography;
|
||||
const { Option } = Select;
|
||||
const modalLoader = useContext(ModalLoaderContext);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -50,7 +61,7 @@ export const Transaction = observer(() => {
|
|||
},
|
||||
{
|
||||
route: LINKS.TRANSACTION,
|
||||
name: <span style={{fontWeight: 'bold'}}>Transaksi</span>,
|
||||
name: <span style={{ fontWeight: "bold" }}>Transaksi</span>,
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -58,17 +69,22 @@ export const Transaction = observer(() => {
|
|||
<div className={["ppob-container"].join(" ")}>
|
||||
<BreadcumbComponent data={routeData} text="" />
|
||||
<Card>
|
||||
<Tabs
|
||||
onChange={handleChangeTabs}
|
||||
size="default"
|
||||
tabBarGutter="50"
|
||||
<Col span={12} style={{ marginBottom: 30 }}>
|
||||
{/* <Button
|
||||
onClick={() => {
|
||||
store.transaction.visibleModalFilterTransaction = true;
|
||||
}}
|
||||
>
|
||||
<FilterOutlined />
|
||||
Filter
|
||||
</Button> */}
|
||||
</Col>
|
||||
<Tabs onChange={handleChangeTabs} size="default" tabBarGutter="50">
|
||||
{store.transaction.dataCategories.map((item, index) => (
|
||||
<TabPane tab={item.name} key={item.id}>
|
||||
<Product />
|
||||
</TabPane>
|
||||
))}
|
||||
|
||||
</Tabs>
|
||||
</Card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,6 +9,11 @@ export class Membership {
|
|||
|
||||
dataDetail = {};
|
||||
|
||||
|
||||
//filter
|
||||
visibleModalFilterMembership = false;
|
||||
filterMembership = null;
|
||||
filterPartner = null;
|
||||
constructor(ctx) {
|
||||
this.ctx = ctx;
|
||||
makeAutoObservable(this);
|
||||
|
|
@ -16,7 +21,9 @@ export class Membership {
|
|||
|
||||
async getData() {
|
||||
try {
|
||||
const response = await http.get(`/users?page=${this.page}&pageSize=${this.pageSize}`);
|
||||
const response = await http.get(`/users?page=${this.page}&pageSize=${this.pageSize}&superrior=${this.filterMembership}&type=${this.filterPartner}`);
|
||||
// console.log(this.filterMembership)
|
||||
// console.log(this.filterPartner)
|
||||
// console.log(response)
|
||||
this.data = response.body.data.map((item, idx) => {
|
||||
item.key = idx;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,10 @@ export class Payback {
|
|||
pageSizeConfirmation = 10;
|
||||
dataConfirmation = [];
|
||||
totalDataConfirmation = 0;
|
||||
//data=[]
|
||||
|
||||
//filter
|
||||
visibleModalFilterPayback = false;
|
||||
constructor(ctx) {
|
||||
this.ctx = ctx;
|
||||
makeAutoObservable(this);
|
||||
|
|
@ -21,8 +24,7 @@ export class Payback {
|
|||
|
||||
async getDataCreated() {
|
||||
try {
|
||||
const response = await http.get(
|
||||
`/transaction/deposit-return?page=${this.pageCreated}&pageSize=${this.pageSizeCreated}`
|
||||
const response = await http.get(`/transaction/deposit-return?page=${this.pageCreated}&pageSize=${this.pageSizeCreated}`
|
||||
);
|
||||
this.dataCreated = response.body.data.map((item, idx) => {
|
||||
item.key = idx;
|
||||
|
|
@ -40,6 +42,7 @@ export class Payback {
|
|||
const response = await http.get(
|
||||
`/transaction/deposit-return/confirmation?page=${this.pageConfirmation}&pageSize=${this.pageSizeConfirmation}`
|
||||
);
|
||||
console.log(response)
|
||||
this.dataConfirmation = response.body.data.map((item, idx) => {
|
||||
item.key = idx;
|
||||
return item;
|
||||
|
|
@ -84,6 +87,8 @@ export class Payback {
|
|||
async confirmPayback(id, data) {
|
||||
try {
|
||||
const response = await http.put(`/transaction/deposit-return/confirmation/${id}/${data}`);
|
||||
// console.log(response)
|
||||
// this.data=response.body.data
|
||||
await Promise.all([
|
||||
this.getDataConfirmation(),
|
||||
this.getDataCreated()
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import {http} from "../utils/http";
|
|||
|
||||
export class Transaction {
|
||||
page = 0;
|
||||
pageSize = 10
|
||||
pageSize = 10;
|
||||
data = [];
|
||||
total_data = 0;
|
||||
filterSubCategory = null;
|
||||
|
|
@ -11,18 +11,18 @@ export class Transaction {
|
|||
visibleModalTransaction = false;
|
||||
|
||||
pageCategories = 0;
|
||||
pageSizeCategories = 10
|
||||
pageSizeCategories = 10;
|
||||
dataCategories = [];
|
||||
total_dataCategories = 0;
|
||||
|
||||
pageSubCategories = 0;
|
||||
pageSizeSubCategories = 10
|
||||
pageSizeSubCategories = 10;
|
||||
dataSubCategories = [];
|
||||
total_dataSubCategories = 0;
|
||||
filterSubCategory = null;
|
||||
|
||||
pageHistoryTransaction = 0;
|
||||
pageSizeHistoryTransaction = 10
|
||||
pageSizeHistoryTransaction = 10;
|
||||
dataHistoryTransaction = [];
|
||||
total_dataHistoryTransaction = 0;
|
||||
|
||||
|
|
@ -31,6 +31,10 @@ export class Transaction {
|
|||
dataHistoryTopUp = [];
|
||||
total_dataHistoryTopUp = 0;
|
||||
|
||||
//filter
|
||||
visibleModalFilterTransaction = false;
|
||||
filterStart = null;
|
||||
filterEnd = null;
|
||||
constructor(ctx) {
|
||||
this.ctx = ctx;
|
||||
makeAutoObservable(this);
|
||||
|
|
@ -38,9 +42,11 @@ export class Transaction {
|
|||
|
||||
async getData() {
|
||||
try {
|
||||
const response = await http.get(`/product/by-categories-all?sub-category=${this.filterSubCategory}&page=${this.page}&pageSize=${this.pageSize}`);
|
||||
this.data = response.body.data ?? []
|
||||
this.total_data = response?.body?.count ?? 0
|
||||
const response = await http.get(
|
||||
`/product/by-categories-all?sub-category=${this.filterSubCategory}&page=${this.page}&pageSize=${this.pageSize}`
|
||||
);
|
||||
this.data = response.body.data ?? [];
|
||||
this.total_data = response?.body?.count ?? 0;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
|
|
@ -48,9 +54,11 @@ export class Transaction {
|
|||
|
||||
async getDataSubCategories() {
|
||||
try {
|
||||
const response = await http.get(`/product/sub-categories?category=${this.filterCategory}&page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`);
|
||||
this.dataSubCategories = response.body.data ?? []
|
||||
this.total_dataSubCategories = response.body.count ?? 0
|
||||
const response = await http.get(
|
||||
`/product/sub-categories?category=${this.filterCategory}&page=${this.pageSubCategories}&pageSize=${this.pageSizeSubCategories}`
|
||||
);
|
||||
this.dataSubCategories = response.body.data ?? [];
|
||||
this.total_dataSubCategories = response.body.count ?? 0;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
|
|
@ -58,11 +66,13 @@ export class Transaction {
|
|||
|
||||
async getDataCategories() {
|
||||
try {
|
||||
const response = await http.get(`/product/categories?page=${this.pageCategories}&pageSize=${this.pageSizeCategories}`);
|
||||
this.dataCategories = response.body.data ?? []
|
||||
this.total_dataCategories = response?.body?.count ?? 0
|
||||
const response = await http.get(
|
||||
`/product/categories?page=${this.pageCategories}&pageSize=${this.pageSizeCategories}`
|
||||
);
|
||||
this.dataCategories = response.body.data ?? [];
|
||||
this.total_dataCategories = response?.body?.count ?? 0;
|
||||
if (this.dataCategories.length > 0) {
|
||||
this.filterCategory = this.dataCategories[0].id
|
||||
this.filterCategory = this.dataCategories[0].id;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
|
|
@ -71,9 +81,12 @@ export class Transaction {
|
|||
|
||||
async getDataHistoryTransaction() {
|
||||
try {
|
||||
const response = await http.get(`/transaction/history?page=${this.pageHistoryTransaction}&pageSize=${this.pageSizeHistoryTransaction}`);
|
||||
this.dataHistoryTransaction = response.body.data ?? []
|
||||
this.total_dataHistoryTransaction = response?.body?.count ?? 0
|
||||
const response = await http.get(
|
||||
`/transaction/history?page=${this.pageHistoryTransaction}&pageSize=${this.pageSizeHistoryTransaction}&start=${this.filterStart}&end=${this.filterEnd}`
|
||||
);
|
||||
console.log(response);
|
||||
this.dataHistoryTransaction = response.body.data ?? [];
|
||||
this.total_dataHistoryTransaction = response?.body?.count ?? 0;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
|
|
@ -81,9 +94,11 @@ export class Transaction {
|
|||
|
||||
async getDataHistoryTopUp(id) {
|
||||
try {
|
||||
const response = await http.get(`/transaction/history-deposit?page=${this.pageHistoryTopUp}&pageSize=${this.pageSizeHistoryTopUp}&user-destination=${id}`);
|
||||
this.dataHistoryTopUp = response.body.data ?? []
|
||||
this.total_dataHistoryTopUp = response?.body?.count ?? 0
|
||||
const response = await http.get(
|
||||
`/transaction/history-deposit?page=${this.pageHistoryTopUp}&pageSize=${this.pageSizeHistoryTopUp}&user-destination=${id}`
|
||||
);
|
||||
this.dataHistoryTopUp = response.body.data ?? [];
|
||||
this.total_dataHistoryTopUp = response?.body?.count ?? 0;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
|
|
@ -91,7 +106,7 @@ export class Transaction {
|
|||
|
||||
async create(data) {
|
||||
try {
|
||||
const response = await http.post('/product').send(data);
|
||||
const response = await http.post("/product").send(data);
|
||||
await this.getData();
|
||||
return response;
|
||||
} catch (e) {
|
||||
|
|
@ -101,7 +116,7 @@ export class Transaction {
|
|||
|
||||
async buyProduct(data) {
|
||||
try {
|
||||
const response = await http.post('/transaction/order').send(data);
|
||||
const response = await http.post("/transaction/order").send(data);
|
||||
return response;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
|
|
@ -130,7 +145,7 @@ export class Transaction {
|
|||
|
||||
async distribute(data) {
|
||||
try {
|
||||
const response = await http.post('/transaction/distribute').send(data);
|
||||
const response = await http.post("/transaction/distribute").send(data);
|
||||
return response;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
|
|
@ -139,12 +154,12 @@ export class Transaction {
|
|||
|
||||
async distributeAdmin(data) {
|
||||
try {
|
||||
const response = await http.post('/transaction/distribute-admin').send(data);
|
||||
const response = await http
|
||||
.post("/transaction/distribute-admin")
|
||||
.send(data);
|
||||
return response;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user