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

Config Menu

Browse Source
This commit is contained in:
ajat91.sudrajat 2021-12-23 11:53:07 +07:00
parent 6b22d2e264
commit ce2d2e1072
16 changed files with 572 additions and 507 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/component/ProductComponent.js
View File

@ -1,4 +1,4 @@
import React, {useContext, useState} from "react"; import React, { useContext, useState } from "react";
import { import {
Button, Button,
Col, Col,
@ -15,19 +15,19 @@ import {
Tag, Tag,
Typography, Typography,
} from "antd"; } from "antd";
import {observer} from "mobx-react-lite"; import { observer } from "mobx-react-lite";
import {ExclamationCircleOutlined} from "@ant-design/icons"; import { ExclamationCircleOutlined } from "@ant-design/icons";
import {useHistory} from "react-router-dom"; import { useHistory } from "react-router-dom";
import {useStore} from "../utils/useStore"; import { useStore } from "../utils/useStore";
import {LINKS} from "../routes/app"; import { LINKS } from "../routes/app";
import {ModalLoaderContext} from "../utils/modal"; import { ModalLoaderContext } from "../utils/modal";
const {Title, Text} = Typography; const { Title, Text } = Typography;
export const ProductComponent = observer((props) => { export const ProductComponent = observer((props) => {
const store = useStore(); const store = useStore();
const [form] = Form.useForm(); const [form] = Form.useForm();
const {Option} = Select; const { Option } = Select;
const history = useHistory(); const history = useHistory();
const [idData, setIdData] = useState(""); const [idData, setIdData] = useState("");
const [filterSupplier, setFilterSupplier] = useState([]); const [filterSupplier, setFilterSupplier] = useState([]);
@ -92,6 +92,11 @@ export const ProductComponent = observer((props) => {
// </Tag> // </Tag>
// ), // ),
// }, // },
{
title: "Supplier",
dataIndex: "supplier",
key: "supplier",
},
{ {
title: "Tersedia", title: "Tersedia",
dataIndex: "tersedia", dataIndex: "tersedia",
@ -120,7 +125,7 @@ export const ProductComponent = observer((props) => {
), ),
}, },
]; ];
if (store.authentication.userData.role !== "Admin") columns.pop();
const deleteData = async (id) => { const deleteData = async (id) => {
try { try {
console.log(id); console.log(id);
@ -289,7 +294,7 @@ export const ProductComponent = observer((props) => {
pageSize: store.product.pageSize, pageSize: store.product.pageSize,
total: store.product.total_data, total: store.product.total_data,
current: store.product.page + 1, current: store.product.page + 1,
style: {marginBottom: "1rem", marginRight: "1rem"}, style: { marginBottom: "1rem", marginRight: "1rem" },
}} }}
dataSource={store.product.data} dataSource={store.product.data}
style={{ padding: 0 }} style={{ padding: 0 }}

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

@ -52,14 +52,14 @@ export const MenuList = observer((props) => {
<Menu.Item key="home"> <Menu.Item key="home">
<Link to={LINKS.HOME}> <Link to={LINKS.HOME}>
<HomeOutlined /> <HomeOutlined />
<span>Home</span> <span>Beranda</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
{store.authentication.userData.role !== "Retail" && ( {store.authentication.userData.role !== "Retail" && (
<Menu.Item key="membership"> <Menu.Item key="membership">
<Link to={LINKS.MEMBERSHIP}> <Link to={LINKS.MEMBERSHIP}>
<FileProtectOutlined /> <FileProtectOutlined />
<span>Membership</span> <span>Keanggotaan</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
@ -68,13 +68,13 @@ export const MenuList = observer((props) => {
<Menu.Item key="partner"> <Menu.Item key="partner">
<Link to={LINKS.PARTNER}> <Link to={LINKS.PARTNER}>
<ProjectOutlined /> <ProjectOutlined />
<span>Partner</span> <span>Rekanan</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="commision"> <Menu.Item key="commision">
<Link to={LINKS.COMMISSION}> <Link to={LINKS.COMMISSION}>
<MoneyCollectOutlined /> <MoneyCollectOutlined />
<span>Commission</span> <span>Komisi</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
<Menu.Item key="supplier"> <Menu.Item key="supplier">
@ -90,14 +90,14 @@ export const MenuList = observer((props) => {
<Menu.Item key="product"> <Menu.Item key="product">
<Link to={LINKS.PRODUCT}> <Link to={LINKS.PRODUCT}>
<DatabaseOutlined /> <DatabaseOutlined />
<span>Product</span> <span>Produk</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
{store.authentication.userData.role === "Admin" && ( {store.authentication.userData.role === "Admin" && (
<Menu.Item key="category"> <Menu.Item key="category">
<Link to={LINKS.CATEGORY}> <Link to={LINKS.CATEGORY}>
<FileAddOutlined /> <FileAddOutlined />
<span>Category</span> <span>Kategori</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
@ -105,7 +105,7 @@ export const MenuList = observer((props) => {
<Menu.Item key="sub-category"> <Menu.Item key="sub-category">
<Link to={LINKS.SUBCATEGORY}> <Link to={LINKS.SUBCATEGORY}>
<FileSyncOutlined /> <FileSyncOutlined />
<span>Sub Category</span> <span>Sub Kategori</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
@ -115,7 +115,7 @@ export const MenuList = observer((props) => {
<Menu.Item key="retail"> <Menu.Item key="retail">
<Link to={LINKS.PRODUCT}> <Link to={LINKS.PRODUCT}>
<DatabaseOutlined /> <DatabaseOutlined />
<span>Product</span> <span>Produk</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
@ -123,24 +123,24 @@ export const MenuList = observer((props) => {
<Menu.Item key="transaction"> <Menu.Item key="transaction">
<Link to={LINKS.TRANSACTION}> <Link to={LINKS.TRANSACTION}>
<ShoppingCartOutlined /> <ShoppingCartOutlined />
<span>Transaction</span> <span>Transaksi</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
<SubMenu key="payback-main" icon={<ProfileOutlined />} title="Payback"> <SubMenu key="payback-main" icon={<ProfileOutlined />} title="Pembayaran">
{store.authentication.userData.role !== "Retail" && ( {store.authentication.userData.role !== "Retail" && (
<Menu.Item key="payback-to-user"> <Menu.Item key="payback-to-user">
<Link to={LINKS.PAYBACK}> <Link to={LINKS.PAYBACK}>
<PayCircleOutlined/> <FileProtectOutlined/>
<span>Confirmation</span> <span>konfirmasi</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}
{store.authentication.userData.role !== "Admin" && ( {store.authentication.userData.role !== "Admin" && (
<Menu.Item key="payback-from-user"> <Menu.Item key="payback-from-user">
<Link to={LINKS.PAYBACK_CREATED}> <Link to={LINKS.PAYBACK_CREATED}>
<AlipayOutlined/> <FileProtectOutlined/>
<span>Created</span> <span>Buat Pembayaran</span>
</Link> </Link>
</Menu.Item> </Menu.Item>
)} )}

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

@ -56,14 +56,14 @@ export const Partner = observer(() => {
</Button> */} </Button> */}
</Col> </Col>
<Col span={12} style={{textAlign: "right"}}> <Col span={12} style={{textAlign: "right"}}>
<Search {/* <Search
placeholder="input search text" placeholder="input search text"
style={{ style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200, width: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10, marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} }}
/> /> */}
<Button onClick={() => store.partner.visibleModalPartner = true}> <Button onClick={() => store.partner.visibleModalPartner = true}>
<PlusSquareOutlined/> New <PlusSquareOutlined/> New
</Button> </Button>

4
src/pages/Config/Supplier.js
View File

@ -71,7 +71,7 @@ export const Supplier = observer(() => {
</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={{
width: store.ui.mediaQuery.isMobile ? 160 : 200, width: store.ui.mediaQuery.isMobile ? 160 : 200,
@ -79,7 +79,7 @@ export const Supplier = observer(() => {
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} }}
onSearch={(value) => console.log(value)} onSearch={(value) => console.log(value)}
/> /> */}
<Button <Button
onClick={() => (store.supplier.visibleModalSupplier = true)} onClick={() => (store.supplier.visibleModalSupplier = true)}
> >

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

@ -1,20 +1,67 @@
import React, {useContext, useEffect} from "react"; import React, { useContext, useEffect, useState } from "react";
import {Button, Card, Col, Row, Table, Typography} from "antd"; import {
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; Button,
import {LINKS} from "../../routes/app"; Card,
import {useStore} from "../../utils/useStore"; Col,
import {observer} from "mobx-react-lite"; Row,
import {FilterOutlined} from "@ant-design/icons"; Table,
import {format, parseISO} from "date-fns"; Typography,
import {ModalLoaderContext} from "../../utils/modal"; Tag,
import {useParams} from "react-router-dom"; Space,
message,
} from "antd";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import { FilterOutlined, DownloadOutlined } 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; const { Title, Text } = Typography;
export const DetailUser = observer(() => { export const DetailUser = observer(() => {
const store = useStore(); const store = useStore();
const modalLoader = useContext(ModalLoaderContext); const modalLoader = useContext(ModalLoaderContext);
const { id } = useParams(); const { id } = useParams();
const [visibleModal, setVisibleModal] = useState(false);
const [isVisibleTopUpModal, setIsVisibleTopUpModal] = useState(false);
const [destination, setDestination] = useState(null);
const [initialData, setInitialData] = useState({});
const [confirmLoading, setConfirmLoading] = useState(false);
//console.log(id)
useEffect(() => {
(async () => {
modalLoader.setLoading(true);
await Promise.allSettled([
store.transaction.getDataHistoryTopUp(id),
store.membership.getDetail(id),
]);
modalLoader.setLoading(false);
})();
}, []);
const columns = [
{
title: "Amount",
dataIndex: "amount",
key: "amount",
},
{
title: "Transaction Date",
dataIndex: "transaction_date",
key: "transaction_date",
render: (text, record) => {
return (
<Text>
{format(parseISO(record.transaction_date), "dd MMMM yyyy ")}
</Text>
);
},
},
];
const routeData = [ const routeData = [
{ {
@ -23,129 +70,96 @@ export const DetailUser = observer(() => {
}, },
{ {
route: LINKS.USER_DETAIL, route: LINKS.USER_DETAIL,
name: <span style={{fontWeight: 'bold'}}>Detail User</span>, 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);
})()
}, []);
const columns = [
{
title: 'Markup Price',
dataIndex: 'mark_up_price',
key: 'mark_up_price',
width: '20%',
},
{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: '50%',
},
{
title: 'Transaction Date',
dataIndex: 'created_at',
key: 'created_at',
render: (text, record) => {
return (
<Text>{format(parseISO(record.created_at), 'dd MMMM yyyy HH:mm')}</Text>
)
},
},
]
const styleSaldoTitle = store.ui.mediaQuery.isDesktop ? {
display: "flex",
justifyContent: "center"
} : {fontSize: "0.75rem"};
const styleSaldoContent = store.ui.mediaQuery.isDesktop ? {
fontSize: '1.25rem',
display: "flex",
justifyContent: "center"
} : null;
return ( return (
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/> <BreadcumbComponent data={routeData} />
<Card> <Card>
<Title strong>Detail User</Title> <Title strong>Detail User</Title>
<Row style={{marginBottom: 20}}> <Row style={{ marginBottom: 20 }}>
<Col lg={12} xs={24}> <Col lg={12} xs={24}>
<Row> <Row>
<Col span={12}> <Col span={12}>
<Text strong>Name</Text> <Text strong>Name</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text>{store.transaction.data.name}</Text> <Text>{store.membership.data.userDetail?.name}</Text>
</Col>
<Col span={12}>
<Text strong>Username</Text>
</Col>
<Col span={12}>
<Text>
{store.membership.data.superior?.username}
</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text strong>Role</Text> <Text strong>Role</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text>{store.authentication.profileData?.userDetail?.phone_number}</Text> <Text>
{store.membership.data.roles?.name}
</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text strong>Saldo Supplier</Text> <Text strong>Phone Number</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text>{store.authentication.profileData?.username}</Text> <Text>{store.membership.data.userDetail?.phone_number}</Text>
</Col>
<Col span={12}>
<Text strong>Saldo System</Text>
</Col>
<Col span={12}>
<Text>{store.authentication.profileData.roles?.name}</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text strong>Status</Text> <Text strong>Status</Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Text>{store.authentication.profileData.superior?.username}</Text> <Text>
{store.authentication.profileData.superior?.isActive === true ? "Inaktif": "Aktif"}
</Text>
</Col> </Col>
</Row> </Row>
</Col> </Col>
<Col lg={12} xs={24}> {/* <Col lg={12} xs={24}>
<Row justify={"center"}> <Row justify={"center"}>
<Col lg={24} xs={12}> <Col lg={24} xs={12}>
<Title strong level={3} style={styleSaldoTitle}>Saldo</Title> <Title strong level={3} style={styleSaldoTitle}>
Saldo
</Title>
</Col> </Col>
<Col lg={24} xs={12}> <Col lg={24} xs={12}>
<Text style={styleSaldoContent}>{store.authentication.profileData?.wallet}</Text> <Text style={styleSaldoContent}>
{store.transaction?.data.amount}
</Text>
</Col> </Col>
</Row> </Row>
</Col> </Col> */}
</Row> </Row>
<Row> <Row>
<Col span={24}> <Col span={24}>
<div> <div>
<Title strong level={3}>History Top Up</Title> <Title strong level={3}>
History Top Up
</Title>
<Button style={{marginBottom: '1rem'}} onClick={() => { <Button
console.log('clicked filter') style={{ marginBottom: "1rem" }}
}}> onClick={() => {
<FilterOutlined/> console.log("clicked filter");
}}
>
<FilterOutlined />
Filter Filter
</Button> </Button>
<Table <Table
columns={columns} columns={columns}
dataSource={store.transaction.dataHistoryTransaction} dataSource={store.transaction.dataHistoryTopUp}
bordered bordered
/> />
</div> </div>
</Col> </Col>
</Row> </Row>
<div/> <div />
</Card> </Card>
</div> </div>
) );
}); });

65
src/pages/Membership/Membership.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,
@ -16,17 +16,17 @@ import {
Table, Table,
Tag, Tag,
} from "antd"; } from "antd";
import {useStore} from "../../utils/useStore"; import { useStore } from "../../utils/useStore";
import {observer} from "mobx-react-lite"; 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 { MembershipModal } from "./MembershipModal";
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import {LINKS} from "../../routes/app"; import { LINKS } from "../../routes/app";
import {useHistory} from "react-router-dom"; import { useHistory } from "react-router-dom";
import {ModalLoaderContext} from "../../utils/modal"; import { ModalLoaderContext } from "../../utils/modal";
const {Search} = Input; const { Search } = Input;
const {Option} = Select; const { Option } = Select;
export const Membership = observer(() => { export const Membership = observer(() => {
const history = useHistory(); const history = useHistory();
const [form] = Form.useForm(); const [form] = Form.useForm();
@ -147,25 +147,25 @@ export const Membership = observer(() => {
currency: "IDR", currency: "IDR",
}).format(text), }).format(text),
}, },
{ // {
title: "Status", // title: "Status",
dataIndex: "isActive", // dataIndex: "isActive",
key: "isActive", // key: "isActive",
render: (text, record) => ( // render: (text, record) => (
<Tag // <Tag
color={record?.isActive === true ? "processing" : "#E3E8EE"} // color={record?.isActive === true ? "processing" : "#E3E8EE"}
style={{ color: "#4F566B" }} // style={{ color: "#4F566B" }}
> // >
{record?.isActive === true ? " ACTIVE" : "INACTIVE"} // {record?.isActive === true ? " ACTIVE" : "INACTIVE"}
</Tag> // </Tag>
), // ),
}, // },
{ {
title: "Action", title: "Action",
key: "action", key: "action",
render: (text, record) => ( render: (text, record) => (
<Space size="middle"> <Space size="middle">
{store.authentication.userData.role === "Admin" && <Button {/* {store.authentication.userData.role === "Admin" && <Button
type={record?.isActive === true ? "danger" : "primary"} type={record?.isActive === true ? "danger" : "primary"}
onClick={() => changeStatus(record?.id, record?.isActive)} onClick={() => changeStatus(record?.id, record?.isActive)}
> >
@ -209,10 +209,19 @@ export const Membership = observer(() => {
}} }}
> >
Ganti Password Ganti Password
</Button>} </Button>} */}
<Button
onClick={() => {
setDestination(record?.id);
console.log(record?.id);
setIsVisibleTopUpModal(true);
}}
>
<DownloadOutlined /> Top Up Saldo
</Button>
<Button <Button
onClick={async () => { onClick={async () => {
await store.transaction.getDataHistoryTopUp(record.id) await store.transaction.getDataHistoryTopUp(record.id);
history.push(LINKS.USER_DETAIL.replace(":id", record.id)); history.push(LINKS.USER_DETAIL.replace(":id", record.id));
console.log(record.id); console.log(record.id);
}} }}
@ -349,7 +358,7 @@ export const Membership = observer(() => {
pageSize: store.membership.pageSize, pageSize: store.membership.pageSize,
total: store.membership.total_data, total: store.membership.total_data,
current: store.membership.page + 1, current: store.membership.page + 1,
style: {marginBottom: "1rem", marginRight: "1rem"}, style: { marginBottom: "1rem", marginRight: "1rem" },
}} }}
dataSource={store.membership.data} dataSource={store.membership.data}
style={{ padding: 0 }} style={{ padding: 0 }}

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

@ -1,16 +1,36 @@
import React, {useContext, useEffect} from "react"; import React, { useContext, useEffect } from "react";
import {Button, Card, Col, Divider, Image, Input, List, message, Modal, Row, Space, Table, Tag,} from "antd"; import {
import {useStore} from "../../utils/useStore"; Button,
import {observer} from "mobx-react-lite"; Card,
import {CheckCircleOutlined, CheckOutlined, CloseOutlined, FilterOutlined, StopOutlined,} from "@ant-design/icons"; Col,
import {BreadcumbComponent} from "../../component/BreadcumbComponent"; Divider,
import {LINKS} from "../../routes/app"; Image,
import {ModalLoaderContext} from "../../utils/modal"; Input,
import {appConfig} from "../../config/app"; List,
import {capitalize} from "lodash"; message,
import {PAYBACK_STATUS} from "../../constants/payback"; Modal,
Row,
Space,
Table,
Tag,
} from "antd";
import { useStore } from "../../utils/useStore";
import { observer } from "mobx-react-lite";
import {
CheckCircleOutlined,
CheckOutlined,
CloseOutlined,
FilterOutlined,
StopOutlined,
} from "@ant-design/icons";
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
import { LINKS } from "../../routes/app";
import { ModalLoaderContext } from "../../utils/modal";
import { appConfig } from "../../config/app";
import { capitalize } from "lodash";
import { PAYBACK_STATUS } from "../../constants/payback";
const {Search} = Input; const { Search } = Input;
export const Payback = observer(() => { export const Payback = observer(() => {
const store = useStore(); const store = useStore();
@ -48,7 +68,7 @@ export const Payback = observer(() => {
render: (text, record) => ( render: (text, record) => (
<Image <Image
src={`${appConfig.apiUrl}/config/image/${text}`} src={`${appConfig.apiUrl}/config/image/${text}`}
style={{width: '5vw'}} style={{ width: "5vw" }}
alt={record.id} alt={record.id}
/> />
), ),
@ -57,7 +77,7 @@ export const Payback = observer(() => {
title: "Amount", title: "Amount",
dataIndex: "amount", dataIndex: "amount",
key: "amount", key: "amount",
width: '20%', width: "20%",
render: (text) => render: (text) =>
new Intl.NumberFormat("id-ID", { new Intl.NumberFormat("id-ID", {
style: "currency", style: "currency",
@ -68,15 +88,15 @@ export const Payback = observer(() => {
title: "Action", title: "Action",
dataIndex: "amount", dataIndex: "amount",
key: "action", key: "action",
width: '10%', width: "10%",
render: (text, record) => ( render: (text, record) =>
PAYBACK_STATUS[record.status] === PAYBACK_STATUS[0] ? PAYBACK_STATUS[record.status] === PAYBACK_STATUS[0] ? (
<Space size="middle"> <Space size="middle">
<Button <Button
onClick={async () => { onClick={async () => {
Modal.confirm({ Modal.confirm({
title: `Are you sure Accept this submission?`, title: `Are you sure Accept this submission?`,
icon: <CheckOutlined/>, icon: <CheckOutlined />,
okText: "Accept", okText: "Accept",
cancelText: "Cancel", cancelText: "Cancel",
okType: "primary", okType: "primary",
@ -86,9 +106,9 @@ export const Payback = observer(() => {
onCancel() { onCancel() {
console.log("Cancel"); console.log("Cancel");
}, },
}) });
}} }}
icon={<CheckCircleOutlined/>} icon={<CheckCircleOutlined />}
style={{ style={{
backgroundColor: "#1bb91d", backgroundColor: "#1bb91d",
color: "#fff", color: "#fff",
@ -101,7 +121,7 @@ export const Payback = observer(() => {
onClick={async () => { onClick={async () => {
Modal.confirm({ Modal.confirm({
title: `Are you sure Reject this submission?`, title: `Are you sure Reject this submission?`,
icon: <StopOutlined/>, icon: <StopOutlined />,
okText: "Reject", okText: "Reject",
cancelText: "Cancel", cancelText: "Cancel",
okType: "primary", okType: "primary",
@ -111,10 +131,9 @@ export const Payback = observer(() => {
onCancel() { onCancel() {
console.log("Cancel"); console.log("Cancel");
}, },
}) });
}} }}
icon={<CloseOutlined/>} icon={<CloseOutlined />}
style={{ style={{
backgroundColor: "#ff1c1c", backgroundColor: "#ff1c1c",
color: "#fff", color: "#fff",
@ -123,10 +142,15 @@ export const Payback = observer(() => {
> >
Reject Reject
</Button> </Button>
</Space> : </Space>
) : (
<Tag <Tag
color={PAYBACK_STATUS[record.status] === PAYBACK_STATUS[3] ? "cyan" : "red"} color={
style={{color: "#4F566B"}} PAYBACK_STATUS[record.status] === PAYBACK_STATUS[3]
? "cyan"
: "red"
}
style={{ color: "#4F566B" }}
> >
{PAYBACK_STATUS[record.status]} {PAYBACK_STATUS[record.status]}
</Tag> </Tag>
@ -143,7 +167,7 @@ export const Payback = observer(() => {
}, },
{ {
route: LINKS.PAYBACK, route: LINKS.PAYBACK,
name: <span style={{fontWeight: "bold"}}>Payback Confirmation</span>, name: <span style={{ fontWeight: "bold" }}>Payback Confirmation</span>,
}, },
]; ];
@ -165,25 +189,25 @@ export const Payback = observer(() => {
return ( return (
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData}/> <BreadcumbComponent data={routeData} />
<Card> <Card>
<div> <div>
<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={12} style={{textAlign: "right"}}> <Col span={12} style={{ textAlign: "right" }}>
<Search {/* <Search
placeholder="input search text" placeholder="input search text"
style={{ style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200, width: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10, marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} }}
/> /> */}
</Col> </Col>
</Row> </Row>
{store.ui.mediaQuery.isDesktop && ( {store.ui.mediaQuery.isDesktop && (
@ -198,7 +222,7 @@ export const Payback = observer(() => {
total: store.payback.totalDataConfirmation, total: store.payback.totalDataConfirmation,
current: store.payback.pageSizeConfirmation + 1, current: store.payback.pageSizeConfirmation + 1,
showSizeChanger: true, showSizeChanger: true,
simple: false simple: false,
}} }}
onChange={async (page) => { onChange={async (page) => {
let pageNumber = page.current; let pageNumber = page.current;
@ -226,10 +250,10 @@ export const Payback = observer(() => {
pageSize: store.payback.pageSizeConfirmation, pageSize: store.payback.pageSizeConfirmation,
total: store.payback.totalDataConfirmation, total: store.payback.totalDataConfirmation,
current: store.payback.pageConfirmation + 1, current: store.payback.pageConfirmation + 1,
style: {marginBottom: "1rem", marginRight: "1rem"}, style: { marginBottom: "1rem", marginRight: "1rem" },
}} }}
dataSource={store.payback.dataConfirmation} dataSource={store.payback.dataConfirmation}
style={{padding: 0}} style={{ padding: 0 }}
renderItem={(item) => { renderItem={(item) => {
return ( return (
<div> <div>
@ -250,11 +274,11 @@ export const Payback = observer(() => {
title={item.name} title={item.name}
description={ description={
<div style={{}}> <div style={{}}>
<Image src={item.picture} preview={false}/> <Image src={item.picture} preview={false} />
</div> </div>
} }
/> />
<div style={{marginRight: 16}}> <div style={{ marginRight: 16 }}>
<p <p
style={{ style={{
fontSize: 9, fontSize: 9,
@ -265,7 +289,7 @@ export const Payback = observer(() => {
</p> </p>
</div> </div>
</List.Item> </List.Item>
<Divider plain style={{margin: 0}}/> <Divider plain style={{ margin: 0 }} />
</div> </div>
); );
}} }}

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

@ -101,14 +101,14 @@ export const PaybackCreated = observer(() => {
</Button> </Button>
</Col> </Col>
<Col span={12} style={{textAlign: "right"}}> <Col span={12} style={{textAlign: "right"}}>
<Search {/* <Search
placeholder="input search text" placeholder="input search text"
style={{ style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200, width: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10, marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} }}
/> /> */}
{store.authentication.userData.role !== "Admin" && ( {store.authentication.userData.role !== "Admin" && (
<Button <Button
onClick={() => { onClick={() => {

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

@ -57,14 +57,14 @@ export const Category = observer(() => {
</Button> </Button>
</Col> </Col>
<Col span={12} style={{ textAlign: "right" }}> <Col span={12} style={{ textAlign: "right" }}>
<Search {/* <Search
placeholder="input search text" placeholder="input search text"
style={{ style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200, width: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10, marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} }}
/> /> */}
<Button <Button
onClick={() => (store.category.visibleModalCategory = true)} onClick={() => (store.category.visibleModalCategory = true)}
> >

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

@ -57,6 +57,8 @@ export const Product = observer(() => {
<div className={["ppob-container"].join(" ")}> <div className={["ppob-container"].join(" ")}>
<BreadcumbComponent data={routeData} /> <BreadcumbComponent data={routeData} />
<Card> <Card>
{store.authentication.userData.role !== "Admin" && (
<div>
<Row style={{ marginBottom: 20 }}> <Row style={{ marginBottom: 20 }}>
<Col span={12}> <Col span={12}>
<Button <Button
@ -76,15 +78,15 @@ export const Product = observer(() => {
textAlign: "right", textAlign: "right",
}} }}
> >
<Search {/* <Search
placeholder="input search text" placeholder="input search text"
style={{ style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200, width: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10, marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} }}
/> /> */}
{store.authentication.userData.role === "Admin" && (
<div <div
style={{ style={{
display: store.ui.mediaQuery.isMobile ? "" : "flex", display: store.ui.mediaQuery.isMobile ? "" : "flex",
@ -104,16 +106,17 @@ export const Product = observer(() => {
Upload Product Upload Product
</Button> </Button>
</Upload> </Upload>
<Button {/* <Button
onClick={() => (store.product.visibleModalProduct = true)} onClick={() => (store.product.visibleModalProduct = true)}
> >
<PlusSquareOutlined /> New <PlusSquareOutlined /> New
</Button> </Button> */}
</div> </div>
)}
</div> </div>
</Col> </Col>
</Row> </Row>
</div>
)}
<ProductComponent /> <ProductComponent />
</Card> </Card>
</div> </div>

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

@ -61,14 +61,14 @@ export const Subcategory = observer(() => {
</Button> */} </Button> */}
</Col> </Col>
<Col span={12} style={{textAlign: "right"}}> <Col span={12} style={{textAlign: "right"}}>
<Search {/* <Search
placeholder="input search text" placeholder="input search text"
style={{ style={{
width: store.ui.mediaQuery.isMobile ? 160 : 200, width: store.ui.mediaQuery.isMobile ? 160 : 200,
marginRight: store.ui.mediaQuery.isMobile ? 0 : 10, marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0, marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
}} }}
/> /> */}
<Button <Button
onClick={() => (store.subcategory.visibleModalSubcategory = true)} onClick={() => (store.subcategory.visibleModalSubcategory = true)}
> >

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

@ -60,7 +60,7 @@ export const Profile = observer(() => {
key: 'created_at', key: 'created_at',
render: (text, record) => { render: (text, record) => {
return ( return (
<Text>{format(parseISO(record.created_at), 'dd MMMM yyyy HH:mm')}</Text> <Text>{format(parseISO(record.created_at), 'mm:HH dd MM YYYY')}</Text>
) )
}, },
}, },

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

@ -117,7 +117,7 @@ export const Product = observer(() => {
}, },
}); });
}} }}
style={{cursor: "pointer"}} style={{cursor: "pointer",marginLeft:10}}
> >
<span style={{color: "black"}}>{item.product_name}</span> <span style={{color: "black"}}>{item.product_name}</span>
<br/> <br/>
@ -132,13 +132,13 @@ export const Product = observer(() => {
))} ))}
</Row> </Row>
)} )}
{store.transaction.data.length !== 0 && ( {/* {store.transaction.data.length !== 0 && (
<Col style={{textAlign: "right", marginTop: "1em"}}> <Col style={{textAlign: "right", marginTop: "1em"}}>
<Button style={{backgroundColor: "#2D9CDB", color: "white"}}> <Button style={{backgroundColor: "#2D9CDB", color: "white"}}>
Beli Sekarang Beli Sekarang
</Button> </Button>
</Col> </Col>
)} )} */}
</div> </div>
); );
}); });

2
src/routes/app.js
View File

@ -29,7 +29,7 @@ export const LINKS = {
PAYBACK: "/app/payback", PAYBACK: "/app/payback",
PAYBACK_CREATED: "/app/payback-created", PAYBACK_CREATED: "/app/payback-created",
SUBCATEGORY: "/app/subcategory", SUBCATEGORY: "/app/subcategory",
USER_DETAIL: "/app/user-detail", USER_DETAIL: "/app/user-detail/:id",
PRODUCT_DETAIL: "/app/product-detail", PRODUCT_DETAIL: "/app/product-detail",
}; };

10
src/store/membership.js
View File

@ -28,6 +28,16 @@ export class Membership {
console.error(e); console.error(e);
} }
} }
async getDetail(id) {
try {
const response = await http.get(`/users/`+id);
console.log(response,'Data Detail')
this.data = response.body.data
this.total_data = response?.body?.count ?? 0
} catch (e) {
console.error(e);
}
}
async getDataBySuperior() { async getDataBySuperior() {
try { try {

2
src/store/transaction.js
View File

@ -84,7 +84,7 @@ export class Transaction {
try { try {
console.log("Top up") console.log("Top up")
const response = await http.get(`/transaction/history-deposit?page=${this.pageHistoryTopUp}&user-destination=${id}`); const response = await http.get(`/transaction/history-deposit?page=${this.pageHistoryTopUp}&user-destination=${id}`);
console.log(response,"data")
this.dataHistoryTopUp = response.body.data ?? [] this.dataHistoryTopUp = response.body.data ?? []
this.total_dataHistoryTopUp = response?.body?.count ?? 0 this.total_dataHistoryTopUp = response?.body?.count ?? 0
} catch (e) { } catch (e) {