From 8117e60bff0c6c9fa12209de8b69809f2de922a4 Mon Sep 17 00:00:00 2001
From: pramod mahajan <pramod.mahajan@marcoaiot.com>
Date: Tue, 12 Aug 2025 16:22:34 +0530
Subject: [PATCH] optimized  EmpDashBoard , EmployeeNav and EmployeeProfile

---
 src/components/Employee/EmpDashboard.jsx | 66 +++++++++---------
 src/components/Employee/EmployeeNav.jsx  | 87 ++++++++----------------
 src/pages/employee/EmployeeProfile.jsx   |  6 +-
 3 files changed, 64 insertions(+), 95 deletions(-)

diff --git a/src/components/Employee/EmpDashboard.jsx b/src/components/Employee/EmpDashboard.jsx
index da251c10..4cf9bad5 100644
--- a/src/components/Employee/EmpDashboard.jsx
+++ b/src/components/Employee/EmpDashboard.jsx
@@ -19,51 +19,55 @@ const EmpDashboard = ({ profile }) => {
         </div>
         <div className="col col-sm-6 pt-5">
           <div className="card ">
-
             <div className="card-body">
               <small className="card-text text-uppercase text-body-secondary small">
                 My Projects
               </small>{" "}
-              <ul className="list-unstyled my-3 py-1">
+              <ul className="list-unstyled text-start my-3 py-1">
                 {selectedProjectLoding && <span>Loading</span>}
                 {projectList.map((project) => (
                   <li
-                    className="d-flex mb-6 align-items-center"
+                    className="d-flex mb-4 align-items-start flex-wrap"
                     key={project.id}
                   >
-                    <div className="avatar flex-shrink-0 me-4">
-                      <span className="avatar-initial rounded bg-label-primary">
-                        <i className="icon-base bx bx-buildings icon-lg "></i>
-                      </span>
-                    </div>
-                    <div className="row w-100 align-items-center">
-                      <div className="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
-                        <div className="me-2">
-                          <div className="d-flex align-items-center">
-                            <h6 className="mb-0 me-2">
+                    {/* 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>
-                          <small>{project.projectName}</small>
                         </div>
-                        <div className="user-progress">
-                          <div className="badge bg-label-secondary ">
+                        <div>
+                          <span className="badge bg-label-secondary">
                             {project.designation}
-                          </div>
+                          </span>
                         </div>
                       </div>
-                      <div className="col-sm-4 col-lg-12 col-xxl-4 d-flex justify-content-xxl-end  mt-1">
-                        <div className="label-secondary">
-                          Assigned:{" "}
-                          {project.assignedDate ? (
-                            new Date(project.assignedDate).toLocaleDateString()
-                          ) : (
-                            <em>NA</em>
-                          )}
-                        </div>
-                      </div>
-                      {project.removedDate && (
-                        <div className="col-sm-4 col-lg-12 col-xxl-4 d-flex justify-content-xxl-end mt-1">
+
+                      {/* Dates */}
+                      <div className="mt-2 d-flex flex-column flex-sm-row gap-3">
+                        {project.removedDate && (
                           <div className="label-secondary">
                             Unassigned:{" "}
                             {project.removedDate ? (
@@ -72,8 +76,8 @@ const EmpDashboard = ({ profile }) => {
                               <em>NA</em>
                             )}
                           </div>
-                        </div>
-                      )}
+                        )}
+                      </div>
                     </div>
                   </li>
                 ))}
diff --git a/src/components/Employee/EmployeeNav.jsx b/src/components/Employee/EmployeeNav.jsx
index ac1e89ae..d9a6b3e0 100644
--- a/src/components/Employee/EmployeeNav.jsx
+++ b/src/components/Employee/EmployeeNav.jsx
@@ -1,67 +1,36 @@
 import React from "react";
-
 const EmployeeNav = ({ onPillClick, activePill }) => {
+  const tabs = [
+    { key: "profile", icon: "bx bx-user", label: "Profile" },
+    { key: "attendance", icon: "bx bx-group", label: "Attendances" },
+    { key: "documents", icon: "bx bx-user", label: "Documents" },
+    { key: "activities", icon: "bx bx-grid-alt", label: "Activities" },
+  ];
+
   return (
     <div className="col-md-12">
-      <div className="nav-align-top ">
-        <ul className="nav nav-tabs">
-          <li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
-            <a
-              className={`nav-link py-1 px-2 small ${
-                activePill === "profile" ? "active" : ""
-              }`}
-              href="#"
-              onClick={(e) => {
-                e.preventDefault(); // Prevent page reload
-                onPillClick("profile");
-              }}
+      <div className="nav-align-top">
+        <ul className="nav nav-tabs overflow-auto" id="horizontal-example">
+          {tabs.map(({ key, icon, label }) => (
+            <li
+              key={key}
+              className="nav-item"
+              style={{ padding: "10px 10px 0 10px" }}
             >
-              <i className="icon-base bx bx-user icon-sm me-1_5"></i> Profile
-            </a>
-          </li>
-          <li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
-            <a
-              className={`nav-link py-1 px-2 small ${
-                activePill === "attendance" ? "active" : ""
-              }`}
-              href="#"
-              onClick={(e) => {
-                e.preventDefault(); // Prevent page reload
-                onPillClick("attendance");
-              }}
-            >
-              <i className="bx bx-group bx-sm me-1_5"></i> Attendances
-            </a>
-          </li>
-          <li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
-            <a
-              className={`nav-link py-1 px-2 small  ${
-                activePill === "documents" ? "active" : ""
-              }`}
-              href="#"
-              onClick={(e) => {
-                e.preventDefault(); // Prevent page reload
-                onPillClick("documents");
-              }}
-            >
-              <i className="bx bx-user bx-sm me-1_5"></i> Documents
-            </a>
-          </li>
-
-          <li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
-            <a
-              className={`nav-link py-1 px-2 small ${
-                activePill === "activities" ? "active" : ""
-              }`}
-              href="#"
-              onClick={(e) => {
-                e.preventDefault(); // Prevent page reload
-                onPillClick("activities");
-              }}
-            >
-              <i className="bx bx-grid-alt bx-sm me-1_5"></i> Activities
-            </a>
-          </li>
+              <a
+                href="#"
+                className={`nav-link py-1 px-2 small ${
+                  activePill === key ? "active" : ""
+                }`}
+                onClick={(e) => {
+                  e.preventDefault();
+                  onPillClick(key);
+                }}
+              >
+                <i className={`icon-base ${icon} icon-sm me-1_5`}></i> {label}
+              </a>
+            </li>
+          ))}
         </ul>
       </div>
     </div>
diff --git a/src/pages/employee/EmployeeProfile.jsx b/src/pages/employee/EmployeeProfile.jsx
index 3a31019c..a17f4c21 100644
--- a/src/pages/employee/EmployeeProfile.jsx
+++ b/src/pages/employee/EmployeeProfile.jsx
@@ -131,11 +131,7 @@ const EmployeeProfile = () => {
           </div>
         </div>
         <div className="row">
-          <div className="col-12">
-            <div>
-              <div className="row row-bordered g-0">{renderContent()}</div>
-            </div>
-          </div>
+              <div className=" ">{renderContent()}</div>
         </div>
       </div>
     </>