678 lines
24 KiB
TypeScript
678 lines
24 KiB
TypeScript
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 {useFieldArray, 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,
|
|
Autocomplete,
|
|
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 RHFTextFieldMoney from "@/components/hook-form/v2/RHFTextFieldMoney";
|
|
|
|
import { Label, Rowing, Spa } from '@mui/icons-material';
|
|
import { border, padding } from '@mui/system';
|
|
import { IconButton } from '@mui/material';
|
|
import AddIcon from '@mui/icons-material/Add';
|
|
import RemoveIcon from '@mui/icons-material/Remove';
|
|
|
|
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;
|
|
id: number;
|
|
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, id, 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 || [],
|
|
diagnosis: currentAppointment?.diagnosis || '',
|
|
hospital: currentAppointment?.hospital || null,
|
|
medicine : currentAppointment?.medicine || [
|
|
{
|
|
drug_id: 0,
|
|
qty: 0,
|
|
signa: '',
|
|
unit_id: 0,
|
|
note: '', // input to database
|
|
}
|
|
],
|
|
}),
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
[currentAppointment]
|
|
);
|
|
|
|
console.log()
|
|
|
|
const methods = useForm<FormValuesProps>({
|
|
// resolver: yupResolver(NewCorporateSchema),
|
|
defaultValues,
|
|
});
|
|
|
|
const {fields, append, remove} = useFieldArray({name: 'medicine',control: methods.control})
|
|
|
|
// Autocomplite ICD
|
|
const [icdOptions, setIcdOptions] = useState([]);
|
|
useEffect(() => {
|
|
// Ambil data dari API dan atur opsi ICD
|
|
axios.get('diagnosis')
|
|
.then((response) => {
|
|
setIcdOptions(response.data.data);
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error fetching ICD options:', error);
|
|
});
|
|
}, []); // useEffect dijalankan hanya sekali saat komponen dimount
|
|
|
|
// Menggunakan selectedIcdOptions sebagai state untuk nilai default
|
|
const [selectedIcdOptions, setSelectedIcdOptions] = useState([]);
|
|
const codes = defaultValues.diagnosis.split(',');
|
|
useEffect(() => {
|
|
// Pastikan bahwa icdOptions sudah terisi sebelum memfilter
|
|
if (icdOptions.length > 0) {
|
|
const selectedCodes = icdOptions.filter((icd) => {
|
|
return codes.includes(icd.value);
|
|
});
|
|
setSelectedIcdOptions(selectedCodes);
|
|
// setValue('diagnosis', selectedCodes); // Ini bisa Anda hilangkan jika tidak diperlukan
|
|
}
|
|
}, [icdOptions, defaultValues.diagnosis]);
|
|
|
|
|
|
// Autocomplite Rumah Sakit
|
|
const [hospitalOptions, setHospitalOptions] = useState([]);
|
|
const [selectedHospitalOption, setSelectedHospitalOption] = useState(null);
|
|
|
|
// Ambil data dari API dan atur opsi rumah sakit
|
|
useEffect(() => {
|
|
axios.get('hospitals')
|
|
.then((response) => {
|
|
setHospitalOptions(response.data.data);
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error fetching hospital options:', error);
|
|
});
|
|
}, []); // useEffect dijalankan hanya sekali saat komponen dimount
|
|
|
|
// Set default value saat hospitalOptions berubah
|
|
useEffect(() => {
|
|
const selectedId = hospitalOptions.find((hospital) => {
|
|
|
|
return hospital.value == defaultValues.hospital
|
|
});
|
|
setSelectedHospitalOption(selectedId);
|
|
setValue('hospital', defaultValues.hospital)
|
|
|
|
}, [hospitalOptions, defaultValues]);
|
|
|
|
// Autocomplite drugs
|
|
const [drugOptions, setDrugsOptions] = useState([]);
|
|
const [selectedDrugsOptions, setSelectedDrugsOptions] = useState({});
|
|
|
|
const handleAutocompleteChange = (newValue, index) => {
|
|
setSelectedDrugsOptions((prevState) => ({
|
|
...prevState,
|
|
[index]: newValue
|
|
}));
|
|
setValue(`medicine.${index}.drug_id`, newValue ? newValue.value : '');
|
|
};
|
|
|
|
// Ambil data dari API dan atur opsi rumah sakit
|
|
useEffect(() => {
|
|
axios.get('drugs')
|
|
.then((response) => {
|
|
setDrugsOptions(response.data.data);
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error fetching drug options:', error);
|
|
});
|
|
}, []); // useEffect dijalankan hanya sekali saat komponen dimount
|
|
|
|
// Autocomplite unit
|
|
const [unitOptions, setUnitsOptions] = useState([]);
|
|
const [selectedUnitsOptions, setSelectedUnitsOptions] = useState({});
|
|
|
|
const handleAutocompleteChangeUnit = (newValue, index) => {
|
|
setSelectedUnitsOptions((prevState) => ({
|
|
...prevState,
|
|
[index]: newValue
|
|
}));
|
|
setValue(`medicine.${index}.unit_id`, newValue ? newValue.value : '');
|
|
};
|
|
|
|
// Ambil data dari API dan atur opsi rumah sakit
|
|
useEffect(() => {
|
|
axios.get('units')
|
|
.then((response) => {
|
|
setUnitsOptions(response.data.data);
|
|
})
|
|
.catch((error) => {
|
|
console.error('Error fetching unit options:', error);
|
|
});
|
|
}, []); // useEffect dijalankan hanya sekali saat komponen dimount
|
|
|
|
useEffect(() => {
|
|
if (defaultValues.medicine.length > 0) {
|
|
defaultValues.medicine.map((med, index) => {
|
|
const selectedDrugId = drugOptions.find((drug) => {
|
|
return drug.value == med.drug_id
|
|
});
|
|
handleAutocompleteChange(selectedDrugId,index)
|
|
|
|
const selectedUnitId = unitOptions.find((unit) => {
|
|
return unit.value == med.unit_id
|
|
});
|
|
handleAutocompleteChangeUnit(selectedUnitId,index)
|
|
|
|
// Contoh: Lakukan tindakan lainnya sesuai kebutuhan Anda
|
|
});
|
|
} else {
|
|
console.log('Medicine is empty');
|
|
}
|
|
}, [defaultValues.medicine]);
|
|
|
|
|
|
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]);
|
|
|
|
const onSubmit = async (data: FormValuesProps) => {
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('id', data.id);
|
|
formData.append('diagnosis', data.diagnosis);
|
|
formData.append('hospital', data.hospital);
|
|
|
|
// Iterasi melalui setiap objek dalam array medicine dan menambahkannya ke FormData
|
|
data.medicine.forEach((medicineObj, index) => {
|
|
// Anda dapat menambahkan setiap properti dari objek medicine ke FormData
|
|
formData.append(`medicine[${index}][drug_id]`, medicineObj.drug_id);
|
|
formData.append(`medicine[${index}][qty]`, medicineObj.qty);
|
|
formData.append(`medicine[${index}][unit_id]`, medicineObj.unit_id);
|
|
formData.append(`medicine[${index}][signa]`, medicineObj.signa);
|
|
formData.append(`medicine[${index}][note]`, medicineObj.note);
|
|
});
|
|
|
|
|
|
const response = await axios.post('/prescription', formData);
|
|
reset();
|
|
enqueueSnackbar('Berhasil menambahkan resep', {
|
|
variant: 'success',
|
|
});
|
|
navigate('/e-prescription/live-chat');
|
|
} catch (error: any) {
|
|
console.log(error, 'submit')
|
|
enqueueSnackbar(error.message ?? 'Failed Processing Request', { variant: 'error' });
|
|
}
|
|
|
|
const ascent = document?.querySelector('ascent');
|
|
if (ascent != null) {
|
|
ascent.innerHTML = '';
|
|
}
|
|
};
|
|
|
|
const handleDownloadEPrescription = (id: number) => {
|
|
axios
|
|
.get(`prescription-download/${id}`, {
|
|
responseType: 'blob',
|
|
})
|
|
.then((response) => {
|
|
window.open(URL.createObjectURL(response.data));
|
|
})
|
|
.catch((response) => {
|
|
enqueueSnackbar(response.message, { variant: 'error' });
|
|
});
|
|
}
|
|
|
|
return (
|
|
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
|
|
<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 Live Chat</Title>
|
|
</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} alignItems="center">
|
|
<Span style={{ fontWeight: 'bold', paddingBottom: '0px' }}>
|
|
Status Appointment :
|
|
</Span>
|
|
<Chip
|
|
label={
|
|
currentAppointment?.status_appointment
|
|
? currentAppointment?.status_appointment
|
|
: '-'
|
|
}
|
|
variant="outlined"
|
|
/>
|
|
</Stack>
|
|
</Grid>
|
|
<Grid item xs={6}>
|
|
<Stack direction="row" spacing={2} alignItems="center">
|
|
<Span style={{ fontWeight: 'bold', paddingBottom: '0px' }}>
|
|
Status Chat :
|
|
</Span>
|
|
<Chip
|
|
label={
|
|
currentAppointment?.status_chat ? currentAppointment?.status_chat : '-'
|
|
}
|
|
variant="outlined"
|
|
/>
|
|
</Stack>
|
|
</Grid>
|
|
</Stack>
|
|
</Grid>
|
|
<Grid item xs={12} sx={{ marginTop: '20px' }}>
|
|
<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>
|
|
<Span style={{ fontWeight: 'bold' }}>Durasi</Span>
|
|
<Text>{currentAppointment?.duration ? currentAppointment?.duration : '-'}</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>
|
|
|
|
<Card sx={{ mt: 5, p: 5 }}>
|
|
<HeaderStyle>
|
|
<Grid item xs={12} md={12}>
|
|
<Title>E-Prescription</Title>
|
|
</Grid>
|
|
</HeaderStyle>
|
|
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
|
|
|
<Grid item xs={12} columnSpacing={{ xs: 1, sm: 2, md: 3 }} sx={{marginBottom: 4}}>
|
|
<Span style={{ fontWeight: 'bold' }}>Diagnosa</Span>
|
|
<Autocomplete
|
|
multiple
|
|
options={icdOptions}
|
|
getOptionLabel={(option) => option.label}
|
|
fullWidth
|
|
value={selectedIcdOptions}
|
|
onChange={(e, newValues) => {
|
|
const selectedCodes = newValues.map((value) => value.value);
|
|
setValue('diagnosis', selectedCodes);
|
|
setSelectedIcdOptions(newValues);
|
|
}}
|
|
renderInput={(params) => (
|
|
<TextField
|
|
{...params}
|
|
label="Diagnosis ICD - X"
|
|
variant="outlined"
|
|
// required
|
|
/>
|
|
)}
|
|
/>
|
|
</Grid>
|
|
|
|
{/* <Grid item xs={12} columnSpacing={{ xs: 1, sm: 2, md: 3 }} sx={{marginBottom: 4}}>
|
|
<Span style={{ fontWeight: 'bold' }}>Rumah Sakit</Span>
|
|
<Autocomplete
|
|
options={hospitalOptions}
|
|
getOptionLabel={(option) => option.label}
|
|
fullWidth
|
|
value={selectedHospitalOption}
|
|
onChange={(e, newValue) => {
|
|
setSelectedHospitalOption(newValue);
|
|
setValue('hospital', newValue ? newValue.value : ''); // Simpan nilai rumah sakit
|
|
}}
|
|
renderInput={(params) => (
|
|
<TextField
|
|
{...params}
|
|
label="Rumah Sakit"
|
|
variant="outlined"
|
|
// required
|
|
/>
|
|
)}
|
|
/>
|
|
|
|
</Grid> */}
|
|
|
|
<Grid item xs={12} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
|
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
|
|
<Typography variant='subtitle1' gutterBottom>Obat</Typography>
|
|
</Stack>
|
|
</Grid>
|
|
|
|
<Grid item xs={12}>
|
|
{fields.map((field, index) => (
|
|
<Grid container spacing={2} key={index} sx={{ marginBottom: '15px' }}>
|
|
<Grid item xs={3}>
|
|
<Autocomplete
|
|
options={drugOptions}
|
|
getOptionLabel={(option) => option.label}
|
|
fullWidth
|
|
value={selectedDrugsOptions[index] || null}
|
|
onChange={(e, newValue) => handleAutocompleteChange(newValue, index)}
|
|
renderInput={(params) => (
|
|
<TextField
|
|
{...params}
|
|
label="Drugs"
|
|
variant="outlined"
|
|
required
|
|
/>
|
|
)}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={1}>
|
|
<RHFTextField
|
|
id={`qty_${index}`}
|
|
name={`medicine.${index}.qty`}
|
|
label="Qty"
|
|
required
|
|
type="number"
|
|
placeholder="Qty"
|
|
fullWidth
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={2}>
|
|
<Autocomplete
|
|
options={unitOptions}
|
|
getOptionLabel={(option) => option.label}
|
|
fullWidth
|
|
value={selectedUnitsOptions[index] || null}
|
|
onChange={(e, newValue) => handleAutocompleteChangeUnit(newValue, index)}
|
|
renderInput={(params) => (
|
|
<TextField
|
|
{...params}
|
|
label="Units"
|
|
variant="outlined"
|
|
required
|
|
/>
|
|
)}
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={2}>
|
|
<RHFTextField
|
|
id={`signa_${index}`}
|
|
name={`medicine.${index}.signa`}
|
|
label="Signa"
|
|
required
|
|
placeholder="Signa"
|
|
fullWidth
|
|
/>
|
|
</Grid>
|
|
<Grid item xs={3}>
|
|
<RHFTextField
|
|
id={`note_${index}`}
|
|
name={`medicine.${index}.note`}
|
|
label="Note"
|
|
required
|
|
placeholder="Note"
|
|
fullWidth
|
|
/>
|
|
</Grid>
|
|
{
|
|
index === 0 ? (
|
|
<Grid item xs={1} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
<IconButton size='large' color='primary' onClick={() => append({medicine_name: '', medicine_price: 0, request_log_id: 1 })}>
|
|
<AddIcon />
|
|
</IconButton>
|
|
</Grid>
|
|
) : (
|
|
index == (fields.length-1) ? (
|
|
<Grid item xs={1} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
<IconButton size='large' color='error' onClick={() => remove(index)}>
|
|
<RemoveIcon />
|
|
</IconButton>
|
|
</Grid>
|
|
) : (
|
|
<Grid item xs={1} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
|
<IconButton size='large' color='primary' onClick={() => append({medicine_name: '', medicine_price: 0, request_log_id: 1 })}>
|
|
<AddIcon />
|
|
</IconButton>
|
|
</Grid>
|
|
)
|
|
)
|
|
}
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
<Grid item xs={12} md={12} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
|
|
<Button
|
|
sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)', marginRight: '10px' }}
|
|
onClick={() => handleDownloadEPrescription(id)}
|
|
variant="contained"
|
|
size="large"
|
|
>
|
|
Download
|
|
</Button>
|
|
<LoadingButton
|
|
sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)' }}
|
|
type="submit"
|
|
variant="contained"
|
|
size="large"
|
|
loading={isSubmitting}
|
|
>
|
|
{!isEdit ? 'Save' : 'Update'}
|
|
</LoadingButton>
|
|
</Grid>
|
|
|
|
</Grid>
|
|
</Card>
|
|
</Box>
|
|
</Stack>
|
|
</FormProvider>
|
|
);
|
|
}
|