imported projectLisComponent

src/pages/project/ProjectList.jsx

@@ -7,31 +7,29 @@ import { useProjects } from "../../hooks/useProjects";
 import { useDispatch } from "react-redux";
 import showToast from "../../services/toastService";
 import { getCachedData, cacheData } from "../../slices/apiDataManager";
-import {useHasUserPermission} from "../../hooks/useHasUserPermission"
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { useProfile } from "../../hooks/useProfile";
 import { MANAGE_PROJECT } from "../../utils/constants";
+import ProjectListView from "./ProjectListView";
 
-const ProjectList = () =>
+const ProjectList = () => {
-{
-
-
   const { profile: loginUser } = useProfile();
+  const [listView, setListView] = useState(true);
   const [showModal, setShowModal] = useState(false);
   const { projects, loading, error, refetch } = useProjects();
   const [refresh, setRefresh] = useState(false);
   const [projectList, setProjectList] = useState([]);
-  const HasManageProjectPermission = useHasUserPermission( MANAGE_PROJECT )
+  const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
-  const[HasManageProject,setHasManageProject] = useState(HasManageProjectPermission)
+  const [HasManageProject, setHasManageProject] = useState(
+    HasManageProjectPermission
+  );
   const dispatch = useDispatch();
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage] = useState(6);
 
-    
   const handleShow = () => setShowModal(true);
   const handleClose = () => setShowModal(false);
 
-
-
   useEffect(() => {
     if (!loading && Array.isArray(projects)) {
       // Step 1: Group projects by statusId
@@ -56,32 +54,31 @@ const ProjectList = () =>
 
       setProjectList(sortedGrouped); // final sorted flat list
     }
-    
   }, [projects, loginUser?.projects, loading]);
 
   useEffect(() => {
     if (loginUser) {
       setHasManageProject(HasManageProjectPermission);
     } else {
-      setHasManageProject(false);     }
+      setHasManageProject(false);
+    }
   }, [loginUser, HasManageProjectPermission]);
 
-
-
   const handleSubmitForm = (newProject) => {
     ProjectRepository.manageProject(newProject)
-      .then( ( response ) =>
+      .then((response) => {
-      {
-       
         const cachedProjects_list = getCachedData("projectslist") || [];
 
         const updated_Projects_list = [...cachedProjects_list, response.data];
 
         cacheData("projectslist", updated_Projects_list);
-        setProjectList((prevProjectList) => [...prevProjectList, response.data]);
+        setProjectList((prevProjectList) => [
+          ...prevProjectList,
+          response.data,
+        ]);
 
         showToast("Project Created successfully.", "success");
-        setShowModal(false)
+        setShowModal(false);
       })
       .catch((error) => {
         closeModal();
@@ -107,15 +104,13 @@ const ProjectList = () =>
     ? Math.ceil(projectList.length / itemsPerPage)
     : 0;
 
- 
-  
   return (
     <>
       <div
-        className={`modal fade ${showModal ? 'show' : ''}`}
+        className={`modal fade ${showModal ? "show" : ""}`}
         tabIndex="-1"
         role="dialog"
-        style={{ display: showModal ? 'block' : 'none' }}
+        style={{ display: showModal ? "block" : "none" }}
         aria-hidden={!showModal}
       >
         <ManageProjectInfo
@@ -133,16 +128,51 @@ const ProjectList = () =>
           ]}
         ></Breadcrumb>
 
-        <div className="row">
+        <div className="d-flex justify-content-between mb-4">
-          <div
+          {/* <div
             className={`col-md-12 col-lg-12 col-xl-12 order-0 mb-4 ${
               !error && !projects ? "text-center" : "text-end"
             }`}
           >
-            {" "}
+           
+          
+          </div> */}
+
+          <div>
+            <div
+              id="DataTables_Table_0_filter"
+              className="dataTables_filter d-flex justify-content-start"
+            >
+              <label>
+                <input
+                  type="search"
+                  className="form-control form-control-sm"
+                  placeholder="Search"
+                  aria-controls="DataTables_Table_0"
+                ></input>
+              </label>
               <button
                 type="button"
-              className={`btn btn-xs btn-primary ${!HasManageProject && 'd-none' }`}
+                className={`btn btn-icon btn-sm ms-2  p-0  ${ listView ? "btn-secondary" : "btn-label-secondary" }`}
+                onClick={()=>setListView(!listView)}
+              >
+                <span class="bx bx-list-ul"></span>
+              </button>
+              <button
+                type="button"
+                className={`btn btn-icon btn-sm ms-2  p-0  ${ listView ? "btn-label-secondary" : "btn-secondary" }`}
+                onClick={()=>setListView(!listView)}
+              >
+                <span class="bx bx-grid-alt"></span>
+              </button>
+            </div>
+          </div>
+          <div>
+            <button
+              type="button"
+              className={`btn btn-xs btn-primary ${
+                !HasManageProject && "d-none"
+              }`}
               data-bs-toggle="modal"
               data-bs-target="#create-project-model"
               onClick={handleShow}
@@ -175,8 +205,8 @@ const ProjectList = () =>
         <div className="row">
           {loading && <p className="text-center">Loading...</p>}
            
-          
+          {listView ? <ProjectListView/> :
-          {currentItems &&
+        currentItems &&
             currentItems.map((item) => (
               <ProjectCard projectData={item} key={item.id}></ProjectCard>
             ))}
@@ -186,9 +216,7 @@ const ProjectList = () =>
           <nav aria-label="Page ">
             <ul className="pagination pagination-sm justify-content-end py-1">
               <li
-                        className={`page-item  ${
+                className={`page-item  ${currentPage === 1 ? "disabled" : ""}`}
-                          currentPage === 1 ? "disabled" : ""
-                        }`}
               >
                 <button
                   className="page-link btn-xs"