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

Merge branch 'develop' into 'devops-staging'

Browse Source 
Develop

See merge request empatnusabangsa/ppob/ppob-frontend!26
This commit is contained in:
ilham dwi pratama 2021-12-30 18:18:29 +00:00
commit a4769e5f30
10 changed files with 391 additions and 188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/component/PartnerComponent.js
View File

@ -391,7 +391,7 @@ export const PartnerComponent = observer((props) => {
)}
{((idData && isChangePassword) || !idData) && (
<Form.Item
name="password_account"
name="password"
label="Password Account"
rules={[
idData
@ -418,11 +418,11 @@ export const PartnerComponent = observer((props) => {
},
{
pattern: /^(?:\d*)$/,
message: "Value should contain just number",
message: "Phone number should contain just number",
},
{
pattern: /^[\d]{0,12}$/,
message: "Value should be less than 12 character",
pattern: /^[\d]{2,12}$/,
message: "Phone number should be less than 12 character",
},
]}
>

4
src/component/ProductComponent.js
View File

@ -129,11 +129,11 @@ export const ProductComponent = observer((props) => {
},
];
if (store.authentication.userData.role !== "Admin") columns.pop();
if (store.authentication.userData.role !== "Admin") delete columns[2];
if (store.authentication.userData.role === "Admin Partner") delete columns[2];
if (store.authentication.userData.role === "Admin Partner") delete columns[3];
if (store.authentication.userData.role != "Admin Partner") delete columns[4];
if (store.authentication.userData.role !== "Admin") delete columns[6];
if (store.authentication.userData.role === "Admin Partner") delete columns[7];
if (store.authentication.userData.role === "Admin") delete columns[4];
if (store.authentication.userData.role !== "Admin") delete columns[8];
if (store.authentication.userData.role === "Admin Partner") delete columns[5];

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

@ -1,14 +1,96 @@
import React from "react";
import { Button, PageHeader, Card, Row, Col } from "antd";
import { store } from "../../utils/useStore";
import React, { useContext, useEffect } from "react";
import { Button, PageHeader, Card, Row, Col, message, Table } from "antd";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import {
DropboxOutlined,
DollarCircleOutlined,
BarChartOutlined,
} from "@ant-design/icons";
import { ModalLoaderContext } from "../../utils/modal";
export const Home = observer(() => {
const modalLoader = useContext(ModalLoaderContext);
const store = useStore();
useEffect(() => {
const init = async () => {
try {
modalLoader.setLoading(true);
const isAdmin = store.authentication.userData.role === "Admin";
await getData();
await store.membership.getDataBySuperior();
await store.partner.getData();
await store.transaction.getDataTransaction();
await store.role.getData(isAdmin);
modalLoader.setLoading(false);
} catch (e) {
console.error(e);
modalLoader.setLoading(false);
if (e.response?.body?.message) {
message.error(e.response.body.message);
return;
}
message.error(e.message);
}
};
init();
}, []);
const getData = async () => {
store.authentication.userData.role === "Admin"
? await store.membership.getData()
: await store.membership.getDataBySuperior();
};
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
render: (text, record) => record?.name ?? record?.username,
},
{
title: "Role",
dataIndex: "roleName",
key: "role",
},
{
title: "Saldo",
dataIndex: ["coa", "amount"],
key: ["coa", "amount"],
width: "20%",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
// {
// title: "Action",
// key: "action",
// render: (text, record) => (
// <Space size="middle">
// <Button
// onClick={() => {
// setDestination(record?.id);
// console.log(record?.id);
// setIsVisibleTopUpModal(true);
// }}
// >
// <DownloadOutlined /> Top Up Saldo
// </Button>
// <Button
// onClick={async () => {
// await store.transaction.getDataHistoryTopUp(record.id);
// history.push(LINKS.USER_DETAIL.replace(":id", record.id));
// console.log(record.id);
// }}
// >
// Detail
// </Button>
// </Space>
// ),
// },
];
return (
<div>
{store.ui.mediaQuery.isDesktop && (
@ -32,7 +114,9 @@ export const Home = observer(() => {
<Row>
<BarChartOutlined style={{ fontSize: 30 }} />
<PageHeader title={<span>Total Transaksi</span>}>
<span>Total Transaksi : 25 Transaksi</span>
<p>
<h4>{store.transaction.dataTransaction} Transaksi</h4>
</p>
</PageHeader>
</Row>
</Card>
@ -84,6 +168,78 @@ export const Home = observer(() => {
</Card>
</Row>
)}
{store.authentication.userData.role === "Admin" &&
store.ui.mediaQuery.isDesktop && (
<Row style={{ marginLeft: 50, marginTop: 10 }}>
<Card
className={"shadow"}
title="Card title"
style={{
marginBottom: 30,
marginRight: 20,
borderColor: "salmon",
width: "47%",
}}
>
<Table
key="1"
hasEmpty
size="large"
columns={columns}
dataSource={store.membership.data}
bordered
pagination={{
pageSize: store.membership.pageSize,
total: store.membership.totalData,
current: store.membership.page + 1,
showSizeChanger: true,
simple: false,
}}
onChange={async (page) => {
let pageNumber = page.current;
store.membership.pageSize = page.pageSize;
store.membership.page = pageNumber - 1;
modalLoader.setLoading(true);
await getData();
modalLoader.setLoading(false);
}}
/>
</Card>
<Card
className={"shadow"}
title="Card title"
style={{
marginBottom: 30,
borderColor: "salmon",
width: "47%",
}}
>
<Table
key="1"
hasEmpty
size="large"
columns={columns}
dataSource={store.membership.data}
bordered
pagination={{
pageSize: store.membership.pageSize,
total: store.membership.totalData,
current: store.membership.page + 1,
showSizeChanger: true,
simple: false,
}}
onChange={async (page) => {
let pageNumber = page.current;
store.membership.pageSize = page.pageSize;
store.membership.page = pageNumber - 1;
modalLoader.setLoading(true);
await getData();
modalLoader.setLoading(false);
}}
/>
</Card>
</Row>
)}
{store.ui.mediaQuery.isMobile && (
<div style={{ marginTop: 10 }}>
<Card
@ -100,7 +256,9 @@ export const Home = observer(() => {
<Row>
<BarChartOutlined style={{ fontSize: 30 }} />
<PageHeader title={<span>Total Transaksi</span>}>
<span>Total Transaksi : 25 Transaksi</span>
<p>
<h4>{store.transaction.dataTransaction} Transaksi</h4>
</p>
</PageHeader>
</Row>
</Card>
@ -152,6 +310,75 @@ export const Home = observer(() => {
</Card>
</div>
)}
{store.authentication.userData.role === "Admin" &&
store.ui.mediaQuery.isMobile && (
<Row style={{ marginLeft: 20, marginRight: 20, marginTop: 10 }}>
<Card
className={"shadow"}
title="Card title"
style={{
marginBottom: 10,
borderColor: "salmon",
}}
>
<Table
key="1"
hasEmpty
size="small"
columns={columns}
dataSource={store.membership.data}
bordered
pagination={{
pageSize: store.membership.pageSize,
total: store.membership.totalData,
current: store.membership.page + 1,
showSizeChanger: true,
simple: false,
}}
onChange={async (page) => {
let pageNumber = page.current;
store.membership.pageSize = page.pageSize;
store.membership.page = pageNumber - 1;
modalLoader.setLoading(true);
await getData();
modalLoader.setLoading(false);
}}
/>
</Card>
<Card
className={"shadow"}
title="Card title"
style={{
marginBottom: 30,
borderColor: "salmon",
}}
>
<Table
key="1"
hasEmpty
size="small"
columns={columns}
dataSource={store.membership.data}
bordered
pagination={{
pageSize: store.membership.pageSize,
total: store.membership.totalData,
current: store.membership.page + 1,
showSizeChanger: true,
simple: false,
}}
onChange={async (page) => {
let pageNumber = page.current;
store.membership.pageSize = page.pageSize;
store.membership.page = pageNumber - 1;
modalLoader.setLoading(true);
await getData();
modalLoader.setLoading(false);
}}
/>
</Card>
</Row>
)}
</div>
);
});

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

@ -529,7 +529,7 @@ export const Membership = observer(() => {
value={filterMembership}
>
{store.membership.data.map((item) => (
<Option value={item.name} key={item.name}>
<Option value={item.id} key={item.id}>
{item.name}
</Option>
))}

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

@ -98,12 +98,12 @@ export const MembershipModal = ({
},
{
pattern: /^(?:\d*)$/,
message: "Value should contain just number",
message: "Phone number should contain just number",
},
{
//pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})/,
pattern: /^[\d]{0,12}$/,
message: "Value should be less than 12 character",
pattern: /^[\d]{2,12}$/,
message: "Phone number should be less than 12 character",
},
]}
>

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

@ -66,14 +66,6 @@ export const Profile = observer(() => {
};
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;
@ -83,16 +75,6 @@ export const Profile = observer(() => {
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"}
@ -120,10 +102,10 @@ export const Profile = observer(() => {
];
const columns = [
{
title: "Markup Price",
dataIndex: "mark_up_price",
key: "mark_up_price",
width: "20%",
title: "Price",
dataIndex: "price",
key: "price",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
@ -131,19 +113,41 @@ export const Profile = observer(() => {
}).format(text),
},
{
title: "Name",
dataIndex: "name",
key: "name",
width: "50%",
title: "Pembeli",
dataIndex: "buyer",
key: "buyer",
},
{
title: "Tujuan",
dataIndex: "transaction_destination",
key: "transaction_destination",
},
{
title: "Kode Transaksi",
dataIndex: "transaction_code",
key: "transaction_code",
},
{
title: "Status",
dataIndex: "status",
key: "status",
},
{
title: "No Seri",
dataIndex: "seri_number",
key: "seri_number",
},
{
title: "IDTrx Mitra",
dataIndex: "partner_transaction_code",
key: "partner_transaction_code",
},
{
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>
);
return <Text>{format(parseISO(record.created_at), "dd-MM-yyyy")}</Text>;
},
},
];
@ -208,7 +212,7 @@ export const Profile = observer(() => {
</Col>
</Row>
</Col>
<Col>
<Col span={store.ui.mediaQuery.isMobile ? 10 : 5}>
<Row justify={"center"}>
<Col lg={12} xs={12}>
<Title strong level={3} style={styleSaldoTitle}>
@ -226,30 +230,33 @@ export const Profile = observer(() => {
<Col></Col>
</Row>
</Col>
<Col>
<Row justify={"center"}>
<Col lg={12} xs={12}>
<Title strong level={3} style={styleSaldoTitle}>
Profit
</Title>
{store.authentication.userData.role === "Admin" ||
(store.authentication.userData.role === "Supervisor" && (
<Col span={store.ui.mediaQuery.isMobile ? 8 : 5}>
<Row justify={"center"}>
<Col lg={12} xs={12}>
<Title strong level={3} style={styleSaldoTitle}>
Profit
</Title>
</Col>
<Col lg={24} xs={12}>
<Text style={styleSaldoContent}>
{new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(store.authentication.profileData?.profit || 0)}
</Text>
</Col>
<Col></Col>
</Row>
</Col>
<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
History Transaction
</Title>
<Button
style={{ marginBottom: "1rem" }}
@ -292,83 +299,23 @@ export const Profile = observer(() => {
>
<Row>
<Col span={24}>
<Form
layout="vertical"
name="filter"
form={form}
>
<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%" }}/>
<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")}
/>
<DatePicker style={{ width: "100%" }} />
</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>

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

@ -1,11 +1,11 @@
import React, {useContext, useEffect, useState} from "react";
import {useStore} from "../../utils/useStore";
import {Card, Col, Form, Input, message, Modal, Row, Select} from "antd";
import {observer} from "mobx-react-lite";
import {ModalLoaderContext} from "../../utils/modal";
import React, { useContext, useEffect, useState } from "react";
import { useStore } from "../../utils/useStore";
import { Card, Col, Form, Input, message, Modal, Row, Select } from "antd";
import { observer } from "mobx-react-lite";
import { ModalLoaderContext } from "../../utils/modal";
const {Search} = Input;
const {Option} = Select;
const { Search } = Input;
const { Option } = Select;
export const Product = observer(() => {
const store = useStore();
@ -72,34 +72,34 @@ export const Product = observer(() => {
};
return (
<div>
<Row>
<span style={{fontWeight: "bold", marginBottom: "10px"}}>
<div>
<Row>
<span style={{ fontWeight: "bold", marginBottom: "10px" }}>
Sub Category
</span>
</Row>
<Row>
<Col span={24}>
<Select
placeholder={"Select Sub Category"}
allowClear={true}
onChange={(val) => handleChangeSubcategory(val)}
style={{marginBottom: "10px", width: "100%"}}
value={store.transaction.filterSubCategory}
>
{store.transaction.dataSubCategories.map((item, index) => (
<Option key={item.id} value={item.id}>
{item.name}
</Option>
))}
</Select>
</Col>
</Row>
<Row justify={"center"} align={"center"} style={{marginBottom: "1rem"}}>
<Col
span={12}
style={{fontWeight: "bold", display: "flex", alignItems: "center"}}
</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" }}>
@ -115,7 +115,7 @@ export const Product = observer(() => {
<Col key={index} xs={24} md={16} lg={8}>
<Card
onClick={() => {
setVisibleModalBuy(true)
setVisibleModalBuy(true);
}}
hoverable
style={{
@ -123,12 +123,12 @@ export const Product = observer(() => {
marginLeft: 10,
borderColor: "salmon",
height: 100,
marginBottom: 10
marginBottom: 10,
}}
>
<span style={{color: "black"}}>{item.product_name}</span>
<br/>
<span style={{color: "grey", fontSize: 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",
@ -137,34 +137,47 @@ export const Product = observer(() => {
</Card>
<Modal
visible={visibleModalBuy}
title={`Are you sure buy ${item.product_name}?`}
okText={"Confirm"}
cancelText="Cancel"
onCancel={() => {
form.resetFields();
handleCancel();
}}
onOk={() => {
form
.validateFields()
.then((values) => {
console.log(values, "isi form");
handleBuyProduct(values, item.product_code);
form.resetFields();
})
.catch((info) => {
console.error("Validate Failed:", info);
});
}}
visible={visibleModalBuy}
title={`Are you sure buy ${item.product_name}?`}
okText={"Confirm"}
cancelText="Cancel"
onCancel={() => {
form.resetFields();
handleCancel();
}}
onOk={() => {
form
.validateFields()
.then((values) => {
console.log(values, "isi form");
handleBuyProduct(values, item.product_code);
form.resetFields();
})
.catch((info) => {
console.error("Validate Failed:", info);
});
}}
>
<Form form={form} layout="vertical">
<Form.Item
name="destination"
label="Destination"
rules={[{required: true, message: "Please input Destination Number!"}]}
name="destination"
label="Destination"
rules={[
{
required: true,
message: "Please input Destination Number!",
},
{
pattern: /^(?:\d*)$/,
message: "Value should contain just number",
},
{
pattern: /^[\d]{2,12}$/,
message: "Value should be less than 12 character",
},
]}
>
<Input/>
<Input />
</Form.Item>
</Form>
</Modal>

2
src/store/authentication.js
View File

@ -2,6 +2,7 @@ import {makeAutoObservable, runInAction} from "mobx";
import {TokenUtil} from "../utils/token";
import {http} from "../utils/http";
export class Authentication {
isLoggedIn = false;
isLoginLoading = false;
@ -53,6 +54,7 @@ export class Authentication {
async getProfile() {
try {
const response = await http.get('/auth/profile');
console.log(response)
this.profileData = response.body;
} catch (e) {
console.error(e);

2
src/store/membership.js
View File

@ -21,7 +21,7 @@ export class Membership {
async getData() {
try {
const response = await http.get(`/users?page=${this.page}&pageSize=${this.pageSize}&superrior=${this.filterMembership}&type=${this.filterPartner}`);
const response = await http.get(`/users?page=${this.page}&pageSize=${this.pageSize}&superior=${this.filterMembership}&type=${this.filterPartner}`);
// console.log(this.filterMembership)
// console.log(this.filterPartner)
// console.log(response)

14
src/store/transaction.js
View File

@ -30,6 +30,7 @@ export class Transaction {
pageSizeHistoryTopUp = 10;
dataHistoryTopUp = [];
total_dataHistoryTopUp = 0;
dataTransaction=[]
//filter
visibleModalFilterTransaction = false;
@ -52,6 +53,19 @@ export class Transaction {
}
}
async getDataTransaction() {
try {
const response = await http.get(
`/transaction/total-order`
);
//console.log(response)
this.dataTransaction = response.body.data ?? [];
this.total_data = response?.body?.count ?? 0;
} catch (e) {
console.error(e);
}
}
async getDataSubCategories() {
try {
const response = await http.get(