Issue #PS-2413 feat: Integration of V1 Content Player in Teachers app

config.json

@@ -18,14 +18,14 @@
       "code": "or"
     }
   ],
-   "firebaseConfig": {
-   "apiKey": "process.env.NEXT_PUBLIC_FCM_API_KEY",
-   "authDomain": "backend-e99c8.firebaseapp.com",
-   "projectId": "backend-e99c8",
-   "storageBucket": "backend-e99c8.appspot.com",
-   "messagingSenderId": "839139131975",
-   "appId": "1:839139131975:web:90af50d01e2eb0f510e762",
-   "measurementId": "G-5237RSF3TC"
- },
- "vapidKey": "process.env.NEXT_PUBLIC_VAPID_KEY"
-}
+  "firebaseConfig": {
+    "apiKey": "AIzaSyCmhNz-HMkkf42QNmnf7pnZm49FP5g4INw",
+    "authDomain": "backend-e99c8.firebaseapp.com",
+    "projectId": "backend-e99c8",
+    "storageBucket": "backend-e99c8.appspot.com",
+    "messagingSenderId": "839139131975",
+    "appId": "1:839139131975:web:90af50d01e2eb0f510e762",
+    "measurementId": "G-5237RSF3TC"
+  },
+  "vapidKey": "BOZ_JkC62vr767LoC7APU26ZdGYW5htBkfqIEtsVX6zmE3Fi-XgcN_TggSaXKh5rGKcaa4vuQxaYiRPU2B955GI"
+}

firebase.js

@@ -6,7 +6,7 @@ const firebaseApp = initializeApp(config.firebaseConfig);
 let messaging;
 
 if (typeof window !== 'undefined') {
-  messaging = getMessaging(); 
+  messaging = getMessaging();
 }
 
 export const requestPermission = async () => {

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/AddFacilitator.tsx

@@ -305,7 +305,7 @@ const AddFacilitatorModal: React.FC<AddFacilitatorModalprops> = ({
                 id: 'facilitator-updated-success',
                 type: Telemetry.CLICK,
                 subtype: '',
-                pageid: 'cleanedUrl',
+                pageid: cleanedUrl
               },
             };
             telemetryFactory.interact(telemetryInteract);

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/Header.tsx

@@ -18,6 +18,7 @@ import { useTranslation } from 'next-i18next';
 import StyledMenu from './StyledMenu';
 import AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';
 import { useDirection } from '../hooks/useDirection';
+import useStore from '../store/store';
 
 interface HeaderProps {
   toggleDrawer?: (newOpen: boolean) => () => void;
@@ -34,6 +35,8 @@ const Header: React.FC<HeaderProps> = ({ toggleDrawer, openDrawer }) => {
   const { t } = useTranslation();
   const pathname = usePathname();
   const theme = useTheme<any>();
+  const store = useStore();
+  const isActiveYear = store.isActiveYearSelected;
 
   const [userId, setUserId] = useState<string>('');
   const [openMenu, setOpenMenu] = useState<boolean>(false);
@@ -170,7 +173,7 @@ const Header: React.FC<HeaderProps> = ({ toggleDrawer, openDrawer }) => {
             width={44}
             src={logoLight}
             alt="logo"
-            onClick={() => router.push('/dashboard')}
+            onClick={() => isActiveYear && router.push('/dashboard')}
             style={{ marginRight: isRTL ? '20px' : '0px' }}
           />
 

src/components/LearnersListItem.tsx

@@ -101,6 +101,7 @@ const LearnersListItem: React.FC<LearnerListProps> = ({
   const setCohortLearnerDeleteId = manageUserStore(
     (state) => state.setCohortLearnerDeleteId
   );
+  const isActiveYear = userStore.isActiveYearSelected;
 
   useEffect(() => {
     if (reloadState) {
@@ -625,7 +626,7 @@ const LearnersListItem: React.FC<LearnerListProps> = ({
                   )}
                 </Box>
               </Box>
-              <MoreVertIcon
+              {isActiveYear && <MoreVertIcon
                 onClick={(event) => {
                   isMobile
                     ? toggleDrawer('bottom', true)(event)
@@ -636,7 +637,7 @@ const LearnersListItem: React.FC<LearnerListProps> = ({
                   color: theme.palette.warning['300'],
                   cursor: 'pointer',
                 }}
-              />
+              />}
             </Box>
           </Box>
         </Box>

src/components/ManageUser.tsx

@@ -73,6 +73,7 @@ const ManageUser: React.FC<ManageUsersProps> = ({
   const newStore = useStore();
   const queryClient = useQueryClient();
   const { dir, isRTL } = useDirection();
+  const isActiveYear = newStore.isActiveYearSelected;
 
   const [value, setValue] = React.useState(1);
   const [users, setUsers] = useState<
@@ -506,7 +507,7 @@ const ManageUser: React.FC<ManageUsersProps> = ({
       <Box>
         {value === 1 && (
           <>
-            {!isFromFLProfile && (
+            {!isFromFLProfile && isActiveYear && (
               <Grid
                 px={'18px'}
                 spacing={2}