company management page

src/views/Master/MasterCompany/index.js

@@ -0,0 +1,523 @@
+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
+} 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:
+    {
+        Authorization: `Bearer ${token}`,
+        "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")
+    const HEADER = {
+        headers: {
+            "Content-Type": "application/json",
+            "Authorization": `Bearer ${token}`
+        }
+    }
+    const [alertDelete, setAlertDelete] = useState(false)
+    const [clickOpenModal, setClickOpenModal] = useState(false)
+    const [clickOpenModalShift, setClickOpenModalShift] = useState(false)
+    const [currentPage, setCurrentPage] = useState(1)
+    const [dataEdit, setDataEdit] = useState([])
+    const [dataExport, setDataExport] = useState([])
+    const [dataTable, setDatatable] = useState([])
+    const [divisiList, setDivisiList] = useState([])
+    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 pageName = params.name;
+    const { t } = useTranslation();
+    useEffect(() => {
+        getRoleList()
+        getDivisiList()
+    }, [])
+
+    useEffect(() => {
+        getDataUser()
+    }, [search, rowsPerPage, currentPage])
+
+    useEffect(() => {
+        const cekData = dataExport || []
+        if (cekData.length > 0) {
+            exportExcel()
+        }
+    }, [dataExport])
+
+    const onShowSizeChange = (current, pageSize) => {
+        setRowsPerPage(pageSize)
+    }
+
+    const onPagination = (current, pageSize) => {
+        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 },
+            "orders": { "columns": ["id"], "ascending": false }
+        }
+
+        const result = await axios
+            .post(DIVISI_SEARCH, formData, config)
+            .then(res => res)
+            .catch((error) => error.response);
+
+        if (result && result.data && result.data.code == 200) {
+            setDivisiList(result.data.data);
+        } else {
+            NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
+        }
+    }
+
+    const getDataUser = async () => {
+
+        let start = 0;
+
+        if (currentPage !== 1 && currentPage > 1) {
+            start = (currentPage * rowsPerPage) - rowsPerPage
+        }
+
+        const payload = {
+            "paging": {
+                "start": start,
+                "length": rowsPerPage
+            },
+            "columns": [],
+            "group_column": {
+                "operator": "AND",
+                "group_operator": "OR",
+                "where": [
+                    {
+                        "name": "name",
+                        "logic_operator": "~*",
+                        "value": search
+                    },
+                    {
+                        "name": "phone_number",
+                        "logic_operator": "~*",
+                        "value": search
+                    },
+                    {
+                        "name": "email",
+                        "logic_operator": "~*",
+                        "value": search
+                    },
+                    {
+                        "name": "status_resource",
+                        "logic_operator": "~*",
+                        "value": search
+                    },
+                ]
+            },
+            "joins": [
+
+            ],
+            "orders": {
+                "columns": [
+                    "id"
+                ],
+                "ascending": false
+            }
+        }
+
+        const result = await axios
+            .post(COMPANY_MANAGEMENT_SEARCH, payload, config)
+            .then(res => res)
+            .catch((error) => error.response);
+
+        if (result && result.data && result.data.code == 200) {
+            setDatatable(result.data.data);
+            setTotalPage(result.data.totalRecord);
+        } else {
+            NotificationManager.error('Gagal Mengambil Data!!', 'Failed');
+        }
+    }
+
+    const handleSearch = e => {
+        const value = e.target.value
+        setSearch(value);
+        setCurrentPage(1)
+    };
+
+    const handleOpenDialog = async (type) => {
+        await setTypeDialog(type)
+        setOpenDialog(true)
+
+    }
+
+    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)
+        handleOpenDialog('Edit');
+    }
+
+    const handleSetWorker = async (data) => {
+        await setDataEdit(data)
+        handleOpenDialog('Set');
+    }
+
+    const handleSetUserShift = async (data) => {
+        await setDataEdit(data)
+        handleOpenDialogShift('Save');
+    }
+
+    const handleDelete = async (id) => {
+        await setAlertDelete(true)
+        await setIdDelete(id)
+    }
+
+    const handleCloseDialog = (type, data) => {
+        if (type === "save") {
+            saveUser(data);
+        } else if (type === "edit") {
+            editUser(data);
+        }
+        setDataEdit([])
+        setOpenDialog(false)
+    }
+
+    const handleCloseDialogShift = (type, data) => {
+        if (type === "save") {
+            saveUserShift(data);
+        }
+        setDataEdit([])
+        setOpenDialogShift(false)
+    }
+
+    const saveUser = async (data) => {
+        const formData = data
+        const result = await axios.post(USER_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 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)
+        const formData = data
+
+        const result = await axios.put(urlEdit, formData, HEADER)
+            .then(res => res)
+            .catch((error) => error.response);
+
+        if (result && result.data && result.data.code === 200) {
+            getDataUser();
+            NotificationManager.success(`Data resource berhasil diedit`, 'Success!!');
+        } else {
+            NotificationManager.error(`${result.data.message}`, `Failed!!`);
+        }
+    }
+
+    const toggleAddDialog = () => {
+        setOpenDialog(!openDialog)
+    }
+
+    const toggleAddDialogShift = () => {
+        setOpenDialogShift(!openDialogShift)
+    }
+
+    const onConfirmDelete = async () => {
+        let url = USER_DELETE(idDelete);
+
+        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 RenderTable = useMemo(() => {
+        const columns = [
+            {
+                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: 'lightblue' }} onClick={() => handleSetWorker(text)}><i className="fa fa-key"></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
+                rowKey="id"
+                size="small"
+                columns={columns}
+                dataSource={dataTable}
+                pagination={false}
+            />
+        )
+    }, [dataTable])
+
+    return (
+        <div>
+            <NotificationContainer />
+            <SweetAlert
+                show={alertDelete}
+                warning
+                showCancel
+                confirmBtnText="Delete"
+                confirmBtnBsStyle="danger"
+                title={t('deleteConfirm')}
+                onConfirm={onConfirmDelete}
+                onCancel={() => cancelDelete()}
+                focusCancelBtn
+            >
+                {t('deleteMsg')}
+            </SweetAlert>
+            {/* <DialogForm
+                openDialog={openDialog}
+                closeDialog={handleCloseDialog}
+                toggleDialog={() => toggleAddDialog}
+                typeDialog={typeDialog}
+                dataEdit={dataEdit}
+                clickOpenModal={clickOpenModal}
+                roleList={roleList}
+                divisiList={divisiList}
+            /> */}
+            <Card>
+                <CardHeader style={{ display: "flex", justifyContent: "space-between" }}>
+                    <h4 className="capitalize">{pageName}</h4>
+                    <Row>
+                        <Col>
+                            <Input onChange={handleSearch} value={search} type="text" name="search" id="search" placeholder={t('searchHR')} />
+                        </Col>
+                        <Col>
+                            <Tooltip title={t('hradd')}>
+                                <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>
+                <CardBody>
+                    {RenderTable}
+                    <Pagination
+                        style={{ marginTop: "25px" }}
+                        showSizeChanger
+                        onShowSizeChange={onShowSizeChange}
+                        onChange={onPagination}
+                        pageSizeOptions={["10", "25", "50"]}
+                        total={totalPage}
+                        pageSize={rowsPerPage}
+                        current={currentPage}
+                    />
+                </CardBody>
+            </Card>
+        </div>
+    )
+}
+
+export default MasterCompany;