add create action item functionality

Author: meetulr

public/locales/en.json

@@ -304,7 +304,8 @@
     "deleteActionItem": "Delete Action Item",
     "deleteActionItemMsg": "Do you want to remove this action item?",
     "yes": "Yes",
-    "no": "No"
+    "no": "No",
+    "successfulCreation": "Action Item created successfully"
   },
   "eventListCard": {
     "location": "Location",

src/GraphQl/Queries/ActionItemQueries.ts

@@ -0,0 +1,45 @@
+import gql from 'graphql-tag';
+
+/**
+ * GraphQL query to retrieve action item categories by organization.
+ *
+ * @param organizationId - The ID of the organization for which action item categories are being retrieved.
+ * @returns The list of action item categories associated with the organization.
+ */
+
+export const ACTION_ITEM_LIST = gql`
+  query ActionItemsByOrganization($organizationId: ID!) {
+    actionItemsByOrganization(organizationId: $organizationId) {
+      _id
+      assignee {
+        _id
+        firstName
+        lastName
+      }
+      assigner {
+        _id
+        firstName
+        lastName
+      }
+      actionItemCategory {
+        _id
+        name
+      }
+      preCompletionNotes
+      postCompletionNotes
+      assignmentDate
+      dueDate
+      completionDate
+      isCompleted
+      event {
+        _id
+        title
+      }
+      creator {
+        _id
+        firstName
+        lastName
+      }
+    }
+  }
+`;

src/GraphQl/Queries/Queries.ts

@@ -584,6 +584,9 @@ export const MEMBERSHIP_REQUEST = gql`
 // get the list of action item categories for an organization
 export { ACTION_ITEM_CATEGORY_LIST } from './ActionItemCategoryQueries';
 
+// get the list of action items for an organization
+export { ACTION_ITEM_LIST } from './ActionItemQueries';
+
 // to take the list of the blocked users
 export { PLUGIN_GET } from './PlugInQueries';
 export { ADVERTISEMENTS_GET } from './PlugInQueries';

src/components/ActionItemContainer/ActionItemContainer.tsx

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import { Button, Col, Row } from 'react-bootstrap';
+import type { InterfaceActionItemList } from 'utils/interfaces';
+
+function actionItemContainer({
+  data,
+}: {
+  data: InterfaceActionItemList | undefined;
+}): JSX.Element {
+  return (
+    <>
+      <div className="mx-1 my-4">
+        <div className="mx-4 shadow-sm rounded-top-4">
+          <Row className="mx-0 border border-light-subtle rounded-top-4 py-3">
+            <Col xs={7} sm={4} md={3} lg={3} className="ps-3 fs-5 fw-bold">
+              Assignee
+            </Col>
+            <Col
+              className="fs-5 fw-bold d-none d-sm-block"
+              sm={5}
+              md={6}
+              lg={4}
+            >
+              Action Item Category
+            </Col>
+            <Col className="d-none d-lg-block fs-5 fw-bold" md={4} lg={3}>
+              Assigner
+            </Col>
+            <Col xs={5} sm={3} lg={2} className="fs-5 fw-bold">
+              Options
+            </Col>
+          </Row>
+        </div>
+
+        <div className="mx-4 bg-light-subtle border border-light-subtle border-top-0 rounded-bottom-4 shadow-sm">
+          {data?.actionItemsByOrganization.map((actionItem, index) => (
+            <div key={index}>
+              <Row className={`${index === 0 ? 'pt-3' : ''} mb-3 mx-2`}>
+                <Col
+                  sm={4}
+                  xs={7}
+                  md={3}
+                  lg={3}
+                  className="align-self-center fw-semibold text-body-secondary"
+                >
+                  {`${actionItem.assignee.firstName} ${actionItem.assignee.lastName}`}
+                </Col>
+                <Col
+                  sm={5}
+                  md={6}
+                  lg={4}
+                  className="d-none d-sm-block align-self-center fw-semibold text-body-secondary"
+                >
+                  {actionItem.actionItemCategory.name}
+                </Col>
+                <Col
+                  className="d-none d-lg-block align-self-center fw-semibold text-body-secondary"
+                  md={4}
+                  lg={3}
+                >
+                  {`${actionItem.assigner.firstName} ${actionItem.assigner.lastName}`}
+                </Col>
+                <Col xs={5} sm={3} lg={2} className="p-0">
+                  <Button
+                    className="btn btn-sm me-2"
+                    variant="outline-secondary"
+                    // onClick={showDetailsModal}
+                  >
+                    Details
+                  </Button>
+                  <Button
+                    size="sm"
+                    data-testid="editEventModalBtn"
+                    // onClick={toggleUpdateModel}
+                    className="me-2 d-none d-xl-inline"
+                    variant="success"
+                  >
+                    {' '}
+                    <i className="fas fa-edit"></i>
+                  </Button>
+                  <Button
+                    size="sm"
+                    data-testid="deleteEventModalBtn"
+                    variant="danger"
+                    // onClick={toggleDeleteModal}
+                  >
+                    {' '}
+                    <i className="fa fa-trash"></i>
+                  </Button>
+                </Col>
+              </Row>
+
+              {index !== data.actionItemsByOrganization.length - 1 && (
+                <hr className="mx-3" />
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default actionItemContainer;