Detail User
This commit is contained in:
parent
ad3b7c6be0
commit
e513621fc4
|
|
@ -96,6 +96,20 @@ export const ProductComponent = observer((props) => {
|
|||
</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: "Action",
|
||||
key: "action",
|
||||
render: (text, record) => (
|
||||
<Button
|
||||
onClick={async () => {
|
||||
history.push(LINKS.DETAILPRODUCT.replace(":id", record.id));
|
||||
//console.log(record.id)
|
||||
}}
|
||||
>
|
||||
Detail
|
||||
</Button>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const deleteData = async (id) => {
|
||||
|
|
|
|||
|
|
@ -215,12 +215,14 @@ export const DesktopLayout = observer(() => {
|
|||
<span>Payback To</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
{store.authentication.userData.role !== "Admin" && (
|
||||
<Menu.Item key="payback-from-user">
|
||||
<Link to={LINKS.PAYBACKFROMUSER}>
|
||||
<AlipayOutlined />
|
||||
<span>Payback</span>
|
||||
</Link>
|
||||
</Menu.Item>
|
||||
)}
|
||||
</SubMenu>
|
||||
{store.authentication.userData.role !== "Admin" && (
|
||||
<Menu.Item key="profile">
|
||||
|
|
|
|||
148
src/pages/Membership/DetailUser.js
Normal file
148
src/pages/Membership/DetailUser.js
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
import React, {useContext, useEffect} from "react";
|
||||
import {Button, Card, Col, Row, Table, Typography} 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} from "@ant-design/icons";
|
||||
import {format, parseISO} from "date-fns";
|
||||
import {ModalLoaderContext} from "../../utils/modal";
|
||||
|
||||
const {Title, Text} = Typography;
|
||||
|
||||
export const DetailUser = observer(() => {
|
||||
const store = useStore();
|
||||
const modalLoader = useContext(ModalLoaderContext);
|
||||
|
||||
const routeData = [
|
||||
{
|
||||
route: LINKS.HOME,
|
||||
name: "Home",
|
||||
},
|
||||
{
|
||||
route: LINKS.DETAILUSER,
|
||||
name: <span style={{fontWeight: 'bold'}}>Detail User</span>,
|
||||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
modalLoader.setLoading(true);
|
||||
await Promise.allSettled([
|
||||
store.authentication.getProfile(),
|
||||
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 (
|
||||
<div className={["ppob-container"].join(" ")}>
|
||||
<BreadcumbComponent data={routeData}/>
|
||||
<Card>
|
||||
<Title strong>Detail User</Title>
|
||||
<Row style={{marginBottom: 20}}>
|
||||
<Col lg={12} xs={24}>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Text strong>Name</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text>{store.authentication.profileData?.userDetail?.name}</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text strong>Role</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text>{store.authentication.profileData?.userDetail?.phone_number}</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text strong>Saldo Supplier</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text>{store.authentication.profileData?.username}</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text strong>Saldo System</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text>{store.authentication.profileData.roles?.name}</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text strong>Status</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text>{store.authentication.profileData.superior?.username}</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col lg={12} xs={24}>\
|
||||
<Row justify={"center"}>
|
||||
<Col lg={24} xs={12}>
|
||||
<Title strong level={3} style={styleSaldoTitle}>Saldo</Title>
|
||||
</Col>
|
||||
<Col lg={24} xs={12}>
|
||||
<Text style={styleSaldoContent}>{store.authentication.profileData?.wallet}</Text>
|
||||
</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')
|
||||
}}>
|
||||
<FilterOutlined/>
|
||||
Filter
|
||||
</Button>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={store.transaction.dataHistoryTransaction}
|
||||
bordered
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<div/>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
});
|
||||
|
|
@ -1,16 +1,37 @@
|
|||
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,
|
||||
List,
|
||||
message,
|
||||
Modal,
|
||||
Row,
|
||||
Select,
|
||||
Space,
|
||||
Table,
|
||||
Tag,
|
||||
} from "antd";
|
||||
import { useStore } from "../../utils/useStore";
|
||||
import { observer } from "mobx-react-lite";
|
||||
import {DownloadOutlined, ExclamationCircleOutlined, PlusSquareOutlined,} from "@ant-design/icons";
|
||||
import {
|
||||
DownloadOutlined,
|
||||
ExclamationCircleOutlined,
|
||||
PlusSquareOutlined,
|
||||
} from "@ant-design/icons";
|
||||
import { MembershipModal } from "./MembershipModal";
|
||||
import { BreadcumbComponent } from "../../component/BreadcumbComponent";
|
||||
import { LINKS } from "../../routes/app";
|
||||
import { Link,useHistory } from "react-router-dom";
|
||||
import { ModalLoaderContext } from "../../utils/modal";
|
||||
|
||||
const { Search } = Input;
|
||||
const { Option } = Select;
|
||||
export const Membership = observer(() => {
|
||||
const history = useHistory();
|
||||
const [form] = Form.useForm();
|
||||
const store = useStore();
|
||||
const [visibleModal, setVisibleModal] = useState(false);
|
||||
|
|
@ -117,24 +138,22 @@ export const Membership = observer(() => {
|
|||
dataIndex: ["coa", "amount"],
|
||||
key: ["coa", "amount"],
|
||||
width: "20%",
|
||||
render: (text) => (
|
||||
render: (text) =>
|
||||
new Intl.NumberFormat("id-ID", {
|
||||
style: "currency",
|
||||
currency: "IDR",
|
||||
}).format(text)
|
||||
)
|
||||
}).format(text),
|
||||
},
|
||||
{
|
||||
title: "Saldo di System",
|
||||
dataIndex: ["coa_undistribute", "amount"],
|
||||
key: ["coa_undistribute", "amount"],
|
||||
width: "20%",
|
||||
render: (text) => (
|
||||
render: (text) =>
|
||||
new Intl.NumberFormat("id-ID", {
|
||||
style: "currency",
|
||||
currency: "IDR",
|
||||
}).format(text)
|
||||
)
|
||||
}).format(text),
|
||||
},
|
||||
{
|
||||
title: "Status",
|
||||
|
|
@ -199,13 +218,14 @@ export const Membership = observer(() => {
|
|||
>
|
||||
Ganti Password
|
||||
</Button>
|
||||
{/* <Button
|
||||
<Button
|
||||
onClick={async () => {
|
||||
handleDelete(record.id);
|
||||
history.push(LINKS.DETAILUSER.replace(":id", record.id));
|
||||
//console.log(record.id)
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button> */}
|
||||
Detail
|
||||
</Button>
|
||||
</Space>
|
||||
),
|
||||
},
|
||||
|
|
@ -264,27 +284,27 @@ export const Membership = observer(() => {
|
|||
}
|
||||
};
|
||||
|
||||
const handleDelete = (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");
|
||||
},
|
||||
});
|
||||
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 (
|
||||
|
|
|
|||
148
src/pages/Product/DetailProduct.js
Normal file
148
src/pages/Product/DetailProduct.js
Normal file
|
|
@ -0,0 +1,148 @@
|
|||
import React, {useContext, useEffect} from "react";
|
||||
import {Button, Card, Col, Row, Table, Typography} 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} from "@ant-design/icons";
|
||||
import {format, parseISO} from "date-fns";
|
||||
import {ModalLoaderContext} from "../../utils/modal";
|
||||
|
||||
const {Title, Text} = Typography;
|
||||
|
||||
export const DetailProduct = observer(() => {
|
||||
const store = useStore();
|
||||
const modalLoader = useContext(ModalLoaderContext);
|
||||
|
||||
const routeData = [
|
||||
{
|
||||
route: LINKS.HOME,
|
||||
name: "Home",
|
||||
},
|
||||
{
|
||||
route: LINKS.DETAILPRODUCT,
|
||||
name: <span style={{fontWeight: 'bold'}}>Detail Product</span>,
|
||||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
modalLoader.setLoading(true);
|
||||
await Promise.allSettled([
|
||||
store.authentication.getProfile(),
|
||||
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 (
|
||||
<div className={["ppob-container"].join(" ")}>
|
||||
<BreadcumbComponent data={routeData}/>
|
||||
<Card>
|
||||
<Title strong>Detail Product</Title>
|
||||
<Row style={{marginBottom: 20}}>
|
||||
<Col lg={12} xs={24}>
|
||||
<Row>
|
||||
<Col span={12}>
|
||||
<Text strong>Kode</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text>{store.authentication.profileData?.userDetail?.name}</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text strong>Produk</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text>{store.authentication.profileData?.userDetail?.phone_number}</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text strong>Harga Beli</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text>{store.authentication.profileData?.username}</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text strong>Harga Jual</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text>{store.authentication.profileData.roles?.name}</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text strong>Status</Text>
|
||||
</Col>
|
||||
<Col span={12}>
|
||||
<Text>{store.authentication.profileData.superior?.username}</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
<Col lg={12} xs={24}>
|
||||
<Row justify={"center"}>
|
||||
<Col lg={24} xs={12}>
|
||||
<Title strong level={3} style={styleSaldoTitle}>Saldo</Title>
|
||||
</Col>
|
||||
<Col lg={24} xs={12}>
|
||||
<Text style={styleSaldoContent}>{store.authentication.profileData?.wallet}</Text>
|
||||
</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')
|
||||
}}>
|
||||
<FilterOutlined/>
|
||||
Filter
|
||||
</Button>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={store.transaction.dataHistoryTransaction}
|
||||
bordered
|
||||
/>
|
||||
</div>
|
||||
</Col>
|
||||
</Row>
|
||||
<div/>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
});
|
||||
|
|
@ -2,7 +2,9 @@ import {Redirect, Route, Switch} from "react-router-dom";
|
|||
import {Home} from "../pages/Home/Home";
|
||||
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 {Transaction} from "../pages/Transaction/Transaction";
|
||||
import {Profile} from "../pages/Profile/Profile";
|
||||
import {Commission} from "../pages/Config/Commission";
|
||||
|
|
@ -27,7 +29,8 @@ export const LINKS = {
|
|||
PAYBACK: "/app/payback",
|
||||
PAYBACKFROMUSER: "/app/payback-from-user",
|
||||
SUBCATEGORY: "/app/subcategory",
|
||||
|
||||
DETAILUSER: "/app/detail-user",
|
||||
DETAILPRODUCT: "/app/detail-product",
|
||||
};
|
||||
|
||||
export const AppRoute = () => {
|
||||
|
|
@ -35,6 +38,12 @@ export const AppRoute = () => {
|
|||
<Route path={LINKS.HOME}>
|
||||
<Home/>
|
||||
</Route>
|
||||
<Route path={LINKS.DETAILUSER}>
|
||||
<DetailUser/>
|
||||
</Route>
|
||||
<Route path={LINKS.DETAILPRODUCT}>
|
||||
<DetailProduct/>
|
||||
</Route>
|
||||
<Route path={LINKS.COMMISSION}>
|
||||
<Commission/>
|
||||
</Route>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user