Add cards in project list and diectory list views

public/assets/css/default.css

@@ -213,3 +213,8 @@
 .ql-editor {
   max-height: 200px;
 }
+
+/* Remove Table Header Top Line */
+thead tr {
+  border-top: 1px solid white;
+}

src/pages/Directory/Directory.jsx

@@ -326,7 +326,8 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
         </GlobalModel>
       )}
 
-      <div className="card p-2 card-minHeight">
+      <div className="card p-0 mb-2 ">
+        <div className="card-body p-1 pb-0">
           <DirectoryPageHeader
             searchText={searchText}
             setSearchText={setSearchText}
@@ -345,7 +346,9 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
             IsActive={IsActive}
             setOpenBucketModal={setOpenBucketModal}
           />
-
+        </div>
+      </div>
+      <div className="card-minHeight">
         {/* Messages when listView is false */}
         {!listView && (
           <div className="d-flex flex-column justify-content-center align-items-center text-center ">
@@ -360,7 +363,10 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
         )}
 
         {/* Table view (listView === true) */}
+
         {listView ? (
+          <div className="card cursor-pointer mt-5">
+            <div className="card-body p-2 pb-1">
               <DirectoryListTableHeader>
                 {loading && (
                   <tr>
@@ -379,7 +385,9 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
                   </tr>
                 )}
 
-            {!loading && currentItems.length === 0 && contacts?.length > 0 && (
+                {!loading &&
+                  currentItems.length === 0 &&
+                  contacts?.length > 0 && (
                     <tr>
                       <td colSpan={10}>
                         <p className="mt-10">No matching contact found</p>
@@ -402,6 +410,8 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
                     />
                   ))}
               </DirectoryListTableHeader>
+            </div>
+          </div>
         ) : (
           <div className="row mt-5">
             {!loading &&

src/pages/Directory/DirectoryPageHeader.jsx

@@ -32,7 +32,7 @@ const DirectoryPageHeader = ({
         <div className="col-12 col-md-6 mb-2 px-1 d-flex align-items-center gap-4 ">
           <input
             type="search"
-            className="form-control me-2"
+            className="form-control"
             placeholder="Search Contact..."
             value={searchText}
             onChange={(e) => setSearchText(e.target.value)}
@@ -41,7 +41,7 @@ const DirectoryPageHeader = ({
           <div className="d-flex gap-2">
             <button
               type="button"
-              className={`btn btn-xs ${
+              className={`btn  btn-sm p-1 ${
                 !listView ? "btn-primary" : "btn-outline-primary"
               }`}
               onClick={() => setListView(false)}
@@ -55,7 +55,7 @@ const DirectoryPageHeader = ({
             </button>
             <button
               type="button"
-              className={`btn btn-xs ${
+              className={`btn  btn-sm p-1 ${
                 listView ? "btn-primary" : "btn-outline-primary"
               }`}
               onClick={() => setListView(true)}

src/pages/project/ProjectList.jsx

@@ -56,10 +56,10 @@ const ProjectList = () => {
 
       setProjectList(sortedGrouped);
     }
-  }
+  };
 
   useEffect(() => {
-    sortingProject(projects)
+    sortingProject(projects);
   }, [projects, loginUser?.projects, loading]);
 
   useEffect(() => {
@@ -77,9 +77,9 @@ const ProjectList = () => {
         const updatedProjects = [...cachedProjects, response.data];
         cacheData("projectslist", updatedProjects);
         setProjectList((prev) => [...prev, response.data]);
-        setloading( false )
+        setloading(false);
-        reset()
+        reset();
-        sortingProject(getCachedData("projectslist"))
+        sortingProject(getCachedData("projectslist"));
         showToast("Project Created successfully.", "success");
         setShowModal(false);
       })
@@ -154,8 +154,9 @@ const ProjectList = () => {
             { label: "Projects", link: null },
           ]}
         />
-
+        <div className="card cursor-pointer mb-5">
-        <div className="d-flex flex-wrap justify-content-between align-items-start mb-4">
+          <div className="card-body p-2 pb-1">
+            <div className="d-flex flex-wrap justify-content-between align-items-start">
               <div className="d-flex flex-wrap align-items-start">
                 <div className="flex-grow-1 me-2 mb-2">
                   <input
@@ -173,41 +174,39 @@ const ProjectList = () => {
                 <div className="d-flex gap-2 mb-2">
                   <button
                     type="button"
-                className={`btn btn-sm ${
+                    className={`btn  btn-sm p-1 ${
                       !listView ? "btn-primary" : "btn-outline-primary"
                     }`}
                     onClick={() => setListView(false)}
                     data-bs-toggle="tooltip"
-                data-bs-offset="0,8"
-                data-bs-placement="top"
                     data-bs-custom-class="tooltip"
                     title="Card View"
                   >
-                <i className="bx bx-grid-alt bx-sm"></i>
+                    <i className="bx bx-grid-alt fs-5"></i>
                   </button>
                   <button
                     type="button"
-                className={`btn btn-sm ${
+                    className={`btn btn-sm p-1  ${
                       listView ? "btn-primary" : "btn-outline-primary"
                     }`}
                     onClick={() => setListView(true)}
                     data-bs-toggle="tooltip"
-                data-bs-offset="0,8"
-                data-bs-placement="top"
                     data-bs-custom-class="tooltip"
                     title="List View"
                   >
-                <i className="bx bx-list-ul bx-sm"></i>
+                    <i className="bx bx-list-ul fs-5"></i>
                   </button>
                 </div>
 
-                <div className="dropdown ms-3">
+                <div className="dropdown ms-3 mt-1">
                   <a
-                  className="dropdown-toggle hide-arrow cursor-pointer"
+                    className="dropdown-toggle hide-arrow cursor-pointer p-1 mt-3 "
                     data-bs-toggle="dropdown"
                     aria-expanded="false"
+                    data-bs-custom-class="tooltip"
+                    title="Filter"
                   >
-                  <i className="bx bx-filter bx-lg"></i>
+                    <i className="fa-solid fa-filter fs-4"></i>
                   </a>
                   <ul className="dropdown-menu p-2 text-capitalize">
                     {[
@@ -242,32 +241,37 @@ const ProjectList = () => {
                     ))}
                   </ul>
                 </div>
-      
               </div>
 
               <div>
                 <button
                   type="button"
-              className={`btn btn-sm btn-primary ${
+                  data-bs-toggle="tooltip"
+                  data-bs-offset="0,8"
+                  data-bs-placement="top"
+                  data-bs-custom-class="tooltip"
+                  title="Add New Project"
+                  className={`p-1 me-2 bg-primary rounded-circle ${
                     !HasManageProject && "d-none"
                   }`}
                   onClick={handleShow}
                 >
-              <i className="bx bx-plus-circle me-2"></i>
+                  <i className="bx bx-plus fs-4 text-white"></i>
-              Create New Project
                 </button>
               </div>
             </div>
-
+          </div>
+        </div>
         {loading && <p className="text-center">Loading...</p>}
         {!loading && filteredProjects.length === 0 && !listView && (
           <p className="text-center text-muted">No projects found.</p>
         )}
 
-        <div className="row">
         {listView ? (
+          <div className="card cursor-pointer">
+            <div className="card-body p-2">
               <div className="table-responsive text-nowrap py-2 ">
-              <table className="table px-2">
+                <table className="table m-3">
                   <thead>
                     <tr>
                       <th className="text-start" colSpan={5}>
@@ -341,18 +345,29 @@ const ProjectList = () => {
                       </tr>
                     ) : (
                       currentItems.map((project) => (
-                      <ProjectListView key={project.id} projectData={project} recall={sortingProject} />
+                        <ProjectListView
+                          key={project.id}
+                          projectData={project}
+                          recall={sortingProject}
+                        />
                       ))
                     )}
                   </tbody>
                 </table>
+              </div>{" "}
+            </div>{" "}
           </div>
         ) : (
-            currentItems.map((project) => (
+          <div className="row">
-              <ProjectCard key={project.id} projectData={project} recall={sortingProject} />
+            {currentItems.map((project) => (
-            ))
+              <ProjectCard
-          )}
+                key={project.id}
+                projectData={project}
+                recall={sortingProject}
+              />
+            ))}
           </div>
+        )}
 
         {!loading && totalPages > 1 && (
           <nav>

src/pages/project/ProjectListView.jsx

@@ -107,14 +107,14 @@ const ProjectListView = ({ projectData, recall }) => {
 
       <tr className="py-8">
         <td className="text-start" colSpan={5}>
-          <strong
+          <span
             className="text-primary cursor-pointer"
             onClick={() => navigate(`/projects/${projectInfo.id}`)}
           >
             {projectInfo.shortName
               ? `${projectInfo.name} (${projectInfo.shortName})`
               : projectInfo.name}
-          </strong>
+          </span>
         </td>
         <td className="text-start small">{projectInfo.contactPerson}</td>
         <td className="small text-center">