pengajuan claim
This commit is contained in:
274
frontend/client-portal/src/components/CardClaimSubmit.tsx
Normal file
274
frontend/client-portal/src/components/CardClaimSubmit.tsx
Normal file
@@ -0,0 +1,274 @@
|
||||
/* ---------------------------------- @mui ---------------------------------- */
|
||||
import { styled } from '@mui/material/styles';
|
||||
import {
|
||||
Paper,
|
||||
Table as TableContent,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TextField,
|
||||
Button,
|
||||
TableSortLabel,
|
||||
Box,
|
||||
Card,
|
||||
Grid,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
Select,
|
||||
MenuItem,
|
||||
SelectChangeEvent,
|
||||
Stack,
|
||||
Typography,
|
||||
LinearProgress,
|
||||
linearProgressClasses,
|
||||
InputAdornment,
|
||||
} from '@mui/material';
|
||||
import { visuallyHidden } from '@mui/utils';
|
||||
/* ---------------------------------- axios --------------------------------- */
|
||||
import axios from '../utils/axios';
|
||||
/* ---------------------------------- react --------------------------------- */
|
||||
import { Fragment, useContext, useEffect, useState } from 'react';
|
||||
import { useSearchParams } from 'react-router-dom';
|
||||
/* -------------------------------- component ------------------------------- */
|
||||
import BaseTablePagination from './BaseTablePagination';
|
||||
/* ---------------------------------- theme --------------------------------- */
|
||||
import palette from '../theme/palette';
|
||||
/* ---------------------------------- utils --------------------------------- */
|
||||
import { UserCurrentCorporateContext } from '../contexts/UserCurrentCorporate';
|
||||
import { fSplit } from '../utils/formatNumber';
|
||||
/* ---------------------------------- types --------------------------------- */
|
||||
import { DivisionDataProps, Order, PaginationTableProps, TableListProps } from '../@types/table';
|
||||
/* ----------------------------------- icon --------------------------------- */
|
||||
import SearchIcon from '@mui/icons-material/Search';
|
||||
import { FormControlLabel } from '@mui/material';
|
||||
import { Checkbox } from '@mui/material';
|
||||
import HistoryRoundedIcon from '@mui/icons-material/HistoryRounded';
|
||||
import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
|
||||
/* --------------------------------- styled --------------------------------- */
|
||||
const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
|
||||
height: 10,
|
||||
borderRadius: 6,
|
||||
[`&.${linearProgressClasses.colorPrimary}`]: {
|
||||
backgroundColor: '#D1F1F1',
|
||||
},
|
||||
[`& .${linearProgressClasses.bar}`]: {
|
||||
borderRadius: 6,
|
||||
backgroundColor: '#54D62C',
|
||||
},
|
||||
}));
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
export default function Table<T>({
|
||||
rows,
|
||||
loadings,
|
||||
params,
|
||||
searchs,
|
||||
}: TableListProps<T>) {
|
||||
|
||||
|
||||
/* ------------------------------ handle checkbox ----------------------------*/
|
||||
const handleCheckboxChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
// Anda bisa menambahkan logika di sini
|
||||
if (event.target.checked) {
|
||||
// Checkbox dicentang
|
||||
console.log('Checkbox dicentang');
|
||||
// Tambahkan kode lain yang ingin Anda jalankan saat checkbox dicentang
|
||||
} else {
|
||||
// Checkbox tidak dicentang
|
||||
console.log('Checkbox tidak dicentang');
|
||||
// Tambahkan kode lain yang ingin Anda jalankan saat checkbox tidak dicentang
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
// <Card>
|
||||
<Grid container>
|
||||
{/* Field 1 */}
|
||||
<Grid item xs={12} paddingX="10px" paddingY="20px">
|
||||
{searchs && searchs.useSearchs ? (
|
||||
<Fragment>
|
||||
<Grid item xs={12} lg={12} xl={12}>
|
||||
<form onSubmit={searchs.handleSearchSubmit}>
|
||||
<TextField
|
||||
id="search-input"
|
||||
variant="outlined"
|
||||
onChange={(event) => searchs.setSearchText(event.target.value)}
|
||||
value={searchs.searchText}
|
||||
fullWidth
|
||||
placeholder='Search Name or Member ID... '
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchIcon />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
|
||||
/>
|
||||
</form>
|
||||
</Grid>
|
||||
</Fragment>
|
||||
) : null }
|
||||
</Grid>
|
||||
{/* End Field 1 */}
|
||||
|
||||
{/* Field 2 */}
|
||||
|
||||
<Grid item xs={12} paddingX="10px" paddingY="10px">
|
||||
<Card>
|
||||
<Fragment>
|
||||
<Stack direction='row' alignItems='center'>
|
||||
<Grid item xs={1} lg={1} xl={1} >
|
||||
<form onSubmit={searchs.handleSearchSubmit}>
|
||||
<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'>Alexandra Rhea Putranto</Typography>
|
||||
<Typography color={'#637381'}>KM002-01</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={3} lg={3} xl={3} >
|
||||
<BorderLinearProgress
|
||||
variant="determinate"
|
||||
value={80}
|
||||
// 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(8000000)}
|
||||
</Typography>
|
||||
<Typography variant='overline'>
|
||||
/ {fSplit(10000000000)}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={2} lg={2} xl={2} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<Stack direction={'row'}>
|
||||
<HistoryRoundedIcon/>
|
||||
<KeyboardArrowRightRoundedIcon
|
||||
sx={{marginLeft: '30px'}}
|
||||
/>
|
||||
|
||||
</Stack>
|
||||
</Grid>
|
||||
{/* <Grid item xs={1} lg={1} xl={1} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<ArrowForwardIosRoundedIcon></ArrowForwardIosRoundedIcon>
|
||||
</Grid> */}
|
||||
|
||||
</Stack>
|
||||
</Fragment>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} paddingX="10px" paddingY="10px">
|
||||
<Card>
|
||||
<Fragment>
|
||||
<Stack direction='row' alignItems='center'>
|
||||
<Grid item xs={1} lg={1} xl={1} >
|
||||
<form onSubmit={searchs.handleSearchSubmit}>
|
||||
<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'>Alexandra Rhea Putranto</Typography>
|
||||
<Typography color={'#637381'}>KM002-01</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={3} lg={3} xl={3} >
|
||||
<BorderLinearProgress
|
||||
variant="determinate"
|
||||
value={80}
|
||||
// color='success'
|
||||
sx={{ mb: 1 }}
|
||||
/>
|
||||
<Stack direction={'row'}>
|
||||
<Grid item xs={5}>
|
||||
<Typography variant='overline' sx={{textAlign:'left'}}>
|
||||
LIMIT
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={7}>
|
||||
<Stack direction={'row'}>
|
||||
<Typography variant='overline' style={{ textAlign: 'right' }}>
|
||||
{fSplit(8000000)}
|
||||
</Typography>
|
||||
<Typography variant='overline' style={{ textAlign: 'right' }}>
|
||||
/ {fSplit(10000000000)}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Grid>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={2} lg={2} xl={2} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<Stack direction={'row'}>
|
||||
<HistoryRoundedIcon/>
|
||||
<KeyboardArrowRightRoundedIcon
|
||||
sx={{marginLeft: '30px'}}
|
||||
/>
|
||||
|
||||
</Stack>
|
||||
</Grid>
|
||||
{/* <Grid item xs={1} lg={1} xl={1} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<ArrowForwardIosRoundedIcon></ArrowForwardIosRoundedIcon>
|
||||
</Grid> */}
|
||||
|
||||
</Stack>
|
||||
</Fragment>
|
||||
</Card>
|
||||
</Grid>
|
||||
{/* End Field 2 */}
|
||||
<LoadingButton
|
||||
variant="contained"
|
||||
sx={{ marginTop: 2, p: 2, margin: '10px', color:'#212B36', backgroundColor:'#DFE3E8' }}
|
||||
fullWidth
|
||||
|
||||
>
|
||||
Claim Submit Selected
|
||||
</LoadingButton>
|
||||
</Grid>
|
||||
// </Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user