diff --git a/src/const/ApiConst.js b/src/const/ApiConst.js
index 87b693d..4241749 100644
--- a/src/const/ApiConst.js
+++ b/src/const/ApiConst.js
@@ -316,6 +316,7 @@ export const DOCUMENT_DOWNLOAD = (id) => {
 
 export const ROLE_ADD = `${BASE_SIMPRO_LUMEN}/role/add`;
 export const ROLE_SEARCH = `${BASE_SIMPRO_LUMEN}/role/search`;
+export const ROLE_LIST = `${BASE_SIMPRO_LUMEN}/role/list`;
 export const ROLE_EDIT = (id) => {
   return `${BASE_SIMPRO_LUMEN}/role/update/${id}`;
 };
diff --git a/src/views/Master/MasterBroadcast/DialogDetail.js b/src/views/Master/MasterBroadcast/DialogDetail.js
index c2084ad..b269bf8 100644
--- a/src/views/Master/MasterBroadcast/DialogDetail.js
+++ b/src/views/Master/MasterBroadcast/DialogDetail.js
@@ -4,7 +4,7 @@ import moment from 'moment';
 import { Button, Table, FormFeedback, FormGroup, Input, Label, Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
 import Select from 'react-select';
 import axios from 'axios';
-import { BASE_SIMPRO_LUMEN, USER_LIST } from '../../../const/ApiConst';
+import { BASE_SIMPRO_LUMEN, USER_LIST, ROLE_LIST } from '../../../const/ApiConst';
 import { Transfer } from 'antd';
 import { withTranslation } from 'react-i18next';
 const token = window.localStorage.getItem('token');
@@ -43,6 +43,7 @@ class DialogDetail extends Component {
       }, () => {
         this.getDataDetail();
         this.getDataUsers();
+        this.getDataRoles();
         this.setState({ isParentClick: false });
       });
     }
@@ -61,6 +62,18 @@ class DialogDetail extends Component {
     }
   }
 
+  getDataRoles = async () => {
+    const result = await axios
+      .get(ROLE_LIST, config)
+      .then(res => res)
+      .catch((error) => error.response);
+    console.log('Get Data Roles', result)
+
+    if (result && result.data && result.status == 200) {
+      this.setState({ dataRoles: result.data.data });
+    }
+  }
+
   getDataDetail = async () => {
     countError++;
     let url = BASE_SIMPRO_LUMEN + `/broadcast/search`;
@@ -85,6 +98,7 @@ class DialogDetail extends Component {
       if (countError < 6) {
         this.getDataDetail();
         this.getDataUsers();
+        this.getDataRoles();
       }
     }
   }
@@ -97,7 +111,10 @@ class DialogDetail extends Component {
     this.props.closeDialog()
   }
   render() {
+    const dataListDetail = this.state.dataListDetail || [];
     const dataUser = this.state.dataUser || [];
+    const dataRoles = this.state.dataRoles || [];
+
     return (
       <Modal size="xl" isOpen={this.props.openDialog} toggle={this.props.toggleDialog}>
         <ModalHeader toggle={this.handleCloseDialog}>{this.props.t('broadcastDetail')}</ModalHeader>
@@ -114,14 +131,42 @@ class DialogDetail extends Component {
               </tr>
             </thead>
             <tbody>
-              {this.state.dataListDetail.map((val, index) => {
-                const matchedUser = dataUser.find(item => item.id == val.send_to_id);
+              {dataListDetail.map((val, index) => {
+                const matchedUserNames = [];
+                const matchedUserNamesNotKoma = [];
+                const matchRolesName = [];
+
+                if (typeof val.send_to_id === 'string' && val.send_to_id.includes(',')) {
+                  const sendToIds = val.send_to_id.split(',').map(id => parseInt(id, 10));
+                  matchedUserNames[index] = sendToIds.map(id => {
+                    const matchedUser = dataUser.find(item => item.id === id);
+                    return matchedUser ? <div>{"- " + matchedUser.name}</div> : null;
+                  });
+                }
+
+                if (typeof val.send_to_id === 'string' && val.send_to_id.indexOf(',') === -1) {
+                  const id = parseInt(val.send_to_id, 10);
+                  const matchedUser = dataUser.find(item => item.id === id);
+                  matchedUserNamesNotKoma[index] = matchedUser ? <div>{matchedUser.name}</div> : null;
+                }
+
+                if (val.send_to_type === 'roles') {
+                  const id = parseInt(val.send_to_id, 10);
+                  const matchedRole = dataRoles.find(item => item.id === id);
+                  matchRolesName[index] = matchedRole ? <div><b>Role </b>{matchedRole.name}</div> : null;
+                }
+
                 return (
                   <tr key={index}>
                     <td>{val.status_send === "" ? "-" : val.status_send}</td>
                     <td>{val.created_at === "" ? "-" : moment(val.created_at).format("DD-MM-YYYY HH:mm:ss")}</td>
                     <td>{val.description === "" ? "-" : val.description}</td>
-                    <td>{ matchedUser ? matchedUser.name : "-" }</td>
+                    <td>
+                      {val.send_to_type === "all" ? "All User" : ""}
+                      {val.send_to_type === "roles" ? matchRolesName[index] : ""}
+                      {typeof val.send_to_id === 'string' && val.send_to_id.indexOf(',') === -1 ? matchedUserNamesNotKoma[index] : ""}
+                      {typeof val.send_to_id === 'string' && val.send_to_id.includes(',') ? matchedUserNames[index] : ""}
+                    </td>
                     <td>{val.title_notif === "" ? "-" : val.title_notif}</td>
                     <td>{val.message_notif === "" ? "-" : val.message_notif}</td>
                   </tr>
diff --git a/src/views/Master/MasterBroadcast/index.js b/src/views/Master/MasterBroadcast/index.js
index 49aeab4..dfc989a 100644
--- a/src/views/Master/MasterBroadcast/index.js
+++ b/src/views/Master/MasterBroadcast/index.js
@@ -5,7 +5,7 @@ import React, { Component } from 'react';
 import SweetAlert from 'react-bootstrap-sweetalert';
 import axios from 'axios';
 import moment from 'moment';
-import { USER_LIST, BASE_SIMPRO_LUMEN } from '../../../const/ApiConst';
+import { USER_LIST, BASE_SIMPRO_LUMEN, ROLE_LIST } from '../../../const/ApiConst';
 import { Button, Card, CardBody, CardHeader, DropdownItem, DropdownMenu, DropdownToggle, Input, InputGroup, InputGroupButtonDropdown, Table, Row, Col } from 'reactstrap';
 import { DatePicker, Pagination } from 'antd';
 import { NotificationContainer, NotificationManager } from 'react-notifications';
@@ -92,8 +92,30 @@ class index extends Component {
     console.log('Get Data User', result)
 
     if (result && result.data && result.status == 200) {
-      this.setState({ dataUser: result.data.data }, () => {
-      });
+      const dataRes = result.data.data;
+      const finalData = [];
+      if (dataRes.length > 0) {
+        dataRes.map((val, index) => {
+          let data = {
+            id: val.id,
+            name: val.name,
+          };
+          finalData.push(data);
+        });
+      }
+      this.setState({ dataUser: finalData });
+    }
+  }
+
+  getDataRoles = async () => {
+    const result = await axios
+      .get(ROLE_LIST, config)
+      .then(res => res)
+      .catch((error) => error.response);
+    console.log('Get Data Roles', result)
+
+    if (result && result.data && result.status == 200) {
+      this.setState({ dataRoles: result.data.data });
     }
   }
 
@@ -147,6 +169,7 @@ class index extends Component {
       if (result.data.code === 200) {
         this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord });
         this.getDataUsers()
+        this.getDataRoles()
       } else {
         NotificationManager.error('Failed retreiving data!!', 'Failed');
       }
@@ -326,18 +349,47 @@ class index extends Component {
   handleExportExcel = async () => {
     const dataExcel = this.state.dataTable || [];
     const dataUser = this.state.dataUser || [];
+    const dataRoles = this.state.dataRoles || [];
+
     const dataExport = [];
     dataExcel.map((val) => {
-      const matchedUser = dataUser.find(item => item.id == val.send_to_id);
+      const matchedUserNames = [];
+      const matchedUserNamesNotKoma = [];
+      const matchRolesName = [];
+
+      if (typeof val.send_to_id === 'string' && val.send_to_id.includes(',')) {
+        const sendToIds = val.send_to_id.split(',').map(id => parseInt(id, 10));
+        matchedUserNames[index] = sendToIds.map(id => {
+          const matchedUser = dataUser.find(item => item.id === id);
+          return matchedUser ? <div>{"- " + matchedUser.name}</div> : null;
+        });
+      }
+
+      if (typeof val.send_to_id === 'string' && val.send_to_id.indexOf(',') === -1) {
+        const id = parseInt(val.send_to_id, 10);
+        const matchedUser = dataUser.find(item => item.id === id);
+        matchedUserNamesNotKoma[index] = matchedUser ? <div>{matchedUser.name}</div> : null;
+      }
+
+      if (val.send_to_type === 'roles') {
+        const id = parseInt(val.send_to_id, 10);
+        const matchedRole = dataRoles.find(item => item.id === id);
+        matchRolesName[index] = matchedRole ? <div>{matchedRole.name}</div> : null;
+      }
+
       let row = {
         "Tanggal Broadcast": moment(val.created_at).format("YYYY-MM-DD HH:mm:ss"),
         "Judul": val.title_notif,
-        "Penerima": matchedUser ? matchedUser.name : "-",
+        "Penerima": (val.send_to_type === "all" ? "All User" : "") +
+          (val.send_to_type === "roles" ? (matchRolesName[index] ? 'Role: ' + matchRolesName[index].props.children : "") : "") +
+          (typeof val.send_to_id === 'string' && val.send_to_id.indexOf(',') === -1 ? (matchedUserNamesNotKoma[index] ? matchedUserNamesNotKoma[index].props.children : "") : "") +
+          (typeof val.send_to_id === 'string' && val.send_to_id.includes(',') ? (matchedUserNames[index] ? matchedUserNames[index].map(item => item.props.children).join("") : "") : ""),
         "Pesan": val.message_notif,
         "Deskripsi": val.description,
         "Status": val.status_send
-      }
+      };
       dataExport.push(row);
+
     });
     const fileName = "Broadcast.xlsx";
     const ws = XLSX.utils.json_to_sheet(dataExport);
@@ -399,14 +451,37 @@ class index extends Component {
     ]
     const dataTable2 = this.state.dataTable || [];
     const dataUser = this.state.dataUser || [];
-
+    const dataRoles = this.state.dataRoles || [];
     return (
       <tbody>
-        {dataTable2.length !== 0 ? dataTable2.map((n) => {
-            const matchedUser = dataUser.find(item => item.id == n.send_to_id);
-            return (
-              <tr key={n.id}>
-                <td width={93}>
+        {dataTable2.length !== 0 ? dataTable2.map((n, index) => {
+          const matchedUserNames = [];
+          const matchedUserNamesNotKoma = [];
+          const matchRolesName = [];
+
+          if (typeof n.send_to_id === 'string' && n.send_to_id.includes(',')) {
+            const sendToIds = n.send_to_id.split(',').map(id => parseInt(id, 10));
+            matchedUserNames[index] = sendToIds.map(id => {
+              const matchedUser = dataUser.find(item => item.id === id);
+              return matchedUser ? <div>{"- " + matchedUser.name}</div> : null;
+            });
+          }
+
+          if (typeof n.send_to_id === 'string' && n.send_to_id.indexOf(',') === -1) {
+            const id = parseInt(n.send_to_id, 10);
+            const matchedUser = dataUser.find(item => item.id === id);
+            matchedUserNamesNotKoma[index] = matchedUser ? <div>{matchedUser.name}</div> : null;
+          }
+
+          if (n.send_to_type === 'roles') {
+            const id = parseInt(n.send_to_id, 10);
+            const matchedRole = dataRoles.find(item => item.id === id);
+            matchRolesName[index] = matchedRole ? <div><b>Role </b>{matchedRole.name}</div> : null;
+          }
+
+          return (
+            <tr key={n.id}>
+              <td width={93}>
                 <Row>
                   {n.status_send === 'completed' || n.status_send === 'failed' || n.status_send === 'send' || n.status_send === 'resend' ?
                     this.renderBtnResend(n.id) :
@@ -418,15 +493,21 @@ class index extends Component {
                       Detail
                     </Tooltip>
                   </Col>
-                </Row>                </td>
-                <td>{n.title_notif}</td>
-                <td>{n.message_notif !== "" ? n.message_notif : "-"}</td>
-                <td>{n.description !== "" ? n.description : "-"}</td>
-                <td>{ matchedUser ? matchedUser.name : "-" }</td>
-                <td>{n.status_send !== "" ? n.status_send : "-"}</td>
-                <td>{n.created_at !== "" ? moment(n.created_at).format("DD-MM-YYYY HH:mm:ss") : "-"}</td>
-              </tr>
-            );
+                </Row>
+              </td>
+              <td>{n.title_notif}</td>
+              <td>{n.message_notif !== "" ? n.message_notif : "-"}</td>
+              <td>{n.description !== "" ? n.description : "-"}</td>
+              <td>
+                {n.send_to_type === "all" ? "All User" : ""}
+                {n.send_to_type === "roles" ? matchRolesName[index] : ""}
+                {typeof n.send_to_id === 'string' && n.send_to_id.indexOf(',') === -1 ? matchedUserNamesNotKoma[index] : ""}
+                {typeof n.send_to_id === 'string' && n.send_to_id.includes(',') ? matchedUserNames[index] : ""}
+              </td>
+              <td>{n.status_send !== "" ? n.status_send : "-"}</td>
+              <td>{n.created_at !== "" ? moment(n.created_at).format("DD-MM-YYYY HH:mm:ss") : "-"}</td>
+            </tr>
+          );
         }) : <tr>
           <td colSpan={column.length} align="center">{this.props.t('noData')}</td>
         </tr>