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

Merge branch 'staging' of itcorp.primaya.id:rajif/aso into staging

Browse Source
This commit is contained in:
Tb Fajri
2023-10-13 10:47:26 +07:00
parent 54019e998d 44b1a153b1
commit 3e908471cf
23 changed files with 1050 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/client-portal/public/icons/ic_gmail.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.45456 17.9116V8.68687L2.57878 6.06959L0 4.61719V16.2837C0 17.1845 0.733594 17.9116 1.63641 17.9116H5.45456Z" fill="#4285F4"/>
<path d="M18.5469 17.9115H22.365C23.2706 17.9115 24.0014 17.1817 24.0014 16.2836V4.61719L21.0806 6.28074L18.5469 8.68677V17.9115Z" fill="#34A853"/>
<path d="M5.45381 8.68695L5.0625 5.08256L5.45381 1.63281L11.9993 6.5165L18.5447 1.63281L18.9824 4.89631L18.5447 8.68695L11.9993 13.5706L5.45381 8.68695Z" fill="#EA4335"/>
<path d="M18.5469 1.63247V8.6866L24.0014 4.61693V2.44639C24.0014 0.433277 21.6914 -0.71434 20.0743 0.492966L18.5469 1.63247Z" fill="#FBBC04"/>
<path d="M0 4.61697L2.50866 6.48878L5.45456 8.68665V1.63251L3.92719 0.493009C2.30719 -0.71439 0 0.43332 0 2.44633V4.61687V4.61697Z" fill="#C5221F"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 852 B

BIN
frontend/client-portal/public/images/gmail.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 638 B

69
frontend/client-portal/src/pages/ClaimReport/Detail.tsx Normal file
View File

@@ -0,0 +1,69 @@
// mui
import { Container, Grid, Stack, Typography } from '@mui/material';
// components
import Page from '../../components/Page';
// utils
import useSettings from '../../hooks/useSettings';
// section
import CardFamilyInformation from '../../sections/alarm-center/user-profile/CardFamilyInformation';
// react
import { useNavigate, useParams } from 'react-router-dom';
import ButtonBack from '../../components/ButtonBack';
import { useEffect, useState, useContext } from 'react';
import axios from '../../utils/axios';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
// pages
import DetailTimeline from '../../pages/ClaimReport/DetailTimeline';
import DetailStepper from '../../pages/ClaimReport/DetailStepper';
import { format } from 'date-fns';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
// ----------------------------------------------------------------------
export default function UserProfile() {
const navigate = useNavigate();
const { themeStretch } = useSettings();
const [data, setData] = useState();
const { corporateValue } = useContext(UserCurrentCorporateContext);
const { id } = useParams();
useEffect(() => {
axios
.get(corporateValue + '/claim-report/detail/' + id)
.then((response) => {
setData(response.data);
})
.catch((error) => {
console.error(error);
});
}, []);
return (
<Page title="Detail">
<Container maxWidth={themeStretch ? false : 'xl'}>
<Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
<ArrowBackIosIcon onClick={() => navigate(-1)} sx={{cursor:'pointer'}}/>
<Typography variant="h5" sx={{marginLeft:2}}>Detail</Typography>
{data ? (
<Stack direction="row" spacing={2} ml="auto">
<Typography variant="body2" sx={{color: '#757575'}}>Submission Date</Typography>
<Typography variant="body2" fontWeight="bold">{(data && data.data) ? format(new Date(data.data.status.submission_date), "d MMM yyyy") : ''}</Typography>
</Stack>
) : ''}
</Stack>
{data ? (
<Grid container spacing={2}>
<Grid item xs={12} md={12}>
<DetailStepper data={data}/>
</Grid>
<Grid item xs={12} md={12}>
<DetailTimeline data={data}/>
</Grid>
</Grid>
) : ''}
</Container>
</Page>
);
}

291
frontend/client-portal/src/pages/ClaimReport/DetailHistory.tsx Normal file
View File

@@ -0,0 +1,291 @@
// mui
import {
Container,
Grid,
Stack,
Typography,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
Button,
Box,
TableSortLabel,
Avatar } from '@mui/material';
// components
import Page from '../../components/Page';
// utils
import useSettings from '../../hooks/useSettings';
// section
import CardFamilyInformation from '../../sections/alarm-center/user-profile/CardFamilyInformation';
// react
import { useNavigate, useParams } from 'react-router-dom';
import ButtonBack from '../../components/ButtonBack';
import { useEffect, useState, useContext } from 'react';
import axios from '../../utils/axios';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
import { format } from 'date-fns';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
import { fCurrency } from '../../utils/formatNumber';
// ----------------------------------------------------------------------
export default function DetailHistory() {
const navigate = useNavigate();
const { themeStretch } = useSettings();
const [data, setData] = useState();
const { corporateValue } = useContext(UserCurrentCorporateContext);
const { id } = useParams();
useEffect(() => {
axios
.get(corporateValue + '/claim-report/detail-history/' + id)
.then((response) => {
setData(response.data);
})
.catch((error) => {
console.error(error);
});
}, []);
return (
<Page title="Detail">
<Container maxWidth={themeStretch ? false : 'xl'}>
<Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
<ArrowBackIosIcon onClick={() => navigate(-1)} sx={{cursor:'pointer'}}/>
<Typography variant="h5" sx={{marginLeft:2}}>History</Typography>
</Stack>
{data ? (
<Grid container spacing={3}>
<Grid item xs={12} md={12}>
<Stack direction="row" sx={{marginBottom:2}}>
<Typography variant="body2" sx={{color:'#637381', marginRight:1, flexBasis: '10%'}}>Name</Typography>
<Typography variant="body2" sx={{fontWeight: 'bold'}}>{data.data.member.name}</Typography>
</Stack>
<Stack direction="row" sx={{marginBottom:2}}>
<Typography variant="body2" sx={{color:'#637381', marginRight:1, flexBasis: '10%'}}>Member ID</Typography>
<Typography variant="body2" sx={{fontWeight: 'bold'}}>{data.data.member.member_id}</Typography>
</Stack>
<Stack direction="row" sx={{marginBottom:2}}>
<Typography variant="body2" sx={{color:'#637381', marginRight:1, flexBasis: '10%'}}>Claim Code</Typography>
<Typography variant="body2" sx={{fontWeight: 'bold'}}>{data.data.member.code}</Typography>
</Stack>
</Grid>
<Grid item xs={12} md={12}>
<TableContainer>
<Table aria-label="collapsible table" size="small">
{/* Table Header */}
<TableHead>
<TableRow>
<TableCell
align= 'left'
sx={{ padding: 2 }}
width= '5%'
>
<Typography variant="body2" sx={{color:'#637381'}}>No</Typography>
</TableCell>
<TableCell
align= 'left'
sx={{ padding: 2 }}
width= '15%'
>
<Typography variant="body2" sx={{color:'#637381'}}>Date</Typography>
</TableCell>
<TableCell
align= 'left'
sx={{ padding: 2 }}
width= '20%'
>
<Typography variant="body2" sx={{color:'#637381'}}>Requirment</Typography>
</TableCell>
<TableCell
align= 'left'
sx={{ padding: 2 }}
width= '20%'
>
<Typography variant="body2" sx={{color:'#637381'}}>Request Claim</Typography>
</TableCell>
<TableCell
align= 'left'
sx={{ padding: 2 }}
width= '20%'
>
<Typography variant="body2" sx={{color:'#637381'}}>Approval Claim</Typography>
</TableCell>
</TableRow>
</TableHead>
{/* End Table Header */}
{/* Table Body */}
<TableBody>
{data?.data?.claim_item?.length === 0 ? (
<TableRow>
<TableCell colSpan={5} align="center">
<Typography variant="body2">No data available</Typography>
</TableCell>
</TableRow>
) : (
data.data.claim_item?.map((dataItem, index) => (
<TableRow key={index}>
<TableCell align="left">
<Typography variant="body2">{parseInt(index)+1}</Typography>
</TableCell>
<TableCell align="center">
<Typography
sx={{
backgroundColor: '#919EAB29',
color: '#637381',
borderRadius: '4px',
width: '70%',
}}
variant="body2"
>
{format(new Date(dataItem.submission_date), "d MMM yyyy")}
</Typography>
</TableCell>
<TableCell align="left">
{dataItem.description}
</TableCell>
<TableCell align="left">
{fCurrency(dataItem.nominal_ditagihkan)}
</TableCell>
<TableCell align="left">
{fCurrency(dataItem.nominal_dicover)}
</TableCell>
</TableRow>
))
)}
</TableBody>
{/* End Table Body */}
</Table>
</TableContainer>
</Grid>
{data.data.tot_claim_item ? (
<Grid item xs={12} md={12}>
<TableContainer>
<Table aria-label="collapsible table" size="small">
{/* Table Body */}
<TableBody>
<TableRow sx={{ borderBottom: 0 }}>
<TableCell
align= 'left'
width= '5%'
>
</TableCell>
<TableCell
align= 'left'
width= '15%'
>
</TableCell>
<TableCell
align= 'left'
width= '20%'
>
</TableCell>
<TableCell
align= 'left'
width= '20%'
>
<Typography variant="body2" sx={{color:'#637381'}}>Request Claim</Typography>
</TableCell>
<TableCell
align= 'left'
width= '20%'
>
<Typography variant="body2" sx={{fontWeight: 'bold'}}>{data.data.tot_claim_item.nominal_ditagihkan ? fCurrency(data.data.tot_claim_item.nominal_ditagihkan) : '-'}</Typography>
</TableCell>
</TableRow>
<TableRow sx={{ borderBottom: 0 }}>
<TableCell
align= 'left'
width= '5%'
>
</TableCell>
<TableCell
align= 'left'
width= '15%'
>
</TableCell>
<TableCell
align= 'left'
width= '20%'
>
</TableCell>
<TableCell
align= 'left'
width= '20%'
>
<Typography variant="body2" sx={{color:'#637381'}}>Approval Claim</Typography>
</TableCell>
<TableCell
align= 'left'
width= '20%'
>
<Typography variant="body2" sx={{fontWeight: 'bold', color: '#FF4842'}}>{data.data.tot_claim_item.nominal_dicover ? fCurrency(data.data.tot_claim_item.nominal_dicover) : '-'}</Typography>
</TableCell>
</TableRow>
<TableRow sx={{ borderBottom: 0 }}>
<TableCell
align= 'left'
width= '5%'
>
</TableCell>
<TableCell
align= 'left'
width= '15%'
>
</TableCell>
<TableCell
align= 'left'
width= '20%'
>
</TableCell>
<TableCell
align= 'left'
width= '20%'
>
<Typography variant="body2" sx={{fontWeight: 'bold'}}>Difference</Typography>
</TableCell>
<TableCell
align= 'left'
width= '20%'
>
<Typography variant="body2" sx={{fontWeight: 'bold'}}>{data.data.tot_claim_item.difference ? fCurrency(data.data.tot_claim_item.difference) : '-'}</Typography>
</TableCell>
</TableRow>
</TableBody>
{/* End Table Body */}
</Table>
</TableContainer>
<Stack
direction="row"
justifyContent="flex-end"
alignItems="flex-end"
sx={{ marginTop: 15, padding: 2 }}
spacing={1}
>
<Typography variant="body2" sx={{ fontStyle: 'italic', color: '#637381' }}>Note : Apabila terdapat perbedaan nominal silahkan hubungi kami </Typography>
<img alt="Gmail Icon" sx={{ height: 32, width: 30 }} src="/images/gmail.png" />
</Stack>
</Grid>
) : ''}
</Grid>
) : ''}
</Container>
</Page>
);
}

58
frontend/client-portal/src/pages/ClaimReport/DetailStepper.tsx Normal file
View File

@@ -0,0 +1,58 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import Stepper from '@mui/material/Stepper';
import Step from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel';
import { useEffect, useState } from 'react';
import ClearIcon from '@mui/icons-material/Clear';
const steps = [
'Request',
'Review',
'Approval',
'Decline',
];
export default function HorizontalLinearAlternativeLabelStepper({data}) {
const [active, setActive] = useState(0);
const [status, SetStatus] = useState(null);
let updatedSteps = [...steps];
useEffect(() => {
if (data && data.data) {
if (data.data.status.status === 'requested') {
setActive(1);
updatedSteps = updatedSteps.filter(step => step !== 'Decline');
}
else if (data.data.status.status === 'reviewed') {
setActive(2);
updatedSteps = updatedSteps.filter(step => step !== 'Decline');
}
else if (data.data.status.status === 'approved')
{
setActive(3);
updatedSteps = updatedSteps.filter(step => step !== 'Decline');
}
else if(data.data.status.status === 'declined')
{
setActive(4)
updatedSteps = updatedSteps.filter(step => step !== 'Approval');
}
}
SetStatus(updatedSteps);
}, [data]);
return (
<Box sx={{ width: '100%', marginBottom: 2 }}>
<Stepper activeStep={active} alternativeLabel>
{status?.map((label) => (
<Step key={label}>
<StepLabel icon={label==='Decline' ? <ClearIcon sx={{ color: 'white', backgroundColor: 'red', borderRadius: '50%' }} /> : ''}>{label}</StepLabel>
</Step>
))}
</Stepper>
</Box>
);
}

106
frontend/client-portal/src/pages/ClaimReport/DetailTimeline.tsx Normal file
View File

@@ -0,0 +1,106 @@
import * as React from 'react';
import Timeline from '@mui/lab/Timeline';
import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem';
import TimelineSeparator from '@mui/lab/TimelineSeparator';
import TimelineConnector from '@mui/lab/TimelineConnector';
import TimelineContent from '@mui/lab/TimelineContent';
import TimelineDot from '@mui/lab/TimelineDot';
import {Typography, Card, Stack} from '@mui/material';
import { styled } from '@mui/material/styles';
import Paper from '@mui/material/Paper';
import Button from '@mui/material/Button';
import AddIcon from '@mui/icons-material/Add';
import Iconify from '../../components/Iconify';
import { useEffect, useState } from 'react';
import { format } from 'date-fns';
const Item1 = styled(Paper)(({ theme }) => ({
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
backgroundColor: '#919EAB29',
color: '#637381',
width: 'fit-content',
marginRight: 'auto',
}));
const Item2 = styled(Paper)(({ theme }) => ({
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
...theme.typography.body2,
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
width: 'fit-content',
marginLeft: 'auto',
}));
export default function NoOppositeContent({data}) {
const [timeline, setTimeline] = useState(null);
const [requestFile, setRequestFile] = useState(null);
useEffect(() => {
if (data && data.data) {
setTimeline(data.data.timeline);
setRequestFile(data.data.request_files);
}
}, [data]);
console.log(timeline);
console.log(requestFile);
return (
<>
{timeline?.map((dataTimeline, index) => (
<Timeline
sx={{
[`& .${timelineItemClasses.root}:before`]: {
flex: 0,
padding: 0,
},
}}
key={index}
>
<Typography variant="body2" gutterBottom fontWeight="bold">{dataTimeline.date ? format(new Date(dataTimeline.date), "d MMM yyyy") : ''}</Typography>
<TimelineItem>
<TimelineSeparator>
<TimelineDot />
<TimelineConnector />
</TimelineSeparator>
<TimelineContent spacing={3}>
<Card sx={{ borderRadius: '6px', paddingY: 2 }}>
<Stack sx={{marginLeft: 2, marginRight: 2, marginTop: 2 }}>
<Stack direction="row" spacing={2} sx={{marginBottom: 2, paddingBottom: 2, borderBottom: '1px solid #919EAB52' }}>
<Item1>{dataTimeline.date ? format(new Date(dataTimeline.date), "HH : ii") : ''}</Item1>
<Item2 sx={{backgroundColor: dataTimeline.txt_status_backgroundColor, color: dataTimeline.txt_status_color}}>{dataTimeline.txt_status}</Item2>
</Stack>
<Stack direction="row" spacing={2} sx={{marginBottom: 2}}>
<Typography variant="body2" gutterBottom>Detail:</Typography>
<Typography variant="body2" gutterBottom>{dataTimeline.description}</Typography>
</Stack>
{dataTimeline.status === 'reviewed' && requestFile ? (
<>
{requestFile?.map((dataRequestFile, index) => (
<Stack spacing={2} sx={{marginBottom: 2}} key={index}>
<Typography variant="body2" gutterBottom fontWeight="bold">{dataRequestFile.description}</Typography>
<Button variant="outlined" color="primary" startIcon={< AddIcon/>}>
<Typography variant="button" display="block">
{dataRequestFile.type === 'claim-diagnosis' ?
'Dokumen Diagnosa'
: dataRequestFile.type === 'claim-kondisi' ?
'Dokumen Kondisi'
: dataRequestFile.type === 'claim-result' ?
'Dokumen Hasil Penunjang'
: ''}
</Typography>
</Button>
</Stack>
))}
</>
) : ''}
</Stack>
</Card>
</TimelineContent>
</TimelineItem>
</Timeline>
))}
</>
);
}

21
frontend/client-portal/src/pages/ClaimReport/Index.tsx
View File

@@ -15,6 +15,7 @@ import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate
import List from './List';
// theme
import palette from '../../theme/palette';
import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
interface ClaimStatusType {
name: string;
@@ -35,17 +36,22 @@ export default function Drugs() {
{
name: 'Requested',
value: claimStatus.data.data.requesteds,
color: palette.dark.primary.dark,
color: '#159C9C',
},
{
name: 'Approval',
value: claimStatus.data.data.approveds,
color: palette.dark.warning.dark,
color: '#229A16',
},
// {
// name: 'Disbrusment',
// value: claimStatus.data.data.disbrusments,
// color: '#BF6919',
// },
{
name: 'Rejected',
name: 'Decline',
value: claimStatus.data.data.rejecteds,
color: palette.dark.error.dark,
color: '#B72136',
},
]);
})();
@@ -54,6 +60,13 @@ export default function Drugs() {
return (
<Page title="Claim Reports">
<Container maxWidth={themeStretch ? false : 'xl'}>
<HeaderBreadcrumbs
heading={'Claim Report'}
links={[
{ name: 'Case Management', href: '/claim-report' },
{ name: 'Claim Report', href: '/claim-report'}
]}
/>
<Grid container spacing={2}>
<Grid item xs={12} lg={12} md={12}>
<CardClaimStatus data={listClaimStatusItems} />

161
frontend/client-portal/src/pages/ClaimReport/List.tsx
View File

@@ -1,5 +1,5 @@
/* ---------------------------------- @mui ---------------------------------- */
import { Stack, Button } from '@mui/material';
import { Stack, Button, MenuItem } from '@mui/material';
/* ---------------------------------- axios --------------------------------- */
// import axios from 'axios';
import axios from '../../utils/axios';
@@ -15,6 +15,12 @@ import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate
import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
import { useSearchParams, useNavigate } from 'react-router-dom';
import { fDate } from '../../utils/formatTime';
import Typography from '@mui/material/Typography';
import { format } from 'date-fns';
import TableMoreMenu from '../../components/table/TableMoreMenu';
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
import HistoryIcon from '@mui/icons-material/History';
import SearchIcon from '@mui/icons-material/Search';
export default function List() {
const navigate = useNavigate();
@@ -47,7 +53,7 @@ export default function List() {
/* ------------------------------ handle order ------------------------------ */
const [order, setOrder] = useState<Order>('desc');
const [orderBy, setOrderBy] = useState('codeRequest');
const [orderBy, setOrderBy] = useState('member_id');
const orders = {
order: order,
@@ -109,41 +115,41 @@ export default function List() {
/* -------------------------------- headCell -------------------------------- */
const headCells: HeadCell<never>[] = [
{
id: 'memberId',
id: 'submission_date',
align: 'center',
label: 'Request Date',
isSort: true,
},
{
id: 'member_id',
align: 'left',
label: 'Member ID',
isSort: true,
},
{
id: 'codeRequest',
id: 'code',
align: 'left',
label: 'Code Request',
label: 'Claim Code',
isSort: true,
},
{
id: 'submissionDate',
align: 'left',
label: 'Request Date',
isSort: true,
},
{
id: 'fullName',
id: 'full_name',
align: 'left',
label: 'Name',
isSort: true,
},
{
id: 'division',
id: 'division_name',
align: 'left',
label: 'Divisi',
isSort: false,
label: 'Division',
isSort: true,
},
{
id: 'status',
align: 'center',
label: 'Status',
isSort: false,
isSort: true,
},
{
id: 'action',
@@ -173,44 +179,92 @@ export default function List() {
...obj,
status:
obj.status === 'requested' ? (
<Button
onClick={() => navigate(`dialog-detail/${obj.claimRequestId}`)}
<Typography
variant="body2"
sx={{
backgroundColor: 'rgba(84, 214, 44, 0.16)',
color: palette.dark.success.dark,
paddingX: 1.5,
paddingY: 1,
'&:hover': {
backgroundColor: 'rgba(84, 214, 44, 0.16)',
color: palette.dark.success.dark,
},
width: 'Hug (6px)',
height: 'Hug (22px)',
left: '862px',
top: '17px',
color: '#159C9C',
backgroundColor: '#00AB5529',
padding: '1px, 8px',
borderRadius: '6px',
}}
>
Request
</Button>
</Typography>
) : obj.status === 'approved' ? (
<Button
onClick={() => navigate(`dialog-detail/${obj.claimRequestId}`)}
<Typography
variant="body2"
sx={{
backgroundColor: (theme) => theme.palette.secondary.main,
color: '#FFFF',
paddingX: 1.5,
paddingY: 1,
'&:hover': {
backgroundColor: (theme) => theme.palette.secondary.dark,
color: '#FFFF',
},
width: 'Hug (6px)',
height: 'Hug (22px)',
left: '862px',
top: '17px',
color: '#229A16',
backgroundColor: '#54D62C29',
padding: '1px, 8px',
borderRadius: '6px',
}}
>
Approved
</Button>
Approval
</Typography>
) : obj.status === 'declined' ? (
<Typography
variant="body2"
sx={{
width: 'Hug (6px)',
height: 'Hug (22px)',
left: '862px',
top: '17px',
color: '#B72136',
backgroundColor: '#FF484229',
padding: '1px, 8px',
borderRadius: '6px',
}}
>
Decline
</Typography>
) : obj.status === 'pending' ? (
<Typography
variant="body2"
sx={{
width: 'Hug (6px)',
height: 'Hug (22px)',
left: '862px',
top: '17px',
color: '#BF6919',
backgroundColor: '#FFC10729',
padding: '1px, 8px',
borderRadius: '6px',
}}
>
Pending
</Typography>
) : obj.status === 'reviewed' ? (
<Typography
variant="body2"
sx={{
width: 'Hug (6px)',
height: 'Hug (22px)',
left: '862px',
top: '17px',
color: '#0C53B7',
backgroundColor: '#1890FF29',
padding: '1px, 8px',
borderRadius: '6px',
}}
>
Review
</Typography>
) : (
<Button
startIcon={<Iconify icon="fa6-solid:clock" />}
sx={{
backgroundColor: '#CD7B2E',
color: '#FFFF',
paddingX: 1.5,
padding: '1px, 8px',
paddingY: 1,
'&:hover': {
backgroundColor: '#BF6919',
@@ -221,8 +275,31 @@ export default function List() {
Ongoing
</Button>
),
submissionDate:
obj.submissionDate ? fDate(obj.submissionDate) : ''
submission_date:
<Typography
sx={{
backgroundColor: (theme) => theme.palette.grey[300],
borderRadius: '4px',
width: '70%',
}}
variant="body2"
>
{obj.submission_date ? format(new Date(obj.submission_date), "d MMM yyyy") : ''}
</Typography>
,
action:
<TableMoreMenu actions={
<>
<MenuItem onClick={() => navigate ('/claim-report/detail/'+obj.claimRequestId)}>
<SearchIcon />
Detail
</MenuItem>
<MenuItem onClick={() => navigate ('/claim-report/detail-history/'+obj.claimRequestId)}>
<HistoryIcon />
History
</MenuItem>
</>
} />
}))
);

2
frontend/client-portal/src/pages/EmployeeData/Index.tsx
View File

@@ -113,11 +113,9 @@ export default function Drugs() {
/>
<Grid container>
<Grid item xs={12} lg={12} md={12}>
<Card>
<TabPanel value={value} index={0}>
<List />
</TabPanel>
</Card>
</Grid>
</Grid>
</Container>

60
frontend/client-portal/src/pages/EmployeeData/List.tsx
View File

@@ -250,24 +250,24 @@ export default function List() {
{
id: 'start_date',
align: 'left',
align: 'center',
label: 'Start Date',
isSort: true,
},
{
id: 'end_date',
align: 'left',
align: 'center',
label: 'End Date',
isSort: true,
},
{
id: 'status',
align: 'left',
align: 'center',
label: 'Status',
isSort: true,
},
{
id: 'view',
id: 'action',
align: 'center',
label: '',
isSort: true,
@@ -289,9 +289,7 @@ export default function List() {
const response = await axios.get(`${corporateValue}/members?type=employee-data`, {
params: { ...parameters },
});
console.log(response.data.data);
setData(
response.data.data.map((obj: any) => {
return {
@@ -303,34 +301,48 @@ export default function List() {
// ,
status:
obj.status === 1 ? (
<Button
variant="outlined"
color="success"
size="small"
sx={{cursor:'default'}}
<Typography
variant="body2"
sx={{
width: 'Hug (6px)',
height: 'Hug (22px)',
left: '862px',
top: '17px',
color: '#229A16',
backgroundColor: '#54D62C29',
padding: '1px, 8px',
borderRadius: '6px',
}}
>
Active
</Button>
</Typography>
) : (
<Button
variant="outlined"
color="error"
size="small"
sx={{cursor:'default'}}
<Typography
variant="body2"
sx={{
width: 'Hug (6px)',
height: 'Hug (22px)',
left: '862px',
top: '17px',
color: '#B72136',
backgroundColor: '#FF484229',
padding: '1px, 8px',
borderRadius: '6px',
}}
>
Inactive
</Button>
</Typography>
),
start_date:
<Typography
sx={{
backgroundColor: (theme) => theme.palette.grey[300],
borderRadius: '4px',
width: '95%',
width: '70%',
}}
variant="body2"
>
{obj.start_date ? format(new Date(obj.start_date), "dd MMMM yyyy HH:mm:ss") : ''}
{obj.start_date ? format(new Date(obj.start_date), "dd MMM yyyy") : ''}
</Typography>
,
end_date:
@@ -338,11 +350,11 @@ export default function List() {
sx={{
backgroundColor: (theme) => theme.palette.grey[300],
borderRadius: '4px',
width: '95%',
width: '70%',
}}
variant="body2"
>
{obj.end_date ? format(new Date(obj.end_date), "d MMMM yyyy HH:mm:ss") : ''}
{obj.end_date ? format(new Date(obj.end_date), "d MMM yyyy") : ''}
</Typography>
,
fullName:
@@ -359,7 +371,7 @@ export default function List() {
{obj.memberId}
</Typography>
,
view:
action:
<TableMoreMenu actions={
<>
<MenuItem onClick={() => navigate ('/employee-data/user-profile/'+obj.personId)}>

11
frontend/client-portal/src/pages/EmployeeData/UserProfile.tsx
View File

@@ -17,12 +17,13 @@ import ButtonBack from '../../components/ButtonBack';
import { useEffect, useState, useContext } from 'react';
import axios from '../../utils/axios';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
// ----------------------------------------------------------------------
export default function UserProfile() {
const { themeStretch } = useSettings();
// const navigate = useNavigate();
const navigate = useNavigate();
const [data, setData] = useState();
const { corporateValue } = useContext(UserCurrentCorporateContext);
@@ -44,13 +45,14 @@ export default function UserProfile() {
return (
<Page title="Profile">
<Container maxWidth={themeStretch ? false : 'xl'}>
<Stack direction="row" alignItems="center" sx={{ marginBottom: 2 }}>
<Stack direction="row" alignItems="center" sx={{ marginBottom: 3 }}>
{/* <IconButton sx={{ marginRight: '10px', color: '#424242' }} onClick={() => navigate()}>
<Iconify icon="heroicons-outline:arrow-narrow-left" />
</IconButton> */}
<ButtonBack />
<Typography variant="h5">Profile</Typography>
<ArrowBackIosIcon sx={{cursor:'pointer'}} onClick={() => navigate(-1)}/>
<Typography variant="h5" sx={{marginLeft:2}}>Profile</Typography>
</Stack>
{data ? (
<Grid container spacing={2}>
{/* Row 1 */}
<Grid item xs={12} md={12}>
@@ -60,6 +62,7 @@ export default function UserProfile() {
<CardFamilyInformation data={data} />
</Grid>
</Grid>
) : ''}
</Container>
</Page>
);

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

@@ -174,9 +174,13 @@ export default function Router() {
index: true,
},
{
path: 'dialog-detail/:id',
element: <DialogDetailClaim />,
path: '/claim-report/detail/:id',
element: <DetailClaimReport />,
},
{
path: '/claim-report/detail-history/:id',
element: <DetailHitoryClaimReport />,
}
],
},
{
@@ -259,6 +263,8 @@ const ClaimReport = Loadable(lazy(() => import('../pages/ClaimReport/Index')));
const Claims = Loadable(lazy(() => import('../pages/Claims/Index')));
const ClaimShow = Loadable(lazy(() => import('../pages/Claims/Show')));
const DialogDetailClaim = Loadable(lazy(()=> import('../pages/ClaimReport/DialogDetailClaim')));
const DetailClaimReport = Loadable(lazy(()=> import('../pages/ClaimReport/Detail')));
const DetailHitoryClaimReport = Loadable(lazy(()=> import('../pages/ClaimReport/DetailHistory')));
// Claim submit
const ClaimSubmit = Loadable(lazy(() => import('../pages/ClaimSubmit/Index')));

2
frontend/client-portal/src/sections/alarm-center/user-profile/CardFamilyInformation.tsx
View File

@@ -117,7 +117,7 @@ export default function CardFamilyInformation({ data }) {
<Grid container maxHeight="584px" spacing={2} paddingX={2} sx={{ overflowY: 'auto' }}>
{data?.family.map((familyMember, index) => (
<Grid item xs={12} sm={6} md={6} key={index}>
<Card sx={{ paddingX: 1.5, paddingY: 1 }}>
<Card sx={{ paddingX: 1.5, paddingY: 1, marginBottom: 2 }}>
{/* Stack 1 */}
<Stack
direction="row"

10
frontend/client-portal/src/sections/claim-report/CardClaimStatus.tsx
View File

@@ -30,7 +30,7 @@ const RootStyle = styled(Card)(({ theme }) => ({
const defaultData = [
{ name: 'Requested', value: 5, color: palette.dark.primary.dark },
{ name: 'Approval', value: 1, color: palette.dark.warning.dark },
{ name: 'Disbrusment', value: 0, color: palette.dark.success.dark },
//{ name: 'Disbrusment', value: 0, color: palette.dark.success.dark },
{ name: 'Rejected', value: 3, color: palette.dark.error.dark },
];
@@ -39,13 +39,13 @@ const defaultData = [
export default function CardClaimStatus({ data }: PropsCardClaimStatus) {
return (
<RootStyle>
<Stack sx={{ mb: 1 }}>
{/*<Stack sx={{ mb: 1 }}>
<Typography variant="body2">Claim Status</Typography>
</Stack>
</Stack>*/}
<Grid container spacing={2}>
{data
? data.map(({ name, value, color }: ClaimStatusType, key) => (
<Grid item key={key} xs={6} sm={4}>
<Grid item key={key} xs={12} sm={4}>
<Card
sx={{
paddingX: 1,
@@ -71,7 +71,7 @@ export default function CardClaimStatus({ data }: PropsCardClaimStatus) {
</Grid>
))
: defaultData.map(({ name, value, color }: ClaimStatusType, key) => (
<Grid item key={key} xs={6} sm={4}>
<Grid item key={key} xs={12} sm={3}>
<Card
sx={{
paddingX: 1,

3
frontend/dashboard/src/pages/Claims/components/Documents.tsx
View File

@@ -97,9 +97,6 @@ export default function Documents({ files }) {
<Stack sx={{px: 2}}>
<Typography variant="body2">Dokumen Diagnosa</Typography>
</Stack>
<Stack sx={{px: 2}}>
<Typography variant="body2">Dokumen Diagnosa</Typography>
</Stack>
</Stack>