Card changes to show days left for project

package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "@hookform/resolvers": "^3.10.0",
         "@reduxjs/toolkit": "^2.5.0",
+        "@types/web": "^0.0.216",
         "@vitejs/plugin-react": "^4.3.4",
         "axios": "^1.7.9",
         "axios-retry": "^4.5.0",
@@ -1439,6 +1440,11 @@
       "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
       "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="
     },
+    "node_modules/@types/web": {
+      "version": "0.0.216",
+      "resolved": "https://registry.npmjs.org/@types/web/-/web-0.0.216.tgz",
+      "integrity": "sha512-HLaPWQKq1oh6aQv1JLRsiH0vW4VsO+L/zTOeOUmoGBnLVR2wCj4w4oWfa/0O5JFMqZXWC6VpipqQU6B1v2M/qg=="
+    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.1.tgz",

package.json

@@ -3,7 +3,6 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
-  
   "scripts": {
     "dev": "vite",
     "json-server": "json-server --watch ./src/data/demo.json --port 5000",
@@ -14,6 +13,7 @@
   "dependencies": {
     "@hookform/resolvers": "^3.10.0",
     "@reduxjs/toolkit": "^2.5.0",
+    "@types/web": "^0.0.216",
     "@vitejs/plugin-react": "^4.3.4",
     "axios": "^1.7.9",
     "axios-retry": "^4.5.0",

src/components/Project/ProjectCard.jsx

@@ -225,15 +225,19 @@ const ProjectCard = ({ projectData }) => {
                                     {getProjectStatusName(projectInfo.projectStatusId)}
                                 </span>
                             </p>{" "}
-            <span className="badge bg-label-success ms-auto">
+                            {getDateDifferenceInDays(projectInfo.endDate, Date()) >= 0 &&
-              {projectInfo.startDate &&
+                                ( <span className="badge bg-label-success ms-auto">
-                projectInfo.endDate &&
+                                {projectInfo.endDate &&
-                getDateDifferenceInDays(
+                                    getDateDifferenceInDays(projectInfo.endDate, Date())}{" "}
-                  projectInfo.startDate,
-                  projectInfo.endDate
-                )}{" "}
                                 Days left
-            </span>
+                            </span>) }
+                            {getDateDifferenceInDays(projectInfo.endDate, Date()) < 0 &&
+                             ( <span className="badge bg-label-danger ms-auto">
+                                {projectInfo.endDate &&
+                                    getDateDifferenceInDays(projectInfo.endDate, Date())}{" "}
+                                Days overdue
+                            </span>)}
+
                         </div>
                         <div className="d-flex justify-content-between align-items-center mb-2">
                             <small className="text-body">Task: {projectInfo.completedWork} / {projectInfo.plannedWork}</small>
@@ -255,9 +259,9 @@ const ProjectCard = ({ projectData }) => {
                             <div >
                                 <a
 
-                className="text-muted d-flex "
+                                    className="text-muted d-flex " alt="Active team size"
                                 >
-               <i className="bx bx-group bx-sm me-1_5"></i>{projectInfo?.teamSize}
+                                    <i className="bx bx-group bx-sm me-1_5"></i>{projectInfo?.teamSize} Members
                                 </a>
 
                             </div>
@@ -265,7 +269,7 @@ const ProjectCard = ({ projectData }) => {
                                 <a
                                     className="text-muted d-flex align-items-center"
                                 >
-                <i className="bx bx-chat me-1"></i> 15
+                                    <i className="bx bx-chat me-1 "></i> <span className="text-decoration-line-through">15</span>
                                 </a>
 
                             </div>

src/utils/dateUtils.jsx

@@ -13,33 +13,31 @@ export const getDateDifferenceInDays = (startDate, endDate) => {
   }
 
   // Calculate the difference in milliseconds
-  const differenceInMs = end - start;
+  const differenceInMs = start - end;
 
   // Convert milliseconds to days
   const differenceInDays = Math.floor(differenceInMs / (1000 * 60 * 60 * 24));
-
   return differenceInDays;
 };
 
 export const formatDate = (date) => {
-  if (!date) return ''; // Return an empty string if no date
+  if (!date) return ""; // Return an empty string if no date
   const dateObj = new Date(date);
-  return dateObj.toISOString().split('T')[0]; // Get the date in YYYY-MM-DD format
+  return dateObj.toISOString().split("T")[0]; // Get the date in YYYY-MM-DD format
 };
 
-
 export const convertShortTime = (dateString) => {
   const date = new Date(dateString);
 
   let hours = date.getHours();
-  const minutes = String(date.getMinutes()).padStart(2, '0');
+  const minutes = String(date.getMinutes()).padStart(2, "0");
 
-  const ampm = hours >= 12 ? 'PM' : 'AM';
+  const ampm = hours >= 12 ? "PM" : "AM";
   hours = hours % 12; // Convert to 12-hour format
   hours = hours ? hours : 12; // If hours is 0, set it to 12
 
-  return `${String(hours).padStart(2, '0')}:${minutes} ${ampm}`;
+  return `${String(hours).padStart(2, "0")}:${minutes} ${ampm}`;
-}
+};
 
 export const timeElapsed = (checkInTime, timeElapsedInHours) => {
   const checkInDate = new Date(checkInTime);
@@ -48,19 +46,15 @@ export const  convertShortTime=(dateString)=> {
 
   const timeDifference = currentTime - checkInDate;
 
- 
   const timeDifferenceInHours = timeDifference / (1000 * 60 * 60);
 
   return timeDifferenceInHours >= timeElapsedInHours;
-  }
+};
-
-
 
 export const checkIfCurrentDate = (dateString) => {
   const currentDate = new Date();
   const inputDate = new Date(dateString);
 
- 
   currentDate.setHours(0, 0, 0, 0);
   inputDate.setHours(0, 0, 0, 0);