Amount: {item.amount}
-                            
-                            
-                            
Status  : 
-                            
+                            
+                              Status : 
+                              
+                                {item.status === 0
+                                  ? "Pending"
                                   : item.status === 1
-                                  ? "blue"
+                                  ? "Success"
                                   : item.status === 2
-                                  ? "warning"
+                                  ? "Failed"
                                   : item.status === 3
-                                  ? "success"
-                                  : "red"
-                              }
-                            >
-                              {item.status === 0
-                                ? "Pending"
-                                : item.status === 1
-                                ? "Success"
-                                : item.status === 2
-                                ? "Failed"
-                                : item.status === 3
-                                ? "Approved"
-                                : "Rejected"}
-                            
+                                  ? "Approved"
+                                  : "Rejected"}
+                              
                             
-                            
                           
                         }
                       />
diff --git a/src/pages/Product/Product.js b/src/pages/Product/Product.js
index 4421368..0645284 100644
--- a/src/pages/Product/Product.js
+++ b/src/pages/Product/Product.js
@@ -1,15 +1,30 @@
-import React, {useContext, useEffect, useState} from "react";
-import {Button, Card, Col, Form, Input, message, Modal, Row, Select, Upload} from "antd";
-import {FilterOutlined, PlusOutlined, UploadOutlined,} 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 {ModalLoaderContext} from "../../utils/modal";
+import React, { useContext, useEffect, useState } from "react";
+import {
+  Button,
+  Card,
+  Col,
+  Form,
+  Input,
+  message,
+  Modal,
+  Row,
+  Select,
+  Upload,
+} from "antd";
+import {
+  FilterOutlined,
+  PlusOutlined,
+  UploadOutlined,
+} 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 { ModalLoaderContext } from "../../utils/modal";
 
-const {Search} = Input;
-const {Option} = Select;
+const { Search } = Input;
+const { Option } = Select;
 
 export const Product = observer(() => {
   const store = useStore();
@@ -30,7 +45,7 @@ export const Product = observer(() => {
           store.supplier.getData(),
           store.category.getData(),
           store.product.getDataSubCategories(),
-          store.product.getProductPartner()
+          store.product.getProductPartner(),
         ]);
         await store.product.getData();
         modalLoader.setLoading(false);
@@ -58,18 +73,26 @@ export const Product = observer(() => {
     },
     {
       route: LINKS.PRODUCT,
-      name: 
Produk,
+      name: 
Produk,
+    },
+  ];
+
+  const dataRoute = [
+    {
+      route: LINKS.PRODUCT,
+      name: "Produk",
     },
   ];
 
   const beforeUpload = (file) => {
     let isLt2M;
     let allowedFile = [
-      "text/csv", "application/csv",
+      "text/csv",
+      "application/csv",
       "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
       "application/vnd.ms-excel.sheet.binary.macroEnabled.12",
       "application/vnd.ms-excel",
-      "application/vnd.ms-excel.sheet.macroEnabled.12"
+      "application/vnd.ms-excel.sheet.macroEnabled.12",
     ];
     let isValid = allowedFile.includes(file.type);
     if (!isValid) {
@@ -93,12 +116,14 @@ export const Product = observer(() => {
         message.error("Failed upload excel!");
       }
 
-      setFileList([{
-        uid: '-1',
-        name: response.body.filename,
-        status: 'done',
-        url: '',
-      }]);
+      setFileList([
+        {
+          uid: "-1",
+          name: response.body.filename,
+          status: "done",
+          url: "",
+        },
+      ]);
       setExcel(response.body.filename);
     } catch (e) {
       setLoading(false);
@@ -107,10 +132,10 @@ export const Product = observer(() => {
   };
 
   const handleChange = (info) => {
-    if (info.file.status === 'uploading') {
+    if (info.file.status === "uploading") {
       setLoading(true);
     } else {
-      setLoading(false)
+      setLoading(false);
     }
   };
 
@@ -140,7 +165,7 @@ export const Product = observer(() => {
   const handleSubmit = async (data) => {
     const request = {
       fileName: excel,
-      supplierCode: data.supplierCode
+      supplierCode: data.supplierCode,
     };
     const responseUploadProduct = await handleUploadProduct(request);
 
@@ -152,30 +177,37 @@ export const Product = observer(() => {
   };
 
   return (
-      
-        
-        
-              
-                
-                  
-                    
-                  
-                  
-                    
-                      {/* 
+      
+      
+        
+          
+            
+              
+            
+            
+              
+                {/* 
 {
                     }}
                   /> */}
 
-                      {store.authentication.userData.role == "Admin" && 
-                        
-                      
}
-                     
-                  
-                
-              
 
-          
-        
-
-         {
-              form.resetFields();
-              handleCancel();
-            }}
-            onOk={() => {
-              form
-                  .validateFields()
-                  .then((values) => {
-                    console.log(values, "isi form");
-                    handleSubmit(values);
-                    form.resetFields();
-                  })
-                  .catch((info) => {
-                    console.error("Validate Failed:", info);
-                  });
-            }}
-        >
-          
-               beforeUpload(file)}
-                  customRequest={(args) => uploadHandler(args)}
-                  onRemove={(file) => {
-                    setLoading(false);
-                    setFileList([]);
-                    setExcel("");
-                  }}
-              >
-                
-                  
-              
-            
-            }
+                      onClick={() => setVisibleModalUpload(true)}
+                    >
+                      Tambah Produk
+                    
+                   
+                )}
+              
 
+            
+          
+        
+        
+      
+
+      
 {
+          form.resetFields();
+          handleCancel();
+        }}
+        onOk={() => {
+          form
+            .validateFields()
+            .then((values) => {
+              console.log(values, "isi form");
+              handleSubmit(values);
+              form.resetFields();
+            })
+            .catch((info) => {
+              console.error("Validate Failed:", info);
+            });
+        }}
+      >
+        
+             beforeUpload(file)}
+              customRequest={(args) => uploadHandler(args)}
+              onRemove={(file) => {
+                setLoading(false);
+                setFileList([]);
+                setExcel("");
+              }}
             >
-              
-            
-          
-        
-