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>