Untitled
unknown
javascript
3 years ago
42 kB
2
Indexable
import React, { useState } from 'react'; import api from '../api'; import { createMuiTheme, makeStyles, MuiThemeProvider, Paper, Switch, TableCell, Tabs, Tab, Typography, withStyles, InputAdornment, Tooltip } from "@material-ui/core"; import MUIDataTable from "mui-datatables"; import AddDokterCuti from '../MasterData/addDokterCuti'; import Loader from 'react-loader-spinner' import Autocomplete from '@material-ui/lab/Autocomplete'; import { TextField } from '@material-ui/core'; import { Link, useHistory, useLocation } from 'react-router-dom'; import search from '../../assets/search.png'; import back from '../../assets/ic_back.png'; import next from '../../assets/ic_next.png'; import ic_detail from '../../assets/ic_detail.png'; import ic_search from '../../assets/ic_search.png'; import { format } from 'date-fns'; import CloseIcon from '@material-ui/icons/Close'; const ct = require("../../library/CustomTable"); const getMuiTheme = () => createMuiTheme(ct.customTable3()); const options = ct.customOptions() 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 useStyles = makeStyles((theme) => ({ root: { flexGrow: 1, width: "100%", backgroundColor: theme.palette.background.paper }, tabsIndicator: { backgroundColor: "#2a9c6c" }, tabRoot: { "&:hover": { color: "red", opacity: 1 }, "&$tabSelected": { color: "red", fontWeight: theme.typography.fontWeightMedium }, "&:focus": { color: "red" } }, tabSelected: {}, fab: { '& > *': { margin: theme.spacing(1), }, position: 'fixed', right: 25, top: 65 }, extendedIcon: { marginRight: theme.spacing(1), }, })) export default function JadwalTransaksiDokter(props) { const history = useHistory(); const location = useLocation(); const classes = useStyles() const [jadwal, setJadwal] = React.useState(null); const [visibleDetail, setVisibleDetail] = React.useState(false) const [value, setValue] = React.useState(null); const [valueID, setValueID] = React.useState(0); const [list, setList] = React.useState(null); const [limitDate, setLimitDate] = React.useState([]) const [selectedSchedule, setSelectedSchedule] = React.useState([]) const [loading, setLoading] = React.useState(false); const date = new Date() const [displayStartDate, setDisplayStartDate] = React.useState(""); const [displayEndDate, setDisplayEndDate] = React.useState("") const [startDate, setStartDate] = React.useState("") const [endDate, setEndDate] = React.useState("") const [name, setName] = React.useState("") const [dayBeforeWeek, setDayBeforeWeek] = React.useState("") const [visibleSearch, setVisibleSearch] = React.useState(false) const [searchName, setSearchName] = React.useState(null) const [create, setCreate] = React.useState(false); const [read, setRead] = React.useState(false); const [update, setUpdate] = React.useState(false); const [deleted, setDeleted] = React.useState(false); const [DokterID, setDokterID] = React.useState(null) const [visibleJadwalCuti, setVisibleJadwalCuti] = React.useState(false); const [dataRefresh, setDataRefresh] = React.useState(null) const [range, setRange] = React.useState(0) const [updateRange, setUpdateRange] = React.useState(0) const [disableNext, setDisableNext] = React.useState(false) function changeDate(startDate, endDate) { } const handleChange = (event) => { console.log(event); setValue(event) setValueID(event.polyclinic_id) let temp = [] event.schedule.map((el, idx) => { el["no"] = idx + 1 temp.push(el.date) }) setLimitDate(temp) forceUpdate() }; const handleSeeDetail = (data) => { // setVisibleDetail(true) console.log(data.rowData); const id = data.rowData[data.rowData.length - 2]; // console.log(id); let tanggal = data.rowData[1] let schedules = value.schedule // console.log(schedules); let arr = [] let tempData; let sentData; history.push({ pathname: '/schedule/edit-jadwal-dokter', name: 'Detail Jadwal Dokter', state: { id, list, value, jadwal, update, deleted, valueID, startDate, endDate, displayStartDate, displayEndDate, searchName, rowData: data.rowData } }) } // console.log(jadwal); // console.log(value); const getDayByDate = (date) => { var a = new Date(date); var weekdays = new Array(7); weekdays[0] = "Minggu"; weekdays[1] = "Senin"; weekdays[2] = "Selasa"; weekdays[3] = "Rabu"; weekdays[4] = "Kamis"; weekdays[5] = "Jumat"; weekdays[6] = "Sabtu"; var r = weekdays[a.getDay()]; return r } const columns = [ { name: "no", label: "No", options: { customBodyRender: (val, tableMeta) => { return ( <div style={{}}> {tableMeta.rowIndex + 1} </div> ) } } }, { name: "date", label: "Tanggal Jadwal" }, { name: "day", label: "Hari", options: { customBodyRender: (val, { rowData }) => { return ( <div style={{}}> {getDayByDate(rowData[1])} </div> ) } } }, { name: "time_start", label: "Jam Mulai" }, { name: "time_end", label: "Jam Selesai" }, { name: "remarks", label: "Catatan", options: { customBodyRender: (val, { rowData }) => { return ( <div style={{}}> {rowData[14] === null ? val : rowData[14]} </div> ) } } }, { name: "deleted_at", label: "Status", options: { customBodyRender: (val, { rowData }) => { return ( <div style={{ color: val === null ? 'black' : '#ff5b5b' }}> {val === null ? "Tersedia" : "Dibatalkan"} </div> ) } } }, { name: "Aksi", options: { customBodyRender: (val, tableMeta) => { return ( <div style={{ display: 'flex' }}> <LightTooltip title={"Edit"} arrow> <button onClick={() => handleSeeDetail(tableMeta)} style={{ backgroundColor: "transparent", fontSize: 20, outline: 'none', borderColor: 'transparent', marginRight: 20 }}> <img src={ic_detail} style={{ height: 30, width: 30 }} /> </button> </LightTooltip> </div> ) } } }, { name: "service_type", options: { display: false, filter: false } }, { name: "time", options: { display: false, filter: false } }, { name: "quota", options: { display: false, filter: false } }, { name: "time_type", options: { display: false, filter: false } }, { name: "room", options: { display: false, filter: false } }, { name: "id", options: { display: false, filter: false } }, { name: "notes", options: { display: false, filter: false } }, ]; const getDateNow = (s, e) => { let tanggal = format(s, 'dd') let month = format(s, 'MM') let year = format(s, 'yyyy') switch (month) { case '01': month = "Januari" break; case '02': month = "Februari" break; case '03': month = "Maret" break; case '04': month = "April" break; case '05': month = "Mei" break; case '06': month = "Juni" break; case '07': month = "Juli" break; case '08': month = "Agustus" break; case '09': month = "September" break; case '10': month = "October" break; case '11': month = "November" break; default: month = "Desember" break; } let formatPlusWeek = new Date(s).setDate(new Date(s).getDate() + 7); console.log(format(formatPlusWeek, 'dd MMM yyyy')); let tanggalAfterWeek = format(formatPlusWeek, 'dd') let monthAfterWeek = format(formatPlusWeek, 'MM') let yearAfterWeek = format(formatPlusWeek, 'yyyy') switch (monthAfterWeek) { case '01': monthAfterWeek = "Januari" break; case '02': monthAfterWeek = "Februari" break; case '03': monthAfterWeek = "Maret" break; case '04': monthAfterWeek = "April" break; case '05': monthAfterWeek = "Mei" break; case '06': monthAfterWeek = "Juni" break; case '07': monthAfterWeek = "Juli" break; case '08': monthAfterWeek = "Agustus" break; case '09': monthAfterWeek = "September" break; case '10': monthAfterWeek = "October" break; case '11': monthAfterWeek = "November" break; default: monthAfterWeek = "Desember" break; } let startDate = `${tanggal} ${month} ${year}` let endDate = `${tanggalAfterWeek} ${monthAfterWeek} ${yearAfterWeek}` let realStart = `${year}-${new Date(s).getMonth() + 1}-${tanggal}` let realEnd = `${yearAfterWeek}-${new Date(formatPlusWeek).getMonth() + 1}-${tanggalAfterWeek}` setStartDate(String(realStart)) setEndDate(String(realEnd)) setDisplayStartDate(String(startDate)) setDisplayEndDate(String(endDate)) getNextPrev(String(realStart), String(realEnd)) forceUpdate() } const refreshDate = (s) => { let tanggal = format(s, 'dd') let month = format(s, 'MM') let year = format(s, 'yyyy') switch (month) { case '01': month = "Januari" break; case '02': month = "Februari" break; case '03': month = "Maret" break; case '04': month = "April" break; case '05': month = "Mei" break; case '06': month = "Juni" break; case '07': month = "Juli" break; case '08': month = "Agustus" break; case '09': month = "September" break; case '10': month = "October" break; case '11': month = "November" break; default: month = "Desember" break; } let formatPlusWeek = new Date(s).setDate(new Date(s).getDate() + 7); console.log(format(formatPlusWeek, 'dd MMM yyyy')); let tanggalAfterWeek = format(formatPlusWeek, 'dd') let monthAfterWeek = format(formatPlusWeek, 'MM') let yearAfterWeek = format(formatPlusWeek, 'yyyy') switch (monthAfterWeek) { case '01': monthAfterWeek = "Januari" break; case '02': monthAfterWeek = "Februari" break; case '03': monthAfterWeek = "Maret" break; case '04': monthAfterWeek = "April" break; case '05': monthAfterWeek = "Mei" break; case '06': monthAfterWeek = "Juni" break; case '07': monthAfterWeek = "Juli" break; case '08': monthAfterWeek = "Agustus" break; case '09': monthAfterWeek = "September" break; case '10': monthAfterWeek = "October" break; case '11': monthAfterWeek = "November" break; default: monthAfterWeek = "Desember" break; } let startDate = `${tanggal} ${month} ${year}` let endDate = `${tanggalAfterWeek} ${monthAfterWeek} ${yearAfterWeek}` let realStart = `${year}-${new Date(s).getMonth() + 1}-${tanggal}` let realEnd = `${yearAfterWeek}-${new Date(formatPlusWeek).getMonth() + 1}-${tanggalAfterWeek}` setStartDate(String(realStart)) setEndDate(String(realEnd)) setDisplayStartDate(String(startDate)) setDisplayEndDate(String(endDate)) forceUpdate() } const getNextPrev = (start, end) => { setLoading(true) let param = `"start:${start}` if (end) { param = `"start":"${start}","end":"${end}"` } api.create().getScheduleTransactionFilter(param).then(response => { setLoading(true) if (response.data) { if (response.data.status === true) { if (response.data.data != false) { setLoading(false) let valID = location.state ? location.state.data.value.polyclinic_id : valueID let jadwalID = dataRefresh !== null ? dataRefresh.id : props.reservasi !== null ? props.reservasi.id : location.state ? location.state.data.jadwal.id : 0 let idxVal = response.data.data.findIndex((val) => val.id == jadwalID) console.log(response, jadwalID, valID); if (idxVal > -1) { let idxPoli = response.data.data[idxVal].polyclinic.findIndex((val) => val.polyclinic_id === valID) console.log(idxPoli, response.data.data[idxVal].polyclinic[idxPoli]); if (idxPoli > -1) { let poliID = props.reservasi !== null ? props.reservasi.polyclinic[0].polyclinic_id : valID let idxJadwal = response.data.data[idxVal].polyclinic.findIndex((val) => val.polyclinic_id === poliID) console.log(idxJadwal); if (idxJadwal > -1) { // console.log(response.data.data[idxVal].polyclinic[idxJadwal]); setValueID(response.data.data[idxVal].polyclinic[idxPoli].polyclinic_id) setValue(response.data.data[idxVal].polyclinic[idxPoli]) setJadwal(response.data.data[idxVal]) forceUpdate() } } // } else { // response.data.data.map((el) => { // if (jadwal !== null) { // if (el.name === jadwal.name) { // if (el.polyclinic.length >= 1) { // el.polyclinic.map(item => { // item.schedule.map((element, idx) => { // element["no"] = idx + 1 // }) // }) // } // setValue(el.polyclinic[0]) // setLoading(false) // setJadwal(el) // } // } // }) } } else { setList([]) setValue(0) } } } setLoading(false) }) } React.useEffect(() => { props.setShowNotif(true) console.log(location.state); if (location.state !== undefined) { setValue(location.state.data.value) setJadwal(location.state.data.jadwal) setList(location.state.data.list) setDokterID(location.state.data.jadwal) setValueID(location.state.data.value.polyclinic_id) setStartDate(location.state.data.startDate) setEndDate(location.state.data.endDate) setSearchName(location.state.data.searchName) setDisplayStartDate(location.state.data.displayStartDate) setDisplayEndDate(location.state.data.displayEndDate) getNextPrev(location.state.data.startDate, location.state.data.endDate) forceUpdate() } else { getJadwalFilter() getDateNow(new Date()) } setLoading(true) getPermission(props) getParameter() }, []) const getParameter = () => { api.create().getParameter().then(response => { console.log(response); if (response.data) { if (response.data.status === true) { response.data.data.map((item) => { if (item.param_code === "MAX_DATE_RANGE") { setRange(Number(item.param_value)) setUpdateRange(Number(item.param_value)) } }) } } }) } const refreshData = () => { getDateNow(new Date()) setLoading(true) getJadwalFilter() } const getPermission = (e) => { api.create().getPermission(e.menuid).then(response => { console.log(response); if (response.data) { if (response.data.status === true) { let data = response.data.data setCreate(data.create) setUpdate(data.update) setRead(data.read) setDeleted(data.delete) } } }) } const convertDateToEnglish = (date) => { let dateSplit = date.split(" "); console.log(dateSplit); let dateIndo = dateSplit[1]; let dateEng = ""; switch(dateIndo) { case "Januari": dateEng = "January"; break; case "Februari": dateEng = "February"; break; case "Maret": dateEng = "March"; break; case "April": dateEng = "April"; break; case "Mei": dateEng = "May"; break; case "Juni": dateEng = "June"; break; case "Juli": dateEng = "July"; break; case "Agustus": dateEng = "August"; break; case "September": dateEng = "September"; break; case "Oktober": dateEng = "October"; break; case "November": dateEng = "November"; break; case "Desember": dateEng = "December"; break; default: dateEng = ""; } let resolveDate = date.replace(dateIndo, dateEng); return resolveDate; } const getJadwalFilter = (start, end) => { var dateEnd = new Date(); dateEnd.setDate(date.getDate() + 7); let startDate = location.state?.data.displayStartDate let endDate = location.state?.data.displayEndDate startDate = convertDateToEnglish(startDate) endDate = convertDateToEnglish(endDate) console.log(startDate, endDate); let param = `"start":"${startDate ? format(new Date(startDate), 'yyyy-MM-dd') : format(new Date(), 'yyyy-MM-dd')}","end":"${endDate ? format(new Date(endDate), 'yyyy-MM-dd') : format(new Date(dateEnd), 'yyyy-MM-dd')}"` console.log(param); api.create().getScheduleTransactionFilter(param).then(response => { console.log(response); if (response.data) { if (response.data.status === true) { if (response.data.data != false) { setList(response.data.data) let jadwalID = dataRefresh !== null ? dataRefresh.id : props.reservasi !== null ? props.reservasi.id : location.state ? location.state.data.jadwal.id : 0 let idxVal = response.data.data.findIndex((val) => val.id == jadwalID) if (idxVal > -1 && props.reservasi.polyclinic.length > 0) { console.log(props.reservasi); let poliID = props.reservasi !== null ? props.reservasi.polyclinic[0].polyclinic_id : location.state.data.value.polyclinic_id let idxJadwal = response.data.data[idxVal].polyclinic.findIndex((val) => val.polyclinic_id === poliID) // console.log(idxJadwal); if (idxJadwal > -1) { setValue(response.data.data[idxVal].polyclinic[idxJadwal]) forceUpdate() } } else { response.data.data.map((el) => { if (jadwal !== null) { if (el.name === jadwal.name) { if (el.polyclinic.length >= 1) { el.polyclinic.map(item => { item.schedule.map((element, idx) => { element["no"] = idx + 1 }) }) } setValue(el.polyclinic[0]) setLoading(false) setJadwal(el) } } }) } } else { setList([]) setValue(0) } } } setLoading(false) }) } const handleClick = (e) => { getParameter() setDisableNext(false) setLoading(true) setDataRefresh(e) setJadwal(e) setDokterID(e) props.setDataReservasi(e) refreshDate(new Date()) // let temp = [] console.log(e); getScheduleByDoctorID(e) // e.polyclinic.length > 0 && e.polyclinic[0].schedule.map((el, idx) => { // el["no"] = idx + 1 // temp.push(el.date) // }) // setValue(e.polyclinic[0]) // setValueID(e.polyclinic[0].polyclinic_id) // forceUpdate() } const getScheduleByDoctorID = (e) => { var dateEnd = new Date(); dateEnd.setDate(date.getDate() + 7); let param = `"start":"${format(new Date(), 'yyyy-MM-dd')}","end":"${format(new Date(dateEnd), 'yyyy-MM-dd')}"` api.create().getScheduleTransactionFilterByDoctorID(e.id, param).then(response => { console.log(response); if (response.data) { if (response.data.status === true) { let data = response.data.data[0] setValue(data.polyclinic[0]) setValueID(data.polyclinic[0].polyclinic_id) forceUpdate() } setLoading(false) } }) } const forceUpdate = React.useReducer(bool => !bool)[1]; const handleBack = (val) => { let fixRange = updateRange + val setUpdateRange(fixRange) console.log(val); let a = new Date(startDate).setDate(new Date(startDate).getDate() - val); console.log(a); let b = new Date(a).getDate() let c = new Date(a).getMonth() let d = new Date(a).getFullYear() let date = `${d}-${c + 1}-${b}` console.log(date); getDateNow(new Date(date)) setDisableNext(false) } const handleNext = (val) => { console.log('tes'); let fixRange = updateRange - val console.log(fixRange, updateRange); if (fixRange <= 7) { // console.log(val); let a = new Date(startDate).setDate(new Date(startDate).getDate() + val); let b = new Date(a).getDate() let c = new Date(a).getMonth() let d = new Date(a).getFullYear() let date = `${d}-${c + 1}-${b}` getDateNow(new Date(date)) setDisableNext(true) } else { // console.log(val); let a = new Date(startDate).setDate(new Date(startDate).getDate() + val); let b = new Date(a).getDate() let c = new Date(a).getMonth() let d = new Date(a).getFullYear() let date = `${d}-${c + 1}-${b}` getDateNow(new Date(date)) setDisableNext(false) } setUpdateRange(fixRange) } const onClose = () => { setVisibleDetail(false) } const loadingComponent = ( <div style={{ position: 'fixed', zIndex: 110, 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> ); React.useEffect(() => { doFilter(searchName) }, [searchName]) const doFilter = (name) => { setList([]) if (name === null || name === "") { getJadwalFilter() } else { var dateEnd = new Date(); dateEnd.setDate(date.getDate() + 7); let param = `"start":"${format(new Date(), 'yyyy-MM-dd')}","end":"${format(new Date(dateEnd), 'yyyy-MM-dd')}"` api.create().getScheduleTransactionFilterNameAndDate(name, param).then(response => { console.log(response); if (response.data.data.length > 0) { let data = [] response.data.data.map((el) => { if (el.deleted_at === null) { let fix = [] el.polyclinic.map((i) => { if (i.deleted_at === null) { fix.push(i) } }) el.polyclinic = fix data.push(el) if (jadwal !== null) { if (el.name === jadwal.name) { if (el.polyclinic.length > 0) { el.polyclinic.sort((a, b) => a.polyclinic_id - b.polyclinic_id).map(item => { item.schedule.map((element, idx) => { element["no"] = idx + 1 }) }) } setValue(el.polyclinic[0]) setJadwal(el) setLoading(false) } } } }) setList(data) } else { setList([]) setValue(0) } setLoading(false) }) } } // console.log(jadwal); return ( <div style={{ display: 'flex', justifyContent: 'space-between', height: props.height - 100, overflow: 'auto' }}> {loading ? loadingComponent : null} <div style={{ paddingTop: 20, paddingLeft: 0, width: "20%", backgroundColor: 'transparent', marginTop: 10, borderRadius: 10, overflow: 'auto', height: props.height - 140 }}> <Typography style={{ color: '#278863' }}>List Nama Dokter</Typography> <hr style={{ marginTop: 0 }} /> { !visibleSearch && (searchName === "" || searchName === null) ? <img title="cari dokter" onClick={() => setVisibleSearch(true)} src={ic_search} style={{ marginBottom: 10, cursor: 'pointer' }} /> : <div style={{ marginTop: -10, marginBottom: 10 }}> <TextField label="Pencarian Dokter" placeholder="input nama dokter" value={searchName} onChange={(e) => { setSearchName(e.target.value) // forceUpdate() }} InputProps={{ endAdornment: <InputAdornment position="end" style={{ marginRight: '5%' }}> <CloseIcon titleAccess="batal" style={{ cursor: 'pointer' }} onClick={() => { doFilter(null) setVisibleSearch(false) setSearchName("") }} /> </InputAdornment> }} /> </div> } { list !== null && list != false ? list.map((el, idx) => { return ( <div style={{ cursor: "pointer" }} onClick={() => handleClick(el)}> <Typography style={{ fontSize: 14, padding: 3, color: jadwal !== null && jadwal != false && jadwal.name === el.name ? '#278863' : '#c8c8c8', borderLeft: jadwal !== null && jadwal != false && jadwal.name === el.name ? '3px solid green' : null, borderSpacing: jadwal !== null && jadwal != false && jadwal.name === el.name ? "0, 0, 0, 370" : null, }}>{el.name}</Typography> </div> ) }) : <div> <Typography>Jadwal Belum Ada</Typography> </div> } </div> <div style={{ paddingTop: 20, width: "75%", marginTop: -3 }}> <div style={{ display: 'flex' }}> { jadwal !== null && value !== null && jadwal.polyclinic && jadwal.polyclinic.sort((a, b) => a.polyclinic_id - b.polyclinic_id).map((el, idx) => { // let no = el.effective_date // no.map((item, id) => { // item["no"] = id + 1 // }) // console.log(el, value); return ( <Tabs value={el.polyclinic_id} indicatorColor="primary" textColor="#2a9c6c" onChange={() => handleChange(el)} aria-label="disabled tabs example" style={{ outline: 'null', display: 'flex' }} classes={{ indicator: classes.tabsIndicator }} > {el.deleted_at === null && ( <Tab label={`Klinik ${el.polyclinic_name}`} style={{ color: value.polyclinic_id === el.polyclinic_id ? '#2a9c6c' : 'black', borderBottom: value.polyclinic_id === el.polyclinic_id ? '3px solid #2a9c6c' : null, borderBottomWidth: "10%" }} /> )} </Tabs> ) }) } </div> <div> {list && list ? <Paper style={{ borderRadius: 20, boxShadow: '5px 5px 10px 0 #999999', scrollBehavior: true, margin: '10px 10px 10px 0' }} > <div style={{ display: 'flex', paddingLeft: 25, paddingTop: 30 }}> <img src={back} style={{ cursor: 'pointer', width: 16, height: 16, marginTop: 5, marginRight: 15 }} onClick={() => handleBack(7)} /> <img src={next} style={{ cursor: disableNext ? 'default' : 'pointer', width: 16, height: 16, marginTop: 5, marginRight: 10 }} onClick={() => !disableNext && handleNext(7)} /> {/* { updateRange < 7 ? <img src={next} style={{ cursor: 'default', width: 16, height: 16, marginTop: 5, marginRight: 10 }} /> : } */} {startDate ? <Typography> {displayStartDate} - {displayEndDate} </Typography> : null } </div> { value && value.schedule && value.deleted_at === null ? create && ( <div style={{ marginLeft: 23, marginTop: 10, display: 'flex', justifyContent: 'space-between' }}> <button style={{ backgroundColor: 'transparent', border: 'transparent', borderColor: 'transparent', outline: 'none' }} onClick={() => history.push({ pathname: '/schedule/tambah-jadwal-dokter', name: 'Tambah Jadwal Dokter', search: '?update=true', // query string state: { // location state idDokter: jadwal.id, jadwal, value, list, }, })} > <div style={{ display: 'flex', height: 30, width: 150, backgroundColor: '#2a9c6c', borderRadius: 70 }}> <img style={{ margin: 'auto', width: 25, marginTop: 3, marginRight: 3 }} src="https://img.icons8.com/flat_round/50/000000/plus.png" /> <Typography style={{ fontSize: 13, margin: 'auto', marginRight: 10, color: 'white' }}>Tambah Jadwal</Typography> </div> </button> {deleted && ( <button style={{ backgroundColor: 'transparent', border: 'transparent', borderColor: 'transparent', outline: 'none' }} onClick={() => setVisibleJadwalCuti(true)} > <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: 30, padding: '0 10px', backgroundColor: '#a8a8a8', borderRadius: 70 }}> {/* <img style={{ margin: 'auto', width: 25, marginTop: 3, marginRight: 3 }} src="https://img.icons8.com/flat_round/50/000000/plus.png" /> */} <Typography style={{ fontSize: 13, color: 'white' }}>Tambah Jadwal Cuti</Typography> </div> </button> )} </div> ) : null } {value && value.schedule && value.deleted_at === null ? read && ( <MuiThemeProvider theme={getMuiTheme()}> <MUIDataTable data={value.schedule} columns={columns} options={options} /> </MuiThemeProvider> ) : <Paper style={{ width: '100%', height: '380px', margin: 'auto', justifyContent: 'center', textAlign: 'center', borderRadius: 20, marginTop: 0, paddingTop: 50 }} > <h1 style={{ margin: 'auto' }}>Silahkan pilih Dokter</h1> </Paper> } </Paper> : <Paper style={{ width: '100%', height: '380px', margin: 'auto', justifyContent: 'center', textAlign: 'center', borderRadius: 20, marginTop: 0, paddingTop: 50 }} > <h1 style={{ margin: 'auto' }}>Silahkan pilih Dokter</h1> </Paper> } </div> {visibleJadwalCuti && ( <AddDokterCuti onClose={() => setVisibleJadwalCuti(false)} detail={DokterID} refresh={() => refreshData()} /> )} </div> </div> ) }
Editor is loading...