@argusoft/medplat-app-shell 1.0.6 → 1.0.7

package/src/views/custom-components/CustomStatsComponent.jsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+import { useTheme } from '@mui/material/styles'; // Added MUI hooks
+
+const CustomStatsComponent = ({
+  title,
+  value,
+  bgColor,
+  titleColor,
+  valueColor,
+  onClick,
+  width = '100%',
+  height = 'auto',
+  minWidth = '',
+  minHeight = '',
+  selected = false,
+  selectedBgColor,
+  selectedTitleColor = 'white',
+  selectedValueColor = 'white',
+  bottomIndicator = false,
+}) => {
+  const { translate } = useTranslateProvider();
+  const theme = useTheme();
+  const isDark = theme.palette.mode === 'dark';
+
+  const defaultBg = isDark ? theme.palette.background.paper : 'white';
+  const defaultTitleColor = isDark ? theme.palette.text.secondary : '#64748b'; // slate-500
+  const defaultValueColor = isDark ? theme.palette.text.primary : '#1e293b'; // slate-800
+  const borderColor = isDark ? theme.palette.divider : 'rgb(243 244 246)';
+
+  return (
+    <div
+      onClick={onClick}
+      key={title}
+      role="button"
+      tabIndex={0}
+      className={`
+        relative flex flex-col rounded-2xl border
+        cursor-pointer transition-all duration-300 ease-in-out 
+        hover:shadow-xl hover:-translate-y-1 active:scale-[0.98]
+        overflow-hidden
+      `}
+      style={{
+        borderColor: borderColor,
+        backgroundColor: selected ? selectedBgColor || theme.palette.primary.main : bgColor || defaultBg,
+        width: width,
+        height: height,
+        minWidth: minWidth,
+        minHeight: minHeight,
+        paddingBottom: '10px'
+      }}
+    >
+      <div className="px-5 pt-3 flex flex-col h-full relative">
+        {/* Title Section (Top) */}
+        {title && (
+          <p
+            className="text-[10px] font-black uppercase tracking-[0.1em]"
+            style={{
+              color: selected ? selectedTitleColor : titleColor || defaultTitleColor,
+            }}
+          >
+            {translate(title)}
+          </p>
+        )}
+
+        {/* Value and Badge Row */}
+        <div className="flex items-center">
+          {value !== undefined && (
+            <h3
+              className="text-2xl font-black tracking-tight"
+              style={{
+                color: selected ? selectedValueColor : valueColor || defaultValueColor,
+              }}
+            >
+              {value}
+            </h3>
+          )}
+        </div>
+      </div>
+
+      {/* Bottom Indicator */}
+      {bottomIndicator && (
+        <div
+          className="absolute bottom-0 left-5 right-5 h-[3px] rounded-t-full"
+          style={{
+            backgroundColor: typeof bottomIndicator === 'string' ? bottomIndicator : theme.palette.primary.main,
+          }}
+        />
+      )}
+    </div>
+  );
+};
+
+export default CustomStatsComponent;
+
+CustomStatsComponent.propTypes = {
+  title: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  onClick: PropTypes.func,
+  width: PropTypes.string,
+  height: PropTypes.string,
+  minWidth: PropTypes.string,
+  minHeight: PropTypes.string,
+  bgColor: PropTypes.string,
+  titleColor: PropTypes.string,
+  valueColor: PropTypes.string,
+  selected: PropTypes.bool,
+  selectedBgColor: PropTypes.string,
+  selectedTitleColor: PropTypes.string,
+  selectedValueColor: PropTypes.string,
+  selectedIconBgColor: PropTypes.string,
+  bottomIndicator: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+};

package/src/views/custom-components/CustomSvgUpload.jsx

@@ -0,0 +1,170 @@
+import { showToast } from '@/common/toaster/toaster';
+import { FormControl, Grid2, IconButton, Typography } from '@mui/material';
+import { Box } from '@mui/system';
+import { default as React, useEffect, useRef, useState } from 'react';
+import { get } from 'react-hook-form';
+import PropTypes from 'prop-types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSquarePlus, faTrash } from '@fortawesome/free-solid-svg-icons';
+
+import SafeHtml from '@/common/SafeHtml.jsx';
+
+const CustomSvgUpload = ({
+  onUpload,
+  formControl,
+  name,
+  errors,
+  accept = '*',
+  disabled = false,
+  dataTestId = 'file-upload',
+}) => {
+  const [svgString, setSvgString] = useState('');
+  const [svgStringDisplay, setSvgStringDisplay] = useState('');
+  const error = get(errors, name);
+  const fileInputRef = useRef(null);
+
+  const handleFileUpload = (event) => {
+    if (disabled) return;
+    if (svgStringDisplay && svgString) {
+      showToast({ message: 'Max no of files reached', type: 'error' });
+      return;
+    }
+    try {
+      const file = event.target.files[0];
+      if (!file) return;
+
+      if (fileInputRef.current) fileInputRef.current.value = '';
+      if (!file.type.includes('svg') && !file.name.toLowerCase().endsWith('.svg')) {
+        showToast({ message: 'Only SVG files are allowed', type: 'error' });
+        setSvgString('');
+        setSvgStringDisplay('');
+        if (onUpload) onUpload(null);
+        return;
+      }
+
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        let svgContent = e.target.result;
+        setSvgString(svgContent);
+
+        let parser = new DOMParser();
+        let doc = parser.parseFromString(svgContent, 'image/svg+xml');
+        let svgElement = doc.documentElement;
+
+        let viewBox = svgElement.getAttribute('viewBox');
+        if (!viewBox) {
+          let width = svgElement.getAttribute('width') || '512';
+          let height = svgElement.getAttribute('height') || '512';
+          svgElement.setAttribute('viewBox', `0 0 ${width} ${height}`);
+        }
+
+        svgElement.setAttribute('width', '80');
+        svgElement.setAttribute('height', '80');
+
+        setSvgStringDisplay(new XMLSerializer().serializeToString(svgElement));
+        if (onUpload) onUpload(svgContent);
+      };
+      reader.readAsText(file);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    let svg = formControl.getValues(name);
+    if (svg) {
+      setSvgString(svg);
+      let parser = new DOMParser();
+      let doc = parser.parseFromString(svg, 'image/svg+xml');
+      let svgElement = doc.documentElement;
+
+      let viewBox = svgElement.getAttribute('viewBox');
+      if (!viewBox) {
+        let width = svgElement.getAttribute('width') || '512';
+        let height = svgElement.getAttribute('height') || '512';
+        svgElement.setAttribute('viewBox', `0 0 ${width} ${height}`);
+      }
+
+      svgElement.setAttribute('width', '80');
+      svgElement.setAttribute('height', '80');
+
+      setSvgStringDisplay(new XMLSerializer().serializeToString(svgElement));
+    }
+  }, [formControl.getValues(name)]);
+
+  return (
+    <Box>
+      <FormControl fullWidth error={!!error}>
+        <Grid2 container spacing={2} sx={{ alignItems: 'center' }}>
+          <Grid2
+            size={2}
+            sx={{
+              alignItems: 'center',
+              alignSelf: 'center',
+              height: '80px',
+              width: '80px',
+              border: '2px dashed #ccc',
+              display: 'flex',
+              justifyContent: 'center',
+              textAlign: 'center',
+              backgroundColor: (theme) => theme.palette.background.paper,
+              overflow: 'hidden',
+            }}
+          >
+            {svgStringDisplay ? (
+              <div dangerouslySetInnerHTML={{ __html: svgStringDisplay }} />
+            ) : (
+              <Typography variant="body2" sx={{ color: '#999' }}>
+                <IconButton component="label" variant="contained" size="small">
+                  <FontAwesomeIcon icon={faSquarePlus} />
+                  <input
+                    type="file"
+                    style={{
+                      opacity: 0,
+                      position: 'absolute',
+                      cursor: disabled ? 'not-allowed' : 'pointer',
+                    }}
+                    onChange={handleFileUpload}
+                    required={true}
+                    accept={accept}
+                    ref={fileInputRef}
+                    disabled={disabled}
+                    data-testid={dataTestId}
+                  />
+                </IconButton>
+              </Typography>
+            )}
+          </Grid2>
+
+          {svgString && svgStringDisplay && (
+            <IconButton
+              variant="contained"
+              size="small"
+              color="error"
+              onClick={() => {
+                onUpload(null);
+                setSvgString(null);
+                setSvgStringDisplay(null);
+              }}
+            >
+              <FontAwesomeIcon icon={faTrash} />
+            </IconButton>
+          )}
+        </Grid2>
+        {error && <p className="error-helper-text">{error?.message}</p>}
+      </FormControl>
+    </Box>
+  );
+};
+
+CustomSvgUpload.propTypes = {
+  onUpload: PropTypes.any,
+  formControl: PropTypes.any,
+  name: PropTypes.any,
+  errors: PropTypes.any,
+  accept: PropTypes.any,
+  dataTestId: PropTypes.any,
+  disabled: PropTypes.bool,
+};
+
+export default CustomSvgUpload;

package/src/views/custom-components/CustomSwitch.jsx

@@ -0,0 +1,37 @@
+import { styled, Switch } from '@mui/material';
+
+const CustomSwitch = styled(Switch)(({ theme }) => ({
+  padding: 8,
+  scale: '1.3',
+  '& .MuiSwitch-track': {
+    borderRadius: 22 / 2,
+    '&::before, &::after': {
+      content: '""',
+      position: 'absolute',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      width: 16,
+      height: 16,
+    },
+    '&::before': {
+      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
+        theme.palette.getContrastText(theme.palette.primary.dark)
+      )}" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg>')`,
+      left: 12,
+    },
+    '&::after': {
+      backgroundImage: `url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
+        theme.palette.getContrastText(theme.palette.primary.dark)
+      )}" d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg>')`,
+      right: 12,
+    },
+  },
+  '& .MuiSwitch-thumb': {
+    boxShadow: 'none',
+    width: 16,
+    height: 16,
+    margin: 2,
+  },
+}));
+
+export default CustomSwitch;

package/src/views/custom-components/CustomTabPanel.jsx

@@ -0,0 +1,19 @@
+import { Box } from '@mui/material';
+import PropTypes from 'prop-types';
+
+const CustomTabPanel = (props) => {
+  const { children, value, index, ...other } = props;
+  return (
+    <div role="tabpanel" hidden={value !== index} id={`profile-tabpanel-${index}`} {...other}>
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  );
+};
+
+CustomTabPanel.propTypes = {
+  children: PropTypes.node,
+  index: PropTypes.number.isRequired,
+  value: PropTypes.number.isRequired,
+};
+
+export default CustomTabPanel;

package/src/views/custom-components/CustomTextArea.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { FormControl, TextareaAutosize } from '@mui/material';
+import { Controller, get } from 'react-hook-form';
+import '@/views/custom-components/CustomTextArea.scss';
+import PropTypes from 'prop-types';
+// import { sanitizeRichText } from '@/common/MalaciaousInputUtil';
+export default function CustomTextArea({
+  name,
+  minRows,
+  control,
+  disabled,
+  errors,
+  rules = {},
+  className,
+  dataTestId,
+  sx,
+  ...props
+}) {
+  const error = get(errors, name);
+  return (
+    <FormControl fullWidth>
+      <Controller
+        name={name}
+        rules={rules}
+        control={control}
+        render={({ field }) => (
+          <TextareaAutosize
+            {...field}
+            minRows={minRows}
+            // onBlur={(e) => {
+            //   const cleanValue = sanitizeRichText(e.target.value);
+            //   field.onChange(cleanValue);
+
+            //   field.onBlur();
+            // }}
+            disabled={disabled}
+            data-testid={dataTestId}
+            className={`custom-textarea ${className} ${error ? 'error-textarea' : 'custom-textarea-without-error'}`}
+            sx={{ ...sx, borderRadius: 2 }}
+            {...props}
+          />
+        )}
+      />
+      {error && (
+        <div data-testid="custom-error-message" className="error-helper-text">
+          {error?.message}
+        </div>
+      )}
+    </FormControl>
+  );
+}
+CustomTextArea.propTypes = {
+  name: PropTypes.any,
+  rules: PropTypes.any,
+  minRows: PropTypes.any,
+  control: PropTypes.any,
+  disabled: PropTypes.any,
+  errors: PropTypes.any,
+  className: PropTypes.any,
+  dataTestId: PropTypes.any,
+  sx: PropTypes.any,
+};

package/src/views/custom-components/CustomTextArea.scss

@@ -0,0 +1,27 @@
+.MuiFormControl-root .error-textarea {
+  border-color: red !important;
+  border-style: solid;
+}
+
+.MuiFormControl-root .error-textarea:focus {
+  outline-color: red;
+}
+
+.custom-textarea {
+  font-size: 14px !important;
+  margin-top: 8px;
+  border: 1px solid rgb(174, 174, 174) !important;
+  border-radius: 10px;
+  padding: 10px;
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.custom-textarea-without-error:hover {
+  border-color: black !important;
+}
+
+.custom-textarea-without-error:focus {
+  outline-color: #11b666;
+}

package/src/views/custom-components/CustomTextField.jsx

@@ -0,0 +1,116 @@
+// CustomTextField.jsx
+import React from 'react';
+import { TextField, FormControl } from '@mui/material';
+import PropTypes from 'prop-types';
+import { Controller, get } from 'react-hook-form';
+import { showToast } from '@/common/toaster/toaster';
+import { containsMaliciousPattern } from '@/common/MalaciaousInputUtil';
+
+const CustomTextField = ({
+  control,
+  id,
+  name,
+  errors,
+  onChange,
+  successMessage,
+  onBlur,
+  size = 'small',
+  rules = null,
+  dataTestId,
+  endAdornment,
+  fullWidth = true,
+  ...props
+}) => {
+  // Ensure `errors` is properly defined and contains the relevant field
+  const error = get(errors, name); // Get the error for the specific field
+
+  return (
+    <FormControl fullWidth={fullWidth}>
+      <Controller
+        name={name}
+        control={control}
+        rules={rules}
+        render={({ field }) => (
+          <TextField
+            {...field}
+            id={id}
+            name={name}
+            error={!!error}
+            helperText=""
+            size={size}
+            fullWidth
+            slotProps={{
+              input: {
+                endAdornment: endAdornment ? <>{endAdornment}</> : null,
+              },
+            }}
+            onChange={(e) => {
+              let value = e.target.value;
+              if (containsMaliciousPattern(value)) {
+                showToast({ message: 'HTML or script content is not allowed', type: 'warn' });
+                return;
+              }
+              // Convert to number if type is number
+              if (props.type === 'number' && value) {
+                value = Number(value);
+              }
+
+              field.onChange(value);
+              onChange?.({ ...e, target: { ...e.target, value } }); // also call external onChange if any
+            }}
+            onBlur={(e) => {
+              let value = e.target.value;
+              if (onBlur) {
+                onBlur(e);
+              } else if (name === 'code' && value && !props.disableUpperCase) {
+                value = value.toUpperCase();
+                field.onChange(value);
+              }
+              field.onBlur(e);
+            }}
+            sx={{
+              backgroundColor: '#F8FAFC',
+              '& .MuiInputLabel-root': {
+                fontSize: '14px',
+              },
+              '& .MuiInputBase-input': {
+                fontSize: '14px',
+              },
+            }}
+            data-testid={dataTestId}
+            {...props}
+          />
+        )}
+      />
+      {!error && successMessage && (
+        <p data-testid="custom-success-message" className="success-helper-text">
+          {successMessage}
+        </p>
+      )}
+      {error && (
+        <p data-testid="custom-error-message" className="error-helper-text">
+          {error?.message}
+        </p>
+      )}
+    </FormControl>
+  );
+};
+
+CustomTextField.propTypes = {
+  control: PropTypes.any,
+  id: PropTypes.any,
+  name: PropTypes.any,
+  errors: PropTypes.any,
+  onChange: PropTypes.any,
+  size: PropTypes.any,
+  onBlur: PropTypes.any,
+  rules: PropTypes.any,
+  successMessage: PropTypes.any,
+  type: PropTypes.any,
+  dataTestId: PropTypes.any,
+  fullWidth: PropTypes.any,
+  endAdornment: PropTypes.any,
+  disableUpperCase: PropTypes.any,
+};
+
+export default CustomTextField;

package/src/views/custom-components/CustomToggleSwitch.jsx

@@ -0,0 +1,138 @@
+import React, { useState, useRef, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Controller, get } from 'react-hook-form';
+import { useTheme } from '@mui/material';
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+
+const ToggleUI = ({ value, onChange, options = [], disabled = false, hasError = false }) => {
+  const theme = useTheme();
+  const { translate } = useTranslateProvider();
+
+  const [highlightStyle, setHighlightStyle] = useState({
+    width: 0,
+    left: 0,
+    opacity: 0,
+  });
+  const containerRef = useRef(null);
+  const itemsRef = useRef([]);
+
+  const updateHighlight = () => {
+    const index = options.findIndex((opt) => opt.value === value);
+
+    if (index !== -1 && itemsRef.current[index]) {
+      const currentTab = itemsRef.current[index];
+      setHighlightStyle({
+        width: currentTab.offsetWidth,
+        left: currentTab.offsetLeft,
+        opacity: 1,
+      });
+    }
+  };
+
+  useEffect(() => {
+    updateHighlight();
+    window.addEventListener('resize', updateHighlight);
+    return () => window.removeEventListener('resize', updateHighlight);
+  }, [value, options]);
+
+  const activeColor = theme?.palette?.primary?.main || '#3b82f6';
+
+  return (
+    <div
+      ref={containerRef}
+      className={`
+        relative inline-flex items-center rounded-full p-1 
+        border shadow-inner select-none transition-colors duration-200
+        ${disabled ? 'opacity-60 pointer-events-none' : ''}
+      `}
+      style={{
+        borderColor: hasError ? theme.palette.error.main : theme.palette.divider,
+        backgroundColor: hasError
+          ? theme.palette.mode === 'dark'
+            ? theme.palette.error.dark + '22'
+            : '#fef2f2'
+          : theme.palette.action.hover,
+      }}
+    >
+      <div
+        className="absolute h-[calc(100%-8px)] rounded-full transition-all duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] shadow-md"
+        style={{
+          width: highlightStyle.width,
+          transform: `translateX(${highlightStyle.left}px)`,
+          backgroundColor: activeColor,
+          opacity: highlightStyle.opacity,
+          top: 4,
+          left: 0,
+        }}
+      />
+
+      {options.map((option, idx) => {
+        const isActive = value === option.value;
+        return (
+          <button
+            key={option.value}
+            ref={(el) => (itemsRef.current[idx] = el)}
+            type="button"
+            onClick={() => {
+              if (!disabled) onChange(option.value);
+            }}
+            className="relative z-10 px-4 py-1 text-sm font-semibold rounded-full transition-colors duration-200 focus:outline-none whitespace-nowrap"
+            style={{
+              color: isActive ? '#ffffff' : theme.palette.text.secondary,
+            }}
+          >
+            {/* Translate the label */}
+            {translate ? translate(option.label) : option.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+ToggleUI.propTypes = {
+  value: PropTypes.any,
+  onChange: PropTypes.func,
+  options: PropTypes.array,
+  disabled: PropTypes.bool,
+  hasError: PropTypes.bool,
+};
+
+export default function CustomToggleSwitch({ control, name, rules, errors, options, ...props }) {
+  const error = name && errors ? get(errors, name) : null;
+  return (
+    <div className="flex flex-col items-start">
+      {control ? (
+        <Controller
+          name={name}
+          control={control}
+          rules={rules}
+          render={({ field: { value, onChange } }) => (
+            <ToggleUI {...props} value={value} onChange={onChange} options={options} hasError={!!error} />
+          )}
+        />
+      ) : (
+        <ToggleUI {...props} options={options} hasError={!!error} />
+      )}
+
+      {error && <p className="error-helper-text">{error.message}</p>}
+    </div>
+  );
+}
+
+CustomToggleSwitch.propTypes = {
+  control: PropTypes.object,
+  name: PropTypes.string,
+  rules: PropTypes.object,
+  errors: PropTypes.object,
+  value: PropTypes.any,
+  onChange: PropTypes.func,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      value: PropTypes.any.isRequired,
+    })
+  ).isRequired,
+  theme: PropTypes.object,
+  disabled: PropTypes.bool,
+};