From 6b9670b942c14c56ec6235593680fd57554b9982 Mon Sep 17 00:00:00 2001
From: Vikas Nale <vikas@marcoaiot.com>
Date: Thu, 12 Jun 2025 18:48:30 +0530
Subject: [PATCH] Add more cosmatic changes for notes editor

---
 src/components/Directory/ManageBucket.jsx     | 53 +++++++-----
 .../Directory/NoteCardDirectory.jsx           | 12 +--
 src/components/Directory/NotesDirectory.jsx   | 50 +++++++-----
 src/components/Layout/Header.jsx              | 81 ++++++++++---------
 src/data/menuData.json                        | 10 +--
 src/hooks/useProjects.js                      | 52 +++++-------
 6 files changed, 142 insertions(+), 116 deletions(-)

diff --git a/src/components/Directory/ManageBucket.jsx b/src/components/Directory/ManageBucket.jsx
index b34c6ede..e32aaed0 100644
--- a/src/components/Directory/ManageBucket.jsx
+++ b/src/components/Directory/ManageBucket.jsx
@@ -128,9 +128,7 @@ const ManageBucket = () => {
 
         setBucketList(updatedData);
         showToast("Bucket Updated Successfully", "success");
-      }
-
-      else {
+      } else {
         response = await DirectoryRepository.CreateBuckets(data);
 
         const updatedBuckets = [...cache_buckets, response?.data];
@@ -187,8 +185,8 @@ const ManageBucket = () => {
     select_bucket(null);
     setAction_bucket(false);
     setSubmitting(false);
-    reset({ name: "", description: "" }); 
-    setSelectEmployee([]); 
+    reset({ name: "", description: "" });
+    setSelectEmployee([]);
   };
 
   const sortedBucktesList = sortedBuckteList?.filter((bucket) => {
@@ -255,9 +253,9 @@ const ManageBucket = () => {
             }`}
             onClick={() => {
               setAction_bucket(true);
-              select_bucket(null); 
-              reset({ name: "", description: "" }); 
-              setSelectEmployee([]); 
+              select_bucket(null);
+              reset({ name: "", description: "" });
+              setSelectEmployee([]);
             }}
           >
             <i className="bx bx-plus-circle me-2"></i>
@@ -292,10 +290,13 @@ const ManageBucket = () => {
                 sortedBucktesList.map((bucket) => (
                   <div className="col" key={bucket.id}>
                     <div className="card h-100">
-                      <div className="card-body">
+                      <div className="card-body p-4">
                         <h6 className="card-title d-flex justify-content-between align-items-center">
                           <span>{bucket.name}</span>
-                          {(DirManager || DirAdmin || bucket?.createdBy?.id === profile?.employeeInfo?.id) && (
+                          {(DirManager ||
+                            DirAdmin ||
+                            bucket?.createdBy?.id ===
+                              profile?.employeeInfo?.id) && (
                             <div className="d-flex gap-2">
                               <i
                                 className="bx bx-edit bx-sm text-primary cursor-pointer"
@@ -303,8 +304,12 @@ const ManageBucket = () => {
                                   select_bucket(bucket);
                                   setAction_bucket(true);
                                   const initialSelectedEmployees = employeesList
-                                    .filter(emp => bucket.employeeIds?.includes(emp.employeeId))
-                                    .map(emp => ({ ...emp, isActive: true }));
+                                    .filter((emp) =>
+                                      bucket.employeeIds?.includes(
+                                        emp.employeeId
+                                      )
+                                    )
+                                    .map((emp) => ({ ...emp, isActive: true }));
                                   setSelectEmployee(initialSelectedEmployees);
                                 }}
                               ></i>
@@ -315,10 +320,16 @@ const ManageBucket = () => {
                             </div>
                           )}
                         </h6>
-                        <h6 className="card-subtitle mb-2 text-muted">
-                          Contacts: {bucket.numberOfContacts}
+                        <h6 className="card-subtitle mb-2 text-muted  text-start">
+                          Contacts:{" "}
+                          {bucket.numberOfContacts
+                            ? bucket.numberOfContacts
+                            : 0}
                         </h6>
-                        <p className="card-text text-start" title={bucket.description}>
+                        <p
+                          className="card-text text-start"
+                          title={bucket.description}
+                        >
                           {bucket.description || "No description available."}
                         </p>
                       </div>
@@ -330,7 +341,9 @@ const ManageBucket = () => {
             <>
               <form onSubmit={handleSubmit(onSubmit)} className="px-2 px-sm-0">
                 <div className="mb-3">
-                  <label htmlFor="bucketName" className="form-label">Bucket Name</label>
+                  <label htmlFor="bucketName" className="form-label">
+                    Bucket Name
+                  </label>
                   <input
                     id="bucketName"
                     className="form-control form-control-sm"
@@ -341,7 +354,9 @@ const ManageBucket = () => {
                   )}
                 </div>
                 <div className="mb-3">
-                  <label htmlFor="bucketDescription" className="form-label">Bucket Description</label>
+                  <label htmlFor="bucketDescription" className="form-label">
+                    Bucket Description
+                  </label>
                   <textarea
                     id="bucketDescription"
                     className="form-control form-control-sm"
@@ -365,7 +380,7 @@ const ManageBucket = () => {
 
                 <div className="mt-4 d-flex justify-content-center gap-3">
                   <button
-                    type="button" 
+                    type="button"
                     onClick={handleBack}
                     className="btn btn-sm btn-secondary"
                     disabled={isSubmitting}
@@ -389,4 +404,4 @@ const ManageBucket = () => {
   );
 };
 
-export default ManageBucket;
\ No newline at end of file
+export default ManageBucket;
diff --git a/src/components/Directory/NoteCardDirectory.jsx b/src/components/Directory/NoteCardDirectory.jsx
index eebb68fb..30848855 100644
--- a/src/components/Directory/NoteCardDirectory.jsx
+++ b/src/components/Directory/NoteCardDirectory.jsx
@@ -132,17 +132,17 @@ const NoteCardDirectory = ({
         <div className="d-flex align-items-center">
           <Avatar
             size="xs"
-            firstName={noteItem.createdBy.firstName}
-            lastName={noteItem.createdBy.lastName}
+            firstName={noteItem?.createdBy?.firstName}
+            lastName={noteItem?.createdBy?.lastName}
             className="m-0"
           />
           <div className="d-flex flex-column ms-2">
             <span className="fw-semibold small">
-              {noteItem.createdBy.firstName} {noteItem.createdBy.lastName}
+              {noteItem?.createdBy?.firstName} {noteItem?.createdBy?.lastName}
             </span>
             <span className="text-muted" style={{ fontSize: "10px" }}>
               {moment
-                .utc(noteItem.createdAt)
+                .utc(noteItem?.createdAt)
                 .add(5, "hours")
                 .add(30, "minutes")
                 .format("MMMM DD, YYYY [at] hh:mm A")}
@@ -160,7 +160,7 @@ const NoteCardDirectory = ({
               {!isDeleting ? (
                 <i
                   className="bx bx-trash bx-sm me-1 text-secondary cursor-pointer"
-                  onClick={() => handleDeleteNote(!noteItem.isActive)}
+                  onClick={() => handleDeleteNote(!noteItem?.isActive)}
                 ></i>
               ) : (
                 <div
@@ -176,7 +176,7 @@ const NoteCardDirectory = ({
           ) : (
             <i
               className="bx bx-recycle  me-1 text-primary cursor-pointer"
-              onClick={() => handleDeleteNote(!noteItem.isActive)}
+              onClick={() => handleDeleteNote(!noteItem?.isActive)}
               title="Restore"
             ></i>
           )}
diff --git a/src/components/Directory/NotesDirectory.jsx b/src/components/Directory/NotesDirectory.jsx
index 2b08b70e..eb3ac8a5 100644
--- a/src/components/Directory/NotesDirectory.jsx
+++ b/src/components/Directory/NotesDirectory.jsx
@@ -103,34 +103,44 @@ const NotesDirectory = ({
         <p className="fw-semibold m-0">Notes :</p>
       </div>
       <div className="d-flex align-items-center justify-content-between mb-5">
-        <div className="m-0 d-flex aligin-items-center">
-          <label className="switch switch-primary">
-            <input
-              type="checkbox"
-              className="switch-input"
-              onChange={() => handleSwitch(!IsActive)}
-              value={IsActive}
-            />
-            <span className="switch-toggle-slider">
-              <span className="switch-on">
-                {/* <i class="icon-base bx bx-check"></i> */}
+        {contactNotes?.length > 0 && (
+          <div className="m-0 d-flex aligin-items-center">
+            <label className="switch switch-primary">
+              <input
+                type="checkbox"
+                className="switch-input"
+                onChange={() => handleSwitch(!IsActive)}
+                value={IsActive}
+              />
+              <span className="switch-toggle-slider">
+                <span className="switch-on">
+                  {/* <i class="icon-base bx bx-check"></i> */}
+                </span>
+                <span className="switch-off">
+                  {/* <i class="icon-base bx bx-x"></i> */}
+                </span>
               </span>
-              <span className="switch-off">
-                {/* <i class="icon-base bx bx-x"></i> */}
-              </span>
-            </span>
-            <span className="switch-label ">Include Deleted Notes</span>
-          </label>
-        </div>
+              <span className="switch-label ">Include Deleted Notes</span>
+            </label>
+          </div>
+        )}
+
         {!addNote && (
-          <div className="d-flex justify-content-center px-2">
+          <div
+            className={`
+              ${
+                contactNotes?.length > 0
+                  ? "d-flex justify-content-center px-2"
+                  : "d-flex justify-content-center px-2w-100"
+              }`}
+          >
             <span
               className={`btn btn-sm   ${
                 addNote ? "btn-danger" : "btn-primary"
               }`}
               onClick={() => setAddNote(!addNote)}
             >
-              {addNote ? "Hide Editor" : "Add Note"}
+              {addNote ? "Hide Editor" : "Add a Note"}
             </span>
           </div>
         )}
diff --git a/src/components/Layout/Header.jsx b/src/components/Layout/Header.jsx
index 7ed724a2..176576a0 100644
--- a/src/components/Layout/Header.jsx
+++ b/src/components/Layout/Header.jsx
@@ -64,7 +64,7 @@ const Header = () => {
     navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`);
   };
   // const { projects, loading: projectLoading } = useProjects();
-  const { projectNames, loading:  projectLoading } = useProjectName();
+  const { projectNames, loading: projectLoading } = useProjectName();
 
   const selectedProject = useSelector(
     (store) => store.localVariables.projectId
@@ -88,8 +88,11 @@ const Header = () => {
     if (projectNames && selectedProject !== " ") {
       dispatch(setProjectId(projectNames[0]?.id));
     }
-  }, [projectNames, ]);
-  const isProjectPath = /^\/projectNames\/[a-f0-9-]{36}$/.test(location.pathname);
+  }, [projectNames]);
+
+  /** Check if current page id project details page */
+  const isProjectPath = /^\/projects\/[a-f0-9-]{36}$/.test(location.pathname);
+
   return (
     <nav
       className="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
@@ -107,39 +110,45 @@ const Header = () => {
         className="navbar-nav-right d-flex align-items-center justify-content-between"
         id="navbar-collapse"
       >
-       {projectNames?.length > 0 && ( <div className=" align-items-center">
-          {!isProjectPath && (
-            <>
-              <i
-                className="rounded-circle bx bx-building-house"
-                style={{ fontSize: "xx-large" }}
-              ></i>
-              <div className="btn-group">
-                <button
-                  className={`btn btn-sm-sm btn-xl ${projectNames?.length > 1 && "dropdown-toggle" } px-1`}
-                  type="button"
-                  data-bs-toggle="dropdown"
-                  aria-expanded="false"
-                >
-                  {displayText}
-                </button>
-            
-               {projectNames?.length > 1 && ( <ul className="dropdown-menu">
-                  {projectNames?.map((project) => (
-                    <li key={project?.id}>
-                      <button
-                        className="dropdown-item"
-                        onClick={() => dispatch(setProjectId(project?.id))}
-                      >
-                        {project?.name}
-                      </button>
-                    </li>
-                  ))}
-                </ul>)}
-              </div>
-            </>
-          )}
-        </div>)}
+        {projectNames?.length > 0 && (
+          <div className=" align-items-center">
+            {!isProjectPath && (
+              <>
+                <i
+                  className="rounded-circle bx bx-building-house"
+                  style={{ fontSize: "xx-large" }}
+                ></i>
+                <div className="btn-group">
+                  <button
+                    className={`btn btn-sm-sm btn-xl ${
+                      projectNames?.length > 1 && "dropdown-toggle"
+                    } px-1`}
+                    type="button"
+                    data-bs-toggle="dropdown"
+                    aria-expanded="false"
+                  >
+                    {displayText}
+                  </button>
+
+                  {projectNames?.length > 1 && (
+                    <ul className="dropdown-menu">
+                      {projectNames?.map((project) => (
+                        <li key={project?.id}>
+                          <button
+                            className="dropdown-item"
+                            onClick={() => dispatch(setProjectId(project?.id))}
+                          >
+                            {project?.name}
+                          </button>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+        )}
 
         <ul className="navbar-nav flex-row align-items-center ms-md-auto">
           <li className="nav-item dropdown-shortcuts navbar-dropdown dropdown me-2 me-xl-0">
diff --git a/src/data/menuData.json b/src/data/menuData.json
index 33157484..0802133b 100644
--- a/src/data/menuData.json
+++ b/src/data/menuData.json
@@ -6,15 +6,15 @@
                 "text": "Dashboard",
                 "icon": "bx bx-home",
                 "available": true,
-                "link": "/projects"
+                "link": "/dashboard"
             },
-             {
+            {
                 "text": "Projects",
                 "icon": "bx bx-building-house",
                 "available": true,
-                "link": "/dashboard"
+                "link": "/projects"
             },
-             {
+            {
                 "text": "Employees",
                 "icon": "bx bx-user",
                 "available": true,
@@ -58,7 +58,7 @@
                     }
                 ]
             },
-              {
+            {
                 "text": "Directory",
                 "icon": "bx bx-group",
                 "available": true,
diff --git a/src/hooks/useProjects.js b/src/hooks/useProjects.js
index 96a1615d..66d4efb0 100644
--- a/src/hooks/useProjects.js
+++ b/src/hooks/useProjects.js
@@ -7,8 +7,7 @@ import { setProjectId } from "../slices/localVariablesSlice";
 import EmployeeList from "../components/Directory/EmployeeList";
 
 export const useProjects = () => {
-
-  const loggedUser = useSelector( ( store ) => store.globalVariables.loginUser )
+  const loggedUser = useSelector((store) => store.globalVariables.loginUser);
   const [projects, setProjects] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState("");
@@ -129,39 +128,34 @@ export const useProjectDetails = (projectId) => {
     }
   }, [projectId, profile]);
 
-  return { projects_Details, loading, error, refetch: fetchData }
-}
+  return { projects_Details, loading, error, refetch: fetchData };
+};
 
-
-export const useProjectsByEmployee = ( employeeId ) =>
-{
+export const useProjectsByEmployee = (employeeId) => {
   const [projectList, setProjectList] = useState([]);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
+  const [error, setError] = useState("");
 
   const fetchProjects = async (id) => {
     try {
       setLoading(true);
-      setError(''); // clear previous error
+      setError(""); // clear previous error
       const res = await ProjectRepository.getProjectsByEmployee(id);
       setProjectList(res.data);
-      cacheData( 'ProjectsByEmployee', {data: res.data, employeeId: id} );
-      setLoading(false)
+      cacheData("ProjectsByEmployee", { data: res.data, employeeId: id });
+      setLoading(false);
     } catch (err) {
-      setError( err?.message || 'Failed to fetch projects' );
-      setLoading(false)
-    } 
+      setError(err?.message || "Failed to fetch projects");
+      setLoading(false);
+    }
   };
 
   useEffect(() => {
     if (!employeeId) return;
 
-    const cache_project = getCachedData('ProjectsByEmployee');
+    const cache_project = getCachedData("ProjectsByEmployee");
 
-    if (
-      !cache_project?.data ||
-      cache_project?.employeeId !== employeeId
-    ) {
+    if (!cache_project?.data || cache_project?.employeeId !== employeeId) {
       fetchProjects(employeeId);
     } else {
       setProjectList(cache_project.data);
@@ -172,31 +166,29 @@ export const useProjectsByEmployee = ( employeeId ) =>
     projectList,
     loading,
     error,
-    refetch : fetchProjects
-  }
+    refetch: fetchProjects,
+  };
 };
 
 export const useProjectName = () => {
   const [loading, setLoading] = useState(true);
   const [projectNames, setProjectName] = useState([]);
-  const[Error,setError] = useState()
+  const [Error, setError] = useState();
 
   const fetchData = async () => {
     try {
-        let response = await ProjectRepository.projectNameList();
-        console.log(response)
-        setProjectName(response.data);
-        cacheData("basicProjectNameList",response.data);
-        setLoading(false);     
+      let response = await ProjectRepository.projectNameList();
+      setProjectName(response.data);
+      cacheData("basicProjectNameList", response.data);
+      setLoading(false);
     } catch (err) {
       setError("Failed to fetch data.");
       setLoading(false);
     }
   };
-  useEffect(() => {  
-      fetchData();    
+  useEffect(() => {
+    fetchData();
   }, []);
 
   return { projectNames, loading, Error };
 };
-