LMSN-213
Client/User dapat melihat List Claim dan Total Claim
This commit is contained in:
ivan-sim
@@ -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: 'Rejected',
|
||||
name: 'Disbrusment',
|
||||
value: claimStatus.data.data.disbrusments,
|
||||
color: '#BF6919',
|
||||
},
|
||||
{
|
||||
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} />
|
||||
|
||||
@@ -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('code');
|
||||
|
||||
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',
|
||||
@@ -168,49 +174,99 @@ export default function List() {
|
||||
params: { ...parameters, type: 'claim-report' },
|
||||
});
|
||||
|
||||
console.log(response.data.data);
|
||||
|
||||
setData(
|
||||
response.data.data.map((obj: any) => ({
|
||||
...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 === 'review' ? (
|
||||
<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 +277,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 ('/employee-data/user-profile/'+obj.personId)}>
|
||||
<SearchIcon />
|
||||
Detail
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => navigate ('/employee-data/user-profile/'+obj.personId)}>
|
||||
<HistoryIcon />
|
||||
History
|
||||
</MenuItem>
|
||||
</>
|
||||
} />
|
||||
}))
|
||||
);
|
||||
|
||||
|
||||
@@ -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)}>
|
||||
|
||||
@@ -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={3}>
|
||||
<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,
|
||||
|
||||
Reference in New Issue
Block a user