diff --git a/frontend/client-portal/src/components/Label.tsx b/frontend/client-portal/src/components/Label.tsx new file mode 100644 index 00000000..c633ec4f --- /dev/null +++ b/frontend/client-portal/src/components/Label.tsx @@ -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 ( + + {children} + + ); +} + + diff --git a/frontend/client-portal/src/pages/AlarmCenter/List.tsx b/frontend/client-portal/src/pages/AlarmCenter/List.tsx index d67fb19f..7d06494e 100644 --- a/frontend/client-portal/src/pages/AlarmCenter/List.tsx +++ b/frontend/client-portal/src/pages/AlarmCenter/List.tsx @@ -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} // , start_date: - { fDateSuffix(obj.start_date) } - + , end_date: - { fDateSuffix(obj.end_date) } - + , // status: // obj.status === 1 ? ( diff --git a/frontend/client-portal/src/pages/AlarmCenter/ListMember.tsx b/frontend/client-portal/src/pages/AlarmCenter/ListMember.tsx index 9eb8aaf9..296c7d70 100644 --- a/frontend/client-portal/src/pages/AlarmCenter/ListMember.tsx +++ b/frontend/client-portal/src/pages/AlarmCenter/ListMember.tsx @@ -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: - { fDateSuffix(obj.admission_date) } - + , discharge_date: - { fDateSuffix(obj.discharge_date) } - + , status: obj.status === 'Done' ? ( - + + ) : ( - + + ), action: Main Diagnosis - + {data?.main_diagnose} - {data?.main_diagnose_code} + Comparative Diagnosis - + {data?.comparative_diagnosis} - {data?.comparative_diagnosis_code} + @@ -411,27 +392,9 @@ export default function ServiceMonitoring() { { fDateSuffix(row.date)} - - {row.time} - {row.status} - + + +
@@ -537,23 +500,13 @@ export default function ServiceMonitoring() { {data?.laboratorium_result.length > 0 ? data?.laboratorium_result.map((row, index) => ( - {fDateSuffix(row[index].datetime)} - {row.length > 0 ? row.map((list, i) => ( - {list.reimbursement_code} - + @@ -566,16 +519,7 @@ export default function ServiceMonitoring() { - {fDateTime(list.datetime)} - + {list.examination} {list.location} diff --git a/frontend/client-portal/src/pages/ClaimReport/List.tsx b/frontend/client-portal/src/pages/ClaimReport/List.tsx index 4c3417f6..d9bc3008 100644 --- a/frontend/client-portal/src/pages/ClaimReport/List.tsx +++ b/frontend/client-portal/src/pages/ClaimReport/List.tsx @@ -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' ? ( - + + ) : obj.status === 'approved' ? ( - + + ) : obj.status === 'declined' ? ( - + + ) : obj.status === 'pending' ? ( - + + ) : obj.status === 'reviewed' ? ( - + + ) : ( ), submission_date: - theme.palette.grey[300], - borderRadius: '4px', - width: '70%', - }} - variant="body2" - > - {obj.submission_date ? format(new Date(obj.submission_date), "d MMM yyyy") : ''} - + , action: { > - Add Invoice + Add {type} + ) : ( - + + ), start_date: - theme.palette.grey[300], - borderRadius: '4px', - width: '70%', - }} - variant="body2" - > - {obj.start_date ? format(new Date(obj.start_date), "dd MMM yyyy") : ''} - + , end_date: - theme.palette.grey[300], - borderRadius: '4px', - width: '70%', - }} - variant="body2" - > - {obj.end_date ? format(new Date(obj.end_date), "d MMM yyyy") : ''} - + , fullName: { - 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({ {data.map((row: DataContentType, key) => ( - // 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 + } + }} > @@ -207,20 +182,20 @@ export default function DialogClaimSubmitMember({ style={{ borderRadius: '50%' }} /> - + {row.fullName} {row.memberId} - - */} + {/* - + /> */} + {/* LIMIT @@ -236,18 +211,18 @@ export default function DialogClaimSubmitMember({ - - + */} + {/* */} - + {/* - + */} 0} sx={{ marginLeft: '10px' }}