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

claim reports slicing

Browse Source
This commit is contained in:
Muhammad Fajar
2022-11-17 15:55:55 +07:00
parent b36603833b
commit 3288f766f5
3 changed files with 167 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/client-portal/src/pages/ClaimReport/Index.tsx Executable file
View File

@@ -0,0 +1,46 @@
// @mui
import { Card, Container, Grid, TableBody, TableCell, TableRow } from '@mui/material';
// components
import Page from '../../components/Page';
// utils
import useSettings from '../../hooks/useSettings';
// theme
import palette from '../../theme/palette';
// section
import CardClaimStatus from '../../sections/claim-report/CardClaimStatus';
// ----------------------------------------------------------------------
const listClaimItems = [
{ 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 },
];
const testingData = [
{ label: 'Member ID', value: 'member_id' },
{ label: 'Name', value: 'name' },
{ label: 'Divisi', value: 'division_id' },
];
// ----------------------------------------------------------------------
export default function Drugs() {
const { themeStretch } = useSettings();
return (
<Page title="Claim Reports">
<Container maxWidth={themeStretch ? false : 'xl'}>
<Grid container spacing={2}>
<Grid item xs={12} lg={12} md={12}>
<CardClaimStatus data={listClaimItems} />
</Grid>
<Grid item xs={12} lg={12} md={12}>
<Card></Card>
</Grid>
</Grid>
</Container>
</Page>
);
}

22
frontend/client-portal/src/routes/index.tsx
View File

@@ -47,9 +47,6 @@ export default function Router() {
</AuthProvider>
),
},
// { path: 'login-unprotected', element: <Login /> },
// { path: 'register-unprotected', element: <Register /> },
// { path: 'reset-password', element: <ResetPassword /> },
],
},
{
@@ -89,6 +86,22 @@ export default function Router() {
},
],
},
{
path: '/claim-report',
element: (
<AuthProvider>
<AuthGuard>
<DashboardLayout />
</AuthGuard>
</AuthProvider>
),
children: [
{
element: <ClaimReport />,
index: true,
},
],
},
{
path: '*',
element: <LogoOnlyLayout />,
@@ -114,3 +127,6 @@ const AlarmCenter = Loadable(lazy(() => import('../pages/AlarmCenter/Index')));
const AlarmCenterServiceMonitoring = Loadable(
lazy(() => import('../pages/AlarmCenter/ServiceMonitoring'))
);
// Claim Report
const ClaimReport = Loadable(lazy(() => import('../pages/ClaimReport/Index')));

102
frontend/client-portal/src/sections/claim-report/CardClaimStatus.tsx Normal file
View File

@@ -0,0 +1,102 @@
// @mui
import { Grid, Card, Typography, Stack } from '@mui/material';
import { styled } from '@mui/material/styles';
// theme
import palette from '../../theme/palette';
// ----------------------------------------------------------------------
interface ClaimStatusType {
name: string;
value: number;
color: string;
}
interface PropsCardClaimStatus {
data?: ClaimStatusType[];
}
// ----------------------------------------------------------------------
const RootStyle = styled(Card)(({ theme }) => ({
boxShadow: 'none',
padding: theme.spacing(2),
color: 'black',
backgroundColor: theme.palette.grey[200],
}));
// ----------------------------------------------------------------------
const defaultData = [
{ name: 'Requested', value: 0, color: palette.dark.primary.dark },
{ name: 'Approval', value: 0, color: palette.dark.warning.dark },
{ name: 'Disbrusment', value: 0, color: palette.dark.success.dark },
{ name: 'Rejected', value: 0, color: palette.dark.error.dark },
];
// ----------------------------------------------------------------------
export default function CardClaimStatus({ data }: PropsCardClaimStatus) {
return (
<RootStyle>
<Stack sx={{ mb: 1 }}>
<Typography variant="body2">Claim Status</Typography>
</Stack>
<Grid container spacing={2}>
{data
? data.map(({ name, value, color }: ClaimStatusType, key) => (
<Grid item key={key} xs={6} sm={3}>
<Card
sx={{
paddingX: 1,
borderRadius: 0.75,
borderColor: color,
borderStyle: 'solid',
borderWidth: '1px',
padding: 2,
flex: 1,
textAlign: 'center',
}}
>
<Typography component="p" variant="body2">
{name}
</Typography>
<Typography component="p" variant="h5" sx={{ marginTop: 2 }}>
{value}
</Typography>
<Typography component="p" variant="body2" sx={{ marginTop: 2 }}>
Cases
</Typography>
</Card>
</Grid>
))
: defaultData.map(({ name, value, color }: ClaimStatusType, key) => (
<Grid item key={key} xs={6} sm={3}>
<Card
sx={{
paddingX: 1,
borderRadius: 0.75,
borderColor: color,
borderStyle: 'solid',
borderWidth: '1px',
padding: 2,
flex: 1,
textAlign: 'center',
}}
>
<Typography component="p" variant="body2">
{name}
</Typography>
<Typography component="p" variant="h5" sx={{ marginTop: 2 }}>
{value}
</Typography>
<Typography component="p" variant="body2" sx={{ marginTop: 2 }}>
Cases
</Typography>
</Card>
</Grid>
))}
</Grid>
</RootStyle>
);
}