added create service project and separated service project and orgnaization project

src/components/Project/ProjectCard.jsx

@@ -18,7 +18,7 @@ import { useDispatch } from "react-redux";
 import { setProjectId } from "../../slices/localVariablesSlice";
 import { useProjectContext } from "../../pages/project/ProjectPage";
 
-const ProjectCard = ({ project }) => {
+const ProjectCard = ({ project, isCore = true }) => {
   const dispatch = useDispatch();
   const navigate = useNavigate();
   const ManageProject = useHasUserPermission(MANAGE_PROJECT);
@@ -34,13 +34,30 @@ const ProjectCard = ({ project }) => {
   const handleClose = () => setShowModal(false);
 
   const handleViewProject = () => {
-    dispatch(setProjectId(project.id));
-    navigate(`/projects/details`);
+    if (isCore) {
+      dispatch(setProjectId(project.id));
+      navigate(`/projects/details`);
+    } else {
+      navigate(`/service-projects/${project.id}`);
+    }
   };
   const handleViewActivities = () => {
     dispatch(setProjectId(project.id));
     navigate(`/activities/records?project=${project.id}`);
   };
+  const handleManage = () => {
+    if (isCore) {
+      setMangeProject({
+        isOpen: true,
+        Project: project.id,
+      });
+    } else {
+      setManageServiceProject({
+        isOpen: true,
+        Project: project.id,
+      });
+    }
+  };
   return (
     <>
       <div className="col-md-6 col-lg-4 col-xl-4 order-0 mb-4">
@@ -96,22 +113,19 @@ const ProjectCard = ({ project }) => {
                     </li>
 
                     <li>
-                      <a className="dropdown-item"   onClick={() =>
-                          setMangeProject({
-                            isOpen: true,
-                            Project: project.id,
-                          })
-                        }>
+                      <a className="dropdown-item" onClick={handleManage}>
                         <i className="bx bx-pencil me-2"></i>
                         <span className="align-left">Modify</span>
                       </a>
                     </li>
-                    <li onClick={handleViewActivities}>
-                      <a className="dropdown-item">
-                        <i className="bx bx-task me-2"></i>
-                        <span className="align-left">Activities</span>
-                      </a>
-                    </li>
+                    {isCore && (
+                      <li onClick={handleViewActivities}>
+                        <a className="dropdown-item">
+                          <i className="bx bx-task me-2"></i>
+                          <span className="align-left">Activities</span>
+                        </a>
+                      </li>
+                    )}
                   </ul>
                 </div>
               </div>

src/components/Project/ProjectCardView.jsx

@@ -1,70 +1,29 @@
-import React from 'react'
-import { useProjects } from '../../hooks/useProjects'
-import Loader from '../common/Loader'
-import ProjectCard from './ProjectCard'
-
-const ProjectCardView = ({currentItems,setCurrentPage,totalPages }) => {
-
+import React from "react";
+import { useProjects } from "../../hooks/useProjects";
+import Loader from "../common/Loader";
+import ProjectCard from "./ProjectCard";
+import Pagination from "../common/Pagination";
 
+const ProjectCardView = ({ data, currentPage, totalPages, paginate }) => {
   return (
+    <div className="row page-min-h">
+      {data?.length === 0 && (
+        <p className="text-center text-muted">No projects found.</p>
+      )}
 
-      <div className="row page-min-h">
+      {data?.map((project) => (
+        <ProjectCard key={project.id} project={project} />
+      ))}
 
-          { currentItems.length === 0 && (
-            <p className="text-center text-muted">No projects found.</p>
-          )}
+      <div className="col-12 d-flex justify-content-start mt-3">
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={paginate}
+        />
+      </div>
+    </div>
+  );
+};
 
-            {currentItems.map((project) => (
-              <ProjectCard
-                key={project.id}
-                project={project}
-              />
-            ))}
-
-
-             {  totalPages > 1 && (
-          <nav>
-            <ul className="pagination pagination-sm justify-content-end py-2">
-              <li className={`page-item ${currentPage === 1 && "disabled"}`}>
-                <button
-                  className="page-link"
-                  onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
-                >
-                  &laquo;
-                </button>
-              </li>
-              {[...Array(totalPages)].map((_, i) => (
-                <li
-                  key={i}
-                  className={`page-item ${currentPage === i + 1 && "active"}`}
-                >
-                  <button
-                    className="page-link"
-                    onClick={() => setCurrentPage(i + 1)}
-                  >
-                    {i + 1}
-                  </button>
-                </li>
-              ))}
-              <li
-                className={`page-item ${currentPage === totalPages && "disabled"
-                  }`}
-              >
-                <button
-                  className="page-link"
-                  onClick={() =>
-                    setCurrentPage((p) => Math.min(totalPages, p + 1))
-                  }
-                >
-                  &raquo;
-                </button>
-              </li>
-            </ul>
-          </nav>
-        )}
-          </div>
-  
-  )
-}
-
-export default ProjectCardView
+export default ProjectCardView;

src/components/ServiceProject/ManageServiceProject.jsx

@@ -0,0 +1,225 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import React, { useState } from "react";
+import { defaultProjectValues } from "./ServiceProjectSchema";
+import Label from "../common/Label";
+import { FormProvider, useForm } from "react-hook-form";
+import { useGlobalServices } from "../../hooks/masterHook/useMaster";
+import { ITEMS_PER_PAGE, PROJECT_STATUS } from "../../utils/constants";
+import DatePicker from "../common/DatePicker";
+
+import SelectMultiple from "../common/SelectMultiple";
+import { projectSchema } from "./ServiceProjectSchema";
+import {
+  useOrganization,
+  useOrganizationsList,
+} from "../../hooks/useOrganization";
+import { error } from "pdf-lib";
+import { useCreateServiceProject } from "../../hooks/useServiceProject";
+
+const ManageServiceProject = ({ servieceProjectId }) => {
+  console.log(servieceProjectId)
+  const [searchText, setSearchText] = useState("");
+  const methods = useForm({
+    resolver: zodResolver(projectSchema),
+    defaultValues: defaultProjectValues,
+  });
+  const {
+    register,
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = methods;
+  const { data, isError, isLoading } = useGlobalServices();
+  const { data: organization, isLoading: isLoadingOrganization } =
+    useOrganizationsList(ITEMS_PER_PAGE, 1, true);
+
+  const { mutate: CreateServiceProject, isPending } = useCreateServiceProject();
+  const onSubmit = (formData) => {
+    formData.services = formData.services.filter((s) => s.serviceId);
+    CreateServiceProject(formData);
+  };
+  return (
+    <FormProvider {...methods}>
+      <form className="px-3 py-2" onSubmit={handleSubmit(onSubmit)}>
+        <div className=" text-center">
+          <h5>Create Project</h5>
+        </div>
+        <div className="row text-start">
+          <div className="col-12 mb-2">
+            <Label htmlFor="name" required>
+              Project Name
+            </Label>
+            <input
+              type="text"
+              className="form-control form-control-sm"
+              {...register("name")}
+            />
+            {errors?.name && (
+              <span className="danger-text">{errors.name.message}</span>
+            )}
+          </div>
+          <div className="col-12 mb-2">
+            <Label htmlFor="name" required>
+              Short Name (Short Project Name)
+            </Label>
+            <input
+              type="text"
+              className="form-control form-control-sm"
+              {...register("shortName")}
+            />
+            {errors?.shortName && (
+              <span className="danger-text">{errors.shortName.message}</span>
+            )}
+          </div>
+          <div className="col-12 mb-2">
+            <Label htmlFor="name" required>
+              Client
+            </Label>
+            <select
+              className="select2 form-select form-select-sm"
+              aria-label="Default select example"
+              {...register("clientId", {
+                required: "Client is required",
+                valueAsNumber: false,
+              })}
+            >
+              {isLoading ? (
+                <option>Loading...</option>
+              ) : (
+                <>
+                  <option value="">Select Client</option>
+                  {organization?.data?.map((org) => (
+                    <option key={org.id} value={org.id}>
+                      {org.name}
+                    </option>
+                  ))}
+                </>
+              )}
+            </select>
+            {errors?.clientId && (
+              <span className="danger-text">{errors.clientId.message}</span>
+            )}
+          </div>
+          <div className="col-12 mb-2">
+            <SelectMultiple
+              options={data?.data}
+              isLoading={isLoading}
+              name="services"
+              valueKey="id"
+              labelKey="name"
+              label="Select Cient"
+            />
+          </div>
+          <div className="col-12 mb-2">
+            <Label htmlFor="name" required>
+              Select Status
+            </Label>
+            <select
+              className="form-select form-select-sm"
+              {...register("statusId")}
+            >
+              <option>Select Service</option>
+              {PROJECT_STATUS.map((status) => (
+                <option value={status.id}>{status.label}</option>
+              ))}
+            </select>
+            {errors?.statusId && (
+              <span className="danger-text">{errors.statusId.message}</span>
+            )}
+          </div>
+          <div className="col-12 col-md-6 mb-2">
+            <Label htmlFor="name" required>
+              Contact Name
+            </Label>
+            <input
+              type="text"
+              className="form-control form-control-sm"
+              {...register("contactName")}
+            />
+            {errors?.contactName && (
+              <span className="danger-text">{errors.contactName.message}</span>
+            )}
+          </div>
+          <div className="col-12 col-md-6 mb-2">
+            <Label htmlFor="name" required>
+              Contact Email
+            </Label>
+            <input
+              type="text"
+              className="form-control form-control-sm"
+              {...register("contactEmail")}
+            />
+            {errors?.contactEmail && (
+              <span className="danger-text">{errors.contactEmail.message}</span>
+            )}
+          </div>
+          <div className="col-12 col-md-6 mb-2">
+            <Label htmlFor="name" required>
+              Contact Number
+            </Label>
+            <input
+              type="text"
+              className="form-control form-control-sm"
+              {...register("contactPhone")}
+            />
+            {errors?.contactPhone && (
+              <span className="danger-text">{errors.contactPhone.message}</span>
+            )}
+          </div>
+          <div className="col-12 col-md-6 mb-2">
+            <Label htmlFor="name" required>
+              Assign Date
+            </Label>
+            <DatePicker
+              name="assignedDate"
+              className="w-full"
+              control={control}
+            />
+          </div>
+          <div className="col-12 col-md-12 mb-2">
+            <Label htmlFor="address" required>
+              Project Address
+            </Label>
+            <div className="input-group">
+              <textarea
+                name="address"
+                className="form-control"
+                //   maxLength={maxAddressLength}
+                {...register("address")}
+                //   onChange={(e) => {
+                //     setAddressLength(e.target.value.length);
+                //   }}
+              />
+            </div>
+
+            <div className="text-end" style={{ fontSize: "12px" }}>
+              {/* {maxAddressLength - addressLength} characters left */}
+            </div>
+            {errors.address && (
+              <div className="danger-text text-start">
+                {errors.address.message}
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="d-flex justify-content-end gap-4">
+          <button
+            className="btn btn-sm  btn-outline-secondary"
+            disabled={isPending}
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            className="btn btn-sm btn-primary"
+            disabled={isPending}
+          >
+            {isPending ? "Please wait..." : "Submit"}
+          </button>
+        </div>
+      </form>
+    </FormProvider>
+  );
+};
+
+export default ManageServiceProject;

src/components/ServiceProject/ServiceProjectNav.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+
+const ServiceProjectNav = ({ onPillClick, activePill }) => {
+    const ProjectTab = [
+    { key: "profile", icon: "bx bx-user", label: "Profile" },
+    { key: "teams", icon: "bx bx-group", label: "Teams" },
+ 
+    {
+      key: "directory",
+      icon: "bx bxs-contact",
+      label: "Directory",
+    },
+
+  ];
+  return (
+     <div className="table-responsive">
+      <div className="nav-align-top">
+        <ul className="nav nav-tabs">
+          {ProjectTab?.filter((tab) => !tab.hidden)?.map((tab) => (
+            <li key={tab.key} className="nav-item cursor-pointer">
+              <a
+
+                className={`nav-link ${activePill === tab.key ? "active cursor-pointer" : ""
+                  } fs-6`}
+                onClick={(e) => {
+                  e.preventDefault();
+                  onPillClick(tab.key);
+                }}
+              >
+                <i className={`${tab.icon} bx-sm me-1_5`}></i>
+                <span className="d-none d-md-inline  ">{tab.label}</span>
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+export default ServiceProjectNav

src/components/ServiceProject/ServiceProjectProfile.jsx

@@ -0,0 +1,97 @@
+import React from "react";
+import { useParams } from "react-router-dom";
+import { useServiceProject } from "../../hooks/useServiceProject";
+import { formatUTCToLocalTime } from "../../utils/dateUtils";
+
+const ServiceProjectProfile = () => {
+  const { id } = useParams();
+  const { data, isLoading, isError, error } = useServiceProject(id);
+  if (isLoading) {
+    return <div className="">Loadng.</div>;
+  }
+  return (
+    <div className="row py-2">
+        <div className="col-md-6 col-lg-4 order-2 mb-6">
+            <div className="card mb-4">
+                <div className="card-header text-start">
+                  <h5 className="card-action-title mb-0 ps-1">
+                    {" "}
+                    <i className="fa fa-building rounded-circle text-primary"></i>
+                    <span className="ms-2 fw-bold">Project Profile</span>
+                  </h5>
+                </div>
+                <div className="card-body">
+                  <ul className="list-unstyled my-3 ps-0 text-start">
+             
+                      <li className="d-flex mb-3">
+                      <div className="d-flex align-items-start" style={{ minWidth: "150px" }}>
+                         <i className="bx bx-cog"></i>
+                        <span className="fw-medium mx-2 text-nowrap">Name:</span>
+                      </div>
+    
+                      {/* Content section that wraps nicely */}
+                      <div className="flex-grow-1 text-start text-wrap">
+                        {data.name}
+                      </div>
+                    </li>
+                    <li className="d-flex mb-3">
+                      <div className="d-flex align-items-center" style={{ width: '150px' }}>
+                        <i className="bx bx-fingerprint"></i>
+                        <span className="fw-medium mx-2">Nick Name:</span>
+                      </div>
+                      <span>{data.shortName}</span>
+                    </li>
+                    <li className="d-flex mb-3">
+                      <div className="d-flex align-items-center" style={{ width: '150px' }}>
+                        <i className="bx bx-check"></i>
+                        <span className="fw-medium mx-2">Assign Date:</span>
+                      </div>
+                      <span>
+                        {data.assignedDate ? formatUTCToLocalTime(data.assignedDate) : "NA"}
+                      </span>
+                    </li>
+                  
+                    <li className="d-flex mb-3">
+                      <div className="d-flex align-items-center" style={{ width: '150px' }}>
+                        <i className="bx bx-trophy"></i>
+                        <span className="fw-medium mx-2">Status:</span>
+                      </div>
+                      <span>{data?.status.status}</span>
+                    </li>
+                    <li className="d-flex mb-3">
+                      <div className="d-flex align-items-center" style={{ width: '150px' }}>
+                        <i className="bx bx-user"></i>
+                        <span className="fw-medium mx-2">Contact:</span>
+                      </div>
+                      <span>{data.contactName}</span>
+                    </li>
+                    <li className="d-flex mb-3">
+                      {/* Label section with icon */}
+                      <div className="d-flex align-items-start" style={{ minWidth: "150px" }}>
+                        <i className="bx bx-flag mt-1"></i>
+                        <span className="fw-medium mx-2 text-nowrap">Address:</span>
+                      </div>
+    
+                      {/* Content section that wraps nicely */}
+                      <div className="flex-grow-1 text-start text-wrap">
+                        {data.address}
+                      </div>
+                    </li>
+    
+    
+    
+                    <li className="d-flex justify-content-center mt-4"> {/* Added mt-4 for some top margin */}
+                  
+                    </li>
+                  </ul>
+    
+                </div>
+              </div>
+        </div>
+    
+    
+    </div>
+  );
+};
+
+export default ServiceProjectProfile;

src/components/ServiceProject/ServiceProjectSchema.jsx

@@ -0,0 +1,53 @@
+import { z } from "zod";
+
+export const projectSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  shortName: z.string().min(1, "Short name is required"),
+  clientId: z.string().min(1, { message: "Client is required" }),
+  services: z
+    .any() // accept anything, then sanitize below
+    .transform((val) => {
+      if (!Array.isArray(val)) return [];
+      return val
+        .map((item) => {
+          if (typeof item === "string") {
+            return { serviceId: item, isActive: true };
+          }
+          if (item && typeof item === "object" && "serviceId" in item) {
+            return { serviceId: item.serviceId, isActive: !!item.isActive };
+          }
+          return null;
+        })
+        .filter(Boolean);
+    })
+    .refine((arr) => arr.length > 0, {
+      message: "At least one service is required",
+    }),
+  address: z.string().min(1, "Address is required"),
+  assignedDate: z.string().min(1, { message: "Date is required" }),
+  statusId: z.string().min(1, "Status is required"),
+  contactName: z.string().min(1, "Contact name is required"),
+  contactPhone: z
+    .string()
+    .min(7, "Invalid phone number")
+    .max(15, "Phone number too long"),
+  contactEmail: z.string().email("Invalid email address"),
+});
+
+export const defaultProjectValues = {
+  name: "",
+  shortName: "",
+  clientId: "",
+  services: [
+    {
+      serviceId:null,
+      isActive: true,
+    },
+  ],
+  address: "",
+  assignedDate: "",
+  statusId: "",
+  contactName: "",
+  contactPhone: "",
+  contactEmail: "",
+};

src/hooks/useProjects.js

@@ -20,12 +20,12 @@ export const useCurrentService = () => {
 
 // ------------------------------Query-------------------
 
-export const useProjects = () => {
+export const useProjects = (pageSize,pageNumber) => {
   const loggedUser = useSelector((store) => store.globalVariables.loginUser);
   return useQuery({
-    queryKey: ["ProjectsList"],
+    queryKey: ["ProjectsList",pageSize,pageNumber],
     queryFn: async () => {
-      const response = await ProjectRepository.getProjectList();
+      const response = await ProjectRepository.getProjectList(pageSize,pageNumber);
       return response.data;
     },
     enabled: !!loggedUser,

src/hooks/useServiceProject.jsx

@@ -0,0 +1,41 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { ServiceProjectRepository } from "../repositories/ServiceProject";
+import showToast from "../services/toastService";
+
+
+
+export const useServiceProjects = (pageSize,pageNumber)=>{
+  return useQuery({
+    queryKey:["serviceProjects",pageSize,pageNumber],
+    queryFn:async()=> {
+      const response = await ServiceProjectRepository.GetServiceProjects(pageSize,pageNumber);
+      return response.data;
+    },
+  })
+}
+export const useServiceProject=(projectId)=>{
+   return useQuery({
+    queryKey:["serviceProject",projectId],
+    queryFn:async()=> {
+      const response = await ServiceProjectRepository.GetServiceProject(projectId);
+      return response.data;
+    },
+  })
+}
+export const useCreateServiceProject = (onSuccessCallback) => {
+  return useMutation({
+    mutationFn: async (playload) =>
+     await ServiceProjectRepository.CreateServiceProject(playload),
+    onSuccess: (data, variables) => {
+      showToast("Project created successfully", "success");
+    },
+    onError: (error) => {
+      showToast(
+        error?.response?.data?.message ||
+          error.message ||
+          "Failed to delete task",
+        "error"
+      );
+    },
+  });
+};

src/pages/ServiceProject/ServiceProjectDetail.jsx

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import Breadcrumb from "../../components/common/Breadcrumb";
+import ServiceProjectNav from "../../components/ServiceProject/ServiceProjectNav";
+import { ComingSoonPage } from "../Misc/ComingSoonPage";
+import ServiceProjectProfile from "../../components/ServiceProject/ServiceProjectProfile";
+
+const ServiceProjectDetail = () => {
+  const [activePill, setActivePill] = useState(
+    sessionStorage.getItem("servicePrjectTab") || "profile"
+  );
+  const handlePillClick = (pillKey) => {
+    setActivePill(pillKey);
+    localStorage.setItem("lastActiveProjectTab", pillKey);
+  };
+  const renderContent = () => {
+    switch (activePill) {
+      case "profile":
+        return <ServiceProjectProfile />;
+      default:
+        return <ComingSoonPage />;
+    }
+  };
+  return (
+    <div className="container-fluid">
+      <Breadcrumb
+        data={[
+          { label: "Home", link: "/dashboard" },
+          { label: "Sevice Projects", link: "/projects" },
+          // { label: projects_Details?.name || "Project", link: null },
+        ]}
+      />
+      <div>
+        <div className="row">
+          <ServiceProjectNav
+            onPillClick={handlePillClick}
+            activePill={activePill}
+          />
+        </div>
+        {renderContent()}
+      </div>
+    </div>
+  );
+};
+
+export default ServiceProjectDetail;

src/pages/ServiceProject/ServiceProjectDisplay.jsx

@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import { useProjectContext } from "../project/ProjectPage";
+import { useServiceProjects } from "../../hooks/useServiceProject";
+import { ITEMS_PER_PAGE } from "../../utils/constants";
+import ProjectCard from "../../components/Project/ProjectCard";
+import Pagination from "../../components/common/Pagination";
+
+const ServiceProjectDisplay = ({ listView }) => {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const { manageServiceProject, setManageServiceProject } = useProjectContext();
+  const { data, isLoading, isError, error } = useServiceProjects(
+    ITEMS_PER_PAGE,
+    currentPage
+  );
+   const paginate = (page) => {
+    if (page >= 1 && page <= (data?.totalPages ?? 1)) {
+      setCurrentPage(page);
+    }
+  };
+  return (
+    <div className="row">
+      {listView ? (
+        <p>List</p>
+      ) : (
+        data?.data?.map((project) => (
+          <ProjectCard project={project} isCore={false} />
+        ))
+      )}
+      <div className="col-12 d-flex justify-content-start mt-3">
+        <Pagination
+          currentPage={currentPage}
+          totalPages={data?.totalPages}
+          onPageChange={paginate}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ServiceProjectDisplay;

src/pages/project/ProjectPage.jsx

@@ -9,6 +9,10 @@ import usePagination from "../../hooks/usePagination";
 import { useProjects } from "../../hooks/useProjects";
 import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { SpinnerLoader } from "../../components/common/Loader";
+import { useServiceProjects } from "../../hooks/useServiceProject";
+import ManageServiceProject from "../../components/ServiceProject/ManageServiceProject";
+import ProjectsDisplay from "./ProjectsDisplay";
+import ServiceProjectDisplay from "../ServiceProject/ServiceProjectDisplay";
 
 const ProjectContext = createContext();
 export const useProjectContext = () => {
@@ -22,90 +26,30 @@ export const useProjectContext = () => {
 const ProjectPage = () => {
   const [manageProject, setMangeProject] = useState({
     isOpen: false,
-    Project: null,
+    project: null,
+  });
+  const [manageServiceProject, setManageServiceProject] = useState({
+    isOpen: false,
+    project: null,
   });
 
   const [projectList, setProjectList] = useState([]);
   const [listView, setListView] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
+  const [coreProjects, setCoreProjects] = useState(true);
   const HasManageProject = useHasUserPermission(MANAGE_PROJECT);
 
   const [selectedStatuses, setSelectedStatuses] = useState(
     PROJECT_STATUS.map((s) => s.id)
   );
 
-  const { data, isLoading, isError, error } = useProjects();
-
   const contextDispatcher = {
     setMangeProject,
+    setManageServiceProject,
+    manageProject,
+    manageServiceProject
   };
-
-  const filteredProjects = projectList.filter((project) => {
-    const matchesStatus = selectedStatuses.includes(project.projectStatusId);
-    const matchesSearch = project.name
-      .toLowerCase()
-      .includes(searchTerm.toLowerCase());
-    return matchesStatus && matchesSearch;
-  });
-
-  const totalPages = Math.ceil(filteredProjects.length / ITEMS_PER_PAGE);
-
-  const { currentItems, currentPage, paginate, setCurrentPage } = usePagination(
-    filteredProjects,
-    ITEMS_PER_PAGE
-  );
-
-  const handleStatusChange = (statusId) => {
-    setCurrentPage(1);
-    setSelectedStatuses((prev) =>
-      prev.includes(statusId)
-        ? prev.filter((id) => id !== statusId)
-        : [...prev, statusId]
-    );
-  };
-
-  const sortingProject = (projects) => {
-    if (!isLoading && Array.isArray(projects)) {
-      const grouped = {};
-
-      projects.forEach((project) => {
-        const statusId = project.projectStatusId;
-        if (!grouped[statusId]) grouped[statusId] = [];
-        grouped[statusId].push(project);
-      });
-
-      const sortedGrouped = selectedStatuses
-        .filter((statusId) => grouped[statusId])
-        .flatMap((statusId) =>
-          grouped[statusId].sort((a, b) =>
-            a.name.toLowerCase().localeCompare(b.name.toLowerCase())
-          )
-        );
-
-      setProjectList((prev) => {
-        const isSame = JSON.stringify(prev) === JSON.stringify(sortedGrouped);
-        return isSame ? prev : sortedGrouped;
-      });
-    }
-  };
-
-  useEffect(() => {
-    if (!isLoading && data) {
-      sortingProject(data);
-    }
-  }, [data, isLoading, selectedStatuses]);
-
-  if (isLoading)
-    return (
-      <div
-        className="page-min-h d-flex justify-content-center align-items-center"
-        style={{ minHeight: "80vh" }}
-      >
-        <SpinnerLoader />
-      </div>
-    );
-
-  if (isError) return <div className="page-min-h d-flex justify-content-center align-items-center"><p>{error.message}</p></div>
+  const handleToggleProject = (e) => setCoreProjects(e.target.checked);
   return (
     <ProjectContext.Provider value={contextDispatcher}>
       <div className="container-fluid">
@@ -184,6 +128,21 @@ const ProjectPage = () => {
                     ))}
                   </ul>
                 </div>
+                <div className="form-check form-switch d-flex align-items-center text-nowrap ms-3">
+                  <input
+                    type="checkbox"
+                    className="form-check-input"
+                    id="activeEmployeeSwitch"
+                    checked={coreProjects}
+                    onChange={handleToggleProject}
+                  />
+                  <label
+                    className="form-check-label ms-2"
+                    htmlFor="activeEmployeeSwitch"
+                  >
+                    {coreProjects ? "Organization Project" : "Service Project"}
+                  </label>
+                </div>
               </div>
 
               {HasManageProject && (
@@ -200,41 +159,29 @@ const ProjectPage = () => {
                       Add New Project
                     </span>
                   </button>
+                  <ul class="dropdown-menu">
+                    <li
+                      onClick={() =>
+                        setManageServiceProject({ isOpen: true, Project: null })
+                      }
+                    >
+                      <a class="dropdown-item">Service Project</a>
+                    </li>
+                    <li
+                      onClick={() =>
+                        setMangeProject({ isOpen: true, Project: null })
+                      }
+                    >
+                      <a class="dropdown-item">Organization Project</a>
+                    </li>
+                  </ul>
                 </div>
               )}
             </div>
           </div>
         </div>
 
-        {/* Project Render here */}
-        {listView ? (
-          <ProjectListView
-            currentItems={currentItems}
-            selectedStatuses={selectedStatuses}
-            handleStatusChange={handleStatusChange}
-            setCurrentPage={setCurrentPage}
-            totalPages={totalPages}
-            isLoading={isLoading}
-          />
-        ) : (
-          <ProjectCardView currentItems={currentItems} setCurrentPage={setCurrentPage} totalPages={totalPages} />
-        )}
-
-        {/* ------------------ */}
-
-        {/* Project Manage UPdate or create */}
-
-        {manageProject.isOpen && (
-          <GlobalModel
-            isOpen={manageProject.isOpen}
-            closeModal={() => setMangeProject({ isOpen: false, Project: null })}
-          >
-            <ManageProjectInfo
-              project={manageProject.Project}
-              onClose={() => setMangeProject({ isOpen: false, Project: null })}
-            />
-          </GlobalModel>
-        )}
+        {coreProjects ? <ProjectsDisplay /> : <ServiceProjectDisplay />}
       </div>
     </ProjectContext.Provider>
   );

src/pages/project/ProjectsDisplay.jsx

@@ -0,0 +1,153 @@
+import React, { useEffect, useState } from "react";
+import ProjectListView from "../../components/Project/ProjectListView";
+import ProjectCardView from "../../components/Project/ProjectCardView";
+import GlobalModel from "../../components/common/GlobalModel";
+import ManageServiceProject from "../../components/ServiceProject/ManageServiceProject";
+import { useProjectContext } from "./ProjectPage";
+import { SpinnerLoader } from "../../components/common/Loader";
+import { useProjects } from "../../hooks/useProjects";
+import { useServiceProjects } from "../../hooks/useServiceProject";
+import { ITEMS_PER_PAGE, PROJECT_STATUS } from "../../utils/constants";
+import usePagination from "../../hooks/usePagination";
+import ManageProjectInfo from "../../components/Project/ManageProjectInfo";
+
+const ProjectsDisplay = ({ listView, searchTerm }) => {
+  const [currentPage, setCurrentPage] = useState(1);
+  const {
+    manageProject,
+    manageServiceProject,
+    setMangeProject,
+    setManageServiceProject,
+  } = useProjectContext();
+
+  const [projectList, setProjectList] = useState([]);
+  const [selectedStatuses, setSelectedStatuses] = useState(
+    PROJECT_STATUS.map((s) => s.id)
+  );
+
+  const { data, isLoading, isError, error } = useProjects(ITEMS_PER_PAGE, 1);
+
+  const filteredProjects =
+    data?.data?.filter((project) => {
+      const matchesStatus = selectedStatuses.includes(project.projectStatusId);
+      const matchesSearch = project?.name
+        ?.toLowerCase()
+        ?.includes(searchTerm?.toLowerCase());
+      return matchesStatus && matchesSearch;
+    }) ?? [];
+
+  const paginate = (page) => {
+    if (page >= 1 && page <= (data?.totalPages ?? 1)) {
+      setCurrentPage(page);
+    }
+  };
+
+  const handleStatusChange = (statusId) => {
+    setCurrentPage(1);
+    setSelectedStatuses((prev) =>
+      prev.includes(statusId)
+        ? prev.filter((id) => id !== statusId)
+        : [...prev, statusId]
+    );
+  };
+
+  const sortingProject = (projects) => {
+    if (!isLoading && Array.isArray(projects)) {
+      const grouped = {};
+
+      projects.forEach((project) => {
+        const statusId = project.projectStatusId ?? project?.status?.id;
+        if (!grouped[statusId]) grouped[statusId] = [];
+        grouped[statusId].push(project);
+      });
+
+      const sortedGrouped = selectedStatuses
+        .filter((statusId) => grouped[statusId])
+        .flatMap((statusId) =>
+          grouped[statusId].sort((a, b) =>
+            a?.name?.toLowerCase()?.localeCompare(b?.name?.toLowerCase())
+          )
+        );
+
+      setProjectList((prev) => {
+        const isSame = JSON.stringify(prev) === JSON.stringify(sortedGrouped);
+        return isSame ? prev : sortedGrouped;
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (!isLoading && data?.data) {
+      sortingProject(data.data);
+    }
+  }, [data?.data, isLoading, selectedStatuses]);
+
+  if (isLoading)
+    return (
+      <div
+        className="page-min-h d-flex justify-content-center align-items-center"
+        style={{ minHeight: "80vh" }}
+      >
+        <SpinnerLoader />
+      </div>
+    );
+
+  if (isError)
+    return (
+      <div className="page-min-h d-flex justify-content-center align-items-center">
+        <p>{error.message}</p>
+      </div>
+    );
+  return (
+    <div className="row">
+      {listView ? (
+        <ProjectListView
+          currentItems={currentItems}
+          selectedStatuses={selectedStatuses}
+          handleStatusChange={handleStatusChange}
+          setCurrentPage={setCurrentPage}
+          totalPages={totalPages}
+          isLoading={isLoading}
+        />
+      ) : (
+        <ProjectCardView
+          data={data?.data}
+          currentPage={currentPage}
+          totalPages={data?.totalPages}
+          paginate={paginate}
+        />
+      )}
+
+      {/* Project Manage Update or Create */}
+      {manageProject?.isOpen && (
+        <GlobalModel
+          size="md"
+          isOpen={manageProject?.isOpen}
+          closeModal={() => setMangeProject({ isOpen: false, Project: null })}
+        >
+          <ManageProjectInfo
+            project={manageProject?.Project}
+            onClose={() => setMangeProject({ isOpen: false, Project: null })}
+          />
+        </GlobalModel>
+      )}
+
+      {/* Service Project */}
+      {manageServiceProject?.isOpen && (
+        <GlobalModel
+          size="md"
+          isOpen={manageServiceProject?.isOpen}
+          closeModal={() =>
+            setManageServiceProject({ isOpen: false, Project: null })
+          }
+        >
+          <ManageServiceProject
+            serviceProjectId={manageServiceProject?.Project}
+          />
+        </GlobalModel>
+      )}
+    </div>
+  );
+};
+
+export default ProjectsDisplay;

src/pages/project/ProjectsDisplayGround.jsx

@@ -0,0 +1,154 @@
+import React, { useEffect, useState } from "react";
+import ProjectListView from "../../components/Project/ProjectListView";
+import ProjectCardView from "../../components/Project/ProjectCardView";
+import GlobalModel from "../../components/common/GlobalModel";
+import ManageServiceProject from "../../components/ServiceProject/ManageServiceProject";
+import { useProjectContext } from "./ProjectPage";
+import { SpinnerLoader } from "../../components/common/Loader";
+import { useProjects } from "../../hooks/useProjects";
+import { useServiceProjects } from "../../hooks/useServiceProject";
+import { ITEMS_PER_PAGE, PROJECT_STATUS } from "../../utils/constants";
+import usePagination from "../../hooks/usePagination";
+
+const ProjectsDisplayGround = ({ listView, searchTerm }) => {
+  const {
+    manageProject,
+    manageServiceProject,
+    setMangeProject,
+    setManageServiceProject,
+  } = useProjectContext();
+  const [projectList, setProjectList] = useState([]);
+
+  const [selectedStatuses, setSelectedStatuses] = useState(
+    PROJECT_STATUS.map((s) => s.id)
+  );
+
+  const contextDispatcher = {
+    setMangeProject,
+    setManageServiceProject,
+  };
+  const { data, isLoading, isError, error } = useProjects(ITEMS_PER_PAGE, 1);
+  const filteredProjects = data?.data?.filter((project) => {
+    const matchesStatus = selectedStatuses.includes(project.projectStatusId);
+    const matchesSearch = project?.name
+      ?.toLowerCase()
+      ?.includes(searchTerm?.toLowerCase());
+    return matchesStatus && matchesSearch;
+  });
+
+  const totalPages = Math.ceil(filteredProjects?.length / ITEMS_PER_PAGE);
+
+  const { currentItems, currentPage, paginate, setCurrentPage } = usePagination(
+    filteredProjects,
+    ITEMS_PER_PAGE
+  );
+
+  const handleStatusChange = (statusId) => {
+    setCurrentPage(1);
+    setSelectedStatuses((prev) =>
+      prev.includes(statusId)
+        ? prev.filter((id) => id !== statusId)
+        : [...prev, statusId]
+    );
+  };
+
+  const sortingProject = (projects) => {
+    if (!isLoading && Array.isArray(projects)) {
+      const grouped = {};
+
+      projects.forEach((project) => {
+        const statusId = project.projectStatusId ?? project?.status?.id;
+        if (!grouped[statusId]) grouped[statusId] = [];
+        grouped[statusId].push(project);
+      });
+
+      const sortedGrouped = selectedStatuses
+        .filter((statusId) => grouped[statusId])
+        .flatMap((statusId) =>
+          grouped[statusId].sort((a, b) =>
+            a?.name?.toLowerCase()?.localeCompare(b?.name?.toLowerCase())
+          )
+        );
+
+      setProjectList((prev) => {
+        const isSame = JSON.stringify(prev) === JSON.stringify(sortedGrouped);
+        return isSame ? prev : sortedGrouped;
+      });
+    }
+  };
+  useEffect(() => {
+    if (!isLoading && data) {
+      sortingProject([data.data]);
+    }
+  }, [data?.data, isLoading, selectedStatuses]);
+
+  if (isLoading)
+    return (
+      <div
+        className="page-min-h d-flex justify-content-center align-items-center"
+        style={{ minHeight: "80vh" }}
+      >
+        <SpinnerLoader />
+      </div>
+    );
+
+  if (isError)
+    return (
+      <div className="page-min-h d-flex justify-content-center align-items-center">
+        <p>{error.message}</p>
+      </div>
+    );
+  return (
+    <div className="row">
+      {/* Project Render here */}
+      {listView ? (
+        <ProjectListView
+          currentItems={currentItems}
+          selectedStatuses={selectedStatuses}
+          handleStatusChange={handleStatusChange}
+          setCurrentPage={setCurrentPage}
+          totalPages={totalPages}
+          isLoading={isLoading}
+        />
+      ) : (
+        <ProjectCardView
+          currentItems={currentItems}
+          setCurrentPage={setCurrentPage}
+          totalPages={totalPages}
+        />
+      )}
+
+      {/* Project Manage UPdate or create */}
+      {manageProject?.isOpen && (
+        <GlobalModel
+          size="md"
+          isOpen={manageProject?.isOpen}
+          closeModal={() => setMangeProject({ isOpen: false, Project: null })}
+        >
+          <ManageProjectInfo
+            project={manageProject?.Project}
+            onClose={() => setMangeProject({ isOpen: false, Project: null })}
+          />
+        </GlobalModel>
+      )}
+
+      {/* Servicer Project */}
+
+      {manageServiceProject?.isOpen && (
+        <GlobalModel
+          size="md"
+          isOpen={manageServiceProject?.isOpen}
+          closeModal={() =>
+            setManageServiceProject({ isOpen: false, Project: null })
+          }
+        >
+          <ManageServiceProject
+            serviceProjectId={manageServiceProject?.Project}
+          />
+        </GlobalModel>
+      )}
+    </div>
+  );
+};
+
+export default ProjectsDisplayGround;

src/repositories/ProjectRepository.jsx

@@ -1,7 +1,7 @@
 import { api } from "../utils/axiosClient";
 
 const ProjectRepository = {
-  getProjectList: () => api.get("/api/project/list"),
+  getProjectList: (pageSize,pageNumber) => api.get(`/api/project/list?pageSize=${pageSize}&pageNumber=${pageNumber}`),
   getProjectByprojectId: (projetid) =>
     api.get(`/api/project/details/${projetid}`),
 

src/repositories/ServiceProject.jsx

@@ -0,0 +1,10 @@
+import { api } from "../utils/axiosClient";
+
+export const ServiceProjectRepository = {
+  CreateServiceProject: (data) => api.post("/api/ServiceProject/create", data),
+  GetServiceProjects: (pageSize,pageNumber) => api.get(`/api/ServiceProject/list?pageSize=${pageSize}&pageNumber=${pageNumber}`),
+  GetServiceProject: (id) => api.get(`/api/ServiceProject/details/${id}`),
+  UpdateServiceProject: (id, data) =>
+    api.put(`/api/ServiceProject/edit/${id}`, data),
+  DeleteServiceProject: (id) => api.delete(`/api/ServiceProject/delete/{id}`),
+};

src/router/AppRoutes.jsx

@@ -59,6 +59,7 @@ import MakeSubscription from "../pages/Home/MakeSubscription";
 import PaymentRequestPage from "../pages/PaymentRequest/PaymentRequestPage";
 import RecurringExpensePage from "../pages/RecurringExpense/RecurringExpensePage";
 import AdvancePaymentPage from "../pages/AdvancePayment/AdvancePaymentPage";
+import ServiceProjectDetail from "../pages/ServiceProject/ServiceProjectDetail";
 const router = createBrowserRouter(
   [
     {
@@ -93,6 +94,8 @@ const router = createBrowserRouter(
             { path: "/projects", element: <ProjectPage /> },
             { path: "/projects/details", element: <ProjectDetails /> },
             { path: "/project/manage/:projectId", element: <ManageProject /> },
+            { path: "service-projects/:id", element: <ServiceProjectDetail /> },
+
             { path: "/employees", element: <EmployeeList /> },
             { path: "/employee/:employeeId", element: <EmployeeProfile /> },
             // { path: "/employee/manage", element: <ManageEmp /> },