Menu Supplier

src/component/Subcategory.js

@@ -22,6 +22,7 @@ export const SubcategoryComponent = observer((props) => {
                 setIsLoading(true);
                 //store.product.pageCategories=StrToLower(props.category)
                 await store.subcategory.getData();
+                await store.category.getData();
                 setIsLoading(false);
             } catch (e) {
                 setIsLoading(false);
@@ -35,8 +36,9 @@ export const SubcategoryComponent = observer((props) => {
         console.log(data, "isi data")
         form.setFieldsValue({
             name: data.name,
+            categoryId: data.categoryId,
         });
-        store.category.visibleModalCategory = true;
+        store.subcategory.visibleModalSubcategory = true;
         setIdData(data.id);
     }
 
@@ -46,32 +48,6 @@ export const SubcategoryComponent = observer((props) => {
             dataIndex: "name",
             key: "name",
         },
-        // {
-        //     title: "Gangguan",
-        //     dataIndex: "status",
-        //     key: "status",
-        //     render: (text, record) => (
-        //         <Tag
-        //             color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
-        //             style={{color: "#4F566B"}}
-        //         >
-        //             {capitalize(record?.status)}
-        //         </Tag>
-        //     ),
-        // },
-        // {
-        //     title: "Tersedia",
-        //     dataIndex: "tersedia",
-        //     key: "tersedia",
-        //     render: (text, record) => (
-        //         <Tag
-        //             color={record?.status === "ACTIVE" ? "blue" : "#E3E8EE"}
-        //             style={{color: "#4F566B"}}
-        //         >
-        //             {record?.status === "ACTIVE" ? " Ya" : "Tidak"}
-        //         </Tag>
-        //     ),
-        // },
         {
             title: "Action",
             key: "action",
@@ -120,7 +96,7 @@ export const SubcategoryComponent = observer((props) => {
 
     const handleCancel = () => {
         setIdData('')
-        store.category.visibleModalCategory = false;
+        store.subcategory.visibleModalSubcategory = false;
     }
 
     const handleSubmit = async (data) => {
@@ -128,31 +104,31 @@ export const SubcategoryComponent = observer((props) => {
         if (idData !== '') {
             setConfirmLoading(true);
             try {
-                await store.category.update(idData, data)
+                await store.subcategory.update(idData, data)
                 message.success("Success Update Data Category")
             } catch (e) {
                 message.error("Failed Update Data Category")
             }
             setConfirmLoading(false);
-            store.category.visibleModalCategory = false;
+            store.subcategory.visibleModalSubcategory = false;
             setIdData('');
             form.resetFields();
         } else {
             setConfirmLoading(true);
             try {
-                await store.category.create(data)
+                await store.subcategory.create(data)
                 message.success("Success Add New Category")
             } catch (e) {
                 console.log(e, "apa errornya")
                 message.error("Failed Add Category")
             }
             setConfirmLoading(false);
-            store.category.visibleModalCategory = false;
+            store.subcategory.visibleModalSubcategory = false;
             setIdData('');
             form.resetFields();
         }
     }
-
+    //console.log()
     return (
         <div>
             <Table
@@ -178,8 +154,8 @@ export const SubcategoryComponent = observer((props) => {
             />
 
             <Modal
-                visible={store.category.visibleModalCategory}
+                visible={store.subcategory.visibleModalSubcategory}
-                title={idData ? "Edit Category" : "Create a new Category"}
+                title={idData ? "Edit Sub Category" : "Create a new sub category"}
                 okText={idData ? "Edit" : "Create"}
                 cancelText="Cancel"
                 onCancel={() => {
@@ -210,6 +186,19 @@ export const SubcategoryComponent = observer((props) => {
                     >
                         <Input/>
                     </Form.Item>
+                    <Form.Item
+                        name="categoryId"
+                        label="Categories"
+                        rules={[{required: true, message: "Please input category id!"}]}
+                    >
+                        <Select placeholder="Select Category" allowClear>
+                            {store.category.data.map((item) => (
+                                <Option value={item.id} key={item.id}>
+                                    {item.name}
+                                </Option>
+                            ))}
+                        </Select>
+                    </Form.Item>
                 </Form>
             </Modal>
         </div>

src/component/SupplierComponent.js

@@ -20,6 +20,7 @@ import { LINKS } from "../routes/app";
 export const SupplierComponent = observer((props) => {
   const store = useStore();
   const [form] = Form.useForm();
+  //const [formEdit] = Form.useForm();
   const { Option } = Select;
   const history = useHistory();
   const [idData, setIdData] = useState("");
@@ -45,16 +46,16 @@ export const SupplierComponent = observer((props) => {
     form.setFieldsValue({
       name: data.name,
       code: data.code,
-      status:data.status
+      status: data.status,
     });
     store.supplier.visibleModalSupplier = true;
     setIdData(data.id);
   };
 
   const changeStatus = (id, isActive) => {
-    const status = isActive ? "inactive" : "active"
+    const status = isActive ? "inactive" : "active";
-    store.supplier.changeStatus(id, status)
+    store.supplier.changeStatus(id, status);
-  }
+  };
 
   const columns = [
     {
@@ -74,7 +75,7 @@ export const SupplierComponent = observer((props) => {
       render: (text, record) => (
         <Tag
           color={record?.status === true ? "processing" : "#E3E8EE"}
-          style={{ color: "#4F566B", cursor: 'pointer' }}
+          style={{ color: "#4F566B", cursor: "pointer" }}
           onClick={() => changeStatus(record?.id, record?.status)}
         >
           {record?.status === true ? " ACTIVE" : "INACTIVE"}
@@ -125,9 +126,6 @@ export const SupplierComponent = observer((props) => {
     setIdData("");
     store.supplier.visibleModalSupplier = false;
   };
-  const handleCancelTransaction= () => {
-    store.supplier.visibleModalTransaction = false;
-  };
 
   const handleSubmit = async (data) => {
     console.log(data, "isi data2");
@@ -136,6 +134,7 @@ export const SupplierComponent = observer((props) => {
       try {
         await store.supplier.update(idData, data);
         message.success("Success Update Data Member");
+        await store.supplier.getData();
       } catch (e) {
         message.error("Failed Update Data Member");
       }
@@ -160,24 +159,6 @@ export const SupplierComponent = observer((props) => {
     }
   };
 
-  const handleSubmitTransaction = async (data) => {
-    console.log(data, "isi data2");
-      setConfirmLoading(true);
-      try {
-        await store.supplier.createTransaction(data);
-        message.success("Success Top Up");
-        //await store.supplier.getData()
-      } catch (e) {
-        console.log(e, "apa errornya");
-        message.error("Failed Top Up");
-      }
-      setConfirmLoading(false);
-      store.supplier.visibleModalTransaction = false;
-      form.resetFields();
-  };  
-
-  
-
   return (
     <div>
       <Table
@@ -241,45 +222,6 @@ export const SupplierComponent = observer((props) => {
           </Form.Item>
         </Form>
       </Modal>
-      <Modal
-        visible={store.supplier.visibleModalTransaction}
-        title="Top Up Saldo"
-        okText="Top Up"
-        cancelText="Cancel"
-        onCancel={() => {
-          form.resetFields();
-          handleCancelTransaction();
-        }}
-        onOk={() => {
-          form
-            .validateFields()
-            .then((values) => {
-              console.log(values, "isi form");
-              handleSubmitTransaction(values);
-              form.resetFields();
-            })
-            .catch((info) => {
-              console.error("Validate Failed:", info);
-            });
-        }}
-      >
-        <Form form={form} layout="vertical">
-          <Form.Item
-            name="supplier"
-            label="Supplier"
-            rules={[{ required: true, message: "Please input supplier!" }]}
-          >
-            <Input />
-          </Form.Item>
-          <Form.Item
-            name="amount"
-            label="Amount"
-            rules={[{ required: true, message: "Please input amount!" }]}
-          >
-            <Input />
-          </Form.Item>
-        </Form>
-      </Modal>
     </div>
   );
 });

src/pages/App/DesktopLayout.js

@@ -1,20 +1,28 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
-import {Button, Drawer, Layout, Menu, Popover, Typography} from "antd";
+import { Button, Drawer, Layout, Menu, Popover, Typography } from "antd";
-import {MenuList} from "./MenuList";
+import { MenuList } from "./MenuList";
-import {Link, useHistory} from "react-router-dom";
+import { Link, useHistory } from "react-router-dom";
-import {HomeOutlined, MenuOutlined, UserOutlined} from "@ant-design/icons";
+import {
-import {AppRoute, LINKS} from "../../routes/app";
+  HomeOutlined,
-import {useStore} from "../../utils/useStore";
+  MenuOutlined,
-import {observer} from "mobx-react-lite";
+  UserOutlined,
-import {useMediaQuery} from "react-responsive";
+  ProfileOutlined,
+  DatabaseOutlined,
+  FileAddOutlined,
+  FileSyncOutlined,
+} from "@ant-design/icons";
+import { AppRoute, LINKS } from "../../routes/app";
+import { useStore } from "../../utils/useStore";
+import { observer } from "mobx-react-lite";
+import { useMediaQuery } from "react-responsive";
 
-const {Text, Paragraph} = Typography;
+const { Text, Paragraph } = Typography;
-const {Header, Content, Sider} = Layout;
+const { Header, Content, Sider } = Layout;
-const {SubMenu} = Menu;
+const { SubMenu } = Menu;
 
 export const DesktopLayout = observer(() => {
   let history = useHistory();
-    const xl = useMediaQuery({minWidth: 1024});
+  const xl = useMediaQuery({ minWidth: 1024 });
   const store = useStore();
   const [clicked, setClicked] = useState(false);
 
@@ -140,42 +148,68 @@ export const DesktopLayout = observer(() => {
                   </Menu.Item>
                   <Menu.Item key="supplier">
                     <Link to={LINKS.SUPPLIER}>
-                            <HomeOutlined/>
+                      <HomeOutlined />
                       <span>Supplier</span>
                     </Link>
                   </Menu.Item>
                 </SubMenu>
               )}
+              {store.authentication.userData.role !== "Retail" && (
+                <SubMenu
+                  key="product-main"
+                  icon={<ProfileOutlined />}
+                  title="Product"
+                >
+                  <Menu.Item key="product">
+                    <Link to={LINKS.PRODUCT}>
+                      <DatabaseOutlined />
+                      <span>Product</span>
+                    </Link>
+                  </Menu.Item>
+                  <Menu.Item key="category">
+                    <Link to={LINKS.CATEGORY}>
+                      <FileAddOutlined />
+                      <span>Category</span>
+                    </Link>
+                  </Menu.Item>
+                  <Menu.Item key="sub-category">
+                    <Link to={LINKS.SUBCATEGORY}>
+                      <FileSyncOutlined />
+                      <span>Sub Category</span>
+                    </Link>
+                  </Menu.Item>
+                </SubMenu>
+              )}
               {store.authentication.userData.role !== "Retail" && (
                 <Menu.Item key="product">
                   <Link to={LINKS.PRODUCT}>
-                            <HomeOutlined/>
+                    <HomeOutlined />
                     <span>Product</span>
                   </Link>
                 </Menu.Item>
               )}
               <Menu.Item key="payback">
                 <Link to={LINKS.PAYBACK}>
-                        <HomeOutlined/>
+                  <HomeOutlined />
                   <span>Payback</span>
                 </Link>
               </Menu.Item>
               {store.authentication.userData.role === "Retail" && (
                 <Menu.Item key="transaction">
                   <Link to={LINKS.TRANSACTION}>
-                            <HomeOutlined/>
+                    <HomeOutlined />
                     <span>Transaction</span>
                   </Link>
                 </Menu.Item>
               )}
               <Menu.Item key="profile">
                 <Link to={LINKS.PROFILE}>
-                        <UserOutlined/>
+                  <UserOutlined />
                   <span>Profile</span>
                 </Link>
               </Menu.Item>
               <Menu.Divider
-                    style={{background: "transparent", paddingTop: 15}}
+                style={{ background: "transparent", paddingTop: 15 }}
               />
             </Menu>
           </div>

src/pages/App/MenuList.js

@@ -1,6 +1,6 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
-import {Menu} from "antd";
+import { Menu } from "antd";
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
 import {
   AppstoreOutlined,
   DatabaseOutlined,
@@ -14,16 +14,15 @@ import {
   ProjectOutlined,
   UserOutlined,
 } from "@ant-design/icons";
-import {observer} from "mobx-react-lite";
+import { observer } from "mobx-react-lite";
-import {useStore} from "../../utils/useStore";
+import { useStore } from "../../utils/useStore";
-import {LINKS} from "../../routes/app";
+import { LINKS } from "../../routes/app";
 
-const {SubMenu} = Menu;
+const { SubMenu } = Menu;
 
 export const MenuList = observer((props) => {
   const store = useStore();
-  useEffect(() => {
+  useEffect(() => {}, []);
-  }, []);
 
   const [setKeys, setSetKeys] = useState(["dashboard"]);
 
@@ -61,11 +60,7 @@ export const MenuList = observer((props) => {
         </Menu.Item>
       )}
       {store.authentication.userData.role !== "Retail" && (
-        <SubMenu
+        <SubMenu key="config" icon={<MenuUnfoldOutlined />} title="Config">
-          key="config"
-          icon={<MenuUnfoldOutlined />}
-          title="Config"
-        >
           <Menu.Item key="partner">
             <Link to={LINKS.PARTNER}>
               <ProjectOutlined />
@@ -87,11 +82,7 @@ export const MenuList = observer((props) => {
         </SubMenu>
       )}
       {store.authentication.userData.role !== "Retail" && (
-        <SubMenu
+        <SubMenu key="product-main" icon={<ProfileOutlined />} title="Product">
-        key="product-main"
-        icon={<ProfileOutlined />}
-        title="Product"
-      >
           <Menu.Item key="product">
             <Link to={LINKS.PRODUCT}>
               <DatabaseOutlined />
@@ -115,7 +106,7 @@ export const MenuList = observer((props) => {
       {store.authentication.userData.role === ("Retail" || "Admin") && (
         <Menu.Item key="transaction">
           <Link to={LINKS.TRANSACTION}>
-                <HomeOutlined/>
+            <HomeOutlined />
             <span>Transaction</span>
           </Link>
         </Menu.Item>
@@ -123,21 +114,21 @@ export const MenuList = observer((props) => {
       {store.authentication.userData.role !== "Retail" && (
         <Menu.Item key="retail">
           <Link to={LINKS.PRODUCT}>
-                <DatabaseOutlined/>
+            <DatabaseOutlined />
             <span>Product</span>
           </Link>
         </Menu.Item>
       )}
       <Menu.Item key="payback">
         <Link to={LINKS.PAYBACK}>
-            <DatabaseOutlined/>
+          <DatabaseOutlined />
           <span>Payback</span>
         </Link>
       </Menu.Item>
       {store.authentication.userData.role === ("Retail" || "Admin") && (
         <Menu.Item key="transaction">
           <Link to={LINKS.TRANSACTION}>
-                <HomeOutlined/>
+            <HomeOutlined />
             <span>Transaction</span>
           </Link>
         </Menu.Item>
@@ -154,7 +145,7 @@ export const MenuList = observer((props) => {
       {/*		<span>About</span>*/}
       {/*	</Link>*/}
       {/*</Menu.Item>*/}
-        <Menu.Divider style={{background: "transparent", paddingTop: 15}}/>
+      <Menu.Divider style={{ background: "transparent", paddingTop: 15 }} />
     </Menu>
   );
 });

src/pages/Config/Supplier.js

@@ -1,6 +1,21 @@
 import React, { useEffect, useState } from "react";
-import { Button, Card, Col, Input, Row, Tabs } from "antd";
+import {
-import { FilterOutlined, PlusSquareOutlined,DownloadOutlined } from "@ant-design/icons";
+  Button,
+  Card,
+  Col,
+  Input,
+  Row,
+  Tabs,
+  Form,
+  message,
+  Modal,
+  Select,
+} 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";
@@ -9,9 +24,12 @@ import { LINKS } from "../../routes/app";
 
 const { TabPane } = Tabs;
 const { Search } = Input;
+const { Option } = Select;
 
 export const Supplier = observer(() => {
   const [isLoading, setIsLoading] = useState(false);
+  const [confirmLoading, setConfirmLoading] = useState(false);
+  const [form] = Form.useForm();
   const store = useStore();
 
   useEffect(() => {
@@ -33,7 +51,24 @@ export const Supplier = observer(() => {
   //     store.product.filterCategory = key;
   //     console.log(key);
   // };
-
+  const handleCancelTransaction = () => {
+    store.supplier.visibleModalTransaction = false;
+  };
+  const handleSubmitTransaction = async (data) => {
+    console.log(data, "isi data2");
+    setConfirmLoading(true);
+    try {
+      await store.supplier.createTransaction(data);
+      message.success("Success Top Up");
+      //await store.supplier.getData()
+    } catch (e) {
+      console.log(e, "apa errornya");
+      message.error("Failed Top Up");
+    }
+    setConfirmLoading(false);
+    store.supplier.visibleModalTransaction = false;
+    form.resetFields();
+  };
   const routeData = [
     {
       route: LINKS.HOME,
@@ -92,6 +127,51 @@ export const Supplier = observer(() => {
           ))
         </Tabs>
       </Card>
+      <Modal
+        visible={store.supplier.visibleModalTransaction}
+        title="Top Up Saldo"
+        okText="Top Up"
+        cancelText="Cancel"
+        onCancel={() => {
+          form.resetFields();
+          handleCancelTransaction();
+        }}
+        onOk={() => {
+          form
+            .validateFields()
+            .then((values) => {
+              console.log(values, "isi form");
+              handleSubmitTransaction(values);
+              form.resetFields();
+            })
+            .catch((info) => {
+              console.error("Validate Failed:", info);
+            });
+        }}
+      >
+        <Form form={form} layout="vertical">
+          <Form.Item
+            name="supplier"
+            label="Supplier"
+            rules={[{ required: true, message: "Please input supplier!" }]}
+          >
+            <Select placeholder="Select Code Supplier" allowClear>
+              {store.supplier.data.map((item) => (
+                <Option value={item.code} key={item.code}>
+                  {item.code}
+                </Option>
+              ))}
+            </Select>
+          </Form.Item>
+          <Form.Item
+            name="amount"
+            label="Amount"
+            rules={[{ required: true, message: "Please input amount!" }]}
+          >
+            <Input />
+          </Form.Item>
+        </Form>
+      </Modal>
     </div>
   );
 });

src/pages/Product/Subcategory.js

@@ -18,8 +18,8 @@ export const Subcategory = observer(() => {
     const init = async () => {
       try {
         setIsLoading(true);
-        //await store.product.getDataCategories();
+        //await store.category.getData();
-        await store.subcategory.getDataSubCategories();
+        await store.subcategory.getData();
         setIsLoading(false);
       } catch (e) {
         setIsLoading(false);
@@ -65,12 +65,11 @@ export const Subcategory = observer(() => {
                 marginBottom: store.ui.mediaQuery.isMobile ? 10 : 0,
               }}
             />
-            <Button onClick={() => (store.category.visibleModalCategory = true)}>
+            <Button onClick={() => (store.subcategory.visibleModalSubcategory= true)}>
               <PlusSquareOutlined /> New
             </Button>
           </Col>
         </Row>
-
         <Tabs onChange={handleChangeTabPane} size="default" tabBarGutter="50">
             <TabPane tab="Sub-Category" key="1">
               <SubcategoryComponent/>

src/store/subcategory.js

@@ -7,7 +7,7 @@ export class Subcategory {
     data = [];
     total_data = 0;
     filterCategory = null;
-    visibleModalCategory = false;
+    visibleModalSubcategory = false;
 
     pageCategories = 0;
     pageSizeCategories = 10
@@ -38,24 +38,15 @@ export class Subcategory {
         this.total_dataSubCategories = response.body.count ?? 0
     }
 
-    async getDataCategories() {
-        const response = await http.get(`/product/categories?page=${this.pageCategories}&pageSize=${this.pageSizeCategories}`);
-
-        this.dataCategories = response.body.data ?? []
-        this.total_dataCategories = response.body.total_data ?? 0
-        if (this.dataCategories.length > 0) {
-            this.filterCategory = this.dataCategories[0].id
-        }
-    }
-
     async create(data) {
-        const response = await http.post('/product/categories').send(data);
+        const response = await http.post('/product/sub-categories').send(data);
+        console.log(response)
         await this.getData();
         return response;
     }
 
     async update(id, data) {
-        const response = await http.put(`/product/categories/${id}`).send(data);
+        const response = await http.put(`/product/sub-categories/${id}`).send(data);
         await this.getData();
         return response;
     }