@argusoft/medplat-app-shell 1.0.6 → 1.0.7

package/src/views/feature-components/Skeletons.js

@@ -0,0 +1,115 @@
+// Centralized exports for all skeleton components
+
+import RolesSkeleton from '@/views/feature-components/Roles/RolesSkeleton.jsx';
+import {
+  ReportListSkeleton,
+  ManageGroupSkeleton,
+  ReportConfigSkeleton,
+} from '@/views/feature-components/reports/ReportsSkeleton';
+import { FeatureMenuSkeleton, ManageFeatureSkeleton } from '@/views/feature-components/Features/FeatureSkeletons';
+import { ManageUserSkeleton, UserListSkeleton } from '@/views/feature-components/users/UserListSkeleton.jsx';
+import {
+  LocationTypeSkeleton,
+  ManageLocationTypeSkeleton,
+} from '@/views/feature-components/LocationType/LocationTypeSkeleton';
+import {
+  LocationListSkeleton,
+  LocationConfigSkeleton,
+} from '@/views/feature-components/Locations/LocationListSkeleton';
+import { QueryBuilderSkeleton } from '@/views/feature-components/QueryBuilder/QueryBuilderSkeleton';
+import { NotificationListSkeleton } from '@/views/feature-components/Notification/NotificationsSkeletons';
+import { QueryManagementSkeleton } from '@/views/feature-components/QueryManagement/QueryManagementSkeleton';
+import { ManageTranslationSkeleton } from '@/views/feature-components/ManageTranslation/ManageTranslationSkeleton.jsx';
+import {
+  ImmunizationConfigurationsListSkeleton,
+  ManageImmunizationSkeleton,
+} from '@/views/feature-components/Immunization/ImmunizationSkeleton';
+import {
+  EventConfigurationSkeleton,
+  ManageEventConfigurationSkeleton,
+} from '@/views/feature-components/events/EventsSkeleton';
+
+import CommandAndControlCenterSkeleton from '@/views/feature-components/CommandAndControlCenter/CommandAndControlCenterSkeleton';
+import {
+  ManageTrainingScheduleSkeleton,
+  TrainingDashboardDetailsSkeleton,
+  TrainingDashboardSkeleton,
+  TrainingScheduleListSkeleton,
+} from '@/views/feature-components/TrainingSchedule/TrainingSkeletons';
+import { PlaceOfServiceDeliverySkeleton } from '@/views/feature-components/PlaceOfServiceDelivery/PlaceOfServiceDeliverySkeleton';
+import { TraineeStatusSkeleton } from '@/views/feature-components/TraineeStatus/TraineeStatusSkeleton';
+import { LmsSkeleton } from '@/views/feature-components/Lms-Dashboard/LmsSkeleton';
+import { CourseListSkeleton, ManageCourseSkeleton } from '@/views/feature-components/Course/CourseSkeletons';
+import {
+  ManageQuestionConfigurationSkeleton,
+  QuestionSetFormSkeleton,
+} from '@/views/feature-components/questionSet/QuestionSetFormSkeleton';
+import {
+  ElementConfigurationSkeleton,
+  SohChartConfigurationSkeleton,
+  SohElementConfigurationSkeleton,
+  SohElementModuleConfigurationSkeleton,
+} from '@/views/feature-components/ElementConfiguration/ElementConfigurationSkeletons';
+import { WidgetListSkeleton } from '@/views/feature-components/widget/WidgetListSkeleton';
+import { FaqListSkeleton } from '@/views/feature-components/Faq/FaqSkeletons';
+import GVKAbsentVerificationSkeleton from '@/views/feature-components/CallCenterVerifcation/GVKAbsentVerificationSkeleton.jsx';
+import GVKCbacScreeningVerificationSkeleton from '@/views/feature-components/CallCenterVerifcation/GVKCbacScreeningVerificationSkeleton.jsx';
+import GVKDuplicateMemberVerificationSkeleton from '@/views/feature-components/CallCenterVerifcation/GVKDuplicateMemberVerificationSkeleton.jsx';
+import GVKFamilyEligibleCounselingSkeleton from '@/views/feature-components/CallCenterVerifcation/GVKFamilyEligibleCounselingSkeleton.jsx';
+import GVKMembersMigrationInSkeleton from '@/views/feature-components/CallCenterVerifcation/GVKMembersMigrationInSkeleton.jsx';
+import GVKNcdScreeningVerificationSkeleton from '@/views/feature-components/CallCenterVerifcation/GVKNcdScreeningVerificationSkeleton.jsx';import AvailabilitySkeleton from '@/views/feature-components/TeleCommunication/AvailabilitySkeleton';
+import AllAppointmentViewSkeleton from '@/views/feature-components/TeleCommunication/AllAppointmentViewSkeleton';
+import AppointmentCalendarDetailSkeleton from '@/views/feature-components/TeleCommunication/AppointmentCalendarDetailSkeleton';
+import MyRoomSkeleton from '@/views/feature-components/TeleCommunication/MyRoomSkeleton';
+
+// Export all skeletons as named exports
+export {
+  RolesSkeleton,
+  ReportListSkeleton,
+  ManageGroupSkeleton,
+  ReportConfigSkeleton,
+  FeatureMenuSkeleton,
+  ManageFeatureSkeleton,
+  ManageUserSkeleton,
+  UserListSkeleton,
+  LocationTypeSkeleton,
+  ManageLocationTypeSkeleton,
+  LocationListSkeleton,
+  LocationConfigSkeleton,
+  QueryBuilderSkeleton,
+  NotificationListSkeleton,
+  QueryManagementSkeleton,
+  ManageTranslationSkeleton,
+  ImmunizationConfigurationsListSkeleton,
+  ManageImmunizationSkeleton,
+  EventConfigurationSkeleton,
+  ManageEventConfigurationSkeleton,
+  CommandAndControlCenterSkeleton,
+  ManageTrainingScheduleSkeleton,
+  TrainingDashboardDetailsSkeleton,
+  TrainingDashboardSkeleton,
+  TrainingScheduleListSkeleton,
+  PlaceOfServiceDeliverySkeleton,
+  TraineeStatusSkeleton,
+  LmsSkeleton,
+  CourseListSkeleton,
+  ManageCourseSkeleton,
+  ManageQuestionConfigurationSkeleton,
+  QuestionSetFormSkeleton,
+  ElementConfigurationSkeleton,
+  SohChartConfigurationSkeleton,
+  SohElementConfigurationSkeleton,
+  SohElementModuleConfigurationSkeleton,
+  WidgetListSkeleton,
+  FaqListSkeleton,
+  GVKNcdScreeningVerificationSkeleton,
+  GVKAbsentVerificationSkeleton,
+  GVKCbacScreeningVerificationSkeleton,
+  GVKDuplicateMemberVerificationSkeleton,
+  GVKMembersMigrationInSkeleton,
+  GVKFamilyEligibleCounselingSkeleton,
+  AvailabilitySkeleton,
+  AllAppointmentViewSkeleton,
+  AppointmentCalendarDetailSkeleton,
+  MyRoomSkeleton,
+};

package/src/views/feature-components/Unauthorized.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button, Typography, Box, Stack } from '@mui/material';
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faLock } from '@fortawesome/free-solid-svg-icons';
+
+/**
+ * @module Unauthorized
+ * @returns {JSX.element}
+ */
+const Unauthorized = () => {
+  const navigate = useNavigate();
+  const { translate } = useTranslateProvider();
+
+  const handleBackToHome = () => {
+    navigate('/ui/medplat/dashboard/webtasks');
+  };
+
+  return (
+    <Box
+      display="flex"
+      justifyContent="center"
+      alignItems="center"
+      minHeight="80vh"
+      bgcolor="background.default"
+      color="text.primary"
+      px={2}
+    >
+      <Stack spacing={3} alignItems="center" textAlign="center" maxWidth={400}>
+        <FontAwesomeIcon icon={faLock} className="text-[64px] text-[var(--color-error)]" />
+        <Typography variant="h4" fontWeight="bold" className="text-customBlue">
+          401 - Unauthorized
+        </Typography>
+        <Typography variant="body1" color="text.secondary">
+          You don’t have permission to access this page. Please log in or go back to the homepage.
+        </Typography>
+        <Stack direction="row" spacing={2}>
+          <Button variant="contained" onClick={handleBackToHome} className="mt-4">
+            {translate('Back to Home')}
+          </Button>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+};
+
+export default Unauthorized;

package/src/views/feature-components/VerifyRoute.jsx

@@ -0,0 +1,88 @@
+import { setHeaderTitle } from '@/store/reducers/AuthenticationReducer';
+import { setPageTitle } from '@/store/reducers/TranslationReducer';
+import PropTypes from 'prop-types';
+import { Suspense, useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
+import { redirectionObj } from '@/common/constants/app.constant';
+
+import GeneralUtil from '@/common/services/util/GeneralUtil';
+/**
+ * A route wrapper component that verifies user permissions before rendering the specified component.
+ * It checks if the user has access to the given URL and conditionally renders the passed component.
+ *
+ * @param {Object} props - The properties object.
+ * @param {string} props.url - The URL that requires verification to ensure the user has access.
+ * @param {JSX.Element} props.component - The component to render if verification passes.
+ *
+ * @returns {JSX.Element} The rendered component if verification passes, otherwise null or a redirect.
+ */
+
+export default function VerifyRoute({ url, component: Component, skeleton, pageTitle, headerTitle }) {
+  const dispatch = useDispatch();
+  const navigate = useNavigate();
+
+  const { user } = useSelector((state) => state.Authenticate);
+  const { linearMenuItems: menuItem } = useSelector((state) => state.Authenticate);
+  const [isPathInMenu, setIsPathInMenu] = useState(false);
+
+  useEffect(() => {
+    if (Object.prototype.hasOwnProperty.call(redirectionObj, window.location.origin)) {
+      if (!redirectionObj[window.location.origin].some((entry) => url.includes(entry))) {
+        GeneralUtil.angularRedirectionRouteMatch(user, navigate);
+      }
+    }
+  }, [url, navigate]);
+
+  /**
+   * Effect hook to validate the current URL path against the available menu items.
+   * @function useEffect
+   * @param {string} url - The current URL path to be validated.
+   * @param {Object} menuItem - An object containing valid menu items where keys represent valid paths.
+   * @param {function} navigate - A navigation function used to redirect the user in case of an invalid path.
+   * @returns {void} This function does not return anything, it performs navigation or sets a state.
+   */
+
+  useEffect(() => {
+    if (menuItem && url !== 'home') {
+      const normalizedStates = [url.replace(/^medplat\//, 'techo/').replace(/\//g, '.'), url.replace(/\//g, '.')];
+
+      const isPathValid = Object.keys(menuItem).some((item) => normalizedStates.some((state) => item.includes(state)));
+      if (!isPathValid) {
+        if (url === 'medplat/dashboard/webtasks') {
+          navigate('/ui/');
+        } else {
+          navigate('/ui/unauthorized');
+        }
+      } else {
+        if (pageTitle && pageTitle?.length > 0) {
+          dispatch(setPageTitle(pageTitle));
+        }
+        dispatch(setHeaderTitle(headerTitle ? headerTitle : 'Form'));
+        setIsPathInMenu(true);
+      }
+    }
+  }, [url, menuItem, navigate]);
+
+  // Only render when permission is confirmed or exception route
+  if (!(isPathInMenu || url === 'medplat/form')) return null;
+
+  // Lazy component (e.g., React.lazy(() => import(...)))
+  const isLazy = typeof Component === 'object' && Component?.$$typeof?.toString() === 'Symbol(react.lazy)';
+
+  return isLazy ? (
+    <Suspense fallback={skeleton || null}>
+      <Component />
+    </Suspense>
+  ) : (
+    menuItem && Component
+  );
+}
+
+VerifyRoute.propTypes = {
+  url: PropTypes.string.isRequired,
+  component: PropTypes.any,
+  skeleton: PropTypes.any,
+  pageTitle: PropTypes.any,
+  headerTitle: PropTypes.any,
+};

package/src/views/feature-components/YearlyRecap/YearlyRecap.jsx

@@ -0,0 +1,357 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { Box } from '@mui/material';
+import { useParams } from 'react-router-dom';
+import { I18nextProvider } from 'react-i18next';
+import IntroSlide from './slides/IntroSlide';
+import ReachSlide from './slides/ReachSlide';
+import MaternalHealthSlide from './slides/MaternalHealthSlide';
+import MetricSlide from './slides/MetricSlide';
+import OutroSlide from './slides/OutroSlide';
+
+import { getRecapDetails, createOrUpdateRecapAnalytics } from '@/common/services/GlobalApis';
+
+import { useSelector } from 'react-redux';
+import { initializeI18n } from './languageTranslator/i18n';
+import TranslationProvider from './languageTranslator/TranslationProvider';
+import { v4 as uuidv4 } from 'uuid';
+import APP_CONFIG from '@/common/constants/app.constant';
+import GeneralUtil from '@/common/services/util/GeneralUtil';
+
+/* ---------- STATIC METRIC CONFIG ---------- */
+
+const METRICS_CONFIG = [
+  {
+    key: 'anc',
+    title: 'Antenatal Care',
+    label: 'ANC Visits Completed',
+    color: '#E91E63',
+    animation: 'pulse',
+  },
+  {
+    key: 'immunisation',
+    title: 'Immunisation Services',
+    label: 'Vaccinations Provided',
+    color: '#4CAF50',
+    animation: 'pulse',
+  },
+  {
+    key: 'pnc',
+    title: 'Postnatal Care',
+    label: 'Postnatal Home Visits Completed',
+    color: '#2196F3',
+    animation: 'pulse',
+  },
+  {
+    key: 'child',
+    title: 'Child Health',
+    label: 'Child Service Provided',
+    color: '#8BC34A',
+    animation: 'pulse',
+  },
+  {
+    key: 'npcb',
+    title: 'NPCB',
+    label: 'NPCB Screenings Done',
+    color: '#E67E22',
+    animation: 'pulse',
+  },
+  {
+    key: 'cbac',
+    title: 'CBAC',
+    label: 'CBAC Forms Filled',
+    color: '#9C27B0',
+    animation: 'pulse',
+  },
+  {
+    key: 'ncd',
+    title: 'NCD',
+    label: 'NCD Screenings Done',
+    color: '#009688',
+    animation: 'pulse',
+  },
+  {
+    key: 'abha',
+    title: 'ABHA',
+    label: 'ABHA Incentives Given',
+    color: '#3F51B5',
+    animation: 'pulse',
+  },
+];
+
+/* ---------- FIELD MAP ---------- */
+
+const METRIC_FIELD_MAP = {
+  anc: {
+    count: 'ancServicesProvided',
+    percentile: 'ancServicesTopPct',
+  },
+  immunisation: {
+    count: 'immunisationServicesProvided',
+    percentile: 'immunisationServicesTopPct',
+  },
+  pnc: {
+    count: 'pncServicesProvided',
+    percentile: 'pncServicesTopPct',
+  },
+  child: {
+    count: 'csProvided',
+    percentile: 'csServicesTopPct',
+  },
+  npcb: {
+    count: 'npcbServicesProvided',
+    percentile: 'npcbServicesTopPct',
+  },
+  cbac: {
+    count: 'cbacServicesProvided',
+    percentile: 'cbacServicesTopPct',
+  },
+  ncd: {
+    count: 'ncdServicesProvided',
+    percentile: 'ncdServicesTopPct',
+  },
+  abha: {
+    count: 'abhaServicesProvided',
+    percentile: 'abhaServicesTopPct',
+  },
+};
+
+const YearlyRecap = () => {
+  const { userId } = useParams();
+  const containerRef = useRef(null);
+  const translations = useSelector((state) => state.Translation);
+  const [i18nInstance, setI18nInstance] = useState(null);
+  const [currentSlide, setCurrentSlide] = useState(0);
+  const [summaryDetails, setSummaryDetails] = useState(null);
+  const [sessionId] = useState(() => {
+    const sid = sessionStorage.getItem('recap_session_id') || uuidv4();
+    sessionStorage.setItem('recap_session_id', sid);
+    return sid;
+  });
+  const trackEvent = (type, lang) => {
+    if (type === 'START') {
+      const payload = {
+        path: window.location.pathname,
+        userId: Number(userId),
+        sessionId: sessionId,
+        userAgent: navigator.userAgent,
+        preferredLanguage: lang || 'en',
+        startTime: new Date().toISOString(),
+      };
+      createOrUpdateRecapAnalytics(payload).catch((err) => console.error('Failed to track start:', err));
+    } else {
+      const payload = {
+        sessionId: sessionId,
+        endTime: new Date().toISOString(),
+      };
+      const url = `${APP_CONFIG.apiPath}/recap/createOrUpdateRecapAnalytics`;
+
+      // navigator.sendBeacon doesn't support headers (Authorization)
+      // fetch with keepalive: true is the modern replacement
+      const tokenString = localStorage.getItem('token');
+      const token = tokenString ? JSON.parse(tokenString) : null;
+
+      fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: token ? `Bearer ${token.access_token}` : '',
+        },
+        body: JSON.stringify(payload),
+        keepalive: true,
+      }).catch((err) => console.error('Failed to track end:', err));
+    }
+  };
+
+  /* ---------- DATA FETCH ---------- */
+
+  const getSummaryDetails = async () => {
+    try {
+      const res = await getRecapDetails(Number(userId));
+      const data = res.data;
+
+      // Filter metrics based on env
+      let allowedMetrics = ['anc', 'immunisation', 'pnc', 'child'];
+      if (GeneralUtil.isEkavach) {
+        allowedMetrics = [...allowedMetrics, 'cbac', 'ncd', 'abha'];
+      } else if (GeneralUtil.isTecho) {
+        allowedMetrics = [...allowedMetrics, 'npcb'];
+      }
+
+      // enrich metrics
+      data.metrics = allowedMetrics
+        .map((key) => {
+          const fields = METRIC_FIELD_MAP[key];
+          const meta = METRICS_CONFIG.find((m) => m.key === key);
+
+          if (!fields || !meta) return null;
+
+          return {
+            key,
+            title: meta.title,
+            label: meta.label,
+            color: meta.color,
+            animation: meta.animation,
+            count: Number(data[fields.count]) || 0,
+            percentile: data[fields.percentile] !== null ? Number(data[fields.percentile]) : null,
+          };
+        })
+        .filter(Boolean);
+
+      setSummaryDetails(data);
+      trackEvent('START', data.preferedLanguage);
+    } catch {
+      setSummaryDetails(null);
+    }
+  };
+
+  useEffect(() => {
+    getSummaryDetails();
+
+    let trackedEnd = false;
+    const handleEnd = () => {
+      if (!trackedEnd) {
+        trackEvent('END');
+        trackedEnd = true;
+      }
+    };
+
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'hidden') {
+        handleEnd();
+      }
+    };
+
+    window.addEventListener('visibilitychange', handleVisibilityChange);
+    window.addEventListener('pagehide', handleEnd);
+
+    return () => {
+      handleEnd();
+      window.removeEventListener('visibilitychange', handleVisibilityChange);
+      window.removeEventListener('pagehide', handleEnd);
+    };
+  }, [userId]);
+
+  useEffect(() => {
+    if (translations && summaryDetails) {
+      let preferredLanguage;
+
+      if (GeneralUtil.isEkavach) {
+        preferredLanguage = summaryDetails.preferedLanguage?.toLowerCase() === 'gu' ? 'hi' : 'en';
+      } else {
+        preferredLanguage = summaryDetails.preferedLanguage?.toLowerCase() || translations.translationLanguage || 'en';
+      }
+
+      const i18n = initializeI18n(translations?.translations, preferredLanguage);
+      setI18nInstance(i18n);
+    }
+  }, [translations, summaryDetails]);
+
+  if (!i18nInstance) {
+    return null;
+  }
+
+  /* ---------- FILTERED METRICS ---------- */
+
+  if (!summaryDetails) {
+    return <Box sx={{ height: '100vh', width: '100vw', bgcolor: '#fff' }} />;
+  }
+
+  const visibleMetrics = summaryDetails.metrics.filter((m) => Number(m.count) > 0);
+
+  // Intro + Reach + Maternal + Metrics + Outro
+  const totalSlides = 3 + visibleMetrics.length + 1;
+
+  /* ---------- SCROLL HELPERS ---------- */
+
+  const scrollToSlide = (index) => {
+    if (!containerRef.current) return;
+
+    const width = containerRef.current.clientWidth;
+    containerRef.current.scrollTo({
+      left: width * index,
+      behavior: 'smooth',
+    });
+    setCurrentSlide(index);
+  };
+
+  const handleNext = () => {
+    if (currentSlide < totalSlides - 1) {
+      scrollToSlide(currentSlide + 1);
+    }
+  };
+
+  const handlePrev = () => {
+    if (currentSlide > 0) {
+      scrollToSlide(currentSlide - 1);
+    }
+  };
+
+  return (
+    <I18nextProvider i18n={i18nInstance}>
+      <TranslationProvider>
+        <Box
+          ref={containerRef}
+          sx={{
+            width: '100vw',
+            height: '100vh',
+            display: 'flex',
+            overflowX: 'auto',
+            overflowY: 'hidden',
+            scrollSnapType: 'x mandatory',
+            bgcolor: '#fff',
+            '&::-webkit-scrollbar': { display: 'none' },
+          }}
+          onScroll={(e) => {
+            const index = Math.round(e.target.scrollLeft / window.innerWidth);
+            if (index !== currentSlide) setCurrentSlide(index);
+          }}
+        >
+          {/* Intro */}
+          <Box sx={{ minWidth: '100vw', scrollSnapAlign: 'start' }}>
+            <IntroSlide data={summaryDetails} onNext={handleNext} showPrev={false} isActive={currentSlide === 0} />
+          </Box>
+
+          {/* Reach */}
+          <Box sx={{ minWidth: '100vw', scrollSnapAlign: 'start' }}>
+            <ReachSlide data={summaryDetails} onNext={handleNext} onPrev={handlePrev} isActive={currentSlide === 1} />
+          </Box>
+
+          {/* Maternal */}
+          <Box sx={{ minWidth: '100vw', scrollSnapAlign: 'start' }}>
+            <MaternalHealthSlide
+              data={summaryDetails}
+              onNext={handleNext}
+              onPrev={handlePrev}
+              isActive={currentSlide === 2}
+            />
+          </Box>
+
+          {/* Metrics */}
+          {visibleMetrics.map((metric, index) => (
+            <Box key={metric.key} sx={{ minWidth: '100vw', scrollSnapAlign: 'start' }}>
+              <MetricSlide
+                title={metric.title}
+                count={metric.count}
+                label={metric.label}
+                percentile={metric.percentile}
+                color={metric.color}
+                animation={metric.animation}
+                onNext={handleNext}
+                onPrev={handlePrev}
+                isActive={currentSlide === 3 + index}
+                iconKey={metric.key}
+              />
+            </Box>
+          ))}
+
+          {/* Outro */}
+          <Box sx={{ minWidth: '100vw', scrollSnapAlign: 'start' }}>
+            <OutroSlide data={summaryDetails} onPrev={handlePrev} isActive={currentSlide === totalSlides - 1} />
+          </Box>
+        </Box>
+      </TranslationProvider>
+    </I18nextProvider>
+  );
+};
+
+export default YearlyRecap;