diff --git a/frontend/client-portal/src/@types/table.ts b/frontend/client-portal/src/@types/table.ts index 7b1e9c0d..7f374e76 100644 --- a/frontend/client-portal/src/@types/table.ts +++ b/frontend/client-portal/src/@types/table.ts @@ -107,19 +107,19 @@ export type TableListProps = { handleStatusChange: (event: SelectChangeEvent) => void; }; }; - filterStartDate: { + filterStartDate?: { useFilter: boolean; startDate: string; setStartDate: Dispatch>; handleStartDateChange: (event: FormEvent) => void; }; - filterEndDate: { + filterEndDate?: { useFilter: boolean; endDate: string; setEndDate: Dispatch>; handleEndDateChange: (event: FormEvent) => void; }; - exportReport: { + exportReport?: { useExport: boolean; startDate: string; endDate: string; diff --git a/frontend/client-portal/src/layouts/dashboard/header/AccountPopover.tsx b/frontend/client-portal/src/layouts/dashboard/header/AccountPopover.tsx index 728b85ce..300cc955 100644 --- a/frontend/client-portal/src/layouts/dashboard/header/AccountPopover.tsx +++ b/frontend/client-portal/src/layouts/dashboard/header/AccountPopover.tsx @@ -1,31 +1,30 @@ import { useState } from 'react'; // @mui import { alpha } from '@mui/material/styles'; -import { Box, Divider, Typography, Stack, MenuItem, Avatar } from '@mui/material'; +import { Box, Divider, Typography, MenuItem, Avatar } from '@mui/material'; // components import MenuPopover from '../../../components/MenuPopover'; import { IconButtonAnimate } from '../../../components/animate'; import { useNavigate } from 'react-router-dom'; import useAuth from '../../../hooks/useAuth'; -import useLocalStorage from '../../../hooks/useLocalStorage'; import { enqueueSnackbar } from 'notistack'; // ---------------------------------------------------------------------- -const MENU_OPTIONS = [ - { - label: 'Home', - linkTo: '/', - }, - { - label: 'Profile', - linkTo: '/', - }, - { - label: 'Settings', - linkTo: '/', - }, -]; +// const MENU_OPTIONS = [ +// { +// label: 'Home', +// linkTo: '/', +// }, +// { +// label: 'Profile', +// linkTo: '/', +// }, +// { +// label: 'Settings', +// linkTo: '/', +// }, +// ]; // ---------------------------------------------------------------------- @@ -34,6 +33,8 @@ export default function AccountPopover() { const navigate = useNavigate(); const { logout, user } = useAuth(); + console.log(user); + const handleOpen = (event: React.MouseEvent) => { setOpen(event.currentTarget); }; @@ -67,10 +68,7 @@ export default function AccountPopover() { }), }} > - {user && user.user.avatar_url && ()} + - { user ? user.user.full_name ?? 'Hi, ' : 'Hi, '} + {`Hi, ${user?.user?.full_name || 'User'}`} - { user ? user.user.email : 'Please Wait'} + {user ? user.user.email : 'Please Wait'} diff --git a/frontend/client-portal/src/layouts/dashboard/header/index.tsx b/frontend/client-portal/src/layouts/dashboard/header/index.tsx index ec8fb38d..2c8b0e70 100644 --- a/frontend/client-portal/src/layouts/dashboard/header/index.tsx +++ b/frontend/client-portal/src/layouts/dashboard/header/index.tsx @@ -13,11 +13,7 @@ import Logo from '../../../components/Logo'; import Iconify from '../../../components/Iconify'; import { IconButtonAnimate } from '../../../components/animate'; // -import Searchbar from './Searchbar'; import AccountPopover from './AccountPopover'; -import LanguagePopover from './LanguagePopover'; -import ContactsPopover from './ContactsPopover'; -import NotificationsPopover from './NotificationsPopover'; import CorporatePopover from './CorporatePopover'; // ---------------------------------------------------------------------- @@ -46,11 +42,11 @@ const RootStyle = styled(AppBar, { width: `calc(100% - ${NAVBAR.DASHBOARD_COLLAPSE_WIDTH}px)`, }), ...(isOffset && { - height: HEADER.DASHBOARD_DESKTOP_OFFSET_HEIGHT, + height: HEADER.DASHBOARD_DESKTOP_HEIGHT, }), ...(verticalLayout && { width: '100%', - height: HEADER.DASHBOARD_DESKTOP_OFFSET_HEIGHT, + height: HEADER.DASHBOARD_DESKTOP_HEIGHT, backgroundColor: theme.palette.background.default, }), }, @@ -89,15 +85,15 @@ export default function DashboardHeader({ )} - + {/* */} - - - + {/* */} + {/* */} + {/* */} diff --git a/frontend/client-portal/src/layouts/dashboard/navbar/NavbarAccount.tsx b/frontend/client-portal/src/layouts/dashboard/navbar/NavbarAccount.tsx index 4d19c36e..aad5562c 100644 --- a/frontend/client-portal/src/layouts/dashboard/navbar/NavbarAccount.tsx +++ b/frontend/client-portal/src/layouts/dashboard/navbar/NavbarAccount.tsx @@ -23,10 +23,8 @@ type Props = { }; export default function NavbarAccount({ isCollapse }: Props) { - const { user } = useAuth(); -// console.log('current user is ', user) return ( - {user && user.user.avatar_url && ()} + {user && user.user.avatar_url && ( + + )} - { user ? user.user.full_name ?? 'Hi, ' : 'Hi, '} + {`Hi, ${user?.user?.full_name || 'User'}`} - { user ? user.user.email : 'Please Wait'} + {user ? user.user.email : 'Please Wait'} diff --git a/frontend/client-portal/src/pages/Dashboard/Index.tsx b/frontend/client-portal/src/pages/Dashboard/Index.tsx index 8be8b1de..56963e33 100644 --- a/frontend/client-portal/src/pages/Dashboard/Index.tsx +++ b/frontend/client-portal/src/pages/Dashboard/Index.tsx @@ -24,13 +24,7 @@ import { HeadCell, Order, PaginationTableProps } from '../../@types/table'; import { useLocation, useSearchParams } from 'react-router-dom'; import palette from '../../theme/palette'; import { fSplit } from '../../utils/formatNumber'; - -// const itemList = [ -// { info: 'Mohon lengkapi dokumen Alison Born', date: 'Selasa, 13 Februari 23', time: '09:43 WIB' }, -// { info: 'Mohon lengkapi dokumen Alison Born', date: 'Selasa, 13 Februari 23', time: '09:43 WIB' }, -// { info: 'Mohon lengkapi dokumen Alison Born', date: 'Selasa, 13 Februari 23', time: '09:43 WIB' }, -// { info: 'Mohon lengkapi dokumen Alison Born', date: 'Selasa, 13 Februari 23', time: '09:43 WIB' }, -// ]; +import { closeSnackbar, enqueueSnackbar } from 'notistack'; /* ------------------------------ default data ------------------------------ */ type DataMember = { @@ -175,7 +169,7 @@ export default function Index() { }; const searchs = { - // useSearchs: true, + useSearchs: false, searchText: searchText, setSearchText: setSearchText, handleSearchSubmit: handleSearchSubmit, @@ -257,6 +251,11 @@ export default function Index() { useEffect(() => { (async () => { setIsLoading(true); + const loadNotif = enqueueSnackbar('Data sedang di load, harap tunggu!', { + variant: 'info', + autoHideDuration: null, + anchorOrigin: { horizontal: 'right', vertical: 'bottom' }, + }); const parameters = Object.keys(appliedParams).length !== 0 @@ -343,7 +342,12 @@ export default function Index() { setPage(currentPage); } + closeSnackbar(loadNotif); setIsLoading(false); + enqueueSnackbar('Data sudah di load!', { + variant: 'info', + anchorOrigin: { horizontal: 'right', vertical: 'bottom' }, + }); })(); }, [appliedParams, searchParams, order, orderBy, setSearchParams, corporateValue]); diff --git a/frontend/client-portal/src/sections/claim-submit/CardPolicy.tsx b/frontend/client-portal/src/sections/claim-submit/CardPolicy.tsx index 74a7ea1b..bd87bac6 100644 --- a/frontend/client-portal/src/sections/claim-submit/CardPolicy.tsx +++ b/frontend/client-portal/src/sections/claim-submit/CardPolicy.tsx @@ -20,20 +20,20 @@ import DialogClaimSubmitMember from './DialogClaimSubmitMember'; /* ---------------------------------- types --------------------------------- */ -type DataMember = { - id: number; - fullName: string; - memberId: string; - limit: { - current: number; - total: number; - percentage: number; - }; - avatar?: { - url?: string; - title?: string; - }; -}; +// type DataMember = { +// id: number; +// fullName: string; +// memberId: string; +// limit: { +// current: number; +// total: number; +// percentage: number; +// }; +// avatar?: { +// url?: string; +// title?: string; +// }; +// }; type CardPolicyProps = { data: { @@ -99,7 +99,7 @@ export default function CardPolicy(props: CardPolicyProps) { const [dialogTitle, setDialogTitle] = useState(''); const [isDialog, setIsDialog] = useState(''); - const { limit, topUpLimit, members } = props.data || {}; + const { limit, topUpLimit } = props.data || {}; if (!limit || !topUpLimit) { return null; } @@ -178,14 +178,14 @@ export default function CardPolicy(props: CardPolicyProps) { > Submit Claim - + */} diff --git a/frontend/client-portal/src/sections/dashboard/CardPolicy.tsx b/frontend/client-portal/src/sections/dashboard/CardPolicy.tsx index 74a7ea1b..5f5ebf64 100644 --- a/frontend/client-portal/src/sections/dashboard/CardPolicy.tsx +++ b/frontend/client-portal/src/sections/dashboard/CardPolicy.tsx @@ -7,11 +7,12 @@ import { LinearProgress, linearProgressClasses, Stack, + Skeleton, } from '@mui/material'; // components import Iconify from '../../components/Iconify'; // React -import { useState } from 'react'; +import { Fragment, useState } from 'react'; // utils import { fCurrency, fSplit } from '../../utils/formatNumber'; /* -------------------------------- sections -------------------------------- */ @@ -20,23 +21,23 @@ import DialogClaimSubmitMember from './DialogClaimSubmitMember'; /* ---------------------------------- types --------------------------------- */ -type DataMember = { - id: number; - fullName: string; - memberId: string; - limit: { - current: number; - total: number; - percentage: number; - }; - avatar?: { - url?: string; - title?: string; - }; -}; +// type DataMember = { +// id: number; +// fullName: string; +// memberId: string; +// limit: { +// current: number; +// total: number; +// percentage: number; +// }; +// avatar?: { +// url?: string; +// title?: string; +// }; +// }; type CardPolicyProps = { - data: { + data?: { limit: { myLimit: { balance: number; @@ -61,10 +62,6 @@ type CardPolicyProps = { }; maxTopUp: number; }; - members: { - memberId: string; - memberFullName: string; - }; }; }; @@ -99,10 +96,7 @@ export default function CardPolicy(props: CardPolicyProps) { const [dialogTitle, setDialogTitle] = useState(''); const [isDialog, setIsDialog] = useState(''); - const { limit, topUpLimit, members } = props.data || {}; - if (!limit || !topUpLimit) { - return null; - } + const { limit, topUpLimit } = props.data || {}; const clickHandler = (isDialog: string) => { switch (isDialog) { @@ -124,70 +118,108 @@ export default function CardPolicy(props: CardPolicyProps) { return ( - <> - -
+ + + - Total Limit + {limit ? ( + 'Total Limit' + ) : ( + + )} - {fCurrency(limit.myLimit ? limit.myLimit.balance : 0)} + {limit ? ( + fCurrency(limit.myLimit.balance ?? 0) + ) : ( + + )} - / {fSplit(limit.myLimit ? limit.myLimit.total : 0)} + {limit ? ( + `/ ${fSplit(limit.myLimit.total ?? 0)}` + ) : ( + + )} -
+ - {limit.myLimit ? limit.myLimit.percentage : 0}% + {limit ? ( + `${limit.myLimit.percentage ?? 0}%` + ) : ( + + )} - + {limit ? ( + + ) : ( + + )} - - - Lock Fund ( {limit.lockLimit ? limit.lockLimit.percentage : 0}% ) - + {limit ? ( + + + + Lock Fund ( {limit.lockLimit.percentage ?? 0}% ) + + + ) : ( + + )} - {fSplit(limit.lockLimit ? limit.lockLimit.balance : 0)} /{' '} - {fSplit(limit.myLimit ? limit.myLimit.total : 0)} + {limit ? ( + `${fSplit(limit.lockLimit.balance ?? 0)} / ${fSplit(limit.myLimit.total ?? 0)}` + ) : ( + + )} - - + ) : ( + + )} + {/* + */} - + {isDialog === 'submitClaim' && ( response, - (error) => Promise.reject((error) || 'Something went wrong') + (error) => Promise.reject(error || 'Something went wrong') ); export default axiosInstance;