update componen label
This commit is contained in:
98
frontend/client-portal/src/components/Label.tsx
Normal file
98
frontend/client-portal/src/components/Label.tsx
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
// @mui
|
||||||
|
import { alpha, Theme, useTheme, styled } from '@mui/material/styles';
|
||||||
|
import { BoxProps } from '@mui/material';
|
||||||
|
// theme
|
||||||
|
import { ColorSchema } from '../theme/palette';
|
||||||
|
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
type LabelColor = 'default' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error';
|
||||||
|
|
||||||
|
type LabelVariant = 'filled' | 'outlined' | 'ghost';
|
||||||
|
|
||||||
|
const RootStyle = styled('span')(
|
||||||
|
({
|
||||||
|
theme,
|
||||||
|
ownerState,
|
||||||
|
}: {
|
||||||
|
theme: Theme;
|
||||||
|
ownerState: {
|
||||||
|
color: LabelColor;
|
||||||
|
variant: LabelVariant;
|
||||||
|
};
|
||||||
|
}) => {
|
||||||
|
const isLight = theme.palette.mode === 'light';
|
||||||
|
const { color, variant } = ownerState;
|
||||||
|
|
||||||
|
const styleFilled = (color: ColorSchema) => ({
|
||||||
|
color: theme.palette[color].contrastText,
|
||||||
|
backgroundColor: theme.palette[color].main,
|
||||||
|
});
|
||||||
|
|
||||||
|
const styleOutlined = (color: ColorSchema) => ({
|
||||||
|
color: theme.palette[color].main,
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
border: `1px solid ${theme.palette[color].main}`,
|
||||||
|
});
|
||||||
|
|
||||||
|
const styleGhost = (color: ColorSchema) => ({
|
||||||
|
color: theme.palette[color][isLight ? 'dark' : 'light'],
|
||||||
|
backgroundColor: alpha(theme.palette[color].main, 0.16),
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
height: 22,
|
||||||
|
minWidth: 22,
|
||||||
|
lineHeight: 0,
|
||||||
|
borderRadius: 6,
|
||||||
|
// cursor: 'default',
|
||||||
|
alignItems: 'center',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
display: 'inline-flex',
|
||||||
|
justifyContent: 'center',
|
||||||
|
padding: theme.spacing(0, 1),
|
||||||
|
color: theme.palette.grey[800],
|
||||||
|
fontSize: theme.typography.pxToRem(12),
|
||||||
|
fontFamily: theme.typography.fontFamily,
|
||||||
|
backgroundColor: theme.palette.grey[300],
|
||||||
|
fontWeight: theme.typography.fontWeightBold,
|
||||||
|
|
||||||
|
...(color !== 'default'
|
||||||
|
? {
|
||||||
|
...(variant === 'filled' && { ...styleFilled(color) }),
|
||||||
|
...(variant === 'outlined' && { ...styleOutlined(color) }),
|
||||||
|
...(variant === 'ghost' && { ...styleGhost(color) }),
|
||||||
|
}
|
||||||
|
: {
|
||||||
|
...(variant === 'outlined' && {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
color: theme.palette.text.primary,
|
||||||
|
border: `1px solid ${theme.palette.grey[500_32]}`,
|
||||||
|
}),
|
||||||
|
...(variant === 'ghost' && {
|
||||||
|
color: isLight ? theme.palette.text.secondary : theme.palette.common.white,
|
||||||
|
backgroundColor: theme.palette.grey[500_16],
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
// ----------------------------------------------------------------------
|
||||||
|
|
||||||
|
interface Props extends BoxProps {
|
||||||
|
color?: LabelColor;
|
||||||
|
variant?: LabelVariant;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Label({ color = 'default', variant = 'ghost', children, sx }: Props) {
|
||||||
|
const theme = useTheme();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<RootStyle ownerState={{ color, variant }} sx={sx} theme={theme}>
|
||||||
|
{children}
|
||||||
|
</RootStyle>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
@@ -40,6 +40,7 @@ import TableMoreMenu from '../../components/table/TableMoreMenu';
|
|||||||
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
|
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
|
||||||
|
|
||||||
import DetailDataMember from './ListMember';
|
import DetailDataMember from './ListMember';
|
||||||
|
import Label from '../../components/Label';
|
||||||
|
|
||||||
|
|
||||||
/* ---------------------------------- types --------------------------------- */
|
/* ---------------------------------- types --------------------------------- */
|
||||||
@@ -398,28 +399,10 @@ export default function List() {
|
|||||||
// >{obj.memberId}</Button>
|
// >{obj.memberId}</Button>
|
||||||
// ,
|
// ,
|
||||||
start_date:
|
start_date:
|
||||||
<Typography
|
<Label>{ fDateSuffix(obj.start_date) }</Label>
|
||||||
sx={{
|
|
||||||
background: 'rgba(145, 158, 171, 0.16)',
|
|
||||||
color: '#637381',
|
|
||||||
paddingX: 1.5,
|
|
||||||
paddingY: 1,
|
|
||||||
borderRadius: 3,
|
|
||||||
}} variant='overline'
|
|
||||||
>{ fDateSuffix(obj.start_date) }
|
|
||||||
</Typography>
|
|
||||||
,
|
,
|
||||||
end_date:
|
end_date:
|
||||||
<Typography
|
<Label> { fDateSuffix(obj.end_date) }</Label>
|
||||||
sx={{
|
|
||||||
background: 'rgba(145, 158, 171, 0.16)',
|
|
||||||
color: '#637381',
|
|
||||||
paddingX: 1.5,
|
|
||||||
paddingY: 1,
|
|
||||||
borderRadius: 3,
|
|
||||||
}} variant='overline'
|
|
||||||
>{ fDateSuffix(obj.end_date) }
|
|
||||||
</Typography>
|
|
||||||
,
|
,
|
||||||
// status:
|
// status:
|
||||||
// obj.status === 1 ? (
|
// obj.status === 1 ? (
|
||||||
|
|||||||
@@ -40,6 +40,7 @@ import { useSearchParams, useNavigate, Link, useParams } from 'react-router-dom'
|
|||||||
import { fDateSuffix, fPostFormat } from '../../utils/formatTime';
|
import { fDateSuffix, fPostFormat } from '../../utils/formatTime';
|
||||||
import TableMoreMenu from '../../components/table/TableMoreMenu';
|
import TableMoreMenu from '../../components/table/TableMoreMenu';
|
||||||
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
|
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
|
||||||
|
import Label from '../../components/Label';
|
||||||
|
|
||||||
|
|
||||||
/* ---------------------------------- types --------------------------------- */
|
/* ---------------------------------- types --------------------------------- */
|
||||||
@@ -400,55 +401,20 @@ export default function List() {
|
|||||||
return {
|
return {
|
||||||
...obj,
|
...obj,
|
||||||
admission_date:
|
admission_date:
|
||||||
<Typography
|
<Label>{ fDateSuffix(obj.admission_date) }</Label>
|
||||||
sx={{
|
|
||||||
background: 'rgba(145, 158, 171, 0.16)',
|
|
||||||
color: '#637381',
|
|
||||||
paddingX: 1.5,
|
|
||||||
paddingY: 1,
|
|
||||||
borderRadius: 3,
|
|
||||||
marginTop: 2,
|
|
||||||
}} variant='overline'
|
|
||||||
>{ fDateSuffix(obj.admission_date) }
|
|
||||||
</Typography>
|
|
||||||
,
|
,
|
||||||
discharge_date:
|
discharge_date:
|
||||||
<Typography
|
<Label>{ fDateSuffix(obj.discharge_date) }</Label>
|
||||||
sx={{
|
|
||||||
background: 'rgba(145, 158, 171, 0.16)',
|
|
||||||
color: '#637381',
|
|
||||||
paddingX: 1.5,
|
|
||||||
paddingY: 1,
|
|
||||||
borderRadius: 3,
|
|
||||||
}} variant='overline'
|
|
||||||
>{ fDateSuffix(obj.discharge_date) }
|
|
||||||
</Typography>
|
|
||||||
,
|
,
|
||||||
status:
|
status:
|
||||||
obj.status === 'Done' ? (
|
obj.status === 'Done' ? (
|
||||||
<Typography
|
<Label color='success'>
|
||||||
sx={{
|
|
||||||
background: 'rgba(84, 214, 44, 0.16)',
|
|
||||||
color: '#229A16',
|
|
||||||
paddingX: 1.5,
|
|
||||||
paddingY: 1,
|
|
||||||
borderRadius: 3,
|
|
||||||
}} variant='overline'
|
|
||||||
>
|
|
||||||
Done
|
Done
|
||||||
</Typography>
|
</Label>
|
||||||
) : (
|
) : (
|
||||||
<Typography
|
<Label color='warning'>
|
||||||
sx={{
|
|
||||||
background: 'rgba(255, 193, 7, 0.16)',
|
|
||||||
color: '#BF6919',
|
|
||||||
paddingX: 1.5,
|
|
||||||
paddingY: 1,
|
|
||||||
borderRadius: 3,
|
|
||||||
}} variant='overline'
|
|
||||||
>
|
|
||||||
Ongoing
|
Ongoing
|
||||||
</Typography>
|
</Label>
|
||||||
),
|
),
|
||||||
action:
|
action:
|
||||||
<TableMoreMenu actions={
|
<TableMoreMenu actions={
|
||||||
|
|||||||
@@ -35,6 +35,7 @@ import { Timeline, TimelineConnector, TimelineContent, TimelineDot, TimelineSepa
|
|||||||
import Select from '../../theme/overrides/Select';
|
import Select from '../../theme/overrides/Select';
|
||||||
import TableMoreMenu from '../../components/table/TableMoreMenu';
|
import TableMoreMenu from '../../components/table/TableMoreMenu';
|
||||||
import { MenuItem } from '@mui/material';
|
import { MenuItem } from '@mui/material';
|
||||||
|
import Label from '../../components/Label';
|
||||||
// sections
|
// sections
|
||||||
// import ListTable from '../../sections/claimreports/ListTable';
|
// import ListTable from '../../sections/claimreports/ListTable';
|
||||||
// import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';
|
// import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';
|
||||||
@@ -291,38 +292,18 @@ export default function ServiceMonitoring() {
|
|||||||
<Grid item xs={12} lg={12} md={12}>
|
<Grid item xs={12} lg={12} md={12}>
|
||||||
<Stack spacing={1}>
|
<Stack spacing={1}>
|
||||||
<Typography variant="inherit">Main Diagnosis</Typography>
|
<Typography variant="inherit">Main Diagnosis</Typography>
|
||||||
<Stack direction={'row'}>
|
<Stack direction={'row'} gap={1}>
|
||||||
<Typography variant="h6">{data?.main_diagnose}</Typography>
|
<Typography variant="h6">{data?.main_diagnose}</Typography>
|
||||||
<Typography
|
<Label>{data?.main_diagnose_code}</Label>
|
||||||
sx={{
|
|
||||||
background: 'rgba(145, 158, 171, 0.16)',
|
|
||||||
color: '#637381',
|
|
||||||
borderRadius: 1,
|
|
||||||
marginLeft: 1,
|
|
||||||
paddingX: 1,
|
|
||||||
paddingY: 1,
|
|
||||||
marginRight: 'auto',
|
|
||||||
}} variant='overline'
|
|
||||||
>{data?.main_diagnose_code}</Typography>
|
|
||||||
</Stack>
|
</Stack>
|
||||||
</Stack>
|
</Stack>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={12} lg={12} md={12}>
|
<Grid item xs={12} lg={12} md={12}>
|
||||||
<Stack spacing={1}>
|
<Stack spacing={1}>
|
||||||
<Typography variant="inherit">Comparative Diagnosis</Typography>
|
<Typography variant="inherit">Comparative Diagnosis</Typography>
|
||||||
<Stack direction={'row'}>
|
<Stack direction={'row'} gap={1}>
|
||||||
<Typography variant="h6">{data?.comparative_diagnosis}</Typography>
|
<Typography variant="h6">{data?.comparative_diagnosis}</Typography>
|
||||||
<Typography
|
<Label>{data?.comparative_diagnosis_code}</Label>
|
||||||
sx={{
|
|
||||||
background: 'rgba(145, 158, 171, 0.16)',
|
|
||||||
color: '#637381',
|
|
||||||
borderRadius: 1,
|
|
||||||
marginLeft: 1,
|
|
||||||
paddingX: 1,
|
|
||||||
paddingY: 1,
|
|
||||||
marginRight: 'auto',
|
|
||||||
}} variant='overline'
|
|
||||||
>{data?.comparative_diagnosis_code}</Typography>
|
|
||||||
</Stack>
|
</Stack>
|
||||||
</Stack>
|
</Stack>
|
||||||
</Grid>
|
</Grid>
|
||||||
@@ -411,27 +392,9 @@ export default function ServiceMonitoring() {
|
|||||||
<TimelineContent>
|
<TimelineContent>
|
||||||
<Typography variant='h5' sx={{marginBottom: 2}}> { fDateSuffix(row.date)}</Typography>
|
<Typography variant='h5' sx={{marginBottom: 2}}> { fDateSuffix(row.date)}</Typography>
|
||||||
<Card sx={{paddinX:2, paddingY:2}} >
|
<Card sx={{paddinX:2, paddingY:2}} >
|
||||||
<Stack direction={'row'} sx={{ alignItems: 'center' }}>
|
<Stack direction={'row'} sx={{ alignItems: 'center', padding: 2, justifyContent: 'space-between' }}>
|
||||||
<Typography
|
<Label> {row.time} </Label>
|
||||||
sx={{
|
<Label color='success' sx={{marginRight: 0}}> {row.status} </Label>
|
||||||
background: 'rgba(145, 158, 171, 0.16)',
|
|
||||||
color: '#637381',
|
|
||||||
borderRadius: 1,
|
|
||||||
marginLeft: 2,
|
|
||||||
paddingX: 2,
|
|
||||||
paddingY: 1,
|
|
||||||
marginRight: 'auto',
|
|
||||||
}} variant='overline'> {row.time} </Typography>
|
|
||||||
<Typography
|
|
||||||
sx={{
|
|
||||||
background: 'rgba(84, 214, 44, 0.16)',
|
|
||||||
color: '#229A16',
|
|
||||||
borderRadius: 1,
|
|
||||||
marginRight: 2,
|
|
||||||
paddingX: 2,
|
|
||||||
paddingY: 1,
|
|
||||||
}} variant='overline'> {row.status} </Typography>
|
|
||||||
|
|
||||||
</Stack>
|
</Stack>
|
||||||
<hr style={{margin:10, marginLeft:15, marginRight:15, color: 'rgba(145, 158, 171, 0.32)' }}/>
|
<hr style={{margin:10, marginLeft:15, marginRight:15, color: 'rgba(145, 158, 171, 0.32)' }}/>
|
||||||
<Stack spacing={3} sx={{ paddingY: 1, paddingX: 3 }}>
|
<Stack spacing={3} sx={{ paddingY: 1, paddingX: 3 }}>
|
||||||
@@ -537,23 +500,13 @@ export default function ServiceMonitoring() {
|
|||||||
<Grid container>
|
<Grid container>
|
||||||
<Grid item xs={12} md={12}>
|
<Grid item xs={12} md={12}>
|
||||||
{data?.laboratorium_result.length > 0 ? data?.laboratorium_result.map((row, index) => (
|
{data?.laboratorium_result.length > 0 ? data?.laboratorium_result.map((row, index) => (
|
||||||
|
|
||||||
<Card sx={{paddinX:2, paddingY:2, paddingX:1, marginTop:2 }} key={index} >
|
<Card sx={{paddinX:2, paddingY:2, paddingX:1, marginTop:2 }} key={index} >
|
||||||
<Stack paddingX={5}>
|
<Stack paddingX={5}>
|
||||||
<Typography variant='subtitle1'>{fDateSuffix(row[index].datetime)}</Typography>
|
<Typography variant='subtitle1'>{fDateSuffix(row[index].datetime)}</Typography>
|
||||||
|
|
||||||
{row.length > 0 ? row.map((list, i) => (
|
{row.length > 0 ? row.map((list, i) => (
|
||||||
<Card key={i} sx={{marginTop:2, paddingX:2, paddingY:2}}>
|
<Card key={i} sx={{marginTop:2, paddingX:2, paddingY:2}}>
|
||||||
<Typography
|
<Label> {list.reimbursement_code}
|
||||||
sx={{
|
</Label>
|
||||||
background: 'rgba(145, 158, 171, 0.16)',
|
|
||||||
color: '#637381',
|
|
||||||
borderRadius: 1,
|
|
||||||
marginBottom: 2,
|
|
||||||
paddingX: 2,
|
|
||||||
paddingY: 1,
|
|
||||||
}} variant='overline'> {list.reimbursement_code}
|
|
||||||
</Typography>
|
|
||||||
<Table sx={{marginY:2}}>
|
<Table sx={{marginY:2}}>
|
||||||
<TableHead>
|
<TableHead>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
@@ -566,16 +519,7 @@ export default function ServiceMonitoring() {
|
|||||||
<TableBody>
|
<TableBody>
|
||||||
<TableRow>
|
<TableRow>
|
||||||
<TableCell>
|
<TableCell>
|
||||||
<Typography
|
<Label> {fDateTime(list.datetime)}</Label>
|
||||||
sx={{
|
|
||||||
background: 'rgba(145, 158, 171, 0.16)',
|
|
||||||
color: '#637381',
|
|
||||||
borderRadius: 1,
|
|
||||||
marginBottom: 2,
|
|
||||||
paddingX: 2,
|
|
||||||
paddingY: 1,
|
|
||||||
}} variant='overline'> {fDateTime(list.datetime)}
|
|
||||||
</Typography>
|
|
||||||
</TableCell>
|
</TableCell>
|
||||||
<TableCell>{list.examination}</TableCell>
|
<TableCell>{list.examination}</TableCell>
|
||||||
<TableCell>{list.location}</TableCell>
|
<TableCell>{list.location}</TableCell>
|
||||||
|
|||||||
@@ -14,13 +14,14 @@ import palette from '../../theme/palette';
|
|||||||
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
|
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
|
||||||
import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
|
import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
|
||||||
import { useSearchParams, useNavigate } from 'react-router-dom';
|
import { useSearchParams, useNavigate } from 'react-router-dom';
|
||||||
import { fDate } from '../../utils/formatTime';
|
import { fDate, fDateSuffix } from '../../utils/formatTime';
|
||||||
import Typography from '@mui/material/Typography';
|
import Typography from '@mui/material/Typography';
|
||||||
import { format } from 'date-fns';
|
import { format } from 'date-fns';
|
||||||
import TableMoreMenu from '../../components/table/TableMoreMenu';
|
import TableMoreMenu from '../../components/table/TableMoreMenu';
|
||||||
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
|
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
|
||||||
import HistoryIcon from '@mui/icons-material/History';
|
import HistoryIcon from '@mui/icons-material/History';
|
||||||
import SearchIcon from '@mui/icons-material/Search';
|
import SearchIcon from '@mui/icons-material/Search';
|
||||||
|
import Label from '../../components/Label';
|
||||||
|
|
||||||
export default function List() {
|
export default function List() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
@@ -179,85 +180,25 @@ export default function List() {
|
|||||||
...obj,
|
...obj,
|
||||||
status:
|
status:
|
||||||
obj.status === 'requested' ? (
|
obj.status === 'requested' ? (
|
||||||
<Typography
|
<Label color='primary'>
|
||||||
variant="body2"
|
|
||||||
sx={{
|
|
||||||
width: 'Hug (6px)',
|
|
||||||
height: 'Hug (22px)',
|
|
||||||
left: '862px',
|
|
||||||
top: '17px',
|
|
||||||
color: '#159C9C',
|
|
||||||
backgroundColor: '#00AB5529',
|
|
||||||
padding: '1px, 8px',
|
|
||||||
borderRadius: '6px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Request
|
Request
|
||||||
</Typography>
|
</Label>
|
||||||
) : obj.status === 'approved' ? (
|
) : obj.status === 'approved' ? (
|
||||||
<Typography
|
<Label color='success' >
|
||||||
variant="body2"
|
|
||||||
sx={{
|
|
||||||
width: 'Hug (6px)',
|
|
||||||
height: 'Hug (22px)',
|
|
||||||
left: '862px',
|
|
||||||
top: '17px',
|
|
||||||
color: '#229A16',
|
|
||||||
backgroundColor: '#54D62C29',
|
|
||||||
padding: '1px, 8px',
|
|
||||||
borderRadius: '6px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Approval
|
Approval
|
||||||
</Typography>
|
</Label>
|
||||||
) : obj.status === 'declined' ? (
|
) : obj.status === 'declined' ? (
|
||||||
<Typography
|
<Label color='error'>
|
||||||
variant="body2"
|
|
||||||
sx={{
|
|
||||||
width: 'Hug (6px)',
|
|
||||||
height: 'Hug (22px)',
|
|
||||||
left: '862px',
|
|
||||||
top: '17px',
|
|
||||||
color: '#B72136',
|
|
||||||
backgroundColor: '#FF484229',
|
|
||||||
padding: '1px, 8px',
|
|
||||||
borderRadius: '6px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Decline
|
Decline
|
||||||
</Typography>
|
</Label>
|
||||||
) : obj.status === 'pending' ? (
|
) : obj.status === 'pending' ? (
|
||||||
<Typography
|
<Label color='primary'>
|
||||||
variant="body2"
|
|
||||||
sx={{
|
|
||||||
width: 'Hug (6px)',
|
|
||||||
height: 'Hug (22px)',
|
|
||||||
left: '862px',
|
|
||||||
top: '17px',
|
|
||||||
color: '#BF6919',
|
|
||||||
backgroundColor: '#FFC10729',
|
|
||||||
padding: '1px, 8px',
|
|
||||||
borderRadius: '6px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Pending
|
Pending
|
||||||
</Typography>
|
</Label>
|
||||||
) : obj.status === 'reviewed' ? (
|
) : obj.status === 'reviewed' ? (
|
||||||
<Typography
|
<Label color='info'>
|
||||||
variant="body2"
|
|
||||||
sx={{
|
|
||||||
width: 'Hug (6px)',
|
|
||||||
height: 'Hug (22px)',
|
|
||||||
left: '862px',
|
|
||||||
top: '17px',
|
|
||||||
color: '#0C53B7',
|
|
||||||
backgroundColor: '#1890FF29',
|
|
||||||
padding: '1px, 8px',
|
|
||||||
borderRadius: '6px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Review
|
Review
|
||||||
</Typography>
|
</Label>
|
||||||
) : (
|
) : (
|
||||||
<Button
|
<Button
|
||||||
startIcon={<Iconify icon="fa6-solid:clock" />}
|
startIcon={<Iconify icon="fa6-solid:clock" />}
|
||||||
@@ -276,16 +217,9 @@ export default function List() {
|
|||||||
</Button>
|
</Button>
|
||||||
),
|
),
|
||||||
submission_date:
|
submission_date:
|
||||||
<Typography
|
<Label>
|
||||||
sx={{
|
{obj.submission_date ? fDateSuffix(obj.submission_date) : ''}
|
||||||
backgroundColor: (theme) => theme.palette.grey[300],
|
</Label>
|
||||||
borderRadius: '4px',
|
|
||||||
width: '70%',
|
|
||||||
}}
|
|
||||||
variant="body2"
|
|
||||||
>
|
|
||||||
{obj.submission_date ? format(new Date(obj.submission_date), "d MMM yyyy") : ''}
|
|
||||||
</Typography>
|
|
||||||
,
|
,
|
||||||
action:
|
action:
|
||||||
<TableMoreMenu actions={
|
<TableMoreMenu actions={
|
||||||
|
|||||||
@@ -512,7 +512,7 @@ const Buttons = ({ handle, row, type }: ButtonIProp) => {
|
|||||||
>
|
>
|
||||||
<Iconify icon="icon-park-outline:upload-one" fontSize="3em" />
|
<Iconify icon="icon-park-outline:upload-one" fontSize="3em" />
|
||||||
<Typography variant="body1" fontWeight="bold">
|
<Typography variant="body1" fontWeight="bold">
|
||||||
Add Invoice
|
Add {type}
|
||||||
</Typography>
|
</Typography>
|
||||||
</Box>
|
</Box>
|
||||||
<input
|
<input
|
||||||
|
|||||||
@@ -33,12 +33,13 @@ import palette from '../../theme/palette';
|
|||||||
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
|
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
|
||||||
import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
|
import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
|
||||||
import { useSearchParams, useNavigate, Link } from 'react-router-dom';
|
import { useSearchParams, useNavigate, Link } from 'react-router-dom';
|
||||||
import { fDate } from '../../utils/formatTime';
|
import { fDate, fDateSuffix } from '../../utils/formatTime';
|
||||||
import { format } from 'date-fns';
|
import { format } from 'date-fns';
|
||||||
import Typography from '@mui/material/Typography';
|
import Typography from '@mui/material/Typography';
|
||||||
import TableMoreMenu from '../../components/table/TableMoreMenu';
|
import TableMoreMenu from '../../components/table/TableMoreMenu';
|
||||||
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
|
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
|
||||||
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
|
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
|
||||||
|
import Label from '../../components/Label';
|
||||||
|
|
||||||
|
|
||||||
/* ---------------------------------- types --------------------------------- */
|
/* ---------------------------------- types --------------------------------- */
|
||||||
@@ -301,61 +302,23 @@ export default function List() {
|
|||||||
// ,
|
// ,
|
||||||
status:
|
status:
|
||||||
obj.status === 1 ? (
|
obj.status === 1 ? (
|
||||||
<Typography
|
<Label color='success'>
|
||||||
variant="body2"
|
|
||||||
sx={{
|
|
||||||
width: 'Hug (6px)',
|
|
||||||
height: 'Hug (22px)',
|
|
||||||
left: '862px',
|
|
||||||
top: '17px',
|
|
||||||
color: '#229A16',
|
|
||||||
backgroundColor: '#54D62C29',
|
|
||||||
padding: '1px, 8px',
|
|
||||||
borderRadius: '6px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Active
|
Active
|
||||||
</Typography>
|
</Label>
|
||||||
) : (
|
) : (
|
||||||
<Typography
|
<Label color='error'>
|
||||||
variant="body2"
|
|
||||||
sx={{
|
|
||||||
width: 'Hug (6px)',
|
|
||||||
height: 'Hug (22px)',
|
|
||||||
left: '862px',
|
|
||||||
top: '17px',
|
|
||||||
color: '#B72136',
|
|
||||||
backgroundColor: '#FF484229',
|
|
||||||
padding: '1px, 8px',
|
|
||||||
borderRadius: '6px',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Inactive
|
Inactive
|
||||||
</Typography>
|
</Label>
|
||||||
),
|
),
|
||||||
start_date:
|
start_date:
|
||||||
<Typography
|
<Label>
|
||||||
sx={{
|
{obj.start_date ? fDateSuffix(obj.start_date) : ''}
|
||||||
backgroundColor: (theme) => theme.palette.grey[300],
|
</Label>
|
||||||
borderRadius: '4px',
|
|
||||||
width: '70%',
|
|
||||||
}}
|
|
||||||
variant="body2"
|
|
||||||
>
|
|
||||||
{obj.start_date ? format(new Date(obj.start_date), "dd MMM yyyy") : ''}
|
|
||||||
</Typography>
|
|
||||||
,
|
,
|
||||||
end_date:
|
end_date:
|
||||||
<Typography
|
<Label>
|
||||||
sx={{
|
{obj.end_date ? fDateSuffix(obj.end_date) : ''}
|
||||||
backgroundColor: (theme) => theme.palette.grey[300],
|
</Label>
|
||||||
borderRadius: '4px',
|
|
||||||
width: '70%',
|
|
||||||
}}
|
|
||||||
variant="body2"
|
|
||||||
>
|
|
||||||
{obj.end_date ? format(new Date(obj.end_date), "d MMM yyyy") : ''}
|
|
||||||
</Typography>
|
|
||||||
,
|
,
|
||||||
fullName:
|
fullName:
|
||||||
<Typography
|
<Typography
|
||||||
|
|||||||
@@ -116,23 +116,6 @@ export default function DialogClaimSubmitMember({
|
|||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
|
|
||||||
/* ------------------------------ Icon On Click ----------------------------- */
|
/* ------------------------------ 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,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCheck = (data: DataContentType, isChecked: boolean) => {
|
const handleCheck = (data: DataContentType, isChecked: boolean) => {
|
||||||
if (isChecked) {
|
if (isChecked) {
|
||||||
dispatch(claimSubmitAction.patch([...selectedData, data]));
|
dispatch(claimSubmitAction.patch([...selectedData, data]));
|
||||||
@@ -164,20 +147,12 @@ export default function DialogClaimSubmitMember({
|
|||||||
<Stack marginTop={2} spacing={1}>
|
<Stack marginTop={2} spacing={1}>
|
||||||
{data.map((row: DataContentType, key) => (
|
{data.map((row: DataContentType, key) => (
|
||||||
<Card
|
<Card
|
||||||
|
|
||||||
key={key}
|
key={key}
|
||||||
sx={{ paddingY: 1, paddingX: 2 }}
|
sx={{bgcolor: (theme) => {
|
||||||
// onClick={() =>
|
return selectedData.some((item) => item.memberId === row.memberId) ? theme.palette.primary.lighter : theme.palette.background.default
|
||||||
// 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">
|
<Stack direction="row" alignItems="center">
|
||||||
<Grid item xs={1} lg={1} xl={1}>
|
<Grid item xs={1} lg={1} xl={1}>
|
||||||
@@ -207,20 +182,20 @@ export default function DialogClaimSubmitMember({
|
|||||||
style={{ borderRadius: '50%' }}
|
style={{ borderRadius: '50%' }}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Grid item xs={7} lg={7} xl={7}>
|
<Grid item xs={11} lg={11} xl={11}>
|
||||||
<Typography variant="subtitle1">{row.fullName}</Typography>
|
<Typography variant="subtitle1">{row.fullName}</Typography>
|
||||||
<Typography color="#637381" variant="body2" sx={{ fontWeight: 500 }}>
|
<Typography color="#637381" variant="body2" sx={{ fontWeight: 500 }}>
|
||||||
{row.memberId}
|
{row.memberId}
|
||||||
</Typography>
|
</Typography>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={3} lg={3} xl={3}>
|
{/* <Grid item xs={3} lg={3} xl={3}> */}
|
||||||
<BorderLinearProgress
|
{/* <BorderLinearProgress
|
||||||
variant="determinate"
|
variant="determinate"
|
||||||
value={row.limit && row.limit.percentage}
|
value={row.limit && row.limit.percentage}
|
||||||
// color='success'
|
// color='success'
|
||||||
sx={{ mb: 1 }}
|
sx={{ mb: 1 }}
|
||||||
/>
|
/> */}
|
||||||
<Stack direction={'row'}>
|
{/* <Stack direction={'row'}>
|
||||||
<Grid item xs={3}>
|
<Grid item xs={3}>
|
||||||
<Typography variant="overline" sx={{ textAlign: 'left' }}>
|
<Typography variant="overline" sx={{ textAlign: 'left' }}>
|
||||||
LIMIT
|
LIMIT
|
||||||
@@ -236,18 +211,18 @@ export default function DialogClaimSubmitMember({
|
|||||||
</Typography>
|
</Typography>
|
||||||
</Stack>
|
</Stack>
|
||||||
</Grid>
|
</Grid>
|
||||||
</Stack>
|
</Stack> */}
|
||||||
</Grid>
|
{/* </Grid> */}
|
||||||
<Grid
|
<Grid
|
||||||
item
|
item
|
||||||
xs={2}
|
xs={1}
|
||||||
lg={2}
|
lg={1}
|
||||||
xl={2}
|
xl={1}
|
||||||
style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
|
style={{ display: 'flex', justifyContent: 'right', alignItems: 'right' }}
|
||||||
>
|
>
|
||||||
<IconButton>
|
{/* <IconButton>
|
||||||
<Iconify icon="ic:history" />
|
<Iconify icon="ic:history" />
|
||||||
</IconButton>
|
</IconButton> */}
|
||||||
<IconButton
|
<IconButton
|
||||||
disabled={selectedData.length > 0}
|
disabled={selectedData.length > 0}
|
||||||
sx={{ marginLeft: '10px' }}
|
sx={{ marginLeft: '10px' }}
|
||||||
|
|||||||
Reference in New Issue
Block a user