dialog component, dash & service-monitoring slice

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

@@ -0,0 +1,161 @@
+// @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 } from '../../utils/formatNumber';
+// <sections></sections>
+import DialogTopUpLimit from './DialogTopUpLimit';
+
+// ----------------------------------------------------------------------
+
+type DataContent = {
+  info: string;
+  date: string;
+  time: string;
+};
+
+type NotificationProps = {
+  data?: DataContent[];
+};
+
+// ----------------------------------------------------------------------
+
+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,
+  },
+}));
+
+// ----------------------------------------------------------------------
+
+const INITIAL = '500.000.000';
+const TOTAL = 375000000;
+const PERCENT = 75;
+
+// ----------------------------------------------------------------------
+
+export default function CardBalance({ data }: NotificationProps) {
+  const [openDialog, setOpenDialog] = useState(false);
+  const [dialogTitle, setDialogTitle] = useState('');
+  const [isDialog, setIsDialog] = useState('');
+
+  const clickHandler = (isDialog: string) => {
+    switch (isDialog) {
+      case 'submitClaim':
+        setDialogTitle('Notification');
+        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(TOTAL)}</Typography>
+            <Typography sx={{ typography: 'caption', color: '#919EAB' }}>/ {INITIAL}</Typography>
+          </div>
+
+          <Stack direction="row" alignItems="center" justifyContent="center">
+            <Typography variant="h5" sx={{ ml: 0.5 }}>
+              {PERCENT}%
+            </Typography>
+          </Stack>
+        </Stack>
+
+        <BorderLinearProgress variant="determinate" value={PERCENT} 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 ( 25% )
+            </Typography>
+          </Typography>
+          <Typography sx={{ typography: 'caption', color: '#637381' }}>
+            125.000.000 / 125.000.000
+          </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' && (
+        <DialogNotification
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          title={dialogTitle}
+          data={data}
+        />
+      )} */}
+
+      {isDialog === 'topUpLimit' && (
+        <DialogTopUpLimit
+          openDialog={openDialog}
+          setOpenDialog={setOpenDialog}
+          title={{ name: dialogTitle, icon: 'heroicons-solid:cash' }}
+        />
+      )}
+    </RootBalanceStyle>
+  );
+}