Merge branch 'feature/aso-digital-card' into staging

frontend/dashboard/.env.development

@@ -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"

frontend/dashboard/src/layouts/dashboard/navbar/NavConfig.tsx

@@ -76,6 +76,13 @@ const navConfig = [
         title: 'CUSTOMER SERVICES',
         children: [{ title: 'Request', path: '/cs-request' }],
       },
+      {
+        title: 'REPORT',
+        children: [
+          { title: 'Appointment', path: '/report/appointments' },
+          { title: 'Live Chat', path: '/report/live-chat' },
+        ],
+      },
       {
         title: 'USER MANAGEMENT',
         path: '/users',

frontend/dashboard/src/pages/Corporates/Form.tsx

@@ -100,7 +100,7 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
       policy_stop_service_net: currentCorporate?.current_policy?.minimal_stop_service_net || 0,
       policy_start: currentCorporate?.current_policy?.start || '',
       policy_end: currentCorporate?.current_policy?.end || '',
-      linking_rules: currentCorporate?.linking_rules || ['nrik', 'nik', 'member_id'],
+      linking_rules: currentCorporate?.linking_rules || ['nric', 'nik', 'member_id'],
       type: currentCorporate?.type || 'corporate',
       logo: currentCorporate?.logo || '',
     }),
@@ -174,6 +174,8 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
       formData.append('policy_end', data.policy_end);
       formData.append('linking_rules', data.linking_rules);
 
+      console.log('MOTHERFUCKER', data.linking_rules)
+
       if (!isEdit) {
         const response = await axios.post('/corporates', formData);
       } else {
@@ -269,7 +271,7 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
   const linking_rules_checkbox_name = 'linking_rules';
   const linking_tools = [
     {
-      value: 'nrik',
+      value: 'nric',
       label: 'No. KTP',
     },
     {
@@ -425,6 +427,7 @@ export default function CorporateForm({ isEdit, currentCorporate }: Props) {
                   Linking Rules
                 </Typography>
                 <Stack>
+                  {JSON.stringify(getValues('linking_rules'))}
                   <RHFCustomMultiCheckbox name="linking_rules" options={linking_tools} />
                 </Stack>
               </Stack>

frontend/dashboard/src/pages/Master/Doctors/Create.tsx

@@ -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>
-// );
-// }

frontend/dashboard/src/pages/Master/Doctors/Form.tsx

@@ -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>

frontend/dashboard/src/pages/Master/Doctors/List.tsx

@@ -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>

frontend/dashboard/src/pages/Master/Formularium/Form.tsx

@@ -154,7 +154,7 @@ export default function FormulariumForm({ isEdit, currentFormularium }: Props) {
   const linking_rules_checkbox_name = "linking_rules"
   const linking_tools = [
     {
-      "value" : "nrik",
+      "value" : "nric",
       "label" : "No. KTP"
     },
     {

frontend/dashboard/src/pages/Master/Hospitals/Create.tsx

@@ -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>
   );

frontend/dashboard/src/pages/Master/Hospitals/Form.tsx

@@ -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"

frontend/dashboard/src/pages/Master/Hospitals/Index.tsx

@@ -23,7 +23,7 @@ export default function Organizations() {
             },
             {
               name: 'Rumah Sakit',
-              href: '/master/organizations',
+              href: '/master/hospitals',
             },
           ]}
         />

frontend/dashboard/src/pages/Master/Hospitals/List.tsx

@@ -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 */}

frontend/dashboard/src/pages/Report/Appointments/Create.tsx

@@ -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>
+// );
+// }

frontend/dashboard/src/pages/Report/Appointments/Form.tsx

@@ -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>
+  );
+}

frontend/dashboard/src/pages/Report/Appointments/Index.tsx

@@ -0,0 +1,35 @@
+import { Card, Grid, Container } from '@mui/material';
+import { useParams } from 'react-router-dom';
+import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
+import Page from '../../../components/Page';
+import useSettings from '../../../hooks/useSettings';
+import List from './List';
+
+export default function Doctors() {
+  const { themeStretch } = useSettings();
+
+  const { id } = useParams();
+
+  const pageTitle = 'Appointments';
+  return (
+    <Page title={pageTitle}>
+      <Container maxWidth={themeStretch ? false : 'xl'}>
+        <HeaderBreadcrumbs
+          heading={pageTitle}
+          links={[
+            {
+              name: 'Report',
+              href: '/report',
+            },
+            {
+              name: 'Appointments',
+              href: '/report/appointments',
+            },
+          ]}
+        />
+
+        <List />
+      </Container>
+    </Page>
+  );
+}

frontend/dashboard/src/pages/Report/Appointments/List.tsx

@@ -0,0 +1,416 @@
+import {
+  Box,
+  Button,
+  Card,
+  Collapse,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+  Stack,
+  ButtonGroup,
+  Grid,
+  Chip,
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  FormControl,
+  Autocomplete,
+  InputAdornment,
+  IconButton,
+} from '@mui/material';
+
+import {
+  Link,
+  NavLink as RouterLink,
+  useSearchParams,
+  useNavigate,
+  useParams,
+} from 'react-router-dom';
+// hooks
+import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
+import useSettings from '../../../hooks/useSettings';
+// components
+import axios from '../../../utils/axios';
+import { LaravelPaginatedData } from '../../../@types/paginated-data';
+import { Icd } from '../../../@types/diagnosis';
+import BasePagination from '../../../components/BasePagination';
+import { Practitioner } from '../../../@types/doctor';
+import CreateIcon from '@mui/icons-material/Create';
+import { Props } from '../../../components/editor/index';
+import { red } from '@mui/material/colors';
+import { margin, padding } from '@mui/system';
+import { enqueueSnackbar } from 'notistack';
+import { Controller } from 'react-hook-form';
+
+import SvgIconStyle from '../../../components/SvgIconStyle';
+import { GridSearchIcon } from '@mui/x-data-grid';
+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';
+
+// ----------------------------------------------------------------------
+
+export default function List() {
+  // Generate the every row of the table
+
+  const navigate = useNavigate();
+  const { organization_id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParamsOrganizations, setSearchParamsOrganizations] = useSearchParams();
+  const [searchParamsSpecialities, setSearchParamsSpecialities] = useSearchParams();
+  const [searchParamsFilter, setSearchParamsFilter] = useSearchParams();
+
+  function Filter(props: any) {
+    // SEARCH
+    const searchInput = useRef<HTMLInputElement>(null);
+    const [searchText, setSearchText] = useState('');
+
+    //handle search
+    const handleSearchChange = (event: any) => {
+      const newSearchText = event.target.value ?? '';
+      setSearchText(newSearchText);
+    };
+
+    const handleSearchSubmit = (event: any) => {
+      event.preventDefault();
+
+      props.onSearch(searchText);
+    };
+
+    useEffect(() => {
+      // Trigger First Search
+      setSearchText(searchParams.get('search') ?? '');
+    }, []);
+
+    const item = [
+      {
+        id: '',
+        value: '',
+        name: 'Semua',
+      },
+    ];
+
+    return (
+      <form style={{ width: '100%' }}>
+        <Grid container spacing={2} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+          <Grid item xs={12} sm={12} md={12} lg={12}>
+            <TextField
+              id="search-input"
+              ref={searchInput}
+              variant="outlined"
+              fullWidth
+              onChange={handleSearchChange}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  handleSearchSubmit(event);
+                }
+              }}
+              value={searchText}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <Search />
+                  </InputAdornment>
+                ),
+                placeholder: 'Search',
+              }}
+            />
+          </Grid>
+        </Grid>
+      </form>
+    );
+  }
+
+  function FilterForm(props: any) {
+    // IMPORT
+    return (
+      <Grid
+        container
+        spacing={2}
+        sx={{ p: 2, justifyContent: 'space-between', alignItems: 'center' }}
+      >
+        <Grid item xs={12} md={12} lg={12}>
+          <Filter onSearch={applyItems} />
+        </Grid>
+      </Grid>
+    );
+  }
+
+  function createData(doctor: Practitioner): Practitioner {
+    return {
+      ...doctor,
+    };
+  }
+
+  function Row(props: { row: ReturnType<typeof createData> }) {
+    const { row } = props;
+    const [open, setOpen] = React.useState(false);
+    const [openDialog, setOpenDialog] = React.useState(false);
+
+    const handleDelete = (model: any) => {
+      axios
+        .delete(`/doctors/${row.id}`)
+        .then((res) => {
+          setDataTableData({
+            ...dataTableData,
+            data: dataTableData.data.filter((model) => model.id != row.id),
+          });
+          enqueueSnackbar('Data berhasil dihapus', { variant: 'success' });
+        })
+        .catch((error) => {
+          enqueueSnackbar(
+            error.response.data.message ?? error.message ?? 'Failed Processing Request',
+            { variant: 'error' }
+          );
+        });
+    };
+
+    return (
+      <React.Fragment>
+        <TableRow>
+          <TableCell>
+            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
+              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
+            </IconButton>
+          </TableCell>
+          <TableCell align="left">{row.date_created ? row.date_created : '-'}</TableCell>
+          <TableCell align="left">{row.date_appointment ? row.date_appointment : '-'}</TableCell>
+          <TableCell align="left">{row.booking_code ?? '-'}</TableCell>
+          <TableCell align="left">{row.patient_name ? row.patient_name : '-'}</TableCell>
+          <TableCell align="left">{row.health_care ? row.health_care : '-'}</TableCell>
+          <TableCell align="left">{row.doctor_name ? row.doctor_name : '-'}</TableCell>
+          <TableCell align="left">{row.type ? row.type : '-'}</TableCell>
+
+          <TableCell align="left">{row.status ? row.status : '-'}</TableCell>
+          <TableCell align="center">
+            <ButtonGroup variant="text" aria-label="text button group">
+              <Link to={'/report/appointments/' + row.id + '/show'}>
+                <Button>
+                  <Icon icon="ph:eye-bold" style={{ width: '24px', height: '24px' }} />
+                </Button>
+              </Link>
+            </ButtonGroup>
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={15}>
+            <Collapse in={open} timeout="auto" unmountOnExit>
+              <Stack>
+                <Grid container>
+                  <Grid item xs={2}>Spesialisasi</Grid><Grid item xs="10">: {row.speciality}</Grid>
+                  <Grid item xs={2}>Via</Grid><Grid item xs="10">: {row.appointment_media}</Grid>
+                  <Grid item xs={2}>Metode Pembayaran</Grid><Grid item xs="10">: {row.payment_method}</Grid>
+                  <Grid item xs={2}>HIS RegID</Grid><Grid item xs="10">: {row.his_detail?.sRegID}</Grid>
+                  <Grid item xs={2}>HIS Medrec</Grid><Grid item xs="10">: {row.his_detail?.Medrec}</Grid>
+                  <Grid item xs={2}>No HP</Grid><Grid item xs="10">: {row.patient.sPhone ?? ''}</Grid>
+                  <Grid item xs={2}>E-mail</Grid><Grid item xs="10">: {row.patient.sEmail ?? ''}</Grid>
+                  <Grid item xs={2}>Alamat</Grid><Grid item xs="10">: {row.patient.detail.sAlamat ?? ''}</Grid>
+                  <Grid item xs={2}>KTP</Grid><Grid item xs="10">: {row.patient.detail.sKTP ?? ''}</Grid>
+                </Grid>
+              </Stack>  
+            </Collapse>
+          </TableCell>
+        </TableRow>
+
+        <Dialog
+          open={openDialog}
+          onClose={() => {
+            setOpenDialog(false);
+          }}
+          aria-labelledby="alert-dialog-title"
+          aria-describedby="alert-dialog-description"
+        >
+          <DialogContent sx={{ p: 5 }}>
+            <Icon
+              icon="eva:trash-2-outline"
+              style={{
+                width: '100px',
+                height: '100px',
+                color: '#FF0000',
+                margin: 'auto',
+                display: 'block',
+                marginBottom: '20px',
+                alignContent: 'center',
+              }}
+            />
+            <DialogContentText sx={{ fontWeight: 'bold', pb: 1 }} id="alert-dialog-title">
+              Apakah anda yakin ingin menghapus
+            </DialogContentText>
+            <Typography sx={{ fontWeight: 'bold' }} id="alert-dialog-title">
+              {row.name}?
+            </Typography>
+          </DialogContent>
+          <DialogActions>
+            <Button
+              onClick={() => {
+                setOpenDialog(false);
+              }}
+              color="primary"
+            >
+              Batal
+            </Button>
+            <Button
+              onClick={() => {
+                handleDelete(row.id);
+              }}
+              color="primary"
+              autoFocus
+            >
+              Hapus
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </React.Fragment>
+    );
+  }
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+  // Dummy Default Data
+  const [dataTableIsLoading, setDataTableLoading] = useState(true);
+  const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
+  const [dataTableResponseState, setDataTableResponseState] = useState('idle');
+  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
+    current_page: 1,
+    data: [],
+    path: '',
+    first_page_url: '',
+    last_page: 1,
+    last_page_url: '',
+    next_page_url: '',
+    prev_page_url: '',
+    per_page: 10,
+    from: 0,
+    to: 0,
+    total: 0,
+  });
+  const [dataTablePage, setDataTablePage] = useState(5);
+
+  const loadDataTableData = async (appliedFilter: any | null = null) => {
+    setDataTableLoading(true);
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const response = await axios.get('/appointments', {
+      params: filter,
+    });
+    setDataTableLoading(false);
+    setDataTableData(response.data);
+  };
+
+  // const applyFilter = async (searchFilter: string) => {
+  //   await loadDataTableData({ search: searchFilter });
+  //   setSearchParams({ search: searchFilter });
+  // };
+
+  const applyItems = async (
+    searchFilter: string,
+    searchFilterOrganization: string,
+    searchFilterSpecialities: string
+  ) => {
+    await loadDataTableData({
+      search: searchFilter,
+      organization_id: searchFilterOrganization,
+      speciality_id: searchFilterSpecialities,
+    });
+    setSearchParamsFilter({
+      search: searchFilter,
+      organization_id: searchFilterOrganization,
+      speciality_id: searchFilterSpecialities,
+    });
+  };
+
+  const handlePageChange = (event: ChangeEvent, value: number) => {
+    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
+    loadDataTableData(filter);
+    setSearchParams(filter);
+  };
+
+  useEffect(() => {
+    loadDataTableData();
+  }, []);
+
+  return (
+    <Stack>
+      {/* <Ambulace /> */}
+
+      <Card sx={{ marginTop: '30px' }}>
+        <FilterForm sx={{ marginTop: '100px' }} />
+
+        {/* The Main Table */}
+        <TableContainer component={Paper}>
+          <Table>
+            <TableBody>
+              <TableRow>
+                <TableCell style={headStyle} align="left" />
+                <TableCell style={headStyle} align="left">
+                  Tanggal Pemesanan
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Tanggal Appointment
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Kode Booking
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Pasien
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Faskes
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Dokter
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Jenis
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Status Appointment
+                </TableCell>
+                <TableCell style={headStyle} align="left" />
+
+                {/* <TableCell style={headStyle} align="center">
+                  Aksi
+                </TableCell> */}
+              </TableRow>
+            </TableBody>
+            {dataTableIsLoading ? (
+              <TableBody>
+                <TableRow>
+                  <TableCell colSpan={8} align="center">
+                    Loading
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            ) : dataTableData.data.length == 0 ? (
+              <TableBody>
+                <TableRow>
+                  <TableCell colSpan={8} align="center">
+                    No Data
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            ) : (
+              <TableBody>
+                {dataTableData.data.map((row) => (
+                  <Row key={row.id} row={row} />
+                ))}
+              </TableBody>
+            )}
+          </Table>
+        </TableContainer>
+
+        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
+      </Card>
+    </Stack>
+  );
+}

frontend/dashboard/src/pages/Report/Appointments/Show.tsx

@@ -0,0 +1,53 @@
+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 View from './View';
+import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
+import axios from '../../../utils/axios';
+import { Appointment } from '../../../@types/doctor';
+
+export default function Create() {
+  const { themeStretch } = useSettings();
+  const { id } = useParams();
+
+  const isEdit = id ? true : false;
+
+  const [currentAppointment, setCurrentAppointment] = useState<Appointment>();
+
+  useEffect(() => {
+    if (isEdit) {
+      axios.get('/appointments/' + id).then((res) => {
+        setCurrentAppointment(res.data);
+      });
+    }
+  }, [id]);
+
+  return (
+    <Page title="Appointment">
+      <Container maxWidth={themeStretch ? false : 'xl'}>
+        <Stack direction="row" alignItems="center">
+          <HeaderBreadcrumbs
+            heading={!isEdit ? 'Appointment' : 'Appointment'}
+            links={[
+              { name: 'Report', href: '/report' },
+              {
+                name: 'Appointments',
+                href: '/report/appointments',
+              },
+            ]}
+          />
+        </Stack>
+
+        <View
+          // isSubmitting={isSubmitting}
+          isEdit={isEdit}
+          currentAppointment={currentAppointment}
+        />
+      </Container>
+    </Page>
+  );
+}

frontend/dashboard/src/pages/Report/Appointments/View.tsx

@@ -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>
+  );
+}

frontend/dashboard/src/pages/Report/Livechat/Create.tsx

@@ -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>
+// );
+// }

frontend/dashboard/src/pages/Report/Livechat/Form.tsx

@@ -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>
+  );
+}

frontend/dashboard/src/pages/Report/Livechat/Index.tsx

@@ -0,0 +1,35 @@
+import { Card, Grid, Container } from '@mui/material';
+import { useParams } from 'react-router-dom';
+import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
+import Page from '../../../components/Page';
+import useSettings from '../../../hooks/useSettings';
+import List from './List';
+
+export default function Doctors() {
+  const { themeStretch } = useSettings();
+
+  const { id } = useParams();
+
+  const pageTitle = 'Live Chat';
+  return (
+    <Page title={pageTitle}>
+      <Container maxWidth={themeStretch ? false : 'xl'}>
+        <HeaderBreadcrumbs
+          heading={pageTitle}
+          links={[
+            {
+              name: 'Report',
+              href: '/report',
+            },
+            {
+              name: 'Live Chat',
+              href: '/report/live-chat',
+            },
+          ]}
+        />
+
+        <List />
+      </Container>
+    </Page>
+  );
+}

frontend/dashboard/src/pages/Report/Livechat/List.tsx

@@ -0,0 +1,466 @@
+import {
+  Box,
+  Button,
+  Card,
+  Collapse,
+  Paper,
+  Select,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+  Stack,
+  ButtonGroup,
+  Grid,
+  Chip,
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  FormControl,
+  Autocomplete,
+  InputAdornment,
+  IconButton,
+} from '@mui/material';
+
+import {
+  Link,
+  NavLink as RouterLink,
+  useSearchParams,
+  useNavigate,
+  useParams,
+} from 'react-router-dom';
+// hooks
+import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react';
+import useSettings from '../../../hooks/useSettings';
+// components
+import axios from '../../../utils/axios';
+import { LaravelPaginatedData } from '../../../@types/paginated-data';
+import { Icd } from '../../../@types/diagnosis';
+import BasePagination from '../../../components/BasePagination';
+import { Practitioner } from '../../../@types/doctor';
+import CreateIcon from '@mui/icons-material/Create';
+import { Props } from '../../../components/editor/index';
+import { red } from '@mui/material/colors';
+import { margin, padding } from '@mui/system';
+import { enqueueSnackbar } from 'notistack';
+import { Controller } from 'react-hook-form';
+
+import SvgIconStyle from '../../../components/SvgIconStyle';
+import { GridSearchIcon } from '@mui/x-data-grid';
+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';
+
+// ----------------------------------------------------------------------
+
+export default function List() {
+  // Generate the every row of the table
+
+  const navigate = useNavigate();
+  const { organization_id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [searchParamsOrganizations, setSearchParamsOrganizations] = useSearchParams();
+  const [searchParamsSpecialities, setSearchParamsSpecialities] = useSearchParams();
+  const [searchParamsFilter, setSearchParamsFilter] = useSearchParams();
+
+  function Filter(props: any) {
+    // SEARCH
+    const searchInput = useRef<HTMLInputElement>(null);
+    const [searchText, setSearchText] = useState('');
+
+    //handle search
+    const handleSearchChange = (event: any) => {
+      const newSearchText = event.target.value ?? '';
+      setSearchText(newSearchText);
+    };
+
+    const handleSearchSubmit = (event: any) => {
+      event.preventDefault();
+
+      props.onSearch(searchText);
+    };
+
+    useEffect(() => {
+      // Trigger First Search
+      setSearchText(searchParams.get('search') ?? '');
+    }, []);
+
+    const item = [
+      {
+        id: '',
+        value: '',
+        name: 'Semua',
+      },
+    ];
+
+    return (
+      <form style={{ width: '100%' }}>
+        <Grid container spacing={2} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
+          <Grid item xs={12} sm={12} md={12} lg={12}>
+            <TextField
+              id="search-input"
+              ref={searchInput}
+              variant="outlined"
+              fullWidth
+              onChange={handleSearchChange}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  handleSearchSubmit(event);
+                }
+              }}
+              value={searchText}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start">
+                    <Search />
+                  </InputAdornment>
+                ),
+                placeholder: 'Search',
+              }}
+            />
+          </Grid>
+        </Grid>
+      </form>
+    );
+  }
+
+  function FilterForm(props: any) {
+    // IMPORT
+    return (
+      <Grid
+        container
+        spacing={2}
+        sx={{ p: 2, justifyContent: 'space-between', alignItems: 'center' }}
+      >
+        <Grid item xs={12} md={12} lg={12}>
+          <Filter onSearch={applyItems} />
+        </Grid>
+      </Grid>
+    );
+  }
+
+  function createData(doctor: Practitioner): Practitioner {
+    return {
+      ...doctor,
+    };
+  }
+
+  function Row(props: { row: ReturnType<typeof createData> }) {
+    const { row } = props;
+    const [open, setOpen] = React.useState(false);
+    const [openDialog, setOpenDialog] = React.useState(false);
+
+    const handleDelete = (model: any) => {
+      axios
+        .delete(`/doctors/${row.id}`)
+        .then((res) => {
+          setDataTableData({
+            ...dataTableData,
+            data: dataTableData.data.filter((model) => model.id != row.id),
+          });
+          enqueueSnackbar('Data berhasil dihapus', { variant: 'success' });
+        })
+        .catch((error) => {
+          enqueueSnackbar(
+            error.response.data.message ?? error.message ?? 'Failed Processing Request',
+            { variant: 'error' }
+          );
+        });
+    };
+
+    return (
+      <React.Fragment>
+        <TableRow>
+          <TableCell>
+            <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
+              {open ? <KeyboardArrowDownIcon /> : <KeyboardArrowRightIcon />}
+            </IconButton>
+          </TableCell>
+          <TableCell align="left">{row.date_created ? row.date_created : '-'}</TableCell>
+          <TableCell align="left">{row.date_appointment ? row.date_appointment : '-'}</TableCell>
+          <TableCell align="left">{row.health_care ? row.health_care : '-'}</TableCell>
+          <TableCell align="left">{row.doctor_name ? row.doctor_name : '-'}</TableCell>
+          <TableCell align="left">{row.speciality ? row.speciality : '-'}</TableCell>
+          <TableCell align="left">{row.appointment_media ? row.appointment_media : '-'}</TableCell>
+          <TableCell align="left">{row.patient_media ? row.patient_media : '-'}</TableCell>
+          <TableCell align="left">{row.doctor_media ? row.doctor_media : '-'}</TableCell>
+          <TableCell align="left">
+            {row.status_appointment ? row.status_appointment : '-'}
+          </TableCell>
+          <TableCell align="left">{row.status_chat ? row.status_chat : '-'}</TableCell>
+          <TableCell align="center">
+            <ButtonGroup variant="text" aria-label="text button group">
+              <Link to={'/report/live-chat/' + row.id + '/show'}>
+                <Button>
+                  <Icon icon="ph:eye-bold" style={{ width: '24px', height: '24px' }} />
+                </Button>
+              </Link>
+            </ButtonGroup>
+          </TableCell>
+        </TableRow>
+        {/* COLLAPSIBLE ROW */}
+        <TableRow>
+          <TableCell
+            style={{ paddingBottom: 0, paddingTop: 0, backgroundColor: 'rgba(244, 246, 248, 0.5)' }}
+            colSpan={6}
+          >
+            <Collapse in={open} timeout="auto" unmountOnExit>
+              <Box sx={{ margin: 1, pb: 2, pl: 4 }}>
+                <Grid container>
+                  <Grid item xs={12} sx={{ padding: 2 }}>
+                    <Grid container>
+                      <Grid item xs={6}>
+                        Metode Pembayaran
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.payment_method ? row.payment_method : '-'}
+                      </Grid>
+
+                      <Grid item xs={6}>
+                        Jenis Benefit
+                      </Grid>
+                      <Grid item xs={6}>
+                        : -
+                      </Grid>
+                      <Grid item xs={6}>
+                        Durasi
+                      </Grid>
+                      <Grid item xs={6}>
+                        : {row.duration ? row.duration : '-'}
+                      </Grid>
+                    </Grid>
+                  </Grid>
+                </Grid>
+              </Box>
+            </Collapse>
+          </TableCell>
+        </TableRow>
+
+        {/* END COLLAPSIBLE ROW */}
+        <Dialog
+          open={openDialog}
+          onClose={() => {
+            setOpenDialog(false);
+          }}
+          aria-labelledby="alert-dialog-title"
+          aria-describedby="alert-dialog-description"
+        >
+          <DialogContent sx={{ p: 5 }}>
+            <Icon
+              icon="eva:trash-2-outline"
+              style={{
+                width: '100px',
+                height: '100px',
+                color: '#FF0000',
+                margin: 'auto',
+                display: 'block',
+                marginBottom: '20px',
+                alignContent: 'center',
+              }}
+            />
+            <DialogContentText sx={{ fontWeight: 'bold', pb: 1 }} id="alert-dialog-title">
+              Apakah anda yakin ingin menghapus
+            </DialogContentText>
+            <Typography sx={{ fontWeight: 'bold' }} id="alert-dialog-title">
+              {row.name}?
+            </Typography>
+          </DialogContent>
+          <DialogActions>
+            <Button
+              onClick={() => {
+                setOpenDialog(false);
+              }}
+              color="primary"
+            >
+              Batal
+            </Button>
+            <Button
+              onClick={() => {
+                handleDelete(row.id);
+              }}
+              color="primary"
+              autoFocus
+            >
+              Hapus
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </React.Fragment>
+    );
+  }
+
+  const headStyle = {
+    fontWeight: 'bold',
+  };
+  // Dummy Default Data
+  const [dataTableIsLoading, setDataTableLoading] = useState(true);
+  const [dataTableLastRequest, setDataTableLastRequest] = useState(0);
+  const [dataTableResponseState, setDataTableResponseState] = useState('idle');
+  const [dataTableData, setDataTableData] = useState<LaravelPaginatedData>({
+    current_page: 1,
+    data: [],
+    path: '',
+    first_page_url: '',
+    last_page: 1,
+    last_page_url: '',
+    next_page_url: '',
+    prev_page_url: '',
+    per_page: 10,
+    from: 0,
+    to: 0,
+    total: 0,
+  });
+  const [dataTablePage, setDataTablePage] = useState(5);
+
+  const loadDataTableData = async (appliedFilter: any | null = null) => {
+    setDataTableLoading(true);
+    const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]);
+    const response = await axios.get('/live-chat', {
+      params: filter,
+    });
+    setDataTableLoading(false);
+    setDataTableData(response.data);
+  };
+
+  // const applyFilter = async (searchFilter: string) => {
+  //   await loadDataTableData({ search: searchFilter });
+  //   setSearchParams({ search: searchFilter });
+  // };
+
+  const applyItems = async (
+    searchFilter: string,
+    searchFilterOrganization: string,
+    searchFilterSpecialities: string
+  ) => {
+    await loadDataTableData({
+      search: searchFilter,
+      organization_id: searchFilterOrganization,
+      speciality_id: searchFilterSpecialities,
+    });
+    setSearchParamsFilter({
+      search: searchFilter,
+      organization_id: searchFilterOrganization,
+      speciality_id: searchFilterSpecialities,
+    });
+  };
+
+  const handlePageChange = (event: ChangeEvent, value: number) => {
+    const filter = Object.fromEntries([...searchParams.entries(), ['page', value]]);
+    loadDataTableData(filter);
+    setSearchParams(filter);
+  };
+
+  useEffect(() => {
+    loadDataTableData();
+  }, []);
+
+  return (
+    <Stack>
+      {/* <Ambulace /> */}
+
+      <Card sx={{ marginTop: '30px' }}>
+        <FilterForm sx={{ marginTop: '100px' }} />
+
+        {/* The Main Table */}
+        <TableContainer component={Paper}>
+          <Table>
+            <TableBody>
+              <TableRow>
+                {/* <TableCell colSpan={8} rowSpan={1} align="center" /> */}
+                <TableCell style={headStyle} align="left" />
+                <TableCell style={headStyle} rowSpan={2} align="left">
+                  Tanggal Booking
+                </TableCell>
+                <TableCell style={headStyle} rowSpan={2} align="left">
+                  Tanggal Appointment
+                </TableCell>
+                <TableCell style={headStyle} rowSpan={2} align="left">
+                  Faskes
+                </TableCell>
+                <TableCell style={headStyle} rowSpan={2} align="left">
+                  Nama Dokter
+                </TableCell>
+                <TableCell style={headStyle} rowSpan={2} align="left">
+                  Spesialisasi
+                </TableCell>
+                <TableCell style={headStyle} rowSpan={2} align="left">
+                  Appointment Via App/Website
+                </TableCell>
+                <TableCell
+                  colSpan={2}
+                  style={headStyle}
+                  align="center"
+                  sx={{ borderBottom: '3px solid #d7d7d7' }}
+                >
+                  Chat Via App/Website
+                </TableCell>
+                <TableCell style={headStyle} rowSpan={2} align="left">
+                  Status Appointment
+                </TableCell>
+                <TableCell style={headStyle} rowSpan={2} align="left">
+                  Status Chat
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell style={headStyle} align="left" />
+                {/* <TableCell style={headStyle} align="left">
+                  Tanggal Booking
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Tanggal Appointment
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Faskes
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Nama Dokter
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Spesialisasi
+                </TableCell> */}
+                <TableCell style={headStyle} align="left">
+                  Pasien
+                </TableCell>
+                <TableCell style={headStyle} align="left">
+                  Dokter
+                </TableCell>
+              </TableRow>
+            </TableBody>
+            {dataTableIsLoading ? (
+              <TableBody>
+                <TableRow>
+                  <TableCell colSpan={8} align="center">
+                    Loading
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            ) : dataTableData.data.length == 0 ? (
+              <TableBody>
+                <TableRow>
+                  <TableCell colSpan={8} align="center">
+                    No Data
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            ) : (
+              <TableBody>
+                {dataTableData.data.map((row) => (
+                  <Row key={row.id} row={row} />
+                ))}
+              </TableBody>
+            )}
+          </Table>
+        </TableContainer>
+
+        <BasePagination paginationData={dataTableData} onPageChange={handlePageChange} />
+      </Card>
+    </Stack>
+  );
+}

frontend/dashboard/src/pages/Report/Livechat/Show.tsx

@@ -0,0 +1,53 @@
+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 View from './View';
+import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
+import axios from '../../../utils/axios';
+import { Appointment } from '../../../@types/doctor';
+
+export default function Create() {
+  const { themeStretch } = useSettings();
+  const { id } = useParams();
+
+  const isEdit = id ? true : false;
+
+  const [currentAppointment, setCurrentAppointment] = useState<Appointment>();
+
+  useEffect(() => {
+    if (isEdit) {
+      axios.get('/live-chat/' + id).then((res) => {
+        setCurrentAppointment(res.data);
+      });
+    }
+  }, [id]);
+
+  return (
+    <Page title="Live Chat">
+      <Container maxWidth={themeStretch ? false : 'xl'}>
+        <Stack direction="row" alignItems="center">
+          <HeaderBreadcrumbs
+            heading={!isEdit ? 'Live Chat' : 'Live Chat'}
+            links={[
+              { name: 'Report', href: '/report' },
+              {
+                name: 'Live Chat',
+                href: '/report/live-chat',
+              },
+            ]}
+          />
+        </Stack>
+
+        <View
+          // isSubmitting={isSubmitting}
+          isEdit={isEdit}
+          currentAppointment={currentAppointment}
+        />
+      </Container>
+    </Page>
+  );
+}

frontend/dashboard/src/pages/Report/Livechat/View.tsx

@@ -0,0 +1,309 @@
+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, padding } 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 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>
+        </Box>
+      </Stack>
+    </FormProvider>
+  );
+}

frontend/dashboard/src/routes/index.tsx

@@ -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 />,
@@ -217,6 +233,39 @@ export default function Router() {
           element: <MasterFormulariumCreate />,
         },
 
+        {
+          path: 'report/appointments',
+          element: <Appointment />,
+        },
+        {
+          path: 'report/appointments/:id',
+          element: <AppointmentCreate />,
+        },
+        {
+          path: 'report/appointments/:id/show',
+          element: <AppointmentShow />,
+        },
+        {
+          path: 'report/appointments/:id/edit',
+          element: <AppointmentCreate />,
+        },
+        {
+          path: 'report/live-chat',
+          element: <Livechat />,
+        },
+        {
+          path: 'report/live-chat/:id',
+          element: <LivechatCreate />,
+        },
+        {
+          path: 'report/live-chat/:id/show',
+          element: <LivechatShow />,
+        },
+        {
+          path: 'report/live-chat/:id/edit',
+          element: <LivechatCreate />,
+        },
+
         {
           path: 'claims',
           element: <Claims />,
@@ -324,7 +373,17 @@ 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 Appointment = Loadable(lazy(() => import('../pages/Report/Appointments/Index')));
+const AppointmentCreate = Loadable(lazy(() => import('../pages/Report/Appointments/Create')));
+const AppointmentShow = Loadable(lazy(() => import('../pages/Report/Appointments/Show')));
+
+const Livechat = Loadable(lazy(() => import('../pages/Report/Livechat/Index')));
+const LivechatCreate = Loadable(lazy(() => import('../pages/Report/Livechat/Create')));
+const LivechatShow = Loadable(lazy(() => import('../pages/Report/Livechat/Show')));
 
 const MasterDrug = Loadable(lazy(() => import('../pages/Master/Drug/Index')));
 

frontend/dashboard/src/utils/getColorPresets.ts

@@ -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];