feat: initial commit
This commit is contained in:
@@ -0,0 +1,65 @@
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import { styled } from '@mui/material/styles';
|
||||
|
||||
function BpCheckbox(props) {
|
||||
const BpIcon = styled('span')(({ theme }) => ({
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
width: props?.size ?? '13px',
|
||||
height: props?.size ?? '13px',
|
||||
boxShadow:
|
||||
'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
|
||||
backgroundColor: theme.palette.grey[11],
|
||||
backgroundImage:
|
||||
'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
|
||||
'.Mui-focusVisible &': {
|
||||
outline: 'none',
|
||||
},
|
||||
'input:hover ~ &': {
|
||||
backgroundColor: theme.palette.grey[12],
|
||||
},
|
||||
'input:disabled ~ &': {
|
||||
boxShadow: 'none',
|
||||
background: theme.palette.grey[13],
|
||||
},
|
||||
}));
|
||||
|
||||
const BpCheckedIcon = styled(BpIcon)(({ theme }) => ({
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
backgroundImage:
|
||||
'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
|
||||
'&:before': {
|
||||
display: 'block',
|
||||
width: props?.size ?? '13px',
|
||||
height: props?.size ?? '13px',
|
||||
backgroundImage:
|
||||
"url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
|
||||
" fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
|
||||
"1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
|
||||
content: '""',
|
||||
},
|
||||
'input:hover ~ &': {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
},
|
||||
}));
|
||||
return (
|
||||
<Checkbox
|
||||
sx={{
|
||||
'&:hover': { bgcolor: 'transparent' },
|
||||
}}
|
||||
disableripple="true"
|
||||
color="default"
|
||||
checkedIcon={<BpCheckedIcon />}
|
||||
icon={<BpIcon />}
|
||||
inputProps={{ 'aria-label': 'Checkbox demo' }}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default function CustomizedCheckbox(props) {
|
||||
return (
|
||||
<div>
|
||||
<BpCheckbox {...props} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import React from 'react';
|
||||
import { useStyles } from './styles/customBreadcrumbsStyles';
|
||||
import NavigateNextIcon from '@mui/icons-material/NavigateNext';
|
||||
import { Breadcrumbs } from '@mui/material';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
function CustomBreadcrumbs({ breadcrumbs }) {
|
||||
const classes = useStyles();
|
||||
const crums = [...breadcrumbs];
|
||||
return (
|
||||
<Breadcrumbs
|
||||
className={classes.root}
|
||||
separator={<NavigateNextIcon className={classes.sepreaterBreadCrumb} />}
|
||||
>
|
||||
{crums.map((breadcrumb, index) => (
|
||||
<Link
|
||||
key={breadcrumb.path}
|
||||
to={{
|
||||
pathname: breadcrumb.path,
|
||||
search: breadcrumb.query
|
||||
? `?${new URLSearchParams(breadcrumb.query).toString()}`
|
||||
: '',
|
||||
}}
|
||||
className={
|
||||
index === breadcrumbs.length - 1
|
||||
? classes.activeBreadCrumb
|
||||
: classes.inActiveBreadCrumb
|
||||
}
|
||||
>
|
||||
{breadcrumb.label}
|
||||
</Link>
|
||||
))}
|
||||
</Breadcrumbs>
|
||||
);
|
||||
}
|
||||
|
||||
export default CustomBreadcrumbs;
|
||||
@@ -0,0 +1,489 @@
|
||||
import React, {
|
||||
forwardRef,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { useStyles } from './styles/customFileUploadStyles';
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
CircularProgress,
|
||||
Grid,
|
||||
InputLabel,
|
||||
Modal,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
|
||||
import Dropzone from 'react-dropzone';
|
||||
import SaveAltIcon from '@mui/icons-material/SaveAlt';
|
||||
import RemoveRedEyeOutlinedIcon from '@mui/icons-material/RemoveRedEyeOutlined';
|
||||
import RemoveOutlinedIcon from '@mui/icons-material/RemoveOutlined';
|
||||
import AddOutlinedIcon from '@mui/icons-material/AddOutlined';
|
||||
import ZoomOutOutlinedIcon from '@mui/icons-material/ZoomOutOutlined';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import downloadIcon from '../assets/images/icon/download.svg';
|
||||
import { pushNotification } from '../utils/notification';
|
||||
import { FILE_TYPE, NOTIFICATION } from '../constants';
|
||||
import uploadIcon from '../assets/images/icon/upload.svg';
|
||||
import PdfIcon from '../assets/images/icon/pdf.png';
|
||||
import DocIcon from '../assets/images/icon/doc.png';
|
||||
import { fileUpload } from '../services/file.upload.services';
|
||||
import { IMAGE_LOCATION_BASE_URL } from '../common/envVariables';
|
||||
|
||||
const CustomFileUpload = forwardRef(function CustomFileUpload(
|
||||
{
|
||||
documentName,
|
||||
label,
|
||||
saveFileName,
|
||||
onUploadDone,
|
||||
maxFileSizeInMb,
|
||||
maxFiles,
|
||||
uploadedFileUrl,
|
||||
errorMessage,
|
||||
isDisabled = false,
|
||||
},
|
||||
ref
|
||||
) {
|
||||
const classes = useStyles();
|
||||
const imageRef = useRef(null);
|
||||
const fileInputRef = useRef(null);
|
||||
const [image, setImage] = useState(null);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [openPreview, setOpenPreview] = useState(false);
|
||||
const [imageName, setImageName] = useState(
|
||||
uploadedFileUrl ? uploadedFileUrl.split('/').pop() : ''
|
||||
);
|
||||
const [fileExtension, setFileExtension] = useState(
|
||||
uploadedFileUrl ? uploadedFileUrl.split('.').pop() : ''
|
||||
);
|
||||
const [oldUploadedFileUrl, setOldUploadedFileUrl] = useState(
|
||||
uploadedFileUrl ? uploadedFileUrl : ''
|
||||
);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
focus: () => {
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.focus();
|
||||
}
|
||||
},
|
||||
scrollIntoView: (...args) => {
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.scrollIntoView(...args);
|
||||
}
|
||||
},
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
const makeFullUrlIfNeeded = (url) => {
|
||||
const isHttp = url.startsWith('http://') || url.startsWith('https://');
|
||||
if (!isHttp) {
|
||||
setOldUploadedFileUrl(url ? `${IMAGE_LOCATION_BASE_URL}${url}` : '');
|
||||
setFileExtension(
|
||||
uploadedFileUrl ? uploadedFileUrl.split('.').pop() : ''
|
||||
);
|
||||
setImageName(uploadedFileUrl ? uploadedFileUrl.split('/').pop() : '');
|
||||
return;
|
||||
}
|
||||
const urlObject = new URL(url);
|
||||
const fileName = urlObject.pathname.split('/').pop();
|
||||
setImageName(fileName);
|
||||
setFileExtension(fileName.split('.').pop());
|
||||
setOldUploadedFileUrl(url);
|
||||
return url;
|
||||
};
|
||||
makeFullUrlIfNeeded(uploadedFileUrl);
|
||||
}, [uploadedFileUrl]);
|
||||
|
||||
const handleClearImage = () => {
|
||||
setImage(null);
|
||||
setImageName('');
|
||||
setFileExtension('');
|
||||
setOldUploadedFileUrl('');
|
||||
onUploadDone(documentName, '');
|
||||
};
|
||||
|
||||
const handleFileUpload = async (value) => {
|
||||
if (!value) {
|
||||
return;
|
||||
}
|
||||
let formData = new FormData();
|
||||
formData.append('file', value);
|
||||
formData.append('fileName', value?.name);
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const data = await fileUpload(formData);
|
||||
onUploadDone(documentName, data?.data?.data?.Key);
|
||||
return;
|
||||
} catch (error) {
|
||||
// console.error(error);
|
||||
pushNotification('Error while uploading file', NOTIFICATION.ERROR);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDrop = async (acceptedFiles) => {
|
||||
const file = acceptedFiles[0];
|
||||
await handleFileUpload(file);
|
||||
setImage(file);
|
||||
setImageName(file.name);
|
||||
setOldUploadedFileUrl('');
|
||||
setFileExtension('');
|
||||
};
|
||||
|
||||
const handelRejection = (rejectedFiles) => {
|
||||
rejectedFiles.forEach((rejection) => {
|
||||
pushNotification(
|
||||
`${rejection?.file?.name} : ${rejection?.errors?.[0]?.message}`,
|
||||
NOTIFICATION.ERROR
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const handlePreview = () => {
|
||||
setOpenPreview(true);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setOpenPreview(false);
|
||||
};
|
||||
|
||||
const handleDownload = () => {
|
||||
if (image) {
|
||||
const imageUrl = URL.createObjectURL(image);
|
||||
const anchor = document.createElement('a');
|
||||
anchor.href = imageUrl;
|
||||
anchor.download = saveFileName || imageName || 'Image';
|
||||
anchor.click();
|
||||
}
|
||||
if (oldUploadedFileUrl) {
|
||||
const imageUrl = oldUploadedFileUrl;
|
||||
const anchor = document.createElement('a');
|
||||
anchor.href = imageUrl;
|
||||
anchor.download = saveFileName || imageName || 'Image';
|
||||
anchor.click();
|
||||
}
|
||||
};
|
||||
|
||||
const Controls = ({ zoomIn, zoomOut, resetTransform }) => (
|
||||
<>
|
||||
<Grid className={classes.controlButtons}>
|
||||
<Button
|
||||
className={`${classes.zoomOutButton} ${classes.controlButton}`}
|
||||
onClick={() => zoomOut()}
|
||||
>
|
||||
<RemoveOutlinedIcon className={classes.iconSize} />
|
||||
</Button>
|
||||
<Button
|
||||
className={`${classes.zoomResetButton} ${classes.controlButton}`}
|
||||
onClick={() => resetTransform()}
|
||||
>
|
||||
<ZoomOutOutlinedIcon className={classes.iconSize} />
|
||||
</Button>
|
||||
<Button
|
||||
className={`${classes.zoomInButton} ${classes.controlButton}`}
|
||||
onClick={() => zoomIn()}
|
||||
>
|
||||
<AddOutlinedIcon className={classes.iconSize} />
|
||||
</Button>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
const FileUploadComponent = ({
|
||||
isLoading,
|
||||
fileUrl,
|
||||
fileExtension,
|
||||
maxFileSizeInMb,
|
||||
handlePreview,
|
||||
handleDownload,
|
||||
classes,
|
||||
}) => (
|
||||
<>
|
||||
<Box className={classes?.addButton}>
|
||||
<Box className={classes?.addButtonContent}>
|
||||
{isLoading ? (
|
||||
<CircularProgress />
|
||||
) : (
|
||||
<>
|
||||
{fileUrl ? (
|
||||
<>
|
||||
{fileExtension === 'pdf' ? (
|
||||
<img
|
||||
alt="Uploaded file"
|
||||
src={PdfIcon}
|
||||
height="125px"
|
||||
width="auto"
|
||||
/>
|
||||
) : fileExtension === 'doc' ||
|
||||
fileExtension === 'docx' ||
|
||||
fileExtension ===
|
||||
'vnd.openxmlformats-officedocument.wordprocessingml.document' ||
|
||||
fileExtension === 'msword' ? (
|
||||
<img
|
||||
alt="Uploaded file"
|
||||
src={DocIcon}
|
||||
height="125px"
|
||||
width="auto"
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
alt="Uploaded file"
|
||||
src={fileUrl}
|
||||
height="125px"
|
||||
width="auto"
|
||||
/>
|
||||
)}
|
||||
<Box className={classes?.onImageButton}>
|
||||
<button
|
||||
type="button"
|
||||
className={classes.eyeButton}
|
||||
onClick={handlePreview}
|
||||
>
|
||||
<RemoveRedEyeOutlinedIcon className={classes.iconSize} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={classes.downloadButton}
|
||||
onClick={handleDownload}
|
||||
>
|
||||
<SaveAltIcon className={classes.iconSize} />
|
||||
</button>
|
||||
</Box>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Box
|
||||
className={classes?.addIcon}
|
||||
component="img"
|
||||
src={uploadIcon}
|
||||
/>
|
||||
<Typography className={classes?.addText}>
|
||||
Drag and drop file here, or click add
|
||||
</Typography>
|
||||
<Typography className={classes.addSubtext}>
|
||||
Allowed file types are jpeg, png, pdf, svg, doc to a maximum
|
||||
size of {maxFileSizeInMb} MB
|
||||
</Typography>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
{errorMessage && (
|
||||
<Box className={classes.errorMessage}>{errorMessage}</Box>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
const PreviewComponent = ({
|
||||
fileUrl,
|
||||
fileExtension,
|
||||
handleDownload,
|
||||
classes,
|
||||
}) => (
|
||||
<>
|
||||
{fileExtension === 'pdf' ? (
|
||||
<>
|
||||
<Box className={classes.pdfAndDocPreviewBox}>
|
||||
<img
|
||||
alt="Uploaded file"
|
||||
src={PdfIcon}
|
||||
ref={imageRef}
|
||||
height="125px"
|
||||
width="auto"
|
||||
/>
|
||||
<Button
|
||||
className={classes.pdfAndDocPreviewDownloadButton}
|
||||
variant="contained"
|
||||
onClick={handleDownload}
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
</Box>
|
||||
</>
|
||||
) : fileExtension === 'doc' ||
|
||||
fileExtension === 'docx' ||
|
||||
fileExtension ===
|
||||
'vnd.openxmlformats-officedocument.wordprocessingml.document' ||
|
||||
fileExtension === 'msword' ? (
|
||||
<>
|
||||
<Box className={classes.pdfAndDocPreviewBox}>
|
||||
<img
|
||||
alt="Uploaded file"
|
||||
src={DocIcon}
|
||||
ref={imageRef}
|
||||
height="125px"
|
||||
width="auto"
|
||||
/>
|
||||
<Button
|
||||
className={classes.pdfAndDocPreviewDownloadButton}
|
||||
variant="contained"
|
||||
onClick={handleDownload}
|
||||
>
|
||||
Download
|
||||
</Button>
|
||||
</Box>
|
||||
</>
|
||||
) : (
|
||||
<TransformWrapper>
|
||||
{(utils) => (
|
||||
<React.Fragment>
|
||||
<Box className={classes.transFormImageBox}>
|
||||
<TransformComponent
|
||||
wrapperClass={classes.customTransFormWrapper}
|
||||
>
|
||||
<img
|
||||
alt="Uploaded file"
|
||||
src={fileUrl}
|
||||
ref={imageRef}
|
||||
height="250px"
|
||||
width="auto"
|
||||
/>
|
||||
</TransformComponent>
|
||||
</Box>
|
||||
<Controls {...utils} />
|
||||
</React.Fragment>
|
||||
)}
|
||||
</TransformWrapper>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box className={classes.mainBox}>
|
||||
<InputLabel className={classes?.inputTitle}>
|
||||
{label}
|
||||
{(image || oldUploadedFileUrl) && (
|
||||
<div>
|
||||
{!isDisabled && (
|
||||
<button
|
||||
className={classes.imgButton}
|
||||
onClick={handleClearImage}
|
||||
>
|
||||
REMOVE
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</InputLabel>
|
||||
<Box display="flex">
|
||||
<Box className={classes.dropZoneOuterBox}>
|
||||
<label htmlFor="file" ref={fileInputRef}>
|
||||
<Dropzone
|
||||
accept={{
|
||||
'image/': [...FILE_TYPE],
|
||||
}}
|
||||
onDrop={handleDrop}
|
||||
onDropRejected={handelRejection}
|
||||
maxFiles={maxFiles}
|
||||
maxSize={maxFileSizeInMb * 1024 * 1024}
|
||||
disabled={isDisabled}
|
||||
>
|
||||
{({ getRootProps, getInputProps }) => (
|
||||
<div
|
||||
{...getRootProps({
|
||||
onClick: (event) => {
|
||||
if (image || oldUploadedFileUrl) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
},
|
||||
})}
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
{!oldUploadedFileUrl ? (
|
||||
<>
|
||||
<FileUploadComponent
|
||||
isLoading={isLoading}
|
||||
fileUrl={image ? URL.createObjectURL(image) : null}
|
||||
fileExtension={
|
||||
image ? image.type.split('/')[1] : null
|
||||
}
|
||||
maxFileSizeInMb={maxFileSizeInMb}
|
||||
handlePreview={handlePreview}
|
||||
handleDownload={handleDownload}
|
||||
classes={classes}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<FileUploadComponent
|
||||
isLoading={isLoading}
|
||||
fileUrl={oldUploadedFileUrl}
|
||||
fileExtension={fileExtension}
|
||||
maxFileSizeInMb={maxFileSizeInMb}
|
||||
handlePreview={handlePreview}
|
||||
handleDownload={handleDownload}
|
||||
classes={classes}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Dropzone>
|
||||
</label>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Modal open={openPreview} onClose={handleClose}>
|
||||
<Box className={classes.previewFullScreenBox}>
|
||||
<Grid md={12} className={classes.previewHeading}>
|
||||
<Grid md={2}>
|
||||
<Button
|
||||
className={classes.previewDownloadButton}
|
||||
onClick={handleDownload}
|
||||
>
|
||||
<img
|
||||
src={downloadIcon}
|
||||
className={classes.previewDownloadIcon}
|
||||
/>
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleClose}
|
||||
className={classes.previewCloseButton}
|
||||
>
|
||||
<CloseIcon className={classes.iconSize} />
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid container>
|
||||
<Grid item md={12} className={classes.previewFileTitle}>
|
||||
<Typography color="white">{imageName}</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid xs={12} className={classes.previewImageGrid}>
|
||||
{!oldUploadedFileUrl ? (
|
||||
<>
|
||||
<PreviewComponent
|
||||
fileUrl={image ? URL.createObjectURL(image) : null}
|
||||
fileExtension={image ? image.type.split('/')[1] : null}
|
||||
handlePreview={handlePreview}
|
||||
handleDownload={handleDownload}
|
||||
classes={classes}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<PreviewComponent
|
||||
fileUrl={oldUploadedFileUrl}
|
||||
fileExtension={fileExtension}
|
||||
handlePreview={handlePreview}
|
||||
handleDownload={handleDownload}
|
||||
classes={classes}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</Grid>
|
||||
</Box>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
export default CustomFileUpload;
|
||||
@@ -0,0 +1,102 @@
|
||||
import { Check } from '@mui/icons-material';
|
||||
import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
|
||||
import { Box, Stack, Step, StepLabel, Stepper } from '@mui/material';
|
||||
import StepConnector, {
|
||||
stepConnectorClasses,
|
||||
} from '@mui/material/StepConnector';
|
||||
import { styled } from '@mui/styles';
|
||||
import React from 'react';
|
||||
import { useStyles } from './styles/customStepperStyles';
|
||||
|
||||
const CustomStepper = ({ activeStep }) => {
|
||||
const classes = useStyles();
|
||||
const steps = ['Your details', 'Clinic details'];
|
||||
|
||||
const ColorlibConnector = styled(StepConnector)(({ theme }) => ({
|
||||
[`&.${stepConnectorClasses.active}`]: {
|
||||
[`& .${stepConnectorClasses.line}`]: {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
},
|
||||
},
|
||||
[`&.${stepConnectorClasses.completed}`]: {
|
||||
[`& .${stepConnectorClasses.line}`]: {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
},
|
||||
},
|
||||
[`& .${stepConnectorClasses.line}`]: {
|
||||
height: 2,
|
||||
zIndex: 1,
|
||||
marginTop: theme.spacing(-1.2),
|
||||
width: 'calc(inherit +100%)',
|
||||
marginLeft: theme.spacing(-2.2),
|
||||
marginRight: theme.spacing(-4.5),
|
||||
backgroundColor: theme.palette.grey[29],
|
||||
},
|
||||
}));
|
||||
|
||||
// Create a styled component that doesn't pass ownerState to DOM
|
||||
const ColorlibStepIconRoot = styled('div')(({ theme, completed, active }) => ({
|
||||
backgroundColor: theme.palette.grey[29],
|
||||
color: theme.palette.common.white,
|
||||
width: 24,
|
||||
height: 24,
|
||||
display: 'flex',
|
||||
borderRadius: '50%',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
...(active && {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
}),
|
||||
...(completed && {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
}),
|
||||
}));
|
||||
|
||||
function ColorlibStepIcon(props) {
|
||||
const { active, completed } = props;
|
||||
|
||||
const icons = {
|
||||
1: completed ? (
|
||||
<Check className={classes.icons} />
|
||||
) : (
|
||||
<FiberManualRecordIcon className={classes.icons} />
|
||||
),
|
||||
2: completed ? (
|
||||
<Check className={classes.icons} />
|
||||
) : (
|
||||
<FiberManualRecordIcon className={classes.icons} />
|
||||
),
|
||||
};
|
||||
|
||||
return (
|
||||
<ColorlibStepIconRoot
|
||||
completed={completed}
|
||||
active={active}
|
||||
className={classes.stepperLabel}
|
||||
>
|
||||
{icons[String(props.icon)]}
|
||||
</ColorlibStepIconRoot>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Stack className={classes.stack}>
|
||||
<Box container="true" className={classes.stepperBox}>
|
||||
<Stepper
|
||||
className={classes.stepperMain}
|
||||
activeStep={activeStep}
|
||||
connector={<ColorlibConnector />}
|
||||
>
|
||||
{steps.map((label) => (
|
||||
<Step key={label}>
|
||||
<StepLabel StepIconComponent={ColorlibStepIcon}>
|
||||
{label}
|
||||
</StepLabel>
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomStepper;
|
||||
@@ -0,0 +1,52 @@
|
||||
import { Alert } from '@mui/material';
|
||||
import React from 'react';
|
||||
import { useStyles } from './styles/formFooterMessageStyles';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import CheckBoxOutlinedIcon from '@mui/icons-material/CheckBoxOutlined';
|
||||
|
||||
const FormFooterMessage = ({
|
||||
mandatoryFieldText,
|
||||
nextButtonTitle,
|
||||
nextButtonOnClick,
|
||||
isSubmitting,
|
||||
}) => {
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<div className={classes.allElementOuterDiv}>
|
||||
<div
|
||||
className={
|
||||
nextButtonTitle
|
||||
? classes.alertDivWithButton
|
||||
: classes.alertDivWithoutButton
|
||||
}
|
||||
>
|
||||
<Alert
|
||||
icon={false}
|
||||
className={classes.alert}
|
||||
variant="outlined"
|
||||
severity="warning"
|
||||
>
|
||||
{mandatoryFieldText}
|
||||
</Alert>
|
||||
</div>
|
||||
{nextButtonTitle && (
|
||||
<div className={classes.nextButtonDiv}>
|
||||
<LoadingButton
|
||||
className={classes.nextButton}
|
||||
color="primary"
|
||||
variant="contained"
|
||||
onClick={nextButtonOnClick}
|
||||
loading={isSubmitting}
|
||||
>
|
||||
<CheckBoxOutlinedIcon
|
||||
className={classes.checkBoxIconForNextButton}
|
||||
/>
|
||||
{nextButtonTitle}
|
||||
</LoadingButton>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FormFooterMessage;
|
||||
@@ -0,0 +1,62 @@
|
||||
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
|
||||
import { Box, Grid, InputLabel, Typography } from '@mui/material';
|
||||
import { useNavigate } from 'react-router';
|
||||
import { pxToRem } from '../theme/typography';
|
||||
import { useStyles } from './styles/formPageHeaderStyles';
|
||||
|
||||
function FormPageHeader({
|
||||
showGoBack,
|
||||
pageTitle,
|
||||
isDetailPage,
|
||||
handleGoBack,
|
||||
wrapHeader = false,
|
||||
titleAlignItems,
|
||||
showSubHeading = true,
|
||||
}) {
|
||||
const classes = useStyles();
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<Grid item md={12}>
|
||||
<Box
|
||||
className={isDetailPage ? classes.detailPageHeader : classes.header}
|
||||
sx={{ flexWrap: wrapHeader ? 'wrap' : undefined }}
|
||||
>
|
||||
<Box className={classes.headerTitle}>
|
||||
{showGoBack && (
|
||||
<ArrowBackIcon
|
||||
className={classes.gobackIcon}
|
||||
onClick={() => {
|
||||
handleGoBack ? handleGoBack() : navigate(-1);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: titleAlignItems ? titleAlignItems : 'center',
|
||||
}}
|
||||
className={!isDetailPage ? classes.title : null}
|
||||
>
|
||||
<Typography
|
||||
variant="Gilroy-Medium"
|
||||
fontSize={pxToRem(24)}
|
||||
sx={{ overflowWrap: 'break-word' }}
|
||||
>
|
||||
{pageTitle}
|
||||
</Typography>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
{showSubHeading && (
|
||||
<Box className={classes.subHeading}>
|
||||
<InputLabel>
|
||||
To sign up to 24x7 AI Healthcare Receptionist, please fill the
|
||||
details below.
|
||||
</InputLabel>
|
||||
</Box>
|
||||
)}
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
export default FormPageHeader;
|
||||
@@ -0,0 +1,29 @@
|
||||
import { Grid, Typography } from '@mui/material';
|
||||
import React from 'react';
|
||||
import { useStyles } from './styles/formSectionHeadingStyles';
|
||||
|
||||
const FormSectionHeading = ({
|
||||
title,
|
||||
className = '',
|
||||
bracketText = '',
|
||||
bracketTextClassName = '',
|
||||
}) => {
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<>
|
||||
<Grid className={`${classes.root} ${className}`}>
|
||||
<Typography className={classes.title}>
|
||||
{title}
|
||||
{bracketText && (
|
||||
<span className={`${classes.bracketText} ${bracketTextClassName}`}>
|
||||
{' '}
|
||||
({bracketText})
|
||||
</span>
|
||||
)}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FormSectionHeading;
|
||||
@@ -0,0 +1,16 @@
|
||||
import { Backdrop, Box, CircularProgress } from '@mui/material';
|
||||
import React from 'react';
|
||||
import { useStyles } from './styles/loaderStyles';
|
||||
|
||||
function Loader() {
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<Box className={classes.root}>
|
||||
<Backdrop open={true}>
|
||||
<CircularProgress color="inherit" />
|
||||
</Backdrop>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export default Loader;
|
||||
@@ -0,0 +1,258 @@
|
||||
import { Clear } from '@mui/icons-material';
|
||||
import ExpandMoreOutlinedIcon from '@mui/icons-material/ExpandMoreOutlined';
|
||||
import {
|
||||
Autocomplete,
|
||||
Box,
|
||||
Checkbox,
|
||||
Chip,
|
||||
CircularProgress,
|
||||
ListItemText,
|
||||
Stack,
|
||||
TextField
|
||||
} from '@mui/material';
|
||||
import debounce from 'lodash/debounce';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { NOTIFICATION } from '../constants';
|
||||
import { pushNotification } from '../utils/notification';
|
||||
import { useStyles } from './styles/multiSelectStyles';
|
||||
|
||||
const MultiSelect = ({
|
||||
apiCall,
|
||||
searchParams = {},
|
||||
searchDebounceTime = 500,
|
||||
maxSelections = Infinity,
|
||||
formik,
|
||||
fieldValue,
|
||||
fieldObjectValue,
|
||||
getOptionLabel,
|
||||
customErrorMessage = null,
|
||||
hideEndAdornment = false,
|
||||
onError = (error) => console.error(error),
|
||||
onOptionsChange = () => {},
|
||||
fieldName,
|
||||
styleForSelectorParent,
|
||||
styleForSelector,
|
||||
placeholderText = '',
|
||||
inputRef,
|
||||
}) => {
|
||||
const classes = useStyles();
|
||||
const [data, setData] = useState([]);
|
||||
const [page, setPage] = useState(0);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const [dropdownOpen, setDropdownOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const response = await apiCall({
|
||||
...searchParams,
|
||||
page,
|
||||
size: 30,
|
||||
search: searchQuery,
|
||||
});
|
||||
const newData = response?.data || [];
|
||||
if (page === 0) {
|
||||
setData(newData);
|
||||
} else {
|
||||
setData((prevData) => [...prevData, ...newData]);
|
||||
}
|
||||
setHasMore(newData.length > 0);
|
||||
onOptionsChange(newData);
|
||||
} catch (error) {
|
||||
onError(error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, [searchQuery, page]);
|
||||
|
||||
const debouncedSearch = useMemo(
|
||||
() =>
|
||||
debounce((value) => {
|
||||
setSearchQuery(value);
|
||||
setPage(0);
|
||||
}, searchDebounceTime),
|
||||
[]
|
||||
);
|
||||
|
||||
const handleToggleDropdown = (dropdownStatus) => {
|
||||
setDropdownOpen(() => dropdownStatus);
|
||||
};
|
||||
|
||||
const handleOptionScroll = (event) => {
|
||||
const threshold = 100;
|
||||
const bottom =
|
||||
event.target.scrollHeight -
|
||||
event.target.scrollTop -
|
||||
event.target.clientHeight <=
|
||||
threshold;
|
||||
if (bottom && hasMore && !isLoading) {
|
||||
setPage((prevPage) => prevPage + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (selectedOptions) => {
|
||||
if (selectedOptions.length > maxSelections) {
|
||||
if (customErrorMessage) {
|
||||
pushNotification(customErrorMessage, NOTIFICATION.ERROR);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
let uniqueSelectedOptions = [];
|
||||
const optionMap = {};
|
||||
|
||||
selectedOptions.forEach((option) => {
|
||||
if (optionMap[option.id]) {
|
||||
uniqueSelectedOptions = uniqueSelectedOptions.filter(
|
||||
(s) => s.id !== option.id
|
||||
);
|
||||
delete optionMap[option.id];
|
||||
} else {
|
||||
uniqueSelectedOptions.push(option);
|
||||
optionMap[option.id] = true;
|
||||
}
|
||||
});
|
||||
|
||||
formik.setFieldValue(`${fieldValue}`, uniqueSelectedOptions);
|
||||
const newSelectedOptionsMap = {};
|
||||
uniqueSelectedOptions.forEach((option) => {
|
||||
newSelectedOptionsMap[option.id] = getOptionLabel(option);
|
||||
});
|
||||
formik.setFieldValue(`${fieldObjectValue}`, newSelectedOptionsMap);
|
||||
};
|
||||
|
||||
const handleOptionDelete = (optionId) => {
|
||||
const newOptions = formik.values[fieldValue].filter(
|
||||
(option) => option.id !== optionId
|
||||
);
|
||||
formik.setFieldValue(`${fieldValue}`, newOptions);
|
||||
const newSelectedOptionsMap = { ...formik.values[fieldObjectValue] };
|
||||
delete newSelectedOptionsMap[optionId];
|
||||
formik.setFieldValue(`${fieldObjectValue}`, newSelectedOptionsMap);
|
||||
};
|
||||
|
||||
return (
|
||||
<Box className={classes.main}>
|
||||
<Box
|
||||
className={`${classes.selectAndSearchField} ${styleForSelectorParent}`}
|
||||
>
|
||||
<Autocomplete
|
||||
className={`${classes.autoComplete} ${styleForSelector}`}
|
||||
freeSolo
|
||||
multiple
|
||||
disableCloseOnSelect
|
||||
disableClearable
|
||||
options={data}
|
||||
getOptionLabel={getOptionLabel}
|
||||
onOpen={() => {
|
||||
handleToggleDropdown(!dropdownOpen);
|
||||
}}
|
||||
onClose={() => {
|
||||
handleToggleDropdown(false);
|
||||
}}
|
||||
value={formik?.values[fieldValue]}
|
||||
open={dropdownOpen}
|
||||
onInputChange={(event, value) => {
|
||||
debouncedSearch(value);
|
||||
setDropdownOpen(true);
|
||||
}}
|
||||
onChange={(event, newValue) => handleChange(newValue)}
|
||||
renderOption={(props, option) => (
|
||||
<li {...props}>
|
||||
<Checkbox
|
||||
style={{ marginRight: 8 }}
|
||||
checked={formik.values[fieldValue]?.some(
|
||||
(selectedOption) => selectedOption.id === option.id
|
||||
)}
|
||||
/>
|
||||
<ListItemText primary={getOptionLabel(option)} />
|
||||
</li>
|
||||
)}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
variant="outlined"
|
||||
onChange={(event) => {
|
||||
event.preventDefault();
|
||||
debouncedSearch(event.target.value.trim());
|
||||
}}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === 'Backspace') {
|
||||
event.stopPropagation();
|
||||
}
|
||||
}}
|
||||
InputProps={{
|
||||
...params.InputProps,
|
||||
type: 'search',
|
||||
endAdornment: (
|
||||
<>
|
||||
{isLoading ? (
|
||||
<CircularProgress color="inherit" size={20} />
|
||||
) : (
|
||||
<ExpandMoreOutlinedIcon
|
||||
onClick={() => setDropdownOpen(!dropdownOpen)}
|
||||
className={`${classes.dropDownArrow} ${
|
||||
classes.hoverPointer
|
||||
} ${
|
||||
dropdownOpen
|
||||
? classes.rotate180Deg
|
||||
: classes.rotate0Deg
|
||||
}`}
|
||||
/> // Toggle dropdown on click
|
||||
)}
|
||||
{params.InputProps.endAdornment}
|
||||
</>
|
||||
),
|
||||
}}
|
||||
inputRef={inputRef}
|
||||
error={Boolean(
|
||||
formik?.errors[fieldValue] && formik?.touched[fieldValue]
|
||||
)}
|
||||
helperText={
|
||||
formik?.errors[fieldValue] && formik?.touched[fieldValue]
|
||||
? formik?.errors[fieldValue]
|
||||
: null
|
||||
}
|
||||
placeholder={placeholderText}
|
||||
/>
|
||||
)}
|
||||
renderTags={() => (
|
||||
<div>{/* {`${formik.values[fieldValue].length} selected`} */}</div>
|
||||
)}
|
||||
ListboxProps={{
|
||||
onScroll: handleOptionScroll,
|
||||
}}
|
||||
/>
|
||||
{/* {fieldName && (
|
||||
<Grid className={classes.autoCompleteText} item>
|
||||
{formik.values[fieldValue]?.length}{' '}
|
||||
{formik.values[fieldValue]?.length > 1
|
||||
? fieldName && `${fieldName + 's'}`
|
||||
: fieldName}{' '}
|
||||
Selected
|
||||
</Grid>
|
||||
)} */}
|
||||
</Box>
|
||||
<Box>
|
||||
<Stack className={classes.chipOuter}>
|
||||
{formik?.values[fieldValue]?.map((option) => (
|
||||
<Chip
|
||||
className={classes.chip}
|
||||
key={option.id}
|
||||
label={getOptionLabel(option)}
|
||||
onDelete={() => handleOptionDelete(option.id)}
|
||||
deleteIcon={<Clear />}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default MultiSelect;
|
||||
@@ -0,0 +1,147 @@
|
||||
import { ArrowBack, Search } from '@mui/icons-material';
|
||||
import { LoadingButton } from '@mui/lab';
|
||||
import {
|
||||
Box,
|
||||
Grid,
|
||||
InputAdornment,
|
||||
TextField,
|
||||
Typography,
|
||||
} from '@mui/material';
|
||||
import { debounce } from 'lodash';
|
||||
import React, { useMemo } from 'react';
|
||||
import { useNavigate } from 'react-router';
|
||||
import { pxToRem } from '../theme/typography';
|
||||
import { useStyles } from './styles/pageHeaderStyles';
|
||||
|
||||
function PageHeader({
|
||||
showGoBack,
|
||||
pageTitle,
|
||||
hideAddButton = false,
|
||||
addButtonTitle,
|
||||
addButtonIcon,
|
||||
buttonVariant = 'contained',
|
||||
onAddButtonClick,
|
||||
addButtonDisabled,
|
||||
extraComponent,
|
||||
showSearch,
|
||||
onSearch,
|
||||
searchPlaceholder,
|
||||
isDetailPage,
|
||||
addButtonLoading,
|
||||
handleGoBack,
|
||||
secondaryButton,
|
||||
customChips,
|
||||
titleAlignItems,
|
||||
}) {
|
||||
const classes = useStyles();
|
||||
const navigate = useNavigate();
|
||||
const debouncedSearch =
|
||||
onSearch && useMemo(() => debounce(onSearch, 500), []);
|
||||
|
||||
// Function to render button with icon if provided
|
||||
const renderButton = (disabled) => {
|
||||
if (addButtonIcon) {
|
||||
return (
|
||||
<LoadingButton
|
||||
className={
|
||||
buttonVariant === 'outlined'
|
||||
? classes.addButtonOutlined
|
||||
: classes.addButton
|
||||
}
|
||||
sx={
|
||||
addButtonDisabled && {
|
||||
opacity: 0.56,
|
||||
pointerEvents: 'none',
|
||||
}
|
||||
}
|
||||
color="primary"
|
||||
variant={buttonVariant}
|
||||
onClick={onAddButtonClick}
|
||||
loading={!addButtonDisabled && addButtonLoading}
|
||||
startIcon={addButtonIcon}
|
||||
disabled={addButtonDisabled}
|
||||
>
|
||||
{addButtonTitle ?? 'Add'}
|
||||
</LoadingButton>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<LoadingButton
|
||||
className={classes.addButton}
|
||||
sx={
|
||||
addButtonDisabled && {
|
||||
opacity: 0.56,
|
||||
pointerEvents: 'none',
|
||||
}
|
||||
}
|
||||
color="primary"
|
||||
variant="contained"
|
||||
onClick={onAddButtonClick}
|
||||
loading={!addButtonDisabled && addButtonLoading}
|
||||
disabled={addButtonDisabled}
|
||||
>
|
||||
{addButtonTitle ?? 'Add'}
|
||||
</LoadingButton>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Grid item md={12}>
|
||||
<Box className={classes.header}>
|
||||
<Box className={classes.headerTitle}>
|
||||
{showGoBack && (
|
||||
<ArrowBack
|
||||
className={classes.gobackIcon}
|
||||
onClick={() => {
|
||||
handleGoBack ? handleGoBack() : navigate(-1);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: titleAlignItems ? titleAlignItems : 'center',
|
||||
}}
|
||||
className={!isDetailPage ? classes.title : null}
|
||||
>
|
||||
<Typography
|
||||
variant="Inter-SemiBold"
|
||||
fontSize={pxToRem(24)}
|
||||
sx={{ overflowWrap: 'break-word' }}
|
||||
>
|
||||
{pageTitle}
|
||||
</Typography>
|
||||
{customChips}
|
||||
</div>
|
||||
</Box>
|
||||
<Box className={classes.headerActions}>
|
||||
{showSearch && (
|
||||
<TextField
|
||||
className={classes.searchBar}
|
||||
color="secondary"
|
||||
id="globalSearch"
|
||||
placeholder={searchPlaceholder ?? 'Search here'}
|
||||
variant="outlined"
|
||||
onChange={debouncedSearch}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<Search />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{extraComponent}
|
||||
{secondaryButton && (
|
||||
<Box className={classes.secondaryButton}>{secondaryButton}</Box>
|
||||
)}
|
||||
{!hideAddButton && renderButton(addButtonDisabled)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
);
|
||||
}
|
||||
|
||||
export default PageHeader;
|
||||
@@ -0,0 +1,12 @@
|
||||
import React from 'react';
|
||||
// import { checkComponentPermission } from '../utils/share';
|
||||
|
||||
function ProtectedComponent({ permission, children }) {
|
||||
// if (permission) {
|
||||
// const hasPermission = checkComponentPermission(permission);
|
||||
// return hasPermission ? <>{children}</> : null;
|
||||
// }
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
export default ProtectedComponent;
|
||||
@@ -0,0 +1,623 @@
|
||||
/* eslint-disable react/display-name */
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
InputAdornment,
|
||||
MenuItem,
|
||||
Select,
|
||||
TextField,
|
||||
Tooltip,
|
||||
} from '@mui/material';
|
||||
import {MaterialReactTable} from 'material-react-table';
|
||||
import PreviousIcon from '@mui/icons-material/ArrowBack';
|
||||
import NextIcon from '@mui/icons-material/ArrowForward';
|
||||
import PropTypes from 'prop-types';
|
||||
import React, {
|
||||
forwardRef,
|
||||
memo,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react';
|
||||
import SearchIcon from '@mui/icons-material/Search';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Pagination from '@mui/material/Pagination';
|
||||
import PaginationItem from '@mui/material/PaginationItem';
|
||||
import { debounce } from 'lodash';
|
||||
import { ExpandMore } from '@mui/icons-material';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import { useStyles } from './styles/tableStyles';
|
||||
import ProtectedComponent from '../components/ProtectedComponent';
|
||||
|
||||
const Table = memo(
|
||||
forwardRef((props, ref) => {
|
||||
const classes = useStyles();
|
||||
const {
|
||||
getData,
|
||||
columns,
|
||||
options,
|
||||
actions,
|
||||
hideTopToolbar = false,
|
||||
showAction,
|
||||
handleBulkAction,
|
||||
handleRowClick = () => {},
|
||||
showDownloadAction,
|
||||
renderTopToolbar,
|
||||
enableRowNumbers,
|
||||
rowNumberMode,
|
||||
hideShowPerPage = false,
|
||||
getRowStyle = () => {},
|
||||
searchText,
|
||||
navigateTo,
|
||||
} = props;
|
||||
const [data, setData] = useState([]);
|
||||
const [formattedColumns, setFormattedColumns] = useState(
|
||||
columns.map((column, i) => {
|
||||
if (i === 0) {
|
||||
return {
|
||||
...column,
|
||||
muiTableBodyCellProps: {
|
||||
sx: (theme) => ({
|
||||
opacity: 1,
|
||||
fontWeight: 600,
|
||||
fontSize: '16px',
|
||||
fontFamily: theme.fontFamily.semiBold,
|
||||
color: theme.palette.grey[10],
|
||||
}),
|
||||
},
|
||||
};
|
||||
}
|
||||
return column;
|
||||
})
|
||||
);
|
||||
const [isError, setIsError] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isRefetching, setIsRefetching] = useState(false);
|
||||
const [rowCount, setRowCount] = useState(0);
|
||||
const [columnFilters, setColumnFilters] = useState([]);
|
||||
const [globalFilter, setGlobalFilter] = useState('');
|
||||
const [sorting, setSorting] = useState([]);
|
||||
const tableRef = useRef();
|
||||
const [pagination, setPagination] = useState({
|
||||
pageIndex: options?.pageIndex ?? 0,
|
||||
pageSize: options?.pageSize ?? 10,
|
||||
});
|
||||
const navigate = useNavigate();
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
reFetchData() {
|
||||
setIsLoading(true);
|
||||
setIsRefetching(true);
|
||||
fetchData();
|
||||
// tableRef.current.resetRowSelection();
|
||||
},
|
||||
getSelectedRowData() {
|
||||
const selectedRows = tableRef.current.getSelectedRowModel().flatRows;
|
||||
const selectedData = selectedRows.map((row) => row.original);
|
||||
return selectedData;
|
||||
},
|
||||
resetPage(checkPage) {
|
||||
setPagination((prev) => ({
|
||||
...prev,
|
||||
pageIndex: !checkPage
|
||||
? 0
|
||||
: data.length === 1 && prev.pageIndex > 0
|
||||
? prev.pageIndex - 1
|
||||
: prev.pageIndex,
|
||||
}));
|
||||
},
|
||||
}));
|
||||
useEffect(() => {
|
||||
setFormattedColumns(
|
||||
columns.map((column, i) => {
|
||||
if (column.isBold) {
|
||||
return {
|
||||
...column,
|
||||
muiTableBodyCellProps: {
|
||||
sx: (theme) => ({
|
||||
opacity: 1,
|
||||
fontWeight: 600,
|
||||
fontSize: '16px',
|
||||
fontFamily: theme.fontFamily.semiBold,
|
||||
color: theme.palette.grey[10],
|
||||
}),
|
||||
},
|
||||
};
|
||||
}
|
||||
return column;
|
||||
})
|
||||
);
|
||||
}, [columns]);
|
||||
|
||||
const fetchData = async () => {
|
||||
if (!data.length) {
|
||||
setIsLoading(true);
|
||||
} else {
|
||||
setIsRefetching(true);
|
||||
}
|
||||
let filterString = '';
|
||||
columnFilters.forEach((filter) => {
|
||||
filterString += `${filter.id}=${filter.value}&`;
|
||||
});
|
||||
let sortingString = sorting
|
||||
.map(
|
||||
(sort) => `orderBy=${sort.id}&order=${sort.desc ? 'DESC' : 'ASC'}&`
|
||||
)
|
||||
.join('');
|
||||
try {
|
||||
const response = await getData({
|
||||
pagination,
|
||||
filterString,
|
||||
globalFilter,
|
||||
sortingString,
|
||||
});
|
||||
setData(response.data);
|
||||
setRowCount(response.rowCount);
|
||||
} catch (error) {
|
||||
setIsError(true);
|
||||
return;
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
setIsRefetching(false);
|
||||
}
|
||||
setIsError(false);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (columnFilters && pagination && sorting) {
|
||||
fetchData();
|
||||
}
|
||||
}, [
|
||||
columnFilters,
|
||||
globalFilter,
|
||||
pagination.pageIndex,
|
||||
pagination.pageSize,
|
||||
sorting,
|
||||
]);
|
||||
|
||||
const debouncedSearch = useMemo(
|
||||
() =>
|
||||
debounce((value) => {
|
||||
setGlobalFilter(value);
|
||||
|
||||
/* --- set page index to 0 --- */
|
||||
setPagination((prevPagination) => ({
|
||||
...prevPagination,
|
||||
pageIndex: 0,
|
||||
}));
|
||||
}, 500),
|
||||
[]
|
||||
);
|
||||
|
||||
// Function to handle page size change
|
||||
const handlePageSizeChange = (event) => {
|
||||
const newPageSize = event.target.value;
|
||||
|
||||
// Calculate the new page index to maintain the current set of records visible
|
||||
const currentPage = pagination.pageIndex;
|
||||
const currentRecordIndex = currentPage * pagination.pageSize;
|
||||
const newPageIndex = Math.floor(currentRecordIndex / newPageSize);
|
||||
|
||||
// Update pagination state with new page size and index
|
||||
setPagination((prevPagination) => ({
|
||||
...prevPagination,
|
||||
pageSize: newPageSize,
|
||||
pageIndex: newPageIndex,
|
||||
}));
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={classes.searchContainer}>
|
||||
<TextField
|
||||
className={classes.searchBar}
|
||||
color="secondary"
|
||||
id="globalSearch"
|
||||
placeholder={`Search ${searchText} here`}
|
||||
variant="outlined"
|
||||
onChange={(event) => debouncedSearch(event.target.value.trim())}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="end">
|
||||
{/* <img
|
||||
src={SearchFieldIcon}
|
||||
alt="search icon"
|
||||
className={classes.searchIconImg}
|
||||
/> */}
|
||||
<SearchIcon />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
{!hideShowPerPage && (
|
||||
<Box className={classes.pageSizeDropdown}>
|
||||
<Typography className={classes.dropDownLabel}>Show:</Typography>
|
||||
<Select
|
||||
select
|
||||
value={pagination.pageSize}
|
||||
onChange={handlePageSizeChange}
|
||||
className={classes.perPageDropdown}
|
||||
IconComponent={ExpandMore}
|
||||
>
|
||||
{[10, 20, 40, 50, 100].map((value) => (
|
||||
<MenuItem key={value} value={value}>
|
||||
{value}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
<MaterialReactTable
|
||||
renderBottomToolbar={(props) => (
|
||||
<CustomPagination table={props.table} />
|
||||
)}
|
||||
muiTableBodyCellProps={{
|
||||
// className: classes?.muiTableBodyCell,
|
||||
sx: (theme) => ({
|
||||
opacity: '1',
|
||||
// lineHeight: '2.5rem',
|
||||
margin: theme.spacing(1),
|
||||
fontWeight: 500,
|
||||
fontSize: '16px',
|
||||
fontStretch: 'normal',
|
||||
fontStyle: 'normal',
|
||||
letterSpacing: 'normal',
|
||||
fontFamily: theme.fontFamily.medium,
|
||||
color: theme.palette.grey[22],
|
||||
// textAlign: 'center',
|
||||
textAlign: 'left',
|
||||
}),
|
||||
}}
|
||||
muiTopToolbarProps={{
|
||||
sx: (theme) => ({
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
'& div': {
|
||||
'& div': {
|
||||
'& .MuiIconButton-sizeMedium': {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
backgroundColor: theme.palette.common.white,
|
||||
}),
|
||||
}}
|
||||
renderTopToolbar={false}
|
||||
muiTableHeadCellProps={{
|
||||
className: classes?.muiTableHeadCell,
|
||||
}}
|
||||
enableRowNumbers={enableRowNumbers}
|
||||
rowNumberMode={rowNumberMode}
|
||||
muiTablePaperProps={{
|
||||
elevation: 8,
|
||||
sx: (theme) => ({
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
backgroundColor: theme.palette.common.white,
|
||||
boxShadow: 'none',
|
||||
'& .MuiTableContainer-root': {
|
||||
border: '0px solid',
|
||||
borderRadius: '16px',
|
||||
},
|
||||
}),
|
||||
}}
|
||||
muiTableHeadCellFilterTextFieldProps={{
|
||||
variant: 'outlined',
|
||||
}}
|
||||
muiTableBodyProps={{
|
||||
sx: (theme) => ({
|
||||
borderRadius: theme.shape.borderRadius,
|
||||
}),
|
||||
}}
|
||||
columns={formattedColumns ?? []}
|
||||
data={data}
|
||||
enableTopToolbar={
|
||||
!hideTopToolbar &&
|
||||
(options?.showTopBar ||
|
||||
tableRef?.current?.getIsSomeRowsSelected() ||
|
||||
tableRef?.current?.getIsAllRowsSelected())
|
||||
}
|
||||
manualPagination={true}
|
||||
manualFiltering
|
||||
manualSorting
|
||||
enableFilterMatchHighlighting={false}
|
||||
enableColumnActions={false}
|
||||
enableRowSelection={options?.enableRowSelection ?? true}
|
||||
muiToolbarAlertBannerProps={
|
||||
isError
|
||||
? {
|
||||
color: 'error',
|
||||
children: 'Error loading data',
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
positionToolbarAlertBanner={'none'}
|
||||
onColumnFiltersChange={setColumnFilters}
|
||||
onGlobalFilterChange={setGlobalFilter}
|
||||
onPaginationChange={setPagination}
|
||||
onSortingChange={setSorting}
|
||||
rowCount={rowCount}
|
||||
enableFullScreenToggle={false}
|
||||
enableDensityToggle={false}
|
||||
enableHiding={false}
|
||||
enableSorting={options?.enableSorting ?? true}
|
||||
enableColumnFilters={options?.showFilters ?? false}
|
||||
enableGlobalFilter={options?.showSearch ?? false}
|
||||
enableRowActions={showAction ?? false}
|
||||
positionActionsColumn="last"
|
||||
muiTableHeadRowProps={{
|
||||
className: classes?.tableHeadRow,
|
||||
}}
|
||||
displayColumnDefOptions={{
|
||||
'mrt-row-actions': {
|
||||
header: '',
|
||||
},
|
||||
}}
|
||||
muiTableBodyRowProps={({ row }) => ({
|
||||
onClick: (event) => {
|
||||
if (
|
||||
Object.values(event.target)?.[1]
|
||||
?.className?.split(' ')
|
||||
.includes('MuiBackdrop-root')
|
||||
) {
|
||||
return;
|
||||
}
|
||||
handleRowClick(row?.original);
|
||||
if (navigateTo) {
|
||||
navigate(`/${navigateTo}/${row?.original?.id}`);
|
||||
}
|
||||
},
|
||||
className: classes?.tableBodyRow,
|
||||
sx: getRowStyle(row),
|
||||
})}
|
||||
muiSelectCheckboxProps={{
|
||||
className: classes?.tableCheckbox,
|
||||
}}
|
||||
muiSelectAllCheckboxProps={{
|
||||
className: classes?.tableCheckbox,
|
||||
}}
|
||||
renderRowActionMenuItems={({ row, closeMenu }) =>
|
||||
actions?.map((action, index) =>
|
||||
!(action?.renderAction?.(row) ?? true) ? null : (
|
||||
<ProtectedComponent
|
||||
key={index}
|
||||
permission={action.permissionName}
|
||||
>
|
||||
{(action?.icon ||
|
||||
action?.text ||
|
||||
(action?.textFn && action?.textFn(row))) && (
|
||||
<MenuItem
|
||||
className={classes.menuItem}
|
||||
onClick={(event) => {
|
||||
event.stopPropagation();
|
||||
action.onClick(row);
|
||||
closeMenu();
|
||||
}}
|
||||
disabled={
|
||||
action?.isDisabledValue
|
||||
? action?.isDisabledValue ===
|
||||
row?.original?.[action?.rowKey]
|
||||
: false
|
||||
}
|
||||
>
|
||||
{action?.icon} {action?.text}{' '}
|
||||
{action.textFn && action.textFn(row)}
|
||||
</MenuItem>
|
||||
)}
|
||||
</ProtectedComponent>
|
||||
)
|
||||
) ?? []
|
||||
}
|
||||
renderTopToolbarCustomActions={({ table }) => {
|
||||
const handleActive = () => {
|
||||
const data = table
|
||||
.getSelectedRowModel()
|
||||
.flatRows.map((row) => row?.original);
|
||||
return handleBulkAction('ACTIVE', data);
|
||||
};
|
||||
const handleDelete = () => {
|
||||
const data = table
|
||||
.getSelectedRowModel()
|
||||
.flatRows.map((row) => row?.original);
|
||||
return handleBulkAction('DELETE', data, table);
|
||||
};
|
||||
const handleDownload = () => {
|
||||
const data = table
|
||||
.getSelectedRowModel()
|
||||
.flatRows.map((row) => row?.original);
|
||||
return handleBulkAction('DOWNLOAD', data);
|
||||
};
|
||||
return table.getIsSomeRowsSelected() ||
|
||||
table.getIsAllRowsSelected() ? (
|
||||
<Box
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Tooltip title="Change Status">
|
||||
<Box
|
||||
component="img"
|
||||
src={inactive}
|
||||
style={{
|
||||
marginLeft: '5px',
|
||||
cursor: 'pointer',
|
||||
marginTop: '8px',
|
||||
}}
|
||||
onClick={handleActive}
|
||||
/>
|
||||
</Tooltip>
|
||||
<Tooltip title="Delete">
|
||||
<Box
|
||||
component="img"
|
||||
src={deleteIcon}
|
||||
style={{
|
||||
marginLeft: '24px',
|
||||
cursor: 'pointer',
|
||||
marginTop: '8px',
|
||||
}}
|
||||
onClick={handleDelete}
|
||||
/>
|
||||
</Tooltip>
|
||||
{showDownloadAction && (
|
||||
<Tooltip title="Download Report">
|
||||
<Box
|
||||
component="img"
|
||||
src={downloadActivity}
|
||||
style={{
|
||||
marginLeft: '24px',
|
||||
cursor: 'pointer',
|
||||
marginTop: '9px',
|
||||
height: '20px',
|
||||
}}
|
||||
onClick={handleDownload}
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Box>
|
||||
) : (
|
||||
<div></div>
|
||||
);
|
||||
}}
|
||||
muiTablePaginationProps={{
|
||||
labelRowsPerPage: 'Records Per Page',
|
||||
}}
|
||||
tableInstanceRef={tableRef}
|
||||
state={{
|
||||
showColumnFilters: true,
|
||||
columnFilters,
|
||||
globalFilter,
|
||||
isLoading,
|
||||
pagination,
|
||||
showAlertBanner: isError,
|
||||
showProgressBars: isRefetching,
|
||||
sorting,
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
})
|
||||
);
|
||||
Table.propTypes = {
|
||||
getData: PropTypes.func.isRequired,
|
||||
columns: PropTypes.any.isRequired,
|
||||
options: PropTypes.shape({
|
||||
pageSize: PropTypes.number,
|
||||
pageIndex: PropTypes.number,
|
||||
tableTitle: PropTypes.string,
|
||||
showSearch: PropTypes.bool,
|
||||
showTopBar: PropTypes.bool,
|
||||
showFilters: PropTypes.bool,
|
||||
isBold: PropTypes.bool,
|
||||
}),
|
||||
};
|
||||
|
||||
const CustomPagination = ({ table }) => {
|
||||
const classes = useStyles();
|
||||
|
||||
const totalPage =
|
||||
Math.ceil(
|
||||
table.options.rowCount / table.options.state.pagination.pageSize
|
||||
) || 1;
|
||||
|
||||
const previousPage = () => {
|
||||
table.setPageIndex(
|
||||
table.options?.state.pagination.pageIndex > 0
|
||||
? table.options?.state.pagination.pageIndex - 1
|
||||
: table.options?.state.pagination.pageIndex
|
||||
);
|
||||
};
|
||||
|
||||
const nextPage = () => {
|
||||
table.setPageIndex(
|
||||
table.options?.state.pagination.pageIndex < totalPage
|
||||
? table.options?.state.pagination.pageIndex + 1
|
||||
: table.options?.state.pagination.pageIndex
|
||||
);
|
||||
};
|
||||
|
||||
const setPageIndex = (newIndex) => {
|
||||
table.setPageIndex(newIndex);
|
||||
};
|
||||
|
||||
const currentPage = table.options.state.pagination.pageIndex + 1;
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: { xs: 'column', md: 'row' },
|
||||
alignItems: 'center',
|
||||
padding: 2,
|
||||
}}
|
||||
>
|
||||
<Pagination
|
||||
shape="rounded"
|
||||
count={totalPage}
|
||||
page={currentPage}
|
||||
siblingCount={0}
|
||||
boundaryCount={3}
|
||||
onChange={(event, page) => setPageIndex(page - 1)}
|
||||
renderItem={(item) => {
|
||||
if (item.type === 'previous') {
|
||||
return (
|
||||
<PaginationItem
|
||||
component={() => (
|
||||
<Button
|
||||
className={classes.prevNextBtn}
|
||||
variant="outlined"
|
||||
disabled={currentPage === 1}
|
||||
onClick={() => previousPage()}
|
||||
>
|
||||
<PreviousIcon style={{ marginRight: '6px' }} />
|
||||
Previous
|
||||
</Button>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
} else if (item.type === 'next') {
|
||||
return (
|
||||
<PaginationItem
|
||||
component={() => (
|
||||
<Button
|
||||
className={classes.prevNextBtn}
|
||||
variant="outlined"
|
||||
disabled={currentPage === totalPage}
|
||||
onClick={() => nextPage()}
|
||||
>
|
||||
Next
|
||||
<NextIcon style={{ marginLeft: '6px' }} />
|
||||
</Button>
|
||||
)}
|
||||
disabled={currentPage === totalPage}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return <PaginationItem {...item} />;
|
||||
}
|
||||
}}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
flex: '1',
|
||||
'& .MuiPagination-ul': {
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
'& .MuiPagination-ul > :first-child': {
|
||||
marginRight: 'auto',
|
||||
},
|
||||
' & .MuiPagination-ul > :last-child': {
|
||||
marginLeft: 'auto',
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default Table;
|
||||
@@ -0,0 +1,80 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Checkbox, ListItemText, MenuItem, Select } from '@mui/material';
|
||||
import { ExpandMore } from '@mui/icons-material';
|
||||
import { useStyles as tableStyles } from './styles/tableStyles';
|
||||
import { CLINIC_STATUS } from '../constants';
|
||||
|
||||
function TableSelect({ name, header, getOptions, options, MenuProps }) {
|
||||
const tableClasses = tableStyles();
|
||||
const [optionsData, setOptionsData] = useState(options ?? []);
|
||||
const [selectedValues, setSelectedValues] = useState([]);
|
||||
|
||||
const handleChange = (event) => {
|
||||
const value = event.target.value;
|
||||
let newSelectedValues;
|
||||
|
||||
if (Array.isArray(value)) {
|
||||
newSelectedValues = value;
|
||||
} else {
|
||||
newSelectedValues = selectedValues.includes(value)
|
||||
? selectedValues.filter((item) => item !== value)
|
||||
: [value];
|
||||
}
|
||||
|
||||
setSelectedValues(newSelectedValues);
|
||||
|
||||
header.column.setFilterValue(
|
||||
newSelectedValues.length > 0 ? newSelectedValues : undefined
|
||||
);
|
||||
};
|
||||
|
||||
const getOptionsData = async () => {
|
||||
const resp = await getOptions();
|
||||
setOptionsData(resp?.data);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (!options) getOptionsData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Select
|
||||
className={tableClasses.selectFilter}
|
||||
fullWidth
|
||||
displayEmpty
|
||||
IconComponent={ExpandMore}
|
||||
onChange={handleChange}
|
||||
value={selectedValues}
|
||||
margin="none"
|
||||
MenuProps={MenuProps}
|
||||
renderValue={() => null}
|
||||
>
|
||||
{optionsData.map((data) => (
|
||||
<MenuItem key={data?.id} value={data?.name}>
|
||||
<Checkbox checked={selectedValues.indexOf(data.name) > -1} />
|
||||
<ListItemText
|
||||
className={tableClasses.ListItemTextClass}
|
||||
primary={
|
||||
data?.name ===
|
||||
CLINIC_STATUS.APPROVAL_PENDING_DOCUMENT_RESUBMITTED ? (
|
||||
<div>
|
||||
Approval Pending:
|
||||
<div>Document resubmitted</div>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
{data?.showName ||
|
||||
data?.name?.replace('_', ' ').toLowerCase()}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
/>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default TableSelect;
|
||||
@@ -0,0 +1,160 @@
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import { Box, Grid, Typography } from '@mui/material';
|
||||
import React from 'react';
|
||||
import { useStyles } from './styles/termsAndConditionStyles';
|
||||
|
||||
const TermsAndCondition = ({ onClose }) => {
|
||||
const closeTheDrawer = () => {
|
||||
onClose();
|
||||
};
|
||||
|
||||
const classes = useStyles();
|
||||
return (
|
||||
<>
|
||||
<Box className={classes.outerBox}>
|
||||
<Grid container alignItems="center" className={classes.heading}>
|
||||
<Grid item md={11}>
|
||||
<Typography className={classes.headingTitle}>
|
||||
Terms and Conditions{' '}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item md={1} className={classes.TermsAndConditionCloseIcon}>
|
||||
<CloseIcon onClick={closeTheDrawer} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Box className={classes.contentBox}>
|
||||
<Box className={classes.textBox}>
|
||||
<div>
|
||||
<p>
|
||||
Welcome to 24x7 AI Healthcare Receptionist, a mobile
|
||||
SaaSlication owned and operated by Reddy Co Pty Ltd ("Company,"
|
||||
"we," "us," or "our"). By accessing or using the 24x7 AI
|
||||
Healthcare Receptionist software as a service (the "SaaS"), you
|
||||
agree to be bound by these Terms of Use ("Terms"). If you do not
|
||||
agree to these Terms, please do not use the SaaS.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className={classes.subHeadingTitle}>
|
||||
USE TO BE IN CONFORMITY WITH THE PURPOSE
|
||||
</p>{' '}
|
||||
<p className={classes.subHeadingText}>
|
||||
<ol className={classes.outerList} type="I">
|
||||
<li>
|
||||
<p className={classes.listTitle}>Eligibility</p>
|
||||
<ol className={classes.subList} type="a">
|
||||
<li>
|
||||
You must be at least 18 years old to use this SaaS. By
|
||||
using the SaaS, you represent and warrant that you have
|
||||
the legal capacity to enter into these Terms.
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>
|
||||
<p className={classes.listTitle}>Use of the SaaS</p>
|
||||
<ol className={classes.subList} type="a">
|
||||
<li>
|
||||
The SaaS is intended for personal, non-commercial use to
|
||||
support mental wellness.
|
||||
</li>
|
||||
<li>
|
||||
You agree not to misuse the SaaS, including engaging in
|
||||
illegal activities, harassing other users, or attempting
|
||||
to compromise the security of the SaaS.
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>
|
||||
<p className={classes.listTitle}>
|
||||
User Accounts and Privacy
|
||||
</p>
|
||||
<ol className={classes.subList} type="a">
|
||||
<li>
|
||||
You may be required to create an account. You are
|
||||
responsible for maintaining the confidentiality of your
|
||||
account information.
|
||||
</li>
|
||||
<li>
|
||||
Your use of the SaaS is also governed by our Privacy
|
||||
Policy, which details how we collect, use, and protect
|
||||
your data.
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>
|
||||
<p className={classes.listTitle}>
|
||||
Content and Community Guidelines
|
||||
</p>
|
||||
<ol className={classes.subList} type="a">
|
||||
<li>
|
||||
You are responsible for any content you submit to the
|
||||
SaaS.
|
||||
</li>
|
||||
<li>
|
||||
We reserve the right to moderate, remove, or restrict
|
||||
content that violates our guidelines or these Terms.
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>
|
||||
<p className={classes.listTitle}>
|
||||
Emergency and Medical Disclaimer
|
||||
</p>
|
||||
<ol className={classes.subList} type="a">
|
||||
<li>
|
||||
The SaaS is not a substitute for professional medical or
|
||||
emergency services.
|
||||
</li>
|
||||
<li>
|
||||
In case of a crisis, we encourage you to contact
|
||||
emergency services immediately.
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>
|
||||
<p className={classes.listTitle}>Limitation of Liability</p>
|
||||
<ol className={classes.subList} type="a">
|
||||
<li>
|
||||
We do not guarantee uninterrupted access to the SaaS and
|
||||
are not liable for any losses or damages resulting from
|
||||
its use.
|
||||
</li>
|
||||
<li>
|
||||
The SaaS is provided on an "as is" and "as available"
|
||||
basis without warranties of any kind.
|
||||
</li>
|
||||
</ol>
|
||||
</li>
|
||||
<li>
|
||||
<p className={classes.listTitle}>Modifications to Terms</p>
|
||||
<p className={classes.subList}>
|
||||
We reserve the right to update these Terms at any time.
|
||||
Continued use of the SaaS constitutes acceptance of any
|
||||
revisions.
|
||||
</p>
|
||||
</li>
|
||||
<li>
|
||||
<p className={classes.listTitle}>Limitation of Liability</p>
|
||||
<p className={classes.subList}>
|
||||
These Terms are governed by the laws of South Australia,
|
||||
Australia.
|
||||
</p>
|
||||
<p className={classes.subList}>
|
||||
For inquiries, contact us at:
|
||||
<strong>
|
||||
Reddy Co Pty Ltd, 606/147 Pirie St Adelaide SA 5000,
|
||||
Australia.
|
||||
</strong>
|
||||
</p>
|
||||
</li>
|
||||
</ol>
|
||||
</p>
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TermsAndCondition;
|
||||
@@ -0,0 +1,26 @@
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
import { pxToRem } from '../../theme/typography';
|
||||
|
||||
export const useStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
marginTop: theme.spacing(-1),
|
||||
marginBottom: theme.spacing(1),
|
||||
marginLeft: theme.spacing(0.6),
|
||||
display: 'flex',
|
||||
},
|
||||
sepreaterBreadCrumb: {
|
||||
fontSize: pxToRem(18),
|
||||
color: theme.palette.grey[29],
|
||||
},
|
||||
activeBreadCrumb: {
|
||||
fontSize: pxToRem(14),
|
||||
color: theme.palette.grey[17],
|
||||
textDecoration: 'none',
|
||||
},
|
||||
inActiveBreadCrumb: {
|
||||
color: theme.palette.primary.main,
|
||||
cursor: 'pointer',
|
||||
fontSize: pxToRem(14),
|
||||
textDecoration: 'none',
|
||||
},
|
||||
}));
|
||||
@@ -0,0 +1,249 @@
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
import { pxToRem } from '../../theme/typography';
|
||||
|
||||
export const useStyles = makeStyles((theme) => ({
|
||||
mainBox: {
|
||||
marginTop: theme.spacing(1.5),
|
||||
},
|
||||
iconSize: {
|
||||
fontSize: pxToRem(28),
|
||||
},
|
||||
dropZoneOuterBox: {
|
||||
width: '100%',
|
||||
},
|
||||
reactCrop: {
|
||||
/* Set a minimum height and width */
|
||||
minHeight: '200px',
|
||||
minWidth: '200px',
|
||||
},
|
||||
inputTitle: {
|
||||
'&.MuiTypography-body1': {
|
||||
fontSize: pxToRem(12),
|
||||
},
|
||||
fontSize: pxToRem(12),
|
||||
color: theme.palette.grey[10],
|
||||
marginBottom: pxToRem(7),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
imgButton: {
|
||||
color: theme?.palette?.primary?.main,
|
||||
fontSize: pxToRem(12),
|
||||
fontWeight: 400,
|
||||
fontFamily: theme?.fontFamily?.regular,
|
||||
backgroundColor: 'transparent',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
margin: `0 ${theme.spacing(0.8)}`,
|
||||
padding: theme.spacing(0),
|
||||
outline: 'none',
|
||||
},
|
||||
|
||||
onImageButton: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
position: 'absolute',
|
||||
top: '50%',
|
||||
left: '50%',
|
||||
marginLeft: 'auto',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
backgroundColor: 'rgba(0,0,0,0.2)',
|
||||
borderRadius: theme.spacing(1),
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
temp: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100%',
|
||||
},
|
||||
addButton: {
|
||||
border: `1px dashed ${theme.palette.primary.main}`,
|
||||
width: '100%',
|
||||
height: '130px',
|
||||
backgroundColor: theme.palette.common.white,
|
||||
borderRadius: theme.spacing(1),
|
||||
position: 'relative',
|
||||
display: 'grid',
|
||||
placeItems: 'center',
|
||||
},
|
||||
addButtonContent: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
height: '100%',
|
||||
cursor: 'pointer',
|
||||
width: '100%',
|
||||
fontSize: pxToRem(16),
|
||||
},
|
||||
addText: {
|
||||
opacity: 1,
|
||||
fontFamily: theme?.fontFamily?.medium,
|
||||
fontSize: pxToRem(14),
|
||||
height: '16px',
|
||||
fontWeight: 500,
|
||||
lineHeight: 'normal',
|
||||
letterSpacing: 'normal',
|
||||
marginTop: theme?.spacing(1),
|
||||
},
|
||||
addIcon: {
|
||||
width: '26px',
|
||||
height: '24px',
|
||||
},
|
||||
addSubtext: {
|
||||
fontSize: pxToRem(12),
|
||||
color: theme.palette.grey[10],
|
||||
opacity: '0.6',
|
||||
textAlign: 'center',
|
||||
padding: `${theme.spacing(0.5)} ${theme.spacing(7)}`,
|
||||
[theme.breakpoints.down('md')]: {
|
||||
padding: theme.spacing(1),
|
||||
},
|
||||
[theme.breakpoints.down('lg')]: {
|
||||
padding: theme.spacing(1),
|
||||
},
|
||||
},
|
||||
previewBox: {
|
||||
display: 'flex',
|
||||
justifyContent: 'end',
|
||||
alignItems: 'start',
|
||||
width: '153px',
|
||||
height: '111px',
|
||||
borderRadius: theme.spacing(0.4),
|
||||
backgroundSize: 'cover',
|
||||
},
|
||||
previewFullScreenBox: {
|
||||
margin: theme.spacing(4),
|
||||
},
|
||||
previewHeading: {
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
},
|
||||
previewImageGrid: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
marginTop: theme.spacing(2),
|
||||
},
|
||||
previewImage: {
|
||||
maxHeight: '450px',
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
maxHeight: '350px',
|
||||
},
|
||||
},
|
||||
previewFileTitle: {
|
||||
marginTop: theme.spacing(-3),
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
marginTop: theme.spacing(0),
|
||||
},
|
||||
},
|
||||
pdfAndDocPreviewBox: {
|
||||
minHeight: '450px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
},
|
||||
pdfAndDocPreviewDownloadButton: {
|
||||
marginTop: theme.spacing(2),
|
||||
fontFamily: theme?.fontFamily?.regular,
|
||||
},
|
||||
transFormImageBox: {
|
||||
minHeight: '65vh',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
controlButtons: {
|
||||
marginTop: theme.spacing(1),
|
||||
},
|
||||
customTransFormWrapper: {
|
||||
overflow: 'visible',
|
||||
},
|
||||
controlButton: {
|
||||
color: theme.palette.common.white,
|
||||
cursor: 'pointer',
|
||||
border: 'none',
|
||||
borderRadius: theme.spacing(0),
|
||||
padding: theme.spacing(1.2),
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(0,0,0,0.9)',
|
||||
color: theme.palette.common.white,
|
||||
},
|
||||
},
|
||||
zoomOutButton: {
|
||||
backgroundColor: 'rgba(0,0,0,0.7)',
|
||||
borderTopLeftRadius: theme.spacing(0.8),
|
||||
borderBottomLeftRadius: theme.spacing(0.8),
|
||||
},
|
||||
zoomResetButton: {
|
||||
backgroundColor: 'rgba(0,0,0,0.4)',
|
||||
},
|
||||
zoomInButton: {
|
||||
backgroundColor: 'rgba(0,0,0,0.7)',
|
||||
borderTopRightRadius: theme.spacing(0.8),
|
||||
borderBottomRightRadius: theme.spacing(0.8),
|
||||
},
|
||||
eyeButton: {
|
||||
padding: pxToRem(3),
|
||||
borderRadius: pxToRem(4),
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
backgroundColor: 'rgba(0,0,0,0.6)',
|
||||
color: theme.palette.common.white,
|
||||
marginRight: pxToRem(7),
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(0,0,0,0.7)',
|
||||
color: theme.palette.common.white,
|
||||
},
|
||||
},
|
||||
downloadButton: {
|
||||
marginLeft: pxToRem(7),
|
||||
padding: pxToRem(3),
|
||||
borderRadius: pxToRem(4),
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
backgroundColor: 'rgba(0,0,0,0.6)',
|
||||
color: theme.palette.common.white,
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(0,0,0,0.7)',
|
||||
color: theme.palette.common.white,
|
||||
},
|
||||
},
|
||||
previewCloseButton: {
|
||||
color: theme.palette.common.white,
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(0,0,0,0.7)',
|
||||
color: theme.palette.common.white,
|
||||
},
|
||||
},
|
||||
previewDownloadButton: {
|
||||
cursor: 'pointer',
|
||||
color: theme.palette.common.white,
|
||||
'&:hover': {
|
||||
backgroundColor: 'rgba(0,0,0,0.7)',
|
||||
color: theme.palette.common.white,
|
||||
},
|
||||
},
|
||||
previewDownloadIcon: {
|
||||
height: pxToRem(26),
|
||||
width: pxToRem(26),
|
||||
cursor: 'pointer',
|
||||
},
|
||||
errorMessage: {
|
||||
color: theme.palette.error.main,
|
||||
fontStyle: 'italic',
|
||||
fontSize: pxToRem(12),
|
||||
marginTop: theme.spacing(0.5),
|
||||
fontFamily: theme.fontFamily.medium,
|
||||
},
|
||||
}));
|
||||
@@ -0,0 +1,83 @@
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
import { pxToRem } from '../../theme/typography';
|
||||
|
||||
export const useStyles = makeStyles((theme) => ({
|
||||
stepperMain: {
|
||||
'& .MuiStepLabel-root': {
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
},
|
||||
'& .MuiStep-root': {
|
||||
paddingLeft: theme.spacing(0),
|
||||
paddingRight: theme.spacing(0),
|
||||
},
|
||||
'& .MuiStepLabel-iconContainer': {
|
||||
paddingRight: theme.spacing(0),
|
||||
paddingBottom: theme.spacing(0),
|
||||
},
|
||||
'& .MuiStepLabel-label': {
|
||||
fontFamily: theme.fontFamily.regular,
|
||||
fontSize: pxToRem(12),
|
||||
},
|
||||
marginLeft: theme.spacing(1),
|
||||
marginTop: theme.spacing(1),
|
||||
display: 'flex',
|
||||
width: '70%',
|
||||
justifyContent: 'center',
|
||||
marginBottom: theme.spacing(1.4),
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
width: '80%',
|
||||
margin: 'auto',
|
||||
marginTop: theme.spacing(1),
|
||||
marginBottom: theme.spacing(1.4),
|
||||
},
|
||||
[theme.breakpoints.up('xs')]: {
|
||||
zIndex: 1,
|
||||
},
|
||||
},
|
||||
stepperBox: {
|
||||
width: '35%',
|
||||
marginLeft: theme.spacing(2),
|
||||
marginTop: theme.spacing(0.2),
|
||||
justifyContent: 'center',
|
||||
[theme.breakpoints.down('md')]: {
|
||||
width: '60%',
|
||||
},
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
margin: 'auto',
|
||||
width: '90%',
|
||||
},
|
||||
},
|
||||
stepLabel: {
|
||||
display: 'flex',
|
||||
// justifyContent: 'center',
|
||||
textAlign: 'center',
|
||||
color: theme.palette.grey[29],
|
||||
[theme.breakpoints.down('md')]: {
|
||||
width: '100%',
|
||||
},
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
stepIconRoot: {
|
||||
backgroundColor: theme.palette.grey[29],
|
||||
color: theme.info,
|
||||
width: 30,
|
||||
height: 30,
|
||||
display: 'flex',
|
||||
borderRadius: '50%',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
stack: {
|
||||
backgroundColor: theme.palette.grey[30],
|
||||
borderRadius: `${theme.spacing(1)} ${theme.spacing(1)} ${theme.spacing(0)} ${theme.spacing(0)}`,
|
||||
},
|
||||
activeStepLabel: {
|
||||
color: theme.palette.common.black,
|
||||
},
|
||||
icons: {
|
||||
fontSize: pxToRem(18),
|
||||
},
|
||||
}));
|
||||
@@ -0,0 +1,55 @@
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
import { pxToRem } from '../../theme/typography';
|
||||
|
||||
export const useStyles = makeStyles((theme) => ({
|
||||
nextButton: {
|
||||
'&.MuiButtonBase-root': {
|
||||
padding: `${theme.spacing(2.1)} ${theme.spacing(1.6)}`,
|
||||
backgroundColor: theme?.palette?.primary?.colors,
|
||||
color: theme?.palette?.common?.white,
|
||||
display: 'flex',
|
||||
fontSize: pxToRem(14),
|
||||
fontFamily: theme?.fontFamily?.semiBold,
|
||||
width: 'auto',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: theme.spacing(0.8),
|
||||
[theme.breakpoints.down('md')]: {
|
||||
marginTop: theme.spacing(2),
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
},
|
||||
checkBoxIconForNextButton: {
|
||||
fontSize: pxToRem(20),
|
||||
marginRight: theme.spacing(0.3),
|
||||
},
|
||||
alert: {
|
||||
backgroundColor: theme?.palette?.grey[51],
|
||||
color: theme?.palette?.grey[52],
|
||||
borderColor: theme?.palette?.grey[52],
|
||||
borderRadius: theme.spacing(0.8),
|
||||
padding: `${theme.spacing(0.2)} ${theme.spacing(1.6)}`,
|
||||
},
|
||||
allElementOuterDiv: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
margin: theme.spacing(3),
|
||||
[theme.breakpoints.down('md')]: {
|
||||
flexDirection: 'column',
|
||||
},
|
||||
},
|
||||
alertDivWithButton: {
|
||||
flex: 0.98,
|
||||
width: '100%',
|
||||
},
|
||||
alertDivWithoutButton: {
|
||||
flex: 1,
|
||||
},
|
||||
nextButtonDiv: {
|
||||
[theme.breakpoints.down('md')]: {
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
}));
|
||||
@@ -0,0 +1,63 @@
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
import { pxToRem } from '../../theme/typography';
|
||||
|
||||
export const useStyles = makeStyles((theme) => ({
|
||||
header: {
|
||||
marginTop: theme.spacing(1.4),
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
[theme.breakpoints.up('md')]: {
|
||||
marginTop: theme.spacing(0),
|
||||
},
|
||||
},
|
||||
detailPageHeader: {
|
||||
minHeight: theme.spacing(3.2),
|
||||
// margin: theme.spacing(0.5),
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-start',
|
||||
// flexWrap: 'wrap',
|
||||
},
|
||||
title: {
|
||||
width: 'max-content',
|
||||
marginLeft: theme.spacing(1),
|
||||
},
|
||||
globalIcon: {
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
marginLeft: theme?.spacing(1),
|
||||
marginTop: theme?.spacing(1.5),
|
||||
},
|
||||
headerActions: {
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
},
|
||||
detailHeaderActions: {
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
},
|
||||
gobackIcon: {
|
||||
fontSize: pxToRem(24),
|
||||
marginRight: theme.spacing(0.4),
|
||||
cursor: 'pointer',
|
||||
},
|
||||
headerTitle: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
maxWidth: '100%',
|
||||
alignItems: 'center',
|
||||
},
|
||||
asyncDropdownContainer: {
|
||||
height: '42px',
|
||||
width: '251px',
|
||||
marginRight: theme?.spacing(1.6),
|
||||
},
|
||||
subHeading: {
|
||||
marginLeft: theme.spacing(4),
|
||||
fontFamily: 'Inter-Regular',
|
||||
},
|
||||
}));
|
||||
@@ -0,0 +1,25 @@
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
import { pxToRem } from '../../theme/typography';
|
||||
|
||||
export const useStyles = makeStyles((theme) => ({
|
||||
title: {
|
||||
fontSize: pxToRem(14),
|
||||
fontWeight: '600',
|
||||
textTransform: 'uppercase',
|
||||
},
|
||||
bracketText: {
|
||||
fontSize: pxToRem(12),
|
||||
textTransform: 'none',
|
||||
color: theme.palette.grey[10],
|
||||
opacity: 0.8,
|
||||
fontFamily: theme?.fontFamily?.regular,
|
||||
fontWeight: 500,
|
||||
},
|
||||
root: {
|
||||
paddingTop: theme.spacing(2),
|
||||
paddingLeft: theme.spacing(2.5),
|
||||
width: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
}));
|
||||
@@ -0,0 +1,12 @@
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
|
||||
export const useStyles = makeStyles(() => ({
|
||||
root: {
|
||||
backgroundSize: 'cover',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundPosition: 'center',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
},
|
||||
}));
|
||||
@@ -0,0 +1,71 @@
|
||||
import { makeStyles } from '@mui/styles';
|
||||
import { pxToRem } from '../../theme/typography';
|
||||
|
||||
export const useStyles = makeStyles((theme) => ({
|
||||
main: {
|
||||
marginTop: '15px',
|
||||
width: '42vw',
|
||||
[theme.breakpoints.up('md')]: {
|
||||
width: '100%',
|
||||
},
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
width: '100%',
|
||||
},
|
||||
},
|
||||
chipOuter: {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
flexDirection: 'row',
|
||||
width: '100%',
|
||||
},
|
||||
chip: {
|
||||
minWidth: '170px',
|
||||
height: '42px',
|
||||
padding: theme.spacing(1.5),
|
||||
margin: theme.spacing(1),
|
||||
marginRight: theme.spacing(1.5),
|
||||
justifyContent: 'space-between',
|
||||
borderRadius: '24px',
|
||||
fontSize: pxToRem(14),
|
||||
},
|
||||
dropDownArrow: {
|
||||
color: theme.palette.grey[3],
|
||||
transition: 'transform 0.1s ease-in-out',
|
||||
},
|
||||
rotate180Deg: {
|
||||
transform: 'rotate(180deg)',
|
||||
},
|
||||
rotate0Deg: {
|
||||
transform: 'rotate(0deg)',
|
||||
},
|
||||
hoverPointer: {
|
||||
'&:hover': {
|
||||
cursor: 'pointer',
|
||||
},
|
||||
},
|
||||
selectAndSearchField: {
|
||||
display: 'flex',
|
||||
gap: '0.7rem',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
[theme.breakpoints.up('md')]: {
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'wrap',
|
||||
alignItems: 'center',
|
||||
},
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
flexDirection: 'column',
|
||||
},
|
||||
},
|
||||
autoComplete: {
|
||||
width: '90%',
|
||||
[theme.breakpoints.up('md')]: {
|
||||
flex: 1.1,
|
||||
},
|
||||
},
|
||||
autoCompleteText: {
|
||||
[theme.breakpoints.up('md')]: {
|
||||
flex: 1,
|
||||
},
|
||||
},
|
||||
}));
|
||||
@@ -0,0 +1,150 @@
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
import { pxToRem } from '../../theme/typography';
|
||||
|
||||
export const useStyles = makeStyles((theme) => ({
|
||||
header: {
|
||||
minHeight: theme.spacing(3.3),
|
||||
margin: theme.spacing(0.5),
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
width: '99%',
|
||||
},
|
||||
detailPageHeader: {
|
||||
minHeight: theme.spacing(3.2),
|
||||
margin: theme.spacing(0.5),
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-start',
|
||||
// flexWrap: 'wrap',
|
||||
},
|
||||
title: {
|
||||
width: 'max-content',
|
||||
},
|
||||
globalIcon: {
|
||||
width: '24px',
|
||||
height: '24px',
|
||||
marginLeft: theme?.spacing(1),
|
||||
marginTop: theme?.spacing(1.5),
|
||||
},
|
||||
headerResponsive: {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap',
|
||||
[theme.breakpoints.down('sm')]: {
|
||||
alignItems: 'flex-start',
|
||||
},
|
||||
},
|
||||
extraText: {
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
marginRight: theme.spacing(2.0),
|
||||
},
|
||||
secondaryButton: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
headerActions: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexWrap: 'wrap',
|
||||
maxWidth: '720px',
|
||||
justifyContent: 'flex-end',
|
||||
},
|
||||
detailHeaderActions: {
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
},
|
||||
searchBar: {
|
||||
marginRight: theme.spacing(1.6),
|
||||
width: '251px',
|
||||
height: '43px',
|
||||
'& .MuiAutocomplete-root': {
|
||||
height: '43px',
|
||||
borderWidth: 0,
|
||||
},
|
||||
'&.MuiFormControl-root': {
|
||||
margin: '16px',
|
||||
},
|
||||
},
|
||||
selectBar: {
|
||||
marginLeft: theme.spacing(10),
|
||||
width: '251px',
|
||||
height: '43px',
|
||||
'& .MuiOutlinedInput-root': {
|
||||
height: '43px',
|
||||
borderWidth: 0,
|
||||
},
|
||||
},
|
||||
addButton: {
|
||||
'&.MuiButtonBase-root': {
|
||||
padding: `${theme.spacing(0.6)} ${theme.spacing(1.6)}`,
|
||||
backgroundColor: theme?.palette?.primary?.colors,
|
||||
color: theme?.palette?.common?.white,
|
||||
fontSize: pxToRem(15),
|
||||
fontFamily: theme?.fontFamily?.light,
|
||||
width: 'auto',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
|
||||
whiteSpace: 'nowrap',
|
||||
maxHeight: pxToRem(48),
|
||||
minHeight: pxToRem(48),
|
||||
marginTop: '5px',
|
||||
minWidth: pxToRem(127),
|
||||
},
|
||||
addButtonOutlined: {
|
||||
'&.MuiButtonBase-root': {
|
||||
padding: `${theme.spacing(0.6)} ${theme.spacing(1.6)}`,
|
||||
backgroundColor: theme?.palette?.primary?.colors,
|
||||
color: theme?.palette?.grey[10],
|
||||
fontSize: pxToRem(15),
|
||||
fontFamily: theme?.fontFamily?.light,
|
||||
width: 'auto',
|
||||
border: `1px solid ${theme.palette.grey[29]}`,
|
||||
justifyContent: 'center',
|
||||
'&:hover': {
|
||||
backgroundColor: theme.palette.grey[50],
|
||||
},
|
||||
minHeight: theme.spacing(4.4),
|
||||
},
|
||||
|
||||
whiteSpace: 'nowrap',
|
||||
maxHeight: pxToRem(48),
|
||||
minHeight: pxToRem(48),
|
||||
marginTop: '5px',
|
||||
minWidth: pxToRem(127),
|
||||
},
|
||||
gobackIcon: {
|
||||
fontSize: '28px',
|
||||
marginRight: theme.spacing(2.0),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
headerTitle: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
maxWidth: '100%',
|
||||
},
|
||||
dropdownContainer: {
|
||||
height: '42px',
|
||||
width: '251px',
|
||||
marginRight: theme?.spacing(1.6),
|
||||
},
|
||||
dropdownAutocomplete: {
|
||||
marginRight: theme.spacing(1.5),
|
||||
width: '251px',
|
||||
maxHeight: '43px',
|
||||
minHeight: '43px',
|
||||
|
||||
'& .MuiOutlinedInput-root': {
|
||||
height: '48px',
|
||||
backgroundColor: theme.palette.grey[2],
|
||||
},
|
||||
},
|
||||
}));
|
||||
@@ -0,0 +1,184 @@
|
||||
import { makeStyles } from '@mui/styles';
|
||||
import { pxToRem } from '../../theme/typography';
|
||||
|
||||
export const useStyles = makeStyles((theme) => ({
|
||||
textFilter: {
|
||||
height: '32px',
|
||||
'& .MuiInputBase-root': {
|
||||
height: '32px',
|
||||
fontSize: pxToRem(12),
|
||||
paddingRight: 0,
|
||||
},
|
||||
},
|
||||
selectFilter: {
|
||||
boxShadow: 'none',
|
||||
'& .MuiOutlinedInput-notchedOutline': { border: 0 },
|
||||
'&.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline': {
|
||||
border: 0,
|
||||
},
|
||||
'&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
||||
border: 0,
|
||||
},
|
||||
height: '32px',
|
||||
fontSize: pxToRem(12),
|
||||
fontFamily: theme.fontFamily.semiBold,
|
||||
opacity: 0.56,
|
||||
fontWeight: 600,
|
||||
lineHeight: 'normal',
|
||||
'& .MuiSelect-select.MuiInputBase-input': {
|
||||
marginRight: theme.spacing(0),
|
||||
paddingRight: theme.spacing(0),
|
||||
},
|
||||
},
|
||||
ListItemTextClass: {
|
||||
paddingLeft: theme.spacing(0.6),
|
||||
},
|
||||
tableBodyRow: {
|
||||
cursor: 'pointer',
|
||||
backgroundColor: theme.palette.grey[0],
|
||||
borderRadius: '8px',
|
||||
'&.Mui-selected': {
|
||||
backgroundColor: theme?.palette?.primary?.highlight,
|
||||
},
|
||||
},
|
||||
tableHeadRow: {
|
||||
cursor: 'pointer',
|
||||
backgroundColor: theme.palette.grey[30],
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0px 0px 0px #fff',
|
||||
},
|
||||
tableCheckbox: {
|
||||
'& .MuiSvgIcon-root': {
|
||||
width: '21px',
|
||||
},
|
||||
},
|
||||
muiTableBodyCell: {
|
||||
'& .MuiTableCell-root': {
|
||||
opacity: '0.7',
|
||||
},
|
||||
// lineHeight: '2.5rem',
|
||||
margin: theme.spacing(1),
|
||||
fontWeight: '500',
|
||||
fontSize: pxToRem(16),
|
||||
fontStretch: 'normal',
|
||||
fontStyle: 'normal',
|
||||
letterSpacing: 'normal',
|
||||
fontFamily: 'Inter-Medium',
|
||||
color: theme.palette.grey[10],
|
||||
textAlign: 'left',
|
||||
},
|
||||
muiTableHeadCell: {
|
||||
lineHeight: '2.0rem',
|
||||
fontSize: pxToRem(12),
|
||||
fontFamily: 'Inter-Bold',
|
||||
fontWeight: 'bold',
|
||||
fontStretch: 'normal',
|
||||
fontStyle: 'normal',
|
||||
letterSpacing: 'normal',
|
||||
alignContent: 'center',
|
||||
opacity: 0.56,
|
||||
color: theme.palette.grey[10],
|
||||
margin: theme.spacing(2.5),
|
||||
'& .Mui-TableHeadCell-Content': {
|
||||
'& .Mui-TableHeadCell-Content-Labels': {
|
||||
'& span': {
|
||||
'& .MuiIconButton-sizeSmall ': {
|
||||
display: 'none',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
'& .MuiTableRow-head': {
|
||||
backgroundColor: theme.palette.grey[0],
|
||||
},
|
||||
'& .MuiCollapse-root': {
|
||||
marginTop: '-32px',
|
||||
},
|
||||
},
|
||||
tableGrayRow: {
|
||||
cursor: 'pointer',
|
||||
backgroundColor: theme.palette.grey[26],
|
||||
borderRadius: theme.spacing(0.8),
|
||||
},
|
||||
tablehighlightRow: {
|
||||
cursor: 'pointer',
|
||||
backgroundColor: `${theme?.palette?.primary?.highlight} !important`,
|
||||
borderRadius: theme.spacing(0.8),
|
||||
'& .MuiTableCell-root': {
|
||||
backgroundColor: `${theme?.palette?.primary?.highlight} !important`,
|
||||
},
|
||||
},
|
||||
prevNextBtn: {
|
||||
display: 'flex',
|
||||
fontFamily: 'Inter-Regular',
|
||||
fontSize: pxToRem(14),
|
||||
justifyContent: 'center',
|
||||
paddingLeft: '12px',
|
||||
paddingRight: '12px',
|
||||
boxShadow: '0px 1px 2px 0px #e9eaeb',
|
||||
color: theme.palette.grey[10],
|
||||
border: '1px solid #E9EAEB',
|
||||
borderRadius: '8px',
|
||||
},
|
||||
menuItem: {
|
||||
paddingTop: theme.spacing(1.5),
|
||||
paddingBottom: theme.spacing(1.5),
|
||||
fontSize: pxToRem(14),
|
||||
},
|
||||
searchContainer: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
searchBar: {
|
||||
margin: theme.spacing(2.0),
|
||||
// marginBottom: theme.spacing(2.8),
|
||||
backgroundColor: theme.palette.grey[0],
|
||||
'& .MuiOutlinedInput-root': {
|
||||
borderRadius: theme.spacing(1.0),
|
||||
// height: theme.spacing(4.0),
|
||||
},
|
||||
'&.MuiTextField-root': {
|
||||
width: theme.spacing(40.0),
|
||||
// height: theme.spacing(4.0),
|
||||
borderRadius: theme.spacing(1.0),
|
||||
// maxHeight: theme.spacing(4.0),
|
||||
},
|
||||
'& .MuiOutlinedInput-input::placeholder': {
|
||||
fontStyle: 'normal',
|
||||
fontSize: pxToRem(14),
|
||||
color: theme.palette.grey[10],
|
||||
opacity: 0.9,
|
||||
},
|
||||
},
|
||||
searchIconImg: {
|
||||
width: theme.spacing(2.0),
|
||||
minWidth: theme.spacing(1.8),
|
||||
},
|
||||
pageSizeDropdown: {
|
||||
display: 'flex',
|
||||
margin: theme.spacing(2.0),
|
||||
marginBottom: theme.spacing(2.8),
|
||||
},
|
||||
dropDownLabel: {
|
||||
alignSelf: 'center',
|
||||
marginRight: theme.spacing(0.6),
|
||||
},
|
||||
perPageDropdown: {
|
||||
backgroundColor: theme.palette.grey[0],
|
||||
'& .MuiSelect-outlined': {
|
||||
borderRadius: theme.spacing(1.0),
|
||||
height: theme.spacing(1.0),
|
||||
minHeight: theme.spacing(1.6),
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
},
|
||||
'&.MuiSelect-root': {
|
||||
height: theme.spacing(1.0),
|
||||
borderRadius: theme.spacing(1.0),
|
||||
maxHeight: theme.spacing(1.0),
|
||||
},
|
||||
'& .MuiSelect-icon': {
|
||||
color: theme.palette.primary.main,
|
||||
},
|
||||
},
|
||||
}));
|
||||
@@ -0,0 +1,85 @@
|
||||
import makeStyles from '@mui/styles/makeStyles';
|
||||
import { pxToRem } from '../../theme/typography';
|
||||
|
||||
export const useStyles = makeStyles((theme) => ({
|
||||
outerBox: {
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
fontFamily: theme.fontFamily.regular,
|
||||
},
|
||||
allContentBox: {
|
||||
marginRight: pxToRem(5),
|
||||
},
|
||||
heading: {
|
||||
padding: theme.spacing(3),
|
||||
justifyContent: 'space-between',
|
||||
},
|
||||
headingTitle: {
|
||||
fontSize: pxToRem(24),
|
||||
fontFamily: theme.fontFamily.medium,
|
||||
},
|
||||
|
||||
contentBox: {
|
||||
fontSize: pxToRem(16),
|
||||
overflowY: 'auto',
|
||||
flexGrow: '1',
|
||||
margin: theme.spacing(3),
|
||||
marginTop: theme.spacing(1),
|
||||
marginRight: theme.spacing(0),
|
||||
},
|
||||
textBox: {
|
||||
marginRight: theme.spacing(4),
|
||||
},
|
||||
|
||||
subHeadingTitle: {
|
||||
fontSize: pxToRem(18),
|
||||
textTransform: 'uppercase',
|
||||
paddingTop: theme.spacing(3),
|
||||
fontFamily: theme.fontFamily.semiBold,
|
||||
},
|
||||
subHeadingText: {
|
||||
fontSize: pxToRem(16),
|
||||
paddingTop: theme.spacing(1),
|
||||
},
|
||||
TermsAndConditionCloseIcon: {
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
paragraphSpacing: {
|
||||
marginTop: theme.spacing(2),
|
||||
},
|
||||
listTitle: {
|
||||
fontFamily: theme.fontFamily.bold,
|
||||
marginLeft: theme.spacing(1),
|
||||
fontSize: pxToRem(18),
|
||||
},
|
||||
|
||||
listTitleText: {
|
||||
marginLeft: theme.spacing(1),
|
||||
},
|
||||
outerList: {
|
||||
fontFamily: theme.fontFamily.bold,
|
||||
marginLeft: theme.spacing(3),
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
flexDirection: 'column',
|
||||
gap: pxToRem(10),
|
||||
marginTop: pxToRem(20),
|
||||
},
|
||||
subList: {
|
||||
marginLeft: theme.spacing(3),
|
||||
display: 'flex',
|
||||
justifyContent: 'flex-start',
|
||||
flexDirection: 'column',
|
||||
gap: pxToRem(10),
|
||||
marginTop: pxToRem(10),
|
||||
fontSize: pxToRem(16),
|
||||
fontFamily: theme.fontFamily.regular,
|
||||
},
|
||||
listAdditionalText: {
|
||||
fontSize: pxToRem(16),
|
||||
paddingTop: theme.spacing(1),
|
||||
fontFamily: theme.fontFamily.regular,
|
||||
},
|
||||
}));
|
||||
Reference in New Issue
Block a user