tbfajri/aso
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

create api for dashboard client portal

Browse Source
This commit is contained in:
Muhammad Fajar
2022-12-06 18:48:31 +07:00
parent b26ccdd0e6
commit 723c9f1895
6 changed files with 213 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/client-portal/src/sections/dashboard/CardBalance.tsx
View File

@@ -14,23 +14,29 @@ import Iconify from '../../components/Iconify';
import { useState } from 'react';
// utils
import { fCurrency } from '../../utils/formatNumber';
// <sections></sections>
/* -------------------------------- sections -------------------------------- */
import DialogTopUpLimit from './DialogTopUpLimit';
import DialogClaimSubmitMember from './DialogClaimSubmitMember';
// ----------------------------------------------------------------------
/* ---------------------------------- types --------------------------------- */
type DataMembers = {
name: string;
memberId: string;
saldo: string;
type CardBalanceProps = {
data: {
myLimit: {
balance: number;
total: number;
percentage: number;
};
lockLimit: {
balance: number;
percentage: number;
};
};
};
type NotificationProps = {
data?: { members: DataMembers[] };
};
/* -------------------------------------------------------------------------- */
// ----------------------------------------------------------------------
/* --------------------------------- styled --------------------------------- */
const RootBalanceStyle = styled(Card)(({ theme }) => ({
boxShadow: 'none',
@@ -52,19 +58,15 @@ const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
},
}));
// ----------------------------------------------------------------------
/* -------------------------------------------------------------------------- */
const INITIAL = '500.000.000';
const TOTAL = 375000000;
const PERCENT = 75;
// ----------------------------------------------------------------------
export default function CardBalance({ data }: NotificationProps) {
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':
@@ -91,18 +93,26 @@ export default function CardBalance({ data }: NotificationProps) {
<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>
<Typography sx={{ typography: 'body2' }}>
{fCurrency(myLimit ? myLimit.balance : 0)}
</Typography>
<Typography sx={{ typography: 'caption', color: '#919EAB' }}>
/ {myLimit ? myLimit.total : 0}
</Typography>
</div>
<Stack direction="row" alignItems="center" justifyContent="center">
<Typography variant="h5" sx={{ ml: 0.5 }}>
{PERCENT}%
{myLimit ? myLimit.percentage : 0}%
</Typography>
</Stack>
</Stack>
<BorderLinearProgress variant="determinate" value={PERCENT} sx={{ mb: 1 }} />
<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' }}>
@@ -113,11 +123,11 @@ export default function CardBalance({ data }: NotificationProps) {
sx={{ color: '#424242', marginRight: '6px' }}
/>
<Typography variant="caption" component="span">
Lock Fund ( 25% )
Lock Fund ( {lockLimit ? lockLimit.percentage : 0}% )
</Typography>
</Typography>
<Typography sx={{ typography: 'caption', color: '#637381' }}>
125.000.000 / 125.000.000
{lockLimit ? lockLimit.balance : 0}
</Typography>
</Stack>
@@ -146,7 +156,7 @@ export default function CardBalance({ data }: NotificationProps) {
openDialog={openDialog}
setOpenDialog={setOpenDialog}
title={{ name: dialogTitle }}
data={data?.members}
// data={data?.members}
/>
)}