From ca36d1a5932223c4d9f96e222ed69ea828169282 Mon Sep 17 00:00:00 2001 From: Muhammad Fajar Date: Thu, 10 Nov 2022 10:00:24 +0700 Subject: [PATCH] client portal dashboard & claim-reports --- .../client-portal/src/components/Popup.tsx | 19 ++ .../layouts/dashboard/navbar/NavConfig.tsx | 41 ++- .../{Members => ClaimReports}/Create.tsx | 0 .../pages/{Members => ClaimReports}/Form.tsx | 0 .../src/pages/ClaimReports/Index.tsx | 30 ++ .../client-portal/src/pages/Dashboard.tsx | 10 +- .../client-portal/src/pages/Members/Index.tsx | 38 --- .../client-portal/src/pages/Members/List.tsx | 314 ------------------ frontend/client-portal/src/routes/index.tsx | 25 +- .../src/sections/auth/login/LoginForm.tsx | 52 +-- .../sections/claimreports/ClaimStatusCard.tsx | 67 ++++ .../src/sections/claimreports/ListTable.tsx | 313 +++++++++++++++++ .../src/sections/dashboard/BalanceCard.tsx | 31 +- .../src/sections/dashboard/DashboardTable.tsx | 2 +- 14 files changed, 513 insertions(+), 429 deletions(-) create mode 100644 frontend/client-portal/src/components/Popup.tsx rename frontend/client-portal/src/pages/{Members => ClaimReports}/Create.tsx (100%) rename frontend/client-portal/src/pages/{Members => ClaimReports}/Form.tsx (100%) create mode 100755 frontend/client-portal/src/pages/ClaimReports/Index.tsx delete mode 100755 frontend/client-portal/src/pages/Members/Index.tsx delete mode 100755 frontend/client-portal/src/pages/Members/List.tsx create mode 100755 frontend/client-portal/src/sections/claimreports/ClaimStatusCard.tsx create mode 100755 frontend/client-portal/src/sections/claimreports/ListTable.tsx diff --git a/frontend/client-portal/src/components/Popup.tsx b/frontend/client-portal/src/components/Popup.tsx new file mode 100644 index 00000000..6669f12f --- /dev/null +++ b/frontend/client-portal/src/components/Popup.tsx @@ -0,0 +1,19 @@ +// react +import React from 'react'; +// mui +import { Dialog, DialogTitle, DialogContent } from '@mui/material'; + +export default function Popup(props: any) { + const { title, children, openPopup, setOpenPopup } = props; + + return ( + + +
Title goes here.
+ + +
Content goes here.
+ + + ); +} diff --git a/frontend/client-portal/src/layouts/dashboard/navbar/NavConfig.tsx b/frontend/client-portal/src/layouts/dashboard/navbar/NavConfig.tsx index d380f6ea..236a6307 100755 --- a/frontend/client-portal/src/layouts/dashboard/navbar/NavConfig.tsx +++ b/frontend/client-portal/src/layouts/dashboard/navbar/NavConfig.tsx @@ -18,21 +18,29 @@ const navConfig = [ // GENERAL // ---------------------------------------------------------------------- { - items: [ - { title: 'Dashboard', path: '/dashboard', icon: ICONS.dashboard }, - ], + items: [{ title: 'Dashboard', path: '/dashboard' }], }, - // Membership + // Case Management // ---------------------------------------------------------------------- { - subheader: 'Membership', + subheader: 'Case Management', items: [ { - title: 'Member List', + title: 'Alarm Center', path: '/members', - icon: ICONS.user, + // icon: ICONS.default, }, + { + title: 'Claim Report', + path: '/claim-reports', + // icon: ICONS.default, + }, + // { + // title: 'Member List', + // path: '/members', + // icon: ICONS.user, + // }, // { // title: 'Member Movement', // // path: '/', @@ -45,6 +53,25 @@ const navConfig = [ // }, ], }, + + // User Management + // ---------------------------------------------------------------------- + // { + // subheader: 'User Management', + // items: [ + // { + // title: 'User', + // path: '/members', + // icon: ICONS.default, + // }, + // ], + // }, + + // Linking Tools + // ---------------------------------------------------------------------- + // { + // subheader: 'Linking Tools', + // }, ]; export default navConfig; diff --git a/frontend/client-portal/src/pages/Members/Create.tsx b/frontend/client-portal/src/pages/ClaimReports/Create.tsx similarity index 100% rename from frontend/client-portal/src/pages/Members/Create.tsx rename to frontend/client-portal/src/pages/ClaimReports/Create.tsx diff --git a/frontend/client-portal/src/pages/Members/Form.tsx b/frontend/client-portal/src/pages/ClaimReports/Form.tsx similarity index 100% rename from frontend/client-portal/src/pages/Members/Form.tsx rename to frontend/client-portal/src/pages/ClaimReports/Form.tsx diff --git a/frontend/client-portal/src/pages/ClaimReports/Index.tsx b/frontend/client-portal/src/pages/ClaimReports/Index.tsx new file mode 100755 index 00000000..c538f82b --- /dev/null +++ b/frontend/client-portal/src/pages/ClaimReports/Index.tsx @@ -0,0 +1,30 @@ +// mui +import { Container, Grid } from '@mui/material'; +// components +import Page from '../../components/Page'; +// utils +import useSettings from '../../hooks/useSettings'; +// sections +import ListTable from '../../sections/claimreports/ListTable'; +import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard'; + +export default function Drugs() { + const { themeStretch } = useSettings(); + + // const { corporate_id } = useParams(); + + return ( + + + + + + + + + + + + + ); +} diff --git a/frontend/client-portal/src/pages/Dashboard.tsx b/frontend/client-portal/src/pages/Dashboard.tsx index bb9b7d31..6d1188d0 100755 --- a/frontend/client-portal/src/pages/Dashboard.tsx +++ b/frontend/client-portal/src/pages/Dashboard.tsx @@ -4,16 +4,20 @@ import { Container, Grid, Typography } from '@mui/material'; import useSettings from '../hooks/useSettings'; // components import Page from '../components/Page'; +import Popup from '../components/Popup'; // import axios from '../utils/axios'; -// import { useEffect, useState } from 'react'; +// DashboardComponent import BalanceCard from '../sections/dashboard/BalanceCard'; import NotificationCard from '../sections/dashboard/NotificationCard'; import DashboardTable from '../sections/dashboard/DashboardTable'; +// React +import { useState } from 'react'; // ---------------------------------------------------------------------- export default function Dashboard() { const { themeStretch } = useSettings(); + const [openPopup, setOpenPopup] = useState(false); // const { logout } = useAuth(); // const [corporate, setCorporate] = useState({}); @@ -45,13 +49,15 @@ export default function Dashboard() { - + + + ); } diff --git a/frontend/client-portal/src/pages/Members/Index.tsx b/frontend/client-portal/src/pages/Members/Index.tsx deleted file mode 100755 index 4629baaf..00000000 --- a/frontend/client-portal/src/pages/Members/Index.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { Card, Grid } from "@mui/material"; -import { useParams } from "react-router-dom"; -import HeaderBreadcrumbs from "../../components/HeaderBreadcrumbs"; -import Page from "../../components/Page"; -import useSettings from "../../hooks/useSettings"; -import List from "./List"; - - - -export default function Drugs() { - const { themeStretch } = useSettings(); - - const { corporate_id } = useParams(); - - const pageTitle = 'Formularium'; - return ( - - - - - - - - - ); -} diff --git a/frontend/client-portal/src/pages/Members/List.tsx b/frontend/client-portal/src/pages/Members/List.tsx deleted file mode 100755 index 38b825c6..00000000 --- a/frontend/client-portal/src/pages/Members/List.tsx +++ /dev/null @@ -1,314 +0,0 @@ -// @mui -import { Box, Button, Card, Collapse, IconButton, InputLabel, MenuItem, OutlinedInput, Paper, Select, SelectChangeEvent, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, Typography, Badge, Tab, Tabs, CardHeader, Stack, Menu, ButtonGroup, Pagination, Grid } from '@mui/material'; -import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; -import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; -import AddIcon from '@mui/icons-material/Add'; -import UploadIcon from '@mui/icons-material/Upload'; -import CancelIcon from '@mui/icons-material/Cancel'; -// hooks -import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react'; -import useSettings from '../../hooks/useSettings'; -import { useNavigate, useParams, useSearchParams } from 'react-router-dom'; -// components -import axios from '../../utils/axios'; -import { LaravelPaginatedData } from '../../@types/paginated-data'; -import { Icd } from '../../@types/diagnosis'; -import BasePagination from '../../components/BasePagination'; -import { Member } from '../../@types/member'; - -export default function List() { - const navigate = useNavigate(); - const { themeStretch } = useSettings(); - const { corporate_id } = useParams(); - const [searchParams, setSearchParams] = useSearchParams(); - const [importResult, setImportResult] = useState(null); - - function SearchInput(props: any) { - // SEARCH - const searchInput = useRef(null); - const [searchText, setSearchText] = useState(""); - - const handleSearchChange = (event: any) => { - const newSearchText = event.target.value ?? '' - setSearchText(newSearchText); - } - - const handleSearchSubmit = (event: any) => { - event.preventDefault(); - props.onSearch(searchText); // Trigger to Parent - } - - useEffect(() => { // Trigger First Search - setSearchText(searchParams.get('search') ?? ''); - }, [searchParams]) - - return ( -
- - - ); - } - - function ImportForm(props: any) { - // IMPORT - // Create Button Menu - const [anchorEl, setAnchorEl] = React.useState(null); - const createMenu = Boolean(anchorEl); - const importForm = useRef(null) - const [currentImportFileName, setCurrentImportFileName] = useState(null) - - const handleClick = (event: React.MouseEvent) => { - setAnchorEl(event.currentTarget); - }; - - const handleClose = () => { - setAnchorEl(null); - }; - - const handleImportButton = () => { - if (importForm?.current) { - handleClose(); - importForm.current ? importForm.current.click() : console.log('No File selected'); - } else { - alert('No file selected') - } - } - - const handleCancelImportButton = () => { - importForm.current.value = ""; - importForm.current.dispatchEvent(new Event("change", { bubbles: true })); - } - - const handleImportChange = (event: any) => { - if (event.target.files[0]) { - setCurrentImportFileName(event.target.files[0].name) - } else { - setCurrentImportFileName(null); - } - } - - const handleUpload = () => { - if (importForm.current?.files.length) { - const formData = new FormData(); - formData.append("file", importForm.current?.files[0]) - axios.post(`master/formularium/import`, formData ) - .then(response => { - handleCancelImportButton(); - loadDataTableData(); - setImportResult(response.data) - // alert('Succesfully read '+ response.data.total_successed_row + ' with ' + response.data.total_failed_row + ' failed rows'); - }) - .catch(response => { - alert('Looks like something went wrong. Please check your data and try again. ' + response.message) - }) - } else { - alert('No File Selected') - } - } - - return ( -
- - {( !currentImportFileName && - - {/*

kjasndkjandskjasndkjansdkjansd

*/} - - - {navigate('/master/formularium/create')} }>Create - Import - Download Template - - - )} - - {( currentImportFileName && - - - - - - - - )} - {( importResult && - - Last Import Result Report : {importResult.result_file?.name ?? "-"} - - )} -
- ); - } - - // Called on every row to map the data to the columns - function createData( member: Member ): Member { - return { - ...member, - } - } - - // Generate the every row of the table - function Row(props: { row: ReturnType }) { - const { row } = props; - const [open, setOpen] = React.useState(true); - - return ( - - *': { borderBottom: 'unset' } }}> - - setOpen(!open)} - > - {open ? : } - - - {row.member_id} - {row.payor_id} - {row.name} - {row.nik} - {row.nric} - - - {/* */} - - {/* COLLAPSIBLE ROW */} - - - - - - - - - - - - - ); - } - - // Dummy Default Data - const [dataTableIsLoading, setDataTableLoading] = useState(true); - const [dataTableLastRequest, setDataTableLastRequest] = useState(0); - const [dataTableResponseState, setDataTableResponseState] = useState('idle'); - const [dataTableData, setDataTableData] = useState({ - current_page: 1, - data: [], - path: "", - first_page_url: "", - last_page: 1, - last_page_url: "", - next_page_url: "", - prev_page_url: "", - per_page: 10, - from: 0, - to: 0, - total: 0 - }); - const [dataTablePage, setDataTablePage] = useState(5); - - const loadDataTableData = async (appliedFilter : any | null = null) => { - setDataTableLoading(true); - const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]); - const response = await axios.get('/members', { params: filter }); - - setDataTableData(response.data.members); - setDataTableLoading(false); - } - - const headStyle = { - fontWeight: 'bold', - }; - - const applyFilter = async (searchFilter: string) => { - await loadDataTableData({ "search" : searchFilter }); - setSearchParams({ "search" : searchFilter }); - } - - const handlePageChange = (event : ChangeEvent, value: number) => { - const filter = Object.fromEntries([...searchParams.entries(), ["page", value]]); - loadDataTableData(filter); - setSearchParams(filter); - } - - useEffect(() => { - loadDataTableData(); - }, []) - - return ( - - - - - {/* The Main Table */} - - - - - Detail - MemberID - PayorID - Name - NIK - PlanID - Status - {/* Action */} - - - {dataTableIsLoading ? - ( - - - Loading - - - ) : ( - dataTableData.data.length == 0 ? - ( - - - No Data - - - ) : ( - - {dataTableData.data.map(row => ( - - ))} - - ) - )} -
- - - - - - ); -} diff --git a/frontend/client-portal/src/routes/index.tsx b/frontend/client-portal/src/routes/index.tsx index 671f5a36..8657227c 100755 --- a/frontend/client-portal/src/routes/index.tsx +++ b/frontend/client-portal/src/routes/index.tsx @@ -7,9 +7,6 @@ import LogoOnlyLayout from '../layouts/LogoOnlyLayout'; import LoadingScreen from '../components/LoadingScreen'; import GuestGuard from '../guards/GuestGuard'; import { RegisterForm } from '../sections/auth/register'; -import Register from '../pages/auth/Register'; -import ResetPassword from '../pages/auth/ResetPassword'; -import VerifyCode from '../pages/auth/VerifyCode'; import { AuthProvider } from '../contexts/LaravelAuthContext'; import AuthGuard from '../guards/AuthGuard'; @@ -68,29 +65,30 @@ export default function Router() { - ), - children:[ + + ), + children: [ { element: , index: true }, { path: 'dashboard', element: , }, { - path: 'members', - element: , + path: 'claim-reports', + element: , }, - ] + ], }, // { // path: '/dashboard', // element: , // children: [ // { element: , index: true }, - // { path: 'one', element: + // { path: 'one', element: // }, - // { path: 'two', element: + // { path: 'two', element: // }, - // { path: 'three', element: + // { path: 'three', element: // }, // { // path: 'user', @@ -120,6 +118,5 @@ const Login = Loadable(lazy(() => import('../pages/auth/Login'))); const Dashboard = Loadable(lazy(() => import('../pages/Dashboard'))); const NotFound = Loadable(lazy(() => import('../pages/Page404'))); -// Members -const Members = Loadable(lazy(() => import('../pages/Members/Index'))); -const MedicinesCreate = Loadable(lazy(() => import('../pages/Medicines/Create'))); +// Claim Reports +const ClaimReports = Loadable(lazy(() => import('../pages/ClaimReports/Index'))); diff --git a/frontend/client-portal/src/sections/auth/login/LoginForm.tsx b/frontend/client-portal/src/sections/auth/login/LoginForm.tsx index 8fba3741..77fd65ea 100755 --- a/frontend/client-portal/src/sections/auth/login/LoginForm.tsx +++ b/frontend/client-portal/src/sections/auth/login/LoginForm.tsx @@ -1,28 +1,21 @@ import * as Yup from 'yup'; -import { useState } from 'react'; -import { Link as RouterLink, useNavigate } from 'react-router-dom'; +import { useNavigate } from 'react-router-dom'; // form import { useForm } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; // @mui -import { Link, Stack, Alert, IconButton, InputAdornment } from '@mui/material'; +import { Stack, Alert } from '@mui/material'; import { LoadingButton } from '@mui/lab'; -// routes -import { PATH_AUTH } from '../../../routes/paths'; // hooks import useAuth from '../../../hooks/useAuth'; import useIsMountedRef from '../../../hooks/useIsMountedRef'; // components -import Iconify from '../../../components/Iconify'; -import { FormProvider, RHFTextField, RHFCheckbox } from '../../../components/hook-form'; +import { FormProvider, RHFTextField } from '../../../components/hook-form'; // ---------------------------------------------------------------------- type FormValuesProps = { email: string; - password: string; - remember: boolean; - afterSubmit?: string; }; export default function LoginForm() { @@ -31,24 +24,15 @@ export default function LoginForm() { const isMountedRef = useIsMountedRef(); - const [showPassword, setShowPassword] = useState(false); - const LoginSchema = Yup.object().shape({ email: Yup.string().email('Email must be a valid email address').required('Email is required'), password: Yup.string().required('Password is required'), }); - const defaultValues = { - email: 'admin@linksehat.dev', - password: 'password', - remember: true, - }; - const methods = useForm({ resolver: yupResolver(LoginSchema), - defaultValues, }); - + const { reset, setError, @@ -58,8 +42,8 @@ export default function LoginForm() { const onSubmit = async (data: FormValuesProps) => { try { - const loginResult = await login(data.email, data.password ); - + await login(data.email); + navigate('/dashboard'); } catch (error) { console.error(error); @@ -75,32 +59,10 @@ export default function LoginForm() { return ( - Email : admin@linksehat.dev & Password : password + Masukkan akun yang telah terdaftar {!!errors.afterSubmit && {errors.afterSubmit.message}} - - - setShowPassword(!showPassword)} edge="end"> - - - - ), - }} - /> - - - - - - Forgot password? - ({ + boxShadow: 'none', + padding: theme.spacing(2), + color: 'black', + backgroundColor: theme.palette.grey[200], + maxHeight: '240px', +})); + +// ---------------------------------------------------------------------- + +interface ClaimStatusType { + name: string; + value: number; + color: string; +} + +export default function ClaimStatusCard({ name, value, color }: ClaimStatusType) { + const listItems = [ + { name: 'Requested', value: 15, color: palette.dark.primary.dark }, + { name: 'Approval', value: 20, color: palette.dark.warning.dark }, + { name: 'Disbrusment', value: 20, color: palette.dark.success.dark }, + { name: 'Rejected', value: 20, color: palette.dark.error.dark }, + ]; + + return ( + + + Claim Status + + + {listItems.map(({ name, value, color }, key) => ( + + + {name} + + + {value} + + + Cases + + + ))} + + + ); +} diff --git a/frontend/client-portal/src/sections/claimreports/ListTable.tsx b/frontend/client-portal/src/sections/claimreports/ListTable.tsx new file mode 100755 index 00000000..74a3e98c --- /dev/null +++ b/frontend/client-portal/src/sections/claimreports/ListTable.tsx @@ -0,0 +1,313 @@ +// @mui +import { + Autocomplete, + Box, + Button, + Card, + Collapse, + IconButton, + InputLabel, + MenuItem, + OutlinedInput, + Paper, + Select, + SelectChangeEvent, + Table, + TableBody, + TableCell, + TableContainer, + TableHead, + TableRow, + TextField, + Typography, + Badge, + Tab, + Tabs, + CardHeader, + Stack, + Menu, + ButtonGroup, + Pagination, + TablePagination, + Grid, +} from '@mui/material'; +import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; +import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'; +import AddIcon from '@mui/icons-material/Add'; +import UploadIcon from '@mui/icons-material/Upload'; +import CancelIcon from '@mui/icons-material/Cancel'; +// hooks +import React, { ChangeEvent, Component, useEffect, useRef, useState } from 'react'; +import useSettings from '../../hooks/useSettings'; +import { useNavigate, useParams, useSearchParams } from 'react-router-dom'; +// components +import axios from '../../utils/axios'; +import { LaravelPaginatedData } from '../../@types/paginated-data'; +import { Member } from '../../@types/member'; +import Iconify from '../../components/Iconify'; + +export default function ListTable() { + const navigate = useNavigate(); + const { themeStretch } = useSettings(); + const { corporate_id } = useParams(); + const [searchParams, setSearchParams] = useSearchParams(); + const [importResult, setImportResult] = useState(null); + + function SearchInput(props: any) { + // SEARCH + const searchInput = useRef(null); + const [searchText, setSearchText] = useState(''); + + const handleSearchChange = (event: any) => { + const newSearchText = event.target.value ?? ''; + setSearchText(newSearchText); + }; + + const handleSearchSubmit = (event: any) => { + event.preventDefault(); + props.onSearch(searchText); // Trigger to Parent + }; + + // useEffect(() => { + // // Trigger First Search + // setSearchText(searchParams.get('search') ?? ''); + // }, [searchParams]); + + return ( +
+ + + ); + } + + function ImportForm(props: any) { + // IMPORT + // Create Button Menu + const [anchorEl, setAnchorEl] = React.useState(null); + const createMenu = Boolean(anchorEl); + const importForm = useRef(null); + const [currentImportFileName, setCurrentImportFileName] = useState(null); + + const handleImportChange = (event: any) => { + if (event.target.files[0]) { + setCurrentImportFileName(event.target.files[0].name); + } else { + setCurrentImportFileName(null); + } + }; + + const options = ['All', 'Option 2']; + const [value, setValue] = React.useState(options[0]); + const [inputValue, setInputValue] = React.useState(''); + + return ( +
+ + {/* Filter Division */} + { + setValue(newValue); + }} + inputValue={inputValue} + onInputChange={(event, newInputValue) => { + setInputValue(newInputValue); + }} + id="controllable-states-demo" + options={options} + sx={{ minWidth: 240 }} + renderInput={(params) => } + /> + {/* Search */} + + + {/* Button Import */} + + {/* */} + {/* Button Add Task */} + + +
+ ); + } + + // Called on every row to map the data to the columns + function createData(member: Member): Member { + return { + ...member, + }; + } + + // Generate the every row of the table + // function Row(props: { row: ReturnType }) { + // const { row } = props; + // const [open, setOpen] = React.useState(true); + + // return ( + // + // *': { borderBottom: 'unset' } }}> + // + // setOpen(!open)}> + // {open ? : } + // + // + // {row.member_id} + // {row.payor_id} + // {row.name} + // {row.nik} + // {row.nric} + + // + // + // + // {/* */} + // + // {/* COLLAPSIBLE ROW */} + // + // + // + // + // + // + // + // + // + // + // + // + // ); + // } + + // Dummy Default Data + const [dataTableIsLoading, setDataTableLoading] = useState(true); + const [dataTableData, setDataTableData] = useState({ + current_page: 1, + data: [], + path: '', + first_page_url: '', + last_page: 1, + last_page_url: '', + next_page_url: '', + prev_page_url: '', + per_page: 10, + from: 0, + to: 0, + total: 0, + }); + + const loadDataTableData = async (appliedFilter: any | null = null) => { + setDataTableLoading(true); + const filter = appliedFilter ? appliedFilter : Object.fromEntries([...searchParams.entries()]); + const response = await axios.get('/members', { params: filter }); + + setDataTableData(response.data.members); + setDataTableLoading(false); + }; + + const headStyle = { + fontWeight: 'bold', + }; + + const applyFilter = async (searchFilter: string) => { + await loadDataTableData({ search: searchFilter }); + setSearchParams({ search: searchFilter }); + }; + + useEffect(() => { + loadDataTableData(); + }, []); + + return ( + + + {/* The Main Table */} + + + + + + MemberID + + + Name + + + Divisi + + + Limit + + + Status + + + Action + + + + {dataTableIsLoading ? ( + + + + No Data Found + + + + ) : dataTableData.data.length === 0 ? ( + + + + No Data + + + + ) : ( + + {/* {dataTableData.data.map((row) => ( + + ))} */} + Testing + + )} +
+ + + {/* */} + + ); +} diff --git a/frontend/client-portal/src/sections/dashboard/BalanceCard.tsx b/frontend/client-portal/src/sections/dashboard/BalanceCard.tsx index 12068d22..b2155ad6 100755 --- a/frontend/client-portal/src/sections/dashboard/BalanceCard.tsx +++ b/frontend/client-portal/src/sections/dashboard/BalanceCard.tsx @@ -25,11 +25,13 @@ const RootStyle = styled(Card)(({ theme }) => ({ // ---------------------------------------------------------------------- -const INITIAL = 500000000; -const TOTAL = 250000000; -const PERCENT = 50; +const INITIAL = '500.000.000'; +const TOTAL = 375000000; +const PERCENT = 75; + +export default function BalanceCard(props: any) { + const { setOpenPopup } = props; -export default function BalanceCard() { const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({ height: 10, borderRadius: 6, @@ -50,7 +52,7 @@ export default function BalanceCard() { Total Limit {fCurrency(TOTAL)} - / {INITIAL} + / {INITIAL} @@ -60,11 +62,23 @@ export default function BalanceCard() { - + - Lock Fund ( 25% ) - 125.000.000 / 125.000.000 + + + + Lock Fund ( 25% ) + + + + 125.000.000 / 125.000.000 + @@ -72,6 +86,7 @@ export default function BalanceCard() { variant="outlined" startIcon={} fullWidth={true} + onClick={() => setOpenPopup(true)} > Submit Claim diff --git a/frontend/client-portal/src/sections/dashboard/DashboardTable.tsx b/frontend/client-portal/src/sections/dashboard/DashboardTable.tsx index 3c72f744..032d50dd 100755 --- a/frontend/client-portal/src/sections/dashboard/DashboardTable.tsx +++ b/frontend/client-portal/src/sections/dashboard/DashboardTable.tsx @@ -148,7 +148,7 @@ export default function DashboardTable() { accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel, text/plain" /> */} {/* Button Add Task */} -