src/components/Organization/OrganizationsList.jsx

@@ -0,0 +1,149 @@
+import React from "react";
+import { useOrganizationsList } from "../../hooks/useOrganization";
+import { ITEMS_PER_PAGE } from "../../utils/constants";
+import Avatar from "../common/Avatar";
+import { useDebounce } from "../../utils/appUtils";
+
+const OrganizationsList = ({searchText}) => {
+    const searchString = useDebounce(searchText,500)
+  const {
+    data = [],
+    isLoading,
+    isFetching,
+    isError,
+    error,
+  } = useOrganizationsList(ITEMS_PER_PAGE, 1, true,null,searchString);
+
+  const organizationsColumns = [
+    {
+      key: "name",
+      label: "Organization Name",
+      getValue: (org) => (
+        <div className="d-flex gap-2 py-1 ">
+          <i class="bx bx-buildings"></i>
+          <span
+            className="text-truncate d-inline-block "
+            style={{ maxWidth: "150px" }}
+          >
+            {org?.name || "N/A"}
+          </span>
+        </div>
+      ),
+      align: "text-start",
+    },
+    {
+      key: "contactPerson",
+      label: "Contact Person",
+      getValue: (org) => (
+        (
+        <div className="d-flex align-items-center ps-1">
+          <Avatar
+            size="xs"
+            classAvatar="m-0"
+            firstName={(org?.name || "").trim().split(" ")[0] || ""}
+            lastName={(org?.name || "").trim().split(" ")[1] || ""}
+          />
+          <span
+            className="text-truncate d-inline-block "
+            style={{ maxWidth: "150px" }}
+          >
+            {org?.name || "N/A"}
+          </span>
+        </div>
+      )
+      ),
+      align: "text-start",
+    },
+    {
+      key: "contactNumber",
+      label: "Phone Number",
+      getValue: (org) => org.contactNumber || "N/A",
+      align: "text-start",
+    },
+    {
+      key: "email",
+      label: "Email",
+      getValue: (org) => (
+         <span
+          className="text-truncate d-inline-block"
+          style={{ maxWidth: "200px" }}
+        >
+          {org?.email || "N/A"}
+        </span>
+      ),
+      align: "text-start",
+    },
+    {
+      key: "sprid",
+      label: "SPRID Id",
+      getValue: (org) => org.sprid || "N/A",
+      align: "text-center",
+    },
+  ];
+
+  if (isFetching && !isFetching) return <div>Loading...</div>;
+  if (isError) return <div>{error?.message || "Something went wrong"}</div>;
+
+  return (
+    <div className="card px-0 px-sm-4">
+      <div className="card-datatable table-responsive" id="horizontal-example">
+        <div className="dataTables_wrapper no-footer px-2">
+          <table className="table border-top dataTable text-nowrap">
+            <thead>
+              <tr className="table_header_border">
+                {organizationsColumns.map((col) => (
+                  <th
+                    key={col.key}
+                    className="sorting d-table-cell"
+                    aria-sort="descending"
+                  >
+                    <div className={`${col.align}`}>{col.label}</div>
+                  </th>
+                ))}
+                <th className="sticky-action-column bg-white text-center">
+                  Action
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.length > 0 ? (
+                data.map((org) => (
+                  <tr key={org.id}>
+                    {organizationsColumns.map((col) => (
+                      <td
+                        key={col.key}
+                        className={`d-table-cell ${col.align ?? ""}`}
+                      >
+                        {col.customRender
+                          ? col.customRender(org)
+                          : col.getValue(org)}
+                      </td>
+                    ))}
+                    <td className="sticky-action-column ">
+                      <div className="d-flex justify-content-center gap-2 ">
+                        <i className="bx bx-show text-primary cursor-pointer"></i>
+                        <i className="bx bx-edit text-secondary cursor-pointer"></i>
+                        <i className="bx bx-trash text-danger cursor-pointer"></i>
+                      </div>
+                    </td>
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td
+                    colSpan={organizationsColumns.length + 1}
+                    className="text-center"
+                  >
+                    <p className="fw-semibold">Not Found</p>
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default OrganizationsList;

src/hooks/useOrganization.js

@@ -4,7 +4,7 @@ import {
   openOrgModal,
   closeOrgModal,
 } from "../slices/localVariablesSlice";
-import { useMutation } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import OrganizationRepository from "../repositories/OrganizationRespository";
 import showToast from "../services/toastService";
 
@@ -22,11 +22,24 @@ export const useOrganizationModal = () => {
   };
 };
 
+export const useOrganizationsList = (pageSize, pageNumber, active, sprid, searchString="") => {
+  return useQuery({
+    queryKey: ["organizationList", pageSize, pageNumber, active, sprid, searchString],
+    queryFn: async() => {
+      const resp = await OrganizationRepository.getOrganizationList(pageSize, pageNumber, active, sprid, searchString);
+      return resp.data;
+    },
+    keepPreviousData: true, 
+  });
+};
+
 export const useCreateOrganization = (onSuccessCallback) => {
+  const useClient = useQueryClient()
   return useMutation({
     mutationFn: async (OrgPayload) =>
       await OrganizationRepository.createOrganization(OrgPayload),
     onSuccess: (_, variables) => {
+      useClient.invalidateQueries({queryKey:["organizationList"]})
       showToast("Organization created successfully", "success");
       if (onSuccessCallback) onSuccessCallback();
     },

src/pages/Organization/OrganizationPage.jsx

@@ -1,9 +1,12 @@
-import React from "react";
+import React, { useState } from "react";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import { useOrganizationModal } from "../../hooks/useOrganization";
+import OrganizationsList from "../../components/Organization/OrganizationsList";
 
 const OrganizationPage = () => {
   const orgModal = useOrganizationModal()
+  const [searchText,setSearchText] = useState("")
+
   return (
     <div className="container-fluid">
       <Breadcrumb
@@ -12,10 +15,12 @@ const OrganizationPage = () => {
       <div className="card my-3 px-sm-2 px-0">
         <div className="card-body py-2 px-3">
           <div className="row align-items-center">
-            <div className="col-6 ">
+            <div className="col-6 d-flex  ">
               <div className="d-flex align-items-center">
                 <input
                   type="search"
+                  value={searchText}
+                  onChange={(e)=>setSearchText(e.target.value)}
                   className="form-control form-control-sm w-auto"
                   placeholder="Search Organization"
                   aria-describedby="search-label"
@@ -36,6 +41,8 @@ const OrganizationPage = () => {
           </div>
         </div>
       </div>
+      <OrganizationsList searchText={searchText}/>
+
     </div>
   );
 };

src/repositories/OrganizationRespository.jsx

@@ -1,9 +1,14 @@
 import { api } from "../utils/axiosClient";
 
-
+const OrganizationRepository = {
-const OrganizationRepository =  {
+  createOrganization: (data) => api.post("/api/Organization/create", data),
-  createOrganization:(data)=>api.post('/api/Organization/create',data)
+  getOrganizationList: (pageSize, pageNumber, active, sprid, searchString) => {
-}
+    return api.get(
+      `/api/Organization/list?pageSize=${pageSize}&pageNumber=${pageNumber}&active=${active}&${
+        sprid ? `sprid=${sprid}&` : ""
+      }searchString=${searchString}`
+    );
+  },
+};
 
 export default OrganizationRepository;
-