diff --git a/src/const/ApiConst.js b/src/const/ApiConst.js
index 99d1c34..b0aecf4 100644
--- a/src/const/ApiConst.js
+++ b/src/const/ApiConst.js
@@ -741,6 +741,9 @@ export const COMPANY_MANAGEMENT_SEARCH = `${BASE_SIMPRO_LUMEN}/company-managemen
 export const COMPANY_MANAGEMENT_EDIT = (id) => {
   return `${BASE_SIMPRO_LUMEN}/company-management/update/${id}`;
 };
+export const COMPANY_MANAGEMENT_GET_ID = (id) => {
+  return `${BASE_SIMPRO_LUMEN}/company-management/edit/${id}`;
+};
 export const COMPANY_MANAGEMENT_DELETE = (id) => {
   return `${BASE_SIMPRO_LUMEN}/company-management/delete/${id}`;
 };
diff --git a/src/views/Master/MasterCompany/DialogForm.js b/src/views/Master/MasterCompany/DialogForm.js
index 936a6c2..e0fd9a8 100644
--- a/src/views/Master/MasterCompany/DialogForm.js
+++ b/src/views/Master/MasterCompany/DialogForm.js
@@ -3,7 +3,7 @@ import {
     Modal, ModalHeader, ModalBody, ModalFooter,
     Button, Form, FormGroup, Row, Col, Label, Input,
 } from 'reactstrap';
-import { Pagination, Table, Tooltip, Select } from 'antd';
+import { Pagination, Table, Tooltip, Select, Spin } from 'antd';
 import SweetAlert from 'react-bootstrap-sweetalert';
 import { NotificationContainer, NotificationManager } from 'react-notifications';
 import DialogFormUser from './FormUser';
@@ -12,7 +12,7 @@ import 'antd/dist/antd.css';
 import { useTranslation } from 'react-i18next';
 import axios from "../../../const/interceptorApi"
 import {
-    USER_SEARCH, USER_EDIT, USER_DELETE, ROLE_SEARCH, DIVISI_SEARCH, MENU_COMPANY_SEARCH
+    USER_SEARCH, MENU_COMPANY_DELETE, USER_DELETE, ROLE_SEARCH, COMPANY_MANAGEMENT_GET_ID, MENU_COMPANY_SEARCH
 } from '../../../const/ApiConst';
 const token = window.localStorage.getItem('token');
 const config = {
@@ -22,7 +22,7 @@ const config = {
         "Content-type": `application/json`
     }
 };
-const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, companyID, companyNameProp }) => {
+const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, companyID, companyNameProp, dataEditCompany, imageHeader, imageFavIcon, imageLogin, lastIdCompany }) => {
     const { Option } = Select
     const { t } = useTranslation()
     const [registrationnumber, setRegistrationNumber] = useState('')
@@ -31,9 +31,9 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
     const [phoneNumber, setPhoneNumber] = useState('')
     const [emailCompany, setEmailCompany] = useState('')
     const [description, setDescription] = useState('')
-    const [logoLogin, setLogoLogin] = useState([])
-    const [logoHeader, setLogoHeader] = useState([])
-    const [favIcon, setFavIcon] = useState([])
+    const [logoLogin, setLogoLogin] = useState(null)
+    const [logoHeader, setLogoHeader] = useState(null)
+    const [favIcon, setFavIcon] = useState(null)
     const [loginInstruction, setLoginInstruction] = useState('')
     const [about, setAbout] = useState('')
     const [htmlTitle, setHtmlTitle] = useState('')
@@ -42,7 +42,8 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
     const [statusCompany, setStatusCompany] = useState(true)
     const [template, setTemplate] = useState('')
     const [lastIdxURL, setLastIdxURL] = useState(0);
-
+    const [availableUrl, setAvailableBaseUrl] = useState(false);
+    const [id, setId] = useState(0)
 
     const [dataTable, setDatatable] = useState([])
     const [openDialogUser, setOpenDialogUser] = useState(false)
@@ -63,15 +64,57 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
     const [totalPageMenu, setTotalPageMenu] = useState(0)
     const [openDialogMenu, setOpenDialogMenu] = useState(false)
     const [typeDialogMenu, setTypeDialogMenu] = useState("add")
+    const [loading, setLoading] = useState(true);
     useEffect(() => {
         if (companyID && typeDialog === 'Set') {
-            getDataUser()
-            getRoleList()
+          setLoading(true)
+          getDataUser()
+          getRoleList()
+        } else if(typeDialog === 'Set-Menu') {
+          setLoading(true)
+          getDataMenu()
+        } else if(lastIdCompany && typeDialog === 'Save'){
+          getLastCompany()
+        }
+    },[typeDialog, companyID, lastIdCompany, rowsPerPage, currentPage, rowsPerPageMenu, currentPageMenu])
+
+    useEffect(()=> {
+      if(typeDialog==="Edit"){
+        setId(dataEditCompany.id)
+        setRegistrationNumber(dataEditCompany.registration_no)
+        setCompanyName(dataEditCompany.company_name)
+        setEmailCompany(dataEditCompany.email)
+        setPhoneNumber(dataEditCompany.phone_no)
+        setAddressCompany(dataEditCompany.address)
+        setAbout(dataEditCompany.about)
+        setAppName(dataEditCompany.app_name)
+        setHtmlTitle(dataEditCompany.html_title)
+        setStatusCompany(dataEditCompany.is_active)
+        setTemplate(dataEditCompany.template_id)
+        setBaseUrl(dataEditCompany.base_url ? dataEditCompany.base_url : [])
+        if(dataEditCompany.base_url)
+        {
+          setAvailableBaseUrl(true)
         } else {
-            getDataMenu()
+          setAvailableBaseUrl(false)
         }
-    }, [typeDialog, companyID, rowsPerPage, currentPage, rowsPerPageMenu, currentPageMenu])
-
+      } else {
+        setId(0)
+        setCompanyName('')
+        setEmailCompany('')
+        setPhoneNumber('')
+        setAddressCompany('')
+        setAbout('')
+        setAppName('')
+        setHtmlTitle('')
+        setStatusCompany('')
+        setTemplate('')
+        setLogoLogin(null)
+        setLogoHeader(null)
+        setFavIcon(null)
+        setBaseUrl([])
+      }
+    },[dataEditCompany,openDialog])
 
     const onShowSizeChange = (current, pageSize) => {
         setRowsPerPage(pageSize)
@@ -94,14 +137,13 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
 
             "orders": { "columns": ["id"], "ascending": false }
         }
-
         const result = await axios
-            .post(ROLE_SEARCH, formData, config)
-            .then(res => res)
-            .catch((error) => error.response);
-
+          .post(ROLE_SEARCH, formData, config)
+          .then(res => res)
+          .catch((error) => error.response);
         if (result && result.data && result.data.code == 200) {
-            setRoleList(result.data.data);
+          setLoading(false)
+          setRoleList(result.data.data);
         }
     }
 
@@ -202,24 +244,26 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
             .catch((error) => error.response);
 
         if (result && result.data && result.data.code == 200) {
-            setDatatable(result.data.data);
-            setTotalPage(result.data.totalRecord);
+          setDatatable(result.data.data);
+          setTotalPage(result.data.totalRecord);
+          setLoading(false)
         } else {
-            NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
+          setLoading(false)
+          NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
         }
     }
 
     const getDataMenu = async () => {
         let start = 0;
 
-        if (currentPage !== 1 && currentPage > 1) {
-            start = (currentPage * rowsPerPage) - rowsPerPage
+        if (currentPageMenu !== 1 && currentPageMenu > 1) {
+            start = (currentPageMenu * rowsPerPageMenu) - rowsPerPageMenu
         }
 
         const payload = {
             "paging": {
                 "start": start,
-                "length": rowsPerPage
+                "length": rowsPerPageMenu
             },
             "columns": [{
                 "name": "company_id",
@@ -243,13 +287,26 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
             .catch((error) => error.response);
 
         if (result && result.data && result.data.code == 200) {
-            setDatatableMenu(result.data.data);
-            setTotalPageMenu(result.data.totalRecord);
+          setDatatableMenu(result.data.data);
+          setTotalPageMenu(result.data.totalRecord);
+          setLoading(false)
         } else {
+            setLoading(false)
             NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
         }
     }
 
+    const getLastCompany = async () => {
+      const result = await axios
+			.get(`${COMPANY_MANAGEMENT_GET_ID(lastIdCompany)}`, config)
+			.then((res) => res)
+			.catch((err) => err.response);
+      const lastRegistrationNumber = result.data.data.registration_no;
+      const lastNumber = parseInt(lastRegistrationNumber.match(/\d+$/)[0]);
+      const newNumber = lastNumber + 1;
+      const newRegistrationNumber = `RG-${newNumber}`;
+      setRegistrationNumber(newRegistrationNumber);
+    }
 
     const handleAddUser = async () => {
         await setTypeDialogUser("Save")
@@ -271,7 +328,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
         if (type == 'success') {
             NotificationManager.success(`${message}`, "Success!!");
             getDataUser()
-        } else if (type == 'Failed') {
+        } else if (type == 'failed') {
             NotificationManager.error(`${message}`, "Failed!!");
         }
     };
@@ -282,7 +339,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
     }
 
     const handleEditMenu = async (data) => {
-        setDataEdit(data)
+      setDataEdit(data)
         await setTypeDialogMenu('Edit')
         setOpenDialogMenu(true)
     }
@@ -297,7 +354,7 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
         if (type == 'success') {
             NotificationManager.success(`${message}`, "Success!!");
             getDataMenu()
-        } else if (type == 'Failed') {
+        } else if (type == 'failed') {
             NotificationManager.error(`${message}`, "Failed!!");
         }
 
@@ -323,68 +380,41 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
                 phone_no: phoneNumber,
                 email: emailCompany,
                 description: description,
-                logo_login: logoLogin,
-                logo_header: logoHeader,
-                favicon_image: favIcon,
                 login_instruction: loginInstruction,
                 about: about,
                 html_title: htmlTitle,
                 app_name: appName,
-                base_url: baseUrl,
+                base_url: baseUrl.length == 0 ? null : baseUrl,
                 is_active: statusCompany,
-                template_id: template
+                template_id: parseInt(template)
             }
-            console.log(data)
-
+            data.imageLogin = logoLogin ? logoLogin : null;
+            data.imageHeader = logoHeader ? logoHeader : null;
+            data.imageFavicon = favIcon ? favIcon : null;
             closeDialog('save', data);
-        } else if (typeDialog === "Set") {
-            // if (!password && password === "") {
-            //     alert("Please fill password");
-            //     return;
-            // }
-            // if (password !== retryPassword) {
-            //     alert("Password doesn't match");
-            //     return;
-            // }
-            // if (password.length < 8) {
-            //     alert("Password minimum 8 character");
-            //     return;
-            // }
-            // data = {
-            //     id,
-            //     username,
-            //     password,
-            //     email,
-            // }
-
-            closeDialog('edit', data);
-        } else {
-
-            // data = {
-            //     id,
-            //     name: resourceName,
-            //     username,
-            //     employee_type: employeeType,
-            //     phone_number: phoneNo,
-            //     email,
-            //     gender,
-            //     birth_place: birthPlace,
-            //     blood_type: bloodType,
-            //     ktp_number: ktpNumber,
-            //     biaya_per_jam: biayaPerJam.replace('.', ''),
-            //     role_id: roleId,
-            //     divisi_id: divisionId,
-            //     address,
-            //     status_resource: statusResource,
-            //     status_boundary: statusRestriction,
-            //     company_id: company_id
-            // }
-
-            // if (birthDate && birthDate != "") {
-            //     data['birth_date'] = birthDate;
-            // }
-
-            closeDialog('edit', data);
+            setLoading(false);
+        } else if (typeDialog === "Edit") {
+          data = {
+            id,
+            registration_no: registrationnumber,
+            company_name: companyName,
+            address: addressCompany,
+            phone_no: phoneNumber,
+            email: emailCompany,
+            description: description,
+            login_instruction: loginInstruction,
+            about: about,
+            html_title: htmlTitle,
+            app_name: appName,
+            base_url: baseUrl.length == 0 ? null : baseUrl,
+            is_active: statusCompany,
+            template_id: parseInt(template),
+          }
+          data.imageLogin = logoLogin ? logoLogin : null;
+          data.imageHeader = logoHeader ? logoHeader : null;
+          data.imageFavicon = favIcon ? favIcon : null;
+          closeDialog('edit', data);
+          setLoading(false);
         }
     }
 
@@ -395,25 +425,43 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
 
     const handleCancel = () => {
         closeDialog('cancel', 'none')
-        setDatatable([])
+        setDatatable([]);
+        setBaseUrl([]);
+        setAvailableBaseUrl(false);
+        setLoading(false);
     }
 
     const onConfirmDelete = async () => {
-        let url = USER_DELETE(idDelete);
-
+      let url;
+        if(typeDialog === "Set-Menu") {
+          url = MENU_COMPANY_DELETE(idDelete);
+        } else if(typeDialog === "Set") {
+          url = USER_DELETE(idDelete);
+        }
         const result = await axios.delete(url, config)
             .then(res => res)
             .catch((error) => error.response);
 
         if (result && result.data && result.data.code === 200) {
-            getDataUser()
-            setIdDelete(0)
-            setAlertDelete(false)
+          setIdDelete(0);
+          setAlertDelete(false);
+          setLoading(false);
+          if (typeDialog === "Set-Menu") {
+            getDataMenu();
+            NotificationManager.success(`Data menu berhasil dihapus!`, 'Success!!');
+          } else if (typeDialog === "Set") {
+            getDataUser();
             NotificationManager.success(`Data user berhasil dihapus!`, 'Success!!');
+          }
         } else {
-            setIdDelete(0)
-            setAlertDelete(false)
+          setIdDelete(0)
+          setAlertDelete(false)
+          setLoading(false);
+          if (typeDialog === "Set-Menu") {
+            NotificationManager.success(`Data menu gagal dihapus!`, 'Success!!');
+          } else if (typeDialog === "Set") {
             NotificationManager.error(`Data user gagal dihapus!`, 'Failed!!');
+          }
         }
     }
 
@@ -422,63 +470,87 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
         setIdDelete(0)
     }
 
-    const addBaseUrl = () => {
+  const addBaseUrl = () => {
+      if (availableUrl === true) {
+        const baseUrlArray = JSON.parse(baseUrl);
+        baseUrlArray.push({
+          id: lastIdxURL + 1,
+          base_url: "",
+      });
+      setBaseUrl(JSON.stringify(baseUrlArray));
+      setLastIdxURL(lastIdxURL + 1);
+      } else {
         baseUrl.push({
             id: lastIdxURL + 1,
-            url: "",
+            base_url: "",
         });
         setBaseUrl(baseUrl);
         setLastIdxURL(lastIdxURL + 1);
+      }
     };
 
-    const handleChangeBaseURL = (value, index) => {
-        const newBaseURL = [...baseUrl];
-        newBaseURL[index] = value;
-        setBaseUrl(newBaseURL);
+  const handleChangeBaseURL = (e, index) => {
+    if (availableUrl === true) {
+      const { name, value } = e.target;
+      const newBaseURL = [...JSON.parse(baseUrl)];
+      newBaseURL[index][name] = value;
+      setBaseUrl(JSON.stringify(newBaseURL));
+    } else {
+      const { name, value } = e.target;
+      const newBaseURL = [...baseUrl];
+      newBaseURL[index][name] = value;
+      setBaseUrl(newBaseURL);
+      }
     }
 
-    const deleteBaseURL = (id) => {
-        if (baseUrl && baseUrl.length > 0) {
-            let checkIdx = baseUrl.findIndex((o) => o.id === id);
-            if (checkIdx > -1) {
-                baseUrl.splice(checkIdx, 1);
-                setBaseUrl(baseUrl.filter((_, i2) => i2 !== id));
-            }
+  const deleteBaseURL = (id) => {
+    if (availableUrl === true) {
+        const baseUrlArray = JSON.parse(baseUrl);
+        let checkIdx = baseUrlArray.findIndex((o) => o.id === id);
+        if (checkIdx > -1) {
+          baseUrlArray.splice(checkIdx, 1);
+          const baseFilter = baseUrlArray.filter((i2) => i2 !== id);
+            setBaseUrl(JSON.stringify(baseFilter));
         }
+      } else {
+        let checkIdx = baseUrl.findIndex((o) => o.id === id);
+        if (checkIdx > -1) {
+            baseUrl.splice(checkIdx, 1);
+            setBaseUrl(baseUrl.filter((_, i2) => i2 !== id));
+        }
+      }
     }
 
-    const handleLogoHeader = (content) => {
-        const newLogoHeader = [...logoHeader, {
-            type: "image",
-            content: content,
-        }];
-        setLogoHeader(newLogoHeader);
-    }
-
-    const RenderBaseURL = () => {
+  const RenderBaseURL = () => {
         if (baseUrl.length > 0) {
-            return baseUrl.map((item, index) => {
-                return (
-                    <Row key={index} style={{ marginBottom: 10 }}>
-                        <Col md={8}>
-                            <Input
-                                type="text"
-                                value={item.url}
-                                name="item"
-                                onChange={(e) => handleChangeBaseURL(e, index)}
-                            />
-                        </Col>
-                        <Col md={2}>
-                            <Button
-                                color="danger"
-                                size="sm"
-                                onClick={() => deleteBaseURL(item.id)}
-                            >
-                                <i className="fa fa-trash"></i>
-                            </Button>
-                        </Col>
-                    </Row>
-                );
+          let baseUrlArray;
+          if(availableUrl === true) {
+            baseUrlArray = JSON.parse(baseUrl);
+          } else {
+            baseUrlArray = baseUrl;
+          }
+            return baseUrlArray.map((item, index) => {
+              return (
+                <Row key={index} style={{ marginBottom: 10 }}>
+                  <Col md={8}>
+                      <Input
+                          type="text"
+                          value={availableUrl === true ? item.base_url ? item.base_url : "" : item.base_url ? item.base_url : "" }
+                          name="base_url"
+                          onChange={(e) => handleChangeBaseURL(e, index)}
+                      />
+                  </Col>
+                  <Col md={2}>
+                      <Button
+                          color="danger"
+                          size="sm"
+                          onClick={() => deleteBaseURL(availableUrl === true ? item.id ? item.id : "" : item.id ? item.id : "")}
+                      >
+                          <i className="fa fa-trash"></i>
+                      </Button>
+                  </Col>
+                </Row>
+              );
             });
         } else if (baseUrl.length < 1) {
             return (
@@ -502,14 +574,14 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
             <Form>
                 <Row>
                     <Col md={12}>
-                        <span style={{ color: "red" }}>*</span>required.
+                        <span style={{ color: "red" }}>*</span>Is Required
                     </Col>
                 </Row>
                 <Row>
                     <Col md={6}>
                         <FormGroup>
                             <Label className="capitalize">Number Registration<span style={{ color: "red" }}>*</span></Label>
-                            <Input type="text" value={registrationnumber} onChange={(e) => setRegistrationNumber(e.target.value)} placeholder='Input Number Registration' />
+                            <Input type="text" value={registrationnumber} readOnly disabled />
                         </FormGroup>
                     </Col>
                     <Col md={6}>
@@ -581,8 +653,8 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
                         <FormGroup>
                             <Label className="capitalize">Template Application<span style={{ color: "red" }}>*</span></Label>
                             <Select style={{ width: "100%" }} defaultValue={template} onChange={(e) => setTemplate(e)} placeholder="Select a template for application">
-                                <Option value={'1'}>Construction</Option>
-                                <Option value={'2'}>IT (Information AND Technology)</Option>
+                                <Option value={1}>Construction</Option>
+                                {/* <Option value={2}>IT (Information AND Technology)</Option> */}
                             </Select>
                         </FormGroup>
                     </Col>
@@ -618,30 +690,33 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
                             <FormGroup>
                                 <Label className="capitalize" style={{ fontWeight: "bold" }}>Logo Login</Label>
                                 <Input
-                                    type="file"
-                                    accept="image/*"
-                                // onChange={(e) => handleLogoHeader(e.target.files[0])}
+                                  type="file"
+                                  accept="image/*"
+                                  onChange={(e) => setLogoLogin(e.target.files[0])}
                                 />
+                                <small>{imageLogin ? imageLogin.image : <p style={{ color: "red" }}>Not found image</p> }</small>
                             </FormGroup>
                         </Row>
                         <Row>
                             <FormGroup>
                                 <Label className="capitalize" style={{ fontWeight: "bold" }}>Logo Header</Label>
                                 <Input
-                                    type="file"
-                                    accept="image/*"
-                                    onChange={(e) => handleLogoHeader(e.target.files[0])}
+                                  type="file"
+                                  accept="image/*"
+                                  onChange={(e) => setLogoHeader(e.target.files[0])}
                                 />
+                                <small>{imageHeader ? imageHeader.image : <p style={{ color: "red" }}>Not found image</p> }</small>
                             </FormGroup>
                         </Row>
                         <Row>
                             <FormGroup>
-                                <Label className="capitalize" style={{ fontWeight: "bold" }}>Fav Icon Logo</Label>
+                                <Label className="capitalize" style={{ fontWeight: "bold" }}>Favicon Logo</Label>
                                 <Input
-                                    type="file"
-                                    accept="image/*"
-                                //   onChange={(e) => setProjectStructureOrg(e.target.files[0])}
+                                  type="file"
+                                  accept=".ico"
+                                  onChange={(e) => setFavIcon(e.target.files[0])}
                                 />
+                                <small>{imageFavIcon ? imageFavIcon.image : <p style={{ color: "red" }}>Not found image</p> }</small>
                             </FormGroup>
                         </Row>
                     </Col>
@@ -714,7 +789,6 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
             { title: t('icon'), dataIndex: 'icon', key: 'icon' },
             { title: 'Alias', dataIndex: 'alias_name', key: 'alias_name' },
             { title: t('order'), dataIndex: 'sequence', key: 'sequence' },
-            { title: t('parentMenu'), dataIndex: 'join_first_name', key: 'join_first_name', render: (text, record) => (text ? text : "-") }
         ];
         return (
             <Table
@@ -766,18 +840,20 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
                         <Tooltip title="Add User">
                             <Button onClick={handleAddUser} size='sm' color="primary"><i className='fa fa-plus'></i></Button>
                         </Tooltip>
-                    ) :
-                        (
-                            <Tooltip title="Add Menu">
-                                <Button onClick={handleAddMenu} size='sm' color="primary"><i className='fa fa-plus'></i></Button>
-                            </Tooltip>
-                        )}
+                  ) :
+                    typeDialog != "Save" && typeDialog != "Edit" &&
+                      (
+                        <Tooltip title="Add Menu">
+                            <Button onClick={handleAddMenu} size='sm' color="primary"><i className='fa fa-plus'></i></Button>
+                        </Tooltip>
+                      )}
                 </ModalHeader>
                 <ModalBody>
 
                     {typeDialog !== "Set" && typeDialog !== "Set-Menu" && renderFromCompany()}
                     {typeDialog === "Set" && (
                         <>
+                          <Spin tip="Loading..." spinning={loading}>
                             {RenderTableUser}
                             <Pagination
                                 style={{ marginTop: "25px" }}
@@ -788,11 +864,13 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
                                 total={totalPage}
                                 pageSize={rowsPerPage}
                                 current={currentPage}
-                            />
+                              />
+                            </Spin>
                         </>
                     )}
                     {typeDialog === "Set-Menu" && (
                         <>
+                          <Spin tip="Loading..." spinning={loading}>
                             {renderTableMenu}
                             <Pagination
                                 style={{ marginTop: "25px" }}
@@ -803,7 +881,8 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
                                 total={totalPageMenu}
                                 pageSize={rowsPerPageMenu}
                                 current={currentPageMenu}
-                            />
+                              />
+                            </Spin>
                         </>
                     )}
 
@@ -819,4 +898,4 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, company
     )
 
 }
-export default DialogForm;
\ No newline at end of file
+export default DialogForm;
diff --git a/src/views/Master/MasterCompany/FormMenu.js b/src/views/Master/MasterCompany/FormMenu.js
index a7178d2..02f90a1 100644
--- a/src/views/Master/MasterCompany/FormMenu.js
+++ b/src/views/Master/MasterCompany/FormMenu.js
@@ -6,7 +6,7 @@ import {
 import { Transfer, Select } from 'antd';
 import 'antd/dist/antd.css';
 import { useTranslation } from 'react-i18next';
-import { MENU_LIST, MENU_COMPANY_ADD, MENU_COMPANY_EDIT } from '../../../const/ApiConst.js';
+import { MENU_LIST, MENU_COMPANY_ADD, MENU_COMPANY_EDIT, MENU_COMPANY_SEARCH } from '../../../const/ApiConst.js';
 import { NotificationContainer, NotificationManager } from 'react-notifications';
 import axios from 'axios';
 const token = window.localStorage.getItem('token');
@@ -39,7 +39,11 @@ const FormMenu = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit,
         if (!openDialog) {
             handleCLearData()
         } else {
-            getDataAllMenu();
+          if(typeDialog === "Save")
+          {
+            getMenuCompany();
+          }
+          getDataAllMenu();
         }
     }, [openDialog])
 
@@ -83,7 +87,7 @@ const FormMenu = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit,
         if (typeDialog === "Edit") {
             setId(dataEdit.id)
             setIcon(dataEdit.icon)
-            setParentId(dataEdit.parent_id)
+            setParentId(dataEdit.parent_menu_id)
             setSequence(dataEdit.sequence)
         } else {
             setId(0)
@@ -97,12 +101,18 @@ const FormMenu = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit,
     }, [dataEdit, openDialog])
 
     const validation = () => {
-        if (!icon || icon === "") {
+        if (!icon && icon === "") {
+          if(typeDialog !== "Save")
+          {
             alert("Icon cannot be empty!");
+          }
             return true;
         }
         if (sequence < 0) {
-            alert("Order cannot be empty!");
+            if(typeDialog !== "Save")
+            {
+              alert("Order cannot be empty!");
+            }
             return true;
         }
     }
@@ -119,7 +129,7 @@ const FormMenu = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit,
                 }
 
                 if (parentId && parentId > 0) {
-                    data['parent_id'] = parentId
+                    data['parent_menu_id'] = parentId
                 }
 
                 const formData = data
@@ -143,15 +153,19 @@ const FormMenu = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit,
             setAliasName('')
         } else {
             const selectedData = menuResource.filter(item => targetKeys.includes(item.key));
-            const formDatas = selectedData.map(data => ({
+            let formDatas = selectedData.map(data => ({
                 menu_id: data.key,
                 parent_id: data.parent_id,
-                company_id: companyID,
                 icon: data.icon,
                 alias_name: data.alias_name,
                 url: data.url,
-                sequence: data.sequence
+                sequence: data.sequence,
+                company_id: companyID
             }));
+            if(targetKeys.length < 1)
+            {
+              formDatas = [{ company_id: companyID }];
+            }
             const result = await axios
                 .post(MENU_COMPANY_ADD, formDatas, config)
                 .then(res => res)
@@ -179,6 +193,40 @@ const FormMenu = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit,
         setTargetKeys(targetKeys)
     };
 
+    const getMenuCompany = async () => {
+      const payload = {
+          "select": [
+            "id",
+            "menu_id",
+            "company_id"
+          ],
+          "columns": [
+            { "name": "company_id", "logic_operator": "=", "value": companyID }
+          ],
+          "orders": {
+              "columns": [
+                "id"
+              ],
+              "ascending": true
+          }
+      }
+      const result = await axios
+        .post(MENU_COMPANY_SEARCH, payload, config)
+        .then(res => res)
+        .catch((error) => error.response);
+
+      if(result && result.status==200){
+          let data = result.data.data || []
+          let newTargetKeys = []
+          if (data.length > 0) {
+              data.map((val,index)=> {
+                  newTargetKeys.push(val.menu_id)
+              });
+          }
+          setTargetKeys(newTargetKeys)
+      }
+    }
+
     const onChangeParent = (val) => {
         setParentId(val)
     }
@@ -188,7 +236,7 @@ const FormMenu = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit,
             <>
                 {menuResource.map((val, index) => {
                     return (
-                        <Option key={index} value={val.id}>{val.name}</Option>
+                        <Option key={val.key} value={val.key}>{val.name}</Option>
                     )
                 })}
             </>
@@ -230,14 +278,6 @@ const FormMenu = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit,
                 </Row>
                 <Row>
                     <Col>
-                        {/* <FormGroup>
-                            <Label className="capitalize">{t('name')} Menu<span style={{ color: "red" }}>*</span></Label>
-                            <Input type="hidden" value={name} onChange={(e) => setName(e.target.value)} placeholder={t('inputName')} />
-                        </FormGroup>
-                        <FormGroup>
-                            <Label className="capitalize">URL<span style={{ color: "red" }}>*</span></Label>
-                            <Input type="hidden" value={url} onChange={(e) => setUrl(e.target.value)} placeholder={t('inputUrl')} />
-                        </FormGroup> */}
                         <FormGroup>
                             <Label className="capitalize">{t('icon')}<span style={{ color: "red" }}>*</span> </Label>
                             <Input type="text" value={icon} onChange={(e) => setIcon(e.target.value)} placeholder={t('inputIcon')} />
@@ -250,14 +290,10 @@ const FormMenu = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit,
                         </FormGroup>
                         <FormGroup>
                             <Label className="capitalize">{t('parentMenu')}</Label>
-                            <Select showSearch defaultValue={parentId} onChange={onChangeParent} placeholder={t('inputParentMenu')} style={{ width: '100%' }}>
+                            <Select showSearch defaultValue={parentId} value={parentId} onChange={onChangeParent} placeholder={t('inputParentMenu')} style={{ width: '100%' }}>
                                 {setupSelectParent()}
                             </Select>
                         </FormGroup>
-                        {/* <FormGroup>
-                            <Label className="capitalize">Alias Menu</Label>
-                            <Input type="hidden" value={aliasName} onChange={(e) => setAliasName(e.target.value)} placeholder={t('inputAliasMenu')} />
-                        </FormGroup> */}
                     </Col>
                 </Row>
 
@@ -282,4 +318,4 @@ const FormMenu = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit,
     )
 
 }
-export default FormMenu;
\ No newline at end of file
+export default FormMenu;
diff --git a/src/views/Master/MasterCompany/FormUser.js b/src/views/Master/MasterCompany/FormUser.js
index e4d1fc5..ae06e7e 100644
--- a/src/views/Master/MasterCompany/FormUser.js
+++ b/src/views/Master/MasterCompany/FormUser.js
@@ -33,7 +33,6 @@ const FormUser = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit,
 
     useEffect(() => {
         if (typeDialog === "Edit") {
-            console.log(dataEdit);
             setId(dataEdit.id)
             setResourceName(dataEdit.name)
             setUsername(dataEdit.username)
@@ -54,6 +53,7 @@ const FormUser = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit,
             setEmail('')
             setGender('')
             setRoleId('')
+            setKtpNumber('')
         }
     }, [dataEdit, openDialog])
 
@@ -147,7 +147,7 @@ const FormUser = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit,
             <Form>
                 <Row>
                     <Col md={12}>
-                        <span style={{ color: "red" }}>*</span>required.
+                        <span style={{ color: "red" }}>*</span>Is required
                     </Col>
                 </Row>
                 <Row>
@@ -264,4 +264,4 @@ const FormUser = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit,
     )
 
 }
-export default FormUser;
\ No newline at end of file
+export default FormUser;
diff --git a/src/views/Master/MasterCompany/index.js b/src/views/Master/MasterCompany/index.js
index e48af19..aed078c 100644
--- a/src/views/Master/MasterCompany/index.js
+++ b/src/views/Master/MasterCompany/index.js
@@ -1,13 +1,12 @@
-import * as XLSX from 'xlsx';
 import React, { useState, useEffect, useMemo } from 'react';
 import SweetAlert from 'react-bootstrap-sweetalert';
 import axios from "../../../const/interceptorApi"
 import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap';
 import DialogForm from './DialogForm'
 import { NotificationContainer, NotificationManager } from 'react-notifications';
-import { Pagination, Table, Button, Tooltip } from 'antd';
+import { Pagination, Table, Button, Tooltip, Spin } from 'antd';
 import {
-    COMPANY_MANAGEMENT_SEARCH, USER_ADD, USER_SEARCH, USER_EDIT, USER_DELETE, DIVISI_SEARCH, USER_SHIFT_ADD, USER_SYNC
+    COMPANY_MANAGEMENT_SEARCH, COMPANY_MANAGEMENT_ADD, COMPANY_MANAGEMENT_EDIT, COMPANY_MANAGEMENT_DELETE, IMAGE_UPLOAD, IMAGE_GET_BY_ID, IMAGE_DELETE
 } from '../../../const/ApiConst';
 import { useTranslation } from 'react-i18next';
 const token = window.localStorage.getItem('token');
@@ -28,32 +27,35 @@ const MasterCompany = ({ params }) => {
             "Authorization": `Bearer ${token}`
         }
     }
+    const HEADER_MULTIPART = {
+      headers: {
+        "Content-Type": "multipart/form-data",
+        Authorization: `Bearer ${token}`,
+      },
+    };
     const [alertDelete, setAlertDelete] = useState(false)
-    const [clickOpenModal, setClickOpenModal] = useState(false)
-    const [clickOpenModalShift, setClickOpenModalShift] = useState(false)
     const [currentPage, setCurrentPage] = useState(1)
     const [dataEdit, setDataEdit] = useState([])
-    const [dataExport, setDataExport] = useState([])
     const [dataTable, setDatatable] = useState([])
-    const [divisiList, setDivisiList] = useState([])
     const [idDelete, setIdDelete] = useState(0)
     const [openDialog, setOpenDialog] = useState(false)
-    const [openDialogShift, setOpenDialogShift] = useState(false)
     const [rowsPerPage, setRowsPerPage] = useState(10)
     const [search, setSearch] = useState('')
     const [totalPage, setTotalPage] = useState(0)
-    const [typeDialog, setTypeDialog] = useState('Save')
-    const [typeDialogShift, setTypeDialogShift] = useState('Save')
+    const [typeDialog, setTypeDialog] = useState('')
     const [companyID, setCompanyID] = useState('')
     const [companyName, setCompanyName] = useState('')
+    const [imageHeader, setProjectImageHeader] = useState(null);
+    const [imageLogin, setProjectImageLogin] = useState(null);
+    const [imageFavIcon, setProjectImageFavicon] = useState(null);
+    const [lastIdCompany,setLastCompanyId] = useState('');
+    const [loading, setLoading] = useState(true);
     const pageName = params.name;
     const { t } = useTranslation();
-    useEffect(() => {
-        getDivisiList()
-    }, [])
 
     useEffect(() => {
-        getDataUser()
+        setLoading(true)
+        getDataCompany()
     }, [search, rowsPerPage, currentPage])
 
 
@@ -66,32 +68,11 @@ const MasterCompany = ({ params }) => {
         setCurrentPage(current)
     }
 
-    const getDivisiList = async () => {
-        const formData = {
-            "paging": { "start": 0, "length": -1 },
-            "orders": { "columns": ["id"], "ascending": false }
-        }
-
-        const result = await axios
-            .post(DIVISI_SEARCH, formData, config)
-            .then(res => res)
-            .catch((error) => error.response);
-
-        if (result && result.data && result.data.code == 200) {
-            setDivisiList(result.data.data);
-        } else {
-            NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
-        }
-    }
-
-    const getDataUser = async () => {
-
+    const getDataCompany = async () => {
         let start = 0;
-
         if (currentPage !== 1 && currentPage > 1) {
             start = (currentPage * rowsPerPage) - rowsPerPage
         }
-
         const payload = {
             "paging": {
                 "start": start,
@@ -103,12 +84,12 @@ const MasterCompany = ({ params }) => {
                 "group_operator": "OR",
                 "where": [
                     {
-                        "name": "name",
+                        "name": "company_name",
                         "logic_operator": "~*",
                         "value": search
                     },
                     {
-                        "name": "phone_number",
+                        "name": "registration_no",
                         "logic_operator": "~*",
                         "value": search
                     },
@@ -118,15 +99,12 @@ const MasterCompany = ({ params }) => {
                         "value": search
                     },
                     {
-                        "name": "status_resource",
+                        "name": "phone_no",
                         "logic_operator": "~*",
                         "value": search
                     },
                 ]
             },
-            "joins": [
-
-            ],
             "orders": {
                 "columns": [
                     "id"
@@ -134,20 +112,57 @@ const MasterCompany = ({ params }) => {
                 "ascending": true
             }
         }
-
         const result = await axios
             .post(COMPANY_MANAGEMENT_SEARCH, payload, config)
             .then(res => res)
             .catch((error) => error.response);
 
-        if (result && result.data && result.data.code == 200) {
-            setDatatable(result.data.data);
-            setTotalPage(result.data.totalRecord);
+      if (result && result.data && result.data.code == 200) {
+        const sourceData = result.data.data;
+          setDatatable(sourceData);
+          setTotalPage(result.data.totalRecord);
+          const lastCompanyId = sourceData[sourceData.length - 1].id;
+          setLastCompanyId(lastCompanyId);
+          setLoading(false)
         } else {
-            NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
+          setLoading(false)
+          NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
         }
     }
 
+    const getProjectImageHeader = async (id) => {
+      const url = IMAGE_GET_BY_ID(id, "company_logo_header");
+      const result = await axios
+        .get(url, HEADER)
+        .then((res) => res)
+        .catch((err) => err.response);
+      if (result && result.data && result.data.code === 200) {
+        setProjectImageHeader(result.data.data);
+      }
+    }
+
+    const getProjectImageLogin = async (id) => {
+      const url = IMAGE_GET_BY_ID(id, "company_logo_login");
+      const result = await axios
+        .get(url, HEADER)
+        .then((res) => res)
+        .catch((err) => err.response);
+      if (result && result.data && result.data.code === 200) {
+        setProjectImageLogin(result.data.data);
+      }
+    }
+
+    const getProjectImageFavicon = async (id) => {
+      const url = IMAGE_GET_BY_ID(id, "company_favicon");
+      const result = await axios
+        .get(url, HEADER)
+        .then((res) => res)
+        .catch((err) => err.response);
+      if (result && result.data && result.data.code === 200) {
+        setProjectImageFavicon(result.data.data);
+      }
+    }
+
     const handleSearch = e => {
         const value = e.target.value
         setSearch(value);
@@ -160,10 +175,11 @@ const MasterCompany = ({ params }) => {
 
     }
 
-
-
-    const handleEdit = (data) => {
-        setDataEdit(data)
+    const handleEdit = async (data) => {
+        setDataEdit(data);
+        await getProjectImageHeader(data.id);
+        await getProjectImageLogin(data.id);
+        await getProjectImageFavicon(data.id);
         handleOpenDialog('Edit');
     }
 
@@ -189,68 +205,193 @@ const MasterCompany = ({ params }) => {
 
     const handleCloseDialog = (type, data) => {
         if (type === "save") {
-            saveUser(data);
+            saveCompany(data);
         } else if (type === "edit") {
-            editUser(data);
+            editCompany(data);
         }
         setDataEdit([])
+        setProjectImageHeader(null)
+        setProjectImageLogin(null)
+        setProjectImageFavicon(null)
         setOpenDialog(false)
     }
 
-
-    const saveUser = async (data) => {
+    const saveCompany = async (data) => {
         const formData = data
-        const result = await axios.post(USER_ADD, formData, HEADER)
+        const result = await axios.post(COMPANY_MANAGEMENT_ADD, formData, HEADER)
             .then(res => res)
             .catch((error) => error.response);
 
-        if (result && result.data && result.data.code === 200) {
-            getDataUser();
-            NotificationManager.success(`Data resource berhasil ditambah`, 'Success!!');
+      if (result && result.data && result.data.code === 200) {
+          const logoHeader = data.imageHeader;
+          const logoLogin = data.imageLogin;
+          const favIcon = data.imageFavicon;
+          if (logoHeader) {
+            await saveImageHeader(
+              result.data.data.id,
+              logoHeader
+            );
+          }
+          if (logoLogin) {
+            await saveImageLogin(
+              result.data.data.id,
+              logoLogin
+            );
+          }
+          if (favIcon) {
+            await saveFavIcon(
+              result.data.data.id,
+              favIcon
+            );
+          }
+          getDataCompany();
+          setLoading(false)
+          NotificationManager.success(`Data company berhasil ditambah`, 'Success!!');
         } else {
-            NotificationManager.error(`${result.data.message}`, 'Failed!!');
+          setLoading(false)
+          NotificationManager.error(`${result.data.message}`, 'Failed!!');
         }
     }
 
-    const editUser = async (data) => {
+    const editCompany = async (data) => {
+
+      let urlEdit = COMPANY_MANAGEMENT_EDIT(data.id)
+      const logoHeader = data.imageHeader;
+      const logoLogin = data.imageLogin;
+      const favIcon = data.imageFavicon;
+      const formData = data
+
+      const result = await axios.put(urlEdit, formData, HEADER)
+          .then(res => res)
+          .catch((error) => error.response);
+          if (logoHeader) {
+            await deleteImageHeader(
+              data.id
+            );
+            await saveImageHeader(
+              data.id,
+              logoHeader
+            );
+          }
+          if (logoLogin) {
+            await deleteImageLogin(
+              data.id
+            );
+            await saveImageLogin(
+              data.id,
+              logoLogin
+            );
+          }
+          if (favIcon) {
+            await deleteImageFavicon(
+              data.id
+            );
+            await saveFavIcon(
+              data.id,
+              favIcon
+            );
+          }
+      if (result && result.data && result.data.code === 200) {
+          getDataCompany();
+          setLoading(false)
+          NotificationManager.success(`Data company berhasil diedit`, 'Success!!');
+      } else {
+          setLoading(false)
+          NotificationManager.error(`${result.data.message}`, `Failed!!`);
+      }
+    }
+    // Save Image Function
+    const saveImageHeader = async (id, data) => {
+      const formData = new FormData;
+      formData.append('ref_id', id);
+      formData.append('category', 'company_logo_header');
+      formData.append('files', data);
+
+      await axios
+        .post(IMAGE_UPLOAD, formData, HEADER_MULTIPART)
+        .then(res => res)
+        .catch((error) => error.response);
+        return "berhasil";
+    };
 
-        let urlEdit = USER_EDIT(data.id)
-        const formData = data
+    const saveImageLogin = async (id, data) => {
+      const formData = new FormData;
+      formData.append('ref_id', id);
+      formData.append('category', 'company_logo_login');
+      formData.append('files', data);
+
+      await axios
+        .post(IMAGE_UPLOAD, formData, HEADER_MULTIPART)
+        .then(res => res)
+        .catch((error) => error.response);
+        return "berhasil";
+    };
 
-        const result = await axios.put(urlEdit, formData, HEADER)
-            .then(res => res)
-            .catch((error) => error.response);
+    const saveFavIcon = async (id, data) => {
+      const formData = new FormData;
+      formData.append('ref_id', id);
+      formData.append('category', 'company_favicon');
+      formData.append('files', data);
+
+      await axios
+        .post(IMAGE_UPLOAD, formData, HEADER_MULTIPART)
+        .then(res => res)
+        .catch((error) => error.response);
+        return "berhasil";
+    };
+    // Delete Image Function
+    const deleteImageHeader = async (id) => {
+      const URL = IMAGE_DELETE(id, 'company_logo_header');
+      await axios
+        .delete(URL, HEADER)
+        .then(res => res)
+        .catch((error) => error.response);
+      return "berhasil";
+    };
 
-        if (result && result.data && result.data.code === 200) {
-            getDataUser();
-            NotificationManager.success(`Data resource berhasil diedit`, 'Success!!');
-        } else {
-            NotificationManager.error(`${result.data.message}`, `Failed!!`);
-        }
-    }
+    const deleteImageLogin = async (id) => {
+      const URL = IMAGE_DELETE(id, 'company_logo_login');
+      await axios
+        .delete(URL, HEADER)
+        .then(res => res)
+        .catch((error) => error.response);
+      return "berhasil";
+    };
+
+    const deleteImageFavicon = async (id) => {
+      const URL = IMAGE_DELETE(id, 'company_favicon');
+      await axios
+        .delete(URL, HEADER)
+        .then(res => res)
+        .catch((error) => error.response);
+      return "berhasil";
+    };
 
     const toggleAddDialog = () => {
         setOpenDialog(!openDialog)
     }
 
-
-
     const onConfirmDelete = async () => {
-        let url = USER_DELETE(idDelete);
+        let url = COMPANY_MANAGEMENT_DELETE(idDelete);
 
         const result = await axios.delete(url, config)
             .then(res => res)
             .catch((error) => error.response);
 
         if (result && result.data && result.data.code === 200) {
-            getDataUser()
+            getDataCompany()
+            deleteImageHeader(idDelete)
+            deleteImageLogin(idDelete)
+            deleteImageFavicon(idDelete)
             setIdDelete(0)
             setAlertDelete(false)
-            NotificationManager.success(`Data user berhasil dihapus!`, 'Success!!');
+            setLoading(false)
+            NotificationManager.success(`Data company berhasil dihapus!`, 'Success!!');
         } else {
             setIdDelete(0)
             setAlertDelete(false)
-            NotificationManager.error(`Data user gagal dihapus!}`, 'Failed!!');
+            setLoading(false)
+            NotificationManager.error(`Data company gagal dihapus!`, 'Failed!!');
         }
     }
 
@@ -319,12 +460,14 @@ const MasterCompany = ({ params }) => {
                 closeDialog={handleCloseDialog}
                 toggleDialog={() => toggleAddDialog}
                 typeDialog={typeDialog}
-                dataEdit={dataEdit}
-                clickOpenModal={clickOpenModal}
-                divisiList={divisiList}
+                dataEditCompany={dataEdit}
                 companyID={companyID}
                 companyNameProp={companyName}
-            />
+                imageHeader={imageHeader}
+                imageFavIcon={imageFavIcon}
+                imageLogin={imageLogin}
+                lastIdCompany={lastIdCompany}
+              />
 
             <Card>
                 <CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
@@ -341,7 +484,9 @@ const MasterCompany = ({ params }) => {
                     </Row>
                 </CardHeader>
                 <CardBody>
-                    {RenderTable}
+                    <Spin tip="Loading..." spinning={loading}>
+                      {RenderTable}
+                    </Spin>
                     <Pagination
                         style={{ marginTop: "25px" }}
                         showSizeChanger