comitting

2022-11-26 22:30:11 +07:00
parent c3d953322d
commit 52b9dd49c8
30 changed files with 5767 additions and 3786 deletions
--- a/frontend/client-portal/src/sections/dashboard/CardBalance.tsx
+++ b/frontend/client-portal/src/sections/dashboard/CardBalance.tsx
@@ -16,17 +16,18 @@ import { useState } from 'react';
 import { fCurrency } from '../../utils/formatNumber';
 // <sections></sections>
 import DialogTopUpLimit from './DialogTopUpLimit';
+import DialogClaimSubmitMember from './DialogClaimSubmitMember';

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

-type DataContent = {
-  info: string;
-  date: string;
-  time: string;
+type DataMembers = {
+  name: string;
+  memberId: string;
+  saldo: string;
 };

 type NotificationProps = {
-  data?: DataContent[];
+  data?: { members: DataMembers[] };
 };

 // ----------------------------------------------------------------------
@@ -67,7 +68,7 @@ export default function CardBalance({ data }: NotificationProps) {
  const clickHandler = (isDialog: string) => {
    switch (isDialog) {
      case 'submitClaim':
-        setDialogTitle('Notification');
+        setDialogTitle('Add Claim');
        setIsDialog(isDialog);
        setOpenDialog(true);
        break;
@@ -140,14 +141,14 @@ export default function CardBalance({ data }: NotificationProps) {
        </Stack>
      </>

-      {/* {isDialog === 'submitClaim' && (
-        <DialogNotification
+      {isDialog === 'submitClaim' && (
+        <DialogClaimSubmitMember
          openDialog={openDialog}
          setOpenDialog={setOpenDialog}
-          title={dialogTitle}
-          data={data}
+          title={{ name: dialogTitle }}
+          data={data?.members}
        />
-      )} */}
+      )}

      {isDialog === 'topUpLimit' && (
        <DialogTopUpLimit
--- a/frontend/client-portal/src/sections/dashboard/DialogClaimSubmitMember.tsx
+++ b/frontend/client-portal/src/sections/dashboard/DialogClaimSubmitMember.tsx
@@ -0,0 +1,191 @@
+// @mui
+import { styled } from '@mui/material/styles';
+import {
+  Typography,
+  LinearProgress,
+  linearProgressClasses,
+  Stack,
+  TextField,
+  InputAdornment,
+  Card,
+  IconButton,
+} from '@mui/material';
+import { Search as SearchIcon } from '@mui/icons-material';
+// components
+import MuiDialog from '../../components/MuiDialog';
+import Iconify from '../../components/Iconify';
+// React
+import { ReactElement, useRef, useState } from 'react';
+import DialogClaimSubmitMemberSubmission from './DialogClaimSubmitMemberSubmission';
+
+// ----------------------------------------------------------------------
+
+type DataContent = {
+  name: string;
+  memberId: string;
+  saldo: string;
+};
+
+type MuiDialogProps = {
+  title?: {
+    name?: string;
+    icon?: string;
+  };
+  openDialog: boolean;
+  setOpenDialog: Function;
+  content?: ReactElement;
+  data?: DataContent[];
+};
+
+// ----------------------------------------------------------------------
+
+function createData(name: string, memberId: string, saldo: string) {
+  return { name, memberId, saldo };
+}
+
+const rows = [
+  createData('Alexandra tjoa tri atmaja kurniadi', '0122122', '10.000.000'),
+  createData('Marina kurniadi', '0122123', '10.000.000'),
+  createData('Tjoa Indri', '0122124', '10.000.000'),
+  createData('Atmaja Tirta', '0122125', '10.000.000'),
+  createData('Alexandra kurniadi', '0122126', '10.000.000'),
+];
+
+// ----------------------------------------------------------------------
+
+const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
+  height: 10,
+  borderRadius: 6,
+  [`&.${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%)',
+  },
+}));
+
+// ----------------------------------------------------------------------
+
+const DialogClaimSubmitMember = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
+  /* --------------------------------- Search --------------------------------- */
+
+  const searchInput = useRef<HTMLInputElement>(null);
+  const [searchText, setSearchText] = useState('');
+  const [dataMemberClaim, setDataMemberClaim] = useState({
+    name: '',
+    memberId: '',
+    saldo: '',
+  });
+
+  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()}`;
+
+  /* -------------------------------------------------------------------------- */
+
+  /* ------------------------------ Icon On Click ----------------------------- */
+
+  const [openDialogClaimMember, setOpenDialogMemberClaim] = useState(false);
+
+  const clickHandler = (name: string, memberId: string, saldo: string) => {
+    setDataMemberClaim({ name: name, memberId: memberId, saldo: saldo });
+    setOpenDialogMemberClaim(true);
+  };
+
+  /* -------------------------------------------------------------------------- */
+
+  const getContent = () => (
+    <Stack>
+      <Stack direction="row" justifyContent="space-between" alignItems="center" paddingY={1}>
+        <Typography variant="subtitle1">Pilih Karyawan</Typography>
+        <Stack sx={{ color: '#757575' }}>
+          <Typography variant="caption">Submission date</Typography>
+          <Typography variant="caption">{date}</Typography>
+        </Stack>
+      </Stack>
+      <TextField
+        id="search-input"
+        ref={searchInput}
+        variant="outlined"
+        fullWidth
+        onChange={handleSearchChange}
+        value={searchText}
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <SearchIcon />
+            </InputAdornment>
+          ),
+        }}
+        placeholder="Cari nama atau member ID disini..."
+        sx={{ marginTop: 2 }}
+      />
+      <Stack marginTop={2} spacing={1}>
+        {rows.map((row, key) => (
+          <Card key={key} sx={{ paddingY: 1, paddingX: 2 }}>
+            <Stack direction="row" alignItems="center" spacing={2}>
+              <img
+                width={40}
+                height={40}
+                src="/images/member.png"
+                alt="user-profile"
+                style={{ borderRadius: '50%' }}
+              />
+              <Stack sx={{ flex: '45%' }}>
+                <Typography variant="subtitle1">{row.name}</Typography>
+                <Typography color="#637381" variant="body2" sx={{ fontWeight: 500 }}>
+                  Member ID : {row.memberId}
+                </Typography>
+              </Stack>
+              <Stack spacing={1} paddingY={1}>
+                <Typography color="#0A0A0A" variant="caption">
+                  Total Limit
+                </Typography>
+                <BorderLinearProgress variant="determinate" value={100} />
+                <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+                  {row.saldo} /{' '}
+                  <Typography variant="body2" color="#757575" component="span">
+                    10.000.000
+                  </Typography>
+                </Typography>
+              </Stack>
+              <IconButton onClick={() => clickHandler(row.name, row.memberId, row.saldo)}>
+                <Iconify icon="ic:round-chevron-right" />
+              </IconButton>
+            </Stack>
+          </Card>
+        ))}
+      </Stack>
+    </Stack>
+  );
+
+  return (
+    <>
+      <MuiDialog
+        title={title}
+        openDialog={openDialog}
+        setOpenDialog={setOpenDialog}
+        content={getContent()}
+        maxWidth="sm"
+      />
+
+      <DialogClaimSubmitMemberSubmission
+        title={title}
+        openDialog={openDialogClaimMember}
+        setOpenDialog={setOpenDialogMemberClaim}
+        data={dataMemberClaim}
+      />
+    </>
+  );
+};
+
+export default DialogClaimSubmitMember;
--- a/frontend/client-portal/src/sections/dashboard/DialogClaimSubmitMemberSubmission.tsx
+++ b/frontend/client-portal/src/sections/dashboard/DialogClaimSubmitMemberSubmission.tsx
@@ -0,0 +1,352 @@
+// @mui
+import { styled } from '@mui/material/styles';
+import {
+  Typography,
+  LinearProgress,
+  linearProgressClasses,
+  Stack,
+  Card,
+  Button,
+  Link,
+  Switch,
+  SwitchProps,
+  FormControlLabel,
+} from '@mui/material';
+import { Add as AddIcon } 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';
+// yup
+import * as Yup from 'yup';
+// form
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { LoadingButton } from '@mui/lab';
+
+// ----------------------------------------------------------------------
+
+type DataContent = {
+  name: string;
+  memberId: string;
+  saldo: string;
+};
+
+type MuiDialogProps = {
+  title?: {
+    name?: string;
+    icon?: string;
+  };
+  openDialog: boolean;
+  setOpenDialog: Function;
+  content?: ReactElement;
+  data?: DataContent;
+};
+
+// ----------------------------------------------------------------------
+
+const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
+  height: 10,
+  borderRadius: 6,
+  [`&.${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%)',
+  },
+}));
+
+// ----------------------------------------------------------------------
+
+const DialogClaimSubmitMemberSubmission = ({
+  title,
+  openDialog,
+  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()}`;
+
+  /* -------------------------------------------------------------------------- */
+
+  /* ------------------------------- Form Submit ------------------------------ */
+
+  type FormValuesProps = {
+    topup: string;
+  };
+
+  const TopUpSchema = Yup.object().shape({
+    topup: Yup.string(),
+  });
+
+  const defaultValues = {
+    topup: '',
+  };
+
+  const methods = useForm<FormValuesProps>({
+    resolver: yupResolver(TopUpSchema),
+    defaultValues,
+  });
+
+  const {
+    reset,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+  useEffect(() => {
+    if (openDialog === false) {
+      reset();
+    }
+  }, [openDialog, reset]);
+
+  const onSubmit = async (data: FormValuesProps) => {
+    reset();
+  };
+
+  /* -------------------------------------------------------------------------- */
+
+  /* ---------------------------- Ios Switch Style ---------------------------- */
+
+  const IosSwitch = styled((props: SwitchProps) => (
+    <Switch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
+  ))(({ theme }) => ({
+    width: 28,
+    height: 16,
+    padding: 0,
+    marginRight: '10px',
+    '& .MuiSwitch-switchBase': {
+      padding: 0,
+      margin: 2,
+      transitionDuration: '300ms',
+      '&.Mui-checked': {
+        transform: 'translateX(12px)',
+        color: '#fff',
+        '& + .MuiSwitch-track': {
+          opacity: 1,
+          border: 0,
+        },
+        '&.Mui-disabled + .MuiSwitch-track': {
+          opacity: 0.5,
+        },
+      },
+      '&.Mui-focusVisible .MuiSwitch-thumb': {
+        color: '#33cf4d',
+        border: '6px solid #fff',
+      },
+      '&.Mui-disabled .MuiSwitch-thumb': {
+        color: theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[600],
+      },
+      '&.Mui-disabled + .MuiSwitch-track': {
+        opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
+      },
+    },
+    '& .MuiSwitch-thumb': {
+      boxSizing: 'border-box',
+      width: 12,
+      height: 12,
+    },
+    '& .MuiSwitch-track': {
+      borderRadius: 26 / 2,
+      opacity: 1,
+      transition: theme.transitions.create(['background-color'], {
+        duration: 500,
+      }),
+    },
+  }));
+
+  /* -------------------------------------------------------------------------- */
+
+  const getContent = () => (
+    <Stack>
+      <Stack direction="row" justifyContent="space-between" alignItems="center" paddingY={1}>
+        <Typography variant="subtitle1">Claim Submission</Typography>
+        <Stack sx={{ color: '#757575' }}>
+          <Typography variant="caption">Submission date</Typography>
+          <Typography variant="caption">{date}</Typography>
+        </Stack>
+      </Stack>
+      <Card sx={{ paddingY: 1, paddingX: 2, marginTop: 2, backgroundColor: '#F4F6F8' }}>
+        <Stack direction="row" alignItems="center" spacing={2}>
+          <img
+            width={40}
+            height={40}
+            src="/images/member.png"
+            alt="user-profile"
+            style={{ borderRadius: '50%' }}
+          />
+          <Stack sx={{ flex: '45%' }}>
+            <Typography variant="subtitle1">{data && data.name}</Typography>
+            <Typography color="#637381" variant="body2" sx={{ fontWeight: 500 }}>
+              Member ID : {data && data.memberId}
+            </Typography>
+          </Stack>
+        </Stack>
+      </Card>
+      <Card sx={{ paddingY: 1, paddingX: 2, marginTop: 2 }}>
+        <Stack spacing={1} paddingY={1}>
+          <Stack direction="row" justifyContent="space-between">
+            <Typography color="#0A0A0A" variant="caption">
+              Total Limit
+            </Typography>
+            <Link variant="caption" textAlign="center" href="">
+              Details Benefits <Iconify icon="ic:round-chevron-right" />
+            </Link>
+          </Stack>
+          <BorderLinearProgress variant="determinate" value={100} />
+          <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
+            {data && data.saldo} /{' '}
+            <Typography variant="body2" color="#757575" component="span">
+              10.000.000
+            </Typography>
+          </Typography>
+        </Stack>
+      </Card>
+      <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+        {/* Invoice */}
+        <Stack marginTop={2} spacing={1}>
+          <Stack>
+            <Typography variant="subtitle2">Real Invoice</Typography>
+            <Typography color="#9E9E9E" variant="caption">
+              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>
+        </Stack>
+        {/* Prescription */}
+        <Stack marginTop={2} spacing={1}>
+          <Stack direction="row" justifyContent="space-between" alignItems="center">
+            <Stack>
+              <Typography variant="subtitle2">
+                Doctor's Prescription and Another Documents
+              </Typography>
+              <Typography color="#9E9E9E" variant="caption">
+                Doctor's Prescription required
+              </Typography>
+            </Stack>
+            <Stack
+              direction="row"
+              padding={1}
+              alignItems="center"
+              sx={{
+                backgroundColor: 'white',
+                border: '1px solid #E0E0E0',
+                borderRadius: '6px',
+                height: 32,
+              }}
+            >
+              <IosSwitch defaultChecked />
+              <Typography color="#404040" variant="body2">
+                Yes
+              </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>
+        {/* Laboratory */}
+        <Stack marginTop={2} spacing={1}>
+          <Stack direction="row" justifyContent="space-between" alignItems="center">
+            <Stack>
+              <Typography variant="subtitle2">
+                Doctor's Prescription and Another Documents
+              </Typography>
+              <Typography color="#9E9E9E" variant="caption">
+                Doctor's Prescription required
+              </Typography>
+            </Stack>
+            <Stack
+              direction="row"
+              padding={1}
+              alignItems="center"
+              sx={{
+                backgroundColor: 'white',
+                border: '1px solid #E0E0E0',
+                borderRadius: '6px',
+                height: 32,
+              }}
+            >
+              <IosSwitch defaultChecked />
+              <Typography color="#404040" variant="body2">
+                Yes
+              </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>
+        <Stack marginTop={1}>
+          <LoadingButton
+            fullWidth
+            size="large"
+            type="submit"
+            variant="contained"
+            loading={isSubmitting}
+            sx={{ marginTop: 2 }}
+          >
+            Ajukan Permintaan
+          </LoadingButton>
+        </Stack>
+      </FormProvider>
+    </Stack>
+  );
+
+  return (
+    <>
+      <MuiDialog
+        title={title}
+        openDialog={openDialog}
+        setOpenDialog={setOpenDialog}
+        content={getContent()}
+        maxWidth="sm"
+      />
+    </>
+  );
+};
+
+export default DialogClaimSubmitMemberSubmission;
--- a/frontend/client-portal/src/sections/dashboard/DialogTopUpLimit.tsx
+++ b/frontend/client-portal/src/sections/dashboard/DialogTopUpLimit.tsx
@@ -52,7 +52,7 @@ const testData = {
  totalMembers: 50,
  totalCases: 100,
  totalPersen: 75,
-  myLimit: '375.000.000',
+  myLimit: 375000000,
  totalLimit: 500000000,
 };

@@ -75,14 +75,14 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
  const [isDisabledButton, setIsDisabledButton] = useState(true);

  const TopUpSchema = Yup.object().shape({
-    topup: Yup.string()
-      /* 
-    // @ts-ignore */
-      .test('limit', 'Maximum Top Up Rp. 5.000.000', (val) => (val > 5000000 ? false : true)),
+    topup: Yup.number(),
+    //   /*
+    // // @ts-ignore */
+    //   .test('limit', 'Maximum Top Up Rp. 5.000.000', (val) => (val > 5000000 ? false : true)),
  });

  const defaultValues = {
-    topup: '0',
+    topup: 0,
  };

  const methods = useForm<FormValuesProps>({
@@ -109,7 +109,8 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP

  const onCheckHandler = (data: FormValuesProps) => {
    setIsDisabledCheckbox(!isDisabledCheckbox);
-    setValue('topup', '5000000');
+    setIsDisabledButton(false);
+    setValue('topup', testData.totalLimit - testData.myLimit);
  };

  const onTopupHandler = (value: string) => {
@@ -175,7 +176,7 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
          <FormControlLabel
            sx={{ typography: 'caption' }}
            control={<Checkbox />}
-            label={'Max ' + fCurrency(5000000)}
+            label={'Max ' + fCurrency(testData.totalLimit - testData.myLimit)}
            onChange={handleSubmit(onCheckHandler)}
          />

@@ -188,7 +189,7 @@ const DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogP
            sx={{ marginTop: 2 }}
            disabled={isDisabledButton}
          >
-            Login
+            Ajukan Permintaan
          </LoadingButton>
        </FormProvider>
      </Stack>