dialog component, dash & service-monitoring slice

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

@@ -0,0 +1,209 @@
+// @mui
+import { styled } from '@mui/material/styles';
+import {
+  Typography,
+  LinearProgress,
+  linearProgressClasses,
+  Stack,
+  FormControlLabel,
+} from '@mui/material';
+import { LoadingButton } from '@mui/lab';
+import Checkbox from '@mui/material/Checkbox';
+// components
+import MuiDialog from '../../components/MuiDialog';
+import { FormProvider, RHFTextField } from '../../components/hook-form';
+// React
+import { ReactElement, useEffect, useState } from 'react';
+import { fCurrency } from '../../utils/formatNumber';
+// yup
+import * as Yup from 'yup';
+// form
+import { useForm } from 'react-hook-form';
+import { yupResolver } from '@hookform/resolvers/yup';
+
+// ----------------------------------------------------------------------
+
+type DataContent = {
+  info: string;
+  date: string;
+  time: string;
+};
+
+type MuiDialogProps = {
+  title?: {
+    name?: string;
+    icon?: string;
+  };
+  openDialog: boolean;
+  setOpenDialog: Function;
+  content?: ReactElement;
+  data?: DataContent[];
+};
+
+type FormValuesProps = {
+  topup: string;
+};
+
+// ----------------------------------------------------------------------
+
+const testData = {
+  companyName: 'PT. Aman Mineral',
+  policyNumber: 12345678,
+  totalMembers: 50,
+  totalCases: 100,
+  totalPersen: 75,
+  myLimit: '375.000.000',
+  totalLimit: 500000000,
+};
+
+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 DialogTopUpLimit = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => {
+  const [isDisabledCheckbox, setIsDisabledCheckbox] = useState(false);
+  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)),
+  });
+
+  const defaultValues = {
+    topup: '0',
+  };
+
+  const methods = useForm<FormValuesProps>({
+    resolver: yupResolver(TopUpSchema),
+    defaultValues,
+  });
+
+  const {
+    setValue,
+    reset,
+    handleSubmit,
+    formState: { isSubmitting },
+  } = methods;
+
+  useEffect(() => {
+    if (openDialog === false) {
+      reset();
+    }
+  }, [openDialog, reset]);
+
+  const onSubmit = async (data: FormValuesProps) => {
+    reset();
+  };
+
+  const onCheckHandler = (data: FormValuesProps) => {
+    setIsDisabledCheckbox(!isDisabledCheckbox);
+    setValue('topup', '5000000');
+  };
+
+  const onTopupHandler = (value: string) => {
+    value === '0' || value === '' ? setIsDisabledButton(true) : setIsDisabledButton(false);
+    setValue('topup', value);
+  };
+
+  const getContent = () => (
+    <Stack spacing={1} marginTop={2}>
+      <Stack>
+        <Typography variant="caption" color="#637381">
+          Company Name
+        </Typography>
+        <Typography variant="body2">{testData.companyName}</Typography>
+      </Stack>
+      <Stack>
+        <Typography variant="caption" color="#637381">
+          Policy Number
+        </Typography>
+        <Typography variant="body2">{testData.policyNumber}</Typography>
+      </Stack>
+      <Stack direction="row" spacing={22}>
+        <Stack>
+          <Typography variant="caption" color="#637381">
+            Total Member
+          </Typography>
+          <Typography variant="body2">{testData.totalMembers} Person</Typography>
+        </Stack>
+        <Stack>
+          <Typography variant="caption" color="#637381">
+            Total Cases
+          </Typography>
+          <Typography variant="body2">{testData.totalCases} Cases</Typography>
+        </Stack>
+      </Stack>
+      <Stack spacing={1} sx={{ backgroundColor: '#F4F6F8', borderRadius: 1.5, padding: 2 }}>
+        <Stack direction="row" justifyContent="space-between" alignItems="center">
+          <Stack>
+            <Typography variant="body2">Company Pooled Fund</Typography>
+            <Typography variant="body2">{fCurrency(testData.myLimit)}</Typography>
+            <Typography variant="caption" color="#919EAB">
+              / {testData.totalLimit}
+            </Typography>
+          </Stack>
+          <Stack>
+            <Typography variant="h5">{testData.totalPersen}%</Typography>
+          </Stack>
+        </Stack>
+        <BorderLinearProgress variant="determinate" value={testData.totalPersen} />
+      </Stack>
+      <Stack spacing={2}>
+        <Typography variant="subtitle1" marginTop={3}>
+          Top Up Limit
+        </Typography>
+        <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
+          <RHFTextField
+            name="topup"
+            label="Top Up"
+            type="number"
+            disabled={isDisabledCheckbox}
+            onChange={(e) => onTopupHandler(e.target.value)}
+          />
+          <FormControlLabel
+            sx={{ typography: 'caption' }}
+            control={<Checkbox />}
+            label={'Max ' + fCurrency(5000000)}
+            onChange={handleSubmit(onCheckHandler)}
+          />
+
+          <LoadingButton
+            fullWidth
+            size="large"
+            type="submit"
+            variant="contained"
+            loading={isSubmitting}
+            sx={{ marginTop: 2 }}
+            disabled={isDisabledButton}
+          >
+            Login
+          </LoadingButton>
+        </FormProvider>
+      </Stack>
+    </Stack>
+  );
+
+  return (
+    <MuiDialog
+      title={title}
+      openDialog={openDialog}
+      setOpenDialog={setOpenDialog}
+      content={getContent()}
+      maxWidth="xs"
+    />
+  );
+};
+
+export default DialogTopUpLimit;