pengajuan claim
This commit is contained in:
@@ -0,0 +1,266 @@
|
||||
// @mui
|
||||
import { styled } from '@mui/material/styles';
|
||||
import {
|
||||
Typography,
|
||||
LinearProgress,
|
||||
linearProgressClasses,
|
||||
Stack,
|
||||
TextField,
|
||||
InputAdornment,
|
||||
Card,
|
||||
Grid,
|
||||
IconButton,
|
||||
FormControlLabel,
|
||||
Checkbox,
|
||||
} from '@mui/material';
|
||||
import { Search as SearchIcon } from '@mui/icons-material';
|
||||
// components
|
||||
import MuiDialog from '../../components/MuiDialog';
|
||||
import Iconify from '../../components/Iconify';
|
||||
import HistoryRoundedIcon from '@mui/icons-material/HistoryRounded';
|
||||
// React
|
||||
import { ReactElement, useContext, useEffect, useState } from 'react';
|
||||
import DialogRequestLog from './DialogRequestLog';
|
||||
import axios from '../../utils/axios';
|
||||
import { useSearchParams, useNavigate, Link } from 'react-router-dom';
|
||||
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
|
||||
import { fSplit } from '../../utils/formatNumber';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
type DataContentType = {
|
||||
id: number;
|
||||
fullName: string;
|
||||
memberId: string;
|
||||
limit: {
|
||||
current: number;
|
||||
total: number;
|
||||
percentage: number;
|
||||
};
|
||||
avatar?: {
|
||||
url?: string;
|
||||
title?: string;
|
||||
};
|
||||
};
|
||||
|
||||
type MuiDialogProps = {
|
||||
title?: {
|
||||
name?: string;
|
||||
icon?: string;
|
||||
};
|
||||
openDialog: boolean;
|
||||
setOpenDialog: Function;
|
||||
content?: ReactElement;
|
||||
// data?: DataContent[];
|
||||
};
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
|
||||
height: 10,
|
||||
borderRadius: 6,
|
||||
[`&.${linearProgressClasses.colorPrimary}`]: {
|
||||
backgroundColor: '#D1F1F1',
|
||||
},
|
||||
[`& .${linearProgressClasses.bar}`]: {
|
||||
borderRadius: 6,
|
||||
backgroundColor: '#54D62C',
|
||||
},
|
||||
}));
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
|
||||
export default function DialogClaimSubmitMember({
|
||||
title,
|
||||
openDialog,
|
||||
setOpenDialog,
|
||||
}: MuiDialogProps) {
|
||||
const { corporateValue } = useContext(UserCurrentCorporateContext);
|
||||
|
||||
/* ---------------------------------- data ---------------------------------- */
|
||||
const [data, setData] = useState([]);
|
||||
const [dataMemberClaim, setDataMemberClaim] = useState<DataContentType>({
|
||||
id: 0,
|
||||
fullName: '',
|
||||
memberId: '',
|
||||
limit: {
|
||||
current: 0,
|
||||
total: 0,
|
||||
percentage: 0,
|
||||
},
|
||||
});
|
||||
const navigate = useNavigate();
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
/* --------------------------------- Search --------------------------------- */
|
||||
const [searchText, setSearchText] = useState('');
|
||||
const [appliedParams, setAppliedParams] = useState({});
|
||||
|
||||
const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
if (searchText === '') {
|
||||
setAppliedParams({});
|
||||
} else {
|
||||
setAppliedParams({ search: searchText });
|
||||
}
|
||||
await new Promise((resolve) => setTimeout(resolve, 500));
|
||||
};
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
|
||||
/* ------------------------------ Icon On Click ----------------------------- */
|
||||
const clickHandler = ({ id, fullName, memberId, limit, avatar }: DataContentType) => {
|
||||
setDataMemberClaim({
|
||||
id: id,
|
||||
fullName: fullName,
|
||||
memberId: memberId,
|
||||
limit: {
|
||||
current: limit.current,
|
||||
total: limit.total,
|
||||
percentage: limit.percentage,
|
||||
},
|
||||
avatar: {
|
||||
url: avatar && avatar.url,
|
||||
title: avatar && avatar.title,
|
||||
},
|
||||
});
|
||||
};
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
if (openDialog === true) {
|
||||
const response = await axios.get(`${corporateValue}/members`, {
|
||||
params: { ...appliedParams, type: 'claim-submit' },
|
||||
});
|
||||
|
||||
setData(response.data.data);
|
||||
}
|
||||
})();
|
||||
}, [corporateValue, openDialog, appliedParams]);
|
||||
|
||||
const getContent = () => (
|
||||
<Stack>
|
||||
<Stack marginTop={2} spacing={1}>
|
||||
{data.map((row: DataContentType, key) => (
|
||||
<Card
|
||||
key={key}
|
||||
sx={{ paddingY: 1, paddingX: 2 }}
|
||||
onClick={() =>
|
||||
clickHandler({
|
||||
id: row.id,
|
||||
fullName: row.fullName,
|
||||
memberId: row.memberId,
|
||||
limit: {
|
||||
current: row.limit.current,
|
||||
total: row.limit.total,
|
||||
percentage: row.limit.percentage,
|
||||
},
|
||||
})
|
||||
}
|
||||
>
|
||||
<Stack direction="row" alignItems="center" >
|
||||
<Grid item xs={1} lg={1} xl={1} >
|
||||
<form>
|
||||
<FormControlLabel
|
||||
value="end"
|
||||
control={<Checkbox />}
|
||||
label=""
|
||||
labelPlacement="end"
|
||||
sx={{marginLeft: '20px'}}
|
||||
/>
|
||||
</form>
|
||||
</Grid>
|
||||
<div style={{ position: 'relative', flex: 'none', height: 'fit-content', margin: '15px'}}>
|
||||
<img
|
||||
width={52}
|
||||
height={52}
|
||||
src="/images/user-profile.png"
|
||||
alt="user-profile"
|
||||
style={{ borderRadius: '50%' }}
|
||||
/>
|
||||
</div>
|
||||
<Grid item xs={7} lg={7} xl={7} >
|
||||
<Typography variant="subtitle1">{row.fullName}</Typography>
|
||||
<Typography color="#637381" variant="body2" sx={{ fontWeight: 500 }}>
|
||||
{row.memberId}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={3} lg={3} xl={3} >
|
||||
<BorderLinearProgress
|
||||
variant="determinate"
|
||||
value={row.limit && row.limit.percentage}
|
||||
// color='success'
|
||||
sx={{ mb: 1 }}
|
||||
/>
|
||||
<Stack direction={'row'}>
|
||||
<Grid item xs={3}>
|
||||
<Typography variant='overline' sx={{textAlign:'left'}}>
|
||||
LIMIT
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={7} sx={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||
<Stack direction={'row'}>
|
||||
<Typography variant='overline'>
|
||||
{fSplit(row.limit && row.limit.current)}
|
||||
</Typography>
|
||||
<Typography variant='overline'>
|
||||
/ {fSplit(row.limit && row.limit.total)}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={2} lg={2} xl={2} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<IconButton >
|
||||
<Iconify icon="ic:history" />
|
||||
</IconButton>
|
||||
<IconButton sx={{marginLeft: '10px'}} onClick={() => navigate(`/claim-request/${row.id}`)} >
|
||||
<Iconify icon="ic:round-chevron-right" />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Card>
|
||||
))}
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
);
|
||||
|
||||
return (
|
||||
<Grid container>
|
||||
<Grid item xs={12} paddingX="10px" paddingY="20px">
|
||||
<form onSubmit={handleSearchSubmit}>
|
||||
<TextField
|
||||
id="search-input"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
onChange={(event) => setSearchText(event?.target.value)}
|
||||
value={searchText}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
placeholder="Search Name or Member ID... "
|
||||
sx={{ marginTop: 2 }}
|
||||
/>
|
||||
</form>
|
||||
{getContent()}
|
||||
</Grid>
|
||||
<Grid item xs={12}>
|
||||
<LoadingButton
|
||||
variant="contained"
|
||||
sx={{ marginTop: 2, p: 2, margin: '10px', color:'#212B36', backgroundColor:'#DFE3E8' }}
|
||||
fullWidth
|
||||
|
||||
>
|
||||
Claim Submit Selected
|
||||
</LoadingButton>
|
||||
</Grid>
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user