@argusoft/medplat-app-shell 1.0.6 → 1.0.8

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

@@ -0,0 +1,514 @@
+import FullCalendar from '@fullcalendar/react';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import listPlugin from '@fullcalendar/list';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import { Popover, Tooltip, Typography } from '@mui/material';
+import PropTypes from 'prop-types';
+import { useEffect, useRef, useState } from 'react';
+import dayjs from 'dayjs';
+import { useSelector } from 'react-redux';
+import './calendar.scss';
+import { useNavigate } from 'react-router';
+const DATE_FORMAT = 'YYYY-MM-DD';
+const MONTH_GRID_CALENDAR = 'dayGridMonth';
+const TELE_CONSULTATION = 'TELE_CONSULTATION';
+const CustomFullCalendar = ({
+  initialView,
+  handleMonthViewMore,
+  monthViewPopoverOpenRef,
+  isExtraLargeScreenForCalendarView,
+  setCalendarView,
+  calendarView,
+  viewInfo,
+  setViewInfo,
+  eventClick,
+  blockedDays,
+  slotDuration,
+  blockedEvents = [],
+  onFilteredAppointmentsChange,
+  appointmentResponse,
+  handleDateClick,
+}) => {
+  const navigate = useNavigate();
+  const currentTime = useState(dayjs().subtract(60, 'minute').format('HH:mm:ss'));
+  const calendarRef = useRef(null);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const [selectedAppointmentMonth, setSelectedAppointmentMonth] = useState(null);
+  const selectedAppointment = null;
+  const allEvents = useSelector((state) => state.CalendarEvents.allEvents);
+  const eventsForViewsExceptMonthView = useSelector((state) => state.CalendarEvents.eventsForViewsExceptMonthView);
+  const monthViewEvents = useSelector((state) => state.CalendarEvents.monthViewEvents);
+  const listView = 'listWeek';
+  const largeScreenToolbar = {
+    end: 'today prev,next',
+    start: `timeGridDay,timeGridWeek,dayGridMonth,${listView}`,
+    center: 'title',
+  };
+  const smallScreenToolbar = {
+    start: `timeGridDay,timeGridWeek,dayGridMonth,${listView}`,
+    center: 'today prev,next',
+    end: 'title',
+  };
+
+  useEffect(() => {
+    return () => {
+      if (monthViewPopoverOpenRef) {
+        monthViewPopoverOpenRef.current = false;
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    const toolbar = document.querySelector('.fc-toolbar');
+    if (toolbar) {
+      if (isExtraLargeScreenForCalendarView) {
+        toolbar.classList.remove('small-screen-toolbar');
+      } else {
+        toolbar.classList.add('small-screen-toolbar');
+      }
+    }
+  }, [isExtraLargeScreenForCalendarView]);
+
+  const isDateBlocked = (info) => {
+    if (info.view.type === MONTH_GRID_CALENDAR) {
+      const formattedDate = dayjs(info.date).format(DATE_FORMAT);
+      return blockedDays.some(
+        (blockedDay) => blockedDay.startDate <= formattedDate && blockedDay.endDate >= formattedDate
+      );
+    }
+    return false;
+  };
+
+  const updateScrollTime = (info) => {
+    if (calendarRef.current) {
+      const now = dayjs();
+
+      let isTodayVisible = false;
+
+      if (info.view.type === 'timeGridWeek') {
+        const startOfWeek = dayjs(info.start);
+        const endOfWeek = dayjs(info.end);
+        isTodayVisible = now.isAfter(startOfWeek) && now.isBefore(endOfWeek);
+      } else {
+        // For timeGridDay or other views
+        const startDate = dayjs(info.start);
+        isTodayVisible = startDate.isSame(now, 'day');
+      }
+
+      // Decide scroll time
+      const scrollTime = isTodayVisible
+        ? now.hour() < 2
+          ? '00:00:00'
+          : now.subtract(2, 'hour').format('HH:mm:ss')
+        : '00:00:00';
+
+      calendarRef.current.getApi().scrollToTime(scrollTime);
+    }
+  };
+
+  const initialScrollRef = useRef(false);
+
+  const handleDateChange = (info) => {
+    updateScrollTime(info);
+    initialScrollRef.current = true;
+    setViewInfo(info);
+    setCalendarView(info.view.type);
+    onFilteredAppointmentsChange(allEvents.value, info, appointmentResponse);
+  };
+
+  useEffect(() => {
+    if (viewInfo) {
+      handleDateChange(viewInfo);
+    }
+  }, [allEvents, appointmentResponse]);
+  return (
+    <div className="h-full pb-2">
+      <FullCalendar
+        ref={calendarRef}
+        plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin, listPlugin]}
+        headerToolbar={isExtraLargeScreenForCalendarView ? largeScreenToolbar : smallScreenToolbar}
+        initialView={initialView ?? 'timeGridDay'}
+        allDaySlot={false}
+        weekends={true}
+        slotDuration={{ minute: slotDuration }}
+        slotLabelInterval={{ minute: slotDuration }}
+        scrollTime={currentTime}
+        slotLabelFormat={{
+          hour: 'numeric',
+          minute: '2-digit',
+          omitZeroMinute: false,
+          meridiem: 'short',
+        }}
+        buttonText={{
+          today: 'Today',
+          month: 'Month',
+          week: 'Week',
+          day: 'Day',
+          list: 'All',
+        }}
+        slotMinTime={'00:00:00'}
+        slotMaxTime={'23:59:59'}
+        events={
+          calendarView === MONTH_GRID_CALENDAR
+            ? [...monthViewEvents] // When it's month grid view, show monthViewEvents
+            : [...eventsForViewsExceptMonthView.value, ...blockedEvents]
+        }
+        eventContent={(eventInfo) =>
+          renderEventContent(
+            eventInfo,
+            eventClick,
+            selectedAppointment,
+            anchorEl,
+            setAnchorEl,
+            popoverOpen,
+            setPopoverOpen,
+            monthViewPopoverOpenRef,
+            selectedAppointmentMonth,
+            setSelectedAppointmentMonth,
+            navigate
+          )
+        }
+        dayMaxEventRows={2}
+        fixedWeekCount={false}
+        views={{
+          day: {},
+          week: {
+            eventMaxStack: 1,
+          },
+        }}
+        height="100%"
+        noEventsText="There are no appointments to show !"
+        eventClick={calendarView === MONTH_GRID_CALENDAR ? handleMonthViewMore : eventClick}
+        dayCellClassNames={(cellInfo) => (isDateBlocked(cellInfo) ? ['blocked_day'] : [])}
+        datesSet={handleDateChange}
+        eventDidMount={(info) => {
+          if (info.view.type === listView) {
+            info.el.style.backgroundColor = info.event.extendedProps?.eventSelected ? '#E6EEf1' : 'default';
+          }
+        }}
+        eventOrder={(a, b) => (calendarView === listView ? 0 : a.extendedProps.priority - b.extendedProps.priority)}
+        dateClick={(info) => {
+          handleDateClick?.(info.date); // Call the passed handler
+        }}
+      />
+    </div>
+  );
+};
+
+const renderEventContent = (
+  eventInfo,
+  eventClick,
+  selectedAppointment,
+  anchorEl,
+  setAnchorEl,
+  popoverOpen,
+  setPopoverOpen,
+  monthViewPopoverOpenRef,
+  selectedAppointmentMonth,
+  setSelectedAppointmentMonth,
+  navigate
+) => {
+  const AppointmentItem = ({ item, isSelected }) => (
+    <div
+      style={{
+        display: 'flex',
+        backgroundColor: isSelected ? '#29bf91' : '#004C70',
+        padding: '2px 4px',
+        width: '100%',
+        borderRadius: '10px',
+
+        cursor: 'pointer',
+        overflow: 'hidden',
+        margin: '0px 0px 2px 0px',
+      }}
+      onClick={async () => {
+        eventClick({ event: { id: item.id } });
+        monthViewPopoverOpenRef.current = false;
+        setPopoverOpen(false);
+      }}
+    >
+      <p className="fc-patient-name" style={{ color: 'white', width: '150px' }}>
+        {item.title}
+      </p>
+    </div>
+  );
+  AppointmentItem.propTypes = { item: PropTypes.string, isSelected: PropTypes.string };
+  const statusStyles = {
+    SCHEDULED: 'bg-green-100 text-green-700',
+    CANCELLED: 'bg-red-100 text-red-700',
+    RESCHEDULED: 'bg-yellow-100 text-yellow-700',
+    COMPLETED: 'bg-blue-100 text-blue-700',
+    NO_SHOW: 'bg-gray-100 text-gray-700',
+    CHECKED_IN: 'bg-purple-100 text-purple-700',
+    MISSED_BY_PATIENT: 'bg-purple-100 text-purple-700',
+    MISSED_BY_DOCTOR: 'bg-purple-100 text-purple-700',
+  };
+  return (
+    <>
+      {eventInfo.view.type === MONTH_GRID_CALENDAR ? (
+        <>
+          {eventInfo.event.extendedProps.count > 0 && (
+            <div
+              className="flex items-center bg-transparent cursor-pointer z-[100] overflow-hidden"
+              onClick={async (event) => {
+                if (eventInfo.event.extendedProps.count > 1) {
+                  setSelectedAppointmentMonth({
+                    ...eventInfo.event.extendedProps,
+                    start: dayjs(eventInfo.event.start).format('MMMM DD, YYYY'),
+                  });
+                  if (monthViewPopoverOpenRef) {
+                    monthViewPopoverOpenRef.current = true;
+                  }
+                  setPopoverOpen(true);
+                  setAnchorEl(event.currentTarget);
+                } else {
+                  eventClick({ event: { id: eventInfo.event.extendedProps.teleAppointment[0]?.id } });
+                }
+              }}
+            >
+              <div
+                className="appointment-count flex-shrink-0"
+                style={{
+                  backgroundColor: '#004c70',
+                }}
+              >
+                {eventInfo.event.extendedProps.count}{' '}
+              </div>
+            </div>
+          )}
+          <Popover
+            open={popoverOpen}
+            anchorEl={anchorEl}
+            onClose={() => {
+              setAnchorEl(null);
+              if (monthViewPopoverOpenRef) {
+                monthViewPopoverOpenRef.current = false;
+              }
+              setPopoverOpen(false);
+            }}
+            anchorOrigin={{
+              vertical: 'bottom',
+              horizontal: 'right',
+            }}
+            transformOrigin={{
+              vertical: 'center',
+              horizontal: 'left',
+            }}
+            elevation={0}
+            sx={{ left: '-25px' }}
+          >
+            {selectedAppointmentMonth && (
+              <div style={{ border: '1px solid #ddd', maxHeight: '300px' }}>
+                <div
+                  style={{
+                    backgroundColor: '#d1d1d14c',
+                    padding: '3px 4px',
+                    color: '#616161',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                  }}
+                >
+                  <span>{selectedAppointmentMonth?.start}</span>
+                  <i
+                    className="ri-close-line"
+                    style={{ cursor: 'pointer' }}
+                    onClick={() => {
+                      setAnchorEl(null);
+                      if (monthViewPopoverOpenRef) {
+                        monthViewPopoverOpenRef.current = false;
+                      }
+                      setPopoverOpen(false);
+                    }}
+                  />
+                </div>
+                <div style={{ padding: '10px', overflowY: 'auto', height: '6rem' }} className="common-scrollbar">
+                  {selectedAppointmentMonth.appointmentType === TELE_CONSULTATION &&
+                    selectedAppointmentMonth.teleAppointment && (
+                      <div>
+                        {selectedAppointmentMonth.teleAppointment.map((item) => (
+                          <AppointmentItem key={item.id} item={item} isSelected={item.id === selectedAppointment?.id} />
+                        ))}
+                      </div>
+                    )}
+                </div>
+              </div>
+            )}
+          </Popover>
+        </>
+      ) : ['listWeek', 'listMonth'].includes(eventInfo.view.type) ? (
+        <div
+          className="flex !p-1 w-full justify-between !ml-2.5"
+          onClick={(e) => {
+            const parent = e.currentTarget.parentElement;
+            if (parent instanceof HTMLElement) {
+              parent.click();
+            }
+          }}
+        >
+          <Tooltip title={`Dr. ${eventInfo.event.extendedProps.doctorName}`} arrow>
+            <Typography
+              variant="h6"
+              className="list-patient-name calendar-list-doctor-name text-customBlue"
+              sx={{
+                fontWeight: '500',
+                fontSize: { md: '12px', lg: '12px', xl: '12px' },
+                // flex: '1.5',
+                mt: '7px',
+              }}
+            >
+              {eventInfo.event.extendedProps.doctorName}
+            </Typography>
+          </Tooltip>
+          <Tooltip title={eventInfo.event.title} arrow>
+            <Typography
+              variant="h6"
+              className="list-patient-name calendar-list-patient-name text-customBlue"
+              sx={{
+                fontWeight: '500',
+                fontSize: { md: '12px', lg: '12px', xl: '12px' },
+                ml: '10px',
+                mr: '10px',
+                mt: '7px',
+              }}
+            >
+              {eventInfo.event.title}
+            </Typography>
+          </Tooltip>
+          <Tooltip title={eventInfo.event.extendedProps.sadhikaName} arrow>
+            <Typography
+              variant="h6"
+              className="list-patient-name calendar-list-patient-name text-customBlue"
+              sx={{
+                fontWeight: '500',
+                fontSize: { md: '12px', lg: '12px', xl: '12px' },
+                ml: '10px',
+                mr: '10px',
+                mt: '7px',
+              }}
+            >
+              {eventInfo.event.extendedProps.sadhikaName} (Sadhika)
+            </Typography>
+          </Tooltip>
+          <Tooltip title={'Join appointment'} arrow>
+            {eventInfo.event?.extendedProps?.appointmentStatus !== 'COMPLETED' &&
+            eventInfo.event?.extendedProps?.appointmentStatus !== 'CANCELLED' &&
+            !dayjs().isAfter(eventInfo.event?.end) ? (
+              <div
+                className={`px-6 py-2 text-sm rounded-full text-center  bg-green-600 text-white`}
+                onClick={() => {
+                  navigate(`/ui/teleCommunication/${eventInfo.event?.id}`);
+                }}
+              >
+                JOIN
+              </div>
+            ) : (
+              // <Button
+              //   variant="contained"
+              //   color="primary"
+              //   size="small"
+              //   sx={{
+              //     fontWeight: '500',
+              //     fontSize: { md: '12px', lg: '12px', xl: '12px' },
+              //   }}
+              //   // disabled={!showJoinButton}
+              //   onClick={() => {
+              //     navigate(`/ui/teleCommunication/${eventInfo.event?.id}`);
+              //   }}
+              // >
+              //   Join
+              // </Button>
+              <div>
+                {(eventInfo.event?.extendedProps?.appointmentStatus === 'SCHEDULED' ||
+                  eventInfo.event?.extendedProps?.appointmentStatus === 'RESCHEDULED') &&
+                dayjs().isAfter(eventInfo.event?.end) ? (
+                  <div
+                    className={`py-1 px-3 text-sm font-medium rounded-full text-center w-full ${statusStyles['MISSED_BY_PATIENT']}`}
+                  >
+                    MISSED
+                  </div>
+                ) : (
+                  <div
+                    className={`px-3 py-1 text-sm rounded-full text-center  ${statusStyles[`${eventInfo.event?.extendedProps?.appointmentStatus}`]}`}
+                  >
+                    {eventInfo.event?.extendedProps?.appointmentStatus?.replace(/_/g, ' ')}
+                  </div>
+                )}
+              </div>
+            )}
+          </Tooltip>
+        </div>
+      ) : (
+        <div
+          onClick={(e) => {
+            const parent = e.currentTarget.parentElement;
+            if (parent instanceof HTMLElement) {
+              parent.click();
+            }
+          }}
+          style={{
+            maxWidth: '100%',
+          }}
+        >
+          {eventInfo.event.extendedProps.appointmentType === 'Blocked' ? (
+            <div
+              style={{
+                backgroundColor: '#b2c9d4',
+                width: 'auto',
+                height: '100%',
+              }}
+            />
+          ) : (
+            <div
+              style={{
+                display: 'flex',
+                backgroundColor:
+                  eventInfo.event.extendedProps?.appointmentId === selectedAppointment?.id ? '#29bf91' : '#004C70',
+                padding: '2px 4px',
+                width: '100%',
+                borderRadius: '10px',
+                border: '1px solid white',
+                cursor: 'pointer',
+                overflow: 'hidden',
+              }}
+            >
+              <p
+                className="fc-patient-name"
+                style={{
+                  color: 'white',
+                  width: '150px',
+                }}
+              >
+                {eventInfo.event.title}
+              </p>
+            </div>
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+CustomFullCalendar.propTypes = {
+  initialView: PropTypes.string,
+  handleMonthViewMore: PropTypes.func,
+  monthViewEventsData: PropTypes.array,
+  monthViewPopoverOpenRef: PropTypes.object,
+  isExtraLargeScreenForCalendarView: PropTypes.bool,
+  setCalendarView: PropTypes.func,
+  calendarView: PropTypes.string,
+  viewInfo: PropTypes.object,
+  setViewInfo: PropTypes.func,
+  eventClick: PropTypes.func,
+  blockedDays: PropTypes.array,
+  slotDuration: PropTypes.number,
+  blockedEvents: PropTypes.array,
+  onFilteredAppointmentsChange: PropTypes.func,
+  appointmentResponse: PropTypes.array,
+  handleDateClick: PropTypes.func,
+  setIsFilterDrawerOpen: PropTypes.func,
+  handleDateRangeChange: PropTypes.func,
+};
+
+export default CustomFullCalendar;

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

@@ -0,0 +1,126 @@
+import React, { useEffect, useRef } from 'react';
+import { styled } from '@mui/material/styles';
+import TableContainer from '@mui/material/TableContainer';
+import { Paper, Box, CircularProgress } from '@mui/material';
+import PropTypes from 'prop-types';
+import { throttle } from 'lodash';
+
+const StyledTableContainer = styled(TableContainer)(() => ({
+  borderRadius: '3px 3px 0 0',
+  '&::-webkit-scrollbar': {
+    width: '50px',
+  },
+  scrollbarWidth: 'thin',
+}));
+
+const CustomInfiniteScroll = ({
+  renderTableBody,
+  loadMore,
+  hasMore,
+  customHeight = null,
+  scrollToTop = false,
+  setScrollToTop = () => { },
+}) => {
+  const scrollParentRef = useRef(null); // Ref for scroll container
+
+  useEffect(() => {
+    if (scrollToTop && scrollParentRef.current) {
+      scrollParentRef.current.scrollTop = 0;
+      setScrollToTop(false);
+    }
+  }, [scrollToTop, scrollParentRef]);
+
+  const [loading, setLoading] = React.useState(false);
+
+  const triggerLoadMore = async () => {
+    try {
+      setLoading(true);
+      // Ensure loader is visible by scrolling to bottom
+      setTimeout(() => {
+        if (scrollParentRef.current) {
+          scrollParentRef.current.scrollTop = scrollParentRef.current.scrollHeight;
+        }
+      }, 50);
+      await new Promise((resolve) => setTimeout(resolve, 500));
+      await loadMore();
+      setLoading(false);
+    } catch (error) {
+      console.error(error);
+      setLoading(false);
+    }
+  }
+
+  const checkAndLoadIfNotScrollable = async () => {
+    const container = scrollParentRef.current;
+    if (container && container.scrollHeight <= container.clientHeight && hasMore && !loading) {
+      triggerLoadMore();
+    }
+  };
+
+  const handleScroll = throttle(async () => {
+    if (!hasMore || loading) return;
+    const container = scrollParentRef.current;
+    if (container) {
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      if (scrollTop + clientHeight >= scrollHeight - 10) {
+        // Trigger loadMore if the user scrolls near the bottom
+        triggerLoadMore();
+      }
+    }
+  }, 200);
+
+  useEffect(() => {
+    const container = scrollParentRef.current;
+    if (container) {
+      setTimeout(() => {
+        container.addEventListener('scroll', handleScroll);
+        checkAndLoadIfNotScrollable();
+      }, 500);
+    }
+    return () => {
+      if (container) {
+        container.removeEventListener('scroll', handleScroll);
+        hasMore = null;
+        // setLoading(false);
+      }
+    };
+  }, [loading, hasMore]); // Re-run if `loading` or `hasMore` changes
+
+  return (
+    <StyledTableContainer
+      component={Paper}
+      style={{ position: 'relative', overflow: 'auto' }}
+      sx={{ maxHeight: customHeight ? `calc(100vh -  ${150 + customHeight}px)` : `calc(100vh - 150px)` }}
+      ref={scrollParentRef} // Attach the scroll ref
+    >
+      {renderTableBody()}
+      {loading && (
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            py: 2,
+            width: '100%',
+            backgroundColor: (theme) => (theme.palette.mode === 'dark' ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.8)'),
+            borderTop: '1px solid',
+            borderColor: 'divider',
+          }}
+        >
+          <CircularProgress size={24} thickness={4} />
+        </Box>
+      )}
+    </StyledTableContainer>
+  );
+};
+
+CustomInfiniteScroll.propTypes = {
+  renderTableBody: PropTypes.any,
+  loadMore: PropTypes.any,
+  hasMore: PropTypes.any,
+  customHeight: PropTypes.any,
+  scrollToTop: PropTypes.any,
+  setScrollToTop: PropTypes.any,
+};
+
+export default CustomInfiniteScroll;

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { FormControl, RadioGroup, FormControlLabel, Radio } from '@mui/material';
+import { Controller, get } from 'react-hook-form';
+import PropTypes from 'prop-types';
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+
+const CustomRadioGroup = ({ name, control, options, errors, direction = 'column', dataTestId, ...props }) => {
+  const error = get(errors, name);
+  const { translate } = useTranslateProvider();
+
+  return (
+    <FormControl component="fieldset" className='w-full'>
+      <Controller
+        name={name}
+        control={control}
+        {...props}
+        render={({ field }) => {
+          return (
+            <RadioGroup
+              {...field}
+              {...props}
+              data-testid={dataTestId}
+              value={field.value !== undefined ? String(field.value) : ''}
+              onChange={(e) => {
+                const value =
+                  e.target.value === 'true' ? true : (() => (e.target.value === 'false' ? false : e.target.value))();
+                field.onChange(value);
+              }}
+              sx={{ flexDirection: direction }}
+            >
+              {options.map((option) => (
+                <FormControlLabel
+                  {...field}
+                  {...props}
+                  key={option.value}
+                  value={String(option.value)} // Ensure the value is a string
+                  control={<Radio />}
+                  label={translate(option.label)}
+                  sx={{
+                    '& .MuiFormControlLabel-label': {
+                      fontSize: '14px',
+                    },
+                  }}
+                  data-testid={`${dataTestId}-${String(option.label)}`}
+                />
+              ))}
+            </RadioGroup>
+          );
+        }}
+      />
+      {error && <p className="error-helper-text">{error?.message}</p>}
+    </FormControl>
+  );
+};
+
+CustomRadioGroup.propTypes = {
+  name: PropTypes.any,
+  control: PropTypes.any,
+  options: PropTypes.any,
+  errors: PropTypes.any,
+  direction: PropTypes.any,
+  dataTestId: PropTypes.any,
+};
+
+export default CustomRadioGroup;