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

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