Page Category

src/pages/App/MenuList.js

@@ -10,6 +10,9 @@ import {
   MoneyCollectOutlined,
   ProjectOutlined,
   FileProtectOutlined,
+  FileAddOutlined,
+  FileSyncOutlined,
+  ProfileOutlined
 } from "@ant-design/icons";
 import { observer } from "mobx-react-lite";
 import { useStore } from "../../utils/useStore";
@@ -83,12 +86,30 @@ export const MenuList = observer((props) => {
         </SubMenu>
       )}
       {store.authentication.userData.role !== "Retail" && (
+        <SubMenu
+        key="product"
+        icon={<ProfileOutlined />}
+        title="Product"
+      >
         <Menu.Item key="product">
           <Link to={LINKS.PRODUCT}>
             <DatabaseOutlined />
             <span>Product</span>
           </Link>
         </Menu.Item>
+        <Menu.Item key="product">
+          <Link to={LINKS.CATEGORY}>
+          <FileAddOutlined />
+            <span>Category</span>
+          </Link>
+        </Menu.Item>
+        <Menu.Item key="product">
+          <Link to={LINKS.PRODUCT}>
+          <FileSyncOutlined />
+            <span>Sub Category</span>
+          </Link>
+        </Menu.Item>
+        </SubMenu>
       )}
       {store.authentication.userData.role === ("Retail" || "Admin") && (
         <Menu.Item key="transaction">

src/pages/Config/Supplier.js

@@ -1,91 +1,97 @@
-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 {SupplierComponent} from "../../component/SupplierComponent";
-import {LINKS} from "../../routes/app";
+import React, { useEffect, useState } from "react";
+import { Button, Card, Col, Input, Row, Tabs } from "antd";
+import { FilterOutlined, PlusSquareOutlined,DownloadOutlined } from "@ant-design/icons";
+import { BreadcumbComponent } from "../../component/BreadcumbComponent";
+import { useStore } from "../../utils/useStore";
+import { observer } from "mobx-react-lite";
+import { SupplierComponent } from "../../component/SupplierComponent";
+import { LINKS } from "../../routes/app";
 
-const {TabPane} = Tabs;
-const {Search} = Input;
+const { TabPane } = Tabs;
+const { Search } = Input;
 
 export const Supplier = observer(() => {
-    const [isLoading, setIsLoading] = useState(false);
-    const store = useStore();
+  const [isLoading, setIsLoading] = useState(false);
+  const store = useStore();
 
-    useEffect(() => {
-        const init = async () => {
-            try {
-                setIsLoading(true);
-                //await store.supplier.getDataCategories();
-                await store.supplier.getData();
-                setIsLoading(false);
-            } catch (e) {
-                setIsLoading(false);
-            }
-        };
+  useEffect(() => {
+    const init = async () => {
+      try {
+        setIsLoading(true);
+        //await store.supplier.getDataCategories();
+        await store.supplier.getData();
+        setIsLoading(false);
+      } catch (e) {
+        setIsLoading(false);
+      }
+    };
 
-        init();
-    }, []);
+    init();
+  }, []);
 
-    // const handleChangeTabPane = async (key) => {
-    //     store.product.filterCategory = key;
-    //     console.log(key);
-    // };
+  // const handleChangeTabPane = async (key) => {
+  //     store.product.filterCategory = key;
+  //     console.log(key);
+  // };
 
-    const routeData = [
-        {
-            route: LINKS.HOME,
-            name: "Home",
-        },
-        {
-            route: LINKS.SUPPLIER,
-            name: <span style={{fontWeight: 'bold'}}>Supplier</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,
-                              }}
-                            onSearch={value => console.log(value)}
-                        />
-                        <Button onClick={() =>  store.supplier.visibleModalSupplier = true}>
-                            <PlusSquareOutlined/> New
-                        </Button>
-                    </Col>
-                </Row>
-                <Tabs
-                    //onChange={handleChangeTabPane}
-                    size="default"
-                    tabBarGutter="50"
-                >
-                    
-                        <TabPane
-                            tab="Supplier"
-                            key="1"
-                        >
-                            <SupplierComponent/>
-                        </TabPane>
-                    ))
-                </Tabs>
-            </Card>
-        </div>
-    );
+  const routeData = [
+    {
+      route: LINKS.HOME,
+      name: "Home",
+    },
+    {
+      route: LINKS.SUPPLIER,
+      name: <span style={{ fontWeight: "bold" }}>Supplier</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,
+              }}
+              onSearch={(value) => console.log(value)}
+            />
+            <Button
+              //style={{ marginLeft: "10px" }}
+              onClick={() => (store.supplier.visibleModalSupplier = true)}
+            >
+              <PlusSquareOutlined /> New
+            </Button>
+          </Col>
+        </Row>
+        <Col span={24} style={{ textAlign: "right" }}>
+          <Button
+            onClick={() => (store.supplier.visibleModalTransaction = true)}
+          >
+           <DownloadOutlined /> Top Up Saldo
+          </Button>
+        </Col>
+        <Tabs
+          //onChange={handleChangeTabPane}
+          size="default"
+          tabBarGutter="50"
+        >
+          <TabPane tab="Supplier" key="1">
+            <SupplierComponent />
+          </TabPane>
+          ))
+        </Tabs>
+      </Card>
+    </div>
+  );
 });

src/pages/Membership/Membership.js

@@ -64,7 +64,7 @@ export const Membership = observer(() => {
       key: "status",
       render: (text, record) => (
         <Tag
-          color={record?.isActive === true ? "processing" : "#E3E8EE"}
+          color={record?.isActive === true ? "blue" : "#E3E8EE"}
           style={{ color: "#4F566B" }}
         >
           {record?.isActive === true ? " ACTIVE" : "INACTIVE"}

src/pages/Product/Category.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 { CategoryComponent } from "../../component/CategoryComponent";
+
+const { TabPane } = Tabs;
+const { Search } = Input;
+
+export const Category = observer(() => {
+  const [isLoading, setIsLoading] = useState(false);
+  const store = useStore();
+
+  useEffect(() => {
+    const init = async () => {
+      try {
+        setIsLoading(true);
+        //await store.product.getDataCategories();
+        await store.category.getData();
+        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.CATEGORY,
+      name: <span style={{ fontWeight: "bold" }}>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="Category" key="1">
+              <CategoryComponent/>
+            </TabPane>
+          ))}
+        </Tabs>
+      </Card>
+    </div>
+  );
+});

src/pages/Product/Product.js

@@ -1,90 +1,85 @@
-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 {ProductComponent} from "../../component/ProductComponent";
-import {LINKS} from "../../routes/app";
+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 { ProductComponent } from "../../component/ProductComponent";
+import { LINKS } from "../../routes/app";
 
-const {TabPane} = Tabs;
-const {Search} = Input;
+const { TabPane } = Tabs;
+const { Search } = Input;
 
 export const Product = observer(() => {
-    const [isLoading, setIsLoading] = useState(false);
-    const store = useStore();
+  const [isLoading, setIsLoading] = useState(false);
+  const store = useStore();
 
-    useEffect(() => {
-        const init = async () => {
-            try {
-                setIsLoading(true);
-                await store.product.getDataCategories();
-                await store.product.getData();
-                setIsLoading(false);
-            } catch (e) {
-                setIsLoading(false);
-            }
-        };
-
-        init();
-    }, []);
-
-    const handleChangeTabPane = async (key) => {
-        store.product.filterCategory = key;
-        console.log(key);
+  useEffect(() => {
+    const init = async () => {
+      try {
+        setIsLoading(true);
+        await store.product.getDataCategories();
+        await store.product.getData();
+        setIsLoading(false);
+      } catch (e) {
+        setIsLoading(false);
+      }
     };
 
-    const routeData = [
-        {
-            route: LINKS.HOME,
-            name: "Home",
-        },
-        {
-            route: LINKS.PRODUCT,
-            name: <span style={{fontWeight: 'bold'}}>Product</span>,
-        },
-    ];
+    init();
+  }, []);
 
-    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.product.visibleModalProduct = true}>
-                            <PlusSquareOutlined/> New
-                        </Button>
-                    </Col>
-                </Row>
-                <Tabs
-                    onChange={handleChangeTabPane}
-                    size="default"
-                    tabBarGutter="50"
-                >
-                    {store.product.dataCategories.map((item) => (
-                        <TabPane
-                            tab={item.name}
-                            key={item.id}
-                        >
-                            <ProductComponent/>
-                        </TabPane>
-                    ))}
-                </Tabs>
-            </Card>
-        </div>
-    );
+  const handleChangeTabPane = async (key) => {
+    store.product.filterCategory = key;
+    console.log(key);
+  };
+
+  const routeData = [
+    {
+      route: LINKS.HOME,
+      name: "Home",
+    },
+    {
+      route: LINKS.PRODUCT,
+      name: <span style={{ fontWeight: "bold" }}>Product</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.product.visibleModalProduct = true)}>
+              <PlusSquareOutlined /> New
+            </Button>
+          </Col>
+        </Row>
+
+        <Tabs onChange={handleChangeTabPane} size="default" tabBarGutter="50">
+          {store.product.dataCategories.map((item) => (
+            <TabPane tab={item.name} key={item.id}>
+              {/* <ProductComponent category={item.name} /> */}
+              <ProductComponent />
+            </TabPane>
+          ))}
+        </Tabs>
+      </Card>
+    </div>
+  );
 });