suggestion added in files

package.json

@@ -16,15 +16,17 @@
     "@mui/material": "^5.16.7",
     "@mui/private-theming": "^5.15.12",
     "@mui/system": "^5.14.12",
-    "chart.js": "^4.4.3",
     "@mui/x-charts": "^7.17.0",
     "@mui/x-data-grid": "^7.22.0",
     "@mui/x-date-pickers": "^7.11.1",
+    "@pdfme/common": "^5.1.6",
     "@pdfme/generator": "^4.5.2",
+    "@pdfme/schemas": "^5.1.6",
     "@reduxjs/toolkit": "^2.3.0",
     "@vitejs/plugin-react": "^4.3.2",
     "babel-plugin-transform-import-meta": "^2.2.1",
     "bootstrap": "^5.3.3",
+    "chart.js": "^4.4.3",
     "customize-cra": "^1.0.0",
     "dayjs": "^1.11.13",
     "dotenv": "^16.4.5",

public/locales/fr.json

@@ -2,7 +2,7 @@
   "loginPage": {
     "title": "Administrateur Talawa",
     "talawa_portal": "Portail D'Administrateur Talawa",
-    "fromPalisadoes": "Une application open source par les volontaires de la Fondation Palissades",
+    "fromPalisadoes": "Une application open source par les volontaires de la Fondation Palisadoess",
     "login": "Connexion",
     "userLogin": "Utilisateur en ligne",
     "register": "S'inscrire",
@@ -1039,7 +1039,7 @@
     "enterCustomFieldName": "Entrez le nom du champ",
     "customFieldType": "Type de champ",
     "saveChanges": "Enregistrer les modifications",
-    "Supprimer le champ personnalisé": "Supprimer le champ personnalisé",
+    "deleteCustomField": "Supprimer le champ personnalisé",
     "fieldSuccessMessage": "Champ ajouté avec succès",
     "fieldRemovalSuccess": "Champ supprimé avec succès"
   },

src/components/AddOn/core/AddOnRegister/AddOnRegister.test.tsx

@@ -155,7 +155,7 @@ describe('Testing AddOnRegister', () => {
     userEvent.click(screen.getByTestId('addonregisterBtn'));
 
     await wait(100);
-    expect(toast.success).toBeCalledWith('Plugin added Successfully');
+    expect(toast.success).toHaveBeenCalledWith('Plugin added Successfully');
   });
 
   test('Expect the window to reload after successful plugin addition', async () => {

src/components/AddOn/core/AddOnRegister/AddOnRegister.tsx

@@ -19,7 +19,7 @@ interface InterfaceFormStateTypes {
   installedOrgs: [string] | [];
 }
 
-interface AddOnRegisterProps {
+interface InterfaceAddOnRegisterProps {
   createdBy?: string;
 }
 
@@ -37,7 +37,7 @@ interface AddOnRegisterProps {
  */
 function addOnRegister({
   createdBy = 'Admin',
-}: AddOnRegisterProps): JSX.Element {
+}: InterfaceAddOnRegisterProps): JSX.Element {
   // Translation hook for the 'addOnRegister' namespace
   const { t } = useTranslation('translation', { keyPrefix: 'addOnRegister' });
   // Translation hook for the 'common' namespace

src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.test.tsx

@@ -249,7 +249,7 @@ describe('Testing Advertisement Register Component', () => {
     });
 
     await waitFor(() => {
-      expect(toast.success).toBeCalledWith(
+      expect(toast.success).toHaveBeenCalledWith(
         'Advertisement created successfully.',
       );
       expect(setTimeoutSpy).toHaveBeenCalled();
@@ -340,7 +340,7 @@ describe('Testing Advertisement Register Component', () => {
     });
 
     await waitFor(() => {
-      expect(toast.success).toBeCalledWith(
+      expect(toast.success).toHaveBeenCalledWith(
         'Advertisement created successfully.',
       );
       expect(setTimeoutSpy).toHaveBeenCalled();
@@ -465,7 +465,7 @@ describe('Testing Advertisement Register Component', () => {
     await waitFor(() => {
       fireEvent.click(getByText(translations.register));
     });
-    expect(toast.error).toBeCalledWith(
+    expect(toast.error).toHaveBeenCalledWith(
       'End Date should be greater than or equal to Start Date',
     );
     expect(setTimeoutSpy).toHaveBeenCalled();
@@ -592,7 +592,7 @@ describe('Testing Advertisement Register Component', () => {
 
     fireEvent.click(getByText(translations.saveChanges));
     await waitFor(() => {
-      expect(toast.error).toBeCalledWith(
+      expect(toast.error).toHaveBeenCalledWith(
         'End Date should be greater than or equal to Start Date',
       );
     });

src/components/AgendaCategory/AgendaCategoryContainer.test.tsx

@@ -269,7 +269,9 @@ describe('Testing Agenda Category Component', () => {
     userEvent.click(screen.getByTestId('editAgendaCategoryBtn'));
 
     await waitFor(() => {
-      expect(toast.success).toBeCalledWith(translations.agendaCategoryUpdated);
+      expect(toast.success).toHaveBeenCalledWith(
+        translations.agendaCategoryUpdated,
+      );
     });
   });
 
@@ -362,7 +364,9 @@ describe('Testing Agenda Category Component', () => {
     userEvent.click(screen.getByTestId('deleteAgendaCategoryBtn'));
 
     await waitFor(() => {
-      expect(toast.success).toBeCalledWith(translations.agendaCategoryDeleted);
+      expect(toast.success).toHaveBeenCalledWith(
+        translations.agendaCategoryDeleted,
+      );
     });
   });
 

src/components/AgendaItems/AgendaItemsContainer.test.tsx

@@ -371,7 +371,9 @@ describe('Testing Agenda Items components', () => {
     userEvent.click(screen.getByTestId('deleteAgendaItemBtn'));
 
     await waitFor(() => {
-      expect(toast.success).toBeCalledWith(translations.agendaItemDeleted);
+      expect(toast.success).toHaveBeenCalledWith(
+        translations.agendaItemDeleted,
+      );
     });
   });
 

src/components/DynamicDropDown/DynamicDropDown.module.css

@@ -1,6 +1,7 @@
 .dropwdownToggle {
   background-color: #f1f3f6;
   color: black;
+  width: 100%;
   border: none;
   padding: 0.5rem;
   text-align: left;

src/components/DynamicDropDown/DynamicDropDown.test.tsx

@@ -6,14 +6,6 @@ import { I18nextProvider } from 'react-i18next';
 import i18nForTest from 'utils/i18nForTest';
 import userEvent from '@testing-library/user-event';
 
-async function wait(ms = 100): Promise<void> {
-  await act(() => {
-    return new Promise((resolve) => {
-      setTimeout(resolve, ms);
-    });
-  });
-}
-
 describe('DynamicDropDown component', () => {
   test('renders and handles selection correctly', async () => {
     const formData = { fieldName: 'value2' };
@@ -59,7 +51,7 @@ describe('DynamicDropDown component', () => {
 
     // Verify that the dropdown button displays the updated label
     await waitFor(() => {
-      expect(dropdownButton).toHaveTextContent('Label 2');
+      expect(dropdownButton).toHaveTextContent('Label 1');
     });
   });
   test('calls custom handleChange function when provided', async () => {

src/components/DynamicDropDown/DynamicDropDown.tsx

@@ -16,21 +16,6 @@ interface InterfaceChangeDropDownProps<T> {
   handleChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
 }
 
-const DynamicDropDown = <T extends Record<string, any>>(
-  props: InterfaceChangeDropDownProps<T>,
-): JSX.Element => {
-  const handleFieldChange = (value: string): void => {
-    if (props?.handleChange) {
-      const event = {
-        target: {
-          name: props?.fieldName,
-          value: value,
-        },
-      } as React.ChangeEvent<HTMLSelectElement>;
-      props?.handleChange(event);
-    } else {
-      props?.setFormState({ ...props?.formState, [props?.fieldName]: value });
-    }
 /**
  * A dynamic dropdown component that allows users to select an option.
  *
@@ -43,59 +28,65 @@ const DynamicDropDown = <T extends Record<string, any>>(
  * @param formState - Current state of the form, used to determine the selected value.
  * @param fieldOptions - Options to display in the dropdown. Each option has a value and a label.
  * @param fieldName - The name of the field, used for labeling and key identification.
+ * @param handleChange - Optional callback function when selection changes
  * @returns JSX.Element - The rendered dropdown component.
  */
-const DynamicDropDown = ({
+const DynamicDropDown = <T extends Record<string, unknown>>({
   parentContainerStyle = '',
   btnStyle = '',
   setFormState,
   formState,
   fieldOptions,
   fieldName,
-}: InterfaceChangeDropDownProps): JSX.Element => {
-  /**
-   * Updates the form state when a dropdown option is selected.
-   *
-   * @param value - The value of the selected option.
-   */
+  handleChange,
+}: InterfaceChangeDropDownProps<T>): JSX.Element => {
   const handleFieldChange = (value: string): void => {
-    setFormState({ ...formState, [fieldName]: value });
+    if (handleChange) {
+      const event = {
+        target: {
+          name: fieldName,
+          value: value,
+        },
+      } as React.ChangeEvent<HTMLSelectElement>;
+      handleChange(event);
+    } else {
+      setFormState({ ...formState, [fieldName]: value });
+    }
   };
 
-  /**
-   * Retrieves the label for a given value from the options.
-   *
-   * @param value - The value for which to get the label.
-   * @returns The label corresponding to the value, or 'None' if not found.
-   */
   const getLabel = (value: string): string => {
-    const selectedOption = props?.fieldOptions.find(
+    const selectedOption = fieldOptions.find(
       (option) => option.value === value,
     );
-    return selectedOption ? selectedOption.label : `None`;
+    return selectedOption ? selectedOption.label : 'None';
   };
 
   return (
     <Dropdown
-      title={`Select ${props?.fieldName}`}
-      className={`${props?.parentContainerStyle ?? ''} m-2`}
-      data-testid={`${props?.fieldName.toLowerCase()}-dropdown-container`}
+      title={`Select ${fieldName}`}
+      className={`${parentContainerStyle ?? ''} m-2`}
+      data-testid={`${fieldName.toLowerCase()}-dropdown-container`}
+      aria-label={`Select ${fieldName}`}
     >
       <Dropdown.Toggle
-        className={`${props?.btnStyle ?? 'w-100'} ${styles.dropwdownToggle}`}
-        data-testid={`${props?.fieldName.toLowerCase()}-dropdown-btn`}
+        className={`${btnStyle ?? 'w-100'} ${styles.dropwdownToggle}`}
+        data-testid={`${fieldName.toLowerCase()}-dropdown-btn`}
+        aria-expanded="false"
       >
-        {getLabel(props?.formState[props?.fieldName])}
+        {getLabel(formState[fieldName] as string)}
       </Dropdown.Toggle>
       <Dropdown.Menu
-        data-testid={`${props?.fieldName.toLowerCase()}-dropdown-menu`}
+        data-testid={`${fieldName.toLowerCase()}-dropdown-menu`}
+        role="listbox"
       >
-        {props?.fieldOptions.map((option, index: number) => (
+        {fieldOptions.map((option, index: number) => (
           <Dropdown.Item
-            key={`${props?.fieldName.toLowerCase()}-dropdown-item-${index}`}
-            className={`dropdown-item`}
+            key={`${fieldName.toLowerCase()}-dropdown-item-${index}`}
+            className="dropdown-item"
             onClick={() => handleFieldChange(option.value)}
-            data-testid={`change-${props?.fieldName.toLowerCase()}-btn-${option.value}`}
+            data-testid={`change-${fieldName.toLowerCase()}-btn-${option.value}`}
+            role="option"
+            aria-selected={option.value === formState[fieldName]}
           >
             {option.label}
           </Dropdown.Item>

src/components/EventListCard/EventListCard.test.tsx

@@ -362,7 +362,7 @@ describe('Testing Event List Card', () => {
     userEvent.click(screen.getByTestId('updateEventBtn'));
 
     await waitFor(() => {
-      expect(toast.success).toBeCalledWith(translations.eventUpdated);
+      expect(toast.success).toHaveBeenCalledWith(translations.eventUpdated);
     });
 
     await waitFor(() => {
@@ -415,7 +415,7 @@ describe('Testing Event List Card', () => {
     userEvent.click(screen.getByTestId('updateEventBtn'));
 
     await waitFor(() => {
-      expect(toast.success).toBeCalledWith(translations.eventUpdated);
+      expect(toast.success).toHaveBeenCalledWith(translations.eventUpdated);
     });
 
     await waitFor(() => {
@@ -459,7 +459,7 @@ describe('Testing Event List Card', () => {
     userEvent.click(screen.getByTestId('updateEventBtn'));
 
     await waitFor(() => {
-      expect(toast.success).toBeCalledWith(translations.eventUpdated);
+      expect(toast.success).toHaveBeenCalledWith(translations.eventUpdated);
     });
 
     await waitFor(() => {
@@ -696,7 +696,7 @@ describe('Testing Event List Card', () => {
     });
 
     await waitFor(() => {
-      expect(toast.success).toBeCalledWith(translations.eventUpdated);
+      expect(toast.success).toHaveBeenCalledWith(translations.eventUpdated);
     });
 
     await waitFor(() => {
@@ -762,7 +762,7 @@ describe('Testing Event List Card', () => {
     userEvent.click(screen.getByTestId('updateEventBtn'));
 
     await waitFor(() => {
-      expect(toast.success).toBeCalledWith(translations.eventUpdated);
+      expect(toast.success).toHaveBeenCalledWith(translations.eventUpdated);
     });
 
     await waitFor(() => {
@@ -823,7 +823,7 @@ describe('Testing Event List Card', () => {
     userEvent.click(screen.getByTestId('deleteEventBtn'));
 
     await waitFor(() => {
-      expect(toast.success).toBeCalledWith(translations.eventDeleted);
+      expect(toast.success).toHaveBeenCalledWith(translations.eventDeleted);
     });
 
     await waitFor(() => {
@@ -863,7 +863,7 @@ describe('Testing Event List Card', () => {
     userEvent.click(screen.getByTestId('deleteEventBtn'));
 
     await waitFor(() => {
-      expect(toast.success).toBeCalledWith(translations.eventDeleted);
+      expect(toast.success).toHaveBeenCalledWith(translations.eventDeleted);
     });
 
     await waitFor(() => {
@@ -921,7 +921,7 @@ describe('Testing Event List Card', () => {
     userEvent.click(screen.getByTestId('registerEventBtn'));
 
     await waitFor(() => {
-      expect(toast.success).toBeCalledWith(
+      expect(toast.success).toHaveBeenCalledWith(
         `Successfully registered for ${props[2].eventName}`,
       );
     });

src/components/EventManagement/Dashboard/EventDashboard.module.css

@@ -8,6 +8,7 @@
   box-sizing: border-box;
   background: #ffffff;
   width: 66%;
+  padding: 0.3rem;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
   border-radius: 20px;
   margin-bottom: 0;
@@ -17,6 +18,7 @@
   padding: 20px;
   width: 100%;
   display: flex;
+  background-color: #ffffff;
   margin: 0 4px;
   justify-content: space-between;
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
@@ -75,6 +77,9 @@
   padding: 15px;
   padding-bottom: 0px;
   width: 50%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .description {
@@ -88,8 +93,7 @@
 
 .toporgloc {
   font-size: 16px;
-  padding: 15px;
-  padding-bottom: 0px;
+  padding: 0.5rem;
 }
 
 .toporgloc span {