From 119fa6d0bd2b363892613b6b9794bc50bb85ddec Mon Sep 17 00:00:00 2001 From: caturbgs Date: Wed, 22 Dec 2021 16:57:42 +0700 Subject: [PATCH] style: adjust number to currency format --- src/component/CommissionComponent.js | 6 ++--- src/component/ProductComponent.js | 10 +++++++ ...Subcategory.js => SubcategoryComponent.js} | 27 +++++-------------- src/pages/Payback/Payback.js | 11 +++++--- src/pages/Payback/PaybackFromUser.js | 5 ++++ src/pages/Product/Subcategory.js | 6 ++--- src/pages/Profile/Profile.js | 5 ++++ 7 files changed, 41 insertions(+), 29 deletions(-) rename src/component/{Subcategory.js => SubcategoryComponent.js} (94%) diff --git a/src/component/CommissionComponent.js b/src/component/CommissionComponent.js index ae730ca..f6bbdfc 100644 --- a/src/component/CommissionComponent.js +++ b/src/component/CommissionComponent.js @@ -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) => {text}%, }, { title: "Action", diff --git a/src/component/ProductComponent.js b/src/component/ProductComponent.js index c10741a..fcd3c2f 100644 --- a/src/component/ProductComponent.js +++ b/src/component/ProductComponent.js @@ -48,11 +48,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", diff --git a/src/component/Subcategory.js b/src/component/SubcategoryComponent.js similarity index 94% rename from src/component/Subcategory.js rename to src/component/SubcategoryComponent.js index f3f442b..0b01a76 100644 --- a/src/component/Subcategory.js +++ b/src/component/SubcategoryComponent.js @@ -1,30 +1,17 @@ -import React, { useContext, useState,useEffect } from "react"; -import { - Button, - Form, - Input, - message, - Modal, - Select, - Space, - Table, - List, - Tag, - Divider, -} from "antd"; -import { observer } from "mobx-react-lite"; -import { useHistory } from "react-router-dom"; -import { useStore } from "../utils/useStore"; -import { ModalLoaderContext } from "../utils/modal"; +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 {useStore} from "../utils/useStore"; +import {ModalLoaderContext} from "../utils/modal"; export const SubcategoryComponent = observer((props) => { const store = useStore(); const [form] = Form.useForm(); - const { Option } = Select; + const {Option} = Select; const [idData, setIdData] = useState(""); const modalLoader = useContext(ModalLoaderContext); useEffect(() => { - + getData() }, []) const getData = async () => { diff --git a/src/pages/Payback/Payback.js b/src/pages/Payback/Payback.js index 521f9e0..a4036b9 100644 --- a/src/pages/Payback/Payback.js +++ b/src/pages/Payback/Payback.js @@ -48,9 +48,14 @@ export const Payback = observer(() => { ), }, { - title: "Amount", - dataIndex: "amount", - key: "amount", + title: "Amount", + dataIndex: "amount", + key: "amount", + render: (text) => + new Intl.NumberFormat("id-ID", { + style: "currency", + currency: "IDR", + }).format(text), }, { title: "Action", diff --git a/src/pages/Payback/PaybackFromUser.js b/src/pages/Payback/PaybackFromUser.js index 6db5368..680b064 100644 --- a/src/pages/Payback/PaybackFromUser.js +++ b/src/pages/Payback/PaybackFromUser.js @@ -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), }, ]; diff --git a/src/pages/Product/Subcategory.js b/src/pages/Product/Subcategory.js index 402ab7f..0ffa767 100644 --- a/src/pages/Product/Subcategory.js +++ b/src/pages/Product/Subcategory.js @@ -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; diff --git a/src/pages/Profile/Profile.js b/src/pages/Profile/Profile.js index 1096b36..f6ec408 100644 --- a/src/pages/Profile/Profile.js +++ b/src/pages/Profile/Profile.js @@ -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',