Merge pull request #365 from AkshataKatwal16/reassign-cohorts

Issue feat: Add filter by entity  and sorting for observations

public/locales/en/common.json

@@ -136,7 +136,9 @@
     "CENTER": "Center",
     "AND_COUNT_MORE": "and {{count}} more",
     "RETURN_TO_LOGIN": "Return to Login",
-    "NO_CENTER_FOUND": "No Center found"
+    "NO_CENTER_FOUND": "No Center found",
+    "FILTER_BY":"Filter By",
+    "ALL":"All"
   },
   "LOGIN_PAGE": {
     "USERNAME": "Username",
@@ -600,7 +602,13 @@
     "NOT_STARTED":"Not Started",
     "COMPLETED":"Completed",
     "INPROGRESS":"In-Progress",
-    "NO_DATA_FOUND":"No {{entity}} found"
+    "NO_DATA_FOUND":"No {{entity}} found",
+    "NO_RESULT_FOUND":"No Observations found for {{entity}}",
+    "NO_OBSERVATION_EXPIRED":"No observation expired for {{entity}}",
+    "DAYS_LEFT":"Days left",
+    "THIS_OBSERVATION_EXPIRED":"This observation is expired"
+
+
 }
 
 }

src/components/FilterSelect.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { FormControl, InputLabel, Select, MenuItem, SelectChangeEvent } from '@mui/material';
+
+interface FilterSelectProps {
+  menuItems: { value: string; label: string }[];
+  selectedOption: string;
+  handleFilterChange: (event: SelectChangeEvent) => void;
+  label: string;
+  sx?: object;
+}
+
+const FilterSelect: React.FC<FilterSelectProps> = ({
+  menuItems,
+  selectedOption,
+  handleFilterChange,
+  label,
+  sx = {}
+}) => {
+  return (
+    <FormControl sx={{ minWidth: 200, marginLeft: "20px", backgroundColor: "#F0F0F0", ...sx }} variant="outlined" margin="normal">
+      <InputLabel id="filter-label">{label}</InputLabel>
+      <Select
+        labelId="filter-label"
+        value={selectedOption}
+        onChange={handleFilterChange}
+        label={label}
+      >
+        {menuItems.map((item) => (
+          <MenuItem key={item.value} value={item.value}>
+            {item.label}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+};
+
+export default FilterSelect;

src/components/ObservationCard.tsx

@@ -1,7 +1,9 @@
-import { Box, Typography, Card, CardContent } from '@mui/material';
+import { Box, Typography, Card, CardContent, Tooltip } from '@mui/material';
 import React, { useEffect, useState } from 'react';
 import AssignmentOutlinedIcon from '@mui/icons-material/AssignmentOutlined';
 import { formatEndDate } from '@/utils/Helper';
+import { useTranslation } from 'react-i18next';
+import { LeftDays } from '@/utils/app.constant';
 
 interface ObservationCardProp {
   name?: string;
@@ -20,34 +22,44 @@ const ObservationCard: React.FC<ObservationCardProp> = ({
   startDate,
   endDate
 }) => {
-  const [remainingDays, setRemainingDays] = useState<string>("");
+  const [remainingDays, setRemainingDays] = useState<any>();
   const [remainingTimes, setRemainingTimes] = useState<any>();
+  const { t } = useTranslation();
 
 
   useEffect(() => {
     const today = new Date(); 
-    console.log("endDate", endDate)
-    if(endDate)
-    {
+
+    if (endDate) {
       const targetDate = new Date(endDate.toString()); 
-       console.log("targetDate", targetDate)
-      const diffTime = Math.abs(targetDate?.getTime() - today.getTime());
-      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-
-      setRemainingTimes(diffDays)
-      if(diffDays)
-      {
-
-        const remainingTime=formatEndDate({diffDays})
-        setRemainingDays(remainingTime)
-
+
+      // Calculate the difference in time
+      const diffTime = (targetDate.getTime() - today.getTime());
 
+      const diffDays = Math.ceil(diffTime / LeftDays.ONE_DAY_IN_MILLISECONDS);
+
+      // Update remaining times and days
+      setRemainingTimes(diffDays);
+
+      if (diffDays > 0) {
+        const remainingTime = formatEndDate({ diffDays });
+        console.log("remainingTime",typeof remainingTime)
+        setRemainingDays(remainingTime);
+
+      } else {
+        // If diffDays is 0 or negative, set the status to 'expired'
+        setRemainingDays(0);
+        setRemainingTimes(0)
       }
-
     }
-
-  }, [endDate]);
+  }, [endDate]); 
+
   return (
+    <Tooltip
+      title={remainingDays === 0 ? t('OBSERVATION.THIS_OBSERVATION_EXPIRED') : ""} 
+      disableHoverListener={remainingDays !== 0} 
+      disableFocusListener={remainingDays !== 0} 
+    >
     <Card
       variant="outlined"
       sx={{
@@ -61,18 +73,18 @@ const ObservationCard: React.FC<ObservationCardProp> = ({
         },
         width: '300px',
         cursor: 'pointer',
-        background: 'linear-gradient(135deg, #fff9e6 0%, #faf2d6 100%)',
+        background: "#FEF8F2",
         borderRadius: '16px',
-        border: '1px solid #f0e68c',
+        border: '1px solid #D0C5B4',
         height: '200px', // Fixed height for all cards
         display: 'flex',
         flexDirection: 'column',
       }}
-      onClick={() => onCardClick?.(id || '')}
+      onClick={remainingDays===0?()=>{}:() => onCardClick?.(id || '')}
     >
       <Box display="flex" justifyContent="space-between" alignItems="center" flexGrow={1}>
         <CardContent sx={{ flexGrow: 1 }}>
-          <Box
+        {remainingDays!==0 && ( <Box
             sx={{
               width: '100px',
               padding: '4px 8px',
@@ -85,7 +97,8 @@ const ObservationCard: React.FC<ObservationCardProp> = ({
             <Typography color={remainingTimes<=5?"#BA1A1A":"#7A5900"}variant="h5">   
               {remainingDays} left
             </Typography>
-          </Box>
+
+          </Box>)}
 
           <Box display="flex" alignItems="center" mb={1} mt={1}>
             <Typography
@@ -137,6 +150,7 @@ const ObservationCard: React.FC<ObservationCardProp> = ({
         </CardContent>
       </Box>
     </Card>
+    </Tooltip>
   );
 };
 

src/components/Searchbar.tsx

@@ -10,6 +10,8 @@ import {
 import SearchIcon from '@mui/icons-material/Search';
 import ClearIcon from '@mui/icons-material/Clear';
 import { debounce } from '@/utils/Helper';
+import { Telemetry } from '@/utils/app.constant';
+import { telemetryFactory } from '@/utils/telemetry';
 
 export interface SearchBarProps {
   onSearch: (value: string) => void;
@@ -50,6 +52,25 @@ const SearchBar: React.FC<SearchBarProps> = ({
     {
 
       handleSearch(searchTerm);
+
+
+      const windowUrl = window.location.pathname;
+      const cleanedUrl = windowUrl.replace(/^\//, '');
+      const env = cleanedUrl.split("/")[0];
+console.log(env)
+      const telemetryInteract = {
+        context: {
+          env: env,
+          cdata: [],
+        },
+        edata: {
+          id: 'search-value:'+searchTerm,
+          type: Telemetry.SEARCH,
+          subtype: '',
+          pageid: cleanedUrl,
+        },
+      };
+      telemetryFactory.interact(telemetryInteract);
     }
 
   };

src/components/observations/ObservationComponent.tsx

@@ -9,6 +9,8 @@ import { mock } from 'node:test';
 import { showToastMessage } from '../Toastify';
 import { useTranslation } from 'react-i18next';
 import { useRouter } from 'next/router';
+import { Telemetry } from '@/utils/app.constant';
+import { telemetryFactory } from '@/utils/telemetry';
 
 
 
@@ -153,22 +155,59 @@ const ObservationComponent: React.FC<QuestionnaireAppProps> = ({ observationQues
            const response= await updateSubmission({submissionId, submissionData})
           if((event as CustomEvent).detail.status==="draft")
           {
+            showToastMessage( t('OBSERVATION.FORM_SAVED_SUCCESSFULLY'), 'success');
+
             t('OBSERVATION.FORM_SAVED_SUCCESSFULLY')
-            showToastMessage( t('OBSERVATION.FORM_SUBMIT_SUCCESSFULLY'), 'success');
            // window.history.back();
           //  router.push(
           //   `${localStorage.getItem('observationPath')}`
           // );
+          const windowUrl = window.location.pathname;
+          const cleanedUrl = windowUrl.replace(/^\//, '');
+          const telemetryInteract = {
+            context: {
+              env: 'observation',
+              cdata: [],
+            },
+            edata: {
+              id: 'save-observation-successfully',
+              type: Telemetry.CLICK,
+              subtype: '',
+              pageid: cleanedUrl,
+            },
+          };
+          telemetryFactory.interact(telemetryInteract);
 
           }
           else if((event as CustomEvent).detail.status==="submit")
           {
-            showToastMessage( t('OBSERVATION.FORM_SAVED_SUCCESSFULLY'), 'success');
+            showToastMessage( t('OBSERVATION.FORM_SUBMIT_SUCCESSFULLY'), 'success');
+
           //  window.history.back();
 
            router.push(
             `${localStorage.getItem('observationPath')}`
           );
+
+
+          const windowUrl = window.location.pathname;
+          const cleanedUrl = windowUrl.replace(/^\//, '');
+          const telemetryInteract = {
+            context: {
+              env: 'observation',
+              cdata: [],
+            },
+            edata: {
+              id: 'submit-observation-successfully',
+              type: Telemetry.CLICK,
+              subtype: '',
+              pageid: cleanedUrl,
+            },
+          };
+          telemetryFactory.interact(telemetryInteract);
+
+
+
           }
         };