diff --git a/src/views/Master/MasterTransaction/DialogForm.js b/src/views/Master/MasterTransaction/DialogForm.js
new file mode 100644
index 0000000..2e62465
--- /dev/null
+++ b/src/views/Master/MasterTransaction/DialogForm.js
@@ -0,0 +1,203 @@
+import React, { Component } from 'react'
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button, Form, FormGroup, Label, Input } from 'reactstrap';
+import 'antd/dist/antd.css';
+import axios from 'axios';
+import { COMPANY_MANAGEMENT_LIST } from '../../../const/ApiConst.js';
+import { withTranslation } from 'react-i18next';
+import { NotificationManager } from 'react-notifications';
+import { Select, DatePicker } from 'antd';
+import moment from "moment";
+
+const { Option } = Select
+class DialogForm extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      id: 0,
+      name: "",
+      ExpiredDateOspro: moment(),
+      description: "",
+      openDialog: false,
+      companyList: [],
+      scompany_id:null,
+      isParentClick: false,
+      company_id: props.company_id || null,
+      role_name: props.role_name || '',
+      token: props.token || '',
+      config: {
+        headers: {
+          Authorization: `Bearer ${props.token || ''}`,
+          "Content-type": "application/json",
+        }
+      }
+    }
+  }
+
+  async componentDidMount() {
+    this.props.showDialog(this.showDialog);
+    this.getDataProyekCompany();
+  }
+
+  async componentDidUpdate() {
+    if (this.state.isParentClick === true) {
+      if (this.props.typeDialog === "Edit") {
+        const { dataEdit } = this.props
+        this.setState({
+          id: dataEdit.id,
+          name: dataEdit.name,
+          description: dataEdit.description,
+          scompany_id : dataEdit.company_id
+        })
+      } else {
+        this.setState({
+          id: 0,
+          name: "",
+          description: "",
+          scompany_id:null
+        })
+      }
+      this.setState({ isParentClick: false });
+    }
+  }
+
+
+  showDialog = () => {
+    this.setState({ isParentClick: true });
+  }
+
+  getDataProyekCompany = async () => {
+    const result = await axios
+      .get(COMPANY_MANAGEMENT_LIST, this.state.config)
+      .then((res) => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code == 200) {
+      let dataRes = result.data.data || [];
+      this.setState({companyList: dataRes})
+    } else {
+      NotificationManager.error("Gagal Mengambil Data!!", "Failed");
+    }
+  };
+
+  handleDatePicker = (date, dateString) => {
+    this.setState({ ExpiredDateOspro: date })
+	};
+
+  validation = () => {
+    if (this.state.role_name === 'Super Admin' && !this.state.scompany_id || this.state.scompany_id === "") {
+			alert("Company data cannot be empty!");
+			return true;
+		}
+  }
+
+  handleSave = () => {
+    const {
+      id,
+      name,
+      description,
+      role_name,
+      company_id,
+      scompany_id
+    } = this.state
+
+    let data = '';
+    const err = this.validation();
+    if(!err) {
+      if (this.props.typeDialog === "Save") {
+        data = {
+          id,
+          name,
+          description,
+          company_id : role_name !== 'Super Admin' ? company_id : scompany_id,
+        }
+        this.props.closeDialog('save', data);
+      } else {
+        data = {
+          id,
+          name,
+          description,
+          company_id : role_name !== 'Super Admin' ? company_id : scompany_id,
+        }
+        this.props.closeDialog('edit', data);
+      }
+    }
+    this.setState({ id: 0 });
+  }
+
+  handleCancel = () => {
+    this.props.closeDialog('cancel', 'none')
+  }
+
+  onChangeCompanyProject = (val) => {
+		this.setState({scompany_id : val});
+	};
+
+  renderForm = () => {
+    const { t } = this.props;
+    return (
+      <Form>
+          {
+            this.state.role_name === 'Super Admin' && (
+              <FormGroup>
+                <Label className="capitalize">Assign Company Project<span style={{ color: "red" }}>*</span></Label>
+                <Select
+                  showSearch
+                  filterOption={(inputValue, option) =>
+                    option.children.toLowerCase().includes(inputValue.toLowerCase())
+                  }
+                  value={this.state.scompany_id}
+                  defaultValue={this.state.scompany_id}
+                  onChange={this.onChangeCompanyProject}
+                  style={{ width: "100%" }}
+                >
+                  {this.state.companyList.map((res) => (
+                    <Option key={res.id} value={res.id}>
+                      {res.company_name}
+                    </Option>
+                  ))}
+                </Select>
+              </FormGroup>
+            )
+          }
+        <FormGroup>
+          <Label>{this.props.t('Type Paket')}</Label>
+          <Input type="text" value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} placeholder={this.props.t('inputName')} />
+        </FormGroup>
+        <FormGroup>
+          <Label className="capitalize" style={{ fontWeight: "bold" }}>
+            End Date<span style={{ color: "red" }}>*</span>
+          </Label>
+          {/* <DatePicker
+            // disabledDate={(current) => {
+            //   let currentDate = moment(current).format("YYYY-MM-DD");
+            //   let customDate = moment(this.state.ExpiredDateOspro)
+            //     .add(1, "days")
+            //     .format("YYYY-MM-DD");
+            //   return current && currentDate < customDate;
+            // }}
+            format={"DD-MM-YYYY"}
+            style={{ width: "100%" }}
+            value={this.state.ExpiredDateOspro}
+            onChange={this.handleDatePicker()}
+          /> */}
+        </FormGroup>
+      </Form>
+    )
+  }
+
+  render() {
+    return (
+      <Modal isOpen={this.props.openDialog} toggle={this.props.toggleDialog}>
+        <ModalHeader toggle={this.props.closeDialog}>{this.props.typeDialog == "Save" ? "Tambah" : "Edit"} {this.props.t('Transaksi')}</ModalHeader>
+        <ModalBody>
+          {this.renderForm()}
+        </ModalBody>
+        <ModalFooter>
+          <Button color="primary" onClick={() => this.handleSave()}>{this.props.typeDialog}</Button>{' '}
+          <Button color="secondary" onClick={() => this.handleCancel()}>{this.props.t('cancel')}</Button>
+        </ModalFooter>
+      </Modal>
+    )
+  }
+}
+export default withTranslation()(DialogForm);
diff --git a/src/views/Master/MasterTransaction/index.js b/src/views/Master/MasterTransaction/index.js
new file mode 100644
index 0000000..d8d2449
--- /dev/null
+++ b/src/views/Master/MasterTransaction/index.js
@@ -0,0 +1,465 @@
+import * as XLSX from 'xlsx';
+import DialogForm from './DialogForm';
+import React, { Component } from 'react';
+import SweetAlert from 'react-bootstrap-sweetalert';
+import axios from 'axios';
+import { Button } from 'reactstrap';
+import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap';
+import { NotificationContainer, NotificationManager } from 'react-notifications';
+import { PROJECT_ROLE_ADD, TRANSACTION_SEARCH, PROJECT_ROLE_EDIT, PROJECT_ROLE_DELETE } from '../../../const/ApiConst.js';
+import { Pagination, Tooltip, Table } from 'antd';
+import { withTranslation } from 'react-i18next';
+import { checkActMenup } from '../../../const/CustomFunc';
+import moment from "moment";
+
+const LENGTH_DATA = 10
+class index extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      alertDelete: false,
+      alertNotDelete: false,
+      currentPage: 1,
+      dataEdit: null,
+      dataExport: [],
+      dataGs: [],
+      dataIdHo: [],
+      dataTable: [],
+      dialogMenuForm: false,
+      idDelete: 0,
+      idRoles: 0,
+      menuRoles: [],
+      openDialog: false,
+      page: 0,
+      rowsPerPage: LENGTH_DATA,
+      search: "",
+      tooltipDelete: false,
+      tooltipEdit: false,
+      tooltipExport: false,
+      tooltipImport: false,
+      tooltipMenu: false,
+      tooltipTambah: false,
+      totalPage: 0,
+      typeDialog: 'Save',
+      company_id: props.company_id || 0,
+      role_name: props.role_name || '',
+      role_id: props.role_id || 0,
+      user_id: props.user_id || 0,
+      isLogin: props.isLogin || false,
+      token: props.token || '',
+      all_project: props.all_project || null,
+      hierarchy: props.hierarchy || [],
+      user_name: props.user_name || '',
+      config: {
+        headers: {
+          Authorization: `Bearer ${props.token || ''}`,
+          "Content-type": "application/json",
+        }
+      }
+    };
+
+    this.columns = [
+      {
+        title: this.props.t('action'),
+        dataIndex: '',
+        key: 'x',
+        className: 'nowrap',
+        render: (text, record) => <>
+          <Tooltip title={this.props.t('delete')}>
+          <i className="fa fa-trash" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => this.handleDelete(text.id)}></i>
+          {/* {
+            checkActMenup('/product-transaction', 'delete') ?
+              <i className="fa fa-trash" style={{ color: 'red', marginRight: 10, cursor: "pointer" }} onClick={() => this.handleDelete(text.id)}></i>
+              :
+              null
+          } */}
+          </Tooltip>
+          <Tooltip title={this.props.t('edit')}>
+          <i className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleEdit(text)}></i>
+          {/* {
+            checkActMenup('/product-transaction', 'update') ?
+              <i className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => this.handleEdit(text)}></i>
+              :
+              null
+          } */}
+          </Tooltip>
+        </>,
+      },
+      {
+        title: this.state.role_name === 'Super Admin' ? "Company Name" : null,
+        dataIndex: "join_first_company_name",
+        key: "join_first_company_name",
+        render: (text, record) => {
+          return this.state.role_name === 'Super Admin' ? (
+            <span>{record.join_first_company_name}</span>
+          ) : null;
+        }
+      },
+      { title: 'Type Paket', dataIndex: 'type_paket', key: 'type_paket', className: "nowrap" },
+      {
+        title: this.props.t('Expired Date'), dataIndex: 'exp_ospro', key: 'exp_ospro',
+        render: (text,record) => {
+          return moment(record.exp_ospro).format('DD MMMM, YYYY');
+        }
+      },
+    ];
+  }
+
+  async componentDidMount() {
+    this.getDataTransaction();
+  }
+
+  async componentDidUpdate(prevProps, prevState) {
+    const { search } = this.state
+    if (search !== prevState.search) this.getDataTransaction()
+  }
+
+  handleSearch = e => {
+    const value = e.target.value
+    this.setState({ search: value, currentPage: 1 })
+  };
+
+  getDataTransaction = async () => {
+    let start = 0;
+    if (this.state.currentPage !== 1 && this.state.currentPage > 1) {
+      start = (this.state.currentPage * this.state.rowsPerPage) - this.state.rowsPerPage
+    }
+
+    const formData = {
+      "paging": { "start": start, "length": this.state.rowsPerPage },
+      "columns": [],
+      group_column: {
+        "operator": "AND",
+        "group_operator": "OR",
+        "where": [
+          {
+            "name": "type_paket",
+            "logic_operator": "~*",
+            "value": this.state.search,
+          }
+        ]
+      },
+      "joins": [],
+      "orders": { "columns": ["id"], "ascending": false }
+    }
+    if (this.state.role_name !== "Super Admin") {
+      formData.columns.push(
+        { "name": "company_id", "logic_operator": "=", "value": parseInt(this.state.company_id), "operator": "AND" },
+      )
+    } else {
+      formData.columns.push(
+        { "name": "company_id", "logic_operator": "is null", "value": "", "operator": "AND" },
+      )
+      formData.joins.push(
+        { "name": "m_company", "column_join": "company_id", "column_results": ["company_name"] }
+      )
+      formData.group_column.where.push(
+        { name: "company_name", logic_operator: "~*", value: this.state.search, table_name: "m_company" }
+      )
+    }
+    const result = await axios
+      .post(TRANSACTION_SEARCH, formData, this.state.config)
+      .then(res => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code == 200) {
+      this.setState({ dataTable: result.data.data, totalPage: result.data.totalRecord });
+    } else {
+      NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
+    }
+  }
+
+  handleOpenDialog = (type) => {
+    this.setState({ openDialog: true, typeDialog: type })
+    this.showChildDialog();
+  }
+
+  handleCloseDialog = (type, data) => {
+    if (type === "save") {
+      this.saveRole(data);
+    } else if (type === "edit") {
+      this.editRole(data);
+    }
+    this.setState({ openDialog: false })
+  }
+
+
+  handleOpenDialogMr = () => {
+    this.setState({ dialogMenuForm: true })
+    this.showMenuRolesDialog();
+  }
+  handleCloseDialogMr = (type, data) => {
+    if (type === "save") {
+      this.saveMenuRoles(data)
+    }
+    this.setState({ dialogMenuForm: false })
+  }
+
+  toggleAddDialog = () => {
+    this.setState({ openDialog: !this.state.openDialog })
+  }
+
+  onConfirmDelete = async () => {
+    const { idDelete } = this.state
+    const url = PROJECT_ROLE_DELETE(idDelete)
+
+    const result = await axios.delete(url, this.state.config)
+      .then(res => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code === 200) {
+      this.getDataTransaction()
+      this.setState({ idDelete: 0, alertDelete: false })
+      NotificationManager.success(`Data project role berhasil dihapus`, 'Success!!');
+    } else {
+      this.setState({ idDelete: 0, alertDelete: false })
+      NotificationManager.error(`Data project role gagal dihapus`, 'Failed!!');
+    }
+  }
+
+  saveRole = async (data) => {
+
+    const formData = {
+      name: data.name,
+      description: data.description,
+      company_id: data.company_id
+    }
+
+    const result = await axios.post(PROJECT_ROLE_ADD, formData, this.state.config)
+      .then(res => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code === 200) {
+      this.getDataTransaction();
+      NotificationManager.success(`Data project role berhasil ditambah`, 'Success!!');
+    } else {
+      NotificationManager.error(`${result.data.message}`, 'Failed!!');
+    }
+
+  }
+
+  editRole = async (data) => {
+
+    const formData = {
+      name: data.name,
+      description: data.description,
+      company_id : data.company_id
+    }
+    const url = PROJECT_ROLE_EDIT(data.id)
+    const result = await axios.put(url, formData, this.state.config)
+      .then(res => res)
+      .catch((error) => error.response);
+
+    if (result && result.data && result.data.code === 200) {
+      this.getDataTransaction();
+      NotificationManager.success(`Data project role berhasil diedit`, 'Success!!');
+    } else {
+      NotificationManager.error(`Data project role gagal di edit`, `Failed!!`);
+    }
+
+  }
+
+
+  handleEdit = (data) => {
+    this.setState({ dataEdit: data });
+    this.handleOpenDialog('Edit');
+  }
+
+  handleDelete = (id) => {
+    id == '1' ? this.setState({ alertNotDelete: true }) :
+      this.setState({ alertDelete: true, idDelete: id });
+  }
+
+  onShowSizeChange = (current, pageSize) => {
+    this.setState({ rowsPerPage: pageSize }, () => {
+      this.getDataTransaction();
+    })
+  }
+
+  onPagination = (current, pageSize) => {
+    this.setState({ currentPage: current, page: (current - 1) * pageSize }, () => {
+      this.getDataTransaction();
+    })
+  }
+
+  toggle = (param) => {
+    if (param === "edit") {
+      this.setState(prevState => ({ tooltipEdit: !prevState.tooltipEdit }))
+    } else if (param === "delete") {
+      this.setState(prevState => ({ tooltipDelete: !prevState.tooltipDelete }))
+    } else if (param === "menu") {
+      this.setState(prevState => ({ tooltipMenu: !prevState.tooltipMenu }))
+    } else if (param === "tambah") {
+      this.setState(prevState => ({ tooltipTambah: !prevState.tooltipTambah }))
+    } else if (param === "export") {
+      this.setState(prevState => ({ tooltipExport: !prevState.tooltipExport }))
+    }
+  }
+
+  dataNotAvailable = () => {
+    if (this.state.dataTable.length === 0) {
+      return (
+        <tr>
+          <td align="center" colSpan="3">{this.props.t('noData')}</td>
+        </tr>
+      )
+    }
+  }
+
+  handleExportExcel = async () => {
+    const payload = {
+      "paging": { "start": 0, "length": -1 },
+      "columns": [],
+      "group_column": {
+        "operator": "AND",
+        "group_operator": "OR",
+        "where": [
+          {
+            "name": "name",
+            "logic_operator": "~*",
+            "value": this.state.search,
+          }
+        ]
+      },
+      "joins": [],
+      "orders": { "columns": ["id"], "ascending": false }
+    }
+    if (this.state.role_name !== "Super Admin") {
+      payload.columns.push(
+        { "name": "company_id", "logic_operator": "=", "value": this.state.company_id, "operator": "AND" },
+      )
+    } else {
+      payload.columns.push(
+        { "name": "company_id", "logic_operator": "is null", "value": "", "operator": "AND" },
+      )
+      payload.joins.push(
+        { "name": "m_company", "column_join": "company_id", "column_results": ["company_name"] }
+      )
+      payload.group_column.where.push(
+        { name: "company_name", logic_operator: "~*", value: this.state.search, table_name: "m_company" }
+      )
+    }
+    const result = await axios
+      .post(TRANSACTION_SEARCH, payload, this.state.config)
+      .then(res => res)
+      .catch((error) => error.response);
+    if (result && result.data && result.statusText == "OK") {
+      const dataRes = result.data.data || [];
+      const dataExport = [];
+      dataRes.map((val, index) => {
+        let row = {};
+        if (this.state.role_name === 'Super Admin') {
+          row.Company = val.join_first_company_name;
+        }
+        row.Nama = val.name;
+        row.Deskripsi = val.description;
+        dataExport.push(row);
+      })
+      this.setState({ dataExport: dataExport }, () => {
+        this.exportExcel();
+      });
+    } else {
+      NotificationManager.error('Failed retreiving data!!', 'Failed');
+    }
+  }
+
+  exportExcel = () => {
+    const dataExcel = this.state.dataExport || [];
+    const fileName = "Data Project Role.xlsx";
+    const ws = XLSX.utils.json_to_sheet(dataExcel);
+    const wb = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(wb, ws, 'Data Project Role');
+    XLSX.writeFile(wb, fileName);
+  }
+
+  render() {
+    const { t } = this.props;
+    const { dataTable, openDialog, currentPage, rowsPerPage, totalPage, search, tooltipEdit, tooltipDelete, tooltipMenu } = this.state
+    let noSeq = 0;
+    return (
+      <div>
+        <NotificationContainer />
+        <SweetAlert
+          show={this.state.alertDelete}
+          warning
+          showCancel
+          confirmBtnText="Delete"
+          confirmBtnBsStyle="danger"
+          title={this.props.t('deleteConfirm')}
+          onConfirm={this.onConfirmDelete}
+          onCancel={() => this.setState({ alertDelete: false, idDelete: 0 })}
+          focusCancelBtn
+        >
+          {this.props.t('deleteMsg')}
+        </SweetAlert>
+        <SweetAlert
+          show={this.state.alertNotDelete}
+          warning
+          confirmBtnText="Can't Delete"
+          confirmBtnBsStyle="danger"
+          title="Data can't be delete!"
+          onConfirm={() => this.setState({ alertNotDelete: false })}
+        >
+          Data project role tidak dapat di hapus!!
+        </SweetAlert>
+        <DialogForm
+          openDialog={openDialog}
+          closeDialog={this.handleCloseDialog}
+          toggleDialog={() => this.toggleAddDialog}
+          typeDialog={this.state.typeDialog}
+          dataEdit={this.state.dataEdit}
+          showDialog={showDialog => this.showChildDialog = showDialog}
+          dataHs={this.state.dataIdHo}
+          company_id={this.state.company_id}
+					role_name={this.state.role_name}
+          token={this.state.token}
+        />
+        <Card>
+          <CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
+            <h4>{this.props.params.name}</h4>
+            <Row>
+              <Col>
+                <Input onChange={this.handleSearch} value={search} type="text" name="search" id="search" placeholder={this.props.t('search')} />
+              </Col>
+              <Col>
+                <Tooltip title={this.props.t('rolesAdd')}>
+                {
+                  checkActMenup('/roles', 'create') ?
+                      <Button Button id="TooltipTambah" color="success" onClick={() => this.handleOpenDialog('Save')}><i className="fa fa-plus"></i>
+                      </Button>
+                      :
+                      null
+                }
+                </Tooltip>
+                <Tooltip title={this.props.t('exportExcel')}>
+                  <Button style={{ marginLeft: "5px" }} id="TooltipExport" color="primary" onClick={() => this.handleExportExcel()}><i className="fa fa-print"></i></Button>
+                </Tooltip>
+              </Col>
+            </Row>
+          </CardHeader>
+          <CardBody>
+            <Table
+              rowKey="id"
+              size="small"
+              columns={this.columns}
+              dataSource={dataTable}
+              pagination={false}
+              bordered={false}
+            />
+            <Pagination
+              style={{ marginTop: "25px" }}
+              showSizeChanger
+              onShowSizeChange={this.onShowSizeChange}
+              onChange={this.onPagination}
+              defaultCurrent={currentPage}
+              pageSize={rowsPerPage}
+              total={totalPage}
+              pageSizeOptions={["10", "15", "20", "25", "30", "35", "40"]}
+            />
+          </CardBody>
+        </Card>
+      </div>
+    )
+  }
+}
+export default withTranslation()(index);