update file report
This commit is contained in:
93
frontend/dashboard/src/pages/Report/Log/Create.tsx
Normal file
93
frontend/dashboard/src/pages/Report/Log/Create.tsx
Normal file
@@ -0,0 +1,93 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import { paramCase } from 'change-case';
|
||||||
|
import { useParams, useLocation } from 'react-router-dom';
|
||||||
|
// @mui
|
||||||
|
import { Container, Stack } from '@mui/material';
|
||||||
|
import useSettings from '../../../hooks/useSettings';
|
||||||
|
import Page from '../../../components/Page';
|
||||||
|
import Form from './Form';
|
||||||
|
import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
|
||||||
|
import axios from '../../../utils/axios';
|
||||||
|
import { Practitioner } from '../../../@types/doctor';
|
||||||
|
import ButtonBack from '../../../components/ButtonBack';
|
||||||
|
|
||||||
|
export default function Create() {
|
||||||
|
const { themeStretch } = useSettings();
|
||||||
|
const { id } = useParams();
|
||||||
|
|
||||||
|
const isEdit = id ? true : false;
|
||||||
|
|
||||||
|
const [currentPractitioner, setCurrentPractitioner] = useState<Practitioner>();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isEdit) {
|
||||||
|
axios.get('/doctors/' + id).then((res) => {
|
||||||
|
setCurrentPractitioner(res.data);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Page title="Membership: Create a new Dokter">
|
||||||
|
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||||
|
<Stack direction="row" alignItems="center">
|
||||||
|
{/* <ButtonBack /> */}
|
||||||
|
<HeaderBreadcrumbs
|
||||||
|
heading={!isEdit ? 'Manage a new Dokter' : 'Manage Dokter'}
|
||||||
|
links={[
|
||||||
|
{ name: 'Master', href: '/master' },
|
||||||
|
{
|
||||||
|
name: 'Doctors',
|
||||||
|
href: '/master/doctors',
|
||||||
|
},
|
||||||
|
{ name: !isEdit ? 'Create' : currentPractitioner?.name ?? '' },
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
|
|
||||||
|
<Form
|
||||||
|
// isSubmitting={isSubmitting}
|
||||||
|
isEdit={isEdit}
|
||||||
|
currentPractitioner={currentPractitioner}
|
||||||
|
/>
|
||||||
|
</Container>
|
||||||
|
</Page>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
// const pageTitle = 'Create Data Dokter';
|
||||||
|
// return (
|
||||||
|
// <Page title={pageTitle}>
|
||||||
|
// <Container maxWidth={themeStretch ? false : 'xl'}>
|
||||||
|
// <HeaderBreadcrumbs
|
||||||
|
// heading={pageTitle}
|
||||||
|
// links={[
|
||||||
|
// {
|
||||||
|
// name: 'Master',
|
||||||
|
// href: '/master',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: 'Dokter',
|
||||||
|
// href: '/master/organizations/',
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// name: 'Create',
|
||||||
|
// href: '/master/organizations/create/',
|
||||||
|
// },
|
||||||
|
// ]}
|
||||||
|
// />
|
||||||
|
|
||||||
|
// <Grid container spacing={2}>
|
||||||
|
// <Grid item xs={12}>
|
||||||
|
// <Card sx={{ p: 2 }}>
|
||||||
|
// <Form
|
||||||
|
// isSubmitting={isSubmitting}
|
||||||
|
// isEdit={isEdit}
|
||||||
|
// currentOrganizations={currentOrganizations}
|
||||||
|
// />
|
||||||
|
// </Card>
|
||||||
|
// </Grid>
|
||||||
|
// </Grid>
|
||||||
|
// </Container>
|
||||||
|
// </Page>
|
||||||
|
// );
|
||||||
|
// }
|
||||||
260
frontend/dashboard/src/pages/Report/Log/Form.tsx
Normal file
260
frontend/dashboard/src/pages/Report/Log/Form.tsx
Normal file
@@ -0,0 +1,260 @@
|
|||||||
|
import * as Yup from 'yup';
|
||||||
|
import { useSnackbar } from 'notistack';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||||
|
import MenuItem from '@mui/material/MenuItem';
|
||||||
|
|
||||||
|
import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
// form
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { yupResolver } from '@hookform/resolvers/yup';
|
||||||
|
// @mui
|
||||||
|
import { styled } from '@mui/material/styles';
|
||||||
|
import { LoadingButton } from '@mui/lab';
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Avatar,
|
||||||
|
Button,
|
||||||
|
ButtonGroup,
|
||||||
|
Card,
|
||||||
|
FormHelperText,
|
||||||
|
Grid,
|
||||||
|
Stack,
|
||||||
|
Typography,
|
||||||
|
TextField,
|
||||||
|
Chip,
|
||||||
|
} from '@mui/material';
|
||||||
|
|
||||||
|
import CancelIcon from '@mui/icons-material/Cancel';
|
||||||
|
|
||||||
|
// components
|
||||||
|
import {
|
||||||
|
FormProvider,
|
||||||
|
RHFTextField,
|
||||||
|
RHFRadioGroup,
|
||||||
|
RHFUploadAvatar,
|
||||||
|
RHFSwitch,
|
||||||
|
RHFEditor,
|
||||||
|
RHFDatepicker,
|
||||||
|
RHFMultiCheckbox,
|
||||||
|
RHFCheckbox,
|
||||||
|
RHFCustomMultiCheckbox,
|
||||||
|
} from '../../../components/hook-form';
|
||||||
|
import axios from '../../../utils/axios';
|
||||||
|
import { fCurrency } from '../../../utils/formatNumber';
|
||||||
|
import { Practitioner } from '../../../@types/doctor';
|
||||||
|
|
||||||
|
import { Label, Rowing } from '@mui/icons-material';
|
||||||
|
|
||||||
|
const LabelStyle = styled(Typography)(({ theme }) => ({
|
||||||
|
...theme.typography.subtitle2,
|
||||||
|
color: theme.palette.text.secondary,
|
||||||
|
marginBottom: theme.spacing(1),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const HeaderStyle = styled('header')(({ theme }) => ({
|
||||||
|
paddingBottom: theme.spacing(5),
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
}));
|
||||||
|
|
||||||
|
const Title = styled(Typography)(({ theme }) => ({
|
||||||
|
...theme.typography.h4,
|
||||||
|
boxShadow: 'none',
|
||||||
|
// paddingBottom: theme.spacing(3),
|
||||||
|
fontWeight: 700,
|
||||||
|
color: '#005B7F',
|
||||||
|
}));
|
||||||
|
|
||||||
|
interface FormValuesProps extends Partial<Practitioner> {
|
||||||
|
taxes: boolean;
|
||||||
|
inStock: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
isEdit: boolean;
|
||||||
|
currentPractitioner?: Practitioner;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Span = styled(Typography)(({ theme }) => ({
|
||||||
|
boxShadow: 'none',
|
||||||
|
paddingBottom: theme.spacing(1),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const Text = styled(Typography)(({ theme }) => ({
|
||||||
|
boxShadow: 'none',
|
||||||
|
paddingBottom: theme.spacing(3),
|
||||||
|
}));
|
||||||
|
|
||||||
|
export default function PractitionerForm({ isEdit, currentPractitioner }: Props) {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const [practitioner_group, setPractitionerGroups] = useState([]);
|
||||||
|
|
||||||
|
// const [ errors, setErrors ] = useState<{ [key: string]: string }>({});
|
||||||
|
|
||||||
|
const { enqueueSnackbar } = useSnackbar();
|
||||||
|
|
||||||
|
const NewCorporateSchema = Yup.object().shape({
|
||||||
|
name: Yup.string().required('Name is required'),
|
||||||
|
// file: Yup.boolean().required('Corporate Status is required'),
|
||||||
|
});
|
||||||
|
|
||||||
|
const defaultValues = useMemo(
|
||||||
|
() => ({
|
||||||
|
id: currentPractitioner?.id,
|
||||||
|
name: currentPractitioner?.name || '',
|
||||||
|
address: currentPractitioner?.address || '',
|
||||||
|
birth_date: currentPractitioner?.birth_date || '',
|
||||||
|
gender: currentPractitioner?.gender || '',
|
||||||
|
description: currentPractitioner?.description || '',
|
||||||
|
birth_place: currentPractitioner?.birth_place || '',
|
||||||
|
active: currentPractitioner?.active === 1 ? true : false,
|
||||||
|
avatar_url: currentPractitioner?.avatar_url || '',
|
||||||
|
doctor_id: currentPractitioner?.doctor_id || '',
|
||||||
|
organizations: currentPractitioner?.organizations || [],
|
||||||
|
specialities: currentPractitioner?.specialities || [],
|
||||||
|
}),
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
[currentPractitioner]
|
||||||
|
);
|
||||||
|
|
||||||
|
console.log('defaultValues', defaultValues);
|
||||||
|
|
||||||
|
function StatusLabel({ value }: { value: boolean }) {
|
||||||
|
return (
|
||||||
|
<Chip
|
||||||
|
label={value ? 'Aktif' : 'Tidak Aktif'}
|
||||||
|
size="medium"
|
||||||
|
sx={{
|
||||||
|
backgroundColor: value ? 'rgba(84, 214, 44, 0.16)' : 'rgba(255, 72, 66, 0.16)',
|
||||||
|
color: value ? '#229A16' : '#B72136',
|
||||||
|
padding: '1 8 1 8 px',
|
||||||
|
borderRadius: '4px',
|
||||||
|
fontSize: '12px',
|
||||||
|
fontWeight: 'bold',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const methods = useForm<FormValuesProps>({
|
||||||
|
resolver: yupResolver(NewCorporateSchema),
|
||||||
|
defaultValues,
|
||||||
|
});
|
||||||
|
|
||||||
|
const {
|
||||||
|
reset,
|
||||||
|
watch,
|
||||||
|
control,
|
||||||
|
setValue,
|
||||||
|
getValues,
|
||||||
|
setError,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { isSubmitting },
|
||||||
|
} = methods;
|
||||||
|
|
||||||
|
const values = watch();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isEdit && currentPractitioner) {
|
||||||
|
reset(defaultValues);
|
||||||
|
}
|
||||||
|
if (!isEdit) {
|
||||||
|
reset(defaultValues);
|
||||||
|
}
|
||||||
|
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [isEdit, currentPractitioner]);
|
||||||
|
|
||||||
|
const handleActivate = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
setValue('active', event.target.checked);
|
||||||
|
|
||||||
|
console.log('event.target.checked', event.target.checked);
|
||||||
|
|
||||||
|
const formData = new FormData();
|
||||||
|
formData.append('active', event.target.checked ? '1' : '0');
|
||||||
|
formData.append('_method', 'PUT');
|
||||||
|
axios.post('/doctors/' + currentPractitioner?.id ?? '', formData);
|
||||||
|
|
||||||
|
enqueueSnackbar('active Updated Successfully!', { variant: 'success' });
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormProvider methods={methods}>
|
||||||
|
<Stack spacing={3}>
|
||||||
|
<Box sx={{ width: '100%' }}>
|
||||||
|
{/* <Stack spacing={3}> */}
|
||||||
|
<Card sx={{ p: 5 }}>
|
||||||
|
<HeaderStyle>
|
||||||
|
<Grid item xs={6} md={6}>
|
||||||
|
<Title>Data Dokter</Title>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6} md={6}>
|
||||||
|
{/* <Typography>Status Rumah Sakit</Typography> */}
|
||||||
|
<RHFSwitch name="active" label="" onClick={handleActivate} />
|
||||||
|
<StatusLabel value={values.active} />
|
||||||
|
</Grid>
|
||||||
|
</HeaderStyle>
|
||||||
|
<Title variant="h5">Informasi Umum</Title>
|
||||||
|
<Avatar
|
||||||
|
alt="Remy Sharp"
|
||||||
|
src={currentPractitioner?.avatar_url}
|
||||||
|
sx={{ width: 120, height: 120, marginBottom: 2 }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||||
|
<Grid item xs={7}>
|
||||||
|
<Span style={{ fontWeight: 'bold' }}>Nama Dokter</Span>
|
||||||
|
<Text>{currentPractitioner?.name ? currentPractitioner?.name : '-'}</Text>
|
||||||
|
<Span style={{ fontWeight: 'bold' }}>No Telp</Span>
|
||||||
|
<Text>{currentPractitioner?.phone ? currentPractitioner?.phone : '-'}</Text>
|
||||||
|
<Span style={{ fontWeight: 'bold' }}>Tempat Lahir</Span>
|
||||||
|
<Text>
|
||||||
|
{currentPractitioner?.birth_place ? currentPractitioner?.birth_place : '-'}
|
||||||
|
</Text>
|
||||||
|
<Span style={{ fontWeight: 'bold' }}>Alamat</Span>
|
||||||
|
<Text>{currentPractitioner?.address ? currentPractitioner?.address : '-'}</Text>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={5} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||||
|
<Span style={{ fontWeight: 'bold' }}>Jenis Kelamin</Span>
|
||||||
|
<Text>{currentPractitioner?.gender ? currentPractitioner?.gender : '-'}</Text>
|
||||||
|
<Span style={{ fontWeight: 'bold' }}>Email</Span>
|
||||||
|
<Text>{currentPractitioner?.email ? currentPractitioner?.email : '-'}</Text>
|
||||||
|
<Span style={{ fontWeight: 'bold' }}>Tanggal Lahir</Span>
|
||||||
|
<Text>
|
||||||
|
{currentPractitioner?.birth_date ? currentPractitioner?.birth_date : '-'}
|
||||||
|
</Text>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Card>
|
||||||
|
<Card sx={{ p: 5, marginTop: 2 }}>
|
||||||
|
<Title variant="h5">Tempat Praktik</Title>
|
||||||
|
{currentPractitioner?.organizations?.map((item, index) => (
|
||||||
|
<Box key={index} sx={{ mt: 3 }}>
|
||||||
|
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||||
|
<Grid item xs={7}>
|
||||||
|
<Text>{item.name}</Text>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</Card>
|
||||||
|
<Card sx={{ p: 5, marginTop: 2 }}>
|
||||||
|
<Title variant="h5">Spesialisasi</Title>
|
||||||
|
{currentPractitioner?.specialities?.map((item, index) => (
|
||||||
|
<Box key={index} sx={{ mt: 3 }}>
|
||||||
|
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||||
|
<Grid item xs={7}>
|
||||||
|
<Text>{item.name}</Text>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Box>
|
||||||
|
))}
|
||||||
|
</Card>
|
||||||
|
</Box>
|
||||||
|
</Stack>
|
||||||
|
</FormProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
275
frontend/dashboard/src/pages/Report/Log/View.tsx
Normal file
275
frontend/dashboard/src/pages/Report/Log/View.tsx
Normal file
@@ -0,0 +1,275 @@
|
|||||||
|
import * as Yup from 'yup';
|
||||||
|
import { useSnackbar } from 'notistack';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||||
|
import MenuItem from '@mui/material/MenuItem';
|
||||||
|
|
||||||
|
import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||||||
|
import * as React from 'react';
|
||||||
|
|
||||||
|
// form
|
||||||
|
import { useForm } from 'react-hook-form';
|
||||||
|
import { yupResolver } from '@hookform/resolvers/yup';
|
||||||
|
// @mui
|
||||||
|
import { styled } from '@mui/material/styles';
|
||||||
|
import { LoadingButton } from '@mui/lab';
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Avatar,
|
||||||
|
Button,
|
||||||
|
ButtonGroup,
|
||||||
|
Card,
|
||||||
|
FormHelperText,
|
||||||
|
Grid,
|
||||||
|
Stack,
|
||||||
|
Typography,
|
||||||
|
TextField,
|
||||||
|
Chip,
|
||||||
|
Badge,
|
||||||
|
Divider,
|
||||||
|
} from '@mui/material';
|
||||||
|
|
||||||
|
import CancelIcon from '@mui/icons-material/Cancel';
|
||||||
|
|
||||||
|
// components
|
||||||
|
import {
|
||||||
|
FormProvider,
|
||||||
|
RHFTextField,
|
||||||
|
RHFRadioGroup,
|
||||||
|
RHFUploadAvatar,
|
||||||
|
RHFSwitch,
|
||||||
|
RHFEditor,
|
||||||
|
RHFDatepicker,
|
||||||
|
RHFMultiCheckbox,
|
||||||
|
RHFCheckbox,
|
||||||
|
RHFCustomMultiCheckbox,
|
||||||
|
} from '../../../components/hook-form';
|
||||||
|
import axios from '../../../utils/axios';
|
||||||
|
import { fCurrency } from '../../../utils/formatNumber';
|
||||||
|
import { Appointment } from '../../../@types/doctor';
|
||||||
|
|
||||||
|
import { Label, Rowing, Spa } from '@mui/icons-material';
|
||||||
|
import { border } from '@mui/system';
|
||||||
|
|
||||||
|
const LabelStyle = styled(Typography)(({ theme }) => ({
|
||||||
|
...theme.typography.subtitle2,
|
||||||
|
color: theme.palette.text.secondary,
|
||||||
|
marginBottom: theme.spacing(1),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const HeaderStyle = styled('header')(({ theme }) => ({
|
||||||
|
paddingBottom: theme.spacing(5),
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
}));
|
||||||
|
|
||||||
|
const Title = styled(Typography)(({ theme }) => ({
|
||||||
|
...theme.typography.h4,
|
||||||
|
boxShadow: 'none',
|
||||||
|
// paddingBottom: theme.spacing(3),
|
||||||
|
fontWeight: 700,
|
||||||
|
color: '#005B7F',
|
||||||
|
}));
|
||||||
|
|
||||||
|
interface FormValuesProps extends Partial<Appointment> {
|
||||||
|
taxes: boolean;
|
||||||
|
inStock: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
isEdit: boolean;
|
||||||
|
currentAppointment?: Appointment;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Span = styled(Typography)(({ theme }) => ({
|
||||||
|
boxShadow: 'none',
|
||||||
|
paddingBottom: theme.spacing(1),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const Text = styled(Typography)(({ theme }) => ({
|
||||||
|
boxShadow: 'none',
|
||||||
|
paddingBottom: theme.spacing(3),
|
||||||
|
}));
|
||||||
|
|
||||||
|
export default function AppointmentForm({ isEdit, currentAppointment }: Props) {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
// const [ errors, setErrors ] = useState<{ [key: string]: string }>({});
|
||||||
|
|
||||||
|
const { enqueueSnackbar } = useSnackbar();
|
||||||
|
|
||||||
|
const NewCorporateSchema = Yup.object().shape({
|
||||||
|
name: Yup.string().required('Name is required'),
|
||||||
|
// file: Yup.boolean().required('Corporate Status is required'),
|
||||||
|
});
|
||||||
|
|
||||||
|
const defaultValues = useMemo(
|
||||||
|
() => ({
|
||||||
|
id: currentAppointment?.id,
|
||||||
|
name: currentAppointment?.name || '',
|
||||||
|
address: currentAppointment?.address || '',
|
||||||
|
birth_date: currentAppointment?.birth_date || '',
|
||||||
|
gender: currentAppointment?.gender || '',
|
||||||
|
description: currentAppointment?.description || '',
|
||||||
|
birth_place: currentAppointment?.birth_place || '',
|
||||||
|
active: currentAppointment?.active === 1 ? true : false,
|
||||||
|
avatar_url: currentAppointment?.avatar_url || '',
|
||||||
|
doctor_id: currentAppointment?.doctor_id || '',
|
||||||
|
organizations: currentAppointment?.organizations || [],
|
||||||
|
specialities: currentAppointment?.specialities || [],
|
||||||
|
}),
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
[currentAppointment]
|
||||||
|
);
|
||||||
|
|
||||||
|
const methods = useForm<FormValuesProps>({
|
||||||
|
resolver: yupResolver(NewCorporateSchema),
|
||||||
|
defaultValues,
|
||||||
|
});
|
||||||
|
|
||||||
|
const {
|
||||||
|
reset,
|
||||||
|
watch,
|
||||||
|
control,
|
||||||
|
setValue,
|
||||||
|
getValues,
|
||||||
|
setError,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { isSubmitting },
|
||||||
|
} = methods;
|
||||||
|
|
||||||
|
const values = watch();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isEdit && currentAppointment) {
|
||||||
|
reset(defaultValues);
|
||||||
|
}
|
||||||
|
if (!isEdit) {
|
||||||
|
reset(defaultValues);
|
||||||
|
}
|
||||||
|
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [isEdit, currentAppointment]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormProvider methods={methods}>
|
||||||
|
<Stack spacing={3}>
|
||||||
|
<Box sx={{ width: '100%' }}>
|
||||||
|
{/* <Stack spacing={3}> */}
|
||||||
|
<Card sx={{ p: 5 }}>
|
||||||
|
<HeaderStyle>
|
||||||
|
<Grid item xs={6} md={6}>
|
||||||
|
<Stack
|
||||||
|
direction="row"
|
||||||
|
divider={<Divider orientation="vertical" flexItem />}
|
||||||
|
spacing={2}
|
||||||
|
>
|
||||||
|
<Title>Data Appointment</Title>
|
||||||
|
<Chip label={currentAppointment?.status} variant="outlined" />
|
||||||
|
</Stack>
|
||||||
|
</Grid>
|
||||||
|
</HeaderStyle>
|
||||||
|
|
||||||
|
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||||
|
<Grid item xs={12}>
|
||||||
|
<Stack direction="row" spacing={2}>
|
||||||
|
<Grid item xs={6}>
|
||||||
|
<Stack direction="row" spacing={2}>
|
||||||
|
<Span style={{ fontWeight: 'bold' }}>Tanggal Booking :</Span>
|
||||||
|
<Text>
|
||||||
|
{currentAppointment?.date_created ? currentAppointment?.date_created : '-'}
|
||||||
|
</Text>
|
||||||
|
</Stack>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6}>
|
||||||
|
<Stack direction="row" spacing={2}>
|
||||||
|
<Span style={{ fontWeight: 'bold' }}>Tanggal Appointment :</Span>
|
||||||
|
<Text>
|
||||||
|
{currentAppointment?.date_appointment
|
||||||
|
? currentAppointment?.date_appointment
|
||||||
|
: '-'}
|
||||||
|
</Text>
|
||||||
|
</Stack>
|
||||||
|
</Grid>
|
||||||
|
</Stack>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6}>
|
||||||
|
<Span style={{ fontWeight: 'bold' }}>Nama Dokter</Span>
|
||||||
|
<Text>
|
||||||
|
{currentAppointment?.doctor_name ? currentAppointment?.doctor_name : '-'}
|
||||||
|
</Text>
|
||||||
|
<Span style={{ fontWeight: 'bold' }}>Faskes</Span>
|
||||||
|
<Text>
|
||||||
|
{currentAppointment?.health_care ? currentAppointment?.health_care : '-'}
|
||||||
|
</Text>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||||
|
<Span style={{ fontWeight: 'bold' }}>Spesialis</Span>
|
||||||
|
<Text>{currentAppointment?.speciality ? currentAppointment?.speciality : '-'}</Text>
|
||||||
|
<Span style={{ fontWeight: 'bold' }}>Appointment Via Web/App</Span>
|
||||||
|
<Text>
|
||||||
|
{currentAppointment?.appointment_media
|
||||||
|
? currentAppointment?.appointment_media
|
||||||
|
: '-'}
|
||||||
|
</Text>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Card>
|
||||||
|
<Card sx={{ mt: 5, p: 5 }}>
|
||||||
|
<HeaderStyle>
|
||||||
|
<Grid item xs={6} md={6}>
|
||||||
|
<Title>Data Pembayaran</Title>
|
||||||
|
</Grid>
|
||||||
|
</HeaderStyle>
|
||||||
|
|
||||||
|
{currentAppointment?.payment_detail !== null ? (
|
||||||
|
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||||
|
<Grid item xs={6}>
|
||||||
|
<Span style={{ fontWeight: 'bold' }}>Metode Pembayaran</Span>
|
||||||
|
<Text>
|
||||||
|
{currentAppointment?.payment_method ? currentAppointment?.payment_method : '-'}
|
||||||
|
</Text>
|
||||||
|
<Span style={{ fontWeight: 'bold' }}>Harga</Span>
|
||||||
|
<Text>
|
||||||
|
{currentAppointment?.payment_detail?.gross_amount
|
||||||
|
? currentAppointment?.payment_detail?.gross_amount
|
||||||
|
: '-'}
|
||||||
|
</Text>
|
||||||
|
<Span style={{ fontWeight: 'bold' }}>Mata Uang</Span>
|
||||||
|
<Text>
|
||||||
|
{currentAppointment?.payment_detail?.currency
|
||||||
|
? currentAppointment?.payment_detail?.currency
|
||||||
|
: '-'}
|
||||||
|
</Text>
|
||||||
|
</Grid>
|
||||||
|
<Grid item xs={6} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||||
|
<Span style={{ fontWeight: 'bold' }}>Tipe Pembayaran</Span>
|
||||||
|
<Text>
|
||||||
|
{currentAppointment?.payment_detail?.payment_type
|
||||||
|
? currentAppointment?.payment_detail?.payment_type
|
||||||
|
: '-'}
|
||||||
|
</Text>
|
||||||
|
<Span style={{ fontWeight: 'bold' }}>Waktu Transaksi</Span>
|
||||||
|
<Text>
|
||||||
|
{currentAppointment?.payment_detail?.transaction_time
|
||||||
|
? currentAppointment?.payment_detail?.transaction_time
|
||||||
|
: '-'}
|
||||||
|
</Text>
|
||||||
|
<Span style={{ fontWeight: 'bold' }}>Status</Span>
|
||||||
|
<Text>
|
||||||
|
{currentAppointment?.payment_detail?.status_message
|
||||||
|
? currentAppointment?.payment_detail?.status_message
|
||||||
|
: '-'}
|
||||||
|
</Text>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
) : (
|
||||||
|
<Span>Belum ada pembayaran</Span>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
</Box>
|
||||||
|
</Stack>
|
||||||
|
</FormProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user