Adding Services in Setting.

src/components/Project/ProjectSetting.jsx

@@ -1,6 +1,8 @@
 import React, { useState } from "react";
 import { ComingSoonPage } from "../../pages/Misc/ComingSoonPage";
 import ProjectPermission from "./ProjectPermission";
+import ListViewContact_1 from "./services/Services";
+import ServiceListView from "./services/Services";
 
 const ProjectSetting = () => {
   const [activePill, setActivePill] = useState("Permissions")
@@ -9,7 +11,7 @@ const ProjectSetting = () => {
   // });
   const projectSettingTab = [
     { key: "Permissions", label: "Permissions" },
-    { key: "Notification", label: "Notification" },
+    { key: "services", label: "Services" },
     { key: "SeparatedLink", label: "Separated link", isButton: true },
   ];
   const handlePillClick = (pillKey) => {
@@ -22,8 +24,8 @@ const ProjectSetting = () => {
       case "Permissions":
         return <ProjectPermission />;
 
-      case "Notification":
-        return <ComingSoonPage />;
+      case "services":
+        return <ServiceListView />;
 
       default:
         return <ComingSoonPage />;
@@ -33,7 +35,7 @@ const ProjectSetting = () => {
   return (
     <div className="w-100">
       <div className="card py-2 px-5">
-        {/* <div className="col-12">
+        <div className="col-12">
           <div className="dropdown text-end">
             <button
               className="btn btn-sm btn-outline-primary dropdown-toggle"
@@ -64,7 +66,7 @@ const ProjectSetting = () => {
               )}
             </ul>
           </div>
-        </div> */}
+        </div>
 
         <div className="mt-3">{renderContent()}</div>
       </div>

src/components/Project/services/Services.jsx

@@ -0,0 +1,105 @@
+import React from "react";
+import { useProjectAssignedServices } from "../../../hooks/useProjects";
+import { useSelectedProject } from "../../../slices/apiDataManager";
+
+const ServiceListView = () => {
+    const projectId = useSelectedProject();
+    const { data, isLoading, error } = useProjectAssignedServices(projectId);
+
+    const serviceColumns = [
+        {
+            key: "name",
+            label: "Service Name",
+            getValue: (service) => (
+                <span
+                    className="text-truncate d-inline-block"
+                    style={{ maxWidth: "200px" }}
+                >
+                    {service?.name || "N/A"}
+                </span>
+            ),
+            align: "text-start",
+        },
+        {
+            key: "description",
+            label: "Description",
+            getValue: (service) => (
+                <span
+                    className="text-truncate d-inline-block"
+                    style={{ maxWidth: "400px" }}
+                    title={service?.description}
+                >
+                    {service?.description || "N/A"}
+                </span>
+            ),
+            align: "text-start",
+        },
+        {
+            key: "isActive",
+            label: "Status",
+            getValue: (service) => (
+                <span
+                    className={`badge ${service?.isActive ? "bg-success" : "bg-secondary"
+                        }`}
+                >
+                    {service?.isActive ? "Active" : "Inactive"}
+                </span>
+            ),
+            align: "text-center",
+        },
+    ];
+
+    if (isLoading)
+        return <div className="p-4 text-center">Loading services...</div>;
+    if (error)
+        return (
+            <div className="p-4 text-center text-danger">
+                Failed to load services: {error.message}
+            </div>
+        );
+
+    const services = data || [];
+
+    return (
+        <div className="card-datatable table-responsive">
+            <div className="dataTables_wrapper no-footer mx-5 pb-2">
+                
+                <table className="table dataTable text-nowrap">
+                    <thead>
+                        <tr className="table_header_border">
+                            {serviceColumns.map((col) => (
+                                <th key={col.key} className={col.align}>
+                                    {col.label}
+                                </th>
+                            ))}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {Array.isArray(services) && services.length > 0 ? (
+                            services.map((row, i) => (
+                                <tr key={i}>
+                                    {serviceColumns.map((col) => (
+                                        <td key={col.key} className={col.align}>
+                                            {col.getValue(row)}
+                                        </td>
+                                    ))}
+                                </tr>
+                            ))
+                        ) : (
+                            <tr style={{ height: "200px" }}>
+                                <td
+                                    colSpan={serviceColumns.length}
+                                    className="text-center border-0 align-middle"
+                                >
+                                    No services found
+                                </td>
+                            </tr>
+                        )}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+};
+
+export default ServiceListView;