diff --git a/src/views/Master/MasterRoles/DialogForm.js b/src/views/Master/MasterRoles/DialogForm.js
index fab37b4..3bbfc78 100644
--- a/src/views/Master/MasterRoles/DialogForm.js
+++ b/src/views/Master/MasterRoles/DialogForm.js
@@ -5,7 +5,7 @@ import 'antd/dist/antd.css';
 import { withTranslation } from 'react-i18next';
 import axios from 'axios';
 import { Select } from 'antd';
-import { MENU_SEARCH } from '../../../const/ApiConst.js';
+import { MENU_COMPANY_SEARCH, MENU_SEARCH } from '../../../const/ApiConst.js';
 
 const { Option } = Select
 const token = window.localStorage.getItem('token');
@@ -18,6 +18,7 @@ const config = {
   }
 };
 
+
 class DialogForm extends Component {
   constructor(props) {
     super(props)
@@ -61,21 +62,60 @@ class DialogForm extends Component {
   }
 
   getAllMenu = async () => {
-    const payload = {
-      "paging": { "start": 0, "length": -1 },
-      "columns": [
-        { "name": "name", "logic_operator": "ilike", "value": "", "operator": "AND" }
-      ],
-      "joins": [],
-      "orders": { "columns": ["id"], "ascending": false }
-    }
-    const result = await axios
-      .post(MENU_SEARCH, payload, config)
-      .then(res => res)
-      .catch((error) => error.response);
-    if (result && result.data && result.data.code == 200) {
-      this.setState({ menu: result.data.data });
+    const { companyID } = this.props;
+    const { roleName } = this.props;
+    if (roleName !== "Super Admin") {
+      const payload = {
+        "paging": {
+          "start": 0,
+          "length": -1
+        },
+        "columns": [{
+          "name": "company_id",
+          "logic_operator": "=",
+          "value": companyID,
+          "operator": "AND"
+        }],
+        "joins": [{
+          "name": "m_menu",
+          "column_join": "menu_id",
+          "column_results": [
+            "name"
+          ]
+        }],
+        "orders": { "columns": ["id"], "ascending": false }
+      }
+      const result = await axios
+        .post(MENU_COMPANY_SEARCH, payload, config)
+        .then(res => res)
+        .catch((error) => error.response);
+      if (result && result.data && result.data.code == 200) {
+        this.setState({ menu: result.data.data });
+      }
+
+    } else {
+      const payload = {
+        "paging": {
+          "start": 0,
+          "length": -1
+        },
+        "columns": [{
+          "name": "name",
+          "logic_operator": "ilike",
+          "value": "",
+          "operator": "AND"
+        }],
+        "orders": { "columns": ["id"], "ascending": false }
+      }
+      const result = await axios
+        .post(MENU_SEARCH, payload, config)
+        .then(res => res)
+        .catch((error) => error.response);
+      if (result && result.data && result.data.code == 200) {
+        this.setState({ menu: result.data.data });
+      }
     }
+
   }
 
   showDialog = () => {
@@ -166,7 +206,7 @@ class DialogForm extends Component {
                 }}>
                 {this.state.menu.map((item) => (
                   <option key={item.id} value={item.id}>
-                    {item.name}
+                    {item.name ?? item.join_first_name}
                   </option>
                 ))}
               </Input>
diff --git a/src/views/Master/MasterRoles/DialogMenuRoles.js b/src/views/Master/MasterRoles/DialogMenuRoles.js
index cec1b42..0606092 100644
--- a/src/views/Master/MasterRoles/DialogMenuRoles.js
+++ b/src/views/Master/MasterRoles/DialogMenuRoles.js
@@ -3,9 +3,8 @@ import { Modal, ModalHeader, ModalBody, ModalFooter, Row, Col, Table } from 'rea
 import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
 import 'antd/dist/antd.css';
 import axios from 'axios';
-import { MENU_SEARCH } from '../../../const/ApiConst.js';
+import { MENU_COMPANY_SEARCH, MENU_SEARCH } from '../../../const/ApiConst.js';
 import { withTranslation, WithTranslation } from 'react-i18next';
-const BASE_URL = "http://siopas.co.id/custom-php/api/geohr/";
 
 const token = window.localStorage.getItem('token');
 
@@ -52,30 +51,64 @@ class DialogMenuRoles extends Component {
   }
 
   getAllMenu = async () => {
-    const payload = {
-      "paging": { "start": 0, "length": -1 },
-      "columns": [
-        { "name": "name", "logic_operator": "ilike", "value": "", "operator": "AND" }
-      ],
-      "joins": [],
-      "orders": { "columns": ["id"], "ascending": false }
-    }
-
-
 
-    const result = await axios
-      .post(MENU_SEARCH, payload, config)
-      .then(res => res)
-      .catch((error) => error.response);
 
-
-    if (result && result.data && result.data.code == 200) {
-      this.setState({ menu: result.data.data }, () => {
-        this.setStateMenu(false);
-      });
+    const { companyID } = this.props;
+    const { roleName } = this.props;
+    if (roleName !== "Super Admin") {
+      const payload = {
+        "paging": {
+          "start": 0,
+          "length": -1
+        },
+        "columns": [{
+          "name": "company_id",
+          "logic_operator": "=",
+          "value": companyID,
+          "operator": "AND"
+        }],
+        "joins": [{
+          "name": "m_menu",
+          "column_join": "menu_id",
+          "column_results": [
+            "name"
+          ]
+        }],
+        "orders": { "columns": ["id"], "ascending": false }
+      }
+      const result = await axios
+        .post(MENU_COMPANY_SEARCH, payload, config)
+        .then(res => res)
+        .catch((error) => error.response);
+      if (result && result.data && result.data.code == 200) {
+        console.log('data Menu Role :', result.data.data);
+        this.setState({ menu: result.data.data }, () => {
+          this.setStateMenu(false);
+        });
+      } else {
+      }
     } else {
+      const payload = {
+        "paging": {
+          "start": 0,
+          "length": -1
+        },
+        "columns": [{
+          "name": "name",
+          "logic_operator": "ilike",
+          "value": "",
+          "operator": "AND"
+        }],
+        "orders": { "columns": ["id"], "ascending": false }
+      }
+      const result = await axios
+        .post(MENU_SEARCH, payload, config)
+        .then(res => res)
+        .catch((error) => error.response);
+      if (result && result.data && result.data.code == 200) {
+        this.setState({ menu: result.data.data });
+      }
     }
-
   }
 
   setStateMenu = edit => {
@@ -155,7 +188,7 @@ class DialogMenuRoles extends Component {
       menu.map((val, index) => {
         return (
           <tr key={index}>
-            <td>{val.name}</td>
+            <td>{val.join_first_name ?? val.name}</td>
             <td><input type="checkbox" onClick={(e) => this.handleChangeCheckbox(e.target.checked, index)} defaultChecked={stateMenu[index]} /></td>
           </tr>
         )
diff --git a/src/views/Master/MasterRoles/index.js b/src/views/Master/MasterRoles/index.js
index 243519f..b4a1066 100644
--- a/src/views/Master/MasterRoles/index.js
+++ b/src/views/Master/MasterRoles/index.js
@@ -426,6 +426,9 @@ class index extends Component {
 					dataEdit={this.state.dataEdit}
 					showDialog={showDialog => this.showChildDialog = showDialog}
 					dataHs={this.state.dataIdHo}
+					companyID={this.state.company_id}
+					roleName={this.state.role_name}
+
 				/>
 				<DialogMenuRoles
 					openDialog={dialogMenuForm}
@@ -433,6 +436,8 @@ class index extends Component {
 					idRoles={this.state.idRoles}
 					showDialog={showDialog => this.showMenuRolesDialog = showDialog}
 					menuRoles={this.state.menuRoles}
+					companyID={this.state.company_id}
+					roleName={this.state.role_name}
 				/>
 				<Card>
 					<CardHeader style={{ display: "flex", justifyContent: "space-between" }}>