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

update componen label

Browse Source
This commit is contained in:
Tb Fajri
2023-10-13 16:15:52 +07:00
parent a694bc03f3
commit c3b745e23b
8 changed files with 165 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
frontend/client-portal/src/components/Label.tsx Normal file
View 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>
);
}

23
frontend/client-portal/src/pages/AlarmCenter/List.tsx
View File

@@ -40,6 +40,7 @@ import TableMoreMenu from '../../components/table/TableMoreMenu';
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
import DetailDataMember from './ListMember';
import Label from '../../components/Label';
/* ---------------------------------- types --------------------------------- */
@@ -398,28 +399,10 @@ export default function List() {
// >{obj.memberId}</Button>
// ,
start_date:
<Typography
sx={{
background: 'rgba(145, 158, 171, 0.16)',
color: '#637381',
paddingX: 1.5,
paddingY: 1,
borderRadius: 3,
}} variant='overline'
>{ fDateSuffix(obj.start_date) }
</Typography>
<Label>{ fDateSuffix(obj.start_date) }</Label>
,
end_date:
<Typography
sx={{
background: 'rgba(145, 158, 171, 0.16)',
color: '#637381',
paddingX: 1.5,
paddingY: 1,
borderRadius: 3,
}} variant='overline'
>{ fDateSuffix(obj.end_date) }
</Typography>
<Label> { fDateSuffix(obj.end_date) }</Label>
,
// status:
// obj.status === 1 ? (

48
frontend/client-portal/src/pages/AlarmCenter/ListMember.tsx
View File

@@ -40,6 +40,7 @@ import { useSearchParams, useNavigate, Link, useParams } from 'react-router-dom'
import { fDateSuffix, fPostFormat } from '../../utils/formatTime';
import TableMoreMenu from '../../components/table/TableMoreMenu';
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
import Label from '../../components/Label';
/* ---------------------------------- types --------------------------------- */
@@ -400,55 +401,20 @@ export default function List() {
return {
...obj,
admission_date:
<Typography
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>
<Label>{ fDateSuffix(obj.admission_date) }</Label>
,
discharge_date:
<Typography
sx={{
background: 'rgba(145, 158, 171, 0.16)',
color: '#637381',
paddingX: 1.5,
paddingY: 1,
borderRadius: 3,
}} variant='overline'
>{ fDateSuffix(obj.discharge_date) }
</Typography>
<Label>{ fDateSuffix(obj.discharge_date) }</Label>
,
status:
obj.status === 'Done' ? (
<Typography
sx={{
background: 'rgba(84, 214, 44, 0.16)',
color: '#229A16',
paddingX: 1.5,
paddingY: 1,
borderRadius: 3,
}} variant='overline'
>
<Label color='success'>
Done
</Typography>
</Label>
) : (
<Typography
sx={{
background: 'rgba(255, 193, 7, 0.16)',
color: '#BF6919',
paddingX: 1.5,
paddingY: 1,
borderRadius: 3,
}} variant='overline'
>
<Label color='warning'>
Ongoing
</Typography>
</Label>
),
action:
<TableMoreMenu actions={

78
frontend/client-portal/src/pages/AlarmCenter/ServiceMonitoring.tsx
View File

@@ -35,6 +35,7 @@ import { Timeline, TimelineConnector, TimelineContent, TimelineDot, TimelineSepa
import Select from '../../theme/overrides/Select';
import TableMoreMenu from '../../components/table/TableMoreMenu';
import { MenuItem } from '@mui/material';
import Label from '../../components/Label';
// sections
// import ListTable from '../../sections/claimreports/ListTable';
// import ClaimStatusCard from '../../sections/claimreports/ClaimStatusCard';
@@ -291,38 +292,18 @@ export default function ServiceMonitoring() {
<Grid item xs={12} lg={12} md={12}>
<Stack spacing={1}>
<Typography variant="inherit">Main Diagnosis</Typography>
<Stack direction={'row'}>
<Stack direction={'row'} gap={1}>
<Typography variant="h6">{data?.main_diagnose}</Typography>
<Typography
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>
<Label>{data?.main_diagnose_code}</Label>
</Stack>
</Stack>
</Grid>
<Grid item xs={12} lg={12} md={12}>
<Stack spacing={1}>
<Typography variant="inherit">Comparative Diagnosis</Typography>
<Stack direction={'row'}>
<Stack direction={'row'} gap={1}>
<Typography variant="h6">{data?.comparative_diagnosis}</Typography>
<Typography
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>
<Label>{data?.comparative_diagnosis_code}</Label>
</Stack>
</Stack>
</Grid>
@@ -411,27 +392,9 @@ export default function ServiceMonitoring() {
<TimelineContent>
<Typography variant='h5' sx={{marginBottom: 2}}> { fDateSuffix(row.date)}</Typography>
<Card sx={{paddinX:2, paddingY:2}} >
<Stack direction={'row'} sx={{ alignItems: 'center' }}>
<Typography
sx={{
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 direction={'row'} sx={{ alignItems: 'center', padding: 2, justifyContent: 'space-between' }}>
<Label> {row.time} </Label>
<Label color='success' sx={{marginRight: 0}}> {row.status} </Label>
</Stack>
<hr style={{margin:10, marginLeft:15, marginRight:15, color: 'rgba(145, 158, 171, 0.32)' }}/>
<Stack spacing={3} sx={{ paddingY: 1, paddingX: 3 }}>
@@ -537,23 +500,13 @@ export default function ServiceMonitoring() {
<Grid container>
<Grid item xs={12} md={12}>
{data?.laboratorium_result.length > 0 ? data?.laboratorium_result.map((row, index) => (
<Card sx={{paddinX:2, paddingY:2, paddingX:1, marginTop:2 }} key={index} >
<Stack paddingX={5}>
<Typography variant='subtitle1'>{fDateSuffix(row[index].datetime)}</Typography>
{row.length > 0 ? row.map((list, i) => (
<Card key={i} sx={{marginTop:2, paddingX:2, paddingY:2}}>
<Typography
sx={{
background: 'rgba(145, 158, 171, 0.16)',
color: '#637381',
borderRadius: 1,
marginBottom: 2,
paddingX: 2,
paddingY: 1,
}} variant='overline'> {list.reimbursement_code}
</Typography>
<Label> {list.reimbursement_code}
</Label>
<Table sx={{marginY:2}}>
<TableHead>
<TableRow>
@@ -566,16 +519,7 @@ export default function ServiceMonitoring() {
<TableBody>
<TableRow>
<TableCell>
<Typography
sx={{
background: 'rgba(145, 158, 171, 0.16)',
color: '#637381',
borderRadius: 1,
marginBottom: 2,
paddingX: 2,
paddingY: 1,
}} variant='overline'> {fDateTime(list.datetime)}
</Typography>
<Label> {fDateTime(list.datetime)}</Label>
</TableCell>
<TableCell>{list.examination}</TableCell>
<TableCell>{list.location}</TableCell>

96
frontend/client-portal/src/pages/ClaimReport/List.tsx
View File

@@ -14,13 +14,14 @@ import palette from '../../theme/palette';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
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 { format } from 'date-fns';
import TableMoreMenu from '../../components/table/TableMoreMenu';
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
import HistoryIcon from '@mui/icons-material/History';
import SearchIcon from '@mui/icons-material/Search';
import Label from '../../components/Label';
export default function List() {
const navigate = useNavigate();
@@ -179,85 +180,25 @@ export default function List() {
...obj,
status:
obj.status === 'requested' ? (
<Typography
variant="body2"
sx={{
width: 'Hug (6px)',
height: 'Hug (22px)',
left: '862px',
top: '17px',
color: '#159C9C',
backgroundColor: '#00AB5529',
padding: '1px, 8px',
borderRadius: '6px',
}}
>
<Label color='primary'>
Request
</Typography>
</Label>
) : obj.status === 'approved' ? (
<Typography
variant="body2"
sx={{
width: 'Hug (6px)',
height: 'Hug (22px)',
left: '862px',
top: '17px',
color: '#229A16',
backgroundColor: '#54D62C29',
padding: '1px, 8px',
borderRadius: '6px',
}}
>
<Label color='success' >
Approval
</Typography>
</Label>
) : obj.status === 'declined' ? (
<Typography
variant="body2"
sx={{
width: 'Hug (6px)',
height: 'Hug (22px)',
left: '862px',
top: '17px',
color: '#B72136',
backgroundColor: '#FF484229',
padding: '1px, 8px',
borderRadius: '6px',
}}
>
<Label color='error'>
Decline
</Typography>
</Label>
) : obj.status === 'pending' ? (
<Typography
variant="body2"
sx={{
width: 'Hug (6px)',
height: 'Hug (22px)',
left: '862px',
top: '17px',
color: '#BF6919',
backgroundColor: '#FFC10729',
padding: '1px, 8px',
borderRadius: '6px',
}}
>
<Label color='primary'>
Pending
</Typography>
</Label>
) : obj.status === 'reviewed' ? (
<Typography
variant="body2"
sx={{
width: 'Hug (6px)',
height: 'Hug (22px)',
left: '862px',
top: '17px',
color: '#0C53B7',
backgroundColor: '#1890FF29',
padding: '1px, 8px',
borderRadius: '6px',
}}
>
<Label color='info'>
Review
</Typography>
</Label>
) : (
<Button
startIcon={<Iconify icon="fa6-solid:clock" />}
@@ -276,16 +217,9 @@ export default function List() {
</Button>
),
submission_date:
<Typography
sx={{
backgroundColor: (theme) => theme.palette.grey[300],
borderRadius: '4px',
width: '70%',
}}
variant="body2"
>
{obj.submission_date ? format(new Date(obj.submission_date), "d MMM yyyy") : ''}
</Typography>
<Label>
{obj.submission_date ? fDateSuffix(obj.submission_date) : ''}
</Label>
,
action:
<TableMoreMenu actions={

2
frontend/client-portal/src/pages/ClaimSubmit/DialogDetailClaim.tsx
View File

@@ -512,7 +512,7 @@ const Buttons = ({ handle, row, type }: ButtonIProp) => {
>
<Iconify icon="icon-park-outline:upload-one" fontSize="3em" />
<Typography variant="body1" fontWeight="bold">
Add Invoice
Add {type}
</Typography>
</Box>
<input

61
frontend/client-portal/src/pages/EmployeeData/List.tsx
View File

@@ -33,12 +33,13 @@ import palette from '../../theme/palette';
import { UserCurrentCorporateContext } from '../../contexts/UserCurrentCorporate';
import { HeadCell, Order, PaginationTableProps } from '../../@types/table';
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 Typography from '@mui/material/Typography';
import TableMoreMenu from '../../components/table/TableMoreMenu';
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
import Label from '../../components/Label';
/* ---------------------------------- types --------------------------------- */
@@ -301,61 +302,23 @@ export default function List() {
// ,
status:
obj.status === 1 ? (
<Typography
variant="body2"
sx={{
width: 'Hug (6px)',
height: 'Hug (22px)',
left: '862px',
top: '17px',
color: '#229A16',
backgroundColor: '#54D62C29',
padding: '1px, 8px',
borderRadius: '6px',
}}
>
<Label color='success'>
Active
</Typography>
</Label>
) : (
<Typography
variant="body2"
sx={{
width: 'Hug (6px)',
height: 'Hug (22px)',
left: '862px',
top: '17px',
color: '#B72136',
backgroundColor: '#FF484229',
padding: '1px, 8px',
borderRadius: '6px',
}}
>
<Label color='error'>
Inactive
</Typography>
</Label>
),
start_date:
<Typography
sx={{
backgroundColor: (theme) => theme.palette.grey[300],
borderRadius: '4px',
width: '70%',
}}
variant="body2"
>
{obj.start_date ? format(new Date(obj.start_date), "dd MMM yyyy") : ''}
</Typography>
<Label>
{obj.start_date ? fDateSuffix(obj.start_date) : ''}
</Label>
,
end_date:
<Typography
sx={{
backgroundColor: (theme) => theme.palette.grey[300],
borderRadius: '4px',
width: '70%',
}}
variant="body2"
>
{obj.end_date ? format(new Date(obj.end_date), "d MMM yyyy") : ''}
</Typography>
<Label>
{obj.end_date ? fDateSuffix(obj.end_date) : ''}
</Label>
,
fullName:
<Typography

61
frontend/client-portal/src/sections/claim-submit/DialogClaimSubmitMember.tsx
View File

@@ -116,23 +116,6 @@ export default function DialogClaimSubmitMember({
/* -------------------------------------------------------------------------- */
/* ------------------------------ 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) => {
if (isChecked) {
dispatch(claimSubmitAction.patch([...selectedData, data]));
@@ -164,20 +147,12 @@ export default function DialogClaimSubmitMember({
<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,
// },
// })
// }
sx={{bgcolor: (theme) => {
return selectedData.some((item) => item.memberId === row.memberId) ? theme.palette.primary.lighter : theme.palette.background.default
}
}}
>
<Stack direction="row" alignItems="center">
<Grid item xs={1} lg={1} xl={1}>
@@ -207,20 +182,20 @@ export default function DialogClaimSubmitMember({
style={{ borderRadius: '50%' }}
/>
</div>
<Grid item xs={7} lg={7} xl={7}>
<Grid item xs={11} lg={11} xl={11}>
<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
{/* <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'}>
/> */}
{/* <Stack direction={'row'}>
<Grid item xs={3}>
<Typography variant="overline" sx={{ textAlign: 'left' }}>
LIMIT
@@ -236,18 +211,18 @@ export default function DialogClaimSubmitMember({
</Typography>
</Stack>
</Grid>
</Stack>
</Grid>
</Stack> */}
{/* </Grid> */}
<Grid
item
xs={2}
lg={2}
xl={2}
style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
xs={1}
lg={1}
xl={1}
style={{ display: 'flex', justifyContent: 'right', alignItems: 'right' }}
>
<IconButton>
{/* <IconButton>
<Iconify icon="ic:history" />
</IconButton>
</IconButton> */}
<IconButton
disabled={selectedData.length > 0}
sx={{ marginLeft: '10px' }}