drafting

mail@pastecode.io avatar
unknown
javascript
2 years ago
86 kB
2
Indexable
Never
import React, { useEffect, useState } from 'react'
import { createMuiTheme, IconButton, makeStyles, Menu, MenuItem, MuiThemeProvider, Snackbar, Checkbox, TableCell, TextField, Tooltip, Typography, withStyles } from "@material-ui/core";
import MUIDataTable from "mui-datatables";
import DateFnsUtils from '@date-io/date-fns';
import { KeyboardDatePicker, MuiPickersUtilsProvider, KeyboardTimePicker } from '@material-ui/pickers';
import api from '../api';
import editIcon from '../../assets/1@3x.png';
import { Autocomplete } from '@material-ui/lab';
import format from 'date-fns/format';
import Pagination from '@material-ui/lab/Pagination';
import IcVertical from '../../assets/icon-vertical.png';
import CloseImage from '../../assets/ic_close.png';
import Loader from 'react-loader-spinner'
import { useHistory, useLocation } from 'react-router-dom';
import MuiAlert from '@material-ui/lab/Alert';
import { checkUtils } from '@material-ui/pickers/_shared/hooks/useUtils';

function Alert(props) {
    return <MuiAlert elevation={6} variant="filled" {...props} />;
}

const LightTooltip = withStyles((theme) => ({
    tooltip: {
        backgroundColor: theme.palette.common.white,
        color: 'rgba(0, 0, 0, 0.87)',
        boxShadow: theme.shadows[1],
        fontSize: 11,
    },
}))(Tooltip);

const CustomCheckbox = withStyles({
    root: {
        color: '#2a9c6c',
        '&$checked': {
            color: '#2a9c6c',
        },
        padding: 5,
        borderRadius: 20,
    },
    checked: {},
})((props) => <Checkbox color="default" {...props} />);

const useStyles = makeStyles((theme) => ({
    root: {
        '& > *': {
            marginTop: theme.spacing(2),
        },
    },
}));

const ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTableDraft1());
// const options = ct.customOptionsSearchAndFilter()

const style = {
    position: "sticky",
    zIndex: 110
};

export default function DraftingJadwal(props) {
    const location = useLocation()
    const [dataTable, setDataTable] = useState([])
    const [dataTemporary, setDataTemporary] = useState([])
    const [anchorEl, setAnchorEl] = useState(null);
    // const [loading, setLoading] = useState(second)
    const openMenu = Boolean(anchorEl);
    const ITEM_HEIGHT = 48;
    const menu = [
        'Edit',
        'Tambah',
        'Hapus',
    ];
    const [listHari, setListHari] = useState([
        'Senin',
        'Selasa',
        'Rabu',
        'Kamis',
        `Jum'at`,
        'Sabtu',
        'Minggu',
    ])
    const [listAntrian, setListAntrian] = useState([
        'FIFO',
        'TIMESLOT',
        'TIMEBLOK'
    ])
    const [listPembayaran, setListPembayaran] = useState([
        'UMUM',
        'BPJS/UMUM',
        'BPJS'
    ])
    const [listRoom, setListRoom] = useState([])
    const [listDataRoom, setListDataRoom] = useState([])
    const [listDokter, setLitDokter] = useState([])
    const [pickDokter, setPickDokter] = useState(null)
    const [visibleTambah, setVisibleTambah] = useState(false)
    const [listKlinik, setListKlinik] = useState([])
    const [pickKlinik, setPickKlinik] = useState(null)
    const [isRefresh, setIsRefresh] = useState(false)
    const [selectedIndex, setSelectedIndex] = useState([])
    const [selectedOption, setSelectedOption] = useState(null)

    const [messageAlert, setMessageAlert] = useState("")
    const [statusAlert, setStatusAlert] = useState("")
    const [openAlert, setOpenAlert] = useState(false);
    const [loading, setLoading] = useState(false)

    const [visibleDelete, setVisibleDelete] = useState(false);
    const [visibleConfirm, setVisibleConfirm] = useState(false);
    const [rowData, setRowData] = useState(null);

    const [errorDokter, setErrorDokter] = useState(false);
    const [msgErrorDokter, setMsgErrorDokter] = useState("");
    const [errorKlinik, setErrorKlinik] = useState(false);
    const [msgErrorKlinik, setMsgErrorKlinik] = useState("");

    const forceUpdate = React.useReducer(bool => !bool)[1];

    const handleClickMenu = (event, tableMeta) => {
        setSelectedOption(tableMeta.rowIndex)
        setAnchorEl(event.currentTarget);
    };

    const handleCloseMenu = () => {
        setAnchorEl(null);
        setSelectedOption(null)
    };


    useEffect(() => {
        getDataTable()
        getListDokter()
        getListRoom()
    }, [])

    const getListDokter = () => {
        api.create().getListDokter().then(response => {
            console.log(response);
            if (response.data) {
                if (response.data.status === true) {
                    let data = []
                    response.data.data.sort((a, b) => Number(a.name) - Number(b.name)).map((item) => {
                        if (item.deleted_at === null) {
                            data.push(item)
                        }
                    })
                    setLitDokter(data)
                }
            }
        })
    }

    const getDataDokter = (body) => {
        console.log(body);
        api.create().getDetailDokter(body.id).then(response => {
            console.log(response);
            if (response.data) {
                if (response.data.status === true) {
                    let data = []
                    response.data.data && response.data.data[0].polyclinic.sort((a, b) => Number(a.name) - Number(b.name)).map((item) => {
                        data.push(item)
                    })
                    setPickDokter(body)
                    setListKlinik(data)
                    forceUpdate()
                }
            }
        })
    }

    const getListRoom = () => {
        api.create().getRoom().then(response => {
            console.log(response);
            if (response.data) {
                if (response.data.status === true) {
                    let data = []
                    response.data.data.sort((a, b) => Number(a.name) - Number(b.name)).map((item) => {
                        if (item.deleted_at === null) {
                            data.push(item.name)
                        }
                    })
                    setListDataRoom(response.data.data)
                    setListRoom(data)
                }
            }
        })
    }

    const getDataTable = (sisa) => {
        api.create().getMasterDraftScheduleDokter().then(response => {
            console.log(response);
            if (response.data) {
                if (response.data.status === true) {
                    if (response.data.data.length > 0) {
                        let data = []
                        response.data.data.sort((a, b) => a.doctor_name.localeCompare(b.doctor_name)).map((item) => {
                            if (item.effective_date.length > 0) {
                                item.effective_date.map((items) => {
                                    if (items.schedule.length > 0) {
                                        items.schedule.map((i, idx) => {
                                            data.push([
                                                item.id,
                                                item.polyclinic_id,
                                                item.doctor_name,
                                                item.polyclinic_name,
                                                items.date,
                                                i.day,
                                                i.time_start,
                                                i.time_end,
                                                i.time_type,
                                                i.time,
                                                i.quota,
                                                i.service_type,
                                                i.quota_bpjs,
                                                i.service_duration === null ? 0 : i.service_duration,
                                                i.room_name,
                                                i.remarks,
                                                i.updated_at ? i.updated_at : i.created_at,
                                                i.updated_by ? i.updated_by : i.created_by,
                                                idx === 0 ? 1 : 0, //parent
                                                0, //editable
                                                i.id,
                                                item.doctor_id
                                            ])
                                        })
                                    }

                                })
                            }
                        })
                        if (sisa && sisa.length > 0) {
                            sisa.map((i) => {
                                data.push(i)

                            })
                        }
                        console.log(data, sisa);
                        setDataTable(data)
                        setDataTemporary(data)
                        setIsRefresh(false)
                    } else {
                        let data = []
                        if (sisa && sisa.length > 0) {
                            sisa.map((i) => {
                                data.push(i)

                            })
                        }
                        console.log(data, sisa);
                        setDataTable(data)
                        setIsRefresh(false)
                    }
                    forceUpdate()
                }
            }
        })
    }

    const handleAddData = () => {
        setIsRefresh(true)
        api.create().getLastScheduleDokter(`filter={"doctor_id":[${pickDokter.id}]}`).then(response => {
            console.log(response);
            if (response.data) {
                if (response.data.status === true) {
                    let idxPoli = response.data.data.findIndex((val) => val.polyclinic_id === pickKlinik.id)
                    console.log(idxPoli);
                    let detailsCreate = []
                    if (idxPoli > -1) {
                        let idxListDoc = dataTable.findIndex((val) => val[0] === response.data.data[idxPoli].id)
                        let idxListPol = dataTable.findIndex((val) => val[1] === response.data.data[idxPoli].polyclinic_id)
                        if (idxListDoc > -1 && idxListPol > -1) {
                            // setOpenAlert(true)
                            // setMessageAlert("Draft Master jadwal Dokter sudah terbuat!")
                            // setStatusAlert("warning")
                            alert('Draft Master jadwal Dokter sudah terbuat!')
                            setVisibleTambah(false)
                            setIsRefresh(false)
                        } else {
                            let data = response.data.data
                            console.log();
                            if (data.length > 0) {
                                let detailsCreate = []
                                data.map((item) => {
                                    let detailsCreateSchedule = []
                                    if (data[idxPoli].schedule.days.length > 0) {
                                        data[idxPoli].schedule.days.map((items, idx) => {
                                            detailsCreateSchedule.push({
                                                "day_id": items.id,
                                                "session": [
                                                    {
                                                        "service_type": items.service_type_code,
                                                        "time_type": items.time_type_code,
                                                        "time": items.time,
                                                        "quota": items.quota,
                                                        "quota_bpjs": items.quota_bpjs,
                                                        "service_duration": 0,
                                                        "time_start": items.time_start,
                                                        "time_end": items.time_end,
                                                        "room_id": items.room_id,
                                                        "remarks": items.remarks,
                                                        "internal_notes": items.internal_notes
                                                    }
                                                ]
                                            })
                                        })
                                    }
                                    detailsCreate.push({
                                        "id": item.id,
                                        "effective_date": format(new Date(item.schedule.effective_date), 'yyyy-MM-dd'),
                                        "schedule": detailsCreateSchedule
                                    })
                                    setIsRefresh(false)

                                    if (detailsCreate.length > 0) {
                                        let payload = {
                                            "doctor_details": detailsCreate
                                        }
                                        console.log(JSON.stringify(payload));
                                        api.create().createDraftScheduleDokter(payload).then(response => {
                                            console.log(response);
                                            if (response.data) {
                                                if (response.data.status === true) {
                                                    setTimeout(() => {
                                                        setOpenAlert(true)
                                                        setMessageAlert(response.data.data)
                                                        setStatusAlert("success")
                                                        setVisibleTambah(false)
                                                        getDataTable()
                                                        setIsRefresh(false)
                                                        // setSelectedIndex([])
                                                        // getDataTable(sisa)
                                                    }, 500);
                                                } else {
                                                    if (response.data.data) {
                                                        // setOpenAlert(true)
                                                        // setMessageAlert(JSON.stringify(response.data.data))
                                                        // setStatusAlert("warning")
                                                        alert(JSON.stringify(response.data.data))
                                                        setIsRefresh(false)
                                                    }
                                                }
                                            }
                                        })
                                    }
                                })
                            }
                        }
                    } else {
                        setVisibleConfirm(true)
                        setVisibleTambah(false)
                        setPickDokter(null)
                        setPickKlinik(null)
                        setTimeout(() => {
                            setIsRefresh(false)
                        }, 500);
                    }
                }
            }
        })
    }

    const checked = (tableMeta) => {
        // console.log(selectedIndex);
        forceUpdate()
        if (selectedIndex.length > 0) {
            let a = selectedIndex.findIndex((val) => val === tableMeta.rowData[0])
            if (a > -1) {
                return true
            } else {
                return false
            }
        } else {
            return false
        }
    }

    const handleCheked = (val, tableMeta) => {
        // console.log(tableMeta);
        // setSelectedIndex([tableMeta.rowData[0]])
        let idx = selectedIndex.findIndex((val) => val === tableMeta.rowData[0])
        if (idx > -1) {
            selectedIndex.splice(idx, 1)
        } else {
            selectedIndex.push(tableMeta.rowData[0])
        }
        checked(tableMeta)
    }

    const handleOption = (option, tableMeta) => {
        console.log(tableMeta);
        if (option === 'Hapus') {
            setRowData(tableMeta)
            setVisibleDelete(true)
            // if (tableMeta.rowData[18] === 1) {
            //     dataTable.sort((a, b) => b[0] - a[0]).splice(tableMeta.rowIndex, 1)
            //     dataTable[tableMeta.rowIndex][18] = 1
            //     forceUpdate()
            // } else {
            //     dataTable.sort((a, b) => b[0] - a[0]).splice(tableMeta.rowIndex, 1)
            //     forceUpdate()
            // }
        }
        if (option === 'Edit') {
            setIsRefresh(true)
            let idx = []
            dataTable.sort((a, b) => b[0] - a[0]).map((item, index) => {
                if (item[0] === tableMeta.rowData[0]) {
                    idx.push(index)
                }
            })
            console.log(idx);
            if (idx.length > 0) {
                idx.map((item) => {
                    if (dataTable[item][19] === 0) {
                        dataTable[item][19] = 1
                        dataTemporary[item][19] = 1
                    } else {
                        dataTable[item][19] = 0
                        dataTemporary[item][19] = 0
                    }
                })
                setTimeout(() => {
                    console.log(dataTable);
                    setIsRefresh(false)
                    forceUpdate()
                }, 300);
            }
        }
        if (option === 'Tambah') {
            setIsRefresh(true)
            dataTable.sort((a, b) => b[0] - a[0]).splice(tableMeta.rowIndex + 1, 0,
                [
                    tableMeta.rowData[0],
                    tableMeta.rowData[1],
                    tableMeta.rowData[2],
                    tableMeta.rowData[3],
                    null,
                    null,
                    null,
                    null,
                    null,
                    0,
                    0,
                    null,
                    0,
                    0,
                    null,
                    "",
                    "",
                    "",
                    0,
                    tableMeta.rowData[19] === 1 ? 1 : 0,
                    null,
                    tableMeta[21]
                ])
            setTimeout(() => {
                setIsRefresh(false)
                console.log(dataTable, tableMeta);
                forceUpdate()
            }, 500);
        }
        handleCloseMenu()
    }

    const saveToDraft = () => {
        if (selectedIndex.length > 0) {
            setIsRefresh(true)
            let data = []
            for (var i = 0; i < dataTable.length; ++i) {
                for (var j = 0; j < selectedIndex.length; ++j) {
                    if (dataTable[i][0] === selectedIndex[j]) {    // If element is in both the arrays
                        data.push(dataTable[i]);        // Push to arr array
                    }
                }
            }
            let sisa = []
            dataTable.map((i) => {
                if (selectedIndex.includes(i[0])) {

                } else {
                    if (i[17] === "") {
                        sisa.push(i)
                    }
                }
            })
            console.log(data, sisa, selectedIndex);
            let details = []
            let detailsCreate = []
            let effDate = ''
            let type = ''
            let idxBy = data.findIndex((val) => val[17] !== "")
            const result = Object.values(data.reduce((acc, x) => {
                acc[x[1]] = [...(acc[x[1]] || []), x];
                return acc;
            }, {}));
            let dataTampung = []
            result.map((items) => {
                items.map((i, index) => {
                    let room = listDataRoom.findIndex((val) => val.name === i[14])
                    let idx = details.findIndex((val) => val.id && val.id === i[0])
                    let idSchedule = Number(i[20])
                    if (idx > -1) {
                        if (idSchedule) {
                            details[idx].schedule.push({
                                "id": idSchedule,
                                "day_id": i[5] === "Senin" ? 1 : i[5] === "Selasa" ? 2 : i[5] === "Rabu" ? 3 : i[5] === "Kamis" ? 4 : i[5] === "Jum'at" ? 5 : i[5] === "Sabtu" ? 6 : 7,
                                "service_type": i[11] === "UMUM" ? 2 : i[11] === "BPJS" ? 1 : 3,
                                "time_type": i[8] === "FIFO" ? 3 : i[8] === "TIMESLOT" ? 1 : 2,
                                "time": Number(i[9]),
                                "quota": Number(i[10]),
                                "quota_bpjs": Number(i[12]),
                                "service_duration": Number(i[13]),
                                "time_start": String(i[6]).substring(0, 5),
                                "time_end": String(i[7]).substring(0, 5),
                                "room_id": listDataRoom[room].id,
                                "remarks": i[15],
                            })
                        } else {
                            details[idx].schedule.push({
                                "day_id": i[5] === "Senin" ? 1 : i[5] === "Selasa" ? 2 : i[5] === "Rabu" ? 3 : i[5] === "Kamis" ? 4 : i[5] === "Jum'at" ? 5 : i[5] === "Sabtu" ? 6 : 7,
                                "service_type": i[11] === "UMUM" ? 2 : i[11] === "BPJS" ? 1 : 3,
                                "time_type": i[8] === "FIFO" ? 3 : i[8] === "TIMESLOT" ? 1 : 2,
                                "time": Number(i[9]),
                                "quota": Number(i[10]),
                                "quota_bpjs": Number(i[12]),
                                "service_duration": Number(i[13]),
                                "time_start": String(i[6]).substring(0, 5),
                                "time_end": String(i[7]).substring(0, 5),
                                "room_id": listDataRoom[room].id,
                                "remarks": i[15],
                            })
                        }
                    } else {
                        if (idSchedule) {
                            details.push({
                                "id": i[0],
                                "doctor_id": i[21],
                                "polyclinic_id": i[1],
                                "activeinactive": 1,
                                "effective_date": format(new Date(i[4]), 'yyyy-MM-dd'),
                                "schedule": [
                                    {
                                        "id": idSchedule,
                                        "day_id": i[5] === "Senin" ? 1 : i[5] === "Selasa" ? 2 : i[5] === "Rabu" ? 3 : i[5] === "Kamis" ? 4 : i[5] === "Jum'at" ? 5 : i[5] === "Sabtu" ? 6 : 7,
                                        "service_type": i[11] === "UMUM" ? 2 : i[11] === "BPJS" ? 1 : 3,
                                        "time_type": i[8] === "FIFO" ? 3 : i[8] === "TIMESLOT" ? 1 : 2,
                                        "time": Number(i[9]),
                                        "quota": i[10],
                                        "quota_bpjs": i[12],
                                        "service_duration": i[13],
                                        "time_start": String(i[6]).substring(0, 5),
                                        "time_end": String(i[7]).substring(0, 5),
                                        "room_id": listDataRoom[room].id,
                                        "remarks": i[15],
                                    }
                                ]
                            })
                        } else {
                            details.push({
                                "id": i[0],
                                "doctor_id": i[21],
                                "polyclinic_id": i[1],
                                "activeinactive": 1,
                                "effective_date": format(new Date(i[4]), 'yyyy-MM-dd'),
                                "schedule": [
                                    {
                                        "day_id": i[5] === "Senin" ? 1 : i[5] === "Selasa" ? 2 : i[5] === "Rabu" ? 3 : i[5] === "Kamis" ? 4 : i[5] === "Jum'at" ? 5 : i[5] === "Sabtu" ? 6 : 7,
                                        "service_type": i[11] === "UMUM" ? 2 : i[11] === "BPJS" ? 1 : 3,
                                        "time_type": i[8] === "FIFO" ? 3 : i[8] === "TIMESLOT" ? 1 : 2,
                                        "time": i[9],
                                        "quota": i[10],
                                        "quota_bpjs": i[12],
                                        "service_duration": i[13],
                                        "time_start": String(i[6]).substring(0, 5),
                                        "time_end": String(i[7]).substring(0, 5),
                                        "room_id": listDataRoom[room].id,
                                        "remarks": i[15],
                                    }
                                ]
                            })
                        }

                    }
                })

            })

            if (details.length > 0) {
                let payload = {
                    "doctor_details": details
                }
                console.log(JSON.stringify(payload));
                api.create().editDraftScheduleDokter(payload).then(response => {
                    console.log(response);
                    if (response.data) {
                        if (response.data.status === true) {
                            setTimeout(() => {
                                setOpenAlert(true)
                                setMessageAlert(response.data.data)
                                setStatusAlert("success")
                                // setSelectedIndex([])
                                // getDataTable(sisa)
                            }, 200);
                        } else {
                            if (response.data.data) {
                                // setOpenAlert(true)
                                // setMessageAlert(JSON.stringify(response.data.data))
                                // setStatusAlert("warning")
                                alert(JSON.stringify(response.data.data))
                                setIsRefresh(false)
                            }
                        }
                    }
                })
            }
            setTimeout(() => {
                setSelectedIndex([])
                getDataTable(sisa)
            }, 500);
        } else {
            // setOpenAlert(true)
            // setMessageAlert("Jadwal belum dipilih")
            // setStatusAlert("warning")
            alert("Jadwal belum dipilih")
            setIsRefresh(false)
        }
    }

    const saveToMaster = () => {
        if (selectedIndex.length > 0) {
            setIsRefresh(true)
            let data = []
            for (var i = 0; i < dataTable.length; ++i) {
                for (var j = 0; j < selectedIndex.length; ++j) {
                    if (dataTable[i][0] === selectedIndex[j]) {    // If element is in both the arrays
                        data.push(dataTable[i]);        // Push to arr array
                    }
                }
            }
            console.log(data);
            let details = []
            data.map((i) => {
                if (!i[14]) {
                    // setOpenAlert(true)
                    // setMessageAlert("Ruangan tidak boleh kosong")
                    // setStatusAlert("warning")
                    alert("Ruangan tidak boleh kosong")
                    setIsRefresh(false)
                } else {
                    let idx = details.findIndex((val) => val === i[20])
                    if (idx > -1) {
                    } else {
                        details.push(i[20])
                    }
                }
            })
            let payload = {
                "id": details
            }
            console.log(payload);
            api.create().createMasterScheduleFromDraft(payload).then(response => {
                console.log(response);
                if (response.data) {
                    if (response.data.status === true) {
                        setOpenAlert(true)
                        setMessageAlert(JSON.stringify(response.data.data))
                        setStatusAlert("success")
                        setTimeout(() => {
                            setIsRefresh(false)
                            setSelectedIndex([])
                            let sisa = []
                            dataTable.map((i) => {
                                if (i[0] !== data[0] && i[17] === "") {
                                    sisa.push(i)
                                }
                            })
                            getDataTable(sisa)
                        }, 200);
                    } else {
                        if (response.data.data) {
                            // setOpenAlert(true)
                            // setMessageAlert(JSON.stringify(response.data.data))
                            // setStatusAlert("warning")
                            alert(JSON.stringify(response.data.data))
                            setIsRefresh(false)
                        }
                    }
                }
            })
        } else {
            // setOpenAlert(true)
            // setMessageAlert("Jadwal belum dipilih")
            // setStatusAlert("warning")
            alert("Jadwal belum dipilih")
            setIsRefresh(false)
        }
    }

    const handleDelete = (type) => {
        setIsRefresh(true)
        let detail = [];
        let data = rowData.rowData
        let room = listDataRoom.findIndex((val) => val.name === data[14])
        console.log(data);
        if (type === 'baris') {
            if (rowData.rowData[17] !== "") {
                detail.push({
                    "id": data[0],
                    "doctor_id": data[21],
                    "polyclinic_id": data[1],
                    "activeinactive": 1,
                    "effective_date": data[4],
                    "schedule": [{
                        "id": Number(data[20]),
                        "service_type": data[11] === "UMUM" ? 2 : data[11] === "BPJS" ? 1 : 3,
                        "time_type": data[8] === "FIFO" ? 3 : data[8] === "TIMESLOT" ? 1 : 2,
                        "quota": Number(data[10]),
                        "quota_bpjs": Number(data[12]),
                        "day_id": data[5] === "Senin" ? 1 : data[5] === "Selasa" ? 2 : data[5] === "Rabu" ? 3 : data[5] === "Kamis" ? 4 : data[5] === "Jum'at" ? 5 : data[5] === "Sabtu" ? 6 : 7,
                        "time_start": String(data[6]).substring(0, 5),
                        "time_end": String(data[7]).substring(0, 5),
                        "time": Number(data[9]),
                        "room_id": listDataRoom[room].id,
                        "remarks": data[15],
                        "activeinactive": 0
                    }]
                })
                let payload = {
                    "doctor_details": detail
                }
                console.log(JSON.stringify(payload));
                api.create().editDraftScheduleDokter(payload).then(response => {
                    console.log(response);
                    if (response.data) {
                        if (response.data.status === true) {
                            setOpenAlert(true)
                            setMessageAlert(JSON.stringify(response.data.data))
                            setStatusAlert("success")
                            setTimeout(() => {
                                setVisibleDelete(false)
                                setIsRefresh(false)
                                let sisa = []
                                dataTable.map((i) => {
                                    if (i[0] !== data[0] && i[17] === "") {
                                        sisa.push(i)
                                    }
                                })
                                getDataTable(sisa)
                            }, 200);
                        } else {
                            if (response.data.data) {
                                setOpenAlert(true)
                                setMessageAlert(JSON.stringify(response.data.data))
                                setStatusAlert("warning")
                                setIsRefresh(false)
                            }
                        }
                    } else {
                        setOpenAlert(true)
                        setMessageAlert(JSON.stringify(response.problem))
                        setStatusAlert("error")
                        setIsRefresh(false)
                    }
                })
            } else {
                setVisibleDelete(false)
                if (data[18] === 1) {
                    //     dataTable.sort((a, b) => b[0] - a[0]).splice(tableMeta.rowIndex, 1)
                    dataTable[rowData.rowIndex][18] = 1
                    forceUpdate()
                } else {
                    dataTable.sort((a, b) => b[0] - a[0]).splice(rowData.rowIndex, 1)
                    forceUpdate()
                }
                setTimeout(() => {
                    setIsRefresh(false)
                }, 500);
            }
        } else {
            if (rowData.rowData[20]) {
                detail.push({
                    "id": data[0],
                    "doctor_id": data[21],
                    "polyclinic_id": data[1],
                    "activeinactive": 0,
                    "effective_date": data[4],
                    "schedule": [
                        {
                            "id": data[20],
                            "service_type": data[11] === "UMUM" ? 2 : data[11] === "BPJS" ? 1 : 3,
                            "time_type": data[8] === "FIFO" ? 3 : data[8] === "TIMESLOT" ? 1 : 2,
                            "quota": data[10],
                            "quota_bpjs": data[12],
                            "day_id": data[5] === "Senin" ? 1 : data[5] === "Selasa" ? 2 : data[5] === "Rabu" ? 3 : data[5] === "Kamis" ? 4 : data[5] === "Jum'at" ? 5 : data[5] === "Sabtu" ? 6 : 7,
                            "time_start": String(data[6]).substring(0, 5),
                            "time_end": String(data[7]).substring(0, 5),
                            "time": data[9],
                            "room_id": listDataRoom[room].id,
                            "remarks": data[15],
                            "activeinactive": 0
                        }
                    ]
                })
                let payload = {
                    "doctor_details": detail
                }
                console.log(JSON.stringify(payload));
                api.create().editDraftScheduleDokter(payload).then(response => {
                    console.log(response);
                    if (response.data) {
                        if (response.data.status === true) {
                            setOpenAlert(true)
                            setMessageAlert(JSON.stringify(response.data.data))
                            setStatusAlert("success")
                            setTimeout(() => {
                                setVisibleDelete(false)
                                let sisa = []
                                dataTable.map((i) => {
                                    if (i[0] !== data[0] && i[17] === "") {
                                        sisa.push(i)
                                    }
                                })
                                getDataTable(sisa)
                            }, 200);
                        } else {
                            if (response.data.data) {
                                setOpenAlert(true)
                                setMessageAlert(JSON.stringify(response.data.data))
                                setStatusAlert("warning")
                                setIsRefresh(false)
                            }
                        }
                    } else {
                        setOpenAlert(true)
                        setMessageAlert(JSON.stringify(response.problem))
                        setStatusAlert("error")
                        setIsRefresh(false)
                    }
                })
            } else {
                setVisibleDelete(false)
                if (data[18] === 1) {
                    //     dataTable.sort((a, b) => b[0] - a[0]).splice(tableMeta.rowIndex, 1)
                    dataTable[rowData.rowIndex][18] = 1
                    forceUpdate()
                } else {
                    dataTable.sort((a, b) => b[0] - a[0]).splice(rowData.rowIndex, 1)
                    forceUpdate()
                }
                setIsRefresh(false)
            }
        }
    }

    const columns = [
        {
            name: 'id',
            label: 'id',
            options: {
                sort: true,
                sortDirection: 'asc',
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
                        <Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}></Typography>
                    </TableCell>
                ),
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ textAlign: 'center' }}>
                            {tableMeta.rowData[18] === 1 ?
                                <CustomCheckbox
                                    checked={checked(tableMeta)}
                                    onChange={() => handleCheked(val, tableMeta)}
                                /> : ""}
                        </div>
                    )
                }
            }
        }, {
            name: '',
            options: {
                display: false
            }
        }, {
            name: "Nama Dokter",
            label: "Nama Dokter",
            options: {
                // filter: false,
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
                        <Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.label}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ textAlign: 'left' }}>
                            {tableMeta.rowData[18] === 1 ? val : ""}
                        </div>
                    )
                }
            }
        }, {
            name: "Nama Klinik",
            options: {
                // filter: false,
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
                        <Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ textAlign: 'left' }}>
                            {tableMeta.rowData[18] === 1 ? val : ""}
                        </div>
                    )
                }
            }
        }, {
            name: "Effective Date",
            options: {
                filter: false,
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
                        <Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ textAlign: 'left' }}>
                            {tableMeta.rowData[18] === 1 ?
                                tableMeta.rowData[19] === 1 ?
                                    <MuiPickersUtilsProvider utils={DateFnsUtils}>
                                        <KeyboardDatePicker
                                            format="yyyy-MM-dd"
                                            minDateMessage='Tanggal tidak boleh kurang dari hari ini'
                                            style={{ width: 200 }}
                                            clearLabel
                                            minDate={new Date()}
                                            value={new Date(val)}
                                            onChange={(date) => {
                                                if (!isNaN(date.getTime())) {
                                                    setSelectedIndex([])
                                                    dataTable[tableMeta.rowIndex][tableMeta.columnIndex] = format(new Date(date), 'yyyy-MM-dd')
                                                    forceUpdate()
                                                }
                                                console.log(date, dataTable[tableMeta.rowIndex]);
                                            }}
                                            KeyboardButtonProps={{
                                                'aria-label': 'change time',
                                            }}
                                        />
                                    </MuiPickersUtilsProvider> :
                                    format(new Date(val), 'yyyy-MM-dd') : null
                            }
                        </div>
                    )
                }
            }
        }, {
            name: "Hari",
            options: {
                filter: false,
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
                        <Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ textAlign: 'left' }}>
                            {tableMeta.rowData[19] === 1 ?
                                <Autocomplete
                                    style={{ width: 100 }}
                                    options={listHari}
                                    getOptionLabel={(option) => option}
                                    defaultValue={val}
                                    onChange={(event, newInputValue) => {
                                        setSelectedIndex([])
                                        dataTable[tableMeta.rowIndex][tableMeta.columnIndex] = newInputValue
                                        forceUpdate()
                                    }}
                                    renderInput={(params) =>
                                        <TextField
                                            {...params}
                                            InputProps={{ ...params.InputProps, style: { fontSize: 13 } }}
                                            InputLabelProps={{ style: { color: '#7e8085' } }}
                                        />
                                    }
                                />
                                : val}
                        </div>
                    )
                }
            }
        }, {
            name: "Jam Mulai",
            options: {
                filter: false,
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
                        <Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val, tableMeta) => {
                    let time = isNaN(new Date(val).getTime()) ? new Date(`2014-08-18T${val}`) : val
                    return (
                        <div style={{ textAlign: 'left' }}>
                            {tableMeta.rowData[19] === 1 ?
                                <MuiPickersUtilsProvider utils={DateFnsUtils}>
                                    <KeyboardTimePicker
                                        style={{ width: 100 }}
                                        clearLabel
                                        ampm={false}
                                        value={time}
                                        onChange={(date) => {
                                            if (date !== null) {
                                                if (!isNaN(date.getTime())) {
                                                    setSelectedIndex([])
                                                    dataTable[tableMeta.rowIndex][tableMeta.columnIndex] = format(new Date(date), 'HH:mm:ss')
                                                    forceUpdate()
                                                }
                                            }
                                        }}
                                        KeyboardButtonProps={{
                                            'aria-label': 'change time',
                                        }}
                                    />
                                </MuiPickersUtilsProvider>
                                : format(new Date(time), 'HH:mm')}
                        </div>
                    )
                }
            }
        }, {
            name: "Jam Selesai",
            options: {
                filter: false,
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
                        <Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val, tableMeta) => {
                    let time = isNaN(new Date(val).getTime()) ? new Date(`2014-08-18T${val}`) : val
                    return (
                        <div style={{ textAlign: 'left' }}>
                            {tableMeta.rowData[19] === 1 ?
                                <MuiPickersUtilsProvider utils={DateFnsUtils}>
                                    <KeyboardTimePicker
                                        style={{ width: 100 }}
                                        clearLabel
                                        ampm={false}
                                        value={time}
                                        onChange={(date) => {
                                            if (date !== null) {
                                                if (!isNaN(date.getTime())) {
                                                    setSelectedIndex([])
                                                    dataTable[tableMeta.rowIndex][tableMeta.columnIndex] = format(new Date(date), 'HH:mm:ss')
                                                    forceUpdate()
                                                }

                                            }
                                        }}
                                        KeyboardButtonProps={{
                                            'aria-label': 'change time',
                                        }}
                                    />
                                </MuiPickersUtilsProvider>
                                : format(new Date(time), 'HH:mm')}
                        </div>
                    )
                }
            }
        }, {
            name: "Tipe Antrian",
            options: {
                filter: false,
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
                        <Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ textAlign: 'left' }}>
                            {tableMeta.rowData[19] === 1 ?
                                <Autocomplete
                                    style={{ width: 150 }}
                                    options={listAntrian}
                                    getOptionLabel={(option) => option}
                                    defaultValue={val}
                                    onChange={(event, newInputValue) => {
                                        setSelectedIndex([])
                                        dataTable[tableMeta.rowIndex][tableMeta.columnIndex] = newInputValue
                                        forceUpdate()
                                    }}
                                    renderInput={(params) =>
                                        <TextField
                                            {...params}
                                            InputProps={{ ...params.InputProps, style: { fontSize: 13 } }}
                                            InputLabelProps={{ style: { color: '#7e8085' } }}
                                        />
                                    }
                                />
                                : val}
                        </div>
                    )
                }
            }
        }, {
            name: "Slot Waktu",
            options: {
                filter: false,
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
                        <Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ textAlign: 'left' }}>
                            {tableMeta.rowData[19] === 1 ?
                                <TextField
                                    style={{ width: 80 }}
                                    defaultValue={val}
                                    onBlur={(e) => {
                                        setSelectedIndex([])
                                        dataTable[tableMeta.rowIndex][tableMeta.columnIndex] = e.target.value
                                        forceUpdate()
                                    }}
                                />
                                : val}
                        </div>
                    )
                }
            }
        }, {
            name: "Kuota Pasien",
            options: {
                filter: false,
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
                        <Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ textAlign: 'left' }}>
                            {tableMeta.rowData[19] === 1 ?
                                <TextField
                                    style={{ width: 80 }}
                                    defaultValue={val}
                                    onBlur={(e) => {
                                        setSelectedIndex([])
                                        dataTable[tableMeta.rowIndex][tableMeta.columnIndex] = e.target.value
                                        forceUpdate()
                                    }}
                                />
                                : val}
                        </div>
                    )
                }
            }
        }, {
            name: "Opsi Pembayaran",
            options: {
                filter: false,
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
                        <Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ textAlign: 'left' }}>
                            {tableMeta.rowData[19] === 1 ?
                                <Autocomplete
                                    style={{ width: 120 }}
                                    options={listPembayaran}
                                    getOptionLabel={(option) => option}
                                    defaultValue={val}
                                    onChange={(event, newInputValue) => {
                                        setSelectedIndex([])
                                        dataTable[tableMeta.rowIndex][tableMeta.columnIndex] = newInputValue
                                        forceUpdate()
                                    }}
                                    renderInput={(params) =>
                                        <TextField
                                            {...params}
                                            InputProps={{ ...params.InputProps, style: { fontSize: 13 } }}
                                            InputLabelProps={{ style: { color: '#7e8085' } }}
                                        />
                                    }
                                />
                                : val}
                        </div>
                    )
                }
            }
        }, {
            name: "Kuota BPJS",
            options: {
                filter: false,
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
                        <Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ textAlign: 'left' }}>
                            {tableMeta.rowData[19] === 1 ?
                                <TextField
                                    style={{ width: 80 }}
                                    defaultValue={val}
                                    onBlur={(e) => {
                                        setSelectedIndex([])
                                        dataTable[tableMeta.rowIndex][tableMeta.columnIndex] = e.target.value
                                        forceUpdate()
                                    }}
                                />
                                : val}
                        </div>
                    )
                }
            }
        }, {
            name: "Durasi Layanan",
            options: {
                filter: false,
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
                        <Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ textAlign: 'left' }}>
                            {tableMeta.rowData[19] === 1 ?
                                <TextField
                                    style={{ width: 80 }}
                                    defaultValue={val}
                                    onBlur={(e) => {
                                        setSelectedIndex([])
                                        dataTable[tableMeta.rowIndex][tableMeta.columnIndex] = e.target.value
                                        forceUpdate()
                                    }}
                                />
                                : val}
                        </div>
                    )
                }
            }
        }, {
            name: "Lokasi Praktek",
            options: {
                filter: false,
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
                        <Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ textAlign: 'left' }}>
                            {tableMeta.rowData[19] === 1 ?
                                <Autocomplete
                                    style={{ width: 80 }}
                                    options={listRoom}
                                    getOptionLabel={(option) => option}
                                    defaultValue={val}
                                    onChange={(event, newInputValue) => {
                                        setSelectedIndex([])
                                        dataTable[tableMeta.rowIndex][tableMeta.columnIndex] = newInputValue
                                        forceUpdate()
                                    }}
                                    renderInput={(params) =>
                                        <TextField
                                            {...params}
                                            InputProps={{ ...params.InputProps, style: { fontSize: 13 } }}
                                            InputLabelProps={{ style: { color: '#7e8085' } }}
                                        />
                                    }
                                />
                                : val}
                        </div>
                    )
                }
            }
        }, {
            name: "Catatan Tambahan",
            options: {
                filter: false,
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
                        <Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ textAlign: 'left' }}>
                            {tableMeta.rowData[19] === 1 ?
                                <TextField
                                    style={{ width: 80 }}
                                    defaultValue={val}
                                    onBlur={(e) => {
                                        setSelectedIndex([])
                                        dataTable[tableMeta.rowIndex][tableMeta.columnIndex] = e.target.value
                                        forceUpdate()
                                    }}
                                />
                                : val}
                        </div>
                    )
                }
            }
        }, {
            name: "Tgl Diperbarui",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
                        <Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
            }
        }, {
            name: "Diperbarui Oleh",
            options: {
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
                        <Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
            }
        }, {
            name: "Aksi",
            options: {
                filter: false,
                customHeadRender: (columnMeta) => (
                    <TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
                        <Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
                    </TableCell>
                ),
                customBodyRender: (val, tableMeta) => {
                    return (
                        <div style={{ display: 'flex', justifyContent: 'left' }}>

                            {tableMeta.rowData[19] === 1 ?
                                <IconButton
                                    style={{ outline: 'none' }}
                                    aria-label="more"
                                    aria-controls="long-menu"
                                    aria-haspopup="true"
                                    onClick={(e) => handleClickMenu(e, tableMeta)}
                                >
                                    <img src={IcVertical} style={{ width: 24 }} />
                                </IconButton> :
                                <IconButton
                                    style={{ outline: 'none' }}
                                    aria-label="more"
                                    aria-controls="long-menu"
                                    aria-haspopup="true"
                                    onClick={() => handleOption('Edit', tableMeta)}
                                >
                                    <img src={IcVertical} style={{ width: 24 }} />
                                </IconButton>
                            }
                            {selectedOption === tableMeta.rowIndex && (
                                <Menu
                                    id="long-menu"
                                    anchorEl={anchorEl}
                                    keepMounted
                                    open={openMenu}
                                    onClose={handleCloseMenu}
                                    PaperProps={{
                                        style: {
                                            maxHeight: ITEM_HEIGHT * 4.5,
                                            padding: '0 1px',
                                            width: 'auto',
                                            minWidth: 'auto',
                                            borderRadius: 5,
                                            boxShadow: '2px 2px 5px 0 #cecece',
                                            left: '1000px !important'
                                        },
                                    }}
                                >
                                    {tableMeta.rowData[19] === 1 && (
                                        <MenuItem>
                                            <div onClick={() => handleOption('Edit', tableMeta)}>
                                                <Typography style={{ fontSize: 14, color: '#278863', fontWeight: '500' }}>{'View'}</Typography>
                                            </div>
                                        </MenuItem>
                                    )}
                                    {tableMeta.rowData[19] === 1 && (
                                        <MenuItem >
                                            <div onClick={() => handleOption('Tambah', tableMeta)}>
                                                <Typography style={{ fontSize: 14, color: '#278863', fontWeight: '500' }}>{'Tambah'}</Typography>
                                            </div>
                                        </MenuItem>
                                    )}
                                    {tableMeta.rowData[19] === 1 && (
                                        <MenuItem >
                                            <div onClick={() => handleOption('Hapus', tableMeta)}>
                                                <Typography style={{ fontSize: 14, color: '#278863', fontWeight: '500' }}>{'Hapus'}</Typography>
                                            </div>
                                        </MenuItem>
                                    )}
                                </Menu>
                            )}
                        </div>
                    )
                }
            }
        }, {
            name: "",
            options: {
                display: false,
                filter: false
            }
        }, {
            name: "",
            options: {
                display: false,
                filter: false
            }
        }, {
            name: "",
            options: {
                display: false,
                filter: false
            }
        }]

    const options = {
        filterType: 'multiselect',
        fixedHeader: true,
        filter: true,
        search: true,
        print: false,
        download: false,
        selectableRows: false,
        viewColumns: false,
        rowsPerPage: 10,
        responsive: 'scrollMaxHeight',
        sort: true,
        onTableChange: (action, tableState) => {
            // console.log(action, tableState);
            let index = tableState.selectedRows.data.length > 0 && tableState.selectedRows.data.map((i) => { return [i.index] })
            switch (action) {
                case 'rowDelete':
                    break;
                case 'changeRowsPerPage':
                    break;
                case 'rowSelectionChange':
                    let a = []
                    for (var i = 0; i < index.length; i++)
                        a.push(dataTable[index[i]])
                    console.log(a);
                    break;
                default:
                    break;
            }
        },
        onRowonRowSelectionChange: (currentRowsSelected, allRowsSelected, rowsSelected) => {
            console.log(currentRowsSelected, allRowsSelected, rowsSelected);
        },
        customToolbarSelect: (selectedRows, displayData, setSelectedRows) => (
            <div></div>
        ),
        textLabels: {
            body: {
                noMatch: "Tidak ada data yang tersedia",
                toolTip: "Sort",
                columnHeaderTooltip: column => `Sort for ${column.label}`
            },
            pagination: {
                next: "Next Page",
                previous: "Previous Page",
                rowsPerPage: "Rows per page:",
                displayRows: "of",
            },
            toolbar: {
                search: "Search",
                downloadCsv: "Download CSV",
                print: "Print",
                viewColumns: "View Columns",
                filterTable: "Filter Table",
            },
            filter: {
                all: "All",
                title: "FILTERS",
                reset: "RESET",
            },
            viewColumns: {
                title: "Show Columns",
                titleAria: "Show/Hide Table Columns",
            },
            selectedRows: {
                text: "row(s) dipilih",
                delete: "Delete",
                deleteAria: "Delete Selected Rows",
            },
        }
    }

    const loadingComponent = (
        <div style={{ position: 'fixed', zIndex: 1500, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)' }}>
            <Loader
                type="Puff"
                color="#2a9c6c"
                height={100}
                width={100}
            />
        </div>
    );

    const handleClose = (event, reason) => {
        if (reason === 'clickaway') {
            return;
        }
        setOpenAlert(false);
    };
    return (
        <div style={{ maxHeight: props.height - 80 }}>
            {isRefresh ? loadingComponent : null}
            <Snackbar open={openAlert} autoHideDuration={2000} onClose={handleClose}>
                <Alert onClose={handleClose} severity={statusAlert}>
                    {messageAlert}
                </Alert>
            </Snackbar>
            <div style={{ width: '100%', margin: '.5vh', display: 'flex', padding: '.4vh .2vw 0', justifyContent: 'space-between' }}>
                {location.state.create && (
                    <button style={{ padding: '4px 20px', backgroundColor: '#2a9c6c', borderRadius: 20, boxShadow: '5px 2px 10px 0 #999999', borderColor: 'transparent', outline: 'none' }}
                        onClick={() => {
                            setVisibleTambah(true)
                            // history.push('/schedule/draft-master-jadwal')
                        }}
                    >
                        <div style={{ display: 'flex' }}>
                            {/* <img style={{ margin: 'auto', width: 25, marginTop: 0, marginRight: 5 }} src="https://img.icons8.com/flat_round/50/000000/plus.png" /> */}
                            <Typography style={{ fontSize: 13, margin: 'auto', color: 'white' }}>Buat Draft</Typography>
                        </div>
                    </button>
                )}
                <div>
                    {location.state.create && (
                        <button style={{ padding: '4px 20px', backgroundColor: '#2a9c6c', borderRadius: 20, boxShadow: '5px 2px 10px 0 #999999', borderColor: 'transparent', outline: 'none' }}
                            onClick={() => saveToDraft()}
                        >
                            <div style={{ display: 'flex' }}>
                                {/* <img style={{ margin: 'auto', width: 25, marginTop: 0, marginRight: 5 }} src="https://img.icons8.com/flat_round/50/000000/plus.png" /> */}
                                <Typography style={{ fontSize: 13, margin: 'auto', marginRight: 8, color: 'white' }}>Simpan Sebagai Draft</Typography>
                            </div>
                        </button>
                    )}
                    {location.state.create && location.state.update && (
                        <button style={{ padding: '4px 20px', backgroundColor: '#2a9c6c', borderRadius: 20, boxShadow: '5px 2px 10px 0 #999999', borderColor: 'transparent', outline: 'none', marginLeft: '.6vw' }}
                            onClick={() => saveToMaster()}
                        >
                            <div style={{ display: 'flex' }}>
                                {/* <img style={{ margin: 'auto', width: 25, marginTop: 0, marginRight: 5 }} src="https://img.icons8.com/flat_round/50/000000/plus.png" /> */}
                                <Typography style={{ fontSize: 13, margin: 'auto', marginRight: 8, color: 'white' }}>Simpan ke Master</Typography>
                            </div>
                        </button>
                    )}
                </div>
            </div>
            <div >
                {!isRefresh && (
                    <MuiThemeProvider theme={getMuiTheme()}>
                        <MUIDataTable
                            data={dataTable}
                            columns={columns}
                            options={options}
                        />
                    </MuiThemeProvider>
                )}
            </div>
            {visibleTambah && (
                <div className="App app-popup-show">
                    <div className="popup-content background-white" style={{ borderRadius: 8, backgroundColor: 'white' }}>
                        <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
                            <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
                                <div className="popup-title">
                                    <span style={{ color: 'black', fontSize: 18, }}>Tambah Draft</span>
                                </div>
                            </div>
                            <div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
                                <button
                                    type="button"
                                    className="btn btn-circle btn-white"
                                    onClick={() => setVisibleTambah(false)}
                                >
                                    <img src={CloseImage} style={{ width: 20, height: 20 }} />
                                </button>
                            </div>
                        </div>

                        <div className="grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20, paddingRight: 50, paddingLeft: 50 }}>
                            <div className="column-1">
                                <Autocomplete
                                    style={{ marginTop: 1 }}
                                    options={listDokter}
                                    getOptionLabel={(option) => option.name}
                                    onChange={(event, newInputValue) => {
                                        getDataDokter(newInputValue)
                                        setErrorDokter(false)
                                        setMsgErrorDokter("")
                                    }}
                                    renderInput={(params) =>
                                        <TextField
                                            {...params}
                                            required
                                            error={errorDokter}
                                            helperText={msgErrorDokter}
                                            InputProps={{ ...params.InputProps, style: { fontSize: 13 } }}
                                            InputLabelProps={{ style: { color: '#7e8085' } }}
                                            label="Dokter"
                                        />
                                    }
                                />
                            </div>
                            <div className="column-2">
                                <div style={{}}>
                                    <Autocomplete
                                        // multiple
                                        disabled={listKlinik.length > 0 ? false : true}
                                        style={{ marginTop: 1 }}
                                        options={listKlinik}
                                        getOptionLabel={(option) => option.name}
                                        debug
                                        onChange={(event, newInputValue) => {
                                            setPickKlinik(newInputValue)
                                            setErrorKlinik(false)
                                            setMsgErrorKlinik("")
                                        }}
                                        renderInput={(params) =>
                                            <TextField
                                                {...params}
                                                required
                                                error={errorKlinik}
                                                helperText={msgErrorKlinik}
                                                InputProps={{ ...params.InputProps, style: { fontSize: 13 } }}
                                                InputLabelProps={{ style: { color: '#7e8085' } }}
                                                label="Klinik"
                                            />
                                        }
                                    />
                                </div>
                            </div>
                        </div>
                        <div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20, borderBottomLeftRadius: 20, borderBottomRightRadius: 20 }}>
                            <div className="column-1" style={{ alignSelf: 'center' }}>
                            </div>
                            <div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
                                <div onClick={() => setVisibleTambah(false)} style={{ height: 32, width: 50, backgroundColor: "transparent", borderRadius: 20, marginRight: 10, cursor: 'pointer' }} >
                                    <Typography style={{ color: '#706d6d', fontSize: 15, marginTop: 5 }}>Batal</Typography>
                                </div>
                                <div onClick={(e) => {
                                    if (pickDokter === null) {
                                        setErrorDokter(true)
                                        setMsgErrorDokter("Dokter wajib diisi")
                                    } else if (pickKlinik === null) {
                                        setErrorKlinik(true)
                                        setMsgErrorKlinik("Klinik wajib diisi")
                                    } else {
                                        handleAddData()
                                    }
                                }} style={{ height: 32, width: 150, backgroundColor: '#2a9c6c', borderRadius: 20, boxShadow: '5px 2px 10px 0 #999999', cursor: 'pointer' }} >
                                    <Typography style={{ color: 'white', fontSize: 15, marginTop: 5 }}>Simpan</Typography>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {visibleDelete && (
                <div className="App app-popup-show">
                    <div className="popup-content background-white" style={{ borderRadius: 8, backgroundColor: 'white' }}>
                        <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
                            <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
                                <div className="popup-title">
                                    <span style={{ color: 'black', fontSize: 18, }}>Delete Draft</span>
                                </div>
                            </div>
                            <div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
                                <button
                                    type="button"
                                    className="btn btn-circle btn-white"
                                    onClick={() => setVisibleDelete(false)}
                                >
                                    <img src={CloseImage} style={{ width: 20, height: 20 }} />
                                </button>
                            </div>
                        </div>

                        <div className="" style={{ padding: 20, paddingRight: 50, paddingLeft: 50 }}>
                            <Typography>Apakah anda yakin ingin menghapus jadwal drafting tersebut?</Typography>
                        </div>
                        <div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20, borderBottomLeftRadius: 20, borderBottomRightRadius: 20 }}>
                            <div className="column-1" style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}>
                                <div onClick={(e) => handleDelete('baris')} style={{ height: 32, width: 150, backgroundColor: '#2a9c6c', borderRadius: 20, boxShadow: '5px 2px 10px 0 #999999', cursor: 'pointer' }} >
                                    <Typography style={{ color: 'white', fontSize: 15, marginTop: 5 }}>Per Baris</Typography>
                                </div>
                            </div>
                            <div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
                                <div onClick={(e) => handleDelete('dokter')} style={{ height: 32, width: 150, backgroundColor: '#2a9c6c', borderRadius: 20, boxShadow: '5px 2px 10px 0 #999999', cursor: 'pointer' }} >
                                    <Typography style={{ color: 'white', fontSize: 15, marginTop: 5 }}>Per Dokter</Typography>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            )}

            {visibleConfirm && (
                <div className="App app-popup-show">
                    <div className="popup-content-middle background-white" style={{ borderRadius: 8, width: 500 }}>
                        <div className="popup-panel grid grid-2x" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
                            <div className="col-1" />
                            <div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center', padding: 0 }}>
                                <button
                                    type="button"
                                    className="btn btn-circle btn-white"
                                    onClick={() => setVisibleConfirm(false)}
                                >
                                    <img src={CloseImage} style={{ width: 20, height: 20 }} />
                                </button>
                            </div>
                        </div>
                        <div style={{ padding: 20 }}>
                            <Typography style={{ textAlign: 'left', fontSize: 16 }}>Dokter tidak memiliki master jadwal yang aktif. Silahkan tambah master jadwal dokter melalui menu <b>Master Jadwal Dokter</b></Typography>
                        </div>
                        <div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20, borderBottomLeftRadius: 20, borderBottomRightRadius: 20 }}>
                            <div className="column-1" style={{ alignSelf: 'center' }}>
                            </div>
                            <div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
                                <div
                                    onClick={() => setVisibleConfirm(false)}
                                    style={{ height: 32, width: 150, backgroundColor: '#ff4252', borderRadius: 20, boxShadow: '5px 2px 10px 0 #999999', cursor: 'pointer' }} >
                                    <Typography style={{ color: 'white', fontSize: 15, marginTop: 5 }}>Tutup</Typography>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </div>
    )
}