update master company

src/views/Master/MasterCompany/DialogForm.js

@@ -1,17 +1,18 @@
 import React, { useState, useMemo, useEffect } from 'react'
 import {
     Modal, ModalHeader, ModalBody, ModalFooter,
-    Button, Form, FormGroup, Label, Input, Col, Row, Card, CardBody, Fade
+    Button, Form, FormGroup, Row, Col, Label, Input,
 } from 'reactstrap';
-import { Pagination, Table, Tooltip, Select, Input as InputAntd } from 'antd';
+import { Pagination, Table, Tooltip, Select } from 'antd';
-import moment from 'moment';
+import SweetAlert from 'react-bootstrap-sweetalert';
 import { NotificationContainer, NotificationManager } from 'react-notifications';
-import DialogFormUser from './DialogFormUser';
+import DialogFormUser from './FormUser';
+import DialogFormMenu from './FormMenu';
 import 'antd/dist/antd.css';
 import { useTranslation } from 'react-i18next';
 import axios from "../../../const/interceptorApi"
 import {
-    USER_SEARCH, USER_EDIT, USER_DELETE, ROLE_SEARCH, DIVISI_SEARCH,
+    USER_SEARCH, USER_EDIT, USER_DELETE, ROLE_SEARCH, DIVISI_SEARCH, MENU_COMPANY_SEARCH
 } from '../../../const/ApiConst';
 const token = window.localStorage.getItem('token');
 const config = {
@@ -21,8 +22,8 @@ const config = {
         "Content-type": `application/json`
     }
 };
-const { Option } = Select
+const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, companyID, companyNameProp }) => {
-const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, roleList, companyID }) => {
+    const { Option } = Select
     const { t } = useTranslation()
     const [registrationnumber, setRegistrationNumber] = useState('')
     const [companyName, setCompanyName] = useState('')
@@ -38,8 +39,10 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
     const [htmlTitle, setHtmlTitle] = useState('')
     const [appName, setAppName] = useState('')
     const [baseUrl, setBaseUrl] = useState([])
-    const [statusCompany, setStatusCompany] = useState('active')
+    const [statusCompany, setStatusCompany] = useState(true)
     const [template, setTemplate] = useState('')
+    const [lastIdxURL, setLastIdxURL] = useState(0);
+
 
     const [dataTable, setDatatable] = useState([])
     const [openDialogUser, setOpenDialogUser] = useState(false)
@@ -48,12 +51,27 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
     const [rowsPerPage, setRowsPerPage] = useState(10)
     const [totalPage, setTotalPage] = useState(0)
     const [search, setSearch] = useState('')
-
+    const [idDelete, setIdDelete] = useState(0)
+    const [alertDelete, setAlertDelete] = useState(false)
+    const [dataEdit, setDataEdit] = useState([])
+    const [roleList, setRoleList] = useState([])
+
+
+    const [dataTableMenu, setDatatableMenu] = useState([])
+    const [currentPageMenu, setCurrentPageMenu] = useState(1)
+    const [rowsPerPageMenu, setRowsPerPageMenu] = useState(10)
+    const [totalPageMenu, setTotalPageMenu] = useState(0)
+    const [openDialogMenu, setOpenDialogMenu] = useState(false)
+    const [typeDialogMenu, setTypeDialogMenu] = useState("add")
     useEffect(() => {
-        if (companyID) {
+        if (companyID && typeDialog === 'Set') {
             getDataUser()
+            getRoleList()
+        } else {
+            getDataMenu()
         }
-    }, [companyID, rowsPerPage, currentPage])
+    }, [typeDialog, companyID, rowsPerPage, currentPage, rowsPerPageMenu, currentPageMenu])
+
 
     const onShowSizeChange = (current, pageSize) => {
         setRowsPerPage(pageSize)
@@ -62,6 +80,30 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
     const onPagination = (current, pageSize) => {
         setCurrentPage(current)
     }
+    const onShowSizeChangeMenu = (current, pageSize) => {
+        setRowsPerPageMenu(pageSize)
+    }
+
+    const onPaginationMenu = (current, pageSize) => {
+        setCurrentPageMenu(current)
+    }
+
+    const getRoleList = async () => {
+        const formData = {
+            "paging": { "start": 0, "length": -1 },
+
+            "orders": { "columns": ["id"], "ascending": false }
+        }
+
+        const result = await axios
+            .post(ROLE_SEARCH, formData, config)
+            .then(res => res)
+            .catch((error) => error.response);
+
+        if (result && result.data && result.data.code == 200) {
+            setRoleList(result.data.data);
+        }
+    }
 
     const getDataUser = async () => {
         let start = 0;
@@ -167,6 +209,46 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
         }
     }
 
+    const getDataMenu = async () => {
+        let start = 0;
+
+        if (currentPage !== 1 && currentPage > 1) {
+            start = (currentPage * rowsPerPage) - rowsPerPage
+        }
+
+        const payload = {
+            "paging": {
+                "start": start,
+                "length": rowsPerPage
+            },
+            "columns": [{
+                "name": "company_id",
+                "logic_operator": "=",
+                "value": companyID,
+                "operator": "AND"
+            }],
+            "joins": [{
+                "name": "m_menu",
+                "column_join": "menu_id",
+                "column_results": [
+                    "name"
+                ]
+            }],
+            "orders": { "columns": ["id"], "ascending": false }
+        }
+
+        const result = await axios
+            .post(MENU_COMPANY_SEARCH, payload, config)
+            .then(res => res)
+            .catch((error) => error.response);
+
+        if (result && result.data && result.data.code == 200) {
+            setDatatableMenu(result.data.data);
+            setTotalPageMenu(result.data.totalRecord);
+        } else {
+            NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
+        }
+    }
 
 
     const handleAddUser = async () => {
@@ -174,8 +256,51 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
         setOpenDialogUser(true)
     }
 
-    const closeDialogUser = () => {
+    const handleEditUser = async (data) => {
+        setDataEdit(data)
+        await setTypeDialogUser('Edit')
+        setOpenDialogUser(true)
+    }
+    const handleDeleteUser = async (id) => {
+        await setAlertDelete(true)
+        await setIdDelete(id)
+    }
+
+    const closeDialogUser = (type, message) => {
         setOpenDialogUser(false);
+        if (type == 'success') {
+            NotificationManager.success(`${message}`, "Success!!");
+            getDataUser()
+        } else if (type == 'Failed') {
+            NotificationManager.error(`${message}`, "Failed!!");
+        }
+    };
+
+    const handleAddMenu = async () => {
+        await setTypeDialogMenu("Save")
+        setOpenDialogMenu(true)
+    }
+
+    const handleEditMenu = async (data) => {
+        setDataEdit(data)
+        await setTypeDialogMenu('Edit')
+        setOpenDialogMenu(true)
+    }
+
+    const handleDeleteMenu = async (id) => {
+        await setAlertDelete(true)
+        await setIdDelete(id)
+    }
+
+    const closeDialogMenu = (type, message) => {
+        setOpenDialogMenu(false);
+        if (type == 'success') {
+            NotificationManager.success(`${message}`, "Success!!");
+            getDataMenu()
+        } else if (type == 'Failed') {
+            NotificationManager.error(`${message}`, "Failed!!");
+        }
+
     };
 
     const handleSave = () => {
@@ -263,26 +388,113 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
         }
     }
 
+    const isValidEmail = (email) => {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailRegex.test(email);
+    };
+
     const handleCancel = () => {
         closeDialog('cancel', 'none')
+        setDatatable([])
     }
 
-    const isValidEmail = (email) => {
+    const onConfirmDelete = async () => {
-        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        let url = USER_DELETE(idDelete);
-        return emailRegex.test(email);
+
+        const result = await axios.delete(url, config)
+            .then(res => res)
+            .catch((error) => error.response);
+
+        if (result && result.data && result.data.code === 200) {
+            getDataUser()
+            setIdDelete(0)
+            setAlertDelete(false)
+            NotificationManager.success(`Data user berhasil dihapus!`, 'Success!!');
+        } else {
+            setIdDelete(0)
+            setAlertDelete(false)
+            NotificationManager.error(`Data user gagal dihapus!`, 'Failed!!');
+        }
+    }
+
+    const cancelDelete = () => {
+        setAlertDelete(false)
+        setIdDelete(0)
+    }
+
+    const addBaseUrl = () => {
+        baseUrl.push({
+            id: lastIdxURL + 1,
+            url: "",
+        });
+        setBaseUrl(baseUrl);
+        setLastIdxURL(lastIdxURL + 1);
     };
 
-    const setupSelectRole = () => {
+    const handleChangeBaseURL = (value, index) => {
+        const newBaseURL = [...baseUrl];
+        newBaseURL[index] = value;
+        setBaseUrl(newBaseURL);
+    }
+
+    const deleteBaseURL = (id) => {
+        if (baseUrl && baseUrl.length > 0) {
+            let checkIdx = baseUrl.findIndex((o) => o.id === id);
+            if (checkIdx > -1) {
+                baseUrl.splice(checkIdx, 1);
+                setBaseUrl(baseUrl.filter((_, i2) => i2 !== id));
+            }
+        }
+    }
+
+    const handleLogoHeader = (content) => {
+        const newLogoHeader = [...logoHeader, {
+            type: "image",
+            content: content,
+        }];
+        setLogoHeader(newLogoHeader);
+    }
+
+    const RenderBaseURL = () => {
+        if (baseUrl.length > 0) {
+            return baseUrl.map((item, index) => {
                 return (
-            <>
+                    <Row key={index} style={{ marginBottom: 10 }}>
-                {roleList.map((val, index) => {
+                        <Col md={8}>
+                            <Input
+                                type="text"
+                                value={item.url}
+                                name="item"
+                                onChange={(e) => handleChangeBaseURL(e, index)}
+                            />
+                        </Col>
+                        <Col md={2}>
+                            <Button
+                                color="danger"
+                                size="sm"
+                                onClick={() => deleteBaseURL(item.id)}
+                            >
+                                <i className="fa fa-trash"></i>
+                            </Button>
+                        </Col>
+                    </Row>
+                );
+            });
+        } else if (baseUrl.length < 1) {
             return (
-                        <Option key={index} value={val.id}>{val.name}</Option>
+                <div
-                    )
+                    style={{
-                })}
+                        textAlign: "center",
-            </>
+                        color: "red",
-        )
+                        marginTop: 25,
+                        marginBottom: 25,
+                    }}
+                >
+                    No Base URL found
+                </div>
+            );
         }
+    };
 
 
     const renderFromCompany = () => {
@@ -293,14 +505,169 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
                         <span style={{ color: "red" }}>*</span>required.
                     </Col>
                 </Row>
+                <Row>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">Number Registration<span style={{ color: "red" }}>*</span></Label>
+                            <Input type="text" value={registrationnumber} onChange={(e) => setRegistrationNumber(e.target.value)} placeholder='Input Number Registration' />
+                        </FormGroup>
+                    </Col>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">Company Name<span style={{ color: "red" }}>*</span></Label>
+                            <Input type="text" value={companyName} onChange={(e) => setCompanyName(e.target.value)} placeholder=' Input Company Name' />
+                        </FormGroup>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">Email</Label>
+                            <Input type="email" value={emailCompany} onChange={(e) => setEmailCompany(e.target.value)} placeholder={t('inputEmail')}
+                                onBlur={(e) => {
+                                    if (!isValidEmail(e.target.value)) {
+                                        alert("Masukkan email yang valid.");
+                                    }
+                                }}
+                            />
+                        </FormGroup>
+                    </Col>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">Phone Number</Label>
+                            <Input type="text" value={phoneNumber} onChange={(e) => setPhoneNumber(e.target.value.replace(/[^0-9]/g, ''))} placeholder={t('inputNoPhone')} maxLength="15" />
+                        </FormGroup>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">Address</Label>
+                            <Input type="textarea" value={addressCompany} onChange={(e) => setAddressCompany(e.target.value)} placeholder=' Input Address' />
+                        </FormGroup>
+                    </Col>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">About</Label>
+                            <Input type="textarea" value={about} onChange={(e) => setAbout(e.target.value)} placeholder=' Input Company Name' />
+                        </FormGroup>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">App Name</Label>
+                            <Input type="text" value={appName} onChange={(e) => setAppName(e.target.value)} placeholder=' Input App Name' />
+                        </FormGroup>
+                    </Col>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">HTML Title</Label>
+                            <Input type="text" value={htmlTitle} onChange={(e) => setHtmlTitle(e.target.value)} placeholder=' Input HTML Title' />
+                        </FormGroup>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">Status Company<span style={{ color: "red" }}>*</span></Label>
+                            <Select style={{ width: "100%" }} defaultValue={statusCompany} onChange={(e) => setStatusCompany(e)} placeholder="Select a template for application">
+                                <Option value={true}>Active</Option>
+                                <Option value={false}>Inactive</Option>
+                            </Select>
+                        </FormGroup>
+                    </Col>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">Template Application<span style={{ color: "red" }}>*</span></Label>
+                            <Select style={{ width: "100%" }} defaultValue={template} onChange={(e) => setTemplate(e)} placeholder="Select a template for application">
+                                <Option value={'1'}>Construction</Option>
+                                <Option value={'2'}>IT (Information AND Technology)</Option>
+                            </Select>
+                        </FormGroup>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <Col md={12}>
+                            <Label className="capitalize">Base URL<span style={{ color: "red" }}>*</span></Label>
+                            <Row>
+                                <Col md={8}>
+                                    <p>URL</p>
+                                </Col>
+                                <Col md={2}>
+                                    <p>Action</p>
+                                </Col>
+                                <Col md={1}>
+                                    <Tooltip title="Add row">
+                                        <Button
+                                            size="sm"
+                                            color="primary"
+                                            onClick={() => addBaseUrl()}
+                                        >
+                                            <i className="fa fa-plus"></i>
+                                        </Button>
+                                    </Tooltip>
+                                </Col>
+                            </Row>
+                            <div style={{ marginBottom: 50 }}>{RenderBaseURL()}</div>
+                        </Col>
+                    </Col>
+                    <Col md={6}>
+                        <Row>
+                            <FormGroup>
+                                <Label className="capitalize" style={{ fontWeight: "bold" }}>Logo Login</Label>
+                                <Input
+                                    type="file"
+                                    accept="image/*"
+                                // onChange={(e) => handleLogoHeader(e.target.files[0])}
+                                />
+                            </FormGroup>
+                        </Row>
+                        <Row>
+                            <FormGroup>
+                                <Label className="capitalize" style={{ fontWeight: "bold" }}>Logo Header</Label>
+                                <Input
+                                    type="file"
+                                    accept="image/*"
+                                    onChange={(e) => handleLogoHeader(e.target.files[0])}
+                                />
+                            </FormGroup>
+                        </Row>
+                        <Row>
+                            <FormGroup>
+                                <Label className="capitalize" style={{ fontWeight: "bold" }}>Fav Icon Logo</Label>
+                                <Input
+                                    type="file"
+                                    accept="image/*"
+                                //   onChange={(e) => setProjectStructureOrg(e.target.files[0])}
+                                />
+                            </FormGroup>
+                        </Row>
+                    </Col>
+                </Row>
             </Form>
         )
     }
 
 
 
-    const RenderTable = useMemo(() => {
+    const RenderTableUser = useMemo(() => {
         const columns = [
+            {
+                title: t('action'),
+                dataIndex: '',
+                key: 'x',
+                render: (text, record) => <>
+                    <Tooltip title={t('edit')}>
+                        <Button size={"sm"} color='success' onClick={() => handleEditUser(text)}><i className="fa fa-edit"></i></Button>
+                    </Tooltip>{" "}
+                    <Tooltip title={t('delete')}>
+                        <Button size={"sm"} color='danger' onClick={() => handleDeleteUser(text.id)}><i className="fa fa-trash"></i></Button>
+                    </Tooltip>
+                </>,
+            },
+
             { title: t('nik'), dataIndex: 'ktp_number', key: 'ktp_number' },
             { title: t('nameHR'), dataIndex: 'name', key: 'name' },
 
@@ -314,28 +681,6 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
             { title: 'Phone No.', dataIndex: 'phone_number', key: 'phone_number' },
             { title: 'Email', dataIndex: 'email', key: 'email' },
             { title: 'Status', dataIndex: 'status_resource', key: 'status_status' }
-            //     title: t('action'),
-            //     dataIndex: '',
-            //     key: 'x',
-            //     render: (text, record) => <>
-            //         <Tooltip title={t('edit')}>
-            //             <Button size="small" type="link" style={{ color: 'green' }} onClick={() => handleEdit(text)}><i className="fa fa-edit"></i></Button>
-            //         </Tooltip>
-
-            //         <Tooltip title={t('delete')}>
-            //             <Button size="small" type="link" style={{ color: 'red' }} onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
-            //         </Tooltip>
-            //         <Tooltip title="Set User">
-            //             <Button size="small" type="link" style={{ color: 'primary' }} onClick={() => handleSetWorker(text)}><i className="fa fa-users"></i></Button>
-            //         </Tooltip>
-            //     </>,
-            // },
-
-            // { title: "Number Registration", dataIndex: 'registration_no', key: 'registration_no' },
-            // { title: "Name", dataIndex: 'company_name', key: 'company_name' },
-            // { title: 'Phone No.', dataIndex: 'phone_no', key: 'phone_no' },
-            // { title: 'Email', dataIndex: 'email', key: 'email' },
-            // { title: 'Status', dataIndex: 'is_active', key: 'is_active', render: (text, record) => <>{text && text !== false ? "Active" : 'Inactive'}</> }
         ];
         return (
             <Table
@@ -348,29 +693,92 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
         )
     }, [dataTable])
 
+
+    const renderTableMenu = useMemo(() => {
+        const columns = [
+            {
+                title: t('action'),
+                dataIndex: '',
+                key: 'x',
+                render: (text, record) => <>
+                    <Tooltip title={t('delete')}>
+                        <i id="TooltipDelete" className="fa fa-trash" style={{ color: 'red', marginRight: '10px', cursor: "pointer" }} onClick={() => handleDeleteMenu(text.id)}></i>
+                    </Tooltip>
+                    <Tooltip title={t('edit')}>
+                        <i id="TooltipEdit" className="fa fa-edit" style={{ color: 'green', cursor: "pointer" }} onClick={() => handleEditMenu(text)}></i>
+                    </Tooltip>
+                </>,
+            },
+            { title: t('name'), dataIndex: 'join_first_name', key: 'join_first_name' },
+            { title: 'Url', dataIndex: 'url', key: 'url' },
+            { title: t('icon'), dataIndex: 'icon', key: 'icon' },
+            { title: 'Alias', dataIndex: 'alias_name', key: 'alias_name' },
+            { title: t('order'), dataIndex: 'sequence', key: 'sequence' },
+            { title: t('parentMenu'), dataIndex: 'join_first_name', key: 'join_first_name', render: (text, record) => (text ? text : "-") }
+        ];
+        return (
+            <Table
+                rowKey="id"
+                size="small"
+                columns={columns}
+                dataSource={dataTableMenu}
+                pagination={false}
+            />
+        )
+    }, [dataTableMenu])
+
     return (
         <>
+            <NotificationContainer />
+            <SweetAlert
+                show={alertDelete}
+                warning
+                showCancel
+                confirmBtnText="Delete"
+                confirmBtnBsStyle="danger"
+                title={t('deleteConfirm')}
+                onConfirm={onConfirmDelete}
+                onCancel={() => cancelDelete()}
+                focusCancelBtn
+            >
+                {t('deleteMsg')}
+            </SweetAlert>
             <DialogFormUser
                 openDialog={openDialogUser}
                 closeDialog={closeDialogUser}
                 typeDialog={typeDialogUser}
                 roleList={roleList}
+                companyID={companyID}
+                dataEdit={dataEdit}
+            />
+            <DialogFormMenu
+                openDialog={openDialogMenu}
+                closeDialog={closeDialogMenu}
+                typeDialog={typeDialogMenu}
+                companyID={companyID}
+                companyName={companyNameProp}
+                dataEdit={dataEdit}
             />
             <Modal size="xl" fullscreen="xl" scrollable={true} isOpen={openDialog} toggle={toggleDialog}>
                 <ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{ width: "100%" }}>
-                    {typeDialog === "Save" ? `Add` : typeDialog === "Set" ? "Manage Admin" : "Edit"} Company
+                    {typeDialog === "Set-Menu" ? `Menu ${companyNameProp}` : typeDialog === "Save" ? `Add Data Company` : typeDialog === "Set" ? `Manage User ${companyNameProp}` : `Edit ${companyNameProp}`}
-                    {typeDialog === "Set" && (
+                    {typeDialog === "Set" ? (
-                        <Tooltip title={t("add")}>
+                        <Tooltip title="Add User">
                             <Button onClick={handleAddUser} size='sm' color="primary"><i className='fa fa-plus'></i></Button>
                         </Tooltip>
+                    ) :
+                        (
+                            <Tooltip title="Add Menu">
+                                <Button onClick={handleAddMenu} size='sm' color="primary"><i className='fa fa-plus'></i></Button>
+                            </Tooltip>
                         )}
                 </ModalHeader>
                 <ModalBody>
 
-                    {typeDialog !== "Set" && renderFromCompany()}
+                    {typeDialog !== "Set" && typeDialog !== "Set-Menu" && renderFromCompany()}
                     {typeDialog === "Set" && (
                         <>
-                            {RenderTable}
+                            {RenderTableUser}
                             <Pagination
                                 style={{ marginTop: "25px" }}
                                 showSizeChanger
@@ -383,10 +791,25 @@ const DialogForm = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdi
                             />
                         </>
                     )}
+                    {typeDialog === "Set-Menu" && (
+                        <>
+                            {renderTableMenu}
+                            <Pagination
+                                style={{ marginTop: "25px" }}
+                                showSizeChanger
+                                onShowSizeChange={onShowSizeChangeMenu}
+                                onChange={onPaginationMenu}
+                                pageSizeOptions={["10", "25", "50"]}
+                                total={totalPageMenu}
+                                pageSize={rowsPerPageMenu}
+                                current={currentPageMenu}
+                            />
+                        </>
+                    )}
 
                 </ModalBody>
                 <ModalFooter>
-                    {typeDialog !== "Set" && (
+                    {typeDialog !== "Set" && typeDialog !== "Set-Menu" && (
                         <Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>
                     )}
                     <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>cancel</Button>

src/views/Master/MasterCompany/FormMenu.js

@@ -0,0 +1,285 @@
+import React, { useState, useEffect } from 'react'
+import {
+    Modal, ModalHeader, ModalBody, ModalFooter,
+    Button, Form, FormGroup, Label, Input, Col, Row
+} from 'reactstrap';
+import { Transfer, Select } from 'antd';
+import 'antd/dist/antd.css';
+import { useTranslation } from 'react-i18next';
+import { MENU_LIST, MENU_COMPANY_ADD, MENU_COMPANY_EDIT } from '../../../const/ApiConst.js';
+import { NotificationContainer, NotificationManager } from 'react-notifications';
+import axios from 'axios';
+const token = window.localStorage.getItem('token');
+const FormMenu = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, companyName, companyID }) => {
+    const { Option } = Select
+    const [targetKeys, setTargetKeys] = useState([])
+    const [menuResource, setmenuResource] = useState([])
+    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()
+    const config = {
+        headers:
+        {
+            Authorization: `Bearer ${token}`,
+            "Content-type": `application/json`
+        }
+    };
+
+    const handleCLearData = () => {
+        // setId(0)
+        setTargetKeys([])
+    }
+
+    useEffect(() => {
+        if (!openDialog) {
+            handleCLearData()
+        } else {
+            getDataAllMenu();
+        }
+    }, [openDialog])
+
+    const getDataAllMenu = async () => {
+        const result = await axios
+            .get(MENU_LIST, config)
+            .then(res => res)
+            .catch((error) => error.response);
+
+        if (result && result.data && result.data.code == 200) {
+            setTransferMenu(result.data.data);
+        } else {
+            NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
+        }
+    }
+
+    const setTransferMenu = (data) => {
+        const finalData = []
+        data.map((val, index) => {
+            let data = {
+                key: val.id,
+                name: val.name,
+                url: val.url,
+                alias_name: val.alias_name,
+                icon: val.icon,
+                parent_id: val.parent_id,
+                sequence: val.sequence,
+            }
+            finalData.push(data)
+        });
+        setmenuResource(finalData)
+    }
+
+
+    const handleSave = async () => {
+        await saveMenuCompany()
+        handleCLearData()
+    }
+
+    useEffect(() => {
+        if (typeDialog === "Edit") {
+            setId(dataEdit.id)
+            setIcon(dataEdit.icon)
+            setParentId(dataEdit.parent_id)
+            setSequence(dataEdit.sequence)
+        } else {
+            setId(0)
+            setName('')
+            setUrl('')
+            setIcon('')
+            setParentId(null)
+            setSequence(0)
+            setAliasName('')
+        }
+    }, [dataEdit, openDialog])
+
+    const validation = () => {
+        if (!icon || icon === "") {
+            alert("Icon cannot be empty!");
+            return true;
+        }
+        if (sequence < 0) {
+            alert("Order cannot be empty!");
+            return true;
+        }
+    }
+
+    const saveMenuCompany = async () => {
+        let data = '';
+        const err = validation();
+        if (!err) {
+            if (typeDialog === "Edit") {
+                data = {
+                    id,
+                    sequence: parseInt(sequence),
+                    icon,
+                }
+
+                if (parentId && parentId > 0) {
+                    data['parent_id'] = parentId
+                }
+
+                const formData = data
+                const url = MENU_COMPANY_EDIT(data.id)
+                const result = await axios.put(url, formData, config)
+                    .then(res => res)
+                    .catch((error) => error.response);
+
+                if (result && result.data && result.data.code === 200) {
+                    closeDialog('success', 'Data menu berhasil diubah')
+                } else {
+                    closeDialog('failed', 'Data menu gagal diubah')
+                }
+            }
+            setId(0)
+            setName('')
+            setUrl('')
+            setIcon('')
+            setParentId(null)
+            setSequence(0)
+            setAliasName('')
+        } else {
+            const selectedData = menuResource.filter(item => targetKeys.includes(item.key));
+            const formDatas = selectedData.map(data => ({
+                menu_id: data.key,
+                parent_id: data.parent_id,
+                company_id: companyID,
+                icon: data.icon,
+                alias_name: data.alias_name,
+                url: data.url,
+                sequence: data.sequence
+            }));
+            const result = await axios
+                .post(MENU_COMPANY_ADD, formDatas, config)
+                .then(res => res)
+                .catch((error) => error.response);
+            if (result && result.status == 200) {
+                closeDialog('success', result.data.message)
+            } else {
+                closeDialog('failed', result.data.message)
+            }
+        }
+    }
+
+    const handleCancel = () => {
+        closeDialog('cancel', 'none')
+        setId(0)
+        setName('')
+        setUrl('')
+        setIcon('')
+        setParentId(null)
+        setSequence(0)
+        setAliasName('')
+    }
+
+    const handleChange = targetKeys => {
+        setTargetKeys(targetKeys)
+    };
+
+    const onChangeParent = (val) => {
+        setParentId(val)
+    }
+
+    const setupSelectParent = () => {
+        return (
+            <>
+                {menuResource.map((val, index) => {
+                    return (
+                        <Option key={index} value={val.id}>{val.name}</Option>
+                    )
+                })}
+            </>
+        )
+    }
+
+    const renderForm = () => {
+        return (
+            <Form>
+                <Row>
+                    <Col md={12}>
+                        <div style={{ justifyContent: 'center' }}>
+                            <Transfer
+                                showSearch
+                                listStyle={{
+                                    width: 250,
+                                    height: 300,
+                                }}
+                                titles={['Master Menu', `Menu ${companyName}`]}
+                                targetKeys={targetKeys}
+                                dataSource={menuResource}
+                                onChange={handleChange}
+                                render={item => item.name}
+                            />
+                        </div>
+                    </Col>
+                </Row>
+
+            </Form>
+        )
+    }
+    const renderFormEdit = () => {
+        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="hidden" 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="hidden" 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="hidden" value={aliasName} onChange={(e) => setAliasName(e.target.value)} placeholder={t('inputAliasMenu')} />
+                        </FormGroup> */}
+                    </Col>
+                </Row>
+
+            </Form>
+        )
+    }
+    return (
+        <>
+            <Modal ssize="md" scrollable={true} isOpen={openDialog} toggle={toggleDialog}>
+                <ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{ width: "100%" }}>
+                    Add Data Menu
+                </ModalHeader>
+                <ModalBody>
+                    {typeDialog !== 'Edit' ? renderForm() : renderFormEdit()}
+                </ModalBody>
+                <ModalFooter>
+                    <Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{''}
+                    <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>cancel</Button>
+                </ModalFooter>
+            </Modal>
+        </>
+    )
+
+}
+export default FormMenu;

src/views/Master/MasterCompany/FormUser.js

@@ -0,0 +1,267 @@
+import React, { useState, useEffect } from 'react'
+import {
+    Modal, ModalHeader, ModalBody, ModalFooter,
+    Button, Form, FormGroup, Label, Input, Col, Row
+} from 'reactstrap';
+import { Select } from 'antd';
+import { USER_ADD, USER_EDIT } from '../../../const/ApiConst.js';
+import 'antd/dist/antd.css';
+import { useTranslation } from 'react-i18next';
+import axios from 'axios';
+const { Option } = Select
+const token = window.localStorage.getItem('token');
+const config = {
+    headers:
+    {
+        Authorization: `Bearer ${token}`,
+        "Content-type": `application/json`
+    }
+};
+const FormUser = ({ openDialog, closeDialog, toggleDialog, typeDialog, dataEdit, roleList, companyID }) => {
+    const { t } = useTranslation()
+    const [id, setId] = useState('')
+    const [resourceName, setResourceName] = useState('')
+    const [username, setUsername] = useState('')
+    const [password, setPassword] = useState('')
+    const [employeeType, setEmployeeType] = useState('')
+    const [phoneNo, setPhoneNo] = useState('')
+    const [email, setEmail] = useState('')
+    const [gender, setGender] = useState('')
+    const [ktpNumber, setKtpNumber] = useState('')
+    const [roleId, setRoleId] = useState('')
+    const [statusResource, setStatusResource] = useState('active')
+
+    useEffect(() => {
+        if (typeDialog === "Edit") {
+            console.log(dataEdit);
+            setId(dataEdit.id)
+            setResourceName(dataEdit.name)
+            setUsername(dataEdit.username)
+            setPassword('')
+            setEmployeeType(dataEdit.employee_type)
+            setPhoneNo(dataEdit.phone_number)
+            setEmail(dataEdit.email)
+            setGender(dataEdit.gender)
+            setKtpNumber(dataEdit.ktp_number ? dataEdit.ktp_number : '')
+            setRoleId(dataEdit.role_id)
+        } else {
+            setId(0)
+            setResourceName('')
+            setUsername('')
+            setPassword('')
+            setEmployeeType('')
+            setPhoneNo('')
+            setEmail('')
+            setGender('')
+            setRoleId('')
+        }
+    }, [dataEdit, openDialog])
+
+
+    const handleSave = async () => {
+        let data = '';
+        if (typeDialog === "Save") {
+            data = {
+                name: resourceName,
+                employee_type: employeeType,
+                phone_number: phoneNo,
+                email,
+                gender,
+                ktp_number: ktpNumber,
+                role_id: roleId,
+                status_resource: statusResource,
+                company_id: companyID,
+                username,
+                password,
+            }
+            const formData = data
+            const result = await axios.post(USER_ADD, formData, config)
+                .then(res => res)
+                .catch((error) => error.response);
+
+            if (result && result.data && result.data.code === 200) {
+                closeDialog('success', `Data resource berhasil ditambah`)
+            } else {
+                closeDialog('failed', result.data.message)
+            }
+        } else {
+
+            data = {
+                id,
+                name: resourceName,
+                username,
+                employee_type: employeeType,
+                phone_number: phoneNo,
+                email,
+                gender,
+                ktp_number: ktpNumber,
+                role_id: roleId,
+                status_resource: statusResource,
+                company_id: companyID,
+                username,
+                password,
+            }
+            if (password == '') {
+                data.password = dataEdit.password;
+            }
+            let urlEdit = USER_EDIT(data.id)
+            const formData = data
+
+            const result = await axios.put(urlEdit, formData, config)
+                .then(res => res)
+                .catch((error) => error.response);
+
+            if (result && result.data && result.data.code === 200) {
+                closeDialog('success', `Data resource berhasil diedit`)
+            } else {
+                closeDialog('failed', result.data.message)
+            }
+
+        }
+    }
+
+    const handleCancel = () => {
+        closeDialog('cancel', 'none')
+    }
+
+    const isValidEmail = (email) => {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailRegex.test(email);
+    };
+
+    const setupSelectRole = () => {
+        return (
+            <>
+                {roleList.map((val, index) => {
+                    return (
+                        <Option key={index} value={val.id}>{val.name}</Option>
+                    )
+                })}
+            </>
+        )
+    }
+
+
+    const renderFormSetAdmin = () => {
+        return (
+            <Form>
+                <Row>
+                    <Col md={12}>
+                        <span style={{ color: "red" }}>*</span>required.
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">{t('nik')} <span style={{ color: "red" }}>*</span></Label>
+                            <Input type="text" value={ktpNumber} onChange={(e) => setKtpNumber(e.target.value.replace(/[^0-9]/g, ''))} placeholder={t('inputNik')} maxLength="16" />
+                        </FormGroup>
+                    </Col>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">{t('nameHR')}<span style={{ color: "red" }}>*</span></Label>
+                            <Input type="text" value={resourceName} onChange={(e) => setResourceName(e.target.value)} placeholder={t('inputName')} />
+                        </FormGroup>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">{t('employeeType')} <span style={{ color: "red" }}>*</span></Label>
+                            <Select showSearch value={employeeType} defaultValue={employeeType} onChange={(val) => setEmployeeType(val)} placeholder="Select Employee Type" style={{ width: '100%' }}>
+                                <Option value={'employee'}>Employee</Option>
+                                <Option value={'subcon'}>Subcon</Option>
+                                <Option value={'freelance'}>Freelance</Option>
+                            </Select>
+                        </FormGroup>
+
+                    </Col>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">Phone No.</Label>
+                            <Input type="text" value={phoneNo} onChange={(e) => setPhoneNo(e.target.value.replace(/[^0-9]/g, ''))} placeholder={t('inputNoPhone')} maxLength="15" />
+                        </FormGroup>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">Email</Label>
+                            <Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder={t('inputEmail')}
+                                onBlur={(e) => {
+                                    if (!isValidEmail(e.target.value)) {
+                                        alert("Masukkan email yang valid.");
+                                    }
+                                }}
+                            />
+                        </FormGroup>
+                    </Col>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">{t('gender')}</Label>
+                            <Select showSearch value={gender} defaultValue={gender} onChange={(val) => setGender(val)} placeholder={t('selectGender')} style={{ width: '100%' }}>
+                                <Option value="Male">Male</Option>
+                                <Option value="Female">Female</Option>
+                                {/* <Option value="Other">Other</Option> */}
+                            </Select>
+                        </FormGroup>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">{t('roles')} <span style={{ color: "red" }}>*</span></Label>
+                            <Select showSearch defaultValue={roleId} onChange={(val) => setRoleId(val)} placeholder={t('selectRole')} style={{ width: '100%' }}>
+                                {setupSelectRole()}
+                            </Select>
+                        </FormGroup>
+                    </Col>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">Status</Label>
+                            <Select style={{ width: "100%" }} defaultValue={statusResource} onChange={(e) => setStatusResource(e)} >
+                                <Option value={'active'}>Active</Option>
+                                <Option value={'inactive'}>Inactive</Option>
+                            </Select>
+                        </FormGroup>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">Username</Label>
+                            <Input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder={`Username...`} />
+                        </FormGroup>
+                    </Col>
+                </Row>
+                <Row>
+                    <Col md={6}>
+                        <FormGroup>
+                            <Label className="capitalize">Password</Label>
+                            <Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder={`Password...`} />
+                        </FormGroup>
+                    </Col>
+                </Row>
+            </Form>
+        )
+    }
+
+    return (
+        <>
+            <Modal size="xl" fullscreen="xl" scrollable={true} isOpen={openDialog} toggle={toggleDialog}>
+                <ModalHeader className="capitalize withBtn" toggle={closeDialog} style={{ width: "100%" }}>
+                    {typeDialog === "Save" ? `Add` : typeDialog === "Set" ? "Add " : "Edit"} User
+                </ModalHeader>
+                <ModalBody>
+                    {renderFormSetAdmin()}
+                </ModalBody>
+                <ModalFooter>
+                    <Button color="primary" onClick={() => handleSave()}>{typeDialog}</Button>{''}
+                    <Button className="capitalize" color="secondary" onClick={() => handleCancel()}>cancel</Button>
+                </ModalFooter>
+            </Modal>
+        </>
+    )
+
+}
+export default FormUser;

src/views/Master/MasterCompany/index.js

@@ -2,19 +2,14 @@ import * as XLSX from 'xlsx';
 import React, { useState, useEffect, useMemo } from 'react';
 import SweetAlert from 'react-bootstrap-sweetalert';
 import axios from "../../../const/interceptorApi"
-import moment from 'moment'
 import { Card, CardBody, CardHeader, Col, Row, Input } from 'reactstrap';
 import DialogForm from './DialogForm'
 import { NotificationContainer, NotificationManager } from 'react-notifications';
 import { Pagination, Table, Button, Tooltip } from 'antd';
 import {
-    COMPANY_MANAGEMENT_SEARCH, USER_ADD, USER_SEARCH, USER_EDIT, USER_DELETE, ROLE_SEARCH, DIVISI_SEARCH, USER_SHIFT_ADD, USER_SYNC
+    COMPANY_MANAGEMENT_SEARCH, USER_ADD, USER_SEARCH, USER_EDIT, USER_DELETE, DIVISI_SEARCH, USER_SHIFT_ADD, USER_SYNC
 } from '../../../const/ApiConst';
 import { useTranslation } from 'react-i18next';
-const url = "";
-const proyek_id = localStorage.getItem('proyek_id');
-const role_id = localStorage.getItem('role_id');
-const format = "DD-MM-YYYY";
 const token = window.localStorage.getItem('token');
 const config = {
     headers:
@@ -23,8 +18,7 @@ const config = {
         "Content-type": `application/json`
     }
 };
-const role_name = window.localStorage.getItem('role_name');
+
-const company_id = window.localStorage.getItem('company_id');
 const MasterCompany = ({ params }) => {
     const token = localStorage.getItem("token")
     const company_id = localStorage.getItem("company_id")
@@ -45,17 +39,16 @@ const MasterCompany = ({ params }) => {
     const [idDelete, setIdDelete] = useState(0)
     const [openDialog, setOpenDialog] = useState(false)
     const [openDialogShift, setOpenDialogShift] = useState(false)
-    const [roleList, setRoleList] = useState([])
     const [rowsPerPage, setRowsPerPage] = useState(10)
     const [search, setSearch] = useState('')
     const [totalPage, setTotalPage] = useState(0)
     const [typeDialog, setTypeDialog] = useState('Save')
     const [typeDialogShift, setTypeDialogShift] = useState('Save')
     const [companyID, setCompanyID] = useState('')
+    const [companyName, setCompanyName] = useState('')
     const pageName = params.name;
     const { t } = useTranslation();
     useEffect(() => {
-        getRoleList()
         getDivisiList()
     }, [])
 
@@ -63,12 +56,7 @@ const MasterCompany = ({ params }) => {
         getDataUser()
     }, [search, rowsPerPage, currentPage])
 
-    useEffect(() => {
+
-        const cekData = dataExport || []
-        if (cekData.length > 0) {
-            exportExcel()
-        }
-    }, [dataExport])
 
     const onShowSizeChange = (current, pageSize) => {
         setRowsPerPage(pageSize)
@@ -78,22 +66,6 @@ const MasterCompany = ({ params }) => {
         setCurrentPage(current)
     }
 
-    const getRoleList = async () => {
-        const formData = {
-            "paging": { "start": 0, "length": -1 },
-            "orders": { "columns": ["id"], "ascending": false }
-        }
-
-        const result = await axios
-            .post(ROLE_SEARCH, formData, config)
-            .then(res => res)
-            .catch((error) => error.response);
-
-        if (result && result.data && result.data.code == 200) {
-            setRoleList(result.data.data);
-        }
-    }
-
     const getDivisiList = async () => {
         const formData = {
             "paging": { "start": 0, "length": -1 },
@@ -188,122 +160,7 @@ const MasterCompany = ({ params }) => {
 
     }
 
-    const handleOpenDialogShift = async (type) => {
-        await setTypeDialogShift(type)
-        setOpenDialogShift(true)
-
-    }
-
-    const handleSync = async () => {
-        await axios.get(USER_SYNC, HEADER)
-            .then(res => res)
-            .catch((error) => error.response)
-    }
-
-    const handleExportExcel = async () => {
-
-        let start = 0;
-
-        if (currentPage !== 1 && currentPage > 1) {
-            start = (currentPage * rowsPerPage) - rowsPerPage
-        }
-
-        const payload = {
-            "paging": {
-                "start": start,
-                "length": -1
-            },
-            "columns": [],
-            "group_column": {
-                "operator": "AND",
-                "group_operator": "OR",
-                "where": [
-                    {
-                        "name": "name",
-                        "logic_operator": "~*",
-                        "value": search
-                    },
-
-                    {
-                        "name": "name",
-                        "logic_operator": "~*",
-                        "value": search,
-                        "table_name": "m_divisi"
-                    },
-                    {
-                        "name": "name",
-                        "logic_operator": "~*",
-                        "value": search,
-                        "table_name": "m_roles"
-                    },
-                    {
-                        "name": "phone_number",
-                        "logic_operator": "~*",
-                        "value": search
-                    },
-                    {
-                        "name": "email",
-                        "logic_operator": "~*",
-                        "value": search
-                    },
-                    {
-                        "name": "status_resource",
-                        "logic_operator": "~*",
-                        "value": search
-                    },
-                ]
-            },
-            "joins": [
-                {
-                    "name": "m_roles",
-                    "column_join": "role_id",
-                    "column_results": [
-                        "name",
-                        "description"
-                    ]
-                }
-            ],
-            "orders": {
-                "columns": [
-                    "id"
-                ],
-                "ascending": false
-            }
-        }
-        const result = await axios
-            .post(USER_SEARCH, payload, HEADER)
-            .then(res => res)
-            .catch((error) => error.response);
-
-        if (result && result.data && result.data.code == 200) {
-            let resData = result.data.data;
-            const excelData = [];
-            resData.map((n, index) => {
-                let dataRow = {
-                    "NIK (Nomor Induk Karyawan)": n.ktp_number,
-                    "Employee Name": n.name,
-                    "Divisi": n.join_second_name,
-                    "Employee Type": n.employee_type,
-                    "Role": n.join_first_name,
-                    "Phone No": n.phone_number,
-                }
-                excelData.push(dataRow)
-            })
-            await setDataExport(excelData);
-        } else {
-            NotificationManager.error('Gagal Export Data!!', 'Failed');
-        }
-    }
 
-    const exportExcel = () => {
-        const dataExcel = dataExport || [];
-        const fileName = `Data ${pageName}.xlsx`;
-        const ws = XLSX.utils.json_to_sheet(dataExcel);
-        const wb = XLSX.utils.book_new();
-        XLSX.utils.book_append_sheet(wb, ws, `Data ${pageName}`);
-        XLSX.writeFile(wb, fileName);
-        setDataExport([])
-    }
 
     const handleEdit = (data) => {
         setDataEdit(data)
@@ -312,15 +169,19 @@ const MasterCompany = ({ params }) => {
 
     const handleSetWorker = async (data) => {
         setCompanyID(data.id)
+        setCompanyName(data.company_name)
         await setDataEdit(data)
         handleOpenDialog('Set');
     }
 
-    const handleSetUserShift = async (data) => {
+    const handleSetMenu = async (data) => {
+        setCompanyID(data.id)
+        setCompanyName(data.company_name)
         await setDataEdit(data)
-        handleOpenDialogShift('Save');
+        handleOpenDialog('Set-Menu');
     }
 
+
     const handleDelete = async (id) => {
         await setAlertDelete(true)
         await setIdDelete(id)
@@ -336,13 +197,6 @@ const MasterCompany = ({ params }) => {
         setOpenDialog(false)
     }
 
-    const handleCloseDialogShift = (type, data) => {
-        if (type === "save") {
-            saveUserShift(data);
-        }
-        setDataEdit([])
-        setOpenDialogShift(false)
-    }
 
     const saveUser = async (data) => {
         const formData = data
@@ -358,20 +212,6 @@ const MasterCompany = ({ params }) => {
         }
     }
 
-    const saveUserShift = async (data) => {
-        const formData = data
-        const result = await axios.post(USER_SHIFT_ADD, formData, HEADER)
-            .then(res => res)
-            .catch((error) => error.response);
-
-        if (result && result.data && result.data.code === 200) {
-            getDataUser();
-            NotificationManager.success(`Data resource berhasil ditambah`, 'Success!!');
-        } else {
-            NotificationManager.error(`${result.data.message}`, 'Failed!!');
-        }
-    }
-
     const editUser = async (data) => {
 
         let urlEdit = USER_EDIT(data.id)
@@ -393,9 +233,7 @@ const MasterCompany = ({ params }) => {
         setOpenDialog(!openDialog)
     }
 
-    const toggleAddDialogShift = () => {
+
-        setOpenDialogShift(!openDialogShift)
-    }
 
     const onConfirmDelete = async () => {
         let url = USER_DELETE(idDelete);
@@ -431,13 +269,15 @@ const MasterCompany = ({ params }) => {
                     <Tooltip title={t('edit')}>
                         <Button size="small" type="link" style={{ color: 'green' }} onClick={() => handleEdit(text)}><i className="fa fa-edit"></i></Button>
                     </Tooltip>
-
                     <Tooltip title={t('delete')}>
                         <Button size="small" type="link" style={{ color: 'red' }} onClick={() => handleDelete(text.id)}><i className="fa fa-trash"></i></Button>
                     </Tooltip>
                     <Tooltip title="Set User">
                         <Button size="small" type="link" style={{ color: 'primary' }} onClick={() => handleSetWorker(text)}><i className="fa fa-users"></i></Button>
                     </Tooltip>
+                    <Tooltip title="Set Menu">
+                        <Button size="small" type="link" style={{ color: 'orange' }} onClick={() => handleSetMenu(text)}><i className="fa fa-bars"></i></Button>
+                    </Tooltip>
                 </>,
             },
 
@@ -481,9 +321,9 @@ const MasterCompany = ({ params }) => {
                 typeDialog={typeDialog}
                 dataEdit={dataEdit}
                 clickOpenModal={clickOpenModal}
-                roleList={roleList}
                 divisiList={divisiList}
                 companyID={companyID}
+                companyNameProp={companyName}
             />
 
             <Card>
@@ -497,12 +337,6 @@ const MasterCompany = ({ params }) => {
                             <Tooltip title='Add Company'>
                                 <Button style={{ background: "#4caf50", color: "#fff" }} onClick={() => handleOpenDialog('Save')}><i className="fa fa-plus"></i></Button>
                             </Tooltip>
-                            {/* <Tooltip title="HR Sync">
-                                <Button style={{ background: "#007bff ", color: "#fff", marginLeft: "5px" }} onClick={() => handleSync()}><i className="fa fa-spinner"></i></Button>
-                            </Tooltip>
-                            <Tooltip title={t('exportExcel')}>
-                                <Button style={{ marginLeft: "5px" }} onClick={() => handleExportExcel()}><i className="fa fa-print"></i></Button>
-                            </Tooltip> */}
                         </Col>
                     </Row>
                 </CardHeader>