From b36603833b891c7519eb3293fc7978bdfe36d67e Mon Sep 17 00:00:00 2001 From: Muhammad Fajar Date: Thu, 17 Nov 2022 11:09:31 +0700 Subject: [PATCH] dialog component, dash & service-monitoring slice --- .../src/components/MuiDialog.tsx | 56 ++++ .../nav-section/vertical/NavItem.tsx | 12 +- .../layouts/dashboard/navbar/NavConfig.tsx | 56 +--- .../pages/AlarmCenter/ServiceMonitoring.tsx | 291 ++++++++++++++++++ .../src/pages/Dashboard/Dashboard.tsx | 200 +----------- frontend/client-portal/src/routes/index.tsx | 56 +--- .../src/sections/dashboard/CardBalance.tsx | 161 ++++++++++ .../sections/dashboard/CardNotification.tsx | 143 +++++++++ .../sections/dashboard/DialogDetailClaim.tsx | 175 +++++++++++ .../sections/dashboard/DialogNotification.tsx | 93 ++++++ .../sections/dashboard/DialogTopUpLimit.tsx | 209 +++++++++++++ 11 files changed, 1158 insertions(+), 294 deletions(-) create mode 100644 frontend/client-portal/src/components/MuiDialog.tsx create mode 100755 frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx create mode 100644 frontend/client-portal/src/sections/dashboard/CardBalance.tsx create mode 100644 frontend/client-portal/src/sections/dashboard/CardNotification.tsx create mode 100644 frontend/client-portal/src/sections/dashboard/DialogDetailClaim.tsx create mode 100644 frontend/client-portal/src/sections/dashboard/DialogNotification.tsx create mode 100644 frontend/client-portal/src/sections/dashboard/DialogTopUpLimit.tsx diff --git a/frontend/client-portal/src/components/MuiDialog.tsx b/frontend/client-portal/src/components/MuiDialog.tsx new file mode 100644 index 00000000..c445a216 --- /dev/null +++ b/frontend/client-portal/src/components/MuiDialog.tsx @@ -0,0 +1,56 @@ +import { Dialog, DialogTitle, DialogContent, Stack, Typography, IconButton } from '@mui/material'; +import CloseIcon from '@mui/icons-material/Close'; +import { ReactElement } from 'react'; +import Iconify from './Iconify'; + +// ---------------------------------------------------------------------- + +type MuiDialogProps = { + title?: { + name?: string; + icon?: string; + }; + openDialog: boolean; + setOpenDialog: Function; + content?: ReactElement; + maxWidth?: string; +}; + +// ---------------------------------------------------------------------- + +const MuiDialog = ({ title, openDialog, setOpenDialog, content, maxWidth }: MuiDialogProps) => { + const handleClose = () => { + setOpenDialog(false); + }; + + let maxWidthDialog = 'md'; + + if (maxWidth) { + maxWidthDialog = maxWidth; + } + + return ( + + + + {title?.icon ? ( + + + {title?.name} + + ) : ( + {title?.name ? title?.name : 'Testing Title'} + )} + + + + + + + {content ? content : 'Testing Content Dialog'} + + + ); +}; + +export default MuiDialog; diff --git a/frontend/client-portal/src/components/nav-section/vertical/NavItem.tsx b/frontend/client-portal/src/components/nav-section/vertical/NavItem.tsx index cc6ca677..44826f7b 100755 --- a/frontend/client-portal/src/components/nav-section/vertical/NavItem.tsx +++ b/frontend/client-portal/src/components/nav-section/vertical/NavItem.tsx @@ -10,12 +10,18 @@ import { isExternalLink } from '..'; // ---------------------------------------------------------------------- -export function NavItemRoot({ item, isCollapse, open = false, active, onOpen }: NavItemProps) { - const { title, path, icon, info, children } = item; +export function NavItemRoot({ + item, + isCollapse, + open = false, + active = false, + onOpen, +}: NavItemProps) { + const { title, path, info, children } = item; const renderContent = ( <> - {icon && {icon}} + {!isCollapse && ( <> diff --git a/frontend/client-portal/src/layouts/dashboard/navbar/NavConfig.tsx b/frontend/client-portal/src/layouts/dashboard/navbar/NavConfig.tsx index 1fa49018..c0cc7b26 100755 --- a/frontend/client-portal/src/layouts/dashboard/navbar/NavConfig.tsx +++ b/frontend/client-portal/src/layouts/dashboard/navbar/NavConfig.tsx @@ -1,50 +1,13 @@ -// components -import SvgIconStyle from '../../../components/SvgIconStyle'; - // ---------------------------------------------------------------------- -const getIcon = (name: string) => ( - -); - -const ICONS = { - user: getIcon('ic_user'), - ecommerce: getIcon('ic_ecommerce'), - analytics: getIcon('ic_analytics'), - dashboard: getIcon('ic_dashboard'), -}; - const navConfig = [ // GENERAL // ---------------------------------------------------------------------- { - items: [{ title: 'Dashboard', path: '/dashboard', icon: ICONS.dashboard }], + items: [{ title: 'Dashboard', path: '/dashboard' }], }, - // Membership - // ---------------------------------------------------------------------- - { - subheader: 'Membership', - items: [ - { - title: 'Member List', - path: '/members', - icon: ICONS.user, - }, - // { - // title: 'Member Movement', - // // path: '/', - // icon: ICONS.user, - // children: [ - // { title: '', path: '/medicines' }, - // { title: 'Obat', path: '/medicines' }, - // { title: 'Obat', path: '/medicines' }, - // ], - // }, - ], - }, - - // Membership + // Alarm Center // ---------------------------------------------------------------------- { subheader: 'Case Management', @@ -52,18 +15,11 @@ const navConfig = [ { title: 'Alarm Center', path: '/alarm-center', - icon: ICONS.ecommerce, }, - // { - // title: 'Member Movement', - // // path: '/', - // icon: ICONS.user, - // children: [ - // { title: '', path: '/medicines' }, - // { title: 'Obat', path: '/medicines' }, - // { title: 'Obat', path: '/medicines' }, - // ], - // }, + { + title: 'Claim Report', + path: '/claim-report', + }, ], }, ]; diff --git a/frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx b/frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx new file mode 100755 index 00000000..add01b70 --- /dev/null +++ b/frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx @@ -0,0 +1,291 @@ +// mui +import { + Button, + Box, + Tabs, + Tab, + IconButton, + Container, + Grid, + Card, + Stack, + Typography, +} from '@mui/material'; +import { styled } from '@mui/material/styles'; +import { Favorite } from '@mui/icons-material'; +// components +import Page from '../../components/Page'; +import Iconify from '../../components/Iconify'; +// utils +import useSettings from '../../hooks/useSettings'; +import { useRef, useState, SyntheticEvent } from 'react'; +// sections +// import ListTable from '../../sections/claimreports/ListTable'; +// import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard'; + +interface TabPanelProps { + children?: React.ReactNode; + index: number; + value: number; +} + +function TabPanel(props: TabPanelProps) { + const { children, value, index, ...other } = props; + + return ( + + ); +} + +function a11yProps(index: number) { + return { + id: `simple-tab-${index}`, + 'aria-controls': `simple-tabpanel-${index}`, + }; +} + +interface StyledTabsProps { + children?: React.ReactNode; + value: number; + onChange: (event: React.SyntheticEvent, newValue: number) => void; +} + +const StyledTabs = styled((props: StyledTabsProps) => )({ + '& .MuiTabs-indicator': { + display: 'flex', + justifyContent: 'center', + backgroundColor: 'transparent', + }, + '& .MuiTabs-indicatorSpan': { + maxWidth: 40, + width: '100%', + backgroundColor: '#635ee7', + }, +}); + +interface StyledTabProps { + label: string; + icon?: string | React.ReactElement; +} + +const StyledTab = styled((props: StyledTabProps) => )( + ({ theme }) => ({ + textTransform: 'none', + fontWeight: 500, + fontSize: theme.typography.pxToRem(20), + color: theme.palette.primary.main, + maxWidth: '100%', + flex: 1, + margin: '0 !important', + '&.Mui-selected': { + color: '#FFF', + backgroundColor: theme.palette.primary.main, + }, + '&:hover': { + backgroundColor: theme.palette.primary.dark, + color: '#FFF', + opacity: 1, + }, + }) +); + +export default function Drugs() { + const { themeStretch } = useSettings(); + + const [value, setValue] = useState(0); + const handleChange = (event: SyntheticEvent, newValue: number) => { + setValue(newValue); + }; + + return ( + + + + + + + Service Monitoring + + + Done + + + + {/* Item 1 */} + + + + + + Employee Profiles + + + + + Nama perusahaan + PT. Amman Mineral + + + Nama Lengkap + Stephen kuow + + + Tanggal lahir + 09 Aug 1980 + + + Email + Stephen.uow@gmal.com + + + No telepon + +62 821-8123-2323 + + + + ID Karyawan + 12345678 + + + + + + {/* Item 2 */} + + + + + + Diagnose Summary + + + + Gejala + Nyeri dada + + + Tanda + Sesak Napas + + + Main Diagnose + + J46 Status asthmaticus, Acute severe asthma + + + + Diagnosis pembanding + K21 Gastro-oesophageal reflux disease + + + + + + {/* Item 3 */} + + + + + + Services + + + + + Evakuasi medis + Land Transportation + + + Rumah sakit + Primaya Hospital + + + + Tanggal mulai + 17 Aug 2022 + + + Selesai + 18 Aug 2022 + + + + Daftar layanan + + Inpatient, Medivac (Medical Evacuation) + + + + + + + + + + + } label="Daily Monitoring" {...a11yProps(0)} /> + } + label="Item Two" + {...a11yProps(1)} + /> + + + + Item One + + + Item Two + + + + + + ); +} diff --git a/frontend/client-portal/src/pages/Dashboard/Dashboard.tsx b/frontend/client-portal/src/pages/Dashboard/Dashboard.tsx index 18c42ff3..6947c31d 100755 --- a/frontend/client-portal/src/pages/Dashboard/Dashboard.tsx +++ b/frontend/client-portal/src/pages/Dashboard/Dashboard.tsx @@ -1,74 +1,17 @@ // @mui -import { styled } from '@mui/material/styles'; -import { - Button, - Card, - Typography, - Link, - Divider, - Stack, - LinearProgress, - linearProgressClasses, - Container, - Grid, -} from '@mui/material'; -import { ChevronRight } from '@mui/icons-material'; +import { Typography, Container, Grid } from '@mui/material'; // hooks import useSettings from '../../hooks/useSettings'; -// utils -import { fCurrency } from '../../utils/formatNumber'; // components import Page from '../../components/Page'; -import Iconify from '../../components/Iconify'; -// import Popup from '../components/Popup'; -// import axios from '../utils/axios'; -// DashboardComponent -// import BalanceCard from '../sections/dashboard/BalanceCard'; -// import NotificationCard from '../sections/dashboard/NotificationCard'; -// import DashboardTable from '../sections/dashboard/DashboardTable'; -// React -import { useState } from 'react'; // Table import List from './List'; +// theme +import CardNotification from '../../sections/dashboard/CardNotification'; +import CardBalance from '../../sections/dashboard/CardBalance'; // ---------------------------------------------------------------------- -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 RootNotificationStyle = styled(Card)(({ theme }) => ({ - boxShadow: 'none', - padding: '1rem 0.5rem', - color: 'black', - backgroundColor: theme.palette.grey[200], - maxHeight: '240px', -})); - -const ItemNotificationStyle = styled(Card)(({ theme }) => ({ - boxShadow: 'none', - padding: theme.spacing(1), - borderRadius: 0.5, - color: 'black', - maxHeight: '170px', -})); - const itemList = [ { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '08:00 WIB' }, { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '09:00 WIB' }, @@ -76,17 +19,11 @@ const itemList = [ { info: 'Mohon lengkapi dokumen Mahen sadarsa', date: 'Selasa, 20 April 22', time: '11:00 WIB' }, ]; -const INITIAL = '500.000.000'; -const TOTAL = 375000000; -const PERCENT = 75; - // ---------------------------------------------------------------------- export default function Dashboard() { const { themeStretch } = useSettings(); - const [openPopup, setOpenPopup] = useState(false); - // const { logout } = useAuth(); // const [corporate, setCorporate] = useState({}); // const loadSomething = () => { @@ -113,139 +50,18 @@ export default function Dashboard() { - - - - - - Notification -
- - - - - - - - {itemList.map(({ info, date, time }, key) => ( -
- {key >= 1 ? : ''} - - - {info} - { - alert('Info Detail'); - }} - > - Info Detail - - - - - {date} - - - {time} - - - -
- ))} - - - + - - -
- - Total Limit - - {fCurrency(TOTAL)} - - / {INITIAL} - -
- - - - {PERCENT}% - - - - - - - - - - - Lock Fund ( 25% ) - - - - 125.000.000 / 125.000.000 - - - - - - - - + - + {/* */} - {/* */} + {/* */} ); } diff --git a/frontend/client-portal/src/routes/index.tsx b/frontend/client-portal/src/routes/index.tsx index 236cee39..c0f5d182 100755 --- a/frontend/client-portal/src/routes/index.tsx +++ b/frontend/client-portal/src/routes/index.tsx @@ -52,10 +52,6 @@ export default function Router() { // { path: 'reset-password', element: }, ], }, - // { - // path: '/', - // element: , - // }, { path: '/', element: ( @@ -73,26 +69,6 @@ export default function Router() { }, ], }, - { - path: '/members', - element: ( - - - - - - ), - children: [ - { - element: , - index: true, - }, - { - path: 'create', - element: , - }, - ], - }, { path: '/alarm-center', element: ( @@ -107,29 +83,12 @@ export default function Router() { element: , index: true, }, + { + path: 'service-monitoring/:id', + element: , + }, ], }, - // { - // path: '/dashboard', - // element: , - // children: [ - // { element: , index: true }, - // { path: 'one', element: - // }, - // { path: 'two', element: - // }, - // { path: 'three', element: - // }, - // { - // path: 'user', - // children: [ - // { element: , index: true }, - // { path: 'four', element: }, - // { path: 'six', element: }, - // ], - // }, - // ], - // }, { path: '*', element: , @@ -150,9 +109,8 @@ const VerifyCode = Loadable(lazy(() => import('../pages/auth/VerifyCode'))); const Dashboard = Loadable(lazy(() => import('../pages/Dashboard/Dashboard'))); const NotFound = Loadable(lazy(() => import('../pages/Page404'))); -// Members -const Members = Loadable(lazy(() => import('../pages/Members/Index'))); -const MembersCreate = Loadable(lazy(() => import('../pages/Members/Create'))); - // Alarm Center const AlarmCenter = Loadable(lazy(() => import('../pages/AlarmCenter/Index'))); +const AlarmCenterServiceMonitoring = Loadable( + lazy(() => import('../pages/AlarmCenter/ServiceMonitoring')) +); diff --git a/frontend/client-portal/src/sections/dashboard/CardBalance.tsx b/frontend/client-portal/src/sections/dashboard/CardBalance.tsx new file mode 100644 index 00000000..fb2ae52b --- /dev/null +++ b/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'; +// +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 ( + + <> + +
+ + Total Limit + + {fCurrency(TOTAL)} + / {INITIAL} +
+ + + + {PERCENT}% + + + + + + + + + + + Lock Fund ( 25% ) + + + + 125.000.000 / 125.000.000 + + + + + + + + + + {/* {isDialog === 'submitClaim' && ( + + )} */} + + {isDialog === 'topUpLimit' && ( + + )} + + ); +} diff --git a/frontend/client-portal/src/sections/dashboard/CardNotification.tsx b/frontend/client-portal/src/sections/dashboard/CardNotification.tsx new file mode 100644 index 00000000..a0d07784 --- /dev/null +++ b/frontend/client-portal/src/sections/dashboard/CardNotification.tsx @@ -0,0 +1,143 @@ +// @mui +import { styled } from '@mui/material/styles'; +import { Button, Card, Typography, Link, Divider, Stack } from '@mui/material'; +import { ChevronRight } from '@mui/icons-material'; +// components +import Iconify from '../../components/Iconify'; +// Section +import DialogNotification from './DialogNotification'; +import DialogDetailClaim from './DialogDetailClaim'; +// React +import { useState } from 'react'; + +// ---------------------------------------------------------------------- + +type DataContent = { + info: string; + date: string; + time: string; +}; + +type NotificationProps = { + data?: DataContent[]; +}; + +// ---------------------------------------------------------------------- + +const RootNotificationStyle = styled(Card)(({ theme }) => ({ + boxShadow: 'none', + padding: '1rem 0.5rem', + color: 'black', + backgroundColor: theme.palette.grey[200], + maxHeight: '240px', +})); + +const ItemNotificationStyle = styled(Card)(({ theme }) => ({ + boxShadow: 'none', + padding: theme.spacing(1), + borderRadius: 0.5, + color: 'black', +})); + +// ---------------------------------------------------------------------- + +export default function CardNotification({ data }: NotificationProps) { + const [openDialog, setOpenDialog] = useState(false); + const [dialogTitle, setDialogTitle] = useState(''); + const [isDialog, setIsDialog] = useState(''); + + const clickHandler = (isDialog: string) => { + switch (isDialog) { + case 'allNotification': + setDialogTitle('Notification'); + setIsDialog(isDialog); + setOpenDialog(true); + break; + case 'infoDetail': + setDialogTitle('Claim Details'); + setIsDialog(isDialog); + setOpenDialog(true); + break; + + default: + break; + } + }; + + return ( + + + + + + Notification + + + + + + + + {data + ? data.map(({ info, date, time }, key) => ( +
+ {key >= 1 ? : ''} + + + {info} + clickHandler('infoDetail')} + > + Info Detail + + + + {date} + {time} + + +
+ )) + : ''} + + + {isDialog === 'allNotification' && ( + + )} + + {isDialog === 'infoDetail' && ( + + )} + + ); +} diff --git a/frontend/client-portal/src/sections/dashboard/DialogDetailClaim.tsx b/frontend/client-portal/src/sections/dashboard/DialogDetailClaim.tsx new file mode 100644 index 00000000..3aba83d1 --- /dev/null +++ b/frontend/client-portal/src/sections/dashboard/DialogDetailClaim.tsx @@ -0,0 +1,175 @@ +// @mui +import { + Button, + Box, + Stepper, + Step, + StepLabel, + Card, + Typography, + Divider, + Stack, +} from '@mui/material'; +import { Add } from '@mui/icons-material'; +// components +import MuiDialog from '../../components/MuiDialog'; +// theme +import palette from '../../theme/palette'; +// React +import { ReactElement } from 'react'; + +type DataContent = { + info: string; + date: string; + time: string; +}; + +type MuiDialogProps = { + title?: { + name?: string; + icon?: string; + }; + openDialog: boolean; + setOpenDialog: Function; + content?: ReactElement; + data?: DataContent[]; +}; + +const steps = ['Review', 'Approval', 'Disbursement']; + +const DialogDetailClaim = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => { + const getContent = () => ( + <> + + + Claim Request + + + Submission date + 15 / 05 / 2022 + + + + + {steps.map((label) => ( + + {label} + + ))} + + + + + 17 Mei 2022 + + + + + + {/* Item 1 */} + + + 09:10 WIB + + Approval + + + + + + Details : mohon melengkapi kekurangan dokumen + + + Lab pemeriksaan darah + + + + + {/* Item 2 */} + + + 09:00 WIB + + Approval + + + + + + Details : Penilaian Dokter + + + + {/* Item 3 */} + + + 08:00 WIB + + Review + + + + + + Details : Klaim Diajukan + + + + + + + ); + + return ( + + ); +}; + +export default DialogDetailClaim; diff --git a/frontend/client-portal/src/sections/dashboard/DialogNotification.tsx b/frontend/client-portal/src/sections/dashboard/DialogNotification.tsx new file mode 100644 index 00000000..c93a27b2 --- /dev/null +++ b/frontend/client-portal/src/sections/dashboard/DialogNotification.tsx @@ -0,0 +1,93 @@ +// react +import { ReactElement, useState } from 'react'; +// mui +import { Card, Divider, Link, Stack, Typography } from '@mui/material'; +import { styled } from '@mui/material/styles'; +// Component +import MuiDialog from '../../components/MuiDialog'; +// Sections +import DialogDetailClaim from './DialogDetailClaim'; + +type DataContent = { + info: string; + date: string; + time: string; +}; + +type MuiDialogProps = { + title?: { + name?: string; + icon?: string; + }; + openDialog: boolean; + setOpenDialog: Function; + content?: ReactElement; + data?: DataContent[]; +}; + +const ItemNotificationStyle = styled(Card)(({ theme }) => ({ + boxShadow: 'none', + padding: theme.spacing(1), + borderRadius: 0.5, + color: 'black', +})); + +const DialogNotification = ({ title, openDialog, setOpenDialog, data }: MuiDialogProps) => { + const [openDialogClaim, setOpenDialogClaim] = useState(false); + const [dialogTitleClaim, setDialogTitleClaim] = useState(''); + + const clickHandler = () => { + setDialogTitleClaim('Claim Details'); + setOpenDialogClaim(true); + }; + + const getContent = () => ( + + + {data + ? data.map(({ info, date, time }: DataContent, key) => ( +
+ {key >= 1 ? : ''} + + + {info} + + Info Detail + + + + {date} + {time} + + +
+ )) + : ''} + + + ); + + return ( + <> + + + + + ); +}; + +export default DialogNotification; diff --git a/frontend/client-portal/src/sections/dashboard/DialogTopUpLimit.tsx b/frontend/client-portal/src/sections/dashboard/DialogTopUpLimit.tsx new file mode 100644 index 00000000..c433a70d --- /dev/null +++ b/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({ + 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 = () => ( + + + + Company Name + + {testData.companyName} + + + + Policy Number + + {testData.policyNumber} + + + + + Total Member + + {testData.totalMembers} Person + + + + Total Cases + + {testData.totalCases} Cases + + + + + + Company Pooled Fund + {fCurrency(testData.myLimit)} + + / {testData.totalLimit} + + + + {testData.totalPersen}% + + + + + + + Top Up Limit + + + onTopupHandler(e.target.value)} + /> + } + label={'Max ' + fCurrency(5000000)} + onChange={handleSubmit(onCheckHandler)} + /> + + + Login + + + + + ); + + return ( + + ); +}; + +export default DialogTopUpLimit;