feat: rewrite writing variable

src/pages/App/DesktopLayout.js

@@ -220,9 +220,9 @@ export const DesktopLayout = observer(() => {
                 )}
                 {store.authentication.userData.role !== "Admin" && (
                 <Menu.Item key="payback-from-user">
-                  <Link to={LINKS.PAYBACKFROMUSER}>
-                    <AlipayOutlined />
-                    <span>Payback</span>
+                  <Link to={LINKS.PAYBACK_FROM_USER}>
+                      <AlipayOutlined/>
+                      <span>Payback</span>
                   </Link>
                 </Menu.Item>
                 )}

src/pages/App/MenuList.js

@@ -1,35 +1,36 @@
-import React, { useEffect, useState } from "react";
-import { Menu } from "antd";
-import { Link } from "react-router-dom";
+import React, {useEffect, useState} from "react";
+import {Menu} from "antd";
+import {Link} from "react-router-dom";
 import {
-  AppstoreOutlined,
-  DatabaseOutlined,
-  FileAddOutlined,
-  FileProtectOutlined,
-  FileSyncOutlined,
-  HomeOutlined,
-  MenuUnfoldOutlined,
-  MoneyCollectOutlined,
-  ProfileOutlined,
-  ProjectOutlined,
-  ShoppingCartOutlined,
-  UserOutlined,
-  AlipayOutlined,
-  PayCircleOutlined,
+    AlipayOutlined,
+    AppstoreOutlined,
+    DatabaseOutlined,
+    FileAddOutlined,
+    FileProtectOutlined,
+    FileSyncOutlined,
+    HomeOutlined,
+    MenuUnfoldOutlined,
+    MoneyCollectOutlined,
+    PayCircleOutlined,
+    ProfileOutlined,
+    ProjectOutlined,
+    ShoppingCartOutlined,
+    UserOutlined,
 } from "@ant-design/icons";
-import { observer } from "mobx-react-lite";
-import { useStore } from "../../utils/useStore";
-import { LINKS } from "../../routes/app";
+import {observer} from "mobx-react-lite";
+import {useStore} from "../../utils/useStore";
+import {LINKS} from "../../routes/app";
 
-const { SubMenu } = Menu;
+const {SubMenu} = Menu;
 
 export const MenuList = observer((props) => {
-  const store = useStore();
-  useEffect(() => {}, []);
+    const store = useStore();
+    useEffect(() => {
+    }, []);
 
-  const [setKeys, setSetKeys] = useState(["dashboard"]);
+    const [setKeys, setSetKeys] = useState(["dashboard"]);
 
-  return (
+    return (
     <Menu
       defaultOpenKeys={["sub4"]}
       theme="light"
@@ -137,10 +138,10 @@ export const MenuList = observer((props) => {
         )}
         {store.authentication.userData.role !== "Admin" && (
           <Menu.Item key="payback-from-user">
-            <Link to={LINKS.PAYBACKFROMUSER}>
-              <AlipayOutlined />
-              <span>Payback</span>
-            </Link>
+              <Link to={LINKS.PAYBACK_FROM_USER}>
+                  <AlipayOutlined/>
+                  <span>Payback</span>
+              </Link>
           </Menu.Item>
         )}
       </SubMenu>

src/pages/Membership/DetailUser.js

@@ -7,7 +7,7 @@ import {observer} from "mobx-react-lite";
 import {FilterOutlined} from "@ant-design/icons";
 import {format, parseISO} from "date-fns";
 import {ModalLoaderContext} from "../../utils/modal";
-import { useParams } from "react-router-dom";     
+import {useParams} from "react-router-dom";
 
 const {Title, Text} = Typography;
 
@@ -22,7 +22,7 @@ export const DetailUser = observer(() => {
       name: "Home",
     },
     {
-      route: LINKS.DETAILUSER,
+      route: LINKS.USER_DETAIL,
       name: <span style={{fontWeight: 'bold'}}>Detail User</span>,
     },
   ];

src/pages/Membership/Membership.js

@@ -1,20 +1,20 @@
 import React, {useContext, useEffect, useState} from "react";
 import {
-  Button,
-  Card,
-  Col,
-  Divider,
-  Form,
-  Input,
-  InputNumber,
-  List,
-  message,
-  Modal,
-  Row,
-  Select,
-  Space,
-  Table,
-  Tag,
+    Button,
+    Card,
+    Col,
+    Divider,
+    Form,
+    Input,
+    InputNumber,
+    List,
+    message,
+    Modal,
+    Row,
+    Select,
+    Space,
+    Table,
+    Tag,
 } from "antd";
 import {useStore} from "../../utils/useStore";
 import {observer} from "mobx-react-lite";
@@ -211,9 +211,9 @@ export const Membership = observer(() => {
           </Button>
           <Button
             onClick={async () => {
-              await store.transaction.getDataHistoryTopUp(record.id)
-              history.push(LINKS.DETAILUSER.replace(":id", record.id));
-              console.log(record.id);
+                await store.transaction.getDataHistoryTopUp(record.id)
+                history.push(LINKS.USER_DETAIL.replace(":id", record.id));
+                console.log(record.id);
             }}
           >
             Detail

src/pages/Payback/PaybackFromUser.js

@@ -70,7 +70,7 @@ export const PaybackFromUser = observer(() => {
       name: "Home",
     },
     {
-      route: LINKS.PAYBACKFROMUSER,
+      route: LINKS.PAYBACK_FROM_USER,
       name: <span style={{fontWeight: "bold"}}>Payback User</span>,
     },
   ];

src/pages/Product/ProductDetail.js

@@ -10,7 +10,7 @@ import {ModalLoaderContext} from "../../utils/modal";
 
 const {Title, Text} = Typography;
 
-export const DetailProduct = observer(() => {
+export const ProductDetail = observer(() => {
   const store = useStore();
   const modalLoader = useContext(ModalLoaderContext);
 
@@ -20,8 +20,12 @@ export const DetailProduct = observer(() => {
       name: "Home",
     },
     {
-      route: LINKS.DETAILPRODUCT,
-      name: <span style={{fontWeight: 'bold'}}>Detail Product</span>,
+      route: LINKS.PRODUCT,
+      name: <span style={{fontWeight: "bold"}}>Product</span>,
+    },
+    {
+      route: LINKS.PRODUCT_DETAIL,
+      name: <span style={{fontWeight: 'bold'}}>Product Detail</span>,
     },
   ];
 
@@ -75,7 +79,7 @@ export const DetailProduct = observer(() => {
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData}/>
       <Card>
-        <Title strong>Detail Product</Title>
+        <Title strong>Product Detail</Title>
         <Row style={{marginBottom: 20}}>
           <Col lg={12} xs={24}>
             <Row>