feat: rewrite writing variable

src/component/ProductComponent.js

@@ -111,7 +111,7 @@ export const ProductComponent = observer((props) => {
       render: (text, record) => (
         <Button
           onClick={async () => {
-            history.push(LINKS.DETAILPRODUCT.replace(":id", record.id));
+            history.push(LINKS.PRODUCT_DETAIL.replace(":id", record.id));
             //console.log(record.id)
           }}
         >

src/pages/App/DesktopLayout.js

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

src/pages/App/MenuList.js

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

src/pages/Membership/DetailUser.js

@@ -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

@@ -212,7 +212,7 @@ export const Membership = observer(() => {
           <Button
             onClick={async () => {
                 await store.transaction.getDataHistoryTopUp(record.id)
-              history.push(LINKS.DETAILUSER.replace(":id", record.id));
+                history.push(LINKS.USER_DETAIL.replace(":id", record.id));
                 console.log(record.id);
             }}
           >

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>

src/routes/app.js

@@ -4,7 +4,7 @@ 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 {ProductDetail} from "../pages/Product/ProductDetail";
 import {Transaction} from "../pages/Transaction/Transaction";
 import {Profile} from "../pages/Profile/Profile";
 import {Commission} from "../pages/Config/Commission";
@@ -27,10 +27,10 @@ export const LINKS = {
     SUPPLIER: "/app/supplier",
     CATEGORY: "/app/category",
     PAYBACK: "/app/payback",
-    PAYBACKFROMUSER: "/app/payback-from-user",
+    PAYBACK_FROM_USER: "/app/payback-from-user",
     SUBCATEGORY: "/app/subcategory",
-    DETAILUSER: "/app/detail-user",
-    DETAILPRODUCT: "/app/detail-product",
+    USER_DETAIL: "/app/user-detail",
+    PRODUCT_DETAIL: "/app/product-detail",
 };
 
 export const AppRoute = () => {
@@ -38,16 +38,16 @@ export const AppRoute = () => {
         <Route path={LINKS.HOME}>
             <Home/>
         </Route>
-        <Route path={LINKS.DETAILUSER}>
+        <Route path={LINKS.USER_DETAIL}>
             <DetailUser/>
         </Route>
-        <Route path={LINKS.DETAILPRODUCT}>
-            <DetailProduct/>
+        <Route path={LINKS.PRODUCT_DETAIL}>
+            <ProductDetail/>
         </Route>
         <Route path={LINKS.COMMISSION}>
             <Commission/>
         </Route>
-        <Route path={LINKS.PAYBACKFROMUSER}>
+        <Route path={LINKS.PAYBACK_FROM_USER}>
             <PaybackFromUser/>
         </Route>
         <Route path={LINKS.CATEGORY}>