1270 lines
46 KiB
JavaScript
1270 lines
46 KiB
JavaScript
import { useRef, useState, forwardRef, useEffect } from 'react';
|
|
import Router from 'next/router';
|
|
import { styled } from '@mui/material/styles';
|
|
import Box from '@mui/material/Box';
|
|
import CssBaseline from '@mui/material/CssBaseline';
|
|
import Paper from '@mui/material/Paper';
|
|
import Grid from '@mui/material/Grid';
|
|
|
|
import Card from '@mui/material/Card';
|
|
import Button from '@mui/material/Button';
|
|
import TextField from '@mui/material/TextField';
|
|
import Typography from '@mui/material/Typography';
|
|
|
|
// select
|
|
import InputLabel from '@mui/material/InputLabel';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import FormControl from '@mui/material/FormControl';
|
|
import Select from '@mui/material/Select';
|
|
import Divider from '@mui/material/Divider';
|
|
|
|
import Table from '@mui/material/Table';
|
|
import TableBody from '@mui/material/TableBody';
|
|
import TableCell, { tableCellClasses } from '@mui/material/TableCell';
|
|
import TableContainer from '@mui/material/TableContainer';
|
|
import TableHead from '@mui/material/TableHead';
|
|
import TableRow from '@mui/material/TableRow';
|
|
// import Paper from '@mui/material/Paper';
|
|
|
|
// backdrop
|
|
import Backdrop from '@mui/material/Backdrop';
|
|
import CircularProgress from '@mui/material/CircularProgress';
|
|
|
|
// toast
|
|
import { ToastContainer, toast, Zoom, Bounce } from 'react-toastify'
|
|
import 'react-toastify/dist/ReactToastify.css';
|
|
|
|
// sweet alert
|
|
import Swal from 'sweetalert2'
|
|
import withReactContent from 'sweetalert2-react-content'
|
|
const MySwal = withReactContent(Swal)
|
|
|
|
// this is for number format
|
|
import NumberFormat from 'react-number-format';
|
|
|
|
import AppBarAdmin from '../../components/admin/appBar';
|
|
|
|
// ini untuk date time picker
|
|
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
|
|
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
|
|
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
|
|
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
|
|
|
|
import moment from "moment"; //for converting date and time
|
|
|
|
// button icon
|
|
import IconButton from '@mui/material/IconButton';
|
|
import ModeEditIcon from '@mui/icons-material/ModeEdit';
|
|
import DisabledByDefaultIcon from '@mui/icons-material/DisabledByDefault';
|
|
import EventAvailableIcon from '@mui/icons-material/EventAvailable';
|
|
|
|
// this for check session
|
|
let all_function = require('../../function/all_function.js')
|
|
import { withIronSessionSsr } from "iron-session/next";
|
|
|
|
import DialogEditPasien from '../../components/admin/dialogEditPasien';
|
|
import DialogLihatJadwalPasien from '../../components/admin/dialogLihatJadwalPasien';
|
|
|
|
|
|
|
|
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
|
[`&.${tableCellClasses.head}`]: {
|
|
backgroundColor: theme.palette.primary.main,
|
|
color: theme.palette.common.white,
|
|
}
|
|
}));
|
|
|
|
|
|
|
|
const DrawerHeader = styled('div')(({ theme }) => ({
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'flex-end',
|
|
padding: theme.spacing(0, 1),
|
|
// necessary for content to be below app bar
|
|
...theme.mixins.toolbar,
|
|
}));
|
|
|
|
// ini untuk number
|
|
const NumberFormatCustom = forwardRef(function NumberFormatCustom(props, ref) {
|
|
const { onChange, ...other } = props;
|
|
|
|
return (
|
|
<NumberFormat
|
|
{...other}
|
|
getInputRef={ref}
|
|
onValueChange={(values) => {
|
|
onChange({
|
|
target: {
|
|
name: props.name,
|
|
value: values.value,
|
|
},
|
|
});
|
|
}}
|
|
// thousandSeparator
|
|
isNumericString
|
|
prefix="08"
|
|
/>
|
|
);
|
|
});
|
|
|
|
const NumberFormatCustomNIK = forwardRef(function NumberFormatCustom(props, ref) {
|
|
const { onChange, ...other } = props;
|
|
|
|
return (
|
|
<NumberFormat
|
|
{...other}
|
|
getInputRef={ref}
|
|
onValueChange={(values) => {
|
|
onChange({
|
|
target: {
|
|
name: props.name,
|
|
value: values.value,
|
|
},
|
|
});
|
|
}}
|
|
// thousandSeparator
|
|
isNumericString
|
|
// prefix="08"
|
|
/>
|
|
);
|
|
});
|
|
|
|
let today_date = new Date();
|
|
let days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
|
|
let hari_ininya = days[today_date.getDay()];
|
|
|
|
function DataPasienPage(props) {
|
|
// console.log(props, "ini jadwal pasien")
|
|
const [awal, setAwal] = useState(false);
|
|
const [backdrop, setBackdrop] = useState(false); //this is for backdrop
|
|
const [sweetAlertLoading, setSweetAlertLoading] = useState(false); //this is for sweet alert loading
|
|
|
|
const [hari_ini, setHariIni] = useState(hari_ininya);
|
|
|
|
const url = process.env.HTTP_URL + "/api/admin/pasien";
|
|
|
|
// ini untuk list tabel
|
|
const [dataPasienAll, setDataPasienAll] = useState([]);
|
|
const [jadwalPasien, setJadwalPasien] = useState([]);
|
|
|
|
useState(() => {
|
|
setJadwalPasien(props.jadwal_pasien)
|
|
})
|
|
|
|
|
|
const nikInputRef = useRef();
|
|
const [nik, setNik] = useState('');
|
|
const [nama, setNama] = useState('');
|
|
const [alamat, setAlamat] = useState('');
|
|
const no_telpInputRef = useRef();
|
|
const [no_telp, setNoTelp] = useState('');
|
|
const [tanggal_lahir, setTanggalLahir] = useState('');
|
|
const [jenis_kelamin, setJenisKelamin] = useState('');
|
|
const [pekerjaan, setPekerjaan] = useState('');
|
|
const [status_pernikahan, setStatusPernikahan] = useState('');
|
|
const [golongan_darah, setGolonganDarah] = useState('');
|
|
const [pendidikan, setPendidikan] = useState('');
|
|
const [nama_orang_tua_wali, setNamaOrangTuaWali] = useState('');
|
|
const [nama_pasangan, setNamaPasangan] = useState('');
|
|
|
|
const tanggal_periksaInputRef = useRef();
|
|
const [tanggal_periksa, setTanggalPeriksa] = useState('');
|
|
const [jam_periksa, setJamPeriksa] = useState('');
|
|
const [dokterList, setDokterList] = useState([]);
|
|
const [dokter, setDokter] = useState('');
|
|
|
|
function Umur(props) {
|
|
let today = new Date();
|
|
let birthDate = new Date(props.tanggal_lahir);
|
|
let age = today.getFullYear() - birthDate.getFullYear();
|
|
let m = today.getMonth() - birthDate.getMonth();
|
|
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
|
|
age = age - 1;
|
|
}
|
|
return (
|
|
<>
|
|
{age}
|
|
</>
|
|
);
|
|
}
|
|
|
|
// for dokter select
|
|
async function cekDoktor(tanggal) {
|
|
setDokter("")
|
|
console.log(tanggal)
|
|
// create let day and get the day from tanggal. example : Thu Apr 28 2022 03:36:00 GMT+0800 (Central Indonesia Time) , output : "Kamis"
|
|
let day = new Date(tanggal).getDay();
|
|
switch (day) {
|
|
case 0:
|
|
day = "Minggu";
|
|
break;
|
|
case 1:
|
|
day = "Senin";
|
|
break;
|
|
case 2:
|
|
day = "Selasa";
|
|
break;
|
|
case 3:
|
|
day = "Rabu";
|
|
break;
|
|
case 4:
|
|
day = "Kamis";
|
|
break;
|
|
case 5:
|
|
day = "Jumat";
|
|
break;
|
|
case 6:
|
|
day = "Sabtu";
|
|
break;
|
|
|
|
}
|
|
// console.log(day, "ini day")
|
|
// create let clock and get the hour,minute,second from tanggal. output example : "12:00:00"
|
|
let hour = new Date(tanggal).getHours(); // if hour is less than 10, then add 0 before hour
|
|
hour = hour < 10 ? "0" + hour : hour;
|
|
let minute = new Date(tanggal).getMinutes(); // if minute is less than 10, then add 0 before minute
|
|
minute = minute < 10 ? "0" + minute : minute;
|
|
let second = new Date(tanggal).getSeconds(); // if second is less than 10, then add 0 before second
|
|
second = second < 10 ? "0" + second : second;
|
|
let clock = hour + ":" + minute + ":" + second;
|
|
setJamPeriksa(clock)
|
|
// console.log(clock, "ini clock")
|
|
|
|
try {
|
|
let urlnya = process.env.HTTP_URL + "/api/admin/cek_jadwal?hari=" + day + "&jam=" + clock;
|
|
const response = await fetch(urlnya, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'allow-cors-origin': '*',
|
|
'crossDomain': true,
|
|
'Authorization': 'Basic ' + btoa(`${process.env.ADMIN_AUTH}:${process.env.ADMIN_PASSWORD}`)
|
|
}
|
|
})
|
|
// get response
|
|
const data = await response.json()
|
|
console.log(data, "ini data")
|
|
setDokterList(data.data)
|
|
} catch (err) {
|
|
console.log(err)
|
|
}
|
|
|
|
}
|
|
|
|
// before add pasien
|
|
async function beforeAddPasien(e) {
|
|
e.preventDefault();
|
|
// console.log("sini before add pasien")
|
|
let no_telpBaru = "08" + no_telp
|
|
if (nik.length < 16) {
|
|
toast.error('NIK harus 16 digit')
|
|
// focus to nik
|
|
nikInputRef.current.focus();
|
|
} else if (no_telpBaru.length < 11) {
|
|
toast.error('No Telpon minimal harus 11 digit')
|
|
// focus to nik
|
|
no_telpInputRef.current.focus();
|
|
} else if (tanggal_periksa == '') {
|
|
toast.error('Tanggal periksa harus diisi')
|
|
// focus to nik
|
|
tanggal_periksaInputRef.current.focus();
|
|
} else {
|
|
setSweetAlertLoading(true);
|
|
await MySwal.fire({
|
|
title: 'Yakin ?',
|
|
text: `Dokter ${nama} akan ditambahkan`,
|
|
icon: 'info',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#3085d6',
|
|
cancelButtonColor: '#d33',
|
|
confirmButtonText: 'Ya, tambahkan!'
|
|
}).then(async (result) => {
|
|
if (result.value) {
|
|
setBackdrop(true);
|
|
|
|
let tgl_lahir_baru = moment(tanggal_lahir).format('YYYY-MM-DD');
|
|
|
|
let data = {
|
|
nik,
|
|
nama,
|
|
jenis_kelamin,
|
|
tgl_lahir: tgl_lahir_baru,
|
|
alamat,
|
|
pekerjaan,
|
|
golongan_darah,
|
|
pendidikan,
|
|
no_telp: no_telpBaru,
|
|
status_pernikahan,
|
|
nama_orang_tua_wali,
|
|
nama_pasangan,
|
|
}
|
|
// console.log(tanggal_periksa, "ini sebelum add")
|
|
// create let tanggal_baru and get the date from tanggal. example : Thu Apr 28 2022 03:36:00 GMT+0800 (Central Indonesia Time) , output : "28-04-2022"
|
|
let formattedDate = moment(tanggal_periksa).format('YYYY-MM-DD');
|
|
// console.log(formattedDate, "ini tanggal baru")
|
|
|
|
let data_periksa = {
|
|
tanggal_periksa: formattedDate,
|
|
id_dokter: dokter,
|
|
jam_periksa
|
|
}
|
|
|
|
// console.log(data.data)
|
|
let response = await tambah_pasien(data, data_periksa);
|
|
if (!response) {
|
|
// await 1 second
|
|
await new Promise(resolve => setTimeout(resolve, 500));
|
|
setAwal(true);
|
|
nikInputRef.current.focus();
|
|
} else {
|
|
// clear input
|
|
setAwal(false);
|
|
setNik('');
|
|
setNama('');
|
|
setJenisKelamin('');
|
|
setTanggalLahir('');
|
|
setAlamat('');
|
|
setPekerjaan('');
|
|
setGolonganDarah('');
|
|
setPendidikan('');
|
|
setNoTelp('');
|
|
setStatusPernikahan('');
|
|
setNamaOrangTuaWali('');
|
|
setNamaPasangan('');
|
|
setTanggalPeriksa('');
|
|
setDokter('');
|
|
setJamPeriksa('');
|
|
setDokterList([]);
|
|
Router.replace(Router.asPath);
|
|
}
|
|
|
|
}
|
|
})
|
|
setBackdrop(false);
|
|
setSweetAlertLoading(false);
|
|
}
|
|
}
|
|
|
|
// tambah pasien
|
|
async function tambah_pasien(data, data_periksa) {
|
|
// await 4 second
|
|
// await new Promise(resolve => setTimeout(resolve, 4000));
|
|
// console.log(data, data_periksa, "ini data pasien")
|
|
|
|
// create new var data_combine and add datadata_periksa to data_periksa
|
|
let data_combine = {
|
|
...data,
|
|
...data_periksa
|
|
}
|
|
console.log(data_combine, "ini data combine")
|
|
|
|
try {
|
|
const response = await fetch(url, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'allow-cors-origin': '*',
|
|
'crossDomain': true,
|
|
'Authorization': 'Basic ' + btoa(`${process.env.ADMIN_AUTH}:${process.env.ADMIN_PASSWORD}`)
|
|
},
|
|
body: JSON.stringify(data_combine)
|
|
})
|
|
// get response
|
|
const data_response = await response.json()
|
|
console.log(data_response, "ini data response")
|
|
// console.log(data, "ini data dari cek dokter")
|
|
if (response.status === 200) {
|
|
// create toast
|
|
|
|
toast.success(data_response.message)
|
|
return true
|
|
} else if (response.status === 400) {
|
|
toast.error(data_response.message)
|
|
setDataPasienAll(data_response.data)
|
|
return false
|
|
} else {
|
|
// create toast
|
|
|
|
toast.error("Terjadi kesalahan")
|
|
return false
|
|
}
|
|
} catch (err) {
|
|
toast.error(err)
|
|
console.log(err)
|
|
return false
|
|
}
|
|
}
|
|
|
|
const cariInputRef = useRef();
|
|
|
|
// cari pasien
|
|
const cariDataPasien = async (e) => {
|
|
e.preventDefault();
|
|
const inputan = cariInputRef.current.value;
|
|
setBackdrop(true);
|
|
try {
|
|
const urlnya = url + "?cariannya=" + inputan;
|
|
const response = await fetch(urlnya, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'allow-cors-origin': '*',
|
|
'crossDomain': true,
|
|
'Authorization': 'Basic ' + btoa(`${process.env.ADMIN_AUTH}:${process.env.ADMIN_PASSWORD}`)
|
|
}
|
|
})
|
|
|
|
const data = await response.json()
|
|
console.log(data, "ini datanya")
|
|
console.log(response.status, "ini responsenya")
|
|
if (response.status == 200) {
|
|
setAwal(true);
|
|
setDataPasienAll(data.data)
|
|
}
|
|
|
|
} catch (err) {
|
|
console.log(err)
|
|
toast.error("Terjadi kesalahan")
|
|
}
|
|
setBackdrop(false);
|
|
}
|
|
|
|
// ini untuk dialog edit jadwal
|
|
const [openDialogEdit, setOpenDialogEdit] = useState(false);
|
|
// const [dataEditPasien, setDataEditPasien] = useState();
|
|
const [dataPasienPeriksa, setDataPasienPeriksa] = useState({
|
|
nik: '',
|
|
nama: '',
|
|
jenis_kelamin: '',
|
|
tgl_lahir: '',
|
|
alamat: '',
|
|
pekerjaan: '',
|
|
golongan_darah: '',
|
|
pendidikan: '',
|
|
no_telp: '',
|
|
status_pernikahan: '',
|
|
nama_orang_tua_wali: '',
|
|
nama_pasangan: '',
|
|
})
|
|
// const [nikEdit, setNikEdit] = useState('');
|
|
|
|
|
|
// ini untuk dialog jadwal
|
|
const [openDialogJadwal, setOpenDialogJadwal] = useState(false);
|
|
const [nikPasienJadwal, setNikPasienJadwal] = useState('');
|
|
const [dataJadwalPasien, setDataJadwalPasien] = useState([])
|
|
const lihatJadwal = async (id) => {
|
|
setDataPasienPeriksa({
|
|
nik: '',
|
|
nama: '',
|
|
jenis_kelamin: '',
|
|
tgl_lahir: '',
|
|
alamat: '',
|
|
pekerjaan: '',
|
|
golongan_darah: '',
|
|
pendidikan: '',
|
|
no_telp: '',
|
|
status_pernikahan: '',
|
|
nama_orang_tua_wali: '',
|
|
nama_pasangan: '',
|
|
})
|
|
setNikPasienJadwal(id)
|
|
setDataJadwalPasien([]);
|
|
setBackdrop(true);
|
|
// await 4 sec
|
|
// await new Promise(resolve => setTimeout(resolve, 4000));
|
|
// setOpenDialogJadwal(true);
|
|
try {
|
|
const response = await fetch(url + "?id=" + id + "&jadwal=jadwal", {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'allow-cors-origin': '*',
|
|
'crossDomain': true,
|
|
'Authorization': 'Basic ' + btoa(`${process.env.ADMIN_AUTH}:${process.env.ADMIN_PASSWORD}`)
|
|
}
|
|
})
|
|
const data = await response.json()
|
|
console.log(data, "ini data pasien")
|
|
if (response.status === 200) {
|
|
setDataJadwalPasien(data.data)
|
|
setOpenDialogJadwal(true)
|
|
} else {
|
|
toast.error("Terjadi kesalahan")
|
|
}
|
|
} catch (err) {
|
|
console.log(err)
|
|
toast.error("Terjadi kesalahan")
|
|
}
|
|
|
|
setBackdrop(false);
|
|
}
|
|
|
|
async function updateJadwalTable() {
|
|
setBackdrop(true);
|
|
// try {
|
|
const urlnya = process.env.HTTP_URL + "/api/admin/jadwal_pasien";
|
|
const response = await fetch(urlnya, {
|
|
method: 'GET',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'allow-cors-origin': '*',
|
|
'crossDomain': true,
|
|
'Authorization': 'Basic ' + btoa(`${process.env.ADMIN_AUTH}:${process.env.ADMIN_PASSWORD}`)
|
|
}
|
|
})
|
|
const data = await response.json()
|
|
console.log(data, "ini data pasien")
|
|
|
|
if (response.status === 200) {
|
|
setJadwalPasien(data.data)
|
|
// setOpenDialogJadwal(true)
|
|
} else {
|
|
toast.error("Terjadi kesalahan")
|
|
}
|
|
// } catch (err) {
|
|
// console.log(err)
|
|
// toast.error("Terjadi kesalahan")
|
|
// }
|
|
|
|
setBackdrop(false);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<ToastContainer position={toast.POSITION.TOP_CENTER} transition={Zoom} autoClose={2000} Bounce={Bounce} theme="colored" />
|
|
<Backdrop open={backdrop} sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}><CircularProgress color="inherit" /></Backdrop>
|
|
<DialogEditPasien
|
|
openit={openDialogEdit}
|
|
// idPasien={idPasienEdit}
|
|
// dataPasien={dataEditPasien}
|
|
dataPasienPeriksa={dataPasienPeriksa}
|
|
toastnya={
|
|
(message, stat) => {
|
|
if (stat) {
|
|
toast.success(message)
|
|
} else {
|
|
toast.error(message)
|
|
}
|
|
}
|
|
}
|
|
backdropnya={(status) => setBackdrop(status)}
|
|
sweetalertnya={(status) => setSweetAlertLoading(status)}
|
|
setClose={
|
|
(data = null, stat = false) => {
|
|
if (stat) {
|
|
setDataPasienPeriksa(data)
|
|
setOpenDialogEdit(false);
|
|
} else {
|
|
setOpenDialogEdit(false);
|
|
// setIdPasienEdit(null);
|
|
// setDataEditPasien(null);
|
|
setDataPasienPeriksa({
|
|
nik: '',
|
|
nama: '',
|
|
jenis_kelamin: '',
|
|
tgl_lahir: '',
|
|
alamat: '',
|
|
pekerjaan: '',
|
|
golongan_darah: '',
|
|
pendidikan: '',
|
|
no_telp: '',
|
|
status_pernikahan: '',
|
|
nama_orang_tua_wali: '',
|
|
nama_pasangan: '',
|
|
})
|
|
}
|
|
|
|
}
|
|
}
|
|
setOpenAgain={
|
|
() => {
|
|
|
|
setOpenDialogEdit(true);
|
|
}
|
|
}
|
|
|
|
/>
|
|
<DialogLihatJadwalPasien
|
|
openit={openDialogJadwal}
|
|
dataJadwal={dataJadwalPasien}
|
|
dataPasien={dataPasienPeriksa}
|
|
toastnya={
|
|
(message, stat) => {
|
|
if (stat) {
|
|
toast.success(message)
|
|
} else {
|
|
toast.error(message)
|
|
}
|
|
}
|
|
}
|
|
setClose={
|
|
(data = null, stat = false) => {
|
|
if (stat) {
|
|
setOpenDialogJadwal(false);
|
|
} else {
|
|
setOpenDialogJadwal(false);
|
|
setNikPasienJadwal('');
|
|
setDataJadwalPasien([]);
|
|
setDataPasienPeriksa({
|
|
nik: '',
|
|
nama: '',
|
|
jenis_kelamin: '',
|
|
tgl_lahir: '',
|
|
alamat: '',
|
|
pekerjaan: '',
|
|
golongan_darah: '',
|
|
pendidikan: '',
|
|
no_telp: '',
|
|
status_pernikahan: '',
|
|
nama_orang_tua_wali: '',
|
|
nama_pasangan: '',
|
|
})
|
|
}
|
|
}
|
|
}
|
|
backdropnya={(status) => setBackdrop(status)}
|
|
sweetalertnya={(status) => setSweetAlertLoading(status)}
|
|
setOpenAgain={
|
|
() => {
|
|
|
|
setOpenDialogJadwal(true);
|
|
}
|
|
}
|
|
updateJadwalTable={
|
|
() => {
|
|
updateJadwalTable()
|
|
}
|
|
}
|
|
/>
|
|
|
|
<Box sx={{ display: 'flex' }}>
|
|
<CssBaseline />
|
|
<AppBarAdmin menu="Pasien" backdrop={backdrop} sweetalertload={sweetAlertLoading}
|
|
toRoute={
|
|
() => {
|
|
setBackdrop(true);
|
|
}
|
|
}
|
|
/>
|
|
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
|
|
<DrawerHeader />
|
|
<Grid container spacing={4}>
|
|
<Grid item xs={12} md={5}>
|
|
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }} onSubmit={beforeAddPasien}>
|
|
<Typography variant="h6" gutterBottom sx={{
|
|
fontWeight: 'bold',
|
|
textAlign: 'left',
|
|
paddingLeft: '8%',
|
|
paddingTop: "10px",
|
|
paddingBottom: "10px",
|
|
backgroundColor: "silver",
|
|
}}>Pasien Baru</Typography>
|
|
<Box sx={{ padding: "5px" }}></Box>
|
|
<TextField
|
|
required
|
|
inputRef={nikInputRef}
|
|
value={nik}
|
|
onChange={(e) => setNik(e.target.value)}
|
|
id="nikTextField"
|
|
label="NIK"
|
|
placeholder="Masukkan NIK"
|
|
sx={{ width: "85%", boxShadow: 10 }}
|
|
InputProps={{
|
|
inputComponent: NumberFormatCustomNIK,
|
|
inputProps: {
|
|
maxLength: 16,
|
|
minLength: 16,
|
|
}
|
|
}}
|
|
/>
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<TextField
|
|
required
|
|
value={nama}
|
|
onChange={(e) => setNama(e.target.value)}
|
|
id="namaTextField"
|
|
label="Nama"
|
|
placeholder="Masukkan Nama"
|
|
sx={{ width: "85%", boxShadow: 10 }}
|
|
/>
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
|
<InputLabel id="demo-simple-select-helper-label">Jenis Kelamin</InputLabel>
|
|
<Select
|
|
required
|
|
labelId="demo-simple-select-helper-label"
|
|
id="jenisKelaminSelect"
|
|
value={jenis_kelamin}
|
|
label="Jenis"
|
|
onChange={(e) => setJenisKelamin(e.target.value)}
|
|
>
|
|
<MenuItem value="" selected disabled>
|
|
<em>None</em>
|
|
</MenuItem>
|
|
<MenuItem value={"Laki-Laki"}>Laki-Laki</MenuItem>
|
|
<MenuItem value={"Perempuan"}>Perempuan</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
|
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
|
<DatePicker
|
|
maxDate={new Date()}
|
|
label="Tanggal Lahir"
|
|
value={tanggal_lahir || null}
|
|
onChange={(newValue) => {
|
|
setTanggalLahir(newValue)
|
|
}}
|
|
renderInput={(params) => <TextField {...params} />}
|
|
/>
|
|
</LocalizationProvider>
|
|
</FormControl>
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<TextField
|
|
required
|
|
value={alamat}
|
|
onChange={(e) => setAlamat(e.target.value)}
|
|
id="alamatTextField"
|
|
label="Alamat"
|
|
placeholder="Masukkan Alamat"
|
|
sx={{ width: "85%", boxShadow: 10 }}
|
|
/>
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<TextField
|
|
required
|
|
value={pekerjaan}
|
|
onChange={(e) => setPekerjaan(e.target.value)}
|
|
id="pekerjaanTextField"
|
|
label="Pekerjaan"
|
|
placeholder="Masukkan Pekerjaan"
|
|
sx={{ width: "85%", boxShadow: 10 }}
|
|
/>
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
|
<InputLabel id="demo-simple-select-helper-label">Golongan Darah</InputLabel>
|
|
<Select
|
|
required
|
|
labelId="demo-simple-select-helper-label"
|
|
id="golonganDarahSelect"
|
|
value={golongan_darah}
|
|
label="Jenis"
|
|
onChange={(e) => setGolonganDarah(e.target.value)}
|
|
>
|
|
<MenuItem value="" selected disabled>
|
|
<em>None</em>
|
|
</MenuItem>
|
|
<MenuItem value={"O+"}>O+</MenuItem>
|
|
<MenuItem value={"O-"}>O-</MenuItem>
|
|
<MenuItem value={"A+"}>A+</MenuItem>
|
|
<MenuItem value={"A-"}>A-</MenuItem>
|
|
<MenuItem value={"B+"}>B+</MenuItem>
|
|
<MenuItem value={"B-"}>B-</MenuItem>
|
|
<MenuItem value={"AB+"}>AB+</MenuItem>
|
|
<MenuItem value={"AB-"}>AB-</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
|
<InputLabel id="demo-simple-select-helper-label">Pendidikan</InputLabel>
|
|
<Select
|
|
required
|
|
labelId="demo-simple-select-helper-label"
|
|
id="pendidikanSelect"
|
|
value={pendidikan}
|
|
label="Jenis"
|
|
onChange={(e) => setPendidikan(e.target.value)}
|
|
>
|
|
<MenuItem value="" selected disabled>
|
|
<em>None</em>
|
|
</MenuItem>
|
|
<MenuItem value={"Tiada"}>Tiada</MenuItem>
|
|
<MenuItem value={"SD"}>SD</MenuItem>
|
|
<MenuItem value={"SMP"}>SMP</MenuItem>
|
|
<MenuItem value={"SMA"}>SMA</MenuItem>
|
|
<MenuItem value={"Perguruan Tinggi"}>Perguruan Tinggi</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<TextField
|
|
inputRef={no_telpInputRef}
|
|
required
|
|
value={no_telp}
|
|
onChange={(e) => setNoTelp(e.target.value)}
|
|
id="NoTelpTextField"
|
|
label="No Telpon"
|
|
placeholder="Masukkan No Telpon"
|
|
sx={{ width: "85%", boxShadow: 10 }}
|
|
InputProps={{
|
|
inputComponent: NumberFormatCustom,
|
|
inputProps: {
|
|
maxLength: 13,
|
|
minLength: 11,
|
|
}
|
|
}}
|
|
/>
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
|
<InputLabel id="demo-simple-select-helper-label">Status Pernikahan</InputLabel>
|
|
<Select
|
|
required
|
|
labelId="demo-simple-select-helper-label"
|
|
id="statusPernikahanSelect"
|
|
value={status_pernikahan}
|
|
label="Jenis"
|
|
onChange={(e) => setStatusPernikahan(e.target.value)}
|
|
>
|
|
<MenuItem value="" selected disabled>
|
|
<em>None</em>
|
|
</MenuItem>
|
|
<MenuItem value={"Bujang"}>Bujang</MenuItem>
|
|
<MenuItem value={"Telah Menikah"}>Telah Menikah</MenuItem>
|
|
<MenuItem value={"Duda"}>Duda</MenuItem>
|
|
<MenuItem value={"Janda"}>Janda</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<TextField
|
|
required
|
|
value={nama_orang_tua_wali}
|
|
onChange={(e) => setNamaOrangTuaWali(e.target.value)}
|
|
id="namaOrangTuaWaliTextField"
|
|
label="Nama Orang Tua / Wali"
|
|
placeholder="Masukkan Nama Orang Tua / Wali"
|
|
sx={{ width: "85%", boxShadow: 10 }}
|
|
/>
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<TextField
|
|
required
|
|
value={nama_pasangan}
|
|
onChange={(e) => setNamaPasangan(e.target.value)}
|
|
id="namaPasanganTextField"
|
|
label="Nama Pasangan"
|
|
placeholder="Masukkan Nama Pasangan"
|
|
sx={{ width: "85%", boxShadow: 10 }}
|
|
/>
|
|
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<Divider />
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<FormControl sx={{ width: "85%", boxShadow: 10 }} >
|
|
<LocalizationProvider dateAdapter={AdapterDateFns} >
|
|
<DateTimePicker
|
|
required
|
|
inputRef={tanggal_periksaInputRef}
|
|
minDate={new Date()}
|
|
renderInput={(props) => <TextField {...props} />}
|
|
label="Tanggal Pemeriksaan"
|
|
value={tanggal_periksa || null}
|
|
onChange={(newValue) => {
|
|
cekDoktor(newValue)
|
|
setTanggalPeriksa(newValue);
|
|
}}
|
|
/>
|
|
</LocalizationProvider>
|
|
</FormControl>
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<FormControl sx={{ width: "85%", boxShadow: 10 }} >
|
|
<InputLabel id="demo-simple-select-helper-label">Dokter</InputLabel>
|
|
<Select
|
|
required
|
|
labelId="demo-simple-select-helper-label"
|
|
id="jenisKelaminSelect"
|
|
value={dokter}
|
|
label="Jenis"
|
|
onChange={(e) => setDokter(e.target.value)}
|
|
>
|
|
<MenuItem value="">
|
|
<em>
|
|
{
|
|
(dokterList.length == 0) ? "Tiada Jadwal Dokter" : "-Pilih Dokter"
|
|
}
|
|
</em>
|
|
</MenuItem>
|
|
{
|
|
(dokterList.length > 0) ?
|
|
dokterList.map((dokter, index) => {
|
|
return (
|
|
<MenuItem key={"dokter" + index} value={dokter.id_dokter}>{dokter.tb_dokter.nama} / {dokter.tb_dokter.spesialis}</MenuItem>
|
|
)
|
|
}) :
|
|
null
|
|
}
|
|
</Select>
|
|
</FormControl>
|
|
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<Box textAlign="center">
|
|
<Button variant="contained" type="submit">Tambah</Button>
|
|
</Box>
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
</Card>
|
|
</Grid>
|
|
|
|
<Grid item xs={12} md={7}>
|
|
<Grid item xs={12} md={12}>
|
|
<Paper align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10, overflow: 'hidden' }}>
|
|
<Typography variant="h6" gutterBottom sx={{
|
|
fontWeight: 'bold',
|
|
textAlign: 'left',
|
|
paddingLeft: '3%',
|
|
paddingTop: "10px",
|
|
paddingBottom: "10px",
|
|
backgroundColor: "silver",
|
|
}}>List Pasien</Typography>
|
|
<Box sx={{ padding: "5px" }} />
|
|
<Grid container spacing={2}>
|
|
<Grid item xs={12} md={2} />
|
|
<Grid item xs={12} md={8} component="form"
|
|
onSubmit={cariDataPasien}
|
|
>
|
|
<TextField
|
|
required
|
|
inputRef={cariInputRef}
|
|
id="cariTextField"
|
|
label="Nama @ NIK Pasien"
|
|
placeholder="Masukkan Nama atau NIK Pasien"
|
|
sx={{ width: "85%", boxShadow: 10 }}
|
|
onChange={
|
|
(e) => {
|
|
if (e.target.value == "") {
|
|
setDataPasienAll(props.pasien)
|
|
}
|
|
}
|
|
}
|
|
/>
|
|
<Box sx={{ padding: "5px" }} />
|
|
<Box textAlign="center">
|
|
<Button variant="contained" type="submit">Cari</Button>
|
|
</Box>
|
|
</Grid>
|
|
<Grid item xs={12} md={2} />
|
|
</Grid>
|
|
<Box sx={{ padding: "10px" }} />
|
|
<TableContainer sx={{
|
|
maxHeight: 500,
|
|
// padding: "15px",
|
|
paddingLeft: "15px",
|
|
paddingRight: "15px",
|
|
paddingBottom: "15px",
|
|
}}>
|
|
<Table stickyHeader aria-label="sticky table" sx={{
|
|
boxShadow: 3,
|
|
"& .MuiTableCell-root": {
|
|
borderLeft: "1px solid rgba(224, 224, 224, 1)"
|
|
}
|
|
}}>
|
|
<TableHead>
|
|
<TableRow hover>
|
|
<StyledTableCell>NIK</StyledTableCell>
|
|
<StyledTableCell>Nama</StyledTableCell>
|
|
<StyledTableCell>Umur</StyledTableCell>
|
|
<StyledTableCell>Golongan Darah</StyledTableCell>
|
|
<StyledTableCell>Aksi</StyledTableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{
|
|
!awal ?
|
|
// loop props.pasien and render table row
|
|
props.pasien.map((pasien, index) => {
|
|
return (
|
|
<TableRow key={index}>
|
|
<TableCell>{pasien.nik}</TableCell>
|
|
<TableCell>{pasien.nama}</TableCell>
|
|
<TableCell>{pasien.tgl_lahir}</TableCell>
|
|
<TableCell>{pasien.golongan_darah}</TableCell>
|
|
<TableCell>
|
|
<IconButton size="small" color="primary"
|
|
onClick={
|
|
async () => {
|
|
setOpenDialogEdit(true)
|
|
setDataPasienPeriksa(pasien)
|
|
}
|
|
}
|
|
title="Edit Data Pasien"
|
|
>
|
|
<ModeEditIcon />
|
|
</IconButton>
|
|
<IconButton size="small" color="success"
|
|
onClick={
|
|
async () => {
|
|
lihatJadwal(pasien.nik)
|
|
setDataPasienPeriksa(pasien)
|
|
}
|
|
}
|
|
title="Lihat Jadwal Pasien"
|
|
>
|
|
<EventAvailableIcon />
|
|
</IconButton>
|
|
</TableCell>
|
|
</TableRow>
|
|
)
|
|
})
|
|
:
|
|
(dataPasienAll.length > 0)
|
|
?
|
|
// loop dataPasienAll and render table row
|
|
dataPasienAll.map((pasien, index) => {
|
|
return (
|
|
<TableRow key={index}>
|
|
<TableCell>{pasien.nik}</TableCell>
|
|
<TableCell>{pasien.nama}</TableCell>
|
|
<TableCell>{pasien.tgl_lahir}</TableCell>
|
|
<TableCell>{pasien.golongan_darah}</TableCell>
|
|
<TableCell>
|
|
<IconButton size="small" color="primary"
|
|
onClick={
|
|
async () => {
|
|
setOpenDialogEdit(true)
|
|
setDataPasienPeriksa(pasien)
|
|
}
|
|
}
|
|
title="Edit Data Pasien"
|
|
>
|
|
<ModeEditIcon />
|
|
</IconButton>
|
|
<IconButton size="small" color="success"
|
|
onClick={
|
|
async () => {
|
|
lihatJadwal(pasien.nik)
|
|
}
|
|
}
|
|
title="Lihat Jadwal Pasien"
|
|
>
|
|
<EventAvailableIcon />
|
|
</IconButton>
|
|
</TableCell>
|
|
</TableRow>
|
|
)
|
|
})
|
|
:
|
|
<TableRow>
|
|
<TableCell colSpan={5}
|
|
align="center"
|
|
>Tiada Data</TableCell>
|
|
</TableRow>
|
|
|
|
}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
<Box sx={{ padding: "5px" }}></Box>
|
|
{/* <Box textAlign="center">
|
|
<Button variant="contained">Cetak</Button>
|
|
</Box>
|
|
<Box sx={{ padding: "10px" }}></Box> */}
|
|
</Paper>
|
|
</Grid>
|
|
<Box sx={{ padding: "15px" }}></Box>
|
|
<Grid item xs={12} md={12}>
|
|
<Paper component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10, overflow: 'hidden' }}>
|
|
<Typography variant="h6" gutterBottom sx={{
|
|
fontWeight: 'bold',
|
|
textAlign: 'left',
|
|
paddingLeft: '3%',
|
|
paddingTop: "10px",
|
|
paddingBottom: "10px",
|
|
backgroundColor: "silver",
|
|
}}>Jadwal Dokter Hari {hari_ini}</Typography>
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<TableContainer sx={{
|
|
maxHeight: 500,
|
|
// padding: "15px",
|
|
paddingLeft: "15px",
|
|
paddingRight: "15px",
|
|
paddingBottom: "15px",
|
|
}}>
|
|
<Table stickyHeader aria-label="sticky table" sx={{
|
|
boxShadow: 3,
|
|
"& .MuiTableCell-root": {
|
|
borderLeft: "1px solid rgba(224, 224, 224, 1)"
|
|
}
|
|
}}>
|
|
<TableHead>
|
|
<TableRow hover>
|
|
<StyledTableCell>Nama</StyledTableCell>
|
|
<StyledTableCell>Spesialis</StyledTableCell>
|
|
<StyledTableCell>Jam Mulai</StyledTableCell>
|
|
<StyledTableCell>Jam Selesai</StyledTableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{
|
|
(props.jadwal_dokter.length > 0)
|
|
?
|
|
props.jadwal_dokter.map((jadwal, index) => {
|
|
return (
|
|
<TableRow key={index}>
|
|
<TableCell>{jadwal.tb_dokter.nama}</TableCell>
|
|
<TableCell>{jadwal.tb_dokter.spesialis}</TableCell>
|
|
<TableCell>{jadwal.jam_mulai}</TableCell>
|
|
<TableCell>{jadwal.jam_selesai}</TableCell>
|
|
</TableRow>
|
|
)
|
|
})
|
|
:
|
|
<TableRow>
|
|
<TableCell colSpan={4} align="center">
|
|
Tiada Jadwal Dokter
|
|
</TableCell>
|
|
</TableRow>
|
|
}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
<Box sx={{ padding: "5px" }}></Box>
|
|
{/* <Box textAlign="center">
|
|
<Button variant="contained">Cetak</Button>
|
|
</Box>
|
|
<Box sx={{ padding: "10px" }}></Box> */}
|
|
</Paper>
|
|
</Grid>
|
|
<Box sx={{ padding: "15px" }}></Box>
|
|
<Grid item xs={12} md={12}>
|
|
<Paper component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10, overflow: 'hidden' }}>
|
|
<Typography variant="h6" gutterBottom sx={{
|
|
fontWeight: 'bold',
|
|
textAlign: 'left',
|
|
paddingLeft: '3%',
|
|
paddingTop: "10px",
|
|
paddingBottom: "10px",
|
|
backgroundColor: "silver",
|
|
}}>Jadwal Pasien Hari {hari_ini}</Typography>
|
|
<Box sx={{ padding: "10px" }}></Box>
|
|
<TableContainer sx={{
|
|
maxHeight: 500,
|
|
// padding: "15px",
|
|
paddingLeft: "15px",
|
|
paddingRight: "15px",
|
|
paddingBottom: "15px",
|
|
}}>
|
|
<Table stickyHeader aria-label="sticky table" sx={{
|
|
boxShadow: 3,
|
|
"& .MuiTableCell-root": {
|
|
borderLeft: "1px solid rgba(224, 224, 224, 1)"
|
|
}
|
|
}}>
|
|
<TableHead>
|
|
<TableRow hover>
|
|
<StyledTableCell>Jam Periksa</StyledTableCell>
|
|
<StyledTableCell>Doktor</StyledTableCell>
|
|
<StyledTableCell>NIK</StyledTableCell>
|
|
<StyledTableCell>Nama</StyledTableCell>
|
|
<StyledTableCell>Umur</StyledTableCell>
|
|
<StyledTableCell>Golongan Darah</StyledTableCell>
|
|
<StyledTableCell>Status</StyledTableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{
|
|
(jadwalPasien.length > 0)
|
|
?
|
|
jadwalPasien.map((jadwal, index) => {
|
|
return (
|
|
<TableRow key={index}>
|
|
<TableCell>
|
|
{
|
|
jadwal.jam_periksa
|
|
}
|
|
</TableCell>
|
|
<TableCell>
|
|
{
|
|
jadwal.tb_dokter.nama
|
|
}
|
|
</TableCell>
|
|
<TableCell>{jadwal.id_pasien}</TableCell>
|
|
<TableCell>{jadwal.tb_pasien.nama}</TableCell>
|
|
<TableCell>
|
|
<Umur tanggal_lahir={jadwal.tb_pasien.tgl_lahir} />
|
|
</TableCell>
|
|
<TableCell>{jadwal.tb_pasien.golongan_darah}</TableCell>
|
|
<TableCell>
|
|
{
|
|
(jadwal.diagnosa == "" || jadwal.diagnosa == null) ? "Belum Diperiksa" : "Sudah Diperiksa"
|
|
}
|
|
</TableCell>
|
|
</TableRow>
|
|
)
|
|
})
|
|
:
|
|
<TableRow>
|
|
<TableCell colSpan={7} align="center">
|
|
Tiada Jadwal Pasien
|
|
</TableCell>
|
|
</TableRow>
|
|
}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
<Box sx={{ padding: "5px" }}></Box>
|
|
{/* <Box textAlign="center">
|
|
<Button variant="contained">Cetak</Button>
|
|
</Box>
|
|
<Box sx={{ padding: "10px" }}></Box> */}
|
|
</Paper>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
</Grid>
|
|
</Box>
|
|
</Box>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export const getServerSideProps = withIronSessionSsr(
|
|
async function getServerSideProps({ req }) {
|
|
const user = req.session.user;
|
|
console.log(user, "sini di server side props");
|
|
// console.log(req.query)
|
|
if (!user) {
|
|
return {
|
|
redirect: {
|
|
destination: '/?error=true',
|
|
permanent: false,
|
|
}
|
|
};
|
|
}
|
|
|
|
let cek_user = await all_function.cek_user(user.username, user.password, user.role)
|
|
console.log(cek_user, "cek user")
|
|
|
|
if (cek_user !== true) {
|
|
return {
|
|
redirect: {
|
|
destination: '/?error=true',
|
|
permanent: false,
|
|
}
|
|
};
|
|
}
|
|
|
|
let all_pasien = await all_function.pasien_all();
|
|
let jadwal_dokter_today = await all_function.jadwal_dokter_today();
|
|
let jadwal_pasien_today = await all_function.jadwal_pasien_today();
|
|
// console.log(all_pasien, "ini all pasien");
|
|
// console.log(jadwal_today, "ini jadwal today");
|
|
|
|
return {
|
|
props: {
|
|
user: req.session.user,
|
|
pasien: all_pasien,
|
|
jadwal_dokter: jadwal_dokter_today,
|
|
jadwal_pasien: jadwal_pasien_today,
|
|
},
|
|
// revalidate: 10
|
|
};
|
|
},
|
|
{
|
|
cookieName: "myapp_cookiename",
|
|
password: "complex_password_at_least_32_characters_long",
|
|
// secure: true should be used in production (HTTPS) but can't be used in development (HTTP)
|
|
cookieOptions: {
|
|
secure: process.env.NODE_ENV === "production",
|
|
},
|
|
},
|
|
);
|
|
|
|
export default DataPasienPage;
|