CRUD Doctor Hospital
This commit is contained in:
pajri
7
frontend/dashboard/.env.development
Executable file
7
frontend/dashboard/.env.development
Executable file
@@ -0,0 +1,7 @@
|
||||
GENERATE_SOURCEMAP=false
|
||||
|
||||
PORT=8083
|
||||
|
||||
REACT_APP_HOST_API_URL="http://localhost:8000"
|
||||
|
||||
VITE_API_URL="http://localhost:8000/api/internal"
|
||||
@@ -9,7 +9,6 @@ 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();
|
||||
@@ -31,7 +30,6 @@ export default function Create() {
|
||||
<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={[
|
||||
@@ -54,40 +52,3 @@ export default function Create() {
|
||||
</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>
|
||||
// );
|
||||
// }
|
||||
|
||||
@@ -8,7 +8,7 @@ import Select, { SelectChangeEvent } from '@mui/material/Select';
|
||||
import * as React from 'react';
|
||||
|
||||
// form
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { yupResolver } from '@hookform/resolvers/yup';
|
||||
// @mui
|
||||
import { styled } from '@mui/material/styles';
|
||||
@@ -25,6 +25,7 @@ import {
|
||||
Typography,
|
||||
TextField,
|
||||
Chip,
|
||||
Autocomplete,
|
||||
} from '@mui/material';
|
||||
|
||||
import CancelIcon from '@mui/icons-material/Cancel';
|
||||
@@ -41,17 +42,20 @@ import {
|
||||
RHFMultiCheckbox,
|
||||
RHFCheckbox,
|
||||
RHFCustomMultiCheckbox,
|
||||
RHFSelect,
|
||||
} from '../../../components/hook-form';
|
||||
import axios from '../../../utils/axios';
|
||||
import { fCurrency } from '../../../utils/formatNumber';
|
||||
import { Practitioner } from '../../../@types/doctor';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
|
||||
import { Label, Rowing } from '@mui/icons-material';
|
||||
import { email } from '../../../_mock/email';
|
||||
|
||||
const LabelStyle = styled(Typography)(({ theme }) => ({
|
||||
...theme.typography.subtitle2,
|
||||
color: theme.palette.text.secondary,
|
||||
marginBottom: theme.spacing(1),
|
||||
...theme.typography.h6,
|
||||
marginBottom: theme.spacing(2),
|
||||
marginTop: theme.spacing(2),
|
||||
}));
|
||||
|
||||
const HeaderStyle = styled('header')(({ theme }) => ({
|
||||
@@ -66,7 +70,6 @@ const Title = styled(Typography)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
// paddingBottom: theme.spacing(3),
|
||||
fontWeight: 700,
|
||||
color: '#005B7F',
|
||||
}));
|
||||
|
||||
interface FormValuesProps extends Partial<Practitioner> {
|
||||
@@ -106,6 +109,8 @@ export default function PractitionerForm({ isEdit, currentPractitioner }: Props)
|
||||
() => ({
|
||||
id: currentPractitioner?.id,
|
||||
name: currentPractitioner?.name || '',
|
||||
email: currentPractitioner?.email || '',
|
||||
phone: currentPractitioner?.phone || '',
|
||||
address: currentPractitioner?.address || '',
|
||||
birth_date: currentPractitioner?.birth_date || '',
|
||||
gender: currentPractitioner?.gender || '',
|
||||
@@ -121,6 +126,8 @@ export default function PractitionerForm({ isEdit, currentPractitioner }: Props)
|
||||
[currentPractitioner]
|
||||
);
|
||||
|
||||
console.log('currentPractitioner', currentPractitioner);
|
||||
|
||||
console.log('defaultValues', defaultValues);
|
||||
|
||||
function StatusLabel({ value }: { value: boolean }) {
|
||||
@@ -168,91 +175,391 @@ export default function PractitionerForm({ isEdit, currentPractitioner }: Props)
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isEdit, currentPractitioner]);
|
||||
|
||||
const handleActivate = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setValue('active', event.target.checked);
|
||||
const onSubmit = async (data: FormValuesProps) => {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
formData.append('name', data.name);
|
||||
formData.append('gender', data.gender);
|
||||
formData.append('address', data.address);
|
||||
formData.append('birth_place', data.birth_place);
|
||||
formData.append('birth_date', data.birth_date);
|
||||
formData.append('email', data.email);
|
||||
formData.append('phone', data.phone);
|
||||
// formData.append('active', data.active ? '1' : '0');
|
||||
forms.forEach((form, index) => {
|
||||
formData.append(`practices[${index}][organization_id]`, form.organizationId);
|
||||
form.specialities.forEach((speciality, i) => {
|
||||
formData.append(`practices[${index}][specialities][${i}][speciality_id]`, speciality);
|
||||
});
|
||||
});
|
||||
|
||||
console.log('event.target.checked', event.target.checked);
|
||||
if (!isEdit) {
|
||||
console.log('formData', formData);
|
||||
const response = await axios.post('/doctors', formData);
|
||||
} else {
|
||||
formData.append('_method', 'PUT');
|
||||
const response = await axios.post('/doctors/' + currentPractitioner?.id ?? '', formData);
|
||||
}
|
||||
reset();
|
||||
enqueueSnackbar(!isEdit ? 'Doctors Created Successfully!' : 'Doctors Udpated Successfully!', {
|
||||
variant: 'success',
|
||||
});
|
||||
navigate('/master/doctors');
|
||||
} catch (error: any) {
|
||||
if (error && error.response.status === 422) {
|
||||
console.log('error', error.response.data.errors);
|
||||
for (const [key, value] of Object.entries(error.response.data.errors)) {
|
||||
setError(key, { message: value[0] });
|
||||
enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
|
||||
}
|
||||
} else {
|
||||
enqueueSnackbar(error.message ?? 'Failed Processing Request', { variant: 'error' });
|
||||
}
|
||||
}
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('active', event.target.checked ? '1' : '0');
|
||||
formData.append('_method', 'PUT');
|
||||
axios.post('/doctors/' + currentPractitioner?.id ?? '', formData);
|
||||
const ascent = document?.querySelector('ascent');
|
||||
if (ascent != null) {
|
||||
ascent.innerHTML = '';
|
||||
}
|
||||
};
|
||||
|
||||
enqueueSnackbar('active Updated Successfully!', { variant: 'success' });
|
||||
const [organizations, setOrganizations] = useState<any>([]);
|
||||
const [specialities, setSpecialities] = useState<any>([]);
|
||||
|
||||
useEffect(() => {
|
||||
axios.get(`/search-organizations`).then((response) => {
|
||||
setOrganizations(
|
||||
response.data.map((item: any) => ({ ...item, name: item.name, value: item.id }))
|
||||
);
|
||||
});
|
||||
|
||||
axios.get(`/search-specialities`).then((response) => {
|
||||
setSpecialities(
|
||||
response.data.map((item: any) => ({ ...item, name: item.name, value: item.id }))
|
||||
);
|
||||
});
|
||||
}, []);
|
||||
|
||||
// const specialities = [
|
||||
// { name: 'Dentistry', id: 1 },
|
||||
// { name: 'Dermatology', id: 2 },
|
||||
// { name: 'General Medicine', id: 3 },
|
||||
// { name: 'Pediatrics', id: 4 },
|
||||
// { name: 'Surgery', id: 5 },
|
||||
// ];
|
||||
|
||||
const practices = currentPractitioner?.practices || [];
|
||||
// const practices = [
|
||||
// {
|
||||
// organization_id: 187,
|
||||
// specialities: [
|
||||
// {
|
||||
// speciality_id: 7,
|
||||
// },
|
||||
// {
|
||||
// speciality_id: 6,
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// organization_id: 181,
|
||||
// specialities: [
|
||||
// {
|
||||
// speciality_id: 2,
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ];
|
||||
|
||||
const [forms, setForms] = useState<any>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (practices.length > 0) {
|
||||
const newForms = practices.map((practice: any) => {
|
||||
return {
|
||||
organizationId: practice.organization_id,
|
||||
specialities: practice.specialities.map((s) => s.speciality_id),
|
||||
};
|
||||
});
|
||||
setForms(newForms);
|
||||
} else {
|
||||
setForms([
|
||||
{
|
||||
organizationId: '',
|
||||
specialities: [],
|
||||
},
|
||||
]);
|
||||
}
|
||||
}, [practices && practices.length]);
|
||||
// }, []);
|
||||
|
||||
console.log('forms', forms);
|
||||
|
||||
const findValueOrganization = (organizationId) => {
|
||||
if (organizationId === '' || organizationId === null) {
|
||||
return { name: '', value: '' };
|
||||
} else {
|
||||
const organization = organizations.find((o) => o.id === organizationId);
|
||||
return { name: organization?.name, value: organizationId };
|
||||
}
|
||||
};
|
||||
|
||||
// console.log('findValueOrganization', findValueOrganization(187));
|
||||
|
||||
// const findValueSpeciality = (specialityIds: number[]) => {
|
||||
// if (specialityIds.length === 0) {
|
||||
// return [];
|
||||
// } else {
|
||||
// const data = specialities.filter((s) => specialityIds.includes(s.id));
|
||||
// return data.map((d) => ({ name: d.name, value: d.id }));
|
||||
// }
|
||||
// };
|
||||
|
||||
const findValueSpeciality = (values: any) => {
|
||||
return specialities.filter((s) => values.includes(s.value));
|
||||
};
|
||||
|
||||
// const [forms, setForms] = useState([
|
||||
// {
|
||||
// organizationId: '',
|
||||
// specialities: [],
|
||||
// },
|
||||
// ]);
|
||||
|
||||
const addForm = () => {
|
||||
setForms([
|
||||
...forms,
|
||||
{
|
||||
organizationId: '',
|
||||
specialities: [],
|
||||
},
|
||||
]);
|
||||
};
|
||||
console.log('forms', forms);
|
||||
|
||||
const gender = [
|
||||
{
|
||||
value: 'male',
|
||||
label: 'Laki-Laki',
|
||||
},
|
||||
{
|
||||
value: 'female',
|
||||
label: 'Perempuan',
|
||||
},
|
||||
];
|
||||
|
||||
console.log('forms', forms);
|
||||
// const handleSpecialitiesChange = (index: number, value: any) => {
|
||||
// const newForms = [...forms];
|
||||
// newForms[index].specialities = value.map((v: any) => ({ speciality_id: v.id }));
|
||||
// setForms(newForms);
|
||||
// };
|
||||
// const handleSpecialitiesChange = (index: number, value: any) => {
|
||||
// const updatedForms = [...forms];
|
||||
// updatedForms[index].specialities = value.map((v: any) => v.speciality_id);
|
||||
// setForms(updatedForms);
|
||||
// };
|
||||
|
||||
const handleOrganizationIdChange = (index, value) => {
|
||||
const updatedForms = [...forms];
|
||||
updatedForms[index].organizationId = value.id;
|
||||
setForms(updatedForms);
|
||||
};
|
||||
|
||||
const handleSpecialitiesChange = (index: number, value: any) => {
|
||||
setForms((forms) => {
|
||||
forms[index].specialities = value.map((v: any) => v.value);
|
||||
return [...forms];
|
||||
});
|
||||
};
|
||||
|
||||
// const availableOrganizations = organizations.filter(
|
||||
// (org) =>
|
||||
// !forms.some((f) => f.organization && f.organization.id === org.id) ||
|
||||
// forms.findIndex((f) => f.organization && f.organization.id === org.id) === editIndex
|
||||
// );
|
||||
const availableOrganizations =
|
||||
practices.length > 0
|
||||
? organizations.filter(
|
||||
(org) => !practices.some((practice) => practice.organization_id === org.id)
|
||||
)
|
||||
: organizations.filter((org) => !forms.some((f) => f.organizationId === org.id));
|
||||
|
||||
// const availableOrganizations = organizations.filter(
|
||||
// (org) => !practices.some((p) => p.organization_id === org.id)
|
||||
// );
|
||||
|
||||
const handleDeleteForm = (index) => {
|
||||
const updatedForms = [...forms];
|
||||
updatedForms.splice(index, 1);
|
||||
setForms(updatedForms);
|
||||
};
|
||||
|
||||
return (
|
||||
<FormProvider methods={methods}>
|
||||
<FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
|
||||
<Stack spacing={3}>
|
||||
<Box sx={{ width: '100%' }}>
|
||||
{/* <Stack spacing={3}> */}
|
||||
<Card sx={{ p: 5 }}>
|
||||
<HeaderStyle>
|
||||
{/* <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} />
|
||||
<RHFSwitch name="active" label="" />
|
||||
<StatusLabel value={values.active} />
|
||||
</Grid>
|
||||
</HeaderStyle>
|
||||
</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 container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }} sx={{ mt: 2 }}>
|
||||
<Grid item xs={12}>
|
||||
<LabelStyle>Nama Dokter</LabelStyle>
|
||||
<RHFTextField name="name" placeholder="Tuliskan Nama Dokter" />
|
||||
</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 item xs={6}>
|
||||
<LabelStyle>Jenis Kelamin</LabelStyle>
|
||||
<RHFSelect name="gender" label="Pilih Jenis Kelamin">
|
||||
<option value="" />
|
||||
{gender.map((option, index) => (
|
||||
<option key={index} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</RHFSelect>
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<LabelStyle>Alamat</LabelStyle>
|
||||
<RHFTextField name="address" placeholder="Tuliskan Alamat" />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={6}>
|
||||
<LabelStyle>Tempat Lahir</LabelStyle>
|
||||
<RHFTextField name="birth_place" placeholder="Tuliskan Tempat Lahir" />
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<LabelStyle>Tanggal Lahir</LabelStyle>
|
||||
<RHFDatepicker name="birth_date" placeholder="Silahkan Pilih Tanggal Lahir" />
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<LabelStyle>Email</LabelStyle>
|
||||
<RHFTextField name="email" placeholder="Tuliskan Email" type="email" />
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
<LabelStyle>No. Telp</LabelStyle>
|
||||
<RHFTextField name="phone" placeholder="Tuliskan Nomor Telepon" />
|
||||
</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>
|
||||
<Stack spacing={3} direction="row" justifyContent="space-between">
|
||||
<Title variant="h5">Tempat Praktik</Title>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="primary"
|
||||
size="small"
|
||||
sx={{ boxShadow: 'none' }}
|
||||
onClick={addForm}
|
||||
startIcon={<AddIcon />}
|
||||
>
|
||||
Tambah Tempat Praktik
|
||||
</Button>
|
||||
</Stack>
|
||||
|
||||
{forms.map((form, index) => (
|
||||
<div key={index}>
|
||||
<Box sx={{ mt: 3 }}>
|
||||
<Stack spacing={3} direction="row" justifyContent="space-between">
|
||||
<LabelStyle></LabelStyle>
|
||||
{index !== 0 && (
|
||||
<Button
|
||||
sx={{ color: 'red', m: 1 }}
|
||||
aria-label="close"
|
||||
onClick={() => handleDeleteForm(index)}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
// <Button onClick={() => handleDeleteForm(index)}>Delete</Button>
|
||||
)}
|
||||
</Stack>
|
||||
{/* <h1>{form.organizationId}</h1> */}
|
||||
<Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Grid item xs={6}>
|
||||
<Autocomplete
|
||||
options={availableOrganizations}
|
||||
value={findValueOrganization(form.organizationId) ?? ''}
|
||||
getOptionLabel={(option) => option.name}
|
||||
isOptionEqualToValue={(option, value) => option.value === value.value}
|
||||
onChange={(event, value) => handleOrganizationIdChange(index, value)}
|
||||
renderInput={(params) => (
|
||||
<TextField {...params} label="Rumah Sakit" variant="outlined" />
|
||||
)}
|
||||
/>
|
||||
{/* <Autocomplete
|
||||
options={organizations}
|
||||
value={findValueOrganization(form.organizationId)}
|
||||
getOptionLabel={(option) =>
|
||||
option.name ?? findValueOrganization(form.organizationId).name ?? ''
|
||||
}
|
||||
onChange={(event, value) => handleOrganizationIdChange(index, value)}
|
||||
renderInput={(params) => (
|
||||
<TextField {...params} label="Rumah Sakit" variant="outlined" />
|
||||
)}
|
||||
/> */}
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
{form.specialities && (
|
||||
// <Autocomplete
|
||||
// multiple
|
||||
// // options={specialities}
|
||||
// options={specialities}
|
||||
// value={findValueSpeciality(form.specialities) ?? ''}
|
||||
// getOptionLabel={(option) => option.name}
|
||||
// isOptionEqualToValue={(option, value) => option.value === value.value}
|
||||
// onChange={(event, value) => handleSpecialitiesChange(index, value)}
|
||||
// renderInput={(params) => (
|
||||
// <TextField {...params} label="Spesialis" variant="outlined" />
|
||||
// )}
|
||||
// />
|
||||
|
||||
<Autocomplete
|
||||
multiple
|
||||
options={specialities}
|
||||
value={findValueSpeciality(form.specialities)}
|
||||
getOptionLabel={(option) => option.name}
|
||||
onChange={(event, value) => handleSpecialitiesChange(index, value)}
|
||||
renderInput={(params) => (
|
||||
<TextField {...params} label="Spesialis" variant="outlined" />
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</Grid>
|
||||
</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>
|
||||
</Box>
|
||||
</div>
|
||||
))}
|
||||
</Card>
|
||||
<Box sx={{ width: '100%', mt: 5 }}>
|
||||
<Stack
|
||||
alignItems="center"
|
||||
justifyContent="end"
|
||||
direction={{ xs: 'column', md: 'row' }}
|
||||
sx={{ width: 1, textAlign: { xs: 'center', md: 'left' } }}
|
||||
>
|
||||
<Grid item xs={12} md={4}>
|
||||
<LoadingButton
|
||||
sx={{ boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)' }}
|
||||
type="submit"
|
||||
variant="contained"
|
||||
size="large"
|
||||
// fullWidth={true}
|
||||
loading={isSubmitting}
|
||||
>
|
||||
{!isEdit ? 'Simpan' : 'Simpan Perubahan'}
|
||||
</LoadingButton>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</FormProvider>
|
||||
|
||||
@@ -57,6 +57,7 @@ import { Search } from '@mui/icons-material';
|
||||
import { Icon } from '@iconify/react';
|
||||
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
||||
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
|
||||
import AddIcon from '@mui/icons-material/Add';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
@@ -205,9 +206,16 @@ export default function List() {
|
||||
spacing={2}
|
||||
sx={{ p: 2, justifyContent: 'space-between', alignItems: 'center' }}
|
||||
>
|
||||
<Grid item xs={12} md={12} lg={12}>
|
||||
<Grid item xs={12} md={10} lg={10}>
|
||||
<Filter onSearch={applyItems} />
|
||||
</Grid>
|
||||
<Grid item xs={12} md={2} lg={2} sx={{ textAlign: 'right' }}>
|
||||
<Link to="/master/doctors/create" style={{ textDecoration: 'none' }}>
|
||||
<Button variant="outlined" startIcon={<AddIcon />} sx={{ p: 1.8 }}>
|
||||
Create
|
||||
</Button>
|
||||
</Link>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
@@ -297,15 +305,22 @@ export default function List() {
|
||||
<CheckStatus row={row} />
|
||||
</TableCell> */}
|
||||
|
||||
{/* <TableCell align="center">
|
||||
<TableCell align="center">
|
||||
<ButtonGroup variant="text" aria-label="text button group">
|
||||
<Link to={'/master/doctors/' + row.id}>
|
||||
<Link to={'/master/doctors/' + row.id + '/edit'}>
|
||||
<Button>
|
||||
<Icon icon="ph:eye-bold" style={{ width: '24px', height: '24px' }} />
|
||||
<Icon icon="ph:pencil-simple-fill" style={{ width: '24px', height: '24px' }} />
|
||||
</Button>
|
||||
</Link>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setOpenDialog(true);
|
||||
}}
|
||||
>
|
||||
<Icon icon="eva:trash-2-outline" style={{ width: '24px', height: '24px' }} />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</TableCell> */}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
{/* COLLAPSIBLE ROW */}
|
||||
<TableRow>
|
||||
@@ -336,7 +351,12 @@ export default function List() {
|
||||
Jenis Kelamin
|
||||
</Grid>
|
||||
<Grid item xs={6}>
|
||||
: {row.gender ? row.gender : '-'}
|
||||
:{' '}
|
||||
{row.gender == 'male'
|
||||
? 'Laki-Laki'
|
||||
: row.gender == 'female'
|
||||
? 'Perempuan'
|
||||
: '-'}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
@@ -9,7 +9,6 @@ import Form from './Form';
|
||||
import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
|
||||
import axios from '../../../utils/axios';
|
||||
import { Organizations } from '../../../@types/organization';
|
||||
import ButtonBack from '../../../components/ButtonBack';
|
||||
|
||||
export default function Create() {
|
||||
const { themeStretch } = useSettings();
|
||||
@@ -31,25 +30,20 @@ export default function Create() {
|
||||
<Page title="Membership: Create a new Rumah Sakit">
|
||||
<Container maxWidth={themeStretch ? false : 'xl'}>
|
||||
<Stack direction="row" alignItems="center">
|
||||
<ButtonBack />
|
||||
<HeaderBreadcrumbs
|
||||
heading={!isEdit ? 'Create a new Rumah Sakit' : 'Edit Rumah Sakit'}
|
||||
links={[
|
||||
{ name: 'Master', href: '/master' },
|
||||
{
|
||||
name: 'Organizations',
|
||||
href: '/master/organizations',
|
||||
href: '/master/hospitals',
|
||||
},
|
||||
{ name: !isEdit ? 'Create' : currentOrganizations?.name ?? '' },
|
||||
]}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Form
|
||||
// isSubmitting={isSubmitting}
|
||||
isEdit={isEdit}
|
||||
currentOrganizations={currentOrganizations}
|
||||
/>
|
||||
<Form isEdit={isEdit} currentOrganizations={currentOrganizations} />
|
||||
</Container>
|
||||
</Page>
|
||||
);
|
||||
|
||||
@@ -65,7 +65,6 @@ const LabelStyle = styled(Typography)(({ theme }) => ({
|
||||
}));
|
||||
|
||||
const HeaderStyle = styled('header')(({ theme }) => ({
|
||||
padding: theme.spacing(5),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
@@ -76,7 +75,6 @@ const Title = styled(Typography)(({ theme }) => ({
|
||||
boxShadow: 'none',
|
||||
// paddingBottom: theme.spacing(3),
|
||||
fontWeight: 700,
|
||||
color: '#005B7F',
|
||||
}));
|
||||
|
||||
// const [timezone, setTimezone] = React.useState('');
|
||||
@@ -110,10 +108,6 @@ export default function OrganizationsForm({ isEdit, currentOrganizations }: Prop
|
||||
const NewCorporateSchema = Yup.object().shape({
|
||||
name: Yup.string().required('Name is required'),
|
||||
code: Yup.string().required('Corporate Code is required'),
|
||||
active: Yup.boolean().required('Corporate Status is required'),
|
||||
lat: Yup.string().required('Latitude is required'),
|
||||
lng: Yup.string().required('Longitude is required'),
|
||||
timezone: Yup.string().required('Timezone is required'),
|
||||
// file: Yup.boolean().required('Corporate Status is required'),
|
||||
});
|
||||
|
||||
@@ -133,12 +127,6 @@ export default function OrganizationsForm({ isEdit, currentOrganizations }: Prop
|
||||
village_id: currentOrganizations?.village_id || '',
|
||||
postal_code: currentOrganizations?.postal_code || '',
|
||||
description: currentOrganizations?.description || '',
|
||||
technology: currentOrganizations?.technology || '',
|
||||
support_services: currentOrganizations?.support_services || '',
|
||||
merchant_code: currentOrganizations?.merchant_code || '',
|
||||
merchant_key: currentOrganizations?.merchant_key || '',
|
||||
image_url: currentOrganizations?.image_url || '',
|
||||
region_groups: currentOrganizations?.region_groups || '',
|
||||
}),
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[currentOrganizations]
|
||||
@@ -192,25 +180,15 @@ export default function OrganizationsForm({ isEdit, currentOrganizations }: Prop
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [isEdit, currentOrganizations]);
|
||||
|
||||
const currentImage = currentOrganizations?.image_url;
|
||||
console.log('currentImage', currentImage);
|
||||
|
||||
console.log('current_image', currentImage);
|
||||
|
||||
const [file, setFile] = useState(null);
|
||||
console.log('file', file);
|
||||
|
||||
const onSubmit = async (data: FormValuesProps) => {
|
||||
try {
|
||||
const formData = new FormData();
|
||||
console.log('data', data);
|
||||
formData.append('name', data.name);
|
||||
formData.append('code', data.code);
|
||||
formData.append('phone', data.phone);
|
||||
formData.append('lat', data.lat);
|
||||
formData.append('lng', data.lng);
|
||||
formData.append('address', data.address);
|
||||
formData.append('timezone', data.timezone);
|
||||
formData.append('active', data.active ? '1' : '0');
|
||||
if (data.province_id === currentOrganizations?.province_id) {
|
||||
formData.append('province_id', data.province_id);
|
||||
@@ -235,21 +213,12 @@ export default function OrganizationsForm({ isEdit, currentOrganizations }: Prop
|
||||
} else {
|
||||
formData.append('village_id', data.village_id?.value ?? '');
|
||||
}
|
||||
if (data.region_groups === currentOrganizations?.region_groups) {
|
||||
formData.append('region_groups', data.region_groups);
|
||||
} else {
|
||||
formData.append('region_groups', data.region_groups?.value ?? '');
|
||||
}
|
||||
|
||||
formData.append('postal_code', data.postal_code);
|
||||
formData.append('description', data.description);
|
||||
formData.append('technology', data.technology);
|
||||
formData.append('support_services', data.support_services);
|
||||
formData.append('merchant_code', data.merchant_code);
|
||||
formData.append('merchant_key', data.merchant_key);
|
||||
formData.append('image', file);
|
||||
|
||||
if (!isEdit) {
|
||||
console.log('formData', formData);
|
||||
const response = await axios.post('/organizations', formData);
|
||||
} else {
|
||||
formData.append('_method', 'PUT');
|
||||
@@ -263,9 +232,10 @@ export default function OrganizationsForm({ isEdit, currentOrganizations }: Prop
|
||||
!isEdit ? 'Organizations Created Successfully!' : 'Organizations Udpated Successfully!',
|
||||
{ variant: 'success' }
|
||||
);
|
||||
navigate('/master/organizations');
|
||||
navigate('/master/hospitals');
|
||||
} catch (error: any) {
|
||||
if (error && error.response.status === 422) {
|
||||
console.log('error', error.response.data.errors);
|
||||
for (const [key, value] of Object.entries(error.response.data.errors)) {
|
||||
setError(key, { message: value[0] });
|
||||
enqueueSnackbar(value[0] ?? 'Failed Processing Request', { variant: 'error' });
|
||||
@@ -281,34 +251,10 @@ export default function OrganizationsForm({ isEdit, currentOrganizations }: Prop
|
||||
}
|
||||
};
|
||||
|
||||
const [valueTab, setValueTab] = React.useState('1');
|
||||
|
||||
const handleChangeTab = (event: React.SyntheticEvent, newValueTab: string) => {
|
||||
setValueTab(newValueTab);
|
||||
};
|
||||
|
||||
const handleDrop = useCallback(
|
||||
(acceptedFiles) => {
|
||||
setValue(
|
||||
'logo',
|
||||
acceptedFiles.map((file: Blob | MediaSource) =>
|
||||
Object.assign(file, {
|
||||
preview: URL.createObjectURL(file),
|
||||
})
|
||||
)
|
||||
);
|
||||
},
|
||||
[setValue]
|
||||
);
|
||||
|
||||
const handleRemove = (file: File | string) => {
|
||||
setValue('logo', null);
|
||||
};
|
||||
|
||||
const [province, setProvince] = useState<any>([]);
|
||||
const [city, setCity] = useState<any>([]);
|
||||
const [district, setDistrict] = useState<any>([]);
|
||||
// const [village, setVillage] = useState<any>([]);
|
||||
const [village, setVillage] = useState<any>([]);
|
||||
|
||||
useEffect(() => {
|
||||
axios.get('/province').then((res) => {
|
||||
@@ -335,17 +281,15 @@ export default function OrganizationsForm({ isEdit, currentOrganizations }: Prop
|
||||
}
|
||||
};
|
||||
|
||||
// if (values.province_id) {
|
||||
// if (values.city_id) {
|
||||
// loadDistrict();
|
||||
// } else {
|
||||
// loadCity();
|
||||
// }
|
||||
// } else {
|
||||
// axios.get('/province').then((res) => {
|
||||
// setProvince(res.data.data.map((item: any) => ({ value: item.id, label: item.name })));
|
||||
// });
|
||||
// }
|
||||
const loadVillage = async () => {
|
||||
if (values.district_id == currentOrganizations?.district_id) {
|
||||
const res = await axios.get('/village?district_id=' + values.district_id);
|
||||
setVillage(res.data.data.map((item: any) => ({ value: item.id, label: item.name })));
|
||||
} else {
|
||||
const res = await axios.get('/village?district_id=' + values.district_id?.value);
|
||||
setVillage(res.data.data.map((item: any) => ({ value: item.id, label: item.name })));
|
||||
}
|
||||
};
|
||||
|
||||
if (values.province_id) {
|
||||
loadCity();
|
||||
@@ -354,12 +298,11 @@ export default function OrganizationsForm({ isEdit, currentOrganizations }: Prop
|
||||
if (values.city_id) {
|
||||
loadDistrict();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [values.province_id, values.city_id, values.district_id]);
|
||||
|
||||
console.log('province', values.province_id);
|
||||
console.log('city', values.city_id);
|
||||
console.log('district', values.district_id);
|
||||
if (values.district_id) {
|
||||
loadVillage();
|
||||
}
|
||||
}, [values.province_id, values.city_id, values.district_id, values.village_id]);
|
||||
|
||||
const findValueProvince = province.find(
|
||||
(item: any) => item.value === currentOrganizations?.province_id
|
||||
@@ -368,53 +311,8 @@ export default function OrganizationsForm({ isEdit, currentOrganizations }: Prop
|
||||
const findValueDistrict = district.find(
|
||||
(item: any) => item.value === currentOrganizations?.district_id
|
||||
);
|
||||
|
||||
console.log('findValueProvince', findValueProvince);
|
||||
console.log('findValueCity', findValueCity);
|
||||
console.log('findValueDistrict', findValueDistrict);
|
||||
const timezone = [
|
||||
{
|
||||
value: 'WIB',
|
||||
label: 'WIB',
|
||||
},
|
||||
{
|
||||
value: 'WITA',
|
||||
label: 'WITA',
|
||||
},
|
||||
{
|
||||
value: 'WIT',
|
||||
label: 'WIT',
|
||||
},
|
||||
];
|
||||
const region_groups = [
|
||||
{
|
||||
value: 'Jabodetabek',
|
||||
label: 'Jabodetabek',
|
||||
},
|
||||
{
|
||||
value: 'Jawa',
|
||||
label: 'Jawa',
|
||||
},
|
||||
{
|
||||
value: 'Kalimantan',
|
||||
label: 'Kalimantan',
|
||||
},
|
||||
{
|
||||
value: 'Papua',
|
||||
label: 'Papua',
|
||||
},
|
||||
{
|
||||
value: 'Sulawesi',
|
||||
label: 'Sulawesi',
|
||||
},
|
||||
{
|
||||
value: 'Sumatera',
|
||||
label: 'Sumatera',
|
||||
},
|
||||
];
|
||||
|
||||
const findVaalueGroupWilayah = region_groups.find(
|
||||
(item: any) => item.value === currentOrganizations?.region_groups
|
||||
const findValueVillage = village.find(
|
||||
(item: any) => item.value === currentOrganizations?.village_id
|
||||
);
|
||||
|
||||
return (
|
||||
@@ -431,326 +329,147 @@ export default function OrganizationsForm({ isEdit, currentOrganizations }: Prop
|
||||
<StatusLabel value={values.active} />
|
||||
</Grid>
|
||||
</HeaderStyle>
|
||||
<Box sx={{ width: '100%', typography: 'body1' }}>
|
||||
<TabContext value={valueTab}>
|
||||
<Box
|
||||
sx={{
|
||||
borderBottom: 1,
|
||||
borderColor: 'divider',
|
||||
backgroundColor: '#F4F6F8',
|
||||
pl: 5,
|
||||
pr: 5,
|
||||
}}
|
||||
>
|
||||
<TabList onChange={handleChangeTab} aria-label="lab API tabs example">
|
||||
<Tab label="Rumah Sakit" value="1" sx={{ pr: 5, pl: 5 }} />
|
||||
<Tab label="Informasi" value="2" sx={{ pr: 5, pl: 5 }} />
|
||||
<Tab label="Duitku Setting" value="3" sx={{ pr: 5, pl: 5 }} />
|
||||
</TabList>
|
||||
</Box>
|
||||
<TabPanel value="1">
|
||||
<Box sx={{ width: '100%', p: 5 }}>
|
||||
<Grid container rowSpacing={4} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Grid item xs={12}>
|
||||
<LabelStyle>Nama Rumah Sakit</LabelStyle>
|
||||
<RHFTextField name="name" placeholder="Tuliskan Nama Rumah Sakit" />
|
||||
</Grid>
|
||||
<Grid item xs={12} md={12}>
|
||||
<LabelStyle>Pilih Foto Rumah Sakit</LabelStyle>
|
||||
<Box sx={{ width: '100%' }}>
|
||||
<MyDropzone setFile={setFile} currentImage={currentImage} />
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<LabelStyle>Nomor IGD</LabelStyle>
|
||||
<RHFTextField name="phone" placeholder="Tuliskan No IGD" />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<LabelStyle>Code Rumah Sakit</LabelStyle>
|
||||
<RHFTextField name="code" placeholder="Tuliskan Code Rumah Sakit" />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<LabelStyle>Group Wilayah</LabelStyle>
|
||||
<Controller
|
||||
name="region_groups"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Autocomplete
|
||||
id="combo-box-demo"
|
||||
options={region_groups}
|
||||
getOptionLabel={(option) =>
|
||||
option.label ?? findVaalueGroupWilayah?.label ?? ''
|
||||
}
|
||||
value={value}
|
||||
onChange={(event: any, newValue: any) => {
|
||||
console.log('newValue', newValue);
|
||||
setValue('region_groups', newValue?.value);
|
||||
onChange(newValue);
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
label="Group Wilayah"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<LabelStyle>Alamat</LabelStyle>
|
||||
<RHFTextField name="address" placeholder="Tuliskan Alamat" />
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<LabelStyle>Provinsi</LabelStyle>
|
||||
{/*
|
||||
<Controller
|
||||
name="province_id"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Select
|
||||
className="input-container"
|
||||
size="medium"
|
||||
disabled={!province?.length}
|
||||
value={value}
|
||||
onChange={(e: any) => {
|
||||
onChange(e);
|
||||
}}
|
||||
fullWidth
|
||||
MenuProps={{
|
||||
PaperProps: {
|
||||
sx: {
|
||||
maxHeight: 224,
|
||||
width: 250,
|
||||
p: 1,
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{province?.map((item: any) => (
|
||||
<MenuItem key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/> */}
|
||||
<Box sx={{ width: '100%', typography: 'body1', mt: 2 }}>
|
||||
<Grid container rowSpacing={4} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Grid item xs={12}>
|
||||
<LabelStyle>Nama Rumah Sakit</LabelStyle>
|
||||
<RHFTextField name="name" placeholder="Tuliskan Nama Rumah Sakit" />
|
||||
</Grid>
|
||||
|
||||
<Controller
|
||||
name="province_id"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Autocomplete
|
||||
id="combo-box-demo"
|
||||
options={province}
|
||||
getOptionLabel={(option) =>
|
||||
option.label ?? findValueProvince?.label ?? ''
|
||||
}
|
||||
value={value}
|
||||
onChange={(event: any, newValue: any) => {
|
||||
console.log('newValue', newValue);
|
||||
setValue('province_id', newValue?.value);
|
||||
onChange(newValue);
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
label="Provinsi"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<LabelStyle>Kabupaten / Kota</LabelStyle>
|
||||
{/* <Controller
|
||||
name="city_id"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Select
|
||||
className="input-container"
|
||||
size="medium"
|
||||
disabled={!city?.length}
|
||||
value={value}
|
||||
onChange={(e: any) => {
|
||||
onChange(e);
|
||||
}}
|
||||
fullWidth
|
||||
MenuProps={{
|
||||
PaperProps: {
|
||||
sx: {
|
||||
maxHeight: 224,
|
||||
width: 250,
|
||||
p: 1,
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{city?.map((item: any) => (
|
||||
<MenuItem key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/> */}
|
||||
<Controller
|
||||
name="city_id"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Autocomplete
|
||||
id="combo-box-demo"
|
||||
options={city}
|
||||
getOptionLabel={(option) => option.label ?? findValueCity?.label ?? ''}
|
||||
value={value}
|
||||
onChange={(event: any, newValue: any) => {
|
||||
console.log('newValue', newValue);
|
||||
setValue('city_id', newValue?.value);
|
||||
onChange(newValue);
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
label="Kabupaten / Kota"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<LabelStyle>Code Rumah Sakit</LabelStyle>
|
||||
<RHFTextField name="code" placeholder="Tuliskan Code Rumah Sakit" />
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<LabelStyle>Nomor IGD</LabelStyle>
|
||||
<RHFTextField name="phone" placeholder="Tuliskan No IGD" />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<LabelStyle>Alamat</LabelStyle>
|
||||
<RHFTextField name="address" placeholder="Tuliskan Alamat" />
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<LabelStyle>Provinsi</LabelStyle>
|
||||
|
||||
<Grid item xs={12} md={6}>
|
||||
<LabelStyle>Kecamatan</LabelStyle>
|
||||
<Controller
|
||||
name="province_id"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Autocomplete
|
||||
id="combo-box-demo"
|
||||
options={province}
|
||||
getOptionLabel={(option) => option.label ?? findValueProvince?.label ?? ''}
|
||||
value={value}
|
||||
onChange={(event: any, newValue: any) => {
|
||||
console.log('newValue', newValue);
|
||||
setValue('province_id', newValue?.value);
|
||||
onChange(newValue);
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField {...params} label="Provinsi" variant="outlined" fullWidth />
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<LabelStyle>Kabupaten / Kota</LabelStyle>
|
||||
|
||||
{/* <Controller
|
||||
name="district_id"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Select
|
||||
className="input-container"
|
||||
size="medium"
|
||||
disabled={!district?.length}
|
||||
value={value}
|
||||
onChange={(e: any) => {
|
||||
onChange(e);
|
||||
}}
|
||||
fullWidth
|
||||
MenuProps={{
|
||||
PaperProps: {
|
||||
sx: {
|
||||
maxHeight: 224,
|
||||
width: 250,
|
||||
p: 1,
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{district?.map((item: any) => (
|
||||
<MenuItem key={item.value} value={item.value}>
|
||||
{item.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/> */}
|
||||
<Controller
|
||||
name="city_id"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Autocomplete
|
||||
id="combo-box-demo"
|
||||
options={city}
|
||||
getOptionLabel={(option) => option.label ?? findValueCity?.label ?? ''}
|
||||
value={value}
|
||||
onChange={(event: any, newValue: any) => {
|
||||
console.log('newValue', newValue);
|
||||
setValue('city_id', newValue?.value);
|
||||
onChange(newValue);
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
label="Kabupaten / Kota"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Controller
|
||||
name="district_id"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Autocomplete
|
||||
id="combo-box-demo"
|
||||
options={district}
|
||||
getOptionLabel={(option) =>
|
||||
option.label ?? findValueDistrict?.label ?? ''
|
||||
}
|
||||
value={value}
|
||||
onChange={(event: any, newValue: any) => {
|
||||
console.log('newValue', newValue);
|
||||
setValue('district_id', newValue?.value);
|
||||
onChange(newValue);
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
label="Kecamatan"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<LabelStyle>Kode Pos</LabelStyle>
|
||||
<RHFTextField name="postal_code" placeholder="Tuliskan Kode Pos" />
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<LabelStyle>Latitude</LabelStyle>
|
||||
<RHFTextField name="lat" placeholder="Tuliskan Lattitude" />
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<LabelStyle>Longitude</LabelStyle>
|
||||
<RHFTextField name="lng" placeholder="Tuliskan Longitude" />
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<LabelStyle>Timezone</LabelStyle>
|
||||
{/* <RHFTextField name="timezone" /> */}
|
||||
<RHFSelect name="timezone" label="Pilih Timezone">
|
||||
<option value="" />
|
||||
{timezone.map((option, index) => (
|
||||
<option key={index} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</RHFSelect>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</TabPanel>
|
||||
<TabPanel value="2">
|
||||
<Box sx={{ width: '100%', p: 5 }}>
|
||||
<Grid container rowSpacing={4} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Grid item xs={12}>
|
||||
<LabelStyle>Deskripsi</LabelStyle>
|
||||
<RHFEditor name="description" placeholder="Tuliskan Deskripsi" />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<LabelStyle>Teknologi</LabelStyle>
|
||||
<RHFEditor name="technology" placeholder="Tuliskan Teknologi" />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<LabelStyle>Layanan Penunjang</LabelStyle>
|
||||
<RHFEditor name="support_services" placeholder="Tuliskan Layanan Penunjang" />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</TabPanel>
|
||||
<TabPanel value="3">
|
||||
<Box sx={{ width: '100%', p: 5 }}>
|
||||
<Grid container rowSpacing={4} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
|
||||
<Grid item xs={12}>
|
||||
<LabelStyle>Merchant Code</LabelStyle>
|
||||
<RHFTextField name="merchant_code" placeholder="Tuliskan Merchant Code" />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<LabelStyle>Merchant Key</LabelStyle>
|
||||
<RHFTextField name="merchant_key" placeholder="Tuliskan Merchant Key" />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</TabPanel>
|
||||
</TabContext>
|
||||
<Grid item xs={12} md={6}>
|
||||
<LabelStyle>Kecamatan</LabelStyle>
|
||||
|
||||
<Controller
|
||||
name="district_id"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Autocomplete
|
||||
id="combo-box-demo"
|
||||
options={district}
|
||||
getOptionLabel={(option) => option.label ?? findValueDistrict?.label ?? ''}
|
||||
value={value}
|
||||
onChange={(event: any, newValue: any) => {
|
||||
console.log('newValue', newValue);
|
||||
setValue('district_id', newValue?.value);
|
||||
onChange(newValue);
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField {...params} label="Kecamatan" variant="outlined" fullWidth />
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6}>
|
||||
<LabelStyle>Desa</LabelStyle>
|
||||
|
||||
<Controller
|
||||
name="village_id"
|
||||
control={control}
|
||||
render={({ field: { onChange, value } }) => (
|
||||
<Autocomplete
|
||||
id="combo-box-demo"
|
||||
options={village}
|
||||
getOptionLabel={(option) => option.label ?? findValueVillage?.label ?? ''}
|
||||
value={value}
|
||||
onChange={(event: any, newValue: any) => {
|
||||
console.log('newValue', newValue);
|
||||
setValue('village_id', newValue?.value);
|
||||
onChange(newValue);
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField {...params} label="Desa" variant="outlined" fullWidth />
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<LabelStyle>Kode Pos</LabelStyle>
|
||||
<RHFTextField name="postal_code" placeholder="Tuliskan Kode Pos" />
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<LabelStyle>Latitude</LabelStyle>
|
||||
<RHFTextField name="lat" placeholder="Tuliskan Lattitude" />
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<LabelStyle>Longitude</LabelStyle>
|
||||
<RHFTextField name="lng" placeholder="Tuliskan Longitude" />
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<LabelStyle>Deskripsi</LabelStyle>
|
||||
<RHFEditor name="description" placeholder="Tuliskan Deskripsi" />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
<Box sx={{ width: '100%', p: 5 }}>
|
||||
|
||||
<Box sx={{ width: '100%', mt: 5 }}>
|
||||
<Stack
|
||||
alignItems="center"
|
||||
justifyContent="end"
|
||||
|
||||
@@ -23,7 +23,7 @@ export default function Organizations() {
|
||||
},
|
||||
{
|
||||
name: 'Rumah Sakit',
|
||||
href: '/master/organizations',
|
||||
href: '/master/hospitals',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
@@ -147,9 +147,11 @@ export default function List() {
|
||||
>
|
||||
<SearchInput onSearch={applyFilter} />
|
||||
|
||||
{/* <Link to="/master/organizations/create/" style={{ textDecoration: 'none' }}>
|
||||
<ButtonCreate />
|
||||
</Link> */}
|
||||
<Link to="/master/hospitals/create" style={{ textDecoration: 'none' }}>
|
||||
<Button variant="outlined" startIcon={<AddIcon />} sx={{ p: 1.8 }}>
|
||||
Create
|
||||
</Button>
|
||||
</Link>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
@@ -259,26 +261,26 @@ export default function List() {
|
||||
</TableCell>
|
||||
<TableCell align="left">{row.name}</TableCell>
|
||||
<TableCell align="left">{row.phone}</TableCell>
|
||||
<TableCell align="left">{row.address?.text}</TableCell>
|
||||
<TableCell align="left">{row.address}</TableCell>
|
||||
|
||||
{/* <TableCell align="left">
|
||||
<Stack direction="row">
|
||||
<ButtonGroup variant="text" aria-label="text button group">
|
||||
<Link to={'/master/organizations/' + row.id + '/edit'}>
|
||||
<Button>
|
||||
<Icon icon="ph:pencil-simple-fill" style={{ width: '24px', height: '24px' }} />
|
||||
</Button>
|
||||
</Link>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setOpenDialog(true);
|
||||
}}
|
||||
>
|
||||
<Icon icon="eva:trash-2-outline" style={{ width: '24px', height: '24px' }} />
|
||||
<TableCell align="right">
|
||||
{/* <Stack direction="row"> */}
|
||||
<ButtonGroup variant="text" aria-label="text button group">
|
||||
<Link to={'/master/hospitals/' + row.id + '/edit'}>
|
||||
<Button>
|
||||
<Icon icon="ph:pencil-simple-fill" style={{ width: '24px', height: '24px' }} />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</Stack>
|
||||
</TableCell> */}
|
||||
</Link>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setOpenDialog(true);
|
||||
}}
|
||||
>
|
||||
<Icon icon="eva:trash-2-outline" style={{ width: '24px', height: '24px' }} />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
{/* </Stack> */}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
{/* COLLAPSIBLE ROW */}
|
||||
|
||||
@@ -194,10 +194,26 @@ export default function Router() {
|
||||
path: 'master/doctors',
|
||||
element: <MasterDoctors />,
|
||||
},
|
||||
{
|
||||
path: 'master/doctors/create',
|
||||
element: <MasterDoctorsCreate />,
|
||||
},
|
||||
{
|
||||
path: 'master/doctors/:id/edit',
|
||||
element: <MasterDoctorsCreate />,
|
||||
},
|
||||
{
|
||||
path: 'master/hospitals',
|
||||
element: <MasterHospitals />,
|
||||
},
|
||||
{
|
||||
path: 'master/hospitals/create',
|
||||
element: <MasterHospitalsCreate />,
|
||||
},
|
||||
{
|
||||
path: 'master/hospitals/:id/edit',
|
||||
element: <MasterHospitalsCreate />,
|
||||
},
|
||||
{
|
||||
path: 'master/diagnosis',
|
||||
element: <MasterDiagnosis />,
|
||||
@@ -320,7 +336,9 @@ const CorporateFormularium = Loadable(lazy(() => import('../pages/Corporates/For
|
||||
|
||||
const MasterDiagnosis = Loadable(lazy(() => import('../pages/Master/Diagnosis/Index')));
|
||||
const MasterDoctors = Loadable(lazy(() => import('../pages/Master/Doctors/Index')));
|
||||
const MasterDoctorsCreate = Loadable(lazy(() => import('../pages/Master/Doctors/Create')));
|
||||
const MasterHospitals = Loadable(lazy(() => import('../pages/Master/Hospitals/Index')));
|
||||
const MasterHospitalsCreate = Loadable(lazy(() => import('../pages/Master/Hospitals/Create')));
|
||||
|
||||
const MasterDrug = Loadable(lazy(() => import('../pages/Master/Drug/Index')));
|
||||
|
||||
|
||||
@@ -36,8 +36,8 @@ export const colorPresets = [
|
||||
name: 'blue',
|
||||
lighter: '#D1E9FC',
|
||||
light: '#76B0F1',
|
||||
main: '#2065D1',
|
||||
dark: '#103996',
|
||||
main: '#006a35',
|
||||
dark: '#004422',
|
||||
darker: '#061B64',
|
||||
contrastText: '#fff',
|
||||
},
|
||||
@@ -63,7 +63,7 @@ export const colorPresets = [
|
||||
},
|
||||
];
|
||||
|
||||
export const defaultPreset = colorPresets[0];
|
||||
export const defaultPreset = colorPresets[3];
|
||||
export const purplePreset = colorPresets[1];
|
||||
export const cyanPreset = colorPresets[2];
|
||||
export const bluePreset = colorPresets[3];
|
||||
|
||||
Reference in New Issue
Block a user