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

[WIP] Store Limit

Browse Source
This commit is contained in:
R
2022-12-05 04:30:00 +07:00
parent 2d5c7b571e
commit f5372e5d0a
19 changed files with 525 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/dashboard/src/components/dialogs/MemberSelectDialog.tsx
View File

@@ -251,7 +251,7 @@ export default function MemberSelectDialog({
const getContent = () => (
<Stack spacing={1} marginTop={2}>
<form onSubmit={handleFilterSubmit}>
<TextField label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchFilter.search}/>
<TextField label="Search" variant="outlined" fullWidth onChange={handleSearchChange} value={searchFilter.search} autoFocus/>
</form>
<DataTable
isLoading={dataTableLoading}

258
frontend/dashboard/src/pages/Claims/Create.tsx
View File

@@ -1,8 +1,8 @@
import * as Yup from 'yup';
import { yupResolver } from '@hookform/resolvers/yup';
import { Autocomplete, Button, Card, Collapse, Divider, Grid, Stack, TextField, Typography } from '@mui/material';
import { Autocomplete, Button, Card, Collapse, Divider, Grid, Stack, Table, TableBody, TableCell, TableRow, TextField, Typography } from '@mui/material';
import { Controller, useForm } from 'react-hook-form';
import { useParams } from 'react-router-dom';
import { useParams, useNavigate } from 'react-router-dom';
import HeaderBreadcrumbs from '../../components/HeaderBreadcrumbs';
import { FormProvider, RHFCheckbox, RHFSelect, RHFTextField } from '../../components/hook-form';
import Page from '../../components/Page';
@@ -13,22 +13,29 @@ import { styled } from '@mui/system';
import axios from '../../utils/axios';
import { enqueueSnackbar } from 'notistack';
import { LoadingButton } from '@mui/lab';
import { fCurrency } from '../../utils/formatNumber';
import Iconify from '../../components/Iconify';
export default function ClaimsCreate() {
const navigate = useNavigate();
export default function Create() {
const [member, setMember] = useState();
const selectedMemberDisplay = useRef<HTMLInputElement>(null);
const NewClaimSchema = Yup.object().shape({
name: Yup.string().required('Name is required'),
diagnosis_id: Yup.string().required('Diagnosis is required'),
total_claim: Yup.string().required('Total Claim is required'),
member_id: Yup.string().required('Please select Member'),
total_claim: Yup.number().typeError('Claim should be a number').min(1, 'Claim cannot 0').required('Total Claim is required'),
diagnosis: Yup.object().required('Choose Diagnosis'),
benefit: Yup.object().required('Please Select Benefit')
});
const defaultValues = useMemo(
() => ({
name: '',
member_id: null,
benefit_id: null,
diagnosis_id: null,
total_claim: 0,
benefit: null
}),
[]
);
@@ -50,13 +57,41 @@ export default function Create() {
} = methods;
const onSubmit = async (data: any) => {
console.log(data);
axios.post('claims', getValues())
.then(function(res) {
console.log('SUCCESS', res)
enqueueSnackbar('Success Creating Claim', { variant: 'success' })
navigate('/claims');
})
.catch(function (err) {
console.log('ERROR CUK', err.data)
enqueueSnackbar('Failed Creating Claim', { variant: 'error' })
})
};
const [memberBenefits, setMemberBenefits] = useState([]);
const getMemberBenefits = (member) => {
axios.get(`members/${member.id}/benefits`)
.then( (res) => {
setMemberBenefits(res.data);
})
.catch( (err) => {
enqueueSnackbar('Failed getting member benefits', { variant: 'error' })
})
}
const [isMemberDialogOpen, setIsMemberDialogOpen] = useState(false);
const memberSelected = (selectedMember: any) => {
// Reset Selected Benefit
setMemberBenefits([]);
setValue('benefit_id', null);
setValue('benefit', null);
setMember(selectedMember);
setValue('member_id', selectedMember.id)
getMemberBenefits(selectedMember)
};
const [diagnosis, setDiagnosis] = useState([]);
@@ -76,16 +111,12 @@ export default function Create() {
}, [])
const [isEligible, setIsEligible] = useState(false)
useEffect(() => {
setIsEligible(false)
console.log('member change')
}, [member])
const [isEligible, setIsEligible] = useState<boolean|null>(null)
const [isCheckingLimit, setIsCheckingLimit] = useState(false)
const checkLimit = (event) => {
event.preventDefault();
console.log(getValues('diagnosis_id'))
if (!member || !getValues('diagnosis_id')) {
enqueueSnackbar('Please Check the Data', { variant: 'error' })
@@ -109,6 +140,10 @@ export default function Create() {
setIsCheckingLimit(false)
})
}
const headStyle = {
fontWeight: 'bold'
};
return (
<Page title="Create Claim" sx={{ mx: 2 }}>
@@ -136,41 +171,115 @@ export default function Create() {
<Typography variant="h6">Member</Typography>
<Stack spacing={2} direction="row">
<Grid item xs={10}>
<TextField
<Grid item xs={12}>
<RHFTextField
name="member_id"
label="Member"
variant="outlined"
fullWidth
value={member?.name || ''}
ref={selectedMemberDisplay}
InputProps={{
readOnly: true,
}}
readOnly: true,
}}
onClick={() => {setIsMemberDialogOpen(true)}}
/>
</Grid>
<Grid item xs={2}>
{/* <Grid item xs={2}>
<Button variant="outlined" fullWidth sx={{ p: 1.8 }} onClick={() => {
setIsMemberDialogOpen(true)
}}>
Search
{member ? 'Change' : 'Search'}
</Button>
</Grid>
</Grid> */}
</Stack>
{ member && (
<Stack>
<div>
Plan : {JSON.stringify(member)}
</div>
<div>
Benefit :
</div>
<div>
Another :
</div>
<Grid container spacing={2}>
<Grid item xs={12} md={6}>
<Table border="light-700">
<TableBody>
<TableRow>
<TableCell style={headStyle} align="left">Name</TableCell>
<TableCell align="left">{member.full_name}</TableCell>
</TableRow>
<TableRow>
<TableCell style={headStyle} align="left">DOB</TableCell>
<TableCell align="left">{member.birth_date} ({member.age + ' years'})</TableCell>
</TableRow>
<TableRow>
<TableCell style={headStyle} align="left">Marital Status</TableCell>
<TableCell align="left">{member.marital_status}</TableCell>
</TableRow>
<TableRow>
<TableCell style={headStyle} align="left">Record Type</TableCell>
<TableCell align="left">{member.record_type}</TableCell>
</TableRow>
<TableRow>
<TableCell style={headStyle} align="left">Principal ID</TableCell>
<TableCell align="left">{member.principal_id} ({member.relation_with_principal})</TableCell>
</TableRow>
</TableBody>
</Table>
</Grid>
<Grid item xs={12} md={6}>
<Table border="light-700">
<TableBody>
<TableRow>
<TableCell style={headStyle} align="left">Plan</TableCell>
<TableCell align="left">{member.current_plan.code}</TableCell>
</TableRow>
<TableRow>
<TableCell style={headStyle} align="left">Active</TableCell>
<TableCell align="left">{member.current_plan.start} - {member.current_plan.end} (Active)</TableCell>
</TableRow>
<TableRow>
<TableCell style={headStyle} align="left">Corporate Limit</TableCell>
<TableCell align="left">{fCurrency(0)} / {fCurrency(member.current_plan.limit_rules)}</TableCell>
</TableRow>
<TableRow>
<TableCell style={headStyle} align="left">Plan Usage</TableCell>
<TableCell align="left">{fCurrency(0)} / {fCurrency(member.current_plan.limit_rules)}</TableCell>
</TableRow>
</TableBody>
</Table>
</Grid>
</Grid>
</Stack>
)}
<Controller
name="benefit"
control={control}
render={({ field: { onChange, value } }) => (
<Autocomplete
options={memberBenefits}
getOptionLabel={(option) =>
option ? `#${option.id} (${option.code}) ${option.description}` : ''
}
value={value || ''}
onChange={(event: any, newValue: any) => {
setValue('benefit_id', newValue?.id)
onChange(newValue);
}}
renderInput={(params) => (
<TextField
// name="benefit"
{...params}
label="Benefit"
variant="outlined"
fullWidth
// onKeyPress={(event) => {
// if (event.key === 'Enter')
// searchDiagnosis(event.target.value)
// }}
/>
)}
/>
)}
/>
<Controller
name="diagnosis"
control={control}
@@ -183,16 +292,19 @@ export default function Create() {
value={value || ''}
onChange={(event: any, newValue: any) => {
setValue('diagnosis_id', newValue?.id)
// setValue('diagnosis', newValue)
onChange(newValue);
}}
renderInput={(params) => (
<TextField
<RHFTextField
name="diagnosis"
{...params}
label="Diagnosis"
variant="outlined"
fullWidth
onChange={(event) => {
searchDiagnosis(event.target.value)
onKeyPress={(event) => {
if (event.key === 'Enter')
searchDiagnosis(event.target.value)
}}
/>
)}
@@ -200,10 +312,86 @@ export default function Create() {
)}
/>
{ isCheckingLimit && (
<Stack sx={{ backgroundColor: 'gray', paddingY: 1, paddingX: 1.5, mb: 2, borderRadius: '3-xl' }}>
{/* Checking */}
<Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
<Iconify
icon="bxs:info-circle"
width={12}
height={13}
sx={{ color: '#424242', marginRight: '6px' }}
/>
<Typography variant="caption" component="span">
Please Wait, Checking Eligibilty
</Typography>
</Typography>
</Stack>
)}
{ false && isCheckingLimit == false && isEligible == null && (
<Stack sx={{ backgroundColor: 'gray', paddingY: 1, paddingX: 1.5, mb: 2, borderRadius: '3-xl' }}>
{/* No Data Selected */}
<Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
<Iconify
icon="bxs:info-circle"
width={12}
height={13}
sx={{ color: '#424242', marginRight: '6px' }}
/>
<Typography variant="caption" component="span">
Please Select Diagnosis !
</Typography>
</Typography>
</Stack>
)}
{ (!isCheckingLimit && isEligible !== null) && isEligible && (
<Stack sx={{ backgroundColor: '#B2E8E8', paddingY: 1, paddingX: 1.5, mb: 2, borderRadius: '3-xl' }}>
{/* Eligible */}
<Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
<Iconify
icon="bxs:lock-alt"
width={12}
height={13}
sx={{ color: '#424242', marginRight: '6px' }}
/>
<Typography variant="caption" component="span">
Diagnosis is Eligible
</Typography>
</Typography>
<Typography sx={{ typography: 'caption', color: '#637381' }}>
125.000.000 / 125.000.000
</Typography>
</Stack>
)}
{ (!isCheckingLimit && isEligible !== null) && !isEligible && (
<Stack sx={{ backgroundColor: '#B2E8E8', paddingY: 1, paddingX: 1.5, mb: 2, borderRadius: '3-xl' }}>
{/* Not Eligible */}
<Typography sx={{ typography: 'caption', display: 'flex', alignItems: 'center' }}>
<Iconify
icon="bxs:lock-alt"
width={12}
height={13}
sx={{ color: '#424242', marginRight: '6px' }}
/>
<Typography variant="caption" component="span">
Not Eligible
</Typography>
</Typography>
<Typography sx={{ typography: 'caption', color: '#637381' }}>
125.000.000 / 125.000.000
</Typography>
</Stack>
)}
<RHFTextField type="number" name="total_claim" label="Total Claim" />
<LoadingButton onClick={handleSubmit(onSubmit)} variant="contained" color="success" style={{color: '#ffffff'}} size="large" fullWidth={true} loading={isCheckingLimit}>
Create Claim
</LoadingButton>
{ isEligible === true ? (
<LoadingButton onClick={checkLimit} variant="contained" color="success" style={{color: '#ffffff'}} size="large" fullWidth={true} loading={isCheckingLimit}>
<LoadingButton onClick={handleSubmit(onSubmit)} variant="contained" color="success" style={{color: '#ffffff'}} size="large" fullWidth={true} loading={isCheckingLimit}>
Create Claim
</LoadingButton>
) : (

1
frontend/dashboard/src/pages/Claims/Index.tsx
View File

@@ -14,6 +14,7 @@ export default function Claims() {
<HeaderBreadcrumbs
heading={ pageTitle }
links={[
{ name: 'Dashboard', href: '/dashboard' },
{
name: 'Claim',
href: '/claims',

8
frontend/dashboard/src/pages/Claims/List.tsx
View File

@@ -176,10 +176,10 @@ export default function List() {
</IconButton>
</TableCell>
<TableCell align="left">{row.code}</TableCell>
<TableCell align="left">{row.member.full_name}</TableCell>
<TableCell align="left">{row.plan.code}</TableCell>
<TableCell align="left">{row.benefit.code}</TableCell>
<TableCell align="left">({row.diagnosis.code}) {row.diagnosis.name}</TableCell>
<TableCell align="left">{row.member?.full_name}</TableCell>
<TableCell align="left">{row.plan?.code}</TableCell>
<TableCell align="left">{row.benefit?.code}</TableCell>
<TableCell align="left">({row.diagnosis?.code}) {row.diagnosis?.name}</TableCell>
<TableCell align="left">{fCurrency(row.total_claim)}</TableCell>
{/* <TableCell align="right"><Button variant="outlined" color="error" size="small">Disable</Button></TableCell> */}