src/components/Project/ManageProjectInfo.jsx

@@ -26,6 +26,7 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose }) => {
     .object({
       ...(project?.id ? { id: z.string().optional() } : {}),
       name: z.string().min(1, { message: "Project Name is required" }),
+      shortName: z.string().optional(),
       contactPerson: z
         .string()
         .min( 1, {message: "Contact Person Name is required"} )
@@ -72,6 +73,7 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose }) => {
     defaultValues: {
       id: project?.id || "",
       name: project?.name || "",
+      shortName: project?.shortName || "",
       contactPerson: project?.contactPerson || "",
       projectAddress: project?.projectAddress || "",
       startDate: formatDate(project?.startDate) || currentDate,
@@ -88,6 +90,7 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose }) => {
         ? {
             id: project?.id || "",
             name: project?.name || "",
+            shortName: project?.shortName || "",
             contactPerson: project?.contactPerson || "",
             projectAddress: project?.projectAddress || "",
             startDate: formatDate(project?.startDate) || "",
@@ -108,6 +111,7 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose }) => {
     reset({
       id: project?.id || "",
       name: project?.name || "",
+      shortName: project?.shortName || "",
       contactPerson: project?.contactPerson || "",
       projectAddress: project?.projectAddress || "",
       startDate: formatDate(project?.startDate) || currentDate,
@@ -157,6 +161,27 @@ const ManageProjectInfo = ({ project, handleSubmitForm, onClose }) => {
                 </div>
               )}
             </div>
+            <div className="col-12 col-md-12">
+              <label className="form-label" htmlFor="shortName">
+                Short Name
+              </label>
+              <input
+                type="text"
+                id="shortName"
+                name="shortName"
+                className="form-control"
+                placeholder="Short Name"
+                {...register("shortName")}
+              />
+              {errors.shortName && (
+                <div
+                  className="danger-text text-start"
+                  style={{ fontSize: "12px" }}
+                >
+                  {errors.shortName.message}
+                </div>
+              )}
+            </div>
             <div className="col-12 col-md-12">
               <label className="form-label" htmlFor="contactPerson">
                 Contact Person

src/components/Project/ProjectBanner.jsx

@@ -1,80 +1,75 @@
-import React, { useState,useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import ManageProjectInfo from "./ManageProjectInfo";
 import showToast from "../../services/toastService";
 import ProjectRepository from "../../repositories/ProjectRepository";
-import { cacheData,getCachedData } from "../../slices/apiDataManager";
+import { cacheData, getCachedData } from "../../slices/apiDataManager";
-import {hasUserPermission} from "../../utils/authUtils";
+import { hasUserPermission } from "../../utils/authUtils";
 import moment from "moment";
-import {useHasUserPermission} from "../../hooks/useHasUserPermission";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
-import {MANAGE_PROJECT} from "../../utils/constants";
+import { MANAGE_PROJECT } from "../../utils/constants";
 
-
+const ProjectBanner = ({ project_data }) => {
-const ProjectBanner = ( {project_data} ) =>
-{
   const [showModal, setShowModal] = useState(false);
-  const manageProject =  useHasUserPermission(MANAGE_PROJECT)
+  const manageProject = useHasUserPermission(MANAGE_PROJECT);
-  const [ CurrentProject, setCurrentProject ] = useState( project_data )
+  const [CurrentProject, setCurrentProject] = useState(project_data);
   if (project_data == null) {
     return <span>incomplete project information</span>;
   }
-  
+
   const handleShow = () => setShowModal(true);
   const handleClose = () => setShowModal(false);
- 
-  const handleFormSubmit = ( updatedProject,setLoading ) =>
-  {
-   
-         if ( CurrentProject?.id )
-            {
-                 ProjectRepository.updateProject(CurrentProject.id,updatedProject).then( ( response ) =>
-                 { 
-                   const updatedProjectData = {
-                     ...CurrentProject, 
-                     ...response.data, 
-                     building: CurrentProject.building, 
-                   };
-                   setCurrentProject( updatedProject )
-                   
-                   cacheData( `projectinfo-${ CurrentProject.id }`, updatedProjectData );
-                   const projects_list = getCachedData("projectslist");
-                   if ( projects_list )
-                   {
-                    const updatedProjectsList = projects_list.map(project => 
-                      project.id === CurrentProject.id ? {
-                        ...project,       
-                         ...response.data,
-                        //  tenant:project.tenant
-                      } : project
-                     );
-                     
-                     cacheData("projectslist",updatedProjectsList)
-                   }
-                   
-                     showToast( "Project updated successfully.", "success" );
-                     setLoading(false)
-                     setShowModal(false)
-                   })
-                   .catch((error) => {
-                     showToast( error.message, "error" );
 
-                   });       
+  const handleFormSubmit = (updatedProject, setLoading) => {
-          }    
+    if (CurrentProject?.id) {
+      ProjectRepository.updateProject(CurrentProject.id, updatedProject)
+        .then((response) => {
+          const updatedProjectData = {
+            ...CurrentProject,
+            ...response.data,
+            building: CurrentProject.building,
+          };
+          setCurrentProject(updatedProject);
+
+          cacheData(`projectinfo-${CurrentProject.id}`, updatedProjectData);
+          const projects_list = getCachedData("projectslist");
+          if (projects_list) {
+            const updatedProjectsList = projects_list.map((project) =>
+              project.id === CurrentProject.id
+                ? {
+                    ...project,
+                    ...response.data,
+                    //  tenant:project.tenant
+                  }
+                : project
+            );
+
+            cacheData("projectslist", updatedProjectsList);
+          }
+
+          showToast("Project updated successfully.", "success");
+          setLoading(false);
+          setShowModal(false);
+        })
+        .catch((error) => {
+          showToast(error.message, "error");
+        });
+    }
   };
 
   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
+        <ManageProjectInfo
-            project={CurrentProject} 
+          project={CurrentProject}
-            handleSubmitForm={handleFormSubmit}
+          handleSubmitForm={handleFormSubmit}
-            onClose={handleClose}
+          onClose={handleClose}
-          ></ManageProjectInfo>
+        ></ManageProjectInfo>
       </div>
       {/* Project Banner */}
       <div className="col-12">
@@ -89,17 +84,23 @@ const ProjectBanner = ( {project_data} ) =>
                 style={{ width: "40px", height: "40px" }}
               />
               <h5 className="mb-0">
-                {CurrentProject.name ? CurrentProject.name : "N/A"}
+                {CurrentProject.name
+                  ? CurrentProject.shortName
+                    ? `${CurrentProject.name} (${CurrentProject.shortName})`
+                    : CurrentProject.name
+                  : "N/A"}
               </h5>
             </div>
             {manageProject && (
               <button
-                  type="button"
+                type="button"
-                  className={`btn btn-sm btn-primary ${!manageProject && 'd-none'}`}
+                className={`btn btn-sm btn-primary ${
-                  data-bs-toggle="modal"
+                  !manageProject && "d-none"
-                  data-bs-target="#edit-project-modal"
+                }`}
-                  onClick={handleShow}
+                data-bs-toggle="modal"
-                >
+                data-bs-target="#edit-project-modal"
+                onClick={handleShow}
+              >
                 Modify
               </button>
             )}

src/components/Project/ProjectCard.jsx

@@ -14,7 +14,7 @@ import {
   getProjectStatusName,
 } from "../../utils/projectStatus";
 
-const ProjectCard = ({ projectData }) => {
+const ProjectCard = ({ projectData, recall }) => {
   const [projectInfo, setProjectInfo] = useState(projectData);
   const [projectDetails, setProjectDetails] = useState(null);
   const [showModal, setShowModal] = useState(false);
@@ -78,7 +78,7 @@ const ProjectCard = ({ projectData }) => {
             );
             cacheData("projectslist", updatedProjectsList);
           }
-
+          recall(getCachedData("projectslist"));
           showToast("Project updated successfully.", "success");
           setShowModal(false);
         })
@@ -88,7 +88,6 @@ const ProjectCard = ({ projectData }) => {
     }
   };
 
-
   return (
     <>
       {showModal && projectDetails && (
@@ -119,17 +118,16 @@ const ProjectCard = ({ projectData }) => {
                   ></i>
                 </div>
                 <div className="me-2">
-                  <h5 className="mb-0">
+                  <h5
-                    <a
+                    className="mb-0 stretched-link text-heading text-start"
-                      className="stretched-link text-heading"
+                    onClick={handleViewProject}
-                      onClick={handleViewProject}
+                  >
-                    >
+                    {projectInfo.shortName
-                      {projectInfo.name}
+                      ? projectInfo.shortName
-                    </a>
+                      : projectInfo.name}
                   </h5>
                   <div className="client-info text-body">
-                    <span className="fw-medium">Client: </span>
+                    <span>{projectInfo.shortName ? projectInfo.name : ""}</span>
-                    <span>{projectInfo.contactPerson}</span>
                   </div>
                 </div>
               </div>
@@ -141,9 +139,14 @@ const ProjectCard = ({ projectData }) => {
                     data-bs-toggle="dropdown"
                     aria-expanded="false"
                   >
-                    {modifyProjectLoading? <div class="spinner-border spinner-border-sm text-secondary" role="status">
+                    {modifyProjectLoading ? (
-                      <span class="visually-hidden">Loading...</span>
+                      <div
-                    </div> :
+                        className="spinner-border spinner-border-sm text-secondary"
+                        role="status"
+                      >
+                        <span className="visually-hidden">Loading...</span>
+                      </div>
+                    ) : (
                       <i
                         className="bx bx-dots-vertical-rounded bx-sm text-muted"
                         data-bs-toggle="tooltip"
@@ -151,7 +154,8 @@ const ProjectCard = ({ projectData }) => {
                         data-bs-placement="top"
                         data-bs-custom-class="tooltip-dark"
                         title="More Action"
-                      ></i>}
+                      ></i>
+                    )}
                   </button>
                   <ul className="dropdown-menu dropdown-menu-end">
                     <li>
@@ -191,6 +195,12 @@ const ProjectCard = ({ projectData }) => {
           <div className="card-body pb-1">
             <div className="d-flex align-items-center flex-wrap">
               <div className="text-start mb-4">
+                <p className="mb-1">
+                  <span className="text-heading fw-medium">
+                    Contact Person:{" "}
+                  </span>
+                  {projectInfo.contactPerson ? projectInfo.contactPerson : "NA"}
+                </p>
                 <p className="mb-1">
                   <span className="text-heading fw-medium">Start Date: </span>
                   {projectInfo.startDate

src/pages/project/ProjectList.jsx

@@ -37,7 +37,7 @@ const ProjectList = () => {
   const handleShow = () => setShowModal(true);
   const handleClose = () => setShowModal(false);
 
-  useEffect(() => {
+  const sortingProject = (projects) =>{
     if (!loading && Array.isArray(projects)) {
       const grouped = {};
       projects.forEach((project) => {
@@ -56,6 +56,10 @@ const ProjectList = () => {
 
       setProjectList(sortedGrouped);
     }
+  }
+
+  useEffect(() => {
+    sortingProject(projects)
   }, [projects, loginUser?.projects, loading]);
 
   useEffect(() => {
@@ -75,6 +79,7 @@ const ProjectList = () => {
         setProjectList( ( prev ) => [ ...prev, response.data ] );
         setloading( false )
         reset()
+        sortingProject(getCachedData("projectslist"))
         showToast("Project Created successfully.", "success");
         setShowModal(false);
       })
@@ -118,7 +123,7 @@ const ProjectList = () => {
     indexOfLastItem
   );
   const totalPages = Math.ceil(filteredProjects.length / itemsPerPage);
-
+  
   useEffect(() => {
     const tooltipTriggerList = Array.from(
       document.querySelectorAll('[data-bs-toggle="tooltip"]')
@@ -268,7 +273,7 @@ const ProjectList = () => {
                     <th className="text-start" colSpan={5}>
                       Project Name
                     </th>
-                    <th className="mx-2 text-start">Project Manger</th>
+                    <th className="mx-2 text-start">Contact Person</th>
                     <th className="mx-2">START DATE</th>
                     <th className="mx-2">DEADLINE</th>
                     <th className="mx-2">Task</th>
@@ -336,7 +341,7 @@ const ProjectList = () => {
                     </tr>
                   ) : (
                     currentItems.map((project) => (
-                      <ProjectListView key={project.id} projectData={project} />
+                      <ProjectListView key={project.id} projectData={project} recall={sortingProject} />
                     ))
                   )}
                 </tbody>
@@ -344,7 +349,7 @@ const ProjectList = () => {
             </div>
           ) : (
             currentItems.map((project) => (
-              <ProjectCard key={project.id} projectData={project} />
+              <ProjectCard key={project.id} projectData={project} recall={sortingProject} />
             ))
           )}
         </div>

src/pages/project/ProjectListView.jsx

@@ -15,7 +15,7 @@ import ManageProjectInfo from "../../components/Project/ManageProjectInfo";
 import showToast from "../../services/toastService";
 import { getCachedData, cacheData } from "../../slices/apiDataManager";
 
-const ProjectListView = ({ projectData }) => {
+const ProjectListView = ({ projectData, recall }) => {
   const [projectInfo, setProjectInfo] = useState(projectData);
   const [projectDetails, setProjectDetails] = useState(null);
   const [showModal, setShowModal] = useState(false);
@@ -76,6 +76,7 @@ const ProjectListView = ({ projectData }) => {
             );
             cacheData("projectslist", updatedProjectsList);
           }
+          recall(getCachedData("projectslist"));
           showToast("Project updated successfully.", "success");
           setShowModal(false);
         })
@@ -87,19 +88,21 @@ const ProjectListView = ({ projectData }) => {
   return (
     <>
       {showModal && projectDetails && (
-        <div
+        <tr>
-          className="modal fade show"
+          <td
-          tabIndex="-1"
+            className="modal fade show"
-          role="dialog"
+            tabIndex="-1"
-          style={{ display: "block" }}
+            role="dialog"
-          aria-hidden="false"
+            style={{ display: "block" }}
-        >
+            aria-hidden="false"
-          <ManageProjectInfo
+          >
-            project={projectDetails}
+            <ManageProjectInfo
-            handleSubmitForm={handleFormSubmit}
+              project={projectDetails}
-            onClose={handleClose}
+              handleSubmitForm={handleFormSubmit}
-          />
+              onClose={handleClose}
-        </div>
+            />
+          </td>
+        </tr>
       )}
 
       <tr className="py-8">
@@ -108,7 +111,9 @@ const ProjectListView = ({ projectData }) => {
             className="text-primary cursor-pointer"
             onClick={() => navigate(`/projects/${projectInfo.id}`)}
           >
-            {projectInfo.name}
+            {projectInfo.shortName
+              ? `${projectInfo.name} (${projectInfo.shortName})`
+              : projectInfo.name}
           </strong>
         </td>
         <td className="text-start small">{projectInfo.contactPerson}</td>