Menu Supplier

src/pages/App/DesktopLayout.js

@@ -1,32 +1,40 @@
-import React, {useState} from "react";
-import {Button, Drawer, Layout, Menu, Popover, Typography} from "antd";
-import {MenuList} from "./MenuList";
-import {Link, useHistory} from "react-router-dom";
-import {HomeOutlined, MenuOutlined, UserOutlined} 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";
+import React, { useState } from "react";
+import { Button, Drawer, Layout, Menu, Popover, Typography } from "antd";
+import { MenuList } from "./MenuList";
+import { Link, useHistory } from "react-router-dom";
+import {
+  HomeOutlined,
+  MenuOutlined,
+  UserOutlined,
+  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 {Header, Content, Sider} = Layout;
-const {SubMenu} = Menu;
+const { Text, Paragraph } = Typography;
+const { Header, Content, Sider } = Layout;
+const { SubMenu } = Menu;
 
 export const DesktopLayout = observer(() => {
-    let history = useHistory();
-    const xl = useMediaQuery({minWidth: 1024});
-    const store = useStore();
-    const [clicked, setClicked] = useState(false);
+  let history = useHistory();
+  const xl = useMediaQuery({ minWidth: 1024 });
+  const store = useStore();
+  const [clicked, setClicked] = useState(false);
 
-    return (
-        <Layout
-            theme={"light"}
-            className={"transparent"}
-            hasSider={store.ui.mediaQuery.isDesktop}
-            style={{
-                paddingLeft: xl ? "calc(70vw - 1024px)" : "0",
-                display: "flex",
-                // minWidth: 1024,
+  return (
+    <Layout
+      theme={"light"}
+      className={"transparent"}
+      hasSider={store.ui.mediaQuery.isDesktop}
+      style={{
+        paddingLeft: xl ? "calc(70vw - 1024px)" : "0",
+        display: "flex",
+        // minWidth: 1024,
         width: "100%",
         height: "100%",
         position: "relative",
@@ -138,45 +146,71 @@ export const DesktopLayout = observer(() => {
                       <span>Commision</span>
                     </Link>
                   </Menu.Item>
-                    <Menu.Item key="supplier">
-                        <Link to={LINKS.SUPPLIER}>
-                            <HomeOutlined/>
-                            <span>Supplier</span>
-                        </Link>
-                    </Menu.Item>
+                  <Menu.Item key="supplier">
+                    <Link to={LINKS.SUPPLIER}>
+                      <HomeOutlined />
+                      <span>Supplier</span>
+                    </Link>
+                  </Menu.Item>
                 </SubMenu>
               )}
-                {store.authentication.userData.role !== "Retail" && (
-                    <Menu.Item key="product">
-                        <Link to={LINKS.PRODUCT}>
-                            <HomeOutlined/>
-                            <span>Product</span>
-                        </Link>
-                    </Menu.Item>
-                )}
-                <Menu.Item key="payback">
-                    <Link to={LINKS.PAYBACK}>
-                        <HomeOutlined/>
-                        <span>Payback</span>
+              {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>
-                {store.authentication.userData.role === "Retail" && (
-                    <Menu.Item key="transaction">
-                        <Link to={LINKS.TRANSACTION}>
-                            <HomeOutlined/>
-                            <span>Transaction</span>
-                        </Link>
-                    </Menu.Item>
-                )}
-                <Menu.Item key="profile">
-                    <Link to={LINKS.PROFILE}>
-                        <UserOutlined/>
-                        <span>Profile</span>
+                  </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 />
+                    <span>Product</span>
+                  </Link>
                 </Menu.Item>
-                <Menu.Divider
-                    style={{background: "transparent", paddingTop: 15}}
-                />
+              )}
+              <Menu.Item key="payback">
+                <Link to={LINKS.PAYBACK}>
+                  <HomeOutlined />
+                  <span>Payback</span>
+                </Link>
+              </Menu.Item>
+              {store.authentication.userData.role === "Retail" && (
+                <Menu.Item key="transaction">
+                  <Link to={LINKS.TRANSACTION}>
+                    <HomeOutlined />
+                    <span>Transaction</span>
+                  </Link>
+                </Menu.Item>
+              )}
+              <Menu.Item key="profile">
+                <Link to={LINKS.PROFILE}>
+                  <UserOutlined />
+                  <span>Profile</span>
+                </Link>
+              </Menu.Item>
+              <Menu.Divider
+                style={{ background: "transparent", paddingTop: 15 }}
+              />
             </Menu>
           </div>
         </Drawer>

src/pages/App/MenuList.js

@@ -1,6 +1,6 @@
-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,
@@ -14,26 +14,25 @@ import {
   ProjectOutlined,
   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(() => {
-  }, []);
+  useEffect(() => {}, []);
 
   const [setKeys, setSetKeys] = useState(["dashboard"]);
 
   return (
-      <Menu
-          defaultOpenKeys={["sub4"]}
-          theme="light"
-          style={{
-            backgroundColor: "transparent",
-            borderRightWidth: 0,
+    <Menu
+      defaultOpenKeys={["sub4"]}
+      theme="light"
+      style={{
+        backgroundColor: "transparent",
+        borderRightWidth: 0,
         fontWeight: 400,
         paddingLeft: 0,
       }}
@@ -61,11 +60,7 @@ export const MenuList = observer((props) => {
         </Menu.Item>
       )}
       {store.authentication.userData.role !== "Retail" && (
-        <SubMenu
-          key="config"
-          icon={<MenuUnfoldOutlined />}
-          title="Config"
-        >
+        <SubMenu key="config" icon={<MenuUnfoldOutlined />} title="Config">
           <Menu.Item key="partner">
             <Link to={LINKS.PARTNER}>
               <ProjectOutlined />
@@ -87,74 +82,70 @@ export const MenuList = observer((props) => {
         </SubMenu>
       )}
       {store.authentication.userData.role !== "Retail" && (
-        <SubMenu
-        key="product-main"
-        icon={<ProfileOutlined />}
-        title="Product"
-      >
-        <Menu.Item key="product">
+        <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" || "Admin") && (
+        <Menu.Item key="transaction">
+          <Link to={LINKS.TRANSACTION}>
+            <HomeOutlined />
+            <span>Transaction</span>
+          </Link>
+        </Menu.Item>
+      )}
+      {store.authentication.userData.role !== "Retail" && (
+        <Menu.Item key="retail">
           <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" || "Admin") && (
-            <Menu.Item key="transaction">
-              <Link to={LINKS.TRANSACTION}>
-                <HomeOutlined/>
-                <span>Transaction</span>
-              </Link>
-            </Menu.Item>
-        )}
-        {store.authentication.userData.role !== "Retail" && (
-            <Menu.Item key="retail">
-              <Link to={LINKS.PRODUCT}>
-                <DatabaseOutlined/>
-                <span>Product</span>
-              </Link>
-            </Menu.Item>
-          )}
-        <Menu.Item key="payback">
-          <Link to={LINKS.PAYBACK}>
-            <DatabaseOutlined/>
-            <span>Payback</span>
+      <Menu.Item key="payback">
+        <Link to={LINKS.PAYBACK}>
+          <DatabaseOutlined />
+          <span>Payback</span>
+        </Link>
+      </Menu.Item>
+      {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" || "Admin") && (
-            <Menu.Item key="transaction">
-              <Link to={LINKS.TRANSACTION}>
-                <HomeOutlined/>
-                <span>Transaction</span>
-              </Link>
-            </Menu.Item>
-        )}
-        <Menu.Item key="profile">
-          <Link to={LINKS.PROFILE}>
+      )}
+      <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}}/>
-      </Menu>
+          <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/Config/Supplier.js

@@ -1,6 +1,21 @@
 import React, { useEffect, useState } from "react";
-import { Button, Card, Col, Input, Row, Tabs } from "antd";
-import { FilterOutlined, PlusSquareOutlined,DownloadOutlined } from "@ant-design/icons";
+import {
+  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,
@@ -44,7 +79,7 @@ export const Supplier = observer(() => {
       name: <span style={{ fontWeight: "bold" }}>Supplier</span>,
     },
   ];
-
+  
   return (
     <div className={["ppob-container"].join(" ")}>
       <BreadcumbComponent data={routeData} />
@@ -78,7 +113,7 @@ export const Supplier = observer(() => {
           <Button
             onClick={() => (store.supplier.visibleModalTransaction = true)}
           >
-           <DownloadOutlined /> Top Up Saldo
+            <DownloadOutlined /> Top Up Saldo
           </Button>
         </Col>
         <Tabs
@@ -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.subcategory.getDataSubCategories();
+        //await store.category.getData();
+        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/>