- Add project list on emplyee profile

- Add image as per gender

src/components/Employee/EmpBanner.jsx

@@ -24,12 +24,22 @@ const EmpBanner = ({ profile, loggedInUser }) => {
       )}
       <div className="user-profile-header d-flex flex-column flex-lg-row text-sm-start text-center mb-8">
         <div className="flex-shrink-0 mt-1 mx-sm-0 mx-auto">
-          <img
-            width={125}
-            src="../../assets/img/avatars/00.jpg"
-            alt="user image"
-            className="d-block h-auto ms-0 ms-sm-6 rounded-3 user-profile-img"
-          />
+          {profile.gender.toLowerCase() == "male" && (
+            <img
+              width={125}
+              src="../../assets/img/avatars/avatar_m_01.png"
+              alt="user image"
+              className="d-block h-auto ms-0 ms-sm-6 rounded-3 user-profile-img"
+            />
+          )}
+          {profile.gender.toLowerCase() == "female" && (
+            <img
+              width={125}
+              src="../../assets/img/avatars/avatar_f_02.png"
+              alt="user image"
+              className="d-block h-auto ms-0 ms-sm-6 rounded-3 user-profile-img"
+            />
+          )}
         </div>
         <div className="flex-grow-1 mt-1 mt-lg-1">
           <div className="d-flex align-items-md-end align-items-sm-start align-items-center justify-content-md-between justify-content-start mx-5 flex-md-row flex-column gap-4">

src/components/Employee/EmpDashboard.jsx

@@ -1,26 +1,55 @@
-import React from "react";
-import Avatar from "../common/Avatar";
+import React, { useEffect, useState } from "react";
 import EmpOverview from "./EmpOverview";
+import { useProjectsByEmployee } from "../../hooks/useProjects";
 
 const EmpDashboard = ({ profile }) => {
+  const {
+    projectList,
+    loading: selectedProjectLoding,
+    refetch,
+  } = useProjectsByEmployee(profile?.id);
+
   return (
     <>
       <div className="row">
-        <div className="col col-4 pt-5">
+        <div className="col pt-5">
           {" "}
           <EmpOverview profile={profile}></EmpOverview>
         </div>
-        <div className="col col-4 pt-5">
+        <div className="col 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">
+                {selectedProjectLoding && <span>Loading</span>}
+                {projectList.map((project) => (
+                  <li
+                    className="d-flex mb-6 align-items-center"
+                    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="col-sm-8 col-lg-12 col-xxl-8 mb-1 mb-sm-0 mb-lg-1 mb-xxl-0 text-start">
+                        <h6 className="mb-0">{project.shortName}</h6>
+                      </div>
+                      <div className="col-sm-4 col-lg-12 col-xxl-4 d-flex justify-content-xxl-end">
+                        <div className="label-secondary">{project.name}</div>
+                      </div>
+                    </div>
+                  </li>
+                ))}
+              </ul>
             </div>
           </div>
         </div>
-        <div className="col col-4 pt-5">
+        {/* <div className="col col-4 pt-5">
           <div className="card">
             <div className="card-body">
               <small className="card-text text-uppercase text-body-secondary small">
@@ -28,7 +57,7 @@ const EmpDashboard = ({ profile }) => {
               </small>{" "}
             </div>{" "}
           </div>
-        </div>
+        </div> */}
       </div>
     </>
   );

src/components/Layout/Header.jsx

@@ -27,9 +27,9 @@ const Header = () => {
   const { data, loading } = useMaster();
   const navigate = useNavigate();
   const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
-  {
-    console.log(location.pathname);
-  }
+  // {
+  //   console.log(location.pathname);
+  // }
 
   const isDashboardPath =
     /^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname);

src/hooks/useProjects.js

@@ -96,7 +96,7 @@ export const useProjectDetails = (projectId, isAuto = true) => {
 
 export const useProjectsByEmployee = (employeeId) => {
   const {
-    data: projectNameList = [],
+    data: projectList = [],
     isLoading,
     error,
     refetch,