From 73cad1bccfc8aeb903c810749631dcc2231431c2 Mon Sep 17 00:00:00 2001
From: Vedant Gupta <115912707+im-vedant@users.noreply.github.com>
Date: Tue, 31 Dec 2024 03:32:19 +0530
Subject: [PATCH] Add Unit Tests for OrganizationAgendaCategory Component and
 Search Functionality for Agenda Item Categories (#3083)

* code refactor

* Implemented search functionality

* added new test cases for search functionality

* Fix test

* improve code coverage

* mirgated OrganizationAgendaCategory to stylesheet

* moved other components of AgendaCategory to common stylesheet

---------

Co-authored-by: im-vedant <194vedantgutpa@gmail.com>
---
 src/GraphQl/Queries/AgendaCategoryQueries.ts  |  10 +-
 .../AgendaCategoryContainer.tsx               |   6 +-
 .../AgendaCategoryCreateModal.tsx             |   9 +-
 .../AgendaCategoryDeleteModal.tsx             |   4 +-
 .../AgendaCategoryPreviewModal.tsx            |   8 +-
 .../AgendaCategoryUpdateModal.tsx             |   8 +-
 .../OrganizationAgendaCategory.module.css     | 171 -------------
 .../OrganizationAgendaCategory.spec.tsx       | 228 +++++++++++++-----
 .../OrganizationAgendaCategory.tsx            |  63 +++--
 .../OrganizationAgendaCategoryErrorMocks.ts   |  14 +-
 .../OrganizationAgendaCategoryMocks.ts        |  34 ++-
 11 files changed, 278 insertions(+), 277 deletions(-)
 delete mode 100644 src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.module.css

diff --git a/src/GraphQl/Queries/AgendaCategoryQueries.ts b/src/GraphQl/Queries/AgendaCategoryQueries.ts
index f766337c22..dc68afad39 100644
--- a/src/GraphQl/Queries/AgendaCategoryQueries.ts
+++ b/src/GraphQl/Queries/AgendaCategoryQueries.ts
@@ -8,8 +8,14 @@ import gql from 'graphql-tag';
  */
 
 export const AGENDA_ITEM_CATEGORY_LIST = gql`
-  query AgendaItemCategoriesByOrganization($organizationId: ID!) {
-    agendaItemCategoriesByOrganization(organizationId: $organizationId) {
+  query AgendaItemCategoriesByOrganization(
+    $organizationId: ID!
+    $where: AgendaItemCategoryWhereInput
+  ) {
+    agendaItemCategoriesByOrganization(
+      organizationId: $organizationId
+      where: $where
+    ) {
       _id
       name
       description
diff --git a/src/components/AgendaCategory/AgendaCategoryContainer.tsx b/src/components/AgendaCategory/AgendaCategoryContainer.tsx
index 7b4c5cf8f4..3a02dcc416 100644
--- a/src/components/AgendaCategory/AgendaCategoryContainer.tsx
+++ b/src/components/AgendaCategory/AgendaCategoryContainer.tsx
@@ -211,9 +211,9 @@ function agendaCategoryContainer({
               <div className="ms-3">{t('name')}</div>
             </Col>
             <Col
-              className="align-self-center fw-bold d-none d-md-block"
+              className={`  align-self-center  fw-bold d-none d-md-block`}
               md={6}
-              lg={2}
+              lg={6}
             >
               {t('description')}
             </Col>
@@ -242,7 +242,7 @@ function agendaCategoryContainer({
                 </Col>
                 <Col
                   md={6}
-                  lg={2}
+                  lg={6}
                   className="p-1 d-none d-md-block align-self-center text-body-secondary"
                 >
                   {agendaCategory.description}
diff --git a/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.tsx b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.tsx
index 57a3057b3f..04ab07b540 100644
--- a/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.tsx
+++ b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryCreateModal.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import { Modal, Form, Button } from 'react-bootstrap';
 import type { ChangeEvent } from 'react';
-import styles from './OrganizationAgendaCategory.module.css';
-
+import styles from 'style/app.module.css';
 /**
  * InterfaceFormStateType is an object containing the form state
  */
@@ -48,12 +47,14 @@ const AgendaCategoryCreateModal: React.FC<
 }) => {
   return (
     <Modal
-      className={styles.AgendaCategoryModal}
+      className={`mt-5 ${styles.campaignModal}`}
       show={agendaCategoryCreateModalIsOpen}
       onHide={hideCreateModal}
     >
       <Modal.Header>
-        <p className={styles.titlemodal}>{t('agendaCategoryDetails')}</p>
+        <p className={styles.titlemodalOrganizationEvents}>
+          {t('agendaCategoryDetails')}
+        </p>
         <Button
           variant="danger"
           onClick={hideCreateModal}
diff --git a/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryDeleteModal.tsx b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryDeleteModal.tsx
index a16186bac7..efacc8e8e2 100644
--- a/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryDeleteModal.tsx
+++ b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryDeleteModal.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Modal, Button } from 'react-bootstrap';
-import styles from './OrganizationAgendaCategory.module.css';
+import styles from 'style/app.module.css';
 
 /**
  * InterfaceAgendaCategoryDeleteModalProps is an object containing the props for AgendaCategoryDeleteModal component
@@ -35,7 +35,7 @@ const AgendaCategoryDeleteModal: React.FC<
     <Modal
       size="sm"
       id={`deleteAgendaCategoryModal`}
-      className={styles.agendaCategoryModal}
+      className={styles.campaignModal}
       show={agendaCategoryDeleteModalIsOpen}
       onHide={toggleDeleteModal}
       backdrop="static"
diff --git a/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryPreviewModal.tsx b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryPreviewModal.tsx
index 794db27ad3..e71e8391a2 100644
--- a/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryPreviewModal.tsx
+++ b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryPreviewModal.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Modal, Form, Button } from 'react-bootstrap';
 
-import styles from './OrganizationAgendaCategory.module.css';
+import styles from 'style/app.module.css';
 
 /**
  * InterfaceFormStateType is an object containing the form state
@@ -47,12 +47,14 @@ const AgendaCategoryPreviewModal: React.FC<
 }) => {
   return (
     <Modal
-      className={styles.AgendaCategoryModal}
+      className={styles.campaignModal}
       show={agendaCategoryPreviewModalIsOpen}
       onHide={hidePreviewModal}
     >
       <Modal.Header>
-        <p className={styles.titlemodal}>{t('agendaCategoryDetails')}</p>
+        <p className={styles.titlemodalOrganizationEvents}>
+          {t('agendaCategoryDetails')}
+        </p>
         <Button
           onClick={hidePreviewModal}
           data-testid="previewAgendaCategoryModalCloseBtn"
diff --git a/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.tsx b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.tsx
index 508f1db69b..f2f6f4a440 100644
--- a/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.tsx
+++ b/src/components/OrgSettings/AgendaItemCategories/AgendaCategoryUpdateModal.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Modal, Form, Button } from 'react-bootstrap';
 import type { ChangeEvent } from 'react';
 
-import styles from './OrganizationAgendaCategory.module.css';
+import styles from 'style/app.module.css';
 
 /**
  * InterfaceFormStateType is an object containing the form state
@@ -49,12 +49,14 @@ const AgendaCategoryUpdateModal: React.FC<
 }) => {
   return (
     <Modal
-      className={styles.AgendaCategoryModal}
+      className={styles.campaignModal}
       show={agendaCategoryUpdateModalIsOpen}
       onHide={hideUpdateModal}
     >
       <Modal.Header>
-        <p className={styles.titlemodal}>{t('updateAgendaCategory')}</p>
+        <p className={styles.titlemodalOrganizationEvents}>
+          {t('updateAgendaCategory')}
+        </p>
         <Button
           onClick={hideUpdateModal}
           data-testid="updateAgendaCategoryModalCloseBtn"
diff --git a/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.module.css b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.module.css
deleted file mode 100644
index 13e187f8b5..0000000000
--- a/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.module.css
+++ /dev/null
@@ -1,171 +0,0 @@
-.agendaCategoryContainer {
-  height: 90vh;
-}
-
-.agendaCategoryModal {
-  max-width: 80vw;
-  margin-top: 2vh;
-  margin-left: 13vw;
-}
-
-.btnsContainer {
-  display: flex;
-  gap: 10px;
-}
-
-.btnsContainer .btnsBlock {
-  display: flex;
-  gap: 10px;
-}
-
-.btnsContainer button {
-  display: flex;
-  align-items: center;
-}
-
-.container {
-  min-height: 100vh;
-}
-
-.datediv {
-  display: flex;
-  flex-direction: row;
-}
-
-.datebox {
-  width: 90%;
-  border-radius: 7px;
-  outline: none;
-  box-shadow: none;
-  padding-top: 2px;
-  padding-bottom: 2px;
-  padding-right: 5px;
-  padding-left: 5px;
-  margin-right: 5px;
-  margin-left: 5px;
-}
-
-.dropdown {
-  display: block;
-}
-
-.dropdownToggle {
-  margin-bottom: 0;
-  display: flex;
-}
-
-.dropdownModalToggle {
-  width: 50%;
-}
-
-.errorIcon {
-  transform: scale(1.5);
-  color: var(--bs-danger);
-  margin-bottom: 1rem;
-}
-
-.greenregbtn {
-  margin: 1rem 0 0;
-  margin-top: 15px;
-  border: 1px solid var(--bs-gray-300);
-  box-shadow: 0 2px 2px var(--bs-gray-300);
-  padding: 10px 10px;
-  border-radius: 5px;
-  background-color: var(--bs-primary);
-  width: 100%;
-  font-size: 16px;
-  color: var(--bs-white);
-  outline: none;
-  font-weight: 600;
-  cursor: pointer;
-  transition:
-    transform 0.2s,
-    box-shadow 0.2s;
-  width: 100%;
-}
-
-h2 {
-  margin-top: 0.5rem;
-}
-
-hr {
-  border: none;
-  height: 1px;
-  background-color: var(--bs-gray-500);
-  margin: 1rem;
-}
-
-.iconContainer {
-  display: flex;
-  justify-content: flex-end;
-}
-.icon {
-  margin: 1px;
-}
-
-.message {
-  margin-top: 25%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.organizationAgendaCategoryContainer h2 {
-  margin: 0.6rem 0;
-}
-
-.preview {
-  display: flex;
-  flex-direction: row;
-  font-weight: 900;
-  font-size: 16px;
-  color: rgb(80, 80, 80);
-}
-
-.removeFilterIcon {
-  cursor: pointer;
-}
-
-.searchForm {
-  display: inline;
-}
-
-.titlemodal {
-  color: var(--bs-gray-600);
-  font-weight: 600;
-  font-size: 20px;
-  margin-bottom: 20px;
-  padding-bottom: 5px;
-  border-bottom: 3px solid var(--bs-primary);
-  width: 65%;
-}
-
-.view {
-  margin-left: 2%;
-  font-weight: 600;
-  font-size: 16px;
-  color: var(--bs-gray-600);
-}
-
-@media (max-width: 767px) {
-  .btnsContainer {
-    margin-bottom: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .btnsContainer .btnsBlock .dropdownToggle {
-    flex-grow: 1;
-  }
-
-  .btnsContainer button {
-    width: 100%;
-  }
-
-  .createAgendaCategoryButton {
-    position: absolute;
-    top: 1rem;
-    right: 2rem;
-  }
-}
diff --git a/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.spec.tsx b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.spec.tsx
index a2bd6d0130..4ba81275ec 100644
--- a/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.spec.tsx
+++ b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.spec.tsx
@@ -5,6 +5,7 @@ import {
   waitFor,
   act,
   waitForElementToBeRemoved,
+  fireEvent,
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { MockedProvider } from '@apollo/client/testing';
@@ -13,6 +14,7 @@ import { Provider } from 'react-redux';
 import { BrowserRouter } from 'react-router-dom';
 import i18n from 'utils/i18nForTest';
 import { toast } from 'react-toastify';
+import { vi } from 'vitest';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 
@@ -20,23 +22,11 @@ import { store } from 'state/store';
 import { StaticMockLink } from 'utils/StaticMockLink';
 
 import OrganizationAgendaCategory from './OrganizationAgendaCategory';
-import { MOCKS_ERROR_AGENDA_ITEM_CATEGORY_LIST_QUERY } from './OrganizationAgendaCategoryErrorMocks';
+import {
+  MOCKS_ERROR_AGENDA_ITEM_CATEGORY_LIST_QUERY,
+  MOCKS_ERROR_MUTATION,
+} from './OrganizationAgendaCategoryErrorMocks';
 import { MOCKS } from './OrganizationAgendaCategoryMocks';
-import { vi } from 'vitest';
-
-/**
- * Unit Tests for `OrganizationAgendaCategory` Component
- *
- * - **Load Component**: Verifies successful rendering of key elements like `createAgendaCategory`.
- * - **Error Handling**: Confirms error view appears when agenda category list query fails.
- * - **Modal Functionality**:
- *   - Opens and closes the create agenda category modal.
- *   - Ensures `createAgendaCategoryModalCloseBtn` disappears on close.
- * - **Create Agenda Category**:
- *   - Simulates filling the form and submission.
- *   - Verifies success toast on successful creation (`agendaCategoryCreated`).
- * - **Integration**: Validates compatibility with Redux, Apollo, i18n, and MUI date-picker.
- */
 
 vi.mock('react-toastify', () => ({
   toast: {
@@ -45,13 +35,10 @@ vi.mock('react-toastify', () => ({
   },
 }));
 
-vi.mock('react-router-dom', async () => {
-  const actual = await vi.importActual('react-router-dom');
-  return {
-    ...actual,
-    useParams: () => ({ orgId: '123' }),
-  };
-});
+vi.mock('react-router-dom', async () => ({
+  ...(await vi.importActual('react-router-dom')),
+  useParams: () => ({ orgId: '123' }),
+}));
 
 async function wait(ms = 100): Promise<void> {
   await act(() => {
@@ -66,6 +53,7 @@ const link2 = new StaticMockLink(
   MOCKS_ERROR_AGENDA_ITEM_CATEGORY_LIST_QUERY,
   true,
 );
+const link3 = new StaticMockLink(MOCKS_ERROR_MUTATION, true);
 const translations = {
   ...JSON.parse(
     JSON.stringify(
@@ -100,6 +88,21 @@ describe('Testing Agenda Categories Component', () => {
       expect(getByText(translations.createAgendaCategory)).toBeInTheDocument();
     });
   });
+  test('displays loading state', async () => {
+    const { getByTestId } = render(
+      <MockedProvider mocks={[]} addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18n}>
+              {<OrganizationAgendaCategory orgId="123" />}
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    expect(getByTestId('spinner-wrapper')).toBeInTheDocument();
+  });
 
   it('render error component on unsuccessful agenda category list query', async () => {
     const { queryByText } = render(
@@ -202,47 +205,140 @@ describe('Testing Agenda Categories Component', () => {
     });
   });
 
-  // test('toasts error on unsuccessful creation', async () => {
-  //   render(
-  //     <MockedProvider addTypename={false} link={link3}>
-  //       <Provider store={store}>
-  //         <BrowserRouter>
-  //           <LocalizationProvider dateAdapter={AdapterDayjs}>
-  //             <I18nextProvider i18n={i18n}>
-  //               {<OrganizationAgendaCategory />}
-  //             </I18nextProvider>
-  //           </LocalizationProvider>
-  //         </BrowserRouter>
-  //       </Provider>
-  //     </MockedProvider>,
-  //   );
-
-  //   await wait();
-
-  //   await waitFor(() => {
-  //     expect(screen.getByTestId('createAgendaCategoryBtn')).toBeInTheDocument();
-  //   });
-  //   userEvent.click(screen.getByTestId('createAgendaCategoryBtn'));
-
-  //   await waitFor(() => {
-  //     return expect(
-  //       screen.findByTestId('createAgendaCategoryModalCloseBtn'),
-  //     ).resolves.toBeInTheDocument();
-  //   });
-
-  //   userEvent.type(
-  //     screen.getByPlaceholderText(translations.name),
-  //     formData.name,
-  //   );
-
-  //   userEvent.type(
-  //     screen.getByPlaceholderText(translations.description),
-  //     formData.description,
-  //   );
-  //   userEvent.click(screen.getByTestId('createAgendaCategoryFormSubmitBtn'));
-
-  //   await waitFor(() => {
-  //     expect(toast.error).toBeCalledWith();
-  //   });
-  // });
+  test('toasts error on unsuccessful creation', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link3}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <I18nextProvider i18n={i18n}>
+                {<OrganizationAgendaCategory orgId="123" />}
+              </I18nextProvider>
+            </LocalizationProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createAgendaCategoryBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('createAgendaCategoryBtn'));
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('createAgendaCategoryModalCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+
+    userEvent.type(
+      screen.getByPlaceholderText(translations.name),
+      formData.name,
+    );
+
+    userEvent.type(
+      screen.getByPlaceholderText(translations.description),
+      formData.description,
+    );
+    userEvent.click(screen.getByTestId('createAgendaCategoryFormSubmitBtn'));
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalledWith('Mock Graphql Error');
+    });
+  });
+  test('allow user to type in the search field', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <I18nextProvider i18n={i18n}>
+                {<OrganizationAgendaCategory orgId="123" />}
+              </I18nextProvider>
+            </LocalizationProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+    const searchInput = await screen.findByTestId('searchByName');
+    expect(searchInput).toBeInTheDocument();
+
+    userEvent.type(searchInput, 'Category 1');
+    await waitFor(() => {
+      expect(searchInput).toHaveValue('Category 1');
+    });
+  });
+  test('triggers search on pressing Enter key', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <I18nextProvider i18n={i18n}>
+                {<OrganizationAgendaCategory orgId="123" />}
+              </I18nextProvider>
+            </LocalizationProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+    const searchInput = await screen.findByTestId('searchByName');
+    expect(searchInput).toBeInTheDocument();
+
+    userEvent.type(searchInput, 'Category');
+    await act(async () => {
+      fireEvent.keyUp(searchInput, { key: 'Enter' });
+    });
+    screen.debug();
+    await waitFor(() => {
+      expect(screen.getAllByText('Category').length).toBe(2);
+    });
+  });
+  test('triggers search on clicking search button', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <I18nextProvider i18n={i18n}>
+                {<OrganizationAgendaCategory orgId="123" />}
+              </I18nextProvider>
+            </LocalizationProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+    const searchInput = await screen.findByTestId('searchByName');
+    expect(searchInput).toBeInTheDocument();
+    userEvent.type(searchInput, 'Category');
+
+    const searchButton = await screen.findByTestId('searchBtn');
+    userEvent.click(searchButton);
+    await waitFor(() => {
+      expect(screen.getAllByText('Category').length).toBe(2);
+    });
+  });
+  test('Search categories by name and clear the input by backspace', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <I18nextProvider i18n={i18n}>
+                {<OrganizationAgendaCategory orgId="123" />}
+              </I18nextProvider>
+            </LocalizationProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+    const searchInput = await screen.findByTestId('searchByName');
+    expect(searchInput).toBeInTheDocument();
+    userEvent.type(searchInput, 'A{backspace}');
+    await waitFor(() => {
+      expect(screen.getAllByText('Category').length).toBe(2);
+    });
+  });
 });
diff --git a/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.tsx b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.tsx
index 884371d862..4076ff0c2a 100644
--- a/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.tsx
+++ b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategory.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import type { ChangeEvent, FC } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Button } from 'react-bootstrap';
+import { Button, Form } from 'react-bootstrap';
 
-import { WarningAmberRounded } from '@mui/icons-material';
+import { WarningAmberRounded, Search } from '@mui/icons-material';
 import { toast } from 'react-toastify';
 
 import { useMutation, useQuery } from '@apollo/client';
@@ -13,7 +13,7 @@ import { CREATE_AGENDA_ITEM_CATEGORY_MUTATION } from 'GraphQl/Mutations/mutation
 import type { InterfaceAgendaItemCategoryList } from 'utils/interfaces';
 import AgendaCategoryContainer from 'components/AgendaCategory/AgendaCategoryContainer';
 import AgendaCategoryCreateModal from './AgendaCategoryCreateModal';
-import styles from './OrganizationAgendaCategory.module.css';
+import styles from 'style/app.module.css';
 import Loader from 'components/Loader/Loader';
 
 interface InterfaceAgendaCategoryProps {
@@ -34,11 +34,12 @@ const organizationAgendaCategory: FC<InterfaceAgendaCategoryProps> = ({
   const { t } = useTranslation('translation', {
     keyPrefix: 'organizationAgendaCategory',
   });
-
+  const { t: tCommon } = useTranslation('common');
   // State for managing modal visibility and form data
   const [agendaCategoryCreateModalIsOpen, setAgendaCategoryCreateModalIsOpen] =
     useState<boolean>(false);
-
+  const [searchTerm, setSearchTerm] = useState<string>('');
+  const [searchValue, setSearchValue] = useState<string>('');
   const [formState, setFormState] = useState({
     name: '',
     description: '',
@@ -59,7 +60,12 @@ const organizationAgendaCategory: FC<InterfaceAgendaCategoryProps> = ({
     error?: unknown | undefined;
     refetch: () => void;
   } = useQuery(AGENDA_ITEM_CATEGORY_LIST, {
-    variables: { organizationId: orgId },
+    variables: {
+      organizationId: orgId,
+      where: {
+        name_contains: searchTerm,
+      },
+    },
     notifyOnNetworkStatusChange: true,
   });
 
@@ -119,7 +125,7 @@ const organizationAgendaCategory: FC<InterfaceAgendaCategoryProps> = ({
 
   if (agendaCategoryError) {
     return (
-      <div className={`${styles.container} bg-white rounded-4 my-3`}>
+      <div className={`${styles.container} bg-transparent rounded-4 my-3`}>
         <div className={styles.message}>
           <WarningAmberRounded className={styles.errorIcon} fontSize="large" />
           <h6 className="fw-bold text-danger text-center">
@@ -135,26 +141,43 @@ const organizationAgendaCategory: FC<InterfaceAgendaCategoryProps> = ({
   }
 
   return (
-    <div className={`${styles.organizationAgendaCategoryContainer} mx-4`}>
-      <div className={`${styles.container} bg-white rounded-4 my-3`}>
-        <div className={`pt-4 mx-4`}>
-          <div className={styles.btnsContainer}>
-            <div className=" d-none d-lg-inline flex-grow-1 d-flex align-items-center border bg-light-subtle rounded-3">
-              {/* <input
-                type="search"
-                className="form-control border-0 bg-light-subtle"
-                placeholder={t('searchAgendaCategories')}
-                onChange={(e) => setSearchValue(e.target.value)}
+    <div className={`mx-4`}>
+      <div className={` bg-transparent rounded-4 my-3`}>
+        <div className={`mx-4`}>
+          <div className={`${styles.btnsContainer} my-0`}>
+            <div className={`${styles.input} mb-1`}>
+              <Form.Control
+                type="name"
+                placeholder={tCommon('searchByName')}
+                autoComplete="off"
+                required
+                className={styles.inputField}
                 value={searchValue}
-                data-testid="searchAgendaCategories"
-              /> */}
+                onChange={(e) => setSearchValue(e.target.value)}
+                onKeyUp={(e) => {
+                  if (e.key === 'Enter') {
+                    setSearchTerm(searchValue);
+                  } else if (e.key === 'Backspace' && searchValue === '') {
+                    setSearchTerm('');
+                  }
+                }}
+                data-testid="searchByName"
+              />
+              <Button
+                tabIndex={-1}
+                className={styles.searchButton}
+                onClick={() => setSearchTerm(searchValue)}
+                data-testid="searchBtn"
+              >
+                <Search />
+              </Button>
             </div>
 
             <Button
               variant="success"
               onClick={showCreateModal}
               data-testid="createAgendaCategoryBtn"
-              className={styles.createAgendaCategoryButton}
+              className={styles.addButton}
             >
               <i className={'fa fa-plus me-2'} />
               {t('createAgendaCategory')}
diff --git a/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategoryErrorMocks.ts b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategoryErrorMocks.ts
index 10809c3da8..3ebf70092e 100644
--- a/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategoryErrorMocks.ts
+++ b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategoryErrorMocks.ts
@@ -6,7 +6,12 @@ export const MOCKS_ERROR_AGENDA_ITEM_CATEGORY_LIST_QUERY = [
   {
     request: {
       query: AGENDA_ITEM_CATEGORY_LIST,
-      variables: { organizationId: '123' },
+      variables: {
+        organizationId: '123',
+        where: {
+          name_contains: '',
+        },
+      },
     },
     error: new Error('Mock Graphql Error'),
   },
@@ -16,7 +21,12 @@ export const MOCKS_ERROR_MUTATION = [
   {
     request: {
       query: AGENDA_ITEM_CATEGORY_LIST,
-      variables: { organizationId: '123' },
+      variables: {
+        organizationId: '123',
+        where: {
+          name_contains: '',
+        },
+      },
     },
     result: {
       data: {
diff --git a/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategoryMocks.ts b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategoryMocks.ts
index 434b0dcad2..97d53b8392 100644
--- a/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategoryMocks.ts
+++ b/src/components/OrgSettings/AgendaItemCategories/OrganizationAgendaCategoryMocks.ts
@@ -6,7 +6,39 @@ export const MOCKS = [
   {
     request: {
       query: AGENDA_ITEM_CATEGORY_LIST,
-      variables: { organizationId: '123' },
+      variables: {
+        organizationId: '123',
+        where: {
+          name_contains: '',
+        },
+      },
+    },
+    result: {
+      data: {
+        agendaItemCategoriesByOrganization: [
+          {
+            _id: 'agendaItemCategory1',
+            name: 'Category',
+            description: 'Test Description',
+            createdBy: {
+              _id: 'user1',
+              firstName: 'Harve',
+              lastName: 'Lance',
+            },
+          },
+        ],
+      },
+    },
+  },
+  {
+    request: {
+      query: AGENDA_ITEM_CATEGORY_LIST,
+      variables: {
+        organizationId: '123',
+        where: {
+          name_contains: 'Category',
+        },
+      },
     },
     result: {
       data: {