154 lines
4.4 KiB
JavaScript
154 lines
4.4 KiB
JavaScript
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 Profile = observer(() => {
|
|
const store = useStore();
|
|
const modalLoader = useContext(ModalLoaderContext);
|
|
|
|
const routeData = [
|
|
{
|
|
route: LINKS.HOME,
|
|
name: "Home",
|
|
},
|
|
{
|
|
route: LINKS.PROFILE,
|
|
name: <span style={{fontWeight: 'bold'}}>Profile</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%',
|
|
render: (text) =>
|
|
new Intl.NumberFormat("id-ID", {
|
|
style: "currency",
|
|
currency: "IDR",
|
|
}).format(text),
|
|
},
|
|
{
|
|
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>Profile</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>Phone Number</Text>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Text>{store.authentication.profileData?.userDetail?.phone_number}</Text>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Text strong>Username</Text>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Text>{store.authentication.profileData?.username}</Text>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Text strong>Role</Text>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Text>{store.authentication.profileData.roles?.name}</Text>
|
|
</Col>
|
|
<Col span={12}>
|
|
<Text strong>Superior</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>
|
|
)
|
|
});
|