src/components/Employee/EmpDashboard.jsx

@@ -24,55 +24,64 @@ const EmpDashboard = ({ profile }) => {
                 My Projects
               </small>{" "}
               <ul className="list-unstyled text-start my-3 py-1">
-  {selectedProjectLoding && <span>Loading</span>}
-  {projectList.map((project) => (
-    <li
-      className="d-flex mb-4 align-items-start flex-wrap"
-      key={project.id}
-    >
-      {/* Project Info */}
-      <div className="flex-grow-1">
-        <div className="d-flex flex-wrap align-items-center justify-content-between gap-2">
-          <div className="d-flex">
-            <div className="avatar flex-shrink-0 me-3">
-              <span className="avatar-initial rounded bg-label-primary">
-                <i className="icon-base bx bx-buildings icon-lg"></i>
-              </span>
-            </div>
-            <div>
-              <h6 className="mb-0">{project.projectShortName}</h6>
-              <small className="text-muted">{project.projectName}</small>
-              <div className="label-secondary">
-                Assigned:{" "}
-                {project.assignedDate ? (
-                  new Date(project.assignedDate).toLocaleDateString()
-                ) : (
-                  <em>NA</em>
-                )}
-              </div>
-            </div>
-          </div>
-          <div>
-            <span className="badge bg-label-secondary">
-              {project.designation}
-            </span>
-          </div>
-        </div>
-
-        {/* Dates */}
-        {project.removedDate && (
-          <div className="mt-2 d-flex flex-column flex-sm-row justify-content-between">
-            <div className="label-secondary">
-              Unassigned:{" "}
-              {new Date(project.removedDate).toLocaleDateString()}
-            </div>
-          </div>
-        )}
-      </div>
-    </li>
-  ))}
-</ul>
+                {selectedProjectLoding && <span>Loading</span>}
+                {projectList.map((project) => (
+                  <li
+                    className="d-flex mb-4 align-items-start flex-wrap"
+                    key={project.id}
+                  >
+                    {/* Project Info */}
+                    <div className="flex-grow-1">
+                      <div className="d-flex flex-wrap align-items-center justify-content-between gap-2">
+                        <div className="d-flex">
+                          <div className="avatar flex-shrink-0 me-3">
+                            <span className="avatar-initial rounded bg-label-primary">
+                              <i className="icon-base bx bx-buildings icon-lg"></i>
+                            </span>
+                          </div>
+                          <div className="d-block">
+                            <h6 className="mb-0 d-block">
+                              {project.projectShortName}
+                            </h6>
+                            <small className="text-muted">
+                              {project.projectName}
+                            </small>
+                            <div className="label-secondary">
+                              Assigned:{" "}
+                              {project.assignedDate ? (
+                                new Date(
+                                  project.assignedDate
+                                ).toLocaleDateString()
+                              ) : (
+                                <em>NA</em>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                        <div>
+                          <span className="badge bg-label-secondary">
+                            {project.designation}
+                          </span>
+                        </div>
+                      </div>
 
+                      {/* Dates */}
+                      <div className="mt-2 d-flex flex-column flex-sm-row gap-3">
+                        {project.removedDate && (
+                          <div className="label-secondary">
+                            Unassigned:{" "}
+                            {project.removedDate ? (
+                              new Date(project.removedDate).toLocaleDateString()
+                            ) : (
+                              <em>NA</em>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </li>
+                ))}
+              </ul>
             </div>
           </div>
         </div>