style: adjust number to currency format

src/component/CommissionComponent.js

@@ -1,9 +1,8 @@
-import React, {useContext, useEffect, useState} from "react";
+import React, {useContext, useState} from "react";
-import {Button, Form, Input, message, Modal, Select, Space, Table,} from "antd";
+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",

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",

src/component/SubcategoryComponent.js

@@ -1,19 +1,6 @@
-import React, { useContext, useState,useEffect } from "react";
+import React, {useContext, useEffect, useState} from "react";
-import {
+import {Button, Divider, Form, Input, List, message, Modal, Select, Space, Table,} from "antd";
-  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";
 

src/pages/Payback/Payback.js

@@ -51,6 +51,11 @@ export const Payback = observer(() => {
         title: "Amount",
         dataIndex: "amount",
         key: "amount",
+        render: (text) =>
+            new Intl.NumberFormat("id-ID", {
+                style: "currency",
+                currency: "IDR",
+            }).format(text),
     },
     {
       title: "Action",

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),
     },
   ];
 

src/pages/Product/Subcategory.js

@@ -1,11 +1,11 @@
-import React, {useContext, useEffect, useState} from "react";
+import React, {useContext, useEffect} from "react";
-import {Button, Card, Col, Input, Row,message} from "antd";
+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;

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',