diff --git a/src/views/Master/MasterRoles/DialogForm.js b/src/views/Master/MasterRoles/DialogForm.js
index 76e6d12..a511605 100644
--- a/src/views/Master/MasterRoles/DialogForm.js
+++ b/src/views/Master/MasterRoles/DialogForm.js
@@ -1,112 +1,136 @@
-import React, { Component } from 'react'
-import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
-import 'antd/dist/antd.css';
-import { withTranslation } from 'react-i18next';
-
-class DialogForm extends Component {
-  constructor(props) {
-    super(props)
-    this.state = {
-      id: 0,
-      name: "",
-      description: "",
-      openDialog: false,
-      isParentClick: false,
-    }
-  }
-
-  async componentDidMount() {
-    this.props.showDialog(this.showDialog);
-  }
-
-  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
-        })
-      } else {
-        this.setState({
-          id: 0,
-          name: "",
-          description: ""
-        })
-      }
-      this.setState({ isParentClick: false });
-    }
-  }
-
-
-  showDialog = () => {
-    this.setState({ isParentClick: true });
-  }
-
-
-  handleSave = () => {
-    const {
-      id,
-      name,
-      description
-    } = this.state
-
-    let data = '';
-    if (this.props.typeDialog === "Save") {
-      data = {
-        id,
-        name,
-        description
-      }
-      this.props.closeDialog('save', data);
-    } else {
-      data = {
-        id,
-        name,
-        description
-      }
-      this.props.closeDialog('edit', data);
-    }
-
-    this.setState({ id: 0 });
-
-  }
-
-  handleCancel = () => {
-    this.props.closeDialog('cancel', 'none')
-  }
-
-  renderForm = () => {
-    const { t } = this.props;
-    return (
-      <Form>
-        <FormGroup>
-          <Label>{this.props.t('nameRole')}</Label>
-          <Input type="text" value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} placeholder={this.props.t('inputName')} />
-        </FormGroup>
-        <FormGroup>
-          <Label>{this.props.t('description')}</Label>
-          <Input type="text" value={this.state.description} onChange={(e) => this.setState({ description: e.target.value })} placeholder={this.props.t('inputDescription')} />
-        </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('roles')}</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);
+import React, { Component } from 'react'
+import { Modal, ModalHeader, ModalBody, ModalFooter, Row, Col } from 'reactstrap';
+import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
+import 'antd/dist/antd.css';
+import { withTranslation } from 'react-i18next';
+
+class DialogForm extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      id: 0,
+      name: "",
+      description: "",
+      openDialog: false,
+      isParentClick: false,
+    }
+  }
+
+  async componentDidMount() {
+    this.props.showDialog(this.showDialog);
+  }
+
+  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
+        })
+      } else {
+        this.setState({
+          id: 0,
+          name: "",
+          description: ""
+        })
+      }
+      this.setState({ isParentClick: false });
+    }
+  }
+
+
+  showDialog = () => {
+    this.setState({ isParentClick: true });
+  }
+
+  validation = () => {
+    if (!this.state.name || this.state.name === "") {
+      alert("Role Name cannot be empty!");
+      return true;
+    }
+    if (!this.state.description || this.state.description === "") {
+      alert("Description cannot be empty!");
+      return true;
+    }
+  }
+
+  handleSave = () => {
+    const {
+      id,
+      name,
+      description
+    } = this.state
+
+    let data = '';
+    const err = this.validation();
+    if(!err) {
+      if (this.props.typeDialog === "Save") {
+        data = {
+          id,
+          name,
+          description
+        }
+        this.props.closeDialog('save', data);
+      } else {
+        data = {
+          id,
+          name,
+          description
+        }
+        this.props.closeDialog('edit', data);
+      }
+      this.setState({ id: 0 });
+    }
+
+
+  }
+
+  handleCancel = () => {
+    this.props.closeDialog('cancel', 'none')
+  }
+
+  renderForm = () => {
+    const { t } = this.props;
+    return (
+      <Form>
+        <Row>
+          <Col md={12}>
+            <span style={{ color: "red" }}>*</span> Wajib diisi.
+          </Col>
+        </Row>
+        <Row>
+          <Col md={12}>
+            <FormGroup>
+              <Label>{this.props.t('nameRole')}<span style={{ color: "red" }}>*</span></Label>
+              <Input type="text" value={this.state.name} onChange={(e) => this.setState({ name: e.target.value })} placeholder={this.props.t('inputName')} />
+            </FormGroup>
+            </Col>
+          <Col md={12}>
+            <FormGroup>
+              <Label>{this.props.t('description')}<span style={{ color: "red" }}>*</span></Label>
+              <Input type="text" value={this.state.description} onChange={(e) => this.setState({ description: e.target.value })} placeholder={this.props.t('inputDescription')} />
+            </FormGroup>
+            </Col>
+        </Row>
+      </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('roles')}</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);