Merge pull request #292 from suvarnakale/shiksha-2.0

Issue #PS-874 feat: Implentation of Guide tour

package.json

@@ -35,6 +35,7 @@
     "react-circular-progressbar": "^2.1.0",
     "react-dom": "^18",
     "react-ga4": "^2.1.0",
+    "react-joyride": "^2.8.2",
     "react-toastify": "^10.0.5",
     "sharp": "^0.33.3"
   },

public/locales/en/common.json

@@ -182,5 +182,17 @@
     "MOBILISATION_METHOD": "How Was the Learner Mobilized?",
     "MONTH_MOBILISATION": "Month of Mobilisation",
     "DROP_OUT_REASON": "Reason for Drop Out From School"
+  },
+  "GUIDE_TOUR": {
+    "STEP_1": "Welcome! let’s get you familiar with the dashboard",
+    "STEP_2": "Use the calendar to view day-wise attendance of learners",
+    "STEP_3": "Check daily attendance percentage for each Center",
+    "STEP_4": "Mark each day’s attendance of learners",
+    "STEP_5": "Check Center attendance over the last 7 days",
+    "STEP_6": "View learners with low attendance in the past 7 days",
+    "PREVIOUS": "Previous",
+    "NEXT": "Next",
+    "SKIP": "Skip",
+    "FINISH": "Finish"
   }
 }

public/locales/hi/common.json

@@ -181,5 +181,17 @@
     "MOBILISATION_METHOD": "शिक्षार्थी को कैसे जोड़ा गया?",
     "MONTH_MOBILISATION": "जोड़ने का महीना",
     "DROP_OUT_REASON": "स्कूल छोड़ने का कारण"
+  },
+  "GUIDE_TOUR": {
+    "STEP_1": "स्वागत है! आइए आपको डैशबोर्ड से परिचित कराते हैं",
+    "STEP_2": "शिक्षार्थियों की दिन-वार उपस्थिति देखने के लिए कैलेंडर का उपयोग करें",
+    "STEP_3": "प्रत्येक केंद्र के लिए दैनिक उपस्थिति प्रतिशत की जाँच करें",
+    "STEP_4": "शिक्षार्थियों की प्रत्येक दिन की उपस्थिति को चिह्नित करें",
+    "STEP_5": "पिछले 7 दिनों में केंद्र की उपस्थिति की जाँच करें",
+    "STEP_6": "पिछले 7 दिनों में कम उपस्थिति वाले शिक्षार्थियों को देखें",
+    "PREVIOUS": "पिछला",
+    "NEXT": "अगला",
+    "SKIP": "छोड़ें",
+    "FINISH": "समाप्त"
   }
 }

public/locales/mr/common.json

@@ -181,5 +181,17 @@
     "MOBILISATION_METHOD": "शिकणाऱ्याला कसे एकत्रित केले गेले?",
     "MONTH_MOBILISATION": "एकत्रीकरणाचा महिना",
     "DROP_OUT_REASON": "शाळा सोडण्याचे कारण"
+  },
+  "GUIDE_TOUR": {
+    "STEP_1": "स्वागत आहे! चला तुम्हाला डॅशबोर्डशी परिचित करून देतो",
+    "STEP_2": "शिक्षार्थ्यांची दिवसवार उपस्थिती पाहण्यासाठी कॅलेंडर वापरा",
+    "STEP_3": "प्रत्येक केंद्रासाठी दैनंदिन उपस्थिती टक्केवारी तपासा",
+    "STEP_4": "शिक्षार्थ्यांची प्रत्येक दिवसाची उपस्थिती चिन्हांकित करा",
+    "STEP_5": "शेवटच्या 7 दिवसांत केंद्राची उपस्थिती तपासा",
+    "STEP_6": "शेवटच्या 7 दिवसांत कमी उपस्थिती असलेले शिक्षार्थी पहा",
+    "PREVIOUS": "मागील",
+    "NEXT": "पुढे",
+    "SKIP": "वगळा",
+    "FINISH": "पूर्ण"
   }
 }

src/components/GuideTour.tsx

@@ -0,0 +1,123 @@
+import React, { useEffect, useState } from 'react';
+import Joyride from 'react-joyride';
+import { getSteps } from '../utils/tourGuideSteps';
+import { useTheme } from '@mui/material/styles';
+import { useTranslation } from 'next-i18next';
+import { logEvent } from '@/utils/googleAnalytics';
+
+interface JoyrideCallbackData {
+  action: string;
+  index: number;
+  type: string;
+  status: string;
+}
+
+const GuideTour = () => {
+  const theme = useTheme<any>();
+  const { t } = useTranslation();
+  const steps = getSteps(t);
+  const totalSteps = steps.length;
+  const [runTour, setRunTour] = useState(true);
+  const [stepIndex, setStepIndex] = useState(1);
+
+  useEffect(() => {
+    setRunTour(true);
+    setStepIndex(stepIndex);
+    const hasSeenTutorial = localStorage.getItem('hasSeenTutorial');
+
+    setRunTour(!hasSeenTutorial);
+  }, []);
+
+  const handleTourEnd = () => {
+    if (typeof window !== 'undefined' && window.localStorage) {
+      localStorage.setItem('hasSeenTutorial', 'true');
+    }
+  };
+
+  const handleJoyrideCallback = (data: JoyrideCallbackData) => {
+    const { action, index, type, status } = data;
+
+    if (status === 'finished' || status === 'skipped') {
+      setRunTour(false);
+      handleTourEnd();
+      logEvent({
+        action: 'skip-guide-tour/finished-guide-tour',
+        category: 'Dashboard Page',
+        label: 'Skip/ Finish Button Click',
+      });
+    } else if (type === 'step:after' || type === 'tour:start') {
+      if (action === 'next') {
+        setStepIndex((prevIndex) => prevIndex + 1);
+        logEvent({
+          action: 'next-button-clicked',
+          category: 'Dashboard Page',
+          label: 'Next Button Click',
+        });
+      } else if (action === 'prev') {
+        setStepIndex((prevIndex) => prevIndex - 1);
+        logEvent({
+          action: 'previous-button-clicked',
+          category: 'Dashboard Page',
+          label: 'Previous Button Click',
+        });
+      }
+    }
+  };
+
+  return (
+    <>
+      {runTour && (
+        <Joyride
+          steps={getSteps(t)}
+          run={runTour}
+          stepIndex={stepIndex}
+          showSkipButton={true}
+          continuous={true}
+          styles={{
+            options: {
+              arrowColor: theme?.palette?.warning['A400'],
+              backgroundColor: theme?.palette?.warning['A400'],
+              overlayColor: 'rgba(0, 0, 0, 0.5)',
+              primaryColor: theme?.palette?.primary?.main,
+              textColor: theme?.palette?.warning['400'],
+              width: 350,
+              zIndex: 1000,
+            },
+            tooltipContent: {
+              fontWeight: 500,
+            },
+            buttonNext: {
+              padding: '0.5rem 1rem',
+              backgroundColor: theme?.palette?.primary?.main,
+              borderRadius: '5rem',
+              color: theme?.palette?.warning['100'],
+              border: '1px solid #FDBE16',
+            },
+            buttonBack: {
+              padding: '0.5rem 1rem',
+              borderRadius: '5rem',
+              color:
+                stepIndex === 1
+                  ? 'transparent'
+                  : theme?.palette?.warning['100'],
+              border: stepIndex === 1 ? 'none' : '1px solid black',
+            },
+            buttonSkip: {
+              padding: '0.5rem 1rem',
+              color: theme?.palette?.info?.main,
+            },
+          }}
+          callback={handleJoyrideCallback}
+          locale={{
+            back: stepIndex === 1 ? '' : t('GUIDE_TOUR.PREVIOUS'),
+            last: t('GUIDE_TOUR.FINISH'),
+            next: `${t('GUIDE_TOUR.NEXT')} (${stepIndex}/${totalSteps - 1})`,
+            skip: t('GUIDE_TOUR.SKIP'),
+          }}
+        />
+      )}
+    </>
+  );
+};
+
+export default GuideTour;

src/components/Header.tsx

@@ -113,14 +113,21 @@ const Header: React.FC = () => {
   }, []);
 
   const [language, setLanguage] = React.useState(selectedLanguage);
+  let hasSeenTutorial = false;
+  if (typeof window !== 'undefined' && window.localStorage) {
+    const storedValue = localStorage.getItem('hasSeenTutorial');
+    if (storedValue !== null) {
+      hasSeenTutorial = storedValue === 'true'; // Convert string 'true' or 'false' to boolean
+    }
+  }
 
   return (
     <Box sx={{ marginBottom: '4rem' }}>
       <Box
         sx={{
           display: 'flex',
           justifyContent: 'center',
-          position: 'fixed',
+          position: hasSeenTutorial ? 'fixed' : 'relative',
           top: '0px',
           zIndex: '999',
           width: '100%',

src/components/MonthCalender.tsx

@@ -87,7 +87,9 @@ const MonthCalender: React.FC<CalendarWithAttendanceProps> = ({
         if (moveDate && selectedDates) {
           const [startDate] = selectedDates;
           setSelectedDates([startDate, moveDate]);
-          onDateChange([startDate, moveDate]);
+          if (startDate !== null) {
+            onDateChange([startDate, moveDate]);
+          }
         }
       }
     };
@@ -100,7 +102,9 @@ const MonthCalender: React.FC<CalendarWithAttendanceProps> = ({
         if (endDate && selectedDates) {
           const [startDate] = selectedDates;
           setSelectedDates([startDate, endDate]);
-          onDateChange([startDate, endDate]);
+          if (startDate !== null) {
+            onDateChange([startDate, endDate]);
+          }
         }
       }
     };
@@ -252,8 +256,16 @@ const MonthCalender: React.FC<CalendarWithAttendanceProps> = ({
       return `${year}-${month}-${day}`;
     };
     setDate(newDate);
-    setSelectedDates(Array.isArray(newDate) ? newDate : [newDate, newDate]);
-    onDateChange(newDate);
+    if (newDate !== undefined) {
+      let datesToSet: [Date | null, Date | null];
+      if (Array.isArray(newDate)) {
+        datesToSet = [newDate[0] || null, newDate[1] || null];
+      } else {
+        datesToSet = [newDate || null, newDate || null];
+      }
+      setSelectedDates(datesToSet);
+    }
+    onDateChange(newDate as Date | Date[] | null);
 
     if (newDate === null) {
       setDate(null);