diff --git a/src/views/SimproV2/PanicButton/index.js b/src/views/SimproV2/PanicButton/index.js
index aa2510c..00d2dd8 100644
--- a/src/views/SimproV2/PanicButton/index.js
+++ b/src/views/SimproV2/PanicButton/index.js
@@ -1,399 +1,399 @@
-import * as XLSX from 'xlsx';
-import DialogEdit from './DialogEdit';
-import DialogForm from './DialogForm';
-import React, { Component } from 'react';
-import SweetAlert from 'react-bootstrap-sweetalert';
-import axios from 'axios';
-import moment from 'moment';
-import { Button } from 'reactstrap';
-import { Card, CardBody, CardHeader, Col, Row, Table, Input, InputGroup } from 'reactstrap';
-import { DatePicker } from 'antd';
-import { NotificationContainer, NotificationManager } from 'react-notifications';
-import { PANIC_BUTTON_UPDATE, PANIC_BUTTON_SEARCH } from '../../../const/ApiConst';
-import { Pagination, Tooltip } from 'antd';
-import { withTranslation } from 'react-i18next';
-
-const id_org = window.localStorage.getItem('id_org');
-const roleName = window.localStorage.getItem('role_name');
-
-const token = window.localStorage.getItem('token');
-const config = {
-  headers:
-  {
-    Authorization: `Bearer ${token}`,
-    "Content-type": `application/json`
-  }
-};
-
-const { RangePicker } = DatePicker;
-
-const momentFormat = 'HH:mm';
-
-
-
-const LENGTH_DATA = 10
-
-class index extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      alertDelete: false,
-      currentDay: 'today',
-      currentPage: 1,
-      dataEdit: null,
-      dataExport: [],
-      dataGs: [],
-      dataIdHo: [],
-      dataMap: "",
-      dataTable: [],
-      endDate: moment(moment().format("YYYY-M-D")),
-      idDelete: 0,
-      openDialog: false,
-      openDialogEdit: false,
-      page: 0,
-      rowsPerPage: LENGTH_DATA,
-      search: "",
-      startDate: moment(moment().format("YYYY-M-D")),
-      tooltipDelete: false,
-      tooltipExport: false,
-      tooltipMap: false,
-      totalPage: 0,
-      typeClock: "All",
-      typeDialog: 'Save',
-    }
-  }
-
-  async componentDidMount() {
-    this.getDataPanicButton();
-  }
-
-  async componentDidUpdate(prevProps, prevState) {
-    const { search, startDate } = this.state
-    if (search !== prevState.search) this.getDataPanicButton()
-    if (startDate !== prevState.startDate) this.getDataPanicButton()
-  }
-
-  handleSearch = e => {
-    const value = e.target.value
-    this.setState({ search: value, currentPage: 1 })
-  };
-
-  getDataPanicButton = async () => {
-    let start = 0;
-    if (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 = {
-      "paging": {
-        "start": start,
-        "length": this.state.rowsPerPage
-      },
-      "filter_columns": [
-        {
-          "name": "name",
-          "value": "",
-          "table_name": "m_users"
-        }
-      ],
-      "columns": [
-        { "name": "created_at", "logic_operator": "range", "value": dateStart, "value1": dateEnd, "operator": "AND" },
-        { "name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND", "table_name": "m_users" }
-      ],
-      "joins": [
-        {
-          "name": "m_users",
-          "column_join": "user_id",
-          "column_results": [
-            "name",
-          ]
-        }
-      ],
-      "orders": {
-        "columns": [
-          "id"
-        ],
-        "ascending": false
-      }
-    }
-
-    const result = await axios
-      .post(PANIC_BUTTON_SEARCH, payload, config)
-      .then(res => res)
-      .catch((error) => error.response);
-    if (result && result.data) {
-      if (result && result.data && result.data.code == 200) {
-        this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord, dataExport: result.data.data_export });
-      } else {
-        NotificationManager.error('Gagal Menerima Data!!', 'Failed');
-      }
-    }
-  }
-
-  handleOpenDialog = (type) => {
-    if (type === "Map") {
-      this.setState({ openDialog: true })
-      this.showChildDialog();
-    } else {
-      this.setState({ openDialogEdit: true })
-      this.showDialogEdit();
-    }
-
-  }
-
-  handleCloseDialog = () => {
-    this.setState({ openDialog: false })
-  }
-
-  handleCloseDialogEdit = (type, data) => {
-    if (type === "save") {
-      this.updateStatusResponse(data);
-    }
-    this.setState({ openDialogEdit: false })
-  }
-
-  toggleMapDialog = () => {
-    this.setState({ openDialog: !this.state.openDialog })
-  }
-
-  toggleEditDialog = () => {
-    this.setState({ openDialogEdit: !this.state.openDialogEdit });
-  }
-
-  handleMap = data => {
-    this.setState({ dataMap: data });
-    this.handleOpenDialog('Map');
-  }
-
-  handleEdit = data => {
-    this.setState({ dataEdit: data });
-    this.handleOpenDialog('Edit');
-  }
-
-  handleDelete = (id) => {
-    this.setState({ alertDelete: true, idDelete: id });
-  }
-
-  onShowSizeChange = (current, pageSize) => {
-    this.setState({ rowsPerPage: pageSize }, () => {
-      this.getDataPanicButton();
-    })
-  }
-
-  onPagination = (current, pageSize) => {
-    this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => {
-      this.getDataPanicButton();
-    })
-  }
-
-  toggle = (param) => {
-    if (param === "map") {
-      this.setState(prevState => ({ tooltipMap: !prevState.tooltipMap }))
-    } else if (param === "edit") {
-      this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit }))
-    } else if (param === "delete") {
-      this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete }))
-    } else if (param === "export") {
-      this.setState(prevState => ({ tooltipExport: !prevState.tooltipExport }))
-    }
-  }
-
-  handleDatePicker = (date, dateString) => {
-    this.setState({ startDate: date[0], endDate: date[1] }, () => {
-      this.getDataPanicButton();
-    })
-  }
-
-  handleTipe = (e) => {
-    this.setState({ typeClock: e.target.value }, () => {
-      this.getDataPanicButton();
-    });
-  }
-
-  handleExportExcel = () => {
-    const dataExcel = this.state.dataTable || [];
-    const fileName = "Panic Button.xlsx";
-    let dataExport = [];
-    dataExcel.map((val) => {
-      let row = {
-        "Tanggal": moment(val.created_date).format("DD-MM-YYYY HH:MM:SS"),
-        "Nama Karyawan": val.join_first_name,
-        "Latitude": val.lat,
-        "Longitude": val.lon,
-        "Status": val.status_response
-      }
-      dataExport.push(row);
-    })
-    const ws = XLSX.utils.json_to_sheet(dataExport);
-    const wb = XLSX.utils.book_new();
-    XLSX.utils.book_append_sheet(wb, ws, 'Panic Button');
-
-    XLSX.writeFile(wb, fileName);
-  }
-
-  updateStatusResponse = async (data) => {
-    let url = PANIC_BUTTON_UPDATE(data.id);
-    let payload = {
-      "user_id": data.user_id,
-      "lat": data.lat,
-      "lon": data.lon,
-      "status_response": data.status_response,
-      "description": "update data panic"
-
-    }
-
-    const result = await axios
-      .put(url, payload, config)
-      .then(res => res)
-      .catch((error) => error.response);
-    if (result && result.data) {
-      if (result.data.code == 200) {
-        this.getDataPanicButton()
-        NotificationManager.success('Berhasil update status response!!', 'Success!');
-      } else {
-        NotificationManager.error('Gagal update status response!!', 'Failed');
-      }
-    }
-  }
-
-  renderTable = () => {
-    const t = this.props;
-    const dataTable2 = this.state.dataTable || [];
-    return (
-      <tbody>
-        {dataTable2.length !== 0 ? dataTable2.map((n) => {
-          return (
-            <tr key={n.id}>
-              <td>
-                <Tooltip title={this.props.t('edit')}>
-                  <i id="TooltipEdit" className="fa fa-edit" style={{ color: 'green', cursor: "pointer", marginRight: 15 }} onClick={() => this.handleEdit(n)}></i>
-                </Tooltip>
-                <Tooltip title={this.props.t('map')}>
-                  <i id="tooltipMap" className="fa fa-map" style={{ color: 'black', cursor: "pointer" }} onClick={() => this.handleMap(n)}></i>
-                </Tooltip>
-              </td>
-              <td>{n.created_date !== null ? moment(n.created_at).format("DD-MM-YYYY HH:mm:ss") : "-"}</td>
-              <td>{n.join_first_name !== null ? n.join_first_name : "-"}</td>
-              <td>{n.status_response !== null ? n.status_response : "-"}</td>
-            </tr>
-          )
-        }) : <tr>
-          <td colSpan="4" align="center">No Data Available</td>
-        </tr>
-        }
-      </tbody>
-    )
-  }
-
-  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 {
-      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('date') },
-      { name: this.props.t('nameHR') },
-      { name: this.props.t('statusResponse') },
-    ]
-    const t = this.props;
-    const { tooltipExport, dataTable, openDialogEdit, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipMap, tooltipDelete } = this.state
-    return (
-      <div>
-        <NotificationContainer />
-        <DialogForm
-          openDialog={openDialog}
-          closeDialog={this.handleCloseDialog}
-          toggleDialog={() => this.toggleMapDialog}
-          dataMap={this.state.dataMap}
-          showDialog={showDialog => this.showChildDialog = showDialog}
-        />
-        <DialogEdit
-          openDialog={openDialogEdit}
-          closeDialog={this.handleCloseDialogEdit}
-          toggleDialog={() => this.toggleEditDialog}
-          dataEdit={this.state.dataEdit}
-          showDialog={showDialog => this.showDialogEdit = showDialog}
-        />
-        <Card>
-          <CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
-            <h4>{this.props.t('panicButton')}</h4>
-            <div>
-              <Tooltip title={this.props.t('exportExcel')}>
-                <Button id="TooltipExport" color="primary" onClick={() => this.handleExportExcel()}><i className="fa fa-print"></i></Button>
-              </Tooltip>
-            </div>
-          </CardHeader>
-          <CardBody>
-            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "25px" }}>
-              <div style={{ width: "100%", display: "inline-flex", alignItems: "center" }}>
-                <div style={{ width: "50%", 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={{ width: "50%" }}>
-                  <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>
-            </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 DialogEdit from './DialogEdit';
+import DialogForm from './DialogForm';
+import React, { Component } from 'react';
+import SweetAlert from 'react-bootstrap-sweetalert';
+import axios from 'axios';
+import moment from 'moment';
+import { Button } from 'reactstrap';
+import { Card, CardBody, CardHeader, Col, Row, Table, Input, InputGroup } from 'reactstrap';
+import { DatePicker } from 'antd';
+import { NotificationContainer, NotificationManager } from 'react-notifications';
+import { PANIC_BUTTON_UPDATE, PANIC_BUTTON_SEARCH } from '../../../const/ApiConst';
+import { Pagination, Tooltip } from 'antd';
+import { withTranslation } from 'react-i18next';
+
+const id_org = window.localStorage.getItem('id_org');
+const roleName = window.localStorage.getItem('role_name');
+
+const token = window.localStorage.getItem('token');
+const config = {
+  headers:
+  {
+    Authorization: `Bearer ${token}`,
+    "Content-type": `application/json`
+  }
+};
+
+const { RangePicker } = DatePicker;
+
+const momentFormat = 'HH:mm';
+
+
+
+const LENGTH_DATA = 10
+
+class index extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      alertDelete: false,
+      currentDay: 'today',
+      currentPage: 1,
+      dataEdit: null,
+      dataExport: [],
+      dataGs: [],
+      dataIdHo: [],
+      dataMap: "",
+      dataTable: [],
+      endDate: moment(moment().format("YYYY-M-D")),
+      idDelete: 0,
+      openDialog: false,
+      openDialogEdit: false,
+      page: 0,
+      rowsPerPage: LENGTH_DATA,
+      search: "",
+      startDate: moment(moment().format("YYYY-M-D")),
+      tooltipDelete: false,
+      tooltipExport: false,
+      tooltipMap: false,
+      totalPage: 0,
+      typeClock: "All",
+      typeDialog: 'Save',
+    }
+  }
+
+  async componentDidMount() {
+    this.getDataPanicButton();
+  }
+
+  async componentDidUpdate(prevProps, prevState) {
+    const { search, startDate } = this.state
+    if (search !== prevState.search) this.getDataPanicButton()
+    if (startDate !== prevState.startDate) this.getDataPanicButton()
+  }
+
+  handleSearch = e => {
+    const value = e.target.value
+    this.setState({ search: value, currentPage: 1 })
+  };
+
+  getDataPanicButton = async () => {
+    let start = 0;
+    if (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 = {
+      "paging": {
+        "start": start,
+        "length": this.state.rowsPerPage
+      },
+      "filter_columns": [
+        {
+          "name": "name",
+          "value": "",
+          "table_name": "m_users"
+        }
+      ],
+      "columns": [
+        { "name": "created_at", "logic_operator": "range", "value": dateStart, "value1": dateEnd, "operator": "AND" },
+        { "name": "name", "logic_operator": "ilike", "value": this.state.search, "operator": "AND", "table_name": "m_users" }
+      ],
+      "joins": [
+        {
+          "name": "m_users",
+          "column_join": "user_id",
+          "column_results": [
+            "name",
+          ]
+        }
+      ],
+      "orders": {
+        "columns": [
+          "id"
+        ],
+        "ascending": false
+      }
+    }
+
+    const result = await axios
+      .post(PANIC_BUTTON_SEARCH, payload, config)
+      .then(res => res)
+      .catch((error) => error.response);
+    if (result && result.data) {
+      if (result && result.data && result.data.code == 200) {
+        this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord, dataExport: result.data.data_export });
+      } else {
+        NotificationManager.error('Gagal Menerima Data!!', 'Failed');
+      }
+    }
+  }
+
+  handleOpenDialog = (type) => {
+    if (type === "Map") {
+      this.setState({ openDialog: true })
+      this.showChildDialog();
+    } else {
+      this.setState({ openDialogEdit: true })
+      this.showDialogEdit();
+    }
+
+  }
+
+  handleCloseDialog = () => {
+    this.setState({ openDialog: false })
+  }
+
+  handleCloseDialogEdit = (type, data) => {
+    if (type === "save") {
+      this.updateStatusResponse(data);
+    }
+    this.setState({ openDialogEdit: false })
+  }
+
+  toggleMapDialog = () => {
+    this.setState({ openDialog: !this.state.openDialog })
+  }
+
+  toggleEditDialog = () => {
+    this.setState({ openDialogEdit: !this.state.openDialogEdit });
+  }
+
+  handleMap = data => {
+    this.setState({ dataMap: data });
+    this.handleOpenDialog('Map');
+  }
+
+  handleEdit = data => {
+    this.setState({ dataEdit: data });
+    this.handleOpenDialog('Edit');
+  }
+
+  handleDelete = (id) => {
+    this.setState({ alertDelete: true, idDelete: id });
+  }
+
+  onShowSizeChange = (current, pageSize) => {
+    this.setState({ rowsPerPage: pageSize }, () => {
+      this.getDataPanicButton();
+    })
+  }
+
+  onPagination = (current, pageSize) => {
+    this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => {
+      this.getDataPanicButton();
+    })
+  }
+
+  toggle = (param) => {
+    if (param === "map") {
+      this.setState(prevState => ({ tooltipMap: !prevState.tooltipMap }))
+    } else if (param === "edit") {
+      this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit }))
+    } else if (param === "delete") {
+      this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete }))
+    } else if (param === "export") {
+      this.setState(prevState => ({ tooltipExport: !prevState.tooltipExport }))
+    }
+  }
+
+  handleDatePicker = (date, dateString) => {
+    this.setState({ startDate: date[0], endDate: date[1] }, () => {
+      this.getDataPanicButton();
+    })
+  }
+
+  handleTipe = (e) => {
+    this.setState({ typeClock: e.target.value }, () => {
+      this.getDataPanicButton();
+    });
+  }
+
+  handleExportExcel = () => {
+    const dataExcel = this.state.dataTable || [];
+    const fileName = "Panic Button.xlsx";
+    let dataExport = [];
+    dataExcel.map((val) => {
+      let row = {
+        "Tanggal": moment(val.created_at).format("DD-MM-YYYY HH:MM:SS"),
+        "Nama Karyawan": val.join_first_name,
+        "Latitude": val.lat,
+        "Longitude": val.lon,
+        "Status": val.status_response
+      }
+      dataExport.push(row);
+    })
+    const ws = XLSX.utils.json_to_sheet(dataExport);
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, 'Panic Button');
+
+    XLSX.writeFile(wb, fileName);
+  }
+
+  updateStatusResponse = async (data) => {
+    let url = PANIC_BUTTON_UPDATE(data.id);
+    let payload = {
+      "user_id": data.user_id,
+      "lat": data.lat,
+      "lon": data.lon,
+      "status_response": data.status_response,
+      "description": "update data panic"
+
+    }
+
+    const result = await axios
+      .put(url, payload, config)
+      .then(res => res)
+      .catch((error) => error.response);
+    if (result && result.data) {
+      if (result.data.code == 200) {
+        this.getDataPanicButton()
+        NotificationManager.success('Berhasil update status response!!', 'Success!');
+      } else {
+        NotificationManager.error('Gagal update status response!!', 'Failed');
+      }
+    }
+  }
+
+  renderTable = () => {
+    const t = this.props;
+    const dataTable2 = this.state.dataTable || [];
+    return (
+      <tbody>
+        {dataTable2.length !== 0 ? dataTable2.map((n) => {
+          return (
+            <tr key={n.id}>
+              <td>
+                <Tooltip title={this.props.t('edit')}>
+                  <i id="TooltipEdit" className="fa fa-edit" style={{ color: 'green', cursor: "pointer", marginRight: 15 }} onClick={() => this.handleEdit(n)}></i>
+                </Tooltip>
+                <Tooltip title={this.props.t('map')}>
+                  <i id="tooltipMap" className="fa fa-map" style={{ color: 'black', cursor: "pointer" }} onClick={() => this.handleMap(n)}></i>
+                </Tooltip>
+              </td>
+              <td>{n.created_at !== null ? moment(n.created_at).format("DD-MM-YYYY HH:mm:ss") : "-"}</td>
+              <td>{n.join_first_name !== null ? n.join_first_name : "-"}</td>
+              <td>{n.status_response !== null ? n.status_response : "-"}</td>
+            </tr>
+          )
+        }) : <tr>
+          <td colSpan="4" align="center">No Data Available</td>
+        </tr>
+        }
+      </tbody>
+    )
+  }
+
+  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 {
+      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('date') },
+      { name: this.props.t('nameHR') },
+      { name: this.props.t('statusResponse') },
+    ]
+    const t = this.props;
+    const { tooltipExport, dataTable, openDialogEdit, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipMap, tooltipDelete } = this.state
+    return (
+      <div>
+        <NotificationContainer />
+        <DialogForm
+          openDialog={openDialog}
+          closeDialog={this.handleCloseDialog}
+          toggleDialog={() => this.toggleMapDialog}
+          dataMap={this.state.dataMap}
+          showDialog={showDialog => this.showChildDialog = showDialog}
+        />
+        <DialogEdit
+          openDialog={openDialogEdit}
+          closeDialog={this.handleCloseDialogEdit}
+          toggleDialog={() => this.toggleEditDialog}
+          dataEdit={this.state.dataEdit}
+          showDialog={showDialog => this.showDialogEdit = showDialog}
+        />
+        <Card>
+          <CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
+            <h4>{this.props.t('panicButton')}</h4>
+            <div>
+              <Tooltip title={this.props.t('exportExcel')}>
+                <Button id="TooltipExport" color="primary" onClick={() => this.handleExportExcel()}><i className="fa fa-print"></i></Button>
+              </Tooltip>
+            </div>
+          </CardHeader>
+          <CardBody>
+            <div style={{ display: "flex", justifyContent: "space-between", marginBottom: "25px" }}>
+              <div style={{ width: "100%", display: "inline-flex", alignItems: "center" }}>
+                <div style={{ width: "50%", 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={{ width: "50%" }}>
+                  <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>
+            </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);