diff --git a/src/views/Master/MasterMenu/DialogForm.js b/src/views/Master/MasterMenu/DialogForm.js
index 759a56c..60b8134 100644
--- a/src/views/Master/MasterMenu/DialogForm.js
+++ b/src/views/Master/MasterMenu/DialogForm.js
@@ -1,166 +1,193 @@
-import React, { useEffect, useState } from 'react'
-import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
-import { Button, Form, FormGroup, Label, Input, Col, Row } from 'reactstrap';
-import { Select } from 'antd';
-import moment from 'moment';
-import 'antd/dist/antd.css';
-import { useTranslation } from 'react-i18next';
-
-const { Option } = Select
-
-const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, dataMenu }) => {
-  const [id, setId] = useState(0)
-  const [name, setName] = useState('')
-  const [url, setUrl] = useState('')
-  const [aliasName, setAliasName] = useState('')
-  const [icon, setIcon] = useState('')
-  const [sequence, setSequence] = useState(0)
-  const [parentId, setParentId] = useState(null)
-  const { t } = useTranslation()
-
-  useEffect(() => {
-    if (typeDialog === "Edit") {
-      console.log("data edit", dataEdit)
-      setId(dataEdit.id)
-      setName(dataEdit.name)
-      setUrl(dataEdit.url)
-      setIcon(dataEdit.icon)
-      setParentId(dataEdit.parent_id)
-      setSequence(dataEdit.sequence)
-      setAliasName(dataEdit.alias_name)
-    } else {
-      setId(0)
-      setName('')
-      setUrl('')
-      setIcon('')
-      setParentId(null)
-      setSequence(0)
-      setAliasName('')
-    }
-  }, [dataEdit, openDialog])
-
-  const handleSave = () => {
-    let data = '';
-    if (typeDialog === "Save") {
-      data = {
-        name,
-        url,
-        sequence: parseInt(sequence),
-        icon,
-        alias_name: aliasName
-      }
-
-      if (parentId && parentId > 0) {
-        data['parent_id'] = parentId
-      }
-
-      closeDialog('save', data);
-    } else {
-      data = {
-        id,
-        name,
-        url,
-        sequence: parseInt(sequence),
-        icon,
-        alias_name: aliasName
-      }
-
-      if (parentId && parentId > 0) {
-        data['parent_id'] = parentId
-      }
-
-      closeDialog('edit', data);
-    }
-    setId(0)
-    setName('')
-    setUrl('')
-    setIcon('')
-    setParentId(null)
-    setSequence(0)
-    setAliasName('')
-  }
-
-  const handleCancel = () => {
-    closeDialog('cancel', 'none')
-    setId(0)
-    setName('')
-    setUrl('')
-    setIcon('')
-    setParentId(null)
-    setSequence(0)
-    setAliasName('')
-  }
-
-  const onChangeParent = (val) => {
-    setParentId(val)
-  }
-
-  const setupSelectParent = () => {
-    return (
-      <>
-        {dataMenu.map((val, index) => {
-          return (
-            <Option key={index} value={val.id}>{val.name}</Option>
-          )
-        })}
-      </>
-    )
-  }
-
-  const renderForm = () => {
-    return (
-      <Form>
-        <Row>
-          <Col>
-            <FormGroup>
-              <Label className="capitalize">{t('name')} Menu</Label>
-              <Input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder={t('inputName')} />
-            </FormGroup>
-            <FormGroup>
-              <Label className="capitalize">URL</Label>
-              <Input type="text" value={url} onChange={(e) => setUrl(e.target.value)} placeholder={t('inputUrl')} />
-            </FormGroup>
-            <FormGroup>
-              <Label className="capitalize">{t('icon')} </Label>
-              <Input type="text" value={icon} onChange={(e) => setIcon(e.target.value)} placeholder={t('inputIcon')} />
-            </FormGroup>
-          </Col>
-          <Col>
-            <FormGroup>
-              <Label className="capitalize">{t('order')}</Label>
-              <Input type="number" value={sequence} onChange={(e) => setSequence(e.target.value)} placeholder={t('inputOrder')} />
-            </FormGroup>
-            <FormGroup>
-              <Label className="capitalize">{t('parentMenu')}</Label>
-              <Select showSearch defaultValue={parentId} onChange={onChangeParent} placeholder={t('inputParentMenu')} style={{ width: '100%' }}>
-                {setupSelectParent()}
-              </Select>
-            </FormGroup>
-            <FormGroup>
-              <Label className="capitalize">Alias Menu</Label>
-              <Input type="text" value={aliasName} onChange={(e) => setAliasName(e.target.value)} placeholder={t('inputAliasMenu')} />
-            </FormGroup>
-          </Col>
-        </Row>
-
-      </Form>
-    )
-  }
-
-
-  return (
-    <Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
-      <ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Tambah` : "Edit"} Menu</ModalHeader>
-      <ModalBody>
-        {renderForm()}
-      </ModalBody>
-      <ModalFooter>
-        <Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '}
-        <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button>
-      </ModalFooter>
-    </Modal>
-  )
-
-}
-
-export default DialogForm;
\ No newline at end of file
+import React, { useEffect, useState } from 'react'
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
+import { Button, Form, FormGroup, Label, Input, Col, Row } from 'reactstrap';
+import { Select } from 'antd';
+import moment from 'moment';
+import 'antd/dist/antd.css';
+import { useTranslation } from 'react-i18next';
+
+const { Option } = Select
+
+const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, dataMenu }) => {
+  const [id, setId] = useState(0)
+  const [name, setName] = useState('')
+  const [url, setUrl] = useState('')
+  const [aliasName, setAliasName] = useState('')
+  const [icon, setIcon] = useState('')
+  const [sequence, setSequence] = useState(0)
+  const [parentId, setParentId] = useState(null)
+  const { t } = useTranslation()
+
+  useEffect(() => {
+    if (typeDialog === "Edit") {
+      console.log("data edit", dataEdit)
+      setId(dataEdit.id)
+      setName(dataEdit.name)
+      setUrl(dataEdit.url)
+      setIcon(dataEdit.icon)
+      setParentId(dataEdit.parent_id)
+      setSequence(dataEdit.sequence)
+      setAliasName(dataEdit.alias_name)
+    } else {
+      setId(0)
+      setName('')
+      setUrl('')
+      setIcon('')
+      setParentId(null)
+      setSequence(0)
+      setAliasName('')
+    }
+  }, [dataEdit, openDialog])
+
+  const validation = () => {
+    if (!name || name === "") {
+      alert("Menu Name cannot be empty!");
+      return true;
+    }
+    if (!url || url === "") {
+      alert("URL cannot be empty!");
+      return true;
+    }
+    if (!icon || icon === "") {
+      alert("Icon cannot be empty!");
+      return true;
+    }
+    if (sequence < 0) {
+      alert("Order cannot be empty!");
+      return true;
+    }
+  }
+
+  const handleSave = () => {
+    let data = '';
+    const err = validation();
+    if (!err) {
+      if (typeDialog === "Save") {
+        data = {
+          name,
+          url,
+          sequence: parseInt(sequence),
+          icon,
+          alias_name: aliasName
+        }
+
+        if (parentId && parentId > 0) {
+          data['parent_id'] = parentId
+        }
+
+        closeDialog('save', data);
+      } else {
+        data = {
+          id,
+          name,
+          url,
+          sequence: parseInt(sequence),
+          icon,
+          alias_name: aliasName
+        }
+
+        if (parentId && parentId > 0) {
+          data['parent_id'] = parentId
+        }
+
+        closeDialog('edit', data);
+      }
+      setId(0)
+      setName('')
+      setUrl('')
+      setIcon('')
+      setParentId(null)
+      setSequence(0)
+      setAliasName('')
+    }
+  }
+
+  const handleCancel = () => {
+    closeDialog('cancel', 'none')
+    setId(0)
+    setName('')
+    setUrl('')
+    setIcon('')
+    setParentId(null)
+    setSequence(0)
+    setAliasName('')
+  }
+
+  const onChangeParent = (val) => {
+    setParentId(val)
+  }
+
+  const setupSelectParent = () => {
+    return (
+      <>
+        {dataMenu.map((val, index) => {
+          return (
+            <Option key={index} value={val.id}>{val.name}</Option>
+          )
+        })}
+      </>
+    )
+  }
+
+  const renderForm = () => {
+    return (
+      <Form>
+        <Row>
+            <Col md={12}>
+              <span style={{ color: "red" }}>*</span> Wajib diisi.
+            </Col>
+        </Row>
+        <Row>
+          <Col>
+            <FormGroup>
+              <Label className="capitalize">{t('name')} Menu<span style={{ color: "red" }}>*</span></Label>
+              <Input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder={t('inputName')} />
+            </FormGroup>
+            <FormGroup>
+              <Label className="capitalize">URL<span style={{ color: "red" }}>*</span></Label>
+              <Input type="text" value={url} onChange={(e) => setUrl(e.target.value)} placeholder={t('inputUrl')} />
+            </FormGroup>
+            <FormGroup>
+              <Label className="capitalize">{t('icon')}<span style={{ color: "red" }}>*</span> </Label>
+              <Input type="text" value={icon} onChange={(e) => setIcon(e.target.value)} placeholder={t('inputIcon')} />
+            </FormGroup>
+          </Col>
+          <Col>
+            <FormGroup>
+              <Label className="capitalize">{t('order')}<span style={{ color: "red" }}>*</span></Label>
+              <Input type="text" min="0" value={sequence} onChange={(e) => setSequence(e.target.value.replace(/[^0-9]/g, ''))} placeholder={t('inputOrder')} />
+            </FormGroup>
+            <FormGroup>
+              <Label className="capitalize">{t('parentMenu')}</Label>
+              <Select showSearch defaultValue={parentId} onChange={onChangeParent} placeholder={t('inputParentMenu')} style={{ width: '100%' }}>
+                {setupSelectParent()}
+              </Select>
+            </FormGroup>
+            <FormGroup>
+              <Label className="capitalize">Alias Menu</Label>
+              <Input type="text" value={aliasName} onChange={(e) => setAliasName(e.target.value)} placeholder={t('inputAliasMenu')} />
+            </FormGroup>
+          </Col>
+        </Row>
+
+      </Form>
+    )
+  }
+
+
+  return (
+    <Modal size="lg" isOpen={openDialog} toggle={toggleDialog}>
+      <ModalHeader className="capitalize" toggle={closeDialog}>{typeDialog == "Save" ? `Tambah` : "Edit"} Menu</ModalHeader>
+      <ModalBody>
+        {renderForm()}
+      </ModalBody>
+      <ModalFooter>
+        <Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{' '}
+        <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>{t('cancel')}</Button>
+      </ModalFooter>
+    </Modal>
+  )
+
+}
+
+export default DialogForm;