aso/frontend/hospital-portal/src/sections/dashboard/CardSearchMember.tsx

// @mui
import { styled } from '@mui/material/styles';
import {
  Button,
  Card,
  Typography,
  Link,
  Divider,
  Stack,
  TextField,
  Grid,
  InputAdornment,
} from '@mui/material';
import { ChevronRight } from '@mui/icons-material';
// React
import React, { useContext, useState } from 'react';
import { LoadingButton } from '@mui/lab';
import Iconify from '@/components/Iconify';
import { DatePicker, LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { fPostFormat } from '@/utils/formatTime';
import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
import DialogBenefit from './DiaglogBenefit';
import MuiDialog from '@/components/MuiDialog';
import axios from '@/utils/axios';
import { useSnackbar } from 'notistack';
import DialogMember from './DialogMember';
import { LanguageContext } from '@/contexts/LanguageContext';

// ----------------------------------------------------------------------

const RootNotificationStyle = styled(Card)(({ theme }) => ({
  boxShadow: 'none',
  padding: '1rem 0.5rem',
  color: 'black',
  backgroundColor: theme.palette.grey[200],
  // maxHeight: '240px',
}));

const ItemNotificationStyle = styled(Card)(({ theme }) => ({
  boxShadow: 'none',
  padding: theme.spacing(1),
  borderRadius: 0.5,
  color: 'black',
}));

// ----------------------------------------------------------------------

export default function CardSearchMember(handleSubmitSuccess:()=> void) {
  const { localeData }: any = useContext(LanguageContext);
  const {enqueueSnackbar} = useSnackbar();

  const [noPolis, setNoPolis] = useState('');
  const [birthDate, setBirthDate] = useState(null);
  const [loadingBenefit, setLoadingBenefit] = useState(false);
  const [loadingClaim, setLoadingClaim] = useState(false);
  const [openDialogBenefit, setOpenDialogBenefit] = useState(false);
  const [openDialogClaim, setOpenDialogClaim] = useState(false);
  const [currentMember, setCurrentMember] = useState(null);
  const [nameMember, setNameMember] = useState('');
  
  function handleSearchMember() {
    setLoadingBenefit(true)

    axios.post('/search-member', { 
      no_polis: noPolis, 
      birth_date: birthDate ? fPostFormat(birthDate, 'yyyy-MM-dd') : null
    })
    .then((response) => {
      setOpenDialogBenefit(true)
      setCurrentMember(response.data.data)
      setNameMember(response.data.data.members.name);
    })
    .catch(({response}) => {
      enqueueSnackbar(response.data.errors ? response.data.errors[0] : (response.data ? response.data.meta.message : 'Opps, Something went Wrong!'), {variant : "error"})
    })
    .then(() => {
      setLoadingBenefit(false)
    });
  }

  return (
    <div>
      <RootNotificationStyle sx={{ p: 2, height: 'auto' }}>
        <Stack
          direction="row"
          justifyContent="space-between"
          alignItems="center"
          sx={{ paddingBottom: 2, paddingTop: 1 }}
        >
           <Typography
              variant="body2"
              component="span"
              sx={{ display: 'flex', alignItems: 'center' }}
            >
              {localeData.txtCardSearchMember1}
            </Typography>
        </Stack>
        <Stack spacing={2} direction="row" justifyContent="space-between">
          <TextField
            variant="outlined"
            label={localeData.txtCardSearchMember4}
            value={noPolis}
            onChange={(event) => {
            setNoPolis(event.target.value)
            }}
            sx={{width:'40%'}}
            required
          />

          <LocalizationProvider dateAdapter={AdapterDateFns}>
            <DatePicker
              label={localeData.txtCardSearchMember3}
              value={birthDate}
              onChange={(newValue:any) => {
                setBirthDate(  (newValue));
              }}
              inputFormat="dd-MM-yyyy"
              renderInput={(params) => <TextField sx={{width:'40%'}} {...params} required/>}
            />
          </LocalizationProvider>

          <LoadingButton
            sx={{
              backgroundColor: '#19BBBB',
              p: 1,
              width: '20%',
              color: '#FFFF'
            }}
            loading={loadingBenefit}
            onClick={() => {
              handleSearchMember()
            }}
          >
            <Iconify icon="eva:search-fill" marginRight={0.75} sx={{width: '24px', height: '24px'}} />
            {localeData.txtCardSearchMember2}
          </LoadingButton>
        </Stack>
      </RootNotificationStyle>
{/* 
      <DialogBenefit open={openDialogBenefit} setOpen={setOpenDialogBenefit}></DialogBenefit> */}
      <MuiDialog
          title={{name: nameMember}}
          openDialog={openDialogBenefit}
          setOpenDialog={setOpenDialogBenefit}
          content={DialogMember(currentMember, () => {setOpenDialogBenefit(false); handleSubmitSuccess()})}
          maxWidth="sm"
        />
    </div>
  );
}