fixing auth, switching corporate, table member

frontend/client-portal/src/sections/dashboard/DialogClaimSubmitMemberSubmission.tsx

@@ -10,28 +10,37 @@ import {
   Link,
   Switch,
   SwitchProps,
-  FormControlLabel,
+  ButtonGroup,
 } from '@mui/material';
-import { Add as AddIcon } from '@mui/icons-material';
+import { Add as AddIcon, Cancel as CancelIcon } from '@mui/icons-material';
 // components
 import MuiDialog from '../../components/MuiDialog';
 import Iconify from '../../components/Iconify';
 import { FormProvider } from '../../components/hook-form';
 // React
-import { ReactElement, useEffect, useRef, useState } from 'react';
+import { ReactElement, useEffect, useState } from 'react';
 // yup
 import * as Yup from 'yup';
 // form
 import { useForm } from 'react-hook-form';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { LoadingButton } from '@mui/lab';
+import { fSplit } from '../../utils/formatNumber';
 
-// ----------------------------------------------------------------------
-
-type DataContent = {
-  name: string;
+/* ---------------------------------- types --------------------------------- */
+type DataContentType = {
+  id: number;
+  fullName: string;
   memberId: string;
-  saldo: string;
+  limit: {
+    current: number;
+    total: number;
+    percentage: number;
+  };
+  avatar?: {
+    url?: string;
+    title?: string;
+  };
 };
 
 type MuiDialogProps = {
@@ -42,24 +51,43 @@ type MuiDialogProps = {
   openDialog: boolean;
   setOpenDialog: Function;
   content?: ReactElement;
-  data?: DataContent;
+  data: DataContentType;
 };
 
-// ----------------------------------------------------------------------
+type BorderLinearProgressProps = {
+  percentage: number;
+};
 
-const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
-  height: 10,
-  borderRadius: 6,
-  [`&.${linearProgressClasses.colorPrimary}`]: {
-    backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
-  },
-  [`& .${linearProgressClasses.bar}`]: {
+type FormValuesProps = {
+  invoice: '';
+};
+/* -------------------------------------------------------------------------- */
+
+/* --------------------------------- styles --------------------------------- */
+const BorderLinearProgress = styled(LinearProgress)<BorderLinearProgressProps>(
+  ({ theme, percentage }) => ({
+    height: 10,
     borderRadius: 6,
-    background: 'linear-gradient(270deg, #19BBBB 38.42%, #FF9565 76.21%, #FE7253 104.02%)',
-  },
-}));
-
-// ----------------------------------------------------------------------
+    [`&.${linearProgressClasses.colorPrimary}`]: {
+      backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 300 : 800],
+    },
+    [`& .${linearProgressClasses.bar}`]: {
+      borderRadius: 6,
+      background: 'linear-gradient(270deg, #19BBBB 38.42%, #FF9565 76.21%, #FE7253 104.02%)',
+      '&::before': {
+        content: '""',
+        position: 'absolute',
+        right: 0,
+        top: 0,
+        width: `${100 - percentage}%`,
+        zIndex: 1,
+        bottom: 0,
+        background: '#DFE3E8',
+      },
+    },
+  })
+);
+/* -------------------------------------------------------------------------- */
 
 const DialogClaimSubmitMemberSubmission = ({
   title,
@@ -67,64 +95,74 @@ const DialogClaimSubmitMemberSubmission = ({
   setOpenDialog,
   data,
 }: MuiDialogProps) => {
-  /* --------------------------------- Search --------------------------------- */
-
-  const searchInput = useRef<HTMLInputElement>(null);
-  const [searchText, setSearchText] = useState('');
-
-  const handleSearchChange = (event: any) => {
-    const newSearchText = event.target.value ?? '';
-    setSearchText(newSearchText);
-  };
-
-  /* -------------------------------------------------------------------------- */
-
   /* ---------------------------- Get Current Date ---------------------------- */
-
   const current = new Date();
   const date = `${current.getDate()} / ${current.getMonth() + 1} / ${current.getFullYear()}`;
+  /* -------------------------------------------------------------------------- */
 
+  /* ------------------------------- file input ------------------------------- */
+  // const [multipleImages, setMultipleImages] = useState([]);
+
+  // Functions to preview multiple images
+  // const changeMultipleFiles = (e) => {
+  //   if (e.target.files) {
+  //     const imageArray = Array.from(e.target.files).map((file) => URL.createObjectURL(file));
+  //     setMultipleImages((prevImages) => prevImages.concat(imageArray));
+  //   }
+  // };
+
+  // const render = (data) => {
+  //   data.map((image) => {
+  //     <Typography key={image}>{image}</Typography>;
+  //   });
+  // };
+
+  // const FileForm = (props: any) => (
+  //   <input
+  //     type="file"
+  //     multiple
+  //     {...register('invoice', { required: true })}
+  //     onChange={changeMultipleFiles}
+  //   />
+  // );
   /* -------------------------------------------------------------------------- */
 
   /* ------------------------------- Form Submit ------------------------------ */
-
-  type FormValuesProps = {
-    topup: string;
-  };
-
-  const TopUpSchema = Yup.object().shape({
-    topup: Yup.string(),
+  const ClaimSubmitSchema = Yup.object().shape({
+    invoice: Yup.mixed()
+      .required('You need to provide a file')
+      // @ts-ignore
+      .test('fileSize', 'The file is too large', (value) => {
+        for (let index = 0; index < value.length; index++) {
+          return value ? value[index].size <= 2000000 : false;
+        }
+      }),
   });
 
-  const defaultValues = {
-    topup: '',
-  };
-
   const methods = useForm<FormValuesProps>({
-    resolver: yupResolver(TopUpSchema),
-    defaultValues,
+    resolver: yupResolver(ClaimSubmitSchema),
   });
 
   const {
+    register,
     reset,
     handleSubmit,
-    formState: { isSubmitting },
+    formState: { isSubmitting, errors },
   } = methods;
 
-  useEffect(() => {
-    if (openDialog === false) {
-      reset();
-    }
-  }, [openDialog, reset]);
+  // const {
+  //   register,
+  //   reset,
+  //   handleSubmit,
+  //   formState: { isSubmitting },
+  // } = useForm({ resolver: yupResolver(ClaimSubmitSchema) });
 
-  const onSubmit = async (data: FormValuesProps) => {
-    reset();
+  const onSubmit = ({ invoice }: FormValuesProps) => {
+    // console.log(invoice);
   };
-
   /* -------------------------------------------------------------------------- */
 
   /* ---------------------------- Ios Switch Style ---------------------------- */
-
   const IosSwitch = styled((props: SwitchProps) => (
     <Switch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
   ))(({ theme }) => ({
@@ -171,9 +209,14 @@ const DialogClaimSubmitMemberSubmission = ({
       }),
     },
   }));
-
   /* -------------------------------------------------------------------------- */
 
+  useEffect(() => {
+    if (openDialog === false) {
+      reset();
+    }
+  }, [openDialog, reset]);
+
   const getContent = () => (
     <Stack>
       <Stack direction="row" justifyContent="space-between" alignItems="center" paddingY={1}>
@@ -193,7 +236,7 @@ const DialogClaimSubmitMemberSubmission = ({
             style={{ borderRadius: '50%' }}
           />
           <Stack sx={{ flex: '45%' }}>
-            <Typography variant="subtitle1">{data && data.name}</Typography>
+            <Typography variant="subtitle1">{data && data.fullName}</Typography>
             <Typography color="#637381" variant="body2" sx={{ fontWeight: 500 }}>
               Member ID : {data && data.memberId}
             </Typography>
@@ -206,15 +249,19 @@ const DialogClaimSubmitMemberSubmission = ({
             <Typography color="#0A0A0A" variant="caption">
               Total Limit
             </Typography>
-            <Link variant="caption" textAlign="center" href="">
+            <Link variant="caption" textAlign="center" href="#">
               Details Benefits <Iconify icon="ic:round-chevron-right" />
             </Link>
           </Stack>
-          <BorderLinearProgress variant="determinate" value={100} />
+          <BorderLinearProgress
+            variant="determinate"
+            value={100}
+            percentage={data && data.limit ? data.limit.percentage : 100}
+          />
           <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
-            {data && data.saldo} /{' '}
+            {fSplit(data && data.limit ? data.limit.current : 0)} /{' '}
             <Typography variant="body2" color="#757575" component="span">
-              10.000.000
+              {fSplit(data && data.limit ? data.limit.total : 0)}
             </Typography>
           </Typography>
         </Stack>
@@ -228,20 +275,11 @@ const DialogClaimSubmitMemberSubmission = ({
               Real invoice required
             </Typography>
           </Stack>
-          <Card>
-            <Button
-              variant="outlined"
-              startIcon={<AddIcon />}
-              component="label"
-              sx={{ border: 'none', paddingY: 2, width: '100%', ':hover': { border: 'none' } }}
-            >
-              Add Invoice
-              <input name="invoice" hidden accept="image/*" multiple type="file" />
-            </Button>
-          </Card>
+          <input {...register('invoice')} type="file" />
+          {errors.invoice && errors.invoice.message ? <p>{errors.invoice.message}</p> : ''}
         </Stack>
         {/* Prescription */}
-        <Stack marginTop={2} spacing={1}>
+        {/* <Stack marginTop={2} spacing={1}>
           <Stack direction="row" justifyContent="space-between" alignItems="center">
             <Stack>
               <Typography variant="subtitle2">
@@ -268,20 +306,10 @@ const DialogClaimSubmitMemberSubmission = ({
               </Typography>
             </Stack>
           </Stack>
-          <Card>
-            <Button
-              variant="outlined"
-              startIcon={<AddIcon />}
-              component="label"
-              sx={{ border: 'none', paddingY: 2, width: '100%', ':hover': { border: 'none' } }}
-            >
-              Add Prescription
-              <input name="invoice" hidden accept="image/*" multiple type="file" />
-            </Button>
-          </Card>
-        </Stack>
+          <ImportForm label="Add Prescription" />
+        </Stack> */}
         {/* Laboratory */}
-        <Stack marginTop={2} spacing={1}>
+        {/* <Stack marginTop={2} spacing={1}>
           <Stack direction="row" justifyContent="space-between" alignItems="center">
             <Stack>
               <Typography variant="subtitle2">
@@ -308,18 +336,9 @@ const DialogClaimSubmitMemberSubmission = ({
               </Typography>
             </Stack>
           </Stack>
-          <Card>
-            <Button
-              variant="outlined"
-              startIcon={<AddIcon />}
-              component="label"
-              sx={{ border: 'none', paddingY: 2, width: '100%', ':hover': { border: 'none' } }}
-            >
-              Add Result
-              <input name="invoice" hidden accept="image/*" multiple type="file" />
-            </Button>
-          </Card>
-        </Stack>
+          <ImportForm label="Add Result" />
+        </Stack> */}
+        {/* Submit */}
         <Stack marginTop={1}>
           <LoadingButton
             fullWidth