subcategory page

src/pages/App/MenuList.js

@@ -4,14 +4,14 @@ import {Link} from "react-router-dom";
 import {
   AppstoreOutlined,
   DatabaseOutlined,
+  FileAddOutlined,
   FileProtectOutlined,
+  FileSyncOutlined,
   HomeOutlined,
   MenuUnfoldOutlined,
   MoneyCollectOutlined,
-  ProjectOutlined,
-  FileAddOutlined,
-  FileSyncOutlined,
   ProfileOutlined,
+  ProjectOutlined,
   UserOutlined,
 } from "@ant-design/icons";
 import {observer} from "mobx-react-lite";
@@ -98,28 +98,29 @@ export const MenuList = observer((props) => {
             <span>Product</span>
           </Link>
         </Menu.Item>
-        <Menu.Item key="product">
+        <Menu.Item key="category">
           <Link to={LINKS.CATEGORY}>
           <FileAddOutlined />
             <span>Category</span>
           </Link>
         </Menu.Item>
-        <Menu.Item key="product">
-          <Link to={LINKS.PRODUCT}>
+        <Menu.Item key="sub-category">
+          <Link to={LINKS.SUBCATEGORY}>
           <FileSyncOutlined />
             <span>Sub Category</span>
           </Link>
         </Menu.Item>
         </SubMenu>
       )}
-      {store.authentication.userData.role === ("Retail" || "Admin") && (
-        <Menu.Item key="transaction">
-          <Link to={LINKS.TRANSACTION}>
-            <HomeOutlined />
-            <span>Transaction</span>
-            </Link>
-            </Menu.Item>)}
-          {store.authentication.userData.role !== "Retail" && (
+        {store.authentication.userData.role === ("Retail" || "Admin") && (
+            <Menu.Item key="transaction">
+              <Link to={LINKS.TRANSACTION}>
+                <HomeOutlined/>
+                <span>Transaction</span>
+              </Link>
+            </Menu.Item>
+        )}
+        {store.authentication.userData.role !== "Retail" && (
             <Menu.Item key="product">
               <Link to={LINKS.PRODUCT}>
                 <DatabaseOutlined/>
@@ -144,16 +145,16 @@ export const MenuList = observer((props) => {
         <Menu.Item key="profile">
           <Link to={LINKS.PROFILE}>
           <UserOutlined />
-          <span>Profile</span>
-        </Link>
-      </Menu.Item>
-      {/*<Menu.Item key="about">*/}
-      {/*	<Link to={'/app/about'}>*/}
-      {/*		<CalendarOutlined/>*/}
-      {/*		<span>About</span>*/}
-      {/*	</Link>*/}
-      {/*</Menu.Item>*/}
-      <Menu.Divider style={{ background: "transparent", paddingTop: 15 }} />
-    
+            <span>Profile</span>
+          </Link>
+        </Menu.Item>
+        {/*<Menu.Item key="about">*/}
+        {/*	<Link to={'/app/about'}>*/}
+        {/*		<CalendarOutlined/>*/}
+        {/*		<span>About</span>*/}
+        {/*	</Link>*/}
+        {/*</Menu.Item>*/}
+        <Menu.Divider style={{background: "transparent", paddingTop: 15}}/>
+      </Menu>
   );
 });

src/pages/Product/Category.js

@@ -75,7 +75,7 @@ export const Category = observer(() => {
             <TabPane tab="Category" key="1">
               <CategoryComponent/>
             </TabPane>
-          ))}
+          ))
         </Tabs>
       </Card>
     </div>

src/pages/Product/Subcategory.js

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from "react";
+import { Button, Card, Col, Input, Row, Tabs } from "antd";
+import { FilterOutlined, 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";
+
+const { TabPane } = Tabs;
+const { Search } = Input;
+
+export const Subcategory = observer(() => {
+  const [isLoading, setIsLoading] = useState(false);
+  const store = useStore();
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        setIsLoading(true);
+        //await store.product.getDataCategories();
+        await store.subcategory.getDataSubCategories();
+        setIsLoading(false);
+      } catch (e) {
+        setIsLoading(false);
+      }
+    };
+
+    init();
+  }, []);
+
+  const handleChangeTabPane = async (key) => {
+    store.product.filterCategory = key;
+    console.log(key);
+  };
+
+  const routeData = [
+    {
+      route: LINKS.HOME,
+      name: "Home",
+    },
+    {
+      route: LINKS.SUBCATEGORY,
+      name: <span style={{ fontWeight: "bold" }}>Sub Category</span>,
+    },
+  ];
+
+  return (
+    <div className={["ppob-container"].join(" ")}>
+      <BreadcumbComponent data={routeData} />
+      <Card>
+        <Row style={{ marginBottom: 20 }}>
+          <Col span={12}>
+            <Button>
+              <FilterOutlined />
+              Filter
+            </Button>
+          </Col>
+          <Col span={12} style={{ textAlign: "right" }}>
+            <Search
+              placeholder="input search text"
+              style={{
+                width: store.ui.mediaQuery.isMobile ? 160 : 200,
+                marginRight: store.ui.mediaQuery.isMobile ? 0 : 10,
+                marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
+              }}
+            />
+            <Button onClick={() => (store.category.visibleModalCategory = true)}>
+              <PlusSquareOutlined /> New
+            </Button>
+          </Col>
+        </Row>
+
+        <Tabs onChange={handleChangeTabPane} size="default" tabBarGutter="50">
+            <TabPane tab="Sub-Category" key="1">
+              <SubcategoryComponent/>
+            </TabPane>
+          ))
+        </Tabs>
+      </Card>
+    </div>
+  );
+});