275 lines
10 KiB
TypeScript
275 lines
10 KiB
TypeScript
/* ---------------------------------- @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>
|
|
);
|
|
}
|