diff --git a/src/views/Master/MasterBroadcast/index.js b/src/views/Master/MasterBroadcast/index.js
index 36e5193..9cadec4 100644
--- a/src/views/Master/MasterBroadcast/index.js
+++ b/src/views/Master/MasterBroadcast/index.js
@@ -1,635 +1,616 @@
-import * as XLSX from 'xlsx';
-import DialogDetail from './DialogDetail';
-import DialogForm from './DialogForm';
-import React, { Component } from 'react';
-import SweetAlert from 'react-bootstrap-sweetalert';
-import axios from 'axios';
-import moment from 'moment';
-import { API_BROADCAST_SIMPRO, BASE_SIMPRO, BASE_SIMPRO_LUMEN, BASE_URL_GEOHR_API2 } 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';
-import { Tooltip } from 'reactstrap';
-import { withTranslation } from 'react-i18next';
-
-const { RangePicker } = DatePicker;
-const token = window.localStorage.getItem('token');
-const config = {
-  headers:
-  {
-    Authorization: `Bearer ${token}`,
-    "Content-type": `application/json`
-  }
-};
-
-const id_org = window.localStorage.getItem('id_org');
-const roleName = window.localStorage.getItem('role_name');
-
-
-const LENGTH_DATA = 10
-
-class index extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      alertBroadcast: false,
-      alertDelete: false,
-      currentDay: 'today',
-      currentPage: 1,
-      dataDetail: [],
-      dataEdit: null,
-      dataExport: [],
-      dataExport: [],
-      dataGs: [],
-      dataIdHo: [],
-      dataTable: [],
-      endDate: moment(moment().format("YYYY-M-D")),
-      idDelete: 0,
-      idSend: 0,
-      openDialog: false,
-      openDialogDetail: false,
-      page: 0,
-      rowsPerPage: LENGTH_DATA,
-      search: "",
-      searchDetail: "Judul",
-      searchDetailField: "title_notif",
-      splitButtonOpen: false,
-      startDate: moment(moment().format("YYYY-M-D")),
-      statusSend: '',
-      toltipDetail: false,
-      tooltipDelete: false,
-      tooltipEdit: false,
-      tooltipExport: false,
-      tooltipTambah: false,
-      tooltipresend: false,
-      tooltipsend: false,
-      totalPage: 0,
-      typeClock: "All",
-      typeDialog: 'Save',
-    }
-  }
-
-  async componentDidMount() {
-    await this.getDataBroadcast();
-  }
-
-  async componentDidUpdate(prevProps, prevState) {
-    const { search, startDate } = this.state
-    if (search !== prevState.search) this.getDataBroadcast()
-    if (startDate !== prevState.startDate) this.getDataBroadcast()
-  }
-
-  handleSearch = e => {
-    const value = e.target.value
-    this.setState({ search: value, currentPage: 1 })
-  };
-
-  getDataBroadcast = async () => {
-    let url = BASE_SIMPRO_LUMEN + `/broadcast/search`;
-    const { searchDetail } = this.state
-
-    let start = 0;
-    if (this.state.currentPage !== 1 && this.state.currentPage > 1) {
-      start = (this.state.currentPage * this.state.rowsPerPage) - this.state.rowsPerPage
-    }
-
-    let dateStart = moment(this.state.startDate).format("YYYY-MM-DD 00:00:00");
-    let dateEnd = moment(this.state.endDate).format("YYYY-MM-DD 23:59:59");
-
-    const payload = {
-      "columns": [
-        {
-          "logic_operator": "range",
-          "name": "created_at",
-          "operator": "AND",
-          "value": `${dateStart}`,
-          "value1": `${dateEnd}`
-        },
-        {
-          "logic_operator": "ilike",
-          "name": "title_notif",
-          "operator": "AND",
-          "value": ""
-        }
-      ],
-      "orders": {
-        "ascending": false,
-        "columns": [
-          "created_at"
-        ]
-      },
-      "paging": {
-        "length": this.state.rowsPerPage,
-        "start": start
-      }
-    }
-
-    if (this.state.search !== "" && this.state.search !== null) {
-    }
-
-    const result = await axios
-      .post(url, payload, config)
-      .then(res => res)
-      .catch((error) => error.response);
-    if (result && result.data) {
-      if (result.data.code === 200) {
-        this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord });
-      } else {
-        NotificationManager.error('Failed retreiving data!!', 'Failed');
-      }
-    } else {
-      NotificationManager.error('Failed retreiving data!!', 'Failed');
-    }
-  }
-
-  handleOpenDialog = (type) => {
-    this.setState({ openDialog: true, typeDialog: type })
-    this.showChildDialog();
-  }
-
-  handleCloseDialog = (type, data) => {
-    this.setState({ openDialog: false })
-  }
-  handleSaveBroadcast = (type, data) => {
-    this.setState({ openDialog: false })
-    this.saveBroadcast(type, data)
-  }
-
-  toggleAddDialog = () => {
-    this.setState({ openDialog: !this.state.openDialog })
-  }
-
-  onConfirmBroadcast = async () => {
-    const { idSend, statusSend } = this.state
-    let url = `${API_BROADCAST_SIMPRO}/edit-status-send/${idSend}`;
-    let payload = {
-      "status_send": statusSend
-    }
-    const result = await axios
-      .put(url, payload, config)
-      .then(res => res)
-      .catch((error) => error.response);
-    if (result.status === 200) {
-      NotificationManager.success(`Broadcast berhasil di ${statusSend === 'send' ? 'Kirim' : 'Kirim Ulang'}`)
-      this.getDataBroadcast()
-      this.setState({ alertBroadcast: false })
-    } else {
-      NotificationManager.error(result.message, 'Failed!!');
-      this.setState({ alertBroadcast: false })
-    }
-  }
-
-  saveBroadcast = async (type, data) => {
-    let url = BASE_SIMPRO_LUMEN + `/broadcast/add`;
-
-    const param = {
-      "title_notif": data.title,
-      "status_send": type,
-      "send_to_type": "all",
-      "message_notif": data.message,
-      "description": data.description,
-    }
-
-    const paramRoles = {
-      "title_notif": data.title,
-      "status_send": type,
-      "send_to_type": "roles",
-      "message_notif": data.message,
-      "description": data.description,
-      "send_to_id": data.id
-    }
-
-    const paramUsers = {
-      "title_notif": data.title,
-      "status_send": type,
-      "send_to_type": "users",
-      "message_notif": data.message,
-      "description": data.description,
-      "send_to_id": data.send_to_type == "users" ? data.id.map((id, index) => id) : null
-    }
-
-    if (data.send_to_type === "all") {
-      const result = await axios.post(url, param, config)
-        .then(res => res)
-        .catch((error) => error.response);
-      if (result) {
-        if (result.data) {
-          if (result.data.code === 200) {
-            this.getDataBroadcast();
-            NotificationManager.success('Broadcast berhasil terkirimkan', 'Success!!');
-          } else {
-            NotificationManager.error(`${result.data.message}`, 'Failed!!');
-          }
-        } else {
-          NotificationManager.error(`${result.data.message}`, 'Failed!!');
-        }
-      } else {
-        NotificationManager.error(`${result.data.message}`, 'Failed!!');
-      }
-    } else if (data.send_to_type === "roles") {
-      const result = await axios.post(url, paramRoles, config)
-        .then(res => res)
-        .catch((error) => error.response);
-      if (result) {
-        if (result.data) {
-          if (result.data.code === 200) {
-            this.getDataBroadcast();
-            NotificationManager.success('Broadcast berhasil terkirimkan', 'Success!!');
-          } else {
-            NotificationManager.error(`${result.data.message}`, 'Failed!!');
-          }
-        } else {
-          NotificationManager.error(`${result.data.message}`, 'Failed!!');
-        }
-      } else {
-        NotificationManager.error(`${result.data.message}`, 'Failed!!');
-      }
-    } else if (data.send_to_type === "users") {
-      const result = await axios.post(url, paramUsers, config)
-        .then(res => res)
-        .catch((error) => error.response);
-      if (result) {
-        if (result.data) {
-          if (result.data.code === 200) {
-            this.getDataBroadcast();
-            NotificationManager.success('Broadcast berhasil terkirimkan', 'Success!!');
-          } else {
-            NotificationManager.error(`${result.data.message}`, 'Failed!!');
-          }
-        } else {
-          NotificationManager.error(`${result.data.message}`, 'Failed!!');
-        }
-      } else {
-        NotificationManager.error(`${result.data.message}`, 'Failed!!');
-      }
-    }
-
-  }
-
-  handleEdit = (id, type) => {
-    this.setState({ alertBroadcast: true, statusSend: type, idSend: id })
-  }
-
-  handleDelete = (id) => {
-    this.setState({ alertDelete: true, idDelete: id });
-  }
-
-  onShowSizeChange = (current, pageSize) => {
-    this.setState({ rowsPerPage: pageSize }, () => {
-      this.getDataBroadcast();
-    })
-  }
-
-  onPagination = (current, pageSize) => {
-    this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => {
-      this.getDataBroadcast();
-    })
-  }
-
-  toggle = (param) => {
-    if (param === "edit") {
-      this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit }))
-    } else if (param === "delete") {
-      this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete }))
-    } else if (param === "tambah") {
-      this.setState(prevState => ({ tooltipTambah: !prevState.tooltipTambah }))
-    } else if (param === "export") {
-      this.setState(prevState => ({ tooltipExport: !prevState.tooltipExport }))
-    }
-  }
-
-  handleDatePicker = (date, dateString) => {
-    this.setState({ startDate: date[0], endDate: date[1] }, () => {
-      this.getDataBroadcast();
-    })
-  }
-
-  handleTipe = (e) => {
-    this.setState({ typeClock: e.target.value }, () => {
-      this.getDataBroadcast();
-    });
-  }
-
-  handleExportExcel = async () => {
-    let url = BASE_SIMPRO + `/broadcast.php?act=get_data&role_name=${roleName}`;
-    const { searchDetail } = this.state
-
-    let start = 0;
-    if (this.state.currentPage !== 1) {
-      start = (this.state.currentPage * this.state.rowsPerPage) - this.state.rowsPerPage
-    }
-
-    let dateStart = this.state.startDate;
-    let dateEnd = this.state.endDate;
-
-    const formData = new FormData();
-    formData.append("startDate", dateStart.format("YYYY-M-D") + " 00:00:00");
-    formData.append("endDate", dateEnd.format("YYYY-M-D") + " 23:59:59");
-    formData.append('field', this.state.searchDetailField);
-    formData.append("start", start);
-    formData.append("length", "all");
-    if (this.state.search !== "" && this.state.search !== null) {
-      formData.append('value', this.state.search);
-    }
-
-    const result = await axios
-      .post(url, formData)
-      .then(res => res)
-      .catch((error) => error.response);
-    if (result && result.data) {
-      if (result.data.code_status === 200) {
-        this.setState({ dataExport: result.data.data }, () => {
-          this.exportExcel();
-        });
-      } else {
-      }
-    } else {
-    }
-  }
-
-  exportExcel = () => {
-    const dataExcel = this.state.dataExport || [];
-    const dataExport = [];
-    dataExcel.map((val) => {
-      let row = {
-        "Tanggal Broadcast": moment(val.created_date).format("YYYY-MM-DD HH:mm:ss"),
-        "Penerima": val.employee_name,
-        "Judul": val.title_notif,
-        "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);
-    const wb = XLSX.utils.book_new();
-    XLSX.utils.book_append_sheet(wb, ws, 'Broadcast');
-
-    XLSX.writeFile(wb, fileName);
-  }
-
-  handleDetail = (data) => {
-    console.log("ceh handle detail", data)
-    this.setState({ dataDetail: data }, () => {
-      this.showDetailDialog();
-      this.setState({ openDialogDetail: true });
-    });
-  }
-
-  toggleTooltip = (type) => {
-    if (type === "detail") {
-      this.setState({ toltipDetail: !this.state.toltipDetail })
-    } else if (type === "resend") {
-      this.setState({ tooltipresend: !this.state.tooltipresend })
-    } else if (type === "send") {
-      this.setState({ tooltipsend: !this.state.tooltipsend })
-    }
-  }
-
-  renderBtnResend = (n) => {
-    return (
-      <Col>
-        <i id="Tooltipresend" className="cil-reload fa-lg" style={{ color: 'orange', cursor: "pointer" }} onClick={() => this.handleEdit(n, 'resend')}></i>
-        <Tooltip placement="right" isOpen={this.state.tooltipresend} target="Tooltipresend" toggle={() => this.toggleTooltip("resend")}>
-          Kirim Ulang
-        </Tooltip>
-      </Col>
-    )
-  }
-
-  renderBtnSend = (n) => {
-    return (
-      <Col>
-        <i id="TooltipSend" className="cil-send fa-lg" style={{ color: 'orange', cursor: "pointer" }} onClick={() => this.handleEdit(n, 'send')}></i>
-        <Tooltip placement="right" isOpen={this.state.tooltipsend} target="TooltipSend" toggle={() => this.toggleTooltip("send")}>
-          Kirim
-        </Tooltip>
-      </Col>
-    )
-  }
-
-  renderTable = () => {
-    const column = [
-      { name: this.props.t('action') },
-      { name: this.props.t('title') },
-      { name: this.props.t('message') },
-      { name: this.props.t('description') },
-      { name: "Status" },
-      { name: this.props.t('date') },
-    ]
-    const t = this.props
-    const dataTable2 = this.state.dataTable || [];
-    return (
-      <tbody>
-        {dataTable2.length !== 0 ? dataTable2.map((n) => {
-          return (
-            <tr key={n.id}>
-              <td width={93}>
-                <Row>
-                  {n.status_send === 'completed' || n.status_send === 'failed' || n.status_send === 'send' ?
-                    this.renderBtnResend(n.id) :
-                    this.renderBtnSend(n.id)
-                  }
-                  <Col>
-                    <i id="TooltipDetail" className="fa fa-eye fa-lg" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleDetail(n)}></i>
-                    <Tooltip placement="right" isOpen={this.state.toltipDetail} target="TooltipDetail" toggle={() => this.toggleTooltip("detail")}>
-                      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>{n.status_send !== "" ? n.status_send : "-"}</td>
-              <td>{n.created_date !== "" ? moment.utc(n.created_date).format("DD-MM-YYYY HH:mm:ss") : "-"}</td>
-            </tr>
-          )
-        }) : <tr>
-          <td colSpan={column.length} align="center">{this.props.t('noData')}</td>
-        </tr>
-        }
-      </tbody>
-    )
-  }
-
-  toggleDropDown = () => {
-    this.setState({ splitButtonOpen: !this.state.splitButtonOpen })
-  }
-
-  handleCloseDetail = () => {
-    this.setState({ openDialogDetail: false })
-  }
-
-  toggleDialogDetail = () => {
-    this.setState({ openDialogDetail: !this.state.openDialogDetail })
-  }
-
-  handleChangeDay = (e) => {
-    const val = e.target.value;
-    this.setState({ currentDay: val });
-    if (val === "today") {
-      this.setState({
-        startDate: moment(moment().format("YYYY-M-D")),
-        endDate: moment(moment().format("YYYY-M-D")),
-        currentPage: 1
-      })
-    } else if (val === "3 day") {
-      this.setState({
-        startDate: moment(moment().subtract(3, "days").format("YYYY-M-D")),
-        endDate: moment(moment().format("YYYY-M-D")),
-        currentPage: 1
-      })
-    } else if (val === "7 day") {
-      this.setState({
-        startDate: moment(moment().subtract(7, "days").format("YYYY-M-D")),
-        endDate: moment(moment().format("YYYY-M-D")),
-        currentPage: 1
-      })
-    } else {
-      console.log("test 2 test", val);
-      this.setState({
-        startDate: moment(moment().format("YYYY-M-D")),
-        endDate: moment(moment().format("YYYY-M-D")),
-        currentPage: 1
-      })
-    }
-  }
-
-  render() {
-    const column = [
-      { name: this.props.t('action') },
-      { name: this.props.t('title') },
-      { name: this.props.t('message') },
-      { name: this.props.t('description') },
-      { name: "Status" },
-      { name: this.props.t('date') },
-    ]
-    const t = this.props;
-    const { tooltipTambah, tooltipExport, dataTable, splitButtonOpen, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipEdit, tooltipDelete, statusSend } = this.state
-    return (
-      <div>
-        <NotificationContainer />
-        <SweetAlert
-          show={this.state.alertBroadcast}
-          warning
-          showCancel
-          confirmBtnText="Yes!"
-          confirmBtnBsStyle="danger"
-          title={this.props.t('deleteConfirm')}
-          onConfirm={this.onConfirmBroadcast}
-          onCancel={() => this.setState({ alertBroadcast: false })}
-          focusCancelBtn
-        >
-          {`Yakin ingin ${statusSend === 'send' ? 'Mengirimkan' : 'Mengirimkan Ulang'} Broadcast?`}
-        </SweetAlert>
-        <DialogForm
-          openDialog={openDialog}
-          closeDialog={this.handleCloseDialog}
-          handleSaveBroadcast={this.handleSaveBroadcast}
-          toggleDialog={() => this.toggleAddDialog}
-          typeDialog={this.state.typeDialog}
-          dataEdit={this.state.dataEdit}
-          showDialog={showDialog => this.showChildDialog = showDialog}
-          dataHs={this.state.dataIdHo}
-        />
-        <DialogDetail
-          openDialog={this.state.openDialogDetail}
-          closeDialog={this.handleCloseDetail}
-          toggleDialog={() => this.toggleDialogDetail}
-          dataDetail={this.state.dataDetail}
-          showDialog={showDialog => this.showDetailDialog = showDialog}
-        />
-        <Card>
-          <CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
-            <h4>{this.props.params.name}</h4>
-            <Row>
-              <Col >
-                <Button id="TooltipTambah" color="success" onClick={() => this.handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
-                <Button style={{ marginLeft: "5px" }} id="TooltipExport" color="primary" onClick={() => this.handleExportExcel()}><i className="fa fa-print"></i></Button>
-                <Tooltip placement="right" isOpen={tooltipTambah} target="TooltipTambah" toggle={() => this.toggle("tambah")}>
-                  {this.props.t('broadcastAdd')}
-                </Tooltip>
-                <Tooltip placement="right" isOpen={tooltipExport} target="TooltipExport" toggle={() => this.toggle("export")}>
-                  {this.props.t('exprotExcel')}
-                </Tooltip>
-              </Col>
-            </Row>
-          </CardHeader>
-          <CardBody>
-            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "25px" }}>
-              <div style={{ width: "100%", display: "inline-flex", alignItems: "center" }}>
-                <div style={{ marginRight: "10px", maxWidth: "200px" }}>
-                  <Input type="select" onChange={(e) => this.handleChangeDay(e)} defaultValue={this.state.currentDay}>
-                    <option value="today">{this.props.t('today')}</option>
-                    <option value="3 day">{this.props.t('3days')}</option>
-                    <option value="7 day">{this.props.t('7days')}</option>
-                  </Input>
-                </div>
-                <div style={{}}>
-                  <RangePicker format={"DD-MM-YYYY"} size="default" allowClear={false} value={[this.state.startDate, this.state.endDate]} onChange={this.handleDatePicker} />{' '}
-                  <Button color="primary" onClick={() => this.getDataPanicButton()}>{this.props.t('search')}</Button>
-                </div>
-              </div>
-              <InputGroup style={{ maxWidth: "200px" }}>
-                <Input onChange={this.handleSearch} value={search} type="text" name="search" id="search" placeholder={`${this.props.t('search')} ${this.state.searchDetail}`} />
-                <InputGroupButtonDropdown addonType="prepend"
-                  isOpen={splitButtonOpen}
-                  toggle={this.toggleDropDown}
-                >
-                  <DropdownToggle split outline />
-                  <DropdownMenu>
-                    <DropdownItem onClick={
-                      () => this.setState({
-                        searchDetail: this.props.t('title'),
-                        searchDetailField: "title_notif"
-                      })}>Judul</DropdownItem>
-                    <DropdownItem onClick={
-                      () => this.setState({
-                        searchDetail: this.props.t('description'),
-                        searchDetailField: "description"
-                      })}>Deskripsi</DropdownItem>
-                    <DropdownItem onClick={
-                      () => this.setState({
-                        searchDetail: this.props.t('message'),
-                        searchDetailField: "message_notif"
-                      })}>Pesan</DropdownItem>
-                    <DropdownItem onClick={
-                      () => this.setState({
-                        searchDetail: "Status",
-                        searchDetailField: "status_send"
-                      })}>Status</DropdownItem>
-                  </DropdownMenu>
-                </InputGroupButtonDropdown>
-              </InputGroup>
-            </div>
-            <Table responsive striped hover>
-              <thead>
-                <tr>
-                  {column.map((i, index) => {
-                    return (
-                      <th key={index} scope="row">{i.name}</th>
-                    )
-                  })}
-                </tr>
-              </thead>
-              {this.renderTable()}
-            </Table>
-            <Pagination
-              showSizeChanger
-              onShowSizeChange={this.onShowSizeChange}
-              onChange={this.onPagination}
-              defaultCurrent={currentPage}
-              pageSize={rowsPerPage}
-              total={parseInt(totalPage)}
-              pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]}
-            />
-          </CardBody>
-        </Card>
-      </div>
-    )
-  }
-}
-export default withTranslation()(index);
+import * as XLSX from 'xlsx';
+import DialogDetail from './DialogDetail';
+import DialogForm from './DialogForm';
+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 { 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';
+import { Tooltip } from 'reactstrap';
+import { withTranslation } from 'react-i18next';
+
+const { RangePicker } = DatePicker;
+const token = window.localStorage.getItem('token');
+const config = {
+  headers:
+  {
+    Authorization: `Bearer ${token}`,
+    "Content-type": `application/json`
+  }
+};
+
+const id_org = window.localStorage.getItem('id_org');
+const roleName = window.localStorage.getItem('role_name');
+
+
+const LENGTH_DATA = 10
+
+class index extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      alertBroadcast: false,
+      alertDelete: false,
+      currentDay: 'today',
+      currentPage: 1,
+      dataDetail: [],
+      dataEdit: null,
+      dataExport: [],
+      dataExport: [],
+      dataGs: [],
+      dataIdHo: [],
+      dataTable: [],
+      endDate: moment(moment().format("YYYY-M-D")),
+      idDelete: 0,
+      idSend: 0,
+      openDialog: false,
+      openDialogDetail: false,
+      page: 0,
+      rowsPerPage: LENGTH_DATA,
+      search: "",
+      searchDetail: "Title",
+      searchDetailField: "title_notif",
+      splitButtonOpen: false,
+      startDate: moment(moment().format("YYYY-M-D")),
+      statusSend: '',
+      toltipDetail: false,
+      tooltipDelete: false,
+      tooltipEdit: false,
+      tooltipExport: false,
+      tooltipTambah: false,
+      tooltipresend: false,
+      tooltipsend: false,
+      totalPage: 0,
+      typeClock: "All",
+      typeDialog: 'Save',
+    }
+  }
+
+  async componentDidMount() {
+    await this.getDataBroadcast();
+  }
+
+  async componentDidUpdate(prevProps, prevState) {
+    const { search, startDate } = this.state
+    if (search !== prevState.search) this.getDataBroadcast()
+    if (startDate !== prevState.startDate) this.getDataBroadcast()
+  }
+
+  handleSearch = e => {
+    const value = e.target.value
+    this.setState({ search: value, currentPage: 1 })
+  };
+
+  getDataUsers = async () => {
+    const result = await axios
+      .get(USER_LIST, config)
+      .then(res => res)
+      .catch((error) => error.response);
+    console.log('Get Data User', result)
+
+    if (result && result.data && result.status == 200) {
+      this.setState({ dataUser: result.data.data }, () => {
+      });
+    }
+  }
+
+  getDataBroadcast = async () => {
+    let url = BASE_SIMPRO_LUMEN + `/broadcast/search`;
+    const { searchDetailField, search, currentPage, rowsPerPage, startDate, endDate } = this.state
+    let start = 0;
+    if (currentPage !== 1 && currentPage > 1) {
+      start = (currentPage * rowsPerPage) - rowsPerPage
+    }
+
+    let dateStart = moment(startDate).format("YYYY-MM-DD 00:00:00");
+    let dateEnd = moment(endDate).format("YYYY-MM-DD 23:59:59");
+
+    const payload = {
+      "columns": [
+        {
+          "logic_operator": "range",
+          "name": "created_at",
+          "operator": "AND",
+          "value": `${dateStart}`,
+          "value1": `${dateEnd}`
+        },
+        {
+          "logic_operator": "ilike",
+          "name": searchDetailField,
+          "operator": "AND",
+          "value": search
+        }
+      ],
+      "orders": {
+        "ascending": false,
+        "columns": [
+          "created_at"
+        ]
+      },
+      "paging": {
+        "length": this.state.rowsPerPage,
+        "start": start
+      }
+    }
+
+    if (this.state.search !== "" && this.state.search !== null) {
+    }
+
+    const result = await axios
+      .post(url, payload, config)
+      .then(res => res)
+      .catch((error) => error.response);
+    if (result && result.data) {
+      if (result.data.code === 200) {
+        this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord });
+        this.getDataUsers()
+      } else {
+        NotificationManager.error('Failed retreiving data!!', 'Failed');
+      }
+    } else {
+      NotificationManager.error('Failed retreiving data!!', 'Failed');
+    }
+  }
+
+  handleOpenDialog = (type) => {
+    this.setState({ openDialog: true, typeDialog: type })
+    this.showChildDialog();
+  }
+
+  handleCloseDialog = (type, data) => {
+    this.setState({ openDialog: false })
+  }
+  handleSaveBroadcast = (type, data) => {
+    this.setState({ openDialog: false })
+    this.saveBroadcast(type, data)
+  }
+
+  toggleAddDialog = () => {
+    this.setState({ openDialog: !this.state.openDialog })
+  }
+
+  onConfirmBroadcast = async () => {
+    const { idSend, statusSend } = this.state
+    let url = BASE_SIMPRO_LUMEN + `/broadcast/update/${idSend}`;
+    let payload = {
+      "status_send": statusSend
+    }
+    const result = await axios
+      .put(url, payload, config)
+      .then(res => res)
+      .catch((error) => error.response);
+    if (result.status === 200) {
+      NotificationManager.success(`Broadcast berhasil di ${statusSend === 'send' ? 'Kirim' : 'Kirim Ulang'}`)
+      this.getDataBroadcast()
+      this.setState({ alertBroadcast: false })
+    } else {
+      NotificationManager.error(result.message, 'Failed!!');
+      this.setState({ alertBroadcast: false })
+    }
+  }
+
+  saveBroadcast = async (type, data) => {
+    let url = BASE_SIMPRO_LUMEN + `/broadcast/add`;
+
+    const param = {
+      "title_notif": data.title,
+      "status_send": type,
+      "send_to_type": "all",
+      "message_notif": data.message,
+      "description": data.description,
+    }
+
+    const paramRoles = {
+      "title_notif": data.title,
+      "status_send": type,
+      "send_to_type": "roles",
+      "message_notif": data.message,
+      "description": data.description,
+      "send_to_id": data.id
+    }
+
+    const paramUsers = {
+      "title_notif": data.title,
+      "status_send": type,
+      "send_to_type": "users",
+      "message_notif": data.message,
+      "description": data.description,
+      "send_to_id": data.send_to_type == "users" ? data.id.map((id, index) => id) : null
+    }
+
+    if (data.send_to_type === "all") {
+      const result = await axios.post(url, param, config)
+        .then(res => res)
+        .catch((error) => error.response);
+      if (result) {
+        if (result.data) {
+          if (result.data.code === 200) {
+            this.getDataBroadcast();
+            NotificationManager.success('Broadcast berhasil terkirimkan', 'Success!!');
+          } else {
+            NotificationManager.error(`${result.data.message}`, 'Failed!!');
+          }
+        } else {
+          NotificationManager.error(`${result.data.message}`, 'Failed!!');
+        }
+      } else {
+        NotificationManager.error(`${result.data.message}`, 'Failed!!');
+      }
+    } else if (data.send_to_type === "roles") {
+      const result = await axios.post(url, paramRoles, config)
+        .then(res => res)
+        .catch((error) => error.response);
+      if (result) {
+        if (result.data) {
+          if (result.data.code === 200) {
+            this.getDataBroadcast();
+            NotificationManager.success('Broadcast berhasil terkirimkan', 'Success!!');
+          } else {
+            NotificationManager.error(`${result.data.message}`, 'Failed!!');
+          }
+        } else {
+          NotificationManager.error(`${result.data.message}`, 'Failed!!');
+        }
+      } else {
+        NotificationManager.error(`${result.data.message}`, 'Failed!!');
+      }
+    } else if (data.send_to_type === "users") {
+      const result = await axios.post(url, paramUsers, config)
+        .then(res => res)
+        .catch((error) => error.response);
+      if (result) {
+        if (result.data) {
+          if (result.data.code === 200) {
+            this.getDataBroadcast();
+            NotificationManager.success('Broadcast berhasil terkirimkan', 'Success!!');
+          } else {
+            NotificationManager.error(`${result.data.message}`, 'Failed!!');
+          }
+        } else {
+          NotificationManager.error(`${result.data.message}`, 'Failed!!');
+        }
+      } else {
+        NotificationManager.error(`${result.data.message}`, 'Failed!!');
+      }
+    }
+
+  }
+
+  handleEdit = (id, type) => {
+    this.setState({ alertBroadcast: true, statusSend: type, idSend: id })
+  }
+
+  handleDelete = (id) => {
+    this.setState({ alertDelete: true, idDelete: id });
+  }
+
+  onShowSizeChange = (current, pageSize) => {
+    this.setState({ rowsPerPage: pageSize }, () => {
+      this.getDataBroadcast();
+    })
+  }
+
+  onPagination = (current, pageSize) => {
+    this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => {
+      this.getDataBroadcast();
+    })
+  }
+
+  toggle = (param) => {
+    if (param === "edit") {
+      this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit }))
+    } else if (param === "delete") {
+      this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete }))
+    } else if (param === "tambah") {
+      this.setState(prevState => ({ tooltipTambah: !prevState.tooltipTambah }))
+    } else if (param === "export") {
+      this.setState(prevState => ({ tooltipExport: !prevState.tooltipExport }))
+    }
+  }
+
+  handleDatePicker = (date, dateString) => {
+    this.setState({ startDate: date[0], endDate: date[1] }, () => {
+      this.getDataBroadcast();
+    })
+  }
+
+  handleTipe = (e) => {
+    this.setState({ typeClock: e.target.value }, () => {
+      this.getDataBroadcast();
+    });
+  }
+
+  handleExportExcel = async () => {
+    const dataExcel = this.state.dataTable || [];
+    const dataUser = this.state.dataUser || [];
+    const dataExport = [];
+    dataExcel.map((val) => {
+      const matchedUser = dataUser.find(item => item.id == val.send_to_id);
+      let row = {
+        "Tanggal Broadcast": moment(val.created_at).format("YYYY-MM-DD HH:mm:ss"),
+        "Judul": val.title_notif,
+        "Penerima": matchedUser ? matchedUser.name : "-",
+        "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);
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, 'Broadcast');
+
+    XLSX.writeFile(wb, fileName);
+  }
+
+  handleDetail = (data) => {
+    console.log("ceh handle detail", data)
+    this.setState({ dataDetail: data }, () => {
+      this.showDetailDialog();
+      this.setState({ openDialogDetail: true });
+    });
+  }
+
+  toggleTooltip = (type) => {
+    if (type === "detail") {
+      this.setState({ toltipDetail: !this.state.toltipDetail })
+    } else if (type === "resend") {
+      this.setState({ tooltipresend: !this.state.tooltipresend })
+    } else if (type === "send") {
+      this.setState({ tooltipsend: !this.state.tooltipsend })
+    }
+  }
+
+  renderBtnResend = (n) => {
+    return (
+      <Col>
+        <i id="Tooltipresend" className="cil-reload fa-lg" style={{ color: 'orange', cursor: "pointer" }} onClick={() => this.handleEdit(n, 'resend')}></i>
+        <Tooltip placement="right" isOpen={this.state.tooltipresend} target="Tooltipresend" toggle={() => this.toggleTooltip("resend")}>
+          Kirim Ulang
+        </Tooltip>
+      </Col>
+    )
+  }
+
+  renderBtnSend = (n) => {
+    return (
+      <Col>
+        <i id="TooltipSend" className="cil-send fa-lg" style={{ color: 'orange', cursor: "pointer" }} onClick={() => this.handleEdit(n, 'send')}></i>
+        <Tooltip placement="right" isOpen={this.state.tooltipsend} target="TooltipSend" toggle={() => this.toggleTooltip("send")}>
+          Kirim
+        </Tooltip>
+      </Col>
+    )
+  }
+
+  renderTable = () => {
+    const column = [
+      { name: this.props.t('action') },
+      { name: this.props.t('title') },
+      { name: this.props.t('message') },
+      { name: this.props.t('description') },
+      { name: this.props.t('receiver') },
+      { name: "Status" },
+      { name: this.props.t('date') },
+    ]
+    const dataTable2 = this.state.dataTable || [];
+    const dataUser = this.state.dataUser || [];
+
+    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}>
+                <Row>
+                  {n.status_send === 'completed' || n.status_send === 'failed' || n.status_send === 'send' || n.status_send === 'resend' ?
+                    this.renderBtnResend(n.id) :
+                    this.renderBtnSend(n.id)
+                  }
+                  <Col>
+                    <i id="TooltipDetail" className="fa fa-eye fa-lg" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleDetail(n)}></i>
+                    <Tooltip placement="right" isOpen={this.state.toltipDetail} target="TooltipDetail" toggle={() => this.toggleTooltip("detail")}>
+                      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.utc(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>
+        }
+      </tbody>
+    )
+  }
+
+  toggleDropDown = () => {
+    this.setState({ splitButtonOpen: !this.state.splitButtonOpen })
+  }
+
+  handleCloseDetail = () => {
+    this.setState({ openDialogDetail: false })
+  }
+
+  toggleDialogDetail = () => {
+    this.setState({ openDialogDetail: !this.state.openDialogDetail })
+  }
+
+  handleChangeDay = (e) => {
+    const val = e.target.value;
+    this.setState({ currentDay: val });
+    if (val === "today") {
+      this.setState({
+        startDate: moment(moment().format("YYYY-M-D")),
+        endDate: moment(moment().format("YYYY-M-D")),
+        currentPage: 1
+      })
+    } else if (val === "3 day") {
+      this.setState({
+        startDate: moment(moment().subtract(3, "days").format("YYYY-M-D")),
+        endDate: moment(moment().format("YYYY-M-D")),
+        currentPage: 1
+      })
+    } else if (val === "7 day") {
+      this.setState({
+        startDate: moment(moment().subtract(7, "days").format("YYYY-M-D")),
+        endDate: moment(moment().format("YYYY-M-D")),
+        currentPage: 1
+      })
+    } else {
+      console.log("test 2 test", val);
+      this.setState({
+        startDate: moment(moment().format("YYYY-M-D")),
+        endDate: moment(moment().format("YYYY-M-D")),
+        currentPage: 1
+      })
+    }
+  }
+
+  render() {
+    const column = [
+      { name: this.props.t('action') },
+      { name: this.props.t('title') },
+      { name: this.props.t('message') },
+      { name: this.props.t('description') },
+      { name: this.props.t('receiver') },
+      { name: "Status" },
+      { name: this.props.t('date') },
+    ]
+    const t = this.props;
+    const { tooltipTambah, tooltipExport, dataTable, splitButtonOpen, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipEdit, tooltipDelete, statusSend } = this.state
+    return (
+      <div>
+        <NotificationContainer />
+        <SweetAlert
+          show={this.state.alertBroadcast}
+          warning
+          showCancel
+          confirmBtnText="Yes!"
+          confirmBtnBsStyle="danger"
+          title={this.props.t('deleteConfirm')}
+          onConfirm={this.onConfirmBroadcast}
+          onCancel={() => this.setState({ alertBroadcast: false })}
+          focusCancelBtn
+        >
+          {`Yakin ingin ${statusSend === 'send' ? 'Mengirimkan' : 'Mengirimkan Ulang'} Broadcast?`}
+        </SweetAlert>
+        <DialogForm
+          openDialog={openDialog}
+          closeDialog={this.handleCloseDialog}
+          handleSaveBroadcast={this.handleSaveBroadcast}
+          toggleDialog={() => this.toggleAddDialog}
+          typeDialog={this.state.typeDialog}
+          dataEdit={this.state.dataEdit}
+          showDialog={showDialog => this.showChildDialog = showDialog}
+          dataHs={this.state.dataIdHo}
+        />
+        <DialogDetail
+          openDialog={this.state.openDialogDetail}
+          closeDialog={this.handleCloseDetail}
+          toggleDialog={() => this.toggleDialogDetail}
+          dataDetail={this.state.dataDetail}
+          showDialog={showDialog => this.showDetailDialog = showDialog}
+        />
+        <Card>
+          <CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
+            <h4>{this.props.params.name}</h4>
+            <Row>
+              <Col >
+                <Button id="TooltipTambah" color="success" onClick={() => this.handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
+                <Button style={{ marginLeft: "5px" }} id="TooltipExport" color="primary" onClick={() => this.handleExportExcel()}><i className="fa fa-print"></i></Button>
+                <Tooltip placement="right" isOpen={tooltipTambah} target="TooltipTambah" toggle={() => this.toggle("tambah")}>
+                  {this.props.t('broadcastAdd')}
+                </Tooltip>
+                <Tooltip placement="right" isOpen={tooltipExport} target="TooltipExport" toggle={() => this.toggle("export")}>
+                  {this.props.t('exportExcel')}
+                </Tooltip>
+              </Col>
+            </Row>
+          </CardHeader>
+          <CardBody>
+            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "25px" }}>
+              <div style={{ width: "100%", display: "inline-flex", alignItems: "center" }}>
+                <div style={{ marginRight: "10px", maxWidth: "200px" }}>
+                  <Input type="select" onChange={(e) => this.handleChangeDay(e)} defaultValue={this.state.currentDay}>
+                    <option value="today">{this.props.t('today')}</option>
+                    <option value="3 day">{this.props.t('3days')}</option>
+                    <option value="7 day">{this.props.t('7days')}</option>
+                  </Input>
+                </div>
+                <div style={{}}>
+                  <RangePicker format={"DD-MM-YYYY"} size="default" allowClear={false} value={[this.state.startDate, this.state.endDate]} onChange={this.handleDatePicker} />{' '}
+                  <Button color="primary" onClick={() => this.getDataBroadcast()}>{this.props.t('search')}</Button>
+                </div>
+              </div>
+              <InputGroup style={{ maxWidth: "200px" }}>
+                <Input onChange={this.handleSearch} value={search} type="text" name="search" id="search" placeholder={`${this.props.t('search')} ${this.state.searchDetail}`} />
+                <InputGroupButtonDropdown addonType="prepend"
+                  isOpen={splitButtonOpen}
+                  toggle={this.toggleDropDown}
+                >
+                  <DropdownToggle split outline />
+                  <DropdownMenu>
+                    <DropdownItem onClick={
+                      () => this.setState({
+                        searchDetail: this.props.t('title'),
+                        searchDetailField: "title_notif"
+                      })}>Judul</DropdownItem>
+                    <DropdownItem onClick={
+                      () => this.setState({
+                        searchDetail: this.props.t('description'),
+                        searchDetailField: "description"
+                      })}>Deskripsi</DropdownItem>
+                    <DropdownItem onClick={
+                      () => this.setState({
+                        searchDetail: this.props.t('message'),
+                        searchDetailField: "message_notif"
+                      })}>Pesan</DropdownItem>
+                    <DropdownItem onClick={
+                      () => this.setState({
+                        searchDetail: "Status",
+                        searchDetailField: "status_send"
+                      })}>Status</DropdownItem>
+                  </DropdownMenu>
+                </InputGroupButtonDropdown>
+              </InputGroup>
+            </div>
+            <Table responsive striped hover>
+              <thead>
+                <tr>
+                  {column.map((i, index) => {
+                    return (
+                      <th key={index} scope="row">{i.name}</th>
+                    )
+                  })}
+                </tr>
+              </thead>
+              {this.renderTable()}
+            </Table>
+            <Pagination
+              showSizeChanger
+              onShowSizeChange={this.onShowSizeChange}
+              onChange={this.onPagination}
+              defaultCurrent={currentPage}
+              pageSize={rowsPerPage}
+              total={parseInt(totalPage)}
+              pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]}
+            />
+          </CardBody>
+        </Card>
+      </div>
+    )
+  }
+}
+export default withTranslation()(index);