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

update data di service monitoring, dan alarm center benefit summary

Browse Source
This commit is contained in:
pajri
2023-07-07 10:30:17 +07:00
parent 2157c14f8d
commit 40da45c9ff
17 changed files with 2786 additions and 2725 deletions
Download Patch File Download Diff File Expand all files Collapse all files

220
frontend/client-portal/src/sections/alarm-center/user-profile/CardBenefitSummary.tsx
View File

@@ -8,6 +8,8 @@ import {
linearProgressClasses,
Grid,
} from '@mui/material';
import { useEffect, useState } from 'react';
import { description } from '../../../../../dashboard/src/_mock/text';
// ----------------------------------------------------------------------
@@ -25,203 +27,49 @@ const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
// ----------------------------------------------------------------------
export default function CardBenefitSummary() {
export default function CardBenefitSummary({ data }) {
const [benefits, setBenefits] = useState([]);
console.log('data', data);
useEffect(() => {
setBenefits(data);
}, [data]);
return (
<div style={{ marginTop: '1rem' }}>
<Typography padding={1} variant="subtitle2">
Benefit Summary
</Typography>
<Card>
{/* {Object.entries(benefits?.data).map(([key, value]) => (
<div key={key}>
<span>Haloo</span>
</div>
))} */}
<Grid container spacing={1} marginTop={1} sx={{ backgroundColor: '#F4F6F8', padding: 1 }}>
{/* Card 1 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Rawat Jalan
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
{benefits?.map((item, key) => (
<Grid item xs={12} sm={6} md={6} lg={4} key={key}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
{item?.description}
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{/* Card 2 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Rawat Inap
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">0</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
{item?.pivot['limit_amount']}
</Typography>
</Stack>
</Stack>
</Stack>
</Card>
</Grid>
{/* Card 3 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Manfaat Special
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{/* Card 4 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Manfaat Special
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{/* Card 5 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Perobatan Mata
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{/* Card 6 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Perawatan Gigi
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{/* Card 7 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Kehamilan
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{/* Card 8 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Laboratorium
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
{/* Card 9 */}
<Grid item xs={12} sm={6} md={6} lg={4}>
<Card sx={{ padding: 1 }}>
<Stack spacing={1}>
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
Manfaat Farmasi
</Typography>
<Typography variant="body2" color="#0A0A0A">
Yearly Limits
</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<Stack direction="row" spacing={0.25}>
<Typography variant="body2">10.000.000</Typography>
<Typography>/</Typography>
<Typography variant="body2" color="#757575">
10.000.000
</Typography>
</Stack>
</Stack>
</Card>
</Grid>
</Card>
</Grid>
))}
</Grid>
</Card>
</div>

4
frontend/client-portal/src/sections/alarm-center/user-profile/CardClaimHistory.tsx
View File

@@ -33,10 +33,10 @@ const rows = [
// ----------------------------------------------------------------------
export default function CardClaimHistory() {
export default function CardClaimHistory(benefitMember) {
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(5);
console.log('benefitMember', benefitMember);
const handleChangePage = (event: React.MouseEvent<HTMLButtonElement> | null, newPage: number) => {
setPage(newPage);
};

167
frontend/client-portal/src/sections/alarm-center/user-profile/CardPersonalInformation.tsx
View File

@@ -9,21 +9,18 @@ import { UserCurrentCorporateContext } from '../../../contexts/UserCurrentCorpor
import { useParams } from 'react-router-dom';
import { Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
import { enqueueSnackbar } from 'notistack';
import { fDate } from '../../../utils/formatTime';
export default function CardPersonalInformation({data}) {
export default function CardPersonalInformation({ data }) {
/* const [data, setData] = useState(); */
const [openDialog, setOpenDialog] = useState(false);
const [editedData, setEditedData] = useState(null);
const { id } = useParams();
const [weight, setWeight] = useState(data?.last_weight_kg || '');
const [height, setHeight] = useState(data?.last_height_cm || '');
const [email, setEmail] = useState(data?.email || '' );
const [phone, setPhone] = useState(data?.phone || '' );
const [address, setAddress] = useState(data?.main_address_id || '' );
const [email, setEmail] = useState(data?.email || '');
const [phone, setPhone] = useState(data?.phone || '');
const [address, setAddress] = useState(data?.main_address_id || '');
/* const [updatedData, setUpdatedData] = useState(data); */
@@ -31,13 +28,11 @@ export default function CardPersonalInformation({data}) {
setWeight(data?.last_weight_kg || '');
setHeight(data?.last_height_cm || '');
setEmail(data?.email || '');
setPhone(data?.phone||'');
setAddress(data?.main_address_id||'');
setPhone(data?.phone || '');
setAddress(data?.main_address_id || '');
setEditedData(data);
setOpenDialog(true);
};
const handleCloseDialog = () => {
// Close the dialog
@@ -56,7 +51,7 @@ export default function CardPersonalInformation({data}) {
phone: phone,
main_address_id: address,
};
// Update the data in the database using the updatedData object
axios
.put('/data/' + id, updatedData)
@@ -70,17 +65,9 @@ export default function CardPersonalInformation({data}) {
enqueueSnackbar('Failed to update data', { variant: 'error' });
});
};
return (
<Card sx={{ borderRadius: '6px', paddingY: 2 }}>
{/* Stack 1 */}
<Stack
direction="row"
@@ -89,7 +76,9 @@ export default function CardPersonalInformation({data}) {
sx={{ paddingY: 1, paddingX: 3 }}
>
<Typography variant="subtitle2">Informasi Pribadi</Typography>
<Button startIcon={<Iconify icon="heroicons:pencil-solid" />} onClick={handleEditData}>Edit Data</Button>
<Button startIcon={<Iconify icon="heroicons:pencil-solid" />} onClick={handleEditData}>
Edit Data
</Button>
</Stack>
{/* Stack 2 */}
<Stack direction="row" spacing={2} paddingX={2}>
@@ -119,15 +108,15 @@ export default function CardPersonalInformation({data}) {
<Stack direction="row" paddingY={1} spacing={2} sx={{ flex: '100%' }}>
<Stack sx={{ width: '60%' }}>
<Typography variant="caption">Nama Lengkap</Typography>
<Typography variant="body2"> {data ?. name} </Typography>
<Typography variant="body2"> {data?.name} </Typography>
</Stack>
<Stack sx={{ width: '20%' }}>
<Typography variant="caption">Berat Badan </Typography>
<Typography variant="body2">{data ?. last_weight_kg} kg</Typography>
<Typography variant="body2">{data?.last_weight_kg} kg</Typography>
</Stack>
<Stack sx={{ width: '20%' }}>
<Typography variant="caption">Tinggi Badan </Typography>
<Typography variant="body2">{data ?. last_height_cm} cm</Typography>
<Typography variant="body2">{data?.last_height_cm} cm</Typography>
</Stack>
</Stack>
</Stack>
@@ -139,15 +128,18 @@ export default function CardPersonalInformation({data}) {
<Stack direction="row" spacing={2} sx={{ flex: '100%' }}>
<Stack sx={{ width: '100%' }}>
<Typography variant="caption">Tempat Lahir</Typography>
<Typography variant="body2"> {data ?. birth_place} </Typography>
<Typography variant="body2"> {data?.birth_place} </Typography>
</Stack>
<Stack sx={{ width: '100%' }}>
<Typography variant="caption">Tanggal Lahir</Typography>
<Typography variant="body2">{data ?. birth_date}</Typography>
<Typography variant="body2">
{' '}
{data?.birth_date ? fDate(data?.birth_date) : ''}
</Typography>
</Stack>
<Stack sx={{ width: '100%' }}>
<Typography variant="caption">Jenis Kelamin</Typography>
<Typography variant="body2">{data ?. gender}</Typography>
<Typography variant="body2">{data?.gender}</Typography>
</Stack>
</Stack>
</Stack>
@@ -157,18 +149,16 @@ export default function CardPersonalInformation({data}) {
<Stack direction="row" spacing={2} sx={{ flex: '100%' }}>
<Stack sx={{ width: '100%' }}>
<Typography variant="caption">Nomor Telpon</Typography>
<Typography variant="body2">{data ?. phone}</Typography>
<Typography variant="body2">{data?.phone}</Typography>
</Stack>
<Stack sx={{ width: '100%' }}>
<Typography variant="caption">Email</Typography>
<Typography variant="body2">{data?. email}</Typography>
<Typography variant="body2">{data?.email}</Typography>
</Stack>
</Stack>
<Stack>
<Typography variant="caption">Alamat</Typography>
<Typography variant="body2">
{data ?. main_address_id}
</Typography>
<Typography variant="body2">{data?.main_address_id}</Typography>
</Stack>
</Stack>
{/* Stack 3.3 */}
@@ -183,7 +173,7 @@ export default function CardPersonalInformation({data}) {
>
<Stack>
<Typography variant="caption">Nomor NIK</Typography>
<Typography variant="body2">{data ?. nik}</Typography>
<Typography variant="body2">{data?.nik}</Typography>
</Stack>
<Stack>
<Button variant="contained" startIcon={<VisibilityIcon />}>
@@ -198,65 +188,65 @@ export default function CardPersonalInformation({data}) {
<Stack direction="row" justifyContent="space-between" spacing={2} sx={{ flex: '100%' }}>
<Stack>
<Typography variant="caption">Agama</Typography>
<Typography variant="body2">{data ?. religion}</Typography>
<Typography variant="body2">{data?.religion}</Typography>
</Stack>
<Stack>
<Typography variant="caption">Status</Typography>
<Typography variant="body2">{data ?. marital_status}</Typography>
<Typography variant="body2">{data?.marital_status}</Typography>
</Stack>
<Stack>
<Typography variant="caption">Pendidikan</Typography>
<Typography variant="body2">{data ?. last_education}</Typography>
<Typography variant="body2">{data?.last_education}</Typography>
</Stack>
<Stack>
<Typography variant="caption">Pekerjaan</Typography>
<Typography variant="body2">{data ?. current_employment}</Typography>
<Typography variant="body2">{data?.current_employment}</Typography>
</Stack>
</Stack>
</Stack>
</Stack>
{/* Dialog */}
<Dialog open={openDialog} onClose={handleCloseDialog}>
<DialogTitle>Edit Data</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<TextField
label="Full Name"
value={editedData ? editedData.name : ''}
onChange={(e) => setEditedData({ ...editedData, name: e.target.value })}
fullWidth
sx={{ marginTop: '16px' }}
/>
<TextField
label="Weight (kg)"
value={weight}
onChange={(e) => setWeight(e.target.value)}
fullWidth
sx={{ marginTop: '16px' }}
/>
<TextField
label="Height (cm)"
value={height}
onChange={(e) => setHeight(e.target.value)}
fullWidth
sx={{ marginTop: '16px' }}
/>
<TextField
label="Email Address"
value={email}
onChange={(e) => setEmail(e.target.value)}
fullWidth
sx={{ marginTop: '16px' }}
/>
<TextField
label="Phone No."
value={phone}
onChange={(e) => setPhone(e.target.value)}
fullWidth
sx={{ marginTop: '16px' }}
/>
{/* <TextField
<Dialog open={openDialog} onClose={handleCloseDialog}>
<DialogTitle>Edit Data</DialogTitle>
<DialogContent>
<Stack spacing={2}>
<TextField
label="Full Name"
value={editedData ? editedData.name : ''}
onChange={(e) => setEditedData({ ...editedData, name: e.target.value })}
fullWidth
sx={{ marginTop: '16px' }}
/>
<TextField
label="Weight (kg)"
value={weight}
onChange={(e) => setWeight(e.target.value)}
fullWidth
sx={{ marginTop: '16px' }}
/>
<TextField
label="Height (cm)"
value={height}
onChange={(e) => setHeight(e.target.value)}
fullWidth
sx={{ marginTop: '16px' }}
/>
<TextField
label="Email Address"
value={email}
onChange={(e) => setEmail(e.target.value)}
fullWidth
sx={{ marginTop: '16px' }}
/>
<TextField
label="Phone No."
value={phone}
onChange={(e) => setPhone(e.target.value)}
fullWidth
sx={{ marginTop: '16px' }}
/>
{/* <TextField
label="Address"
value={address}
onChange={(e) => setAddress(e.target.value)}
@@ -264,18 +254,17 @@ export default function CardPersonalInformation({data}) {
sx={{ marginTop: '16px' }}
/> */}
{/* Add more fields as needed */}
</Stack>
</DialogContent>
{/* Add more fields as needed */}
</Stack>
</DialogContent>
<DialogActions>
<Button onClick={handleCloseDialog}>Cancel</Button>
<Button onClick={handleSaveData} variant="contained" color="primary">
Save
</Button>
</DialogActions>
</Dialog>
<DialogActions>
<Button onClick={handleCloseDialog}>Cancel</Button>
<Button onClick={handleSaveData} variant="contained" color="primary">
Save
</Button>
</DialogActions>
</Dialog>
</Card>
);
}

115
frontend/client-portal/src/sections/alarm-center/user-profile/CardPolicyNumber.tsx
View File

@@ -20,7 +20,6 @@ const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
},
}));
type DataMember = {
id: number;
fullName: string;
@@ -65,18 +64,17 @@ type CardPolicyProps = {
members?: DataMember[];
};
// ----------------------------------------------------------------------
export default function CardPolicyNumber() {
export default function CardPolicyNumber({ data }) {
const { corporateValue } = useContext(UserCurrentCorporateContext);
const [policyNumber, setPolicyNumber] = useState('');
const [policyData, setPolicyData] = useState<CardPolicyProps>();
const { corporateValue } = useContext(UserCurrentCorporateContext);
const [policyNumber,setPolicyNumber] = useState('');
const [policyData, setPolicyData] = useState<CardPolicyProps>();
const [limitMember, setLimitMember] = useState();
const [benefitMember, setBenefitMember] = useState();
/* axios.get(`${corporateValue}/topup`)
/* axios.get(`${corporateValue}/topup`)
.then(response => {
console.log(response.data);
})
@@ -84,63 +82,68 @@ export default function CardPolicyNumber() {
console.error(error);
}); */
useEffect(() => {
useEffect(() => {
axios
.get(`${corporateValue}/topup`)
.then(response => {
.then((response) => {
const { data } = response.data; // Access the 'data' object from the response
const { policyNumber } = data; // Access the 'policyNumber' field from the 'data' object
setPolicyNumber(policyNumber);
})
.catch(error => {
.catch((error) => {
console.error(error);
});
// const corporatePolicyLimit = axios.get(`${corporateValue}/policy`);
// const corporateTopUpLimit = axios.get(`${corporateValue}/topup`);
// setPolicyData({
// limit: corporatePolicyLimit.data.data,
// topUpLimit: corporateTopUpLimit.data.data,
// });
}, [corporateValue]);
setLimitMember(data?.limit);
setBenefitMember(data?.benefits);
const calculateProgressValue = (current:number,total:number) => {
return (current/total) * 100;
// const corporatePolicyLimit = axios.get(`${corporateValue}/policy`);
// const corporateTopUpLimit = axios.get(`${corporateValue}/topup`);
// setPolicyData({
// limit: corporatePolicyLimit.data.data,
// topUpLimit: corporateTopUpLimit.data.data,
// });
}, [corporateValue, data]);
const calculateProgressValue = (current: number, total: number) => {
return (current / total) * 100;
};
const progressValue = calculateProgressValue(limitMember?.current, limitMember?.total);
const getMemberLimitUsage = (memberId: string) => {
if (policyData?.members) {
const member = policyData.members.find(member => member.memberId === memberId);
if (member) {
return member.limit;
}
}
return null;
};
// const getMemberLimitUsage = (memberId: string) => {
// if (policyData?.members) {
// const member = policyData.members.find((member) => member.memberId === memberId);
// if (member) {
// return member.limit;
// }
// }
// return null;
// };
const renderYearlyLimit = () => {
if (policyData) {
const { myLimit } = policyData.limit;
const { balance, total, percentage } = myLimit;
const progressValue = calculateProgressValue(balance, total);
// const renderYearlyLimit = () => {
// if (policyData) {
// const { myLimit } = policyData.limit;
// console.log('myLimit', myLimit);
// const { balance, total, percentage } = myLimit;
// const progressValue = calculateProgressValue(balance, total);
return (
<Stack spacing={1} sx={{ width: '206.5px' }}>
<Typography variant="subtitle2">Yearly Limit</Typography>
<BorderLinearProgress variant="determinate" value={progressValue} />
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
{balance.toLocaleString()} /{' '}
<Typography variant="body2" color="#757575" component="span">
{total.toLocaleString()}
</Typography>
</Typography>
</Stack>
);
}
return null;
};
return (
// return (
// <Stack spacing={1} sx={{ width: '206.5px' }}>
// <Typography variant="subtitle2">Yearly Limit</Typography>
// <BorderLinearProgress variant="determinate" value={progressValue} />
// <Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
// {balance.toLocaleString()} /{' '}
// <Typography variant="body2" color="#757575" component="span">
// {total.toLocaleString()}
// </Typography>
// </Typography>
// </Stack>
// );
// }
// return null;
// };
return (
<Card sx={{ padding: 2 }}>
<Stack>
<Stack direction="row" alignItems="center" spacing={1} justifyContent="space-between">
@@ -153,17 +156,17 @@ export default function CardPolicyNumber() {
</Stack>
<Stack spacing={1} sx={{ width: '206.5px' }}>
<Typography variant="subtitle2">Yearly Limit</Typography>
<BorderLinearProgress variant="determinate" value={100} />
<BorderLinearProgress variant="determinate" value={progressValue} />
<Typography variant="subtitle2" sx={{ fontWeight: 500 }}>
10.000.000 /{' '}
{limitMember?.current}/{' '}
<Typography variant="body2" color="#757575" component="span">
10.000.000
{limitMember?.total}
</Typography>
</Typography>
</Stack>
</Stack>
{/* Benefit Summary */}
<CardBenefitSummary />
<CardBenefitSummary data={benefitMember} />
</Stack>
</Card>
);