aso/frontend/client-portal/src/sections/dashboard/CardBalance.tsx

// @mui
import { styled } from '@mui/material/styles';
import {
  Button,
  Card,
  Typography,
  LinearProgress,
  linearProgressClasses,
  Stack,
} from '@mui/material';
// components
import Iconify from '../../components/Iconify';
// React
import { useState } from 'react';
// utils
import { fCurrency, fSplit } from '../../utils/formatNumber';
/* -------------------------------- sections -------------------------------- */
import DialogTopUpLimit from './DialogTopUpLimit';
import DialogClaimSubmitMember from './DialogClaimSubmitMember';

/* ---------------------------------- types --------------------------------- */

type CardBalanceProps = {
  data: {
    myLimit: {
      balance: number;
      total: number;
      percentage: number;
    };
    lockLimit: {
      balance: number;
      percentage: number;
    };
  };
};

/* -------------------------------------------------------------------------- */

/* --------------------------------- styled --------------------------------- */

const RootBalanceStyle = styled(Card)(({ theme }) => ({
  boxShadow: 'none',
  padding: theme.spacing(3),
  color: 'black',
  backgroundColor: theme.palette.grey[200],
  maxHeight: '240px',
}));

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,
    backgroundColor: theme.palette.primary.main,
  },
}));

/* -------------------------------------------------------------------------- */

export default function CardBalance(props: CardBalanceProps) {
  const [openDialog, setOpenDialog] = useState(false);
  const [dialogTitle, setDialogTitle] = useState('');
  const [isDialog, setIsDialog] = useState('');

  const { myLimit, lockLimit } = props.data;

  const clickHandler = (isDialog: string) => {
    switch (isDialog) {
      case 'submitClaim':
        setDialogTitle('Add Claim');
        setIsDialog(isDialog);
        setOpenDialog(true);
        break;
      case 'topUpLimit':
        setDialogTitle('Top Up Limit');
        setIsDialog(isDialog);
        setOpenDialog(true);
        break;

      default:
        break;
    }
  };

  return (
    <RootBalanceStyle>
      <>
        <Stack direction="row" justifyContent="space-between" sx={{ mb: 1 }}>
          <div>
            <Typography variant="body2" component="span" sx={{ opacity: 0.72 }}>
              Total Limit
            </Typography>
            <Typography sx={{ typography: 'body2' }}>
              {fCurrency(myLimit ? myLimit.balance : 0)}
            </Typography>
            <Typography sx={{ typography: 'caption', color: '#919EAB' }}>
              / {fSplit(myLimit ? myLimit.total : 0)}
            </Typography>
          </div>

          <Stack direction="row" alignItems="center" justifyContent="center">
            <Typography variant="h5" sx={{ ml: 0.5 }}>
              {myLimit ? myLimit.percentage : 0}%
            </Typography>
          </Stack>
        </Stack>

        <BorderLinearProgress
          variant="determinate"
          value={myLimit ? myLimit.percentage : 0}
          sx={{ mb: 1 }}
        />

        <Stack sx={{ backgroundColor: '#B2E8E8', paddingY: 1, paddingX: 1.5, mb: 2 }}>
          <Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
            <Iconify
              icon="bxs:lock-alt"
              width={12}
              height={13}
              sx={{ color: '#424242', marginRight: '6px' }}
            />
            <Typography variant="caption" component="span">
              Lock Fund ( {lockLimit ? lockLimit.percentage : 0}% )
            </Typography>
          </Typography>
          <Typography sx={{ typography: 'caption', color: '#637381' }}>
            {fSplit(lockLimit ? lockLimit.balance : 0)} / {fSplit(myLimit ? myLimit.total : 0)}
          </Typography>
        </Stack>

        <Stack direction="row" spacing={2}>
          <Button
            variant="outlined"
            startIcon={<Iconify icon="bi:clipboard-check-fill" />}
            fullWidth={true}
            onClick={() => clickHandler('submitClaim')}
          >
            Submit Claim
          </Button>
          <Button
            variant="contained"
            startIcon={<Iconify icon="heroicons-solid:cash" />}
            fullWidth={true}
            onClick={() => clickHandler('topUpLimit')}
          >
            Top Up
          </Button>
        </Stack>
      </>

      {isDialog === 'submitClaim' && (
        <DialogClaimSubmitMember
          openDialog={openDialog}
          setOpenDialog={setOpenDialog}
          title={{ name: dialogTitle }}
        />
      )}

      {isDialog === 'topUpLimit' && (
        <DialogTopUpLimit
          openDialog={openDialog}
          setOpenDialog={setOpenDialog}
          title={{ name: dialogTitle, icon: 'heroicons-solid:cash' }}
        />
      )}
    </RootBalanceStyle>
  );
}