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!7
This commit is contained in:
Catur Bagaskara 2021-12-22 14:09:12 +00:00
commit f332e7da80
22 changed files with 512 additions and 406 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/component/CategoryComponent.js
View File

@ -139,7 +139,7 @@ export const CategoryComponent = observer((props) => {
store.category.pageSize = page.pageSize;
store.category.page = pageNumber - 1;
modalLoader.setLoading(true);
//await store.category.getData();
await store.category.getData();
modalLoader.setLoading(false);
}}
/>

8
src/component/CommissionComponent.js
View File

@ -1,9 +1,8 @@
import React, {useContext, useEffect, useState} from "react";
import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd";
import React, {useContext, useState} from "react";
import {Button, Form, Input, message, Modal, Space, Table,} from "antd";
import {observer} from "mobx-react-lite";
import {useHistory} from "react-router-dom";
import {useStore} from "../utils/useStore";
import {LINKS} from "../routes/app";
import {ModalLoaderContext} from "../utils/modal";
export const CommissionComponent = observer((props) => {
@ -32,6 +31,7 @@ export const CommissionComponent = observer((props) => {
title: "Amount",
dataIndex: "commission",
key: "commission",
render: (text) => <span>{text}%</span>,
},
{
title: "Action",
@ -82,7 +82,7 @@ export const CommissionComponent = observer((props) => {
store.commission.pageSize = page.pageSize;
store.commission.page = pageNumber - 1;
modalLoader.setLoading(true);
//await store.commission.getData();
await store.commission.getData();
modalLoader.setLoading(false);
}}
/>

2
src/component/PartnerComponent.js
View File

@ -211,7 +211,7 @@ export const PartnerComponent = observer((props) => {
store.partner.pageSize = page.pageSize;
store.partner.page = pageNumber - 1;
modalLoader.setLoading(true);
//await store.partner.getData();
await store.partner.getData();
modalLoader.setLoading(false);
}}
/>

67
src/component/ProductComponent.js
View File

@ -1,5 +1,20 @@
import React, {useContext, useState} from "react";
import {Button, Col, Divider, Form, Input, List, message, Modal, Row, Select, Table, Tag, Typography,} from "antd";
import {
Button,
Col,
Divider,
Form,
Input,
InputNumber,
List,
message,
Modal,
Row,
Select,
Table,
Tag,
Typography,
} from "antd";
import {observer} from "mobx-react-lite";
import {ExclamationCircleOutlined} from "@ant-design/icons";
import {useHistory} from "react-router-dom";
@ -48,11 +63,21 @@ export const ProductComponent = observer((props) => {
title: "Harga Beli",
dataIndex: "current_price_price",
key: "current_price_price",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
title: "Harga Jual",
dataIndex: "mark_up_price",
key: "mark_up_price",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
// {
// title: "Gangguan",
@ -73,10 +98,10 @@ export const ProductComponent = observer((props) => {
key: "tersedia",
render: (text, record) => (
<Tag
color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
color={record?.product_status === "ACTIVE" ? "blue" : "#E3E8EE"}
style={{ color: "#4F566B" }}
>
{record?.status === "ACTIVE" ? " Tersedia" : "Tidak"}
{record?.product_status === "ACTIVE" ? " Tersedia" : "Tidak"}
</Tag>
),
},
@ -86,7 +111,7 @@ export const ProductComponent = observer((props) => {
render: (text, record) => (
<Button
onClick={async () => {
history.push(LINKS.DETAILPRODUCT.replace(":id", record.id));
history.push(LINKS.PRODUCT_DETAIL.replace(":id", record.id));
//console.log(record.id)
}}
>
@ -285,16 +310,14 @@ export const ProductComponent = observer((props) => {
>
<List.Item.Meta
className={["cariparkir-container"].join(" ")}
title={item.code}
title={item.product_code}
description={
<div style={{}}>
<p>
<small>Nama Produk : {item.name}</small> <br />
<small>Harga Beli : {item.currentPrice.price}</small>
<small>{item.product_name}</small> <br />
<small>Harga Beli : {item.current_price_price}</small>
<br />
<small>
Harga Jual : {item.currentPrice.mark_up_price}
</small>
<small>Harga Jual : {item.mark_up_price}</small>
</p>
<p></p>
</div>
@ -308,10 +331,14 @@ export const ProductComponent = observer((props) => {
}}
>
<Tag
color={item?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
color={
item?.product_status === "ACTIVE" ? "blue" : "#E3E8EE"
}
style={{ color: "#4F566B" }}
>
{item?.status === "ACTIVE" ? " Tersedia" : "Tidak"}
{item?.product_status === "ACTIVE"
? " Tersedia"
: "Tidak"}
</Tag>
</p>
</div>
@ -357,14 +384,26 @@ export const ProductComponent = observer((props) => {
label="Price"
rules={[{ required: true, message: "Please input price!" }]}
>
<Input />
<InputNumber
style={{ width: "100%" }}
formatter={(value) =>
`Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
/>
</Form.Item>
<Form.Item
name="markUpPrice"
label="Mark Up Price"
rules={[{ required: true, message: "Please input mark up price!" }]}
>
<Input />
<InputNumber
style={{ width: "100%" }}
formatter={(value) =>
`Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
/>
</Form.Item>
<Form.Item
name="code"

19
src/component/Subcategory.js → src/component/SubcategoryComponent.js
View File

@ -1,19 +1,6 @@
import React, { useContext, useState,useEffect } from "react";
import {
Button,
Form,
Input,
message,
Modal,
Select,
Space,
Table,
List,
Tag,
Divider,
} from "antd";
import React, {useContext, useEffect, useState} from "react";
import {Button, Divider, Form, Input, List, message, Modal, Select, Space, Table,} from "antd";
import {observer} from "mobx-react-lite";
import { useHistory } from "react-router-dom";
import {useStore} from "../utils/useStore";
import {ModalLoaderContext} from "../utils/modal";
@ -126,7 +113,7 @@ export const SubcategoryComponent = observer((props) => {
store.subcategory.pageSize = page.pageSize;
store.subcategory.page = pageNumber - 1;
modalLoader.setLoading(true);
// await getData();
await getData();
modalLoader.setLoading(false);
}}
/>

2
src/component/SupplierComponent.js
View File

@ -219,7 +219,7 @@ export const SupplierComponent = observer((props) => {
store.supplier.pageSize = page.pageSize;
store.supplier.page = pageNumber - 1;
modalLoader.setLoading(true);
//await store.supplier.getData();
await store.supplier.getData();
modalLoader.setLoading(false);
}}
/>

10
src/component/TopupsaldoModal.js
View File

@ -1,5 +1,5 @@
import React, { useContext } from "react";
import {Form, Input, message, Modal} from "antd";
import { Form, Input, message, Modal, InputNumber } from "antd";
import { observer } from "mobx-react-lite";
import { useStore } from "../utils/useStore";
import { ModalLoaderContext } from "../utils/modal";
@ -69,7 +69,13 @@ export const TopupsaldoModal = observer((props) => {
label="Amount"
rules={[{ required: true, message: "Please input amount!" }]}
>
<Input/>
<InputNumber
style={{ width: "100%" }}
formatter={(value) =>
`Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
/>
</Form.Item>
</Form>
</Modal>

5
src/index.css
View File

@ -63,6 +63,7 @@ code {
.ant-menu-submenu-arrow{
padding-right: 40px !important;
}
.ant-breadcrumb {
margin-bottom: 10px !important;
}
@ -71,3 +72,7 @@ code {
color: #ed1f24 !important;
border-color: #ed1f24 !important;
}
.profile-container .ant-popover-inner-content {
padding: 0 !important;
}

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

@ -3,17 +3,18 @@ import { Button, Drawer, Layout, Menu, Popover, Typography } from "antd";
import {MenuList} from "./MenuList";
import {Link, useHistory} from "react-router-dom";
import {
HomeOutlined,
MenuOutlined,
UserOutlined,
ProfileOutlined,
AlipayOutlined,
DatabaseOutlined,
FileAddOutlined,
FileSyncOutlined,
FileProtectOutlined,
FileSyncOutlined,
HomeOutlined,
LogoutOutlined,
MenuOutlined,
PayCircleOutlined,
ProfileOutlined,
ShoppingCartOutlined,
AlipayOutlined,
PayCircleOutlined
UserOutlined
} from "@ant-design/icons";
import {AppRoute, LINKS} from "../../routes/app";
import {useStore} from "../../utils/useStore";
@ -219,7 +220,7 @@ export const DesktopLayout = observer(() => {
)}
{store.authentication.userData.role !== "Admin" && (
<Menu.Item key="payback-from-user">
<Link to={LINKS.PAYBACKFROMUSER}>
<Link to={LINKS.PAYBACK_FROM_USER}>
<AlipayOutlined/>
<span>Payback</span>
</Link>
@ -363,17 +364,20 @@ export const DesktopLayout = observer(() => {
}}
mode="inline"
>
<Menu.Item>
{store.authentication.userData.role !== "Admin" && <Menu.Item>
<Link to={LINKS.PROFILE}>
<UserOutlined/>
<span>Profile</span>
</Link>
</Menu.Item>
}
<Menu.Item
onClick={() => {
store.authentication.logout();
history.push("/login");
}}
>
<LogoutOutlined/>
<span>Sign out</span>
</Menu.Item>
</Menu>
@ -382,8 +386,9 @@ export const DesktopLayout = observer(() => {
<Text>
{store.user.data.username}
<Paragraph
style={{ fontWeight: 400 }}
style={{fontWeight: 400, marginTop: '0.5rem'}}
type={"secondary-dark"}
strong
>
{store.authentication.userData.username}
</Paragraph>
@ -460,11 +465,14 @@ export const DesktopLayout = observer(() => {
}}
mode="inline"
>
<Menu.Item key={"profile"}>
{store.authentication.userData.role !== "Admin" && (
<Menu.Item key="profile">
<Link to={LINKS.PROFILE}>
<UserOutlined/>
<span>Profile</span>
</Link>
</Menu.Item>
)}
<Menu.Item
key={"logout"}
onClick={() => {
@ -472,16 +480,17 @@ export const DesktopLayout = observer(() => {
history.push("/login");
}}
>
<LogoutOutlined/>
<span>Sign out</span>
</Menu.Item>
</Menu>
}
title={
<Text>
{store.user.data.email}{" "}
<Paragraph
style={{ fontWeight: 400 }}
style={{fontWeight: 400, marginTop: '0.5rem'}}
type={"secondary-dark"}
strong
>
{store.authentication.userData.username}
</Paragraph>

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

@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
import {Menu} from "antd";
import {Link} from "react-router-dom";
import {
AlipayOutlined,
AppstoreOutlined,
DatabaseOutlined,
FileAddOutlined,
@ -10,12 +11,11 @@ import {
HomeOutlined,
MenuUnfoldOutlined,
MoneyCollectOutlined,
PayCircleOutlined,
ProfileOutlined,
ProjectOutlined,
ShoppingCartOutlined,
UserOutlined,
AlipayOutlined,
PayCircleOutlined,
} from "@ant-design/icons";
import {observer} from "mobx-react-lite";
import {useStore} from "../../utils/useStore";
@ -25,7 +25,8 @@ const { SubMenu } = Menu;
export const MenuList = observer((props) => {
const store = useStore();
useEffect(() => {}, []);
useEffect(() => {
}, []);
const [setKeys, setSetKeys] = useState(["dashboard"]);
@ -137,7 +138,7 @@ export const MenuList = observer((props) => {
)}
{store.authentication.userData.role !== "Admin" && (
<Menu.Item key="payback-from-user">
<Link to={LINKS.PAYBACKFROMUSER}>
<Link to={LINKS.PAYBACK_FROM_USER}>
<AlipayOutlined/>
<span>Payback</span>
</Link>

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

@ -7,12 +7,14 @@ import {observer} from "mobx-react-lite";
import {FilterOutlined} from "@ant-design/icons";
import {format, parseISO} from "date-fns";
import {ModalLoaderContext} from "../../utils/modal";
import {useParams} from "react-router-dom";
const {Title, Text} = Typography;
export const DetailUser = observer(() => {
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
const { id } = useParams();
const routeData = [
{
@ -20,16 +22,17 @@ export const DetailUser = observer(() => {
name: "Home",
},
{
route: LINKS.DETAILUSER,
route: LINKS.USER_DETAIL,
name: <span style={{fontWeight: 'bold'}}>Detail User</span>,
},
];
console.log(id)
useEffect(() => {
(async () => {
modalLoader.setLoading(true);
await Promise.allSettled([
store.authentication.getProfile(),
store.transaction.getDataHistoryTopUp(id),
store.transaction.getDataHistoryTransaction(),
]);
modalLoader.setLoading(false);
@ -83,7 +86,7 @@ export const DetailUser = observer(() => {
<Text strong>Name</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData?.userDetail?.name}</Text>
<Text>{store.transaction.data.name}</Text>
</Col>
<Col span={12}>
<Text strong>Role</Text>
@ -125,7 +128,7 @@ export const DetailUser = observer(() => {
<Row>
<Col span={24}>
<div>
<Title strong level={3}>History User Transaction</Title>
<Title strong level={3}>History Top Up</Title>
<Button style={{marginBottom: '1rem'}} onClick={() => {
console.log('clicked filter')

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

@ -1,8 +1,24 @@
import React, {useContext, useEffect, useState} from "react";
import {Button, Card, Col, Divider, Form, Input, List, message, Modal, Row, Select, Space, Table, Tag,} from "antd";
import {
Button,
Card,
Col,
Divider,
Form,
Input,
InputNumber,
List,
message,
Modal,
Row,
Select,
Space,
Table,
Tag,
} from "antd";
import {useStore} from "../../utils/useStore";
import {observer} from "mobx-react-lite";
import {DownloadOutlined, PlusSquareOutlined,} from "@ant-design/icons";
import {DownloadOutlined, PlusSquareOutlined} from "@ant-design/icons";
import {MembershipModal} from "./MembershipModal";
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app";
@ -30,7 +46,6 @@ export const Membership = observer(() => {
await getData();
await store.role.getData(isAdmin);
await store.supplier.getData();
modalLoader.setLoading(false);
} catch (e) {
console.error(e);
@ -85,10 +100,16 @@ export const Membership = observer(() => {
};
}
let response = null;
(await store.authentication.userData.role) === "Admin"
? store.transaction.distributeAdmin(data)
: store.transaction.distribute(data);
message.success("Success Top Up");
? (response = await store.transaction.distributeAdmin(data))
: (response = await store.transaction.distribute(data));
response?.body?.statusCode === 200
? message.success("Success Top Up")
: message.error("Failed Top Up");
modalLoader.setLoading(false);
//await store.supplier.getData()
} catch (e) {
@ -115,7 +136,7 @@ export const Membership = observer(() => {
key: "role",
},
{
title: "Saldo di Supplier",
title: "Saldo",
dataIndex: ["coa", "amount"],
key: ["coa", "amount"],
width: "20%",
@ -125,17 +146,6 @@ export const Membership = observer(() => {
currency: "IDR",
}).format(text),
},
{
title: "Saldo di System",
dataIndex: ["coa_undistribute", "amount"],
key: ["coa_undistribute", "amount"],
width: "20%",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
title: "Status",
dataIndex: "isActive",
@ -201,8 +211,9 @@ export const Membership = observer(() => {
</Button>
<Button
onClick={async () => {
history.push(LINKS.DETAILUSER.replace(":id", record.id));
//console.log(record.id)
await store.transaction.getDataHistoryTopUp(record.id)
history.push(LINKS.USER_DETAIL.replace(":id", record.id));
console.log(record.id);
}}
>
Detail
@ -212,6 +223,7 @@ export const Membership = observer(() => {
},
];
if (store.authentication.userData.role !== "Admin") columns.pop();
const routeData = [
{
route: LINKS.HOME,
@ -265,29 +277,6 @@ export const Membership = observer(() => {
}
};
const handleDetail = (record) => {
// Modal.confirm({
// title: "Are you sure delete this record?",
// icon: <ExclamationCircleOutlined/>,
// okText: "Yes",
// okType: "primary",
// cancelText: "Cancel",
// async onOk() {
// try {
// //TODO: minta apinya ke ka ilham ya, jangan di uncomment kalo pake api reconcile, nanti beneran ke apus datanya
// await store.membership.delete(record);
// message.success("Success Delete Data");
// await getData();
// } catch (e) {
// message.error("Failed Delete Data");
// }
// },
// onCancel() {
// console.log("Cancel");
// },
// });
};
return (
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} />
@ -385,9 +374,14 @@ export const Membership = observer(() => {
<div style={{}}>
<p>
<small>Role : {item.roleName}</small> <br />
<small>Saldo Supplier : {item.amount}</small>{" "}
<small>
Saldo Supplier : {item.coa.amount}
</small>{" "}
<br />
<small>
Saldo System : {item.coa.amount}
</small>{" "}
<br />
<small>Saldo System : {item.amount}</small> <br />
</p>
</div>
}
@ -443,25 +437,18 @@ export const Membership = observer(() => {
}}
>
<Form form={form} layout="vertical">
<Form.Item
name="supplier"
label="Supplier"
rules={[{ required: true, message: "Please input supplier!" }]}
>
<Select placeholder="Select Code Supplier" allowClear>
{store.supplier.data.map((item) => (
<Option value={item.code} key={item.code}>
{item.code}
</Option>
))}
</Select>
</Form.Item>
<Form.Item
name="amount"
label="Amount"
rules={[{ required: true, message: "Please input amount!" }]}
>
<Input />
<InputNumber
style={{ width: "100%" }}
formatter={(value) =>
`Rp. ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
}
parser={(value) => value.replace(/\Rp.\s?|(,*)/g, "")}
/>
</Form.Item>
</Form>
</Modal>

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

@ -6,6 +6,7 @@ import {CheckCircleOutlined, CloseOutlined, FilterOutlined,} from "@ant-design/i
import {BreadcumbComponent} from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app";
import {ModalLoaderContext} from "../../utils/modal";
import {appConfig} from "../../config/app";
const {Search} = Input;
@ -40,10 +41,9 @@ export const Payback = observer(() => {
key: "image_prove",
render: (text, record) => (
<Image
src={record.picture}
style={{width: 50, height: 50}}
shape="circle"
alt="avatar"
src={`${appConfig.apiUrl}/config/image/${text}`}
style={{width: '5vw'}}
alt={record.id}
/>
),
},
@ -51,11 +51,18 @@ export const Payback = observer(() => {
title: "Amount",
dataIndex: "amount",
key: "amount",
width: '20%',
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
title: "Action",
dataIndex: "amount",
key: "action",
width: '10%',
render: (text, record) => (
<Space size="middle">
<Button

7
src/pages/Payback/PaybackFromUser.js
View File

@ -56,6 +56,11 @@ export const PaybackFromUser = observer(() => {
title: "Amount",
dataIndex: "amount",
key: "amount",
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
];
@ -65,7 +70,7 @@ export const PaybackFromUser = observer(() => {
name: "Home",
},
{
route: LINKS.PAYBACKFROMUSER,
route: LINKS.PAYBACK_FROM_USER,
name: <span style={{fontWeight: "bold"}}>Payback User</span>,
},
];

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

@ -12,7 +12,7 @@ export const PaybackModal = ({initialData}) => {
const [image, setImage] = useState("");
const [fileList, setFileList] = useState([]);
const [previewImage, setPreviewImage] = useState("");
const [previewVisible, setPreviewVisible] = useState(false);
const [responseFilename, setResponseFilename] = useState("");
const [loading, setLoading] = useState(false);
const modalLoader = useContext(ModalLoaderContext);
@ -34,20 +34,23 @@ export const PaybackModal = ({initialData}) => {
const file = args.file;
const res = await http.upload(file);
setImage(`${appConfig.apiUrl}/config/image/${res.body.filename}`);
setResponseFilename(res.body.filename);
setFileList([{
uid: '-1',
name: 'image',
name: res.body.filename,
status: 'done',
url: `${appConfig.apiUrl}/config/image/${res.body.filename}`,
}]);
setLoading(false);
};
const handleChange = (info) => {
console.log(info, "apa isi onchange")
if (info.file.status === 'uploading') {
setLoading(true);
return;
}
} else {
setLoading(false)
}
};
const uploadButton = (
@ -62,7 +65,8 @@ export const PaybackModal = ({initialData}) => {
try {
const request = {
...data,
destination: store.authentication.profileData.superior?.id
destination: store.authentication.profileData.superior?.id,
image_prove: responseFilename
}
await store.payback.create(request);
message.success("Success Add Payback");
@ -74,21 +78,21 @@ export const PaybackModal = ({initialData}) => {
message.error(e.message);
}
modalLoader.setLoading(false);
form.resetFields();
store.payback.visibleModalPayback = false;
form.resetFields();
setImage("");
setFileList([]);
setPreviewImage("");
setPreviewVisible(false);
setResponseFilename("");
};
const handleCancel = () => {
form.resetFields();
store.payback.visibleModalPayback = false;
setImage("");
setFileList([]);
setPreviewImage("");
setPreviewVisible(false);
setResponseFilename("");
store.payback.visibleModalPayback = false;
}
return (
@ -126,7 +130,6 @@ export const PaybackModal = ({initialData}) => {
fileList={fileList}
onPreview={(file) => {
setPreviewImage(file.url || file.filename);
setPreviewVisible(file.url || file.filename);
}}
showUploadList={true}
onChange={handleChange}

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

@ -1,6 +1,10 @@
import React, { useContext, useEffect } from "react";
import { Button, Card, Col, Input, message, Row, Upload } from "antd";
import {FilterOutlined, PlusSquareOutlined, UploadOutlined,} from "@ant-design/icons";
import {
FilterOutlined,
PlusSquareOutlined,
UploadOutlined,
} from "@ant-design/icons";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
@ -55,15 +59,23 @@ export const Product = observer(() => {
<Card>
<Row style={{ marginBottom: 20 }}>
<Col span={12}>
<Button onClick={() => {
store.product.visibleModalFilterProduct = true
}}>
<Button
onClick={() => {
store.product.visibleModalFilterProduct = true;
}}
>
<FilterOutlined />
Filter
</Button>
</Col>
<Col span={12}>
<div style={{display: store.ui.mediaQuery.isMobile? "" :'flex',justifyContent: 'flex-end',textAlign: "right"}}>
<div
style={{
display: store.ui.mediaQuery.isMobile ? "" : "flex",
justifyContent: "flex-end",
textAlign: "right",
}}
>
<Search
placeholder="input search text"
style={{
@ -72,18 +84,34 @@ export const Product = observer(() => {
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}}
/>
{store.authentication.userData.role === "Admin" && (
<div
style={{
display: store.ui.mediaQuery.isMobile ? "" : "flex",
justifyContent: "flex-end",
textAlign: "right",
}}
>
<Upload>
<Button disabled={store.product.uploadBtnProduct} style={{
<Button
disabled={store.product.uploadBtnProduct}
style={{
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} icon={<UploadOutlined/>}>
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 10,
}}
icon={<UploadOutlined />}
>
Upload Product
</Button>
</Upload>
<Button onClick={() => (store.product.visibleModalProduct = true)}>
<Button
onClick={() => (store.product.visibleModalProduct = true)}
>
<PlusSquareOutlined /> New
</Button>
</div>
)}
</div>
</Col>
</Row>
<ProductComponent />

12
src/pages/Product/DetailProduct.js → src/pages/Product/ProductDetail.js
View File

@ -10,7 +10,7 @@ import {ModalLoaderContext} from "../../utils/modal";
const {Title, Text} = Typography;
export const DetailProduct = observer(() => {
export const ProductDetail = observer(() => {
const store = useStore();
const modalLoader = useContext(ModalLoaderContext);
@ -20,8 +20,12 @@ export const DetailProduct = observer(() => {
name: "Home",
},
{
route: LINKS.DETAILPRODUCT,
name: <span style={{fontWeight: 'bold'}}>Detail Product</span>,
route: LINKS.PRODUCT,
name: <span style={{fontWeight: "bold"}}>Product</span>,
},
{
route: LINKS.PRODUCT_DETAIL,
name: <span style={{fontWeight: 'bold'}}>Product Detail</span>,
},
];
@ -75,7 +79,7 @@ export const DetailProduct = observer(() => {
<div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/>
<Card>
<Title strong>Detail Product</Title>
<Title strong>Product Detail</Title>
<Row style={{marginBottom: 20}}>
<Col lg={12} xs={24}>
<Row>

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

@ -1,11 +1,11 @@
import React, {useContext, useEffect, useState} from "react";
import {Button, Card, Col, Input, Row,message} from "antd";
import React, {useContext, useEffect} from "react";
import {Button, Card, Col, Input, message, Row} from "antd";
import {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 {SubcategoryComponent} from "../../component/Subcategory";
import {SubcategoryComponent} from "../../component/SubcategoryComponent";
import {ModalLoaderContext} from "../../utils/modal";
const {Search} = Input;

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

@ -42,6 +42,11 @@ export const Profile = observer(() => {
dataIndex: 'mark_up_price',
key: 'mark_up_price',
width: '20%',
render: (text) =>
new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
}).format(text),
},
{
title: 'Name',

16
src/routes/app.js
View File

@ -4,7 +4,7 @@ import {About} from "../pages/About/About";
import {Membership} from "../pages/Membership/Membership";
import {DetailUser} from "../pages/Membership/DetailUser";
import {Product} from "../pages/Product/Product";
import {DetailProduct} from "../pages/Product/DetailProduct";
import {ProductDetail} from "../pages/Product/ProductDetail";
import {Transaction} from "../pages/Transaction/Transaction";
import {Profile} from "../pages/Profile/Profile";
import {Commission} from "../pages/Config/Commission";
@ -27,10 +27,10 @@ export const LINKS = {
SUPPLIER: "/app/supplier",
CATEGORY: "/app/category",
PAYBACK: "/app/payback",
PAYBACKFROMUSER: "/app/payback-from-user",
PAYBACK_FROM_USER: "/app/payback-from-user",
SUBCATEGORY: "/app/subcategory",
DETAILUSER: "/app/detail-user",
DETAILPRODUCT: "/app/detail-product",
USER_DETAIL: "/app/user-detail",
PRODUCT_DETAIL: "/app/product-detail",
};
export const AppRoute = () => {
@ -38,16 +38,16 @@ export const AppRoute = () => {
<Route path={LINKS.HOME}>
<Home/>
</Route>
<Route path={LINKS.DETAILUSER}>
<Route path={LINKS.USER_DETAIL}>
<DetailUser/>
</Route>
<Route path={LINKS.DETAILPRODUCT}>
<DetailProduct/>
<Route path={LINKS.PRODUCT_DETAIL}>
<ProductDetail/>
</Route>
<Route path={LINKS.COMMISSION}>
<Commission/>
</Route>
<Route path={LINKS.PAYBACKFROMUSER}>
<Route path={LINKS.PAYBACK_FROM_USER}>
<PaybackFromUser/>
</Route>
<Route path={LINKS.CATEGORY}>

1
src/store/product.js
View File

@ -31,6 +31,7 @@ export class Product {
async getData() {
try {
const response = await http.get(`/product/all?supplier=${this.filterSupplier}&sub-category=${this.filterSubCategory}&page=${this.page}&pageSize=${this.pageSize}`);
//console.log(response)
this.data = response.body.data.map((item, idx) => {
item.key = idx;
return item

16
src/store/transaction.js
View File

@ -22,10 +22,14 @@ export class Transaction {
filterSubCategory = null;
pageHistoryTransaction = 0;
pageHistoryTopUp = 0;
// pageSizeHistoryTransaction = 10
dataHistoryTransaction = [];
total_dataHistoryTransaction = 0;
dataHistoryTopUp=[];
total_dataHistoryTopUp = 0;
constructor(ctx) {
this.ctx = ctx;
makeAutoObservable(this);
@ -76,6 +80,18 @@ export class Transaction {
}
}
async getDataHistoryTopUp(id) {
try {
console.log("Top up")
const response = await http.get(`/transaction/history-deposit?page=${this.pageHistoryTopUp}&user-destination=${id}`);
this.dataHistoryTopUp = response.body.data ?? []
this.total_dataHistoryTopUp = response?.body?.count ?? 0
} catch (e) {
console.error(e);
}
}
async create(data) {
try {
const response = await http.post('/product').send(data);