Merge branch 'main' of https://git.marcoaiot.com/admin/marco.pms.web into Tenant_Manag

package-lock.json

@@ -18,6 +18,7 @@
         "apexcharts": "^4.5.0",
         "axios": "^1.7.9",
         "axios-retry": "^4.5.0",
+        "date-fns": "^4.1.0",
         "dotenv": "^16.4.7",
         "dotenv-webpack": "^8.1.0",
         "eventemitter3": "^5.0.1",
@@ -2455,6 +2456,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",

package.json

@@ -21,6 +21,7 @@
     "apexcharts": "^4.5.0",
     "axios": "^1.7.9",
     "axios-retry": "^4.5.0",
+    "date-fns": "^4.1.0",
     "dotenv": "^16.4.7",
     "dotenv-webpack": "^8.1.0",
     "eventemitter3": "^5.0.1",

public/assets/css/core-extend.css

@@ -3,10 +3,6 @@
   --bs-nav-link-font-size: 0.7375rem;
 }
 
-.nav {
-  --bs-nav-link-font-size: 0.7375rem;
-}
-
 .card-header {
   padding: 0.5rem var(--bs-card-cap-padding-x);
 }

src/components/Dashboard/AttendanceChart.jsx

@@ -18,7 +18,10 @@ const AttendanceOverview = () => {
   const [view, setView] = useState("chart");
 
   const projectId = useSelector((store) => store.localVariables.projectId);
-    const { attendanceOverviewData, loading, error } = useAttendanceOverviewData(projectId, dayRange);
+  const { attendanceOverviewData, loading, error } = useAttendanceOverviewData(
+    projectId,
+    dayRange
+  );
 
   const { tableData, roles, dates } = useMemo(() => {
     const map = new Map();
@@ -29,7 +32,9 @@ const AttendanceOverview = () => {
       map.get(date)[entry.role.trim()] = entry.present;
     });
 
-        const uniqueRoles = [...new Set(attendanceOverviewData.map((e) => e.role.trim()))];
+    const uniqueRoles = [
+      ...new Set(attendanceOverviewData.map((e) => e.role.trim())),
+    ];
     const sortedDates = [...map.keys()];
     const data = sortedDates.map((date) => {
       const row = { date };
@@ -71,17 +76,17 @@ const AttendanceOverview = () => {
       show: true,
       axisBorder: {
         show: true,
-                color: '#78909C',
+        color: "#78909C",
         offsetX: 0,
-                offsetY: 0
+        offsetY: 0,
       },
       axisTicks: {
         show: true,
-                borderType: 'solid',
+        borderType: "solid",
-                color: '#78909C',
+        color: "#78909C",
         width: 6,
         offsetX: 0,
-                offsetY: 0
+        offsetY: 0,
       },
     },
     legend: {
@@ -94,9 +99,7 @@ const AttendanceOverview = () => {
   };
 
   return (
-        <div
+    <div className="bg-white p-4 rounded shadow d-flex flex-column">
-            className="bg-white p-4 rounded shadow d-flex flex-column"
-        >
       {/* Header */}
       <div className="d-flex justify-content-between align-items-center mb-3">
         <div className="card-title mb-0 text-start">
@@ -105,7 +108,7 @@ const AttendanceOverview = () => {
         </div>
         <div className="d-flex gap-2">
           <select
-                        className="form-select form-select-sm"
+            className="form-select form-select-sm w-auto"
             value={dayRange}
             onChange={(e) => setDayRange(Number(e.target.value))}
           >
@@ -114,16 +117,20 @@ const AttendanceOverview = () => {
             <option value={30}>Last 30 Days</option>
           </select>
           <button
-                        className={`btn btn-sm ${view === "chart" ? "btn-primary" : "btn-outline-primary"}`}
+            className={`btn btn-sm p-1  ${
+              view === "chart" ? "btn-primary" : "btn-outline-primary"
+            }`}
             onClick={() => setView("chart")}
           >
-                        📊
+            <i class="bx  bx-bar-chart  fs-5"></i>
           </button>
           <button
-                        className={`btn btn-sm ${view === "table" ? "btn-primary" : "btn-outline-primary"}`}
+            className={`btn btn-sm p-1 ${
+              view === "table" ? "btn-primary" : "btn-outline-primary"
+            }`}
             onClick={() => setView("table")}
           >
-                        📋
+            <i class="bx  bx-table fs-5"></i>
           </button>
         </div>
       </div>
@@ -149,11 +156,21 @@ const AttendanceOverview = () => {
             style={{ maxHeight: "350px", overflowY: "auto" }}
           >
             <table className="table table-bordered table-sm text-start align-middle mb-0">
-                            <thead className="table-light" style={{ position: "sticky", top: 0, zIndex: 1 }}>
+              <thead
+                className="table-light"
+                style={{ position: "sticky", top: 0, zIndex: 1 }}
+              >
                 <tr>
-                                    <th style={{ background: "#f8f9fa", textTransform: "none" }}>Role</th>
+                  <th style={{ background: "#f8f9fa", textTransform: "none" }}>
+                    Role
+                  </th>
                   {dates.map((date, idx) => (
-                                        <th key={idx} style={{ background: "#f8f9fa", textTransform: "none" }}>{date}</th>
+                    <th
+                      key={idx}
+                      style={{ background: "#f8f9fa", textTransform: "none" }}
+                    >
+                      {date}
+                    </th>
                   ))}
                 </tr>
               </thead>
@@ -164,7 +181,8 @@ const AttendanceOverview = () => {
                     <td>{role}</td>
                     {tableData.map((row, idx) => {
                       const value = row[role];
-                                            const cellStyle = value > 0 ? { backgroundColor: '#d5d5d5' } : {};
+                      const cellStyle =
+                        value > 0 ? { backgroundColor: "#d5d5d5" } : {};
                       return (
                         <td key={idx} style={cellStyle}>
                           {value}

src/components/Employee/EmpActivities.jsx

@@ -0,0 +1,161 @@
+import React, { useState, useEffect } from "react";
+import moment from "moment";
+import DateRangePicker from "../common/DateRangePicker";
+import useFormattedDate from "../../hooks/useFormattedDate";
+import { useProjectTasksByEmployee } from "../../hooks/useProjects";
+
+const EmpActivities = ({ employee }) => {
+  const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
+  const myDate = new Date("2025-08-06T10:30:00Z");
+  const formattedToday = useFormattedDate(myDate, "dd-MMM-yyyy");
+
+
+  const {
+    data,
+isError,
+isLoading,
+error,
+    refetch,
+  } = useProjectTasksByEmployee(employee?.id,dateRange.startDate,dateRange.endDate);
+
+ if(isLoading) return <div>Loading...</div>
+  return (
+    <>
+      <div className="card h-100 mt-4">
+        <div className="card-body">
+          <div className="my-0 text-start">
+            <DateRangePicker
+              DateDifference="30"
+              onRangeChange={setDateRange}
+              endDateMode="today"
+            />
+          </div>
+          <ul className="timeline mb-0 mt-5 text-start">
+            {data?.map((activity)=>(
+               <li className="timeline-item timeline-item-transparent">
+              <span className="timeline-point timeline-point-primary"></span>
+              <div className="timeline-event">
+                <div className="timeline-header mb-3">
+                  <h6 className="mb-0">{activity.projectName}</h6>
+                  <small className="text-body-secondary">
+                  {useFormattedDate(activity.assignmentDate, "dd-MMM-yyyy")}
+                  </small>
+                </div>
+                <p className="mb-2"><span className="fw-semibold">Activity:</span>{activity.activityName}</p>
+                <p className="mb-2">
+                <span className="fw-semibold">Location:</span>  {activity.location}
+                </p>
+                <p className="mb-2">
+                  <span className="fw-semibold">Planned: {activity.plannedTask}</span>
+                  <span className="ms-2">Completed : {activity.completedTask}</span>
+                </p>
+              </div>
+            </li>
+            ))}
+           
+
+            {/* <li className="timeline-item timeline-item-transparent">
+              <span className="timeline-point timeline-point-success"></span>
+              <div className="timeline-event">
+                <div className="timeline-header mb-3">
+                  <h6 className="mb-0">Client Meeting</h6>
+                  <small className="text-body-secondary">45 min ago</small>
+                </div>
+                <p className="mb-2">Project meeting with john @10:15am</p>
+                <div className="d-flex justify-content-between flex-wrap gap-2 mb-2">
+                  <div className="d-flex flex-wrap align-items-center mb-50">
+                    <div className="avatar avatar-sm me-2">
+                      <img
+                        src="../../assets/img/avatars/1.png"
+                        alt="Avatar"
+                        className="rounded-circle"
+                      />
+                    </div>
+                    <div>
+                      <p className="mb-0 small fw-medium">
+                        Lester McCarthy (Client)
+                      </p>
+                      <small>CEO of ThemeSelection</small>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </li>
+            <li className="timeline-item timeline-item-transparent">
+              <span className="timeline-point timeline-point-info"></span>
+              <div className="timeline-event">
+                <div className="timeline-header mb-3">
+                  <h6 className="mb-0">Create a new project for client</h6>
+                  <small className="text-body-secondary">2 Day Ago</small>
+                </div>
+                <p className="mb-2">6 team members in a project</p>
+                <ul className="list-group list-group-flush">
+                  <li className="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
+                    <div className="d-flex flex-wrap align-items-center">
+                      <ul className="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
+                        <li
+                          data-bs-toggle="tooltip"
+                          data-popup="tooltip-custom"
+                          data-bs-placement="top"
+                          className="avatar pull-up"
+                          aria-label="Vinnie Mostowy"
+                          data-bs-original-title="Vinnie Mostowy"
+                        >
+                          <img
+                            className="rounded-circle"
+                            src="../../assets/img/avatars/5.png"
+                            alt="Avatar"
+                          />
+                        </li>
+                        <li
+                          data-bs-toggle="tooltip"
+                          data-popup="tooltip-custom"
+                          data-bs-placement="top"
+                          className="avatar pull-up"
+                          aria-label="Allen Rieske"
+                          data-bs-original-title="Allen Rieske"
+                        >
+                          <img
+                            className="rounded-circle"
+                            src="../../assets/img/avatars/12.png"
+                            alt="Avatar"
+                          />
+                        </li>
+                        <li
+                          data-bs-toggle="tooltip"
+                          data-popup="tooltip-custom"
+                          data-bs-placement="top"
+                          className="avatar pull-up"
+                          aria-label="Julee Rossignol"
+                          data-bs-original-title="Julee Rossignol"
+                        >
+                          <img
+                            className="rounded-circle"
+                            src="../../assets/img/avatars/6.png"
+                            alt="Avatar"
+                          />
+                        </li>
+                        <li className="avatar">
+                          <span
+                            className="avatar-initial rounded-circle pull-up"
+                            data-bs-toggle="tooltip"
+                            data-bs-placement="bottom"
+                            data-bs-original-title="3 more"
+                          >
+                            +3
+                          </span>
+                        </li>
+                      </ul>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </li> */}
+          </ul>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default EmpActivities;

src/components/Employee/EmpAttendance.jsx

@@ -1,24 +1,30 @@
 import React, { useState, useEffect } from "react";
 import moment from "moment";
-import DateRangePicker from "../../components/common/DateRangePicker";
+import DateRangePicker from "../common/DateRangePicker";
 import { useDispatch, useSelector } from "react-redux";
 import { fetchEmployeeAttendanceData } from "../../slices/apiSlice/employeeAttendanceSlice";
 import usePagination from "../../hooks/usePagination";
-import Avatar from "../../components/common/Avatar";
+import Avatar from "../common/Avatar";
 import { convertShortTime } from "../../utils/dateUtils";
-import RenderAttendanceStatus from "../../components/Activities/RenderAttendanceStatus";
+import RenderAttendanceStatus from "../Activities/RenderAttendanceStatus";
-import AttendLogs from "../../components/Activities/AttendLogs";
+import AttendLogs from "../Activities/AttendLogs";
 import { useAttendanceByEmployee } from "../../hooks/useAttendance";
-import GlobalModel from "../../components/common/GlobalModel";
+import GlobalModel from "../common/GlobalModel";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
 
-const AttendancesEmployeeRecords = ({ employee }) => {
+const EmpAttendance = ({ employee }) => {
   const [attendances, setAttendnaces] = useState([]);
   const [selectedDate, setSelectedDate] = useState("");
   const [dateRange, setDateRange] = useState({ startDate: "", endDate: "" });
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [attendanceId, setAttendanecId] = useState();
-  const {data =[],isLoading:loading,isFetching,error,refetch} = useAttendanceByEmployee(employee,dateRange.startDate, dateRange.endDate)
+  const {
+    data = [],
+    isLoading: loading,
+    isFetching,
+    error,
+    refetch,
+  } = useAttendanceByEmployee(employee, dateRange.startDate, dateRange.endDate);
   const dispatch = useDispatch();
 
   // const { data, loading, error } = useSelector(
@@ -75,16 +81,24 @@ const AttendancesEmployeeRecords = ({ employee }) => {
   const uniqueMap = new Map();
 
   [...group1, ...group2, ...group3, ...group4, ...group5].forEach((rec) => {
-    const date = moment(rec.checkInTime || rec.checkOutTime).format("YYYY-MM-DD");
+    const date = moment(rec.checkInTime || rec.checkOutTime).format(
+      "YYYY-MM-DD"
+    );
     const key = `${rec.employeeId}-${date}`;
     const existing = uniqueMap.get(key);
-    if (!existing || new Date(rec.checkInTime || rec.checkOutTime) > new Date(existing.checkInTime || existing.checkOutTime)) {
+    if (
+      !existing ||
+      new Date(rec.checkInTime || rec.checkOutTime) >
+        new Date(existing.checkInTime || existing.checkOutTime)
+    ) {
       uniqueMap.set(key, rec);
     }
   });
 
-  const sortedFinalList = [...uniqueMap.values()].sort((a, b) =>
+  const sortedFinalList = [...uniqueMap.values()].sort(
-    new Date(b.checkInTime || b.checkOutTime) - new Date(a.checkInTime || a.checkOutTime)
+    (a, b) =>
+      new Date(b.checkInTime || b.checkOutTime) -
+      new Date(a.checkInTime || a.checkOutTime)
   );
 
   const currentDate = new Date().toLocaleDateString("en-CA");
@@ -93,8 +107,6 @@ const AttendancesEmployeeRecords = ({ employee }) => {
     ITEMS_PER_PAGE
   );
 
- 
-
   const openModal = (id) => {
     setAttendanecId(id);
     setIsModalOpen(true);
@@ -103,24 +115,27 @@ const AttendancesEmployeeRecords = ({ employee }) => {
 
   return (
     <>
-     
-
       {isModalOpen && (
         <GlobalModel size="lg" isOpen={isModalOpen} closeModal={closeModal}>
           <AttendLogs Id={attendanceId} />
         </GlobalModel>
       )}
-      <div className="px-4 py-2 " style={{ minHeight: "500px" }}>
+      <div className="card px-4 mt-5 py-2 " style={{ minHeight: "500px" }}>
         <div
           className="dataTables_length text-start py-2 d-flex justify-content-between "
           id="DataTables_Table_0_length"
         >
           <div className="col-md-3 my-0 ">
-            <DateRangePicker onRangeChange={setDateRange} endDateMode="yesterday" />
+            <DateRangePicker
+              DateDifference="30"
+              onRangeChange={setDateRange}
+              endDateMode="today"
+            />
           </div>
           <div className="col-md-2 m-0 text-end">
             <i
-              className={`bx bx-refresh cursor-pointer fs-4 ${isFetching ? "spin" : ""
+              className={`bx bx-refresh cursor-pointer fs-4 ${
+                isFetching ? "spin" : ""
               }`}
               data-toggle="tooltip"
               title="Refresh"
@@ -214,7 +229,8 @@ const AttendancesEmployeeRecords = ({ employee }) => {
               {[...Array(totalPages)].map((_, index) => (
                 <li
                   key={index}
-                  className={`page-item ${currentPage === index + 1 ? "active" : ""
+                  className={`page-item ${
+                    currentPage === index + 1 ? "active" : ""
                   }`}
                 >
                   <button
@@ -226,7 +242,8 @@ const AttendancesEmployeeRecords = ({ employee }) => {
                 </li>
               ))}
               <li
-                className={`page-item ${currentPage === totalPages ? "disabled" : ""
+                className={`page-item ${
+                  currentPage === totalPages ? "disabled" : ""
                 }`}
               >
                 <button
@@ -244,4 +261,4 @@ const AttendancesEmployeeRecords = ({ employee }) => {
   );
 };
 
-export default AttendancesEmployeeRecords;
+export default EmpAttendance;

src/components/Employee/EmpBanner.jsx

@@ -0,0 +1,115 @@
+import React, { useState, useEffect } from "react";
+
+import { useChangePassword } from "../../components/Context/ChangePasswordContext";
+import GlobalModel from "../common/GlobalModel";
+import ManageEmployee from "./ManageEmployee";
+
+const EmpBanner = ({ profile, loggedInUser }) => {
+  const { openChangePassword } = useChangePassword();
+  const [showModal, setShowModal] = useState(false);
+
+  return (
+    <>
+      {showModal && (
+        <GlobalModel
+          size="lg"
+          isOpen={showModal}
+          closeModal={() => setShowModal(false)}
+        >
+          <ManageEmployee
+            employeeId={profile.id}
+            onClosed={() => setShowModal(false)}
+          />
+        </GlobalModel>
+      )}
+      <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">
+          {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">
+            <div className="user-profile-info">
+              <h4 className="mb-2">
+                <span>{profile?.firstName}</span>
+                {profile?.middleName ? (
+                  <span className="ms-1">{profile?.middleName}</span>
+                ) : (
+                  <></>
+                )}
+                {profile?.lastName ? (
+                  <span className="ms-1">{profile?.lastName}</span>
+                ) : (
+                  <></>
+                )}
+              </h4>
+              <ul className="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center gap-4 mt-4">
+                <li className="list-inline-item">
+                  <i className="icon-base bx bx-crown me-2 align-top"></i>
+                  <span className="fw-medium">
+                    {profile?.jobRole || <em>NA</em>}
+                  </span>
+                </li>
+                <li className="list-inline-item">
+                  <i className="icon-base bx bx-phone me-2 align-top"></i>
+                  <span className="fw-medium">
+                    {" "}
+                    {profile?.phoneNumber || <em>NA</em>}
+                  </span>
+                </li>
+                <li className="list-inline-item">
+                  <i className="icon-base bx bx-calendar me-2 align-top"></i>
+                  <span className="fw-medium">
+                    {" "}
+                    Joined on{" "}
+                    {profile?.joiningDate ? (
+                      new Date(profile.joiningDate).toLocaleDateString()
+                    ) : (
+                      <em>NA</em>
+                    )}
+                  </span>
+                </li>
+              </ul>
+              <ul className="list-inline mb-0 d-flex align-items-center flex-wrap justify-content-sm-start justify-content-center mt-4">
+                <li className="list-inline-item">
+                  <button
+                    className="btn btn-sm btn-primary btn-block"
+                    onClick={() => setShowModal(true)}
+                  >
+                    Edit Profile
+                  </button>
+                </li>
+                <li className="list-inline-item">
+                  {profile?.id == loggedInUser?.employeeInfo?.id && (
+                    <button
+                      className="btn  btn-sm btn-outline-primary btn-block"
+                      onClick={() => openChangePassword()}
+                    >
+                      Change Password
+                    </button>
+                  )}
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default EmpBanner;

src/components/Employee/EmpDashboard.jsx

@@ -0,0 +1,84 @@
+import React, { useEffect, useState } from "react";
+import EmpOverview from "./EmpOverview";
+import { useProjectsAllocationByEmployee } from "../../hooks/useProjects";
+
+const EmpDashboard = ({ profile }) => {
+  const {
+    projectList,
+    loading: selectedProjectLoding,
+    refetch,
+  } = useProjectsAllocationByEmployee(profile?.id);
+
+  console.log(projectList);
+  return (
+    <>
+      <div className="row">
+        <div className="col-12 col-sm-6 pt-5">
+          {" "}
+          <EmpOverview profile={profile}></EmpOverview>
+        </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 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>
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default EmpDashboard;

src/components/Employee/EmpDocuments.jsx

@@ -0,0 +1,12 @@
+import React, { useState, useEffect } from "react";
+import { ComingSoonPage } from "../../pages/Misc/ComingSoonPage";
+
+const EmpDocuments = ({ profile, loggedInUser }) => {
+  return (
+    <>
+      <ComingSoonPage/>
+    </>
+  );
+};
+
+export default EmpDocuments;

src/components/Employee/EmpOverview.jsx

@@ -0,0 +1,109 @@
+import React from "react";
+import Avatar from "../common/Avatar";
+import { useProfile } from "../../hooks/useProfile";
+
+const EmpOverview = ({ profile }) => {
+  const { loggedInUserProfile } = useProfile();
+  return (
+    <>
+      {" "}
+      <div className="row">
+        <div className="col-12 mb-4">
+          <div className="card">
+            <div className="card-body">
+              <small className="card-text text-uppercase text-body-secondary small">
+                About
+              </small>
+              <ul className="list-unstyled my-3 py-1">
+                <li className="d-flex align-items-center mb-4">
+                  <i className="icon-base bx bx-user"></i>
+                  <span className="fw-medium mx-2">Full Name:</span>{" "}
+                  <span>{`${profile?.firstName} ${profile?.lastName}`}</span>
+                </li>
+                <li className="d-flex align-items-center mb-4">
+                  <i className="icon-base bx bx-check"></i>
+                  <span className="fw-medium mx-2">Status:</span>{" "}
+                  <span>Active</span>
+                </li>
+                <li className="d-flex align-items-center mb-4">
+                  <i className="icon-base bx bx-crown"></i>
+                  <span className="fw-medium mx-2">Role:</span>{" "}
+                  <span> {profile?.jobRole || <em>NA</em>}</span>
+                </li>
+                <li className="d-flex align-items-center mb-4">
+                  <i className="icon-base bx bx-flag"></i>
+                  <span className="fw-medium mx-2">Gender:</span>{" "}
+                  <span> {profile?.gender || <em>NA</em>}</span>
+                </li>{" "}
+                <li className="d-flex align-items-center mb-2">
+                  <i className="icon-base bx bx-calendar "></i>
+                  <span className="fw-medium mx-2">Birth Date:</span>{" "}
+                  <span>
+                    {profile?.birthDate ? (
+                      new Date(profile.birthDate).toLocaleDateString()
+                    ) : (
+                      <em>NA</em>
+                    )}
+                  </span>
+                </li>
+                <li className="d-flex align-items-center mb-2">
+                  <i className="icon-base bx bx-calendar "></i>
+                  <span className="fw-medium mx-2">Joining Date:</span>{" "}
+                  <span>
+                    {profile?.joiningDate ? (
+                      new Date(profile.joiningDate).toLocaleDateString()
+                    ) : (
+                      <em>NA</em>
+                    )}
+                  </span>
+                </li>
+              </ul>
+              <small className="card-text text-uppercase text-body-secondary small">
+                Contacts
+              </small>
+              <ul className="list-unstyled my-3 py-1">
+                <li className="d-flex align-items-center mb-4">
+                  <i className="icon-base bx bx-phone"></i>
+                  <span className="fw-medium mx-2">Contact:</span>{" "}
+                  <span> {profile?.phoneNumber || <em>NA</em>}</span>
+                </li>
+                <li className="d-flex align-items-center mb-4">
+                  <i className="icon-base bx bx-envelope"></i>
+                  <span className="fw-medium mx-2">Email:</span>{" "}
+                  <a href={`mailto:${profile?.email}`}>
+                    {" "}
+                    {profile?.email || <em>NA</em>}
+                  </a>
+                </li>
+                <li className="d-flex align-items-center mb-4">
+                  <i className="icon-base bx bx-user"></i>
+                  <span className="fw-medium mx-2">
+                    {" "}
+                    Emergency Contact:
+                  </span>{" "}
+                  <span> {profile?.emergencyContactPerson || <em>NA</em>}</span>
+                </li>
+                <li className="d-flex align-items-center mb-4">
+                  <i className="icon-base bx bx-phone"></i>
+                  <span className="fw-medium mx-2"> Emergency Phone:</span>{" "}
+                  <span> {profile?.emergencyPhoneNumber || <em>NA</em>}</span>
+                </li>
+                <li className="d-flex align-items-center ">
+                  <div className="container p-0">
+                    <div className="fw-medium text-start">
+                      <i className="icon-base bx bx-map "></i> Address:
+                    </div>
+                    <div className="text-start ms-7">
+                      {profile?.currentAddress || <em>NA</em>}
+                    </div>
+                  </div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+export default EmpOverview;

src/components/Employee/EmployeeNav.jsx

@@ -1,53 +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">
+        <ul className="nav nav-tabs overflow-auto" id="horizontal-example">
-          <li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
+          {tabs.map(({ key, icon, label }) => (
+            <li
+              key={key}
+              className="nav-item"
+              style={{ padding: "10px 10px 0 10px" }}
+            >
               <a
-              className={`nav-link py-1 px-2 small ${
-                activePill === "attendance" ? "active" : ""
-              }`}
                 href="#"
+                className={`nav-link py-1 px-2 small ${
+                  activePill === key ? "active" : ""
+                }`}
                 onClick={(e) => {
-                e.preventDefault(); // Prevent page reload
+                  e.preventDefault();
-                onPillClick("attendance");
+                  onPillClick(key);
                 }}
               >
-              <i className="bx bx-group bx-sm me-1_5"></i> Attendances
+                <i className={`icon-base ${icon} icon-sm me-1_5`}></i> {label}
-            </a>
-          </li>
-          <li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
-            <a
-              className={`nav-link py-1 px-2 small  ${
-                activePill === "account" ? "active" : ""
-              }`}
-              href="#"
-              onClick={(e) => {
-                e.preventDefault(); // Prevent page reload
-                onPillClick("account");
-              }}
-            >
-              <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>
+          ))}
         </ul>
       </div>
     </div>

src/components/Layout/Header.jsx

@@ -27,12 +27,25 @@ const Header = () => {
   const { data, loading } = useMaster();
   const navigate = useNavigate();
   const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
+  // {
+  //   console.log(location.pathname);
+  // }
 
-  const isDirectoryPath = /^\/directory$/.test(location.pathname);
+  const isDashboardPath =
-  const isProjectPath = /^\/projects$/.test(location.pathname);
-  const isDashboard =
     /^\/dashboard$/.test(location.pathname) || /^\/$/.test(location.pathname);
+  const isProjectPath = /^\/projects$/.test(location.pathname);
 
+  const showProjectDropdown = (pathname) => {
+    const isDirectoryPath = /^\/directory$/.test(pathname);
+
+    // const isProfilePage = /^\/employee$/.test(location.pathname);
+    const isProfilePage =
+      /^\/employee\/[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/.test(
+        pathname
+      );
+
+    return !(isDirectoryPath || isProfilePage);
+  };
   const allowedProjectStatusIds = [
     "603e994b-a27f-4e5d-a251-f3d69b0498ba",
     "cdad86aa-8a56-4ff4-b633-9c629057dfef",
@@ -82,16 +95,16 @@ const Header = () => {
   };
 
   const handleProfilePage = () => {
-    navigate(`/employee/${profile?.employeeInfo?.id}?for=attendance`);
+    navigate(`/employee/${profile?.employeeInfo?.id}`);
   };
 
   const { projectNames, loading: projectLoading, fetchData } = useProjectName();
 
   const selectedProject = useSelectedproject();
 
-  const projectsForDropdown = isDashboard
+  const projectsForDropdown = isDashboardPath
     ? projectNames
-    : projectNames?.filter(project =>
+    : projectNames?.filter((project) =>
         allowedProjectStatusIds.includes(project.projectStatusId)
       );
 
@@ -109,7 +122,9 @@ const Header = () => {
       const selectedProjectObj = projectNames.find(
         (p) => p?.id === selectedProject
       );
-      currentProjectDisplayName = selectedProjectObj ? selectedProjectObj.name : "All Projects";
+      currentProjectDisplayName = selectedProjectObj
+        ? selectedProjectObj.name
+        : "All Projects";
     }
   }
 
@@ -125,16 +140,17 @@ const Header = () => {
       if (projectNames.length === 1) {
         dispatch(setProjectId(projectNames[0]?.id || null));
       } else {
-        if (isDashboard) {
+        if (isDashboardPath) {
           dispatch(setProjectId(null));
         } else {
-          const firstAllowedProject = projectNames.find(project => allowedProjectStatusIds.includes(project.projectStatusId));
+          const firstAllowedProject = projectNames.find((project) =>
+            allowedProjectStatusIds.includes(project.projectStatusId)
+          );
           dispatch(setProjectId(firstAllowedProject?.id || null));
         }
       }
     }
-  }, [projectNames, selectedProject, dispatch, isDashboard]);
+  }, [projectNames, selectedProject, dispatch, isDashboardPath]);
-
 
   const handler = useCallback(
     async (data) => {
@@ -204,7 +220,7 @@ const Header = () => {
         className="navbar-nav-right d-flex align-items-center justify-content-between"
         id="navbar-collapse"
       >
-        {projectNames && !isDirectoryPath && (
+        {showProjectDropdown(location.pathname) && (
           <div className="align-items-center">
             <i className="rounded-circle bx bx-building-house bx-sm-lg bx-md me-2"></i>
             <div className="btn-group">
@@ -223,12 +239,14 @@ const Header = () => {
                 </span>
               )}
 
-              {shouldShowDropdown && projectsForDropdown && projectsForDropdown.length > 0 && (
+              {shouldShowDropdown &&
+                projectsForDropdown &&
+                projectsForDropdown.length > 0 && (
                   <ul
                     className="dropdown-menu"
                     style={{ overflow: "auto", maxHeight: "300px" }}
                   >
-                  {isDashboard && (
+                    {isDashboardPath && (
                       <li>
                         <button
                           className="dropdown-item"

src/components/common/DateRangePicker.jsx

@@ -27,8 +27,7 @@ const DateRangePicker = ({
       altInput: true,
       altFormat: "d-m-Y",
       defaultDate: [startDate, endDate],
-      static: false,
+      static: true,
-      // appendTo: document.body,
       clickOpens: true,
       maxDate: endDate,
       onChange: (selectedDates, dateStr) => {

src/hooks/useFormattedDate.js

@@ -0,0 +1,26 @@
+import { format } from "date-fns";
+
+/**
+ * A custom hook to format a date string, object, or number.
+ * @param {string | Date | number} date - The date to be formatted.
+ * @param {string} formatString - The format string (e.g., 'MMMM do, yyyy').
+ * @returns {string} The formatted date string.
+ */
+const useFormattedDate = (date, formatString) => {
+  // Return early if no date is provided
+  if (!date) {
+    return "";
+  }
+
+  try {
+    const dateObj = new Date(date);
+    // You could also add error handling for invalid dates
+    // if (!isValid(dateObj)) return 'Invalid Date';
+    return format(dateObj, formatString);
+  } catch (error) {
+    console.error("Error formatting date:", error);
+    return ""; // Return an empty string or a default value on error
+  }
+};
+
+export default useFormattedDate;

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,
@@ -117,6 +117,36 @@ export const useProjectsByEmployee = (employeeId) => {
   return { projectList, loading: isLoading, error, refetch };
 };
 
+export const useProjectsAllocationByEmployee = (employeeId) => {
+  const {
+    data: projectList = [],
+    isLoading,
+    error,
+    refetch,
+  } = useQuery({
+    queryKey: ["ProjectsAllocationByEmployee", employeeId],
+    queryFn: async () => {
+      const res = await ProjectRepository.getProjectsAllocationByEmployee(
+        employeeId
+      );
+      const sortedProjects = [...res.data].sort((a, b) =>
+        a.projectName.localeCompare(b.projectName)
+      );
+      return sortedProjects || res;
+
+      //return res.data || res;
+    },
+    enabled: !!employeeId,
+    onError: (error) => {
+      showToast(
+        error.message || "Error while Fetching project Employee",
+        "error"
+      );
+    },
+  });
+  return { projectList, loading: isLoading, error, refetch };
+};
+
 export const useProjectName = () => {
   const {
     data = [],
@@ -176,6 +206,29 @@ export const useProjectTasks = (workAreaId, IsExpandedArea = false) => {
   return { ProjectTaskList, isLoading, error };
 };
 
+export const useProjectTasksByEmployee = (
+  employeeId,
+  fromDate,
+  toDate,
+) => {
+
+  return useQuery({
+    queryKey: ["TasksByEmployee", employeeId],
+    queryFn: async () => {
+      const res = await ProjectRepository.getProjectTasksByEmployee(
+        employeeId,
+        fromDate,
+        toDate
+      );
+      return res.data;
+    },
+    enabled: !!employeeId && !!fromDate && !!toDate,
+    onError: (error) => {
+      showToast(error.message || "Error while Fetching project Tasks", "error");
+    },
+  });
+};
+
 // -- -------------Mutation-------------------------------
 
 export const useCreateProject = ({ onSuccessCallback }) => {

src/pages/employee/EmployeeList.jsx

@@ -51,7 +51,8 @@ const EmployeeList = () => {
 
   const { employees, loading, setLoading, error, recallEmployeeData } =
     useEmployeesAllOrByProjectId(
-      showAllEmployees ,selectedProjectId,
+      showAllEmployees,
+      selectedProjectId,
       showInactive
     );
 
@@ -153,8 +154,6 @@ const EmployeeList = () => {
     }
   };
 
-
-
   const handleAllEmployeesToggle = (e) => {
     const isChecked = e.target.checked;
     setShowInactive(false);
@@ -295,12 +294,12 @@ const EmployeeList = () => {
 
         {ViewTeamMember ? (
           // <div className="row">
-            <div className="card px-0 px-sm-4">
+          <div className="card p-1">
             <div className="card-datatable table-responsive pt-2">
               <div
                 id="DataTables_Table_0_wrapper"
-                  className="dataTables_wrapper no-footer px-2 "
+                className="dataTables_wrapper dt-bootstrap5 no-footer"
-               
+                style={{ width: "98%" }}
               >
                 <div className="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-3">
                   {/* Switches: All Employees + Inactive */}
@@ -480,7 +479,9 @@ const EmployeeList = () => {
                         aria-label="User: activate to sort column ascending"
                         aria-sort="descending"
                       >
-                          <div className="text-start ms-5">Official Designation</div>
+                        <div className="text-start ms-5">
+                          Official Designation
+                        </div>
                       </th>
 
                       <th
@@ -564,9 +565,7 @@ const EmployeeList = () => {
                               <div className="d-flex flex-column">
                                 <a
                                   onClick={() =>
-                                      navigate(
+                                    navigate(`/employee/${item.id}`)
-                                        `/employee/${item.id}?for=attendance`
-                                      )
                                   }
                                   className="text-heading text-truncate cursor-pointer"
                                 >
@@ -581,7 +580,7 @@ const EmployeeList = () => {
                           <td className="text-start  d-none  d-sm-table-cell">
                             {item.email ? (
                               <span className="text-truncate">
-                                  <i className="bx bxs-envelope text-primary text-truncate me-2"></i>
+                                <i className="bx bxs-envelope text-primary me-2"></i>
                                 {item.email}
                               </span>
                             ) : (
@@ -639,8 +638,7 @@ const EmployeeList = () => {
                                     }
                                     className="dropdown-item py-1"
                                   >
-                                      <i className="bx bx-detail bx-sm"></i>{" "}
+                                    <i className="bx bx-detail bx-sm"></i> View
-                                      View
                                   </button>
                                   <button
                                     className="dropdown-item py-1"
@@ -737,8 +735,8 @@ const EmployeeList = () => {
               </div>
             </div>
           </div>
-          // </div>
         ) : (
+          // </div>
           <div className="card">
             <div className="text-center">
               <i className="fa-solid fa-triangle-exclamation fs-5"></i>

src/pages/employee/EmployeeProfile.jsx

@@ -1,26 +1,27 @@
 import React, { useState, useEffect } from "react";
-import EmpProfile from "../../components/Employee/EmpProfile";
+import { useSearchParams, useParams, useNavigate } from "react-router-dom";
-import axios from "axios";
+import { useSelector } from "react-redux";
-import Breadcrumb from "../../components/common/Breadcrumb";
+
-import EmployeeNav from "../../components/Employee/EmployeeNav";
-import { useSearchParams, useParams } from "react-router-dom";
-import { getCachedData } from "../../slices/apiDataManager";
 import {
   useEmployeeProfile,
   useEmployees,
   useEmployeesByProject,
 } from "../../hooks/useEmployees";
 import { useProfile } from "../../hooks/useProfile";
+import { getCachedData } from "../../slices/apiDataManager";
 
-import { useSelector } from "react-redux";
 import EmployeeRepository from "../../repositories/EmployeeRepository";
 import { ComingSoonPage } from "../Misc/ComingSoonPage";
-import { useNavigate } from "react-router-dom";
+
-import Avatar from "../../components/common/Avatar";
+import Breadcrumb from "../../components/common/Breadcrumb";
-import AttendancesEmployeeRecords from "./AttendancesEmployeeRecords";
+import EmployeeNav from "../../components/Employee/EmployeeNav";
+import EmpProfile from "../../components/Employee/EmpProfile";
+import EmpAttendance from "../../components/Employee/EmpAttendance";
 import ManageEmployee from "../../components/Employee/ManageEmployee";
-import { useChangePassword } from "../../components/Context/ChangePasswordContext";
+import EmpBanner from "../../components/Employee/EmpBanner";
-import GlobalModel from "../../components/common/GlobalModel";
+import EmpDashboard from "../../components/Employee/EmpDashboard";
+import EmpDocuments from "../../components/Employee/EmpDocuments";
+import EmpActivities from "../../components/Employee/EmpActivities";
 
 const EmployeeProfile = () => {
   const { profile } = useProfile();
@@ -32,7 +33,7 @@ const EmployeeProfile = () => {
 
   const [SearchParams] = useSearchParams();
   const tab = SearchParams.get("for");
-  const [activePill, setActivePill] = useState(tab);
+  const [activePill, setActivePill] = useState(tab || "profile");
   const [currentEmployee, setCurrentEmployee] = useState();
   const [showModal, setShowModal] = useState(false);
 
@@ -40,8 +41,6 @@ const EmployeeProfile = () => {
     setActivePill(pillKey);
   };
 
-
-
   const fetchEmployeeProfile = async (employeeID) => {
     try {
       const resp = await EmployeeRepository.getEmployeeProfile(employeeID);
@@ -62,17 +61,24 @@ const EmployeeProfile = () => {
   const renderContent = () => {
     if (loading) return <div>Loading</div>;
     switch (activePill) {
-      case "attendance": {
+      case "profile": {
         return (
           <>
-            <AttendancesEmployeeRecords employee={employeeId} />
+            <EmpDashboard profile={currentEmployee} />
           </>
         );
       }
-      case "dcoument": {
+      case "attendance": {
         return (
           <>
-            <ComingSoonPage />
+            <EmpAttendance employee={employeeId} />
+          </>
+        );
+      }
+      case "documents": {
+        return (
+          <>
+            <EmpDocuments />
           </>
         );
         break;
@@ -80,7 +86,7 @@ const EmployeeProfile = () => {
       case "activities": {
         return (
           <>
-            <ComingSoonPage />
+            <EmpActivities employee={currentEmployee} />
           </>
         );
         break;
@@ -98,14 +104,8 @@ const EmployeeProfile = () => {
   if (loading) {
     return <div>Loading...</div>;
   }
-  const { openChangePassword } = useChangePassword();
   return (
     <>
-      {showModal && (
-        <GlobalModel size="lg" isOpen={showModal} closeModal={() => setShowModal(false)}>
-          <ManageEmployee employeeId={employeeId} onClosed={() => setShowModal(false)} />
-        </GlobalModel>
-      )}
       <div className="container-fluid">
         <Breadcrumb
           data={[
@@ -114,151 +114,24 @@ const EmployeeProfile = () => {
             { label: "Profile", link: null },
           ]}
         ></Breadcrumb>
-
         <div className="row">
-          <div className="col-12 col-md-8 col-lg-4 order-1 order-lg-1">
+          <div className="col-12 ">
-            <div className="row">
+            <EmpBanner
-              <div className="col-12 mb-4">
+              profile={currentEmployee}
-                <div className="card">
+              loggedInUser={profile}
-                  <div className="card-body">
+            ></EmpBanner>
-                    <div className="d-flex flex-row flex-lg-column">
+          </div>
-                      <div className="d-flex flex-column justify-content-center align-items-center text-center">
+        </div>{" "}
-                        <Avatar
-                          firstName={`${currentEmployee?.firstName}`}
-                          lastName={`${currentEmployee?.lastName}`}
-                          size={"lg"}
-                        />
-                        <div className="py-2">
-                          <p className="h6">{`${currentEmployee?.firstName} ${currentEmployee?.lastName}`}</p>
-                        </div>
-                      </div>
-                      <div className="w-100 d-flex flex-column justify-content-start">
-                        <div className="mt-3 w-100">
-                          <h6 className="mb-2 text-muted text-start">
-                            Employee Info
-                          </h6>
-                          <table className="table table-borderless mb-3">
-                            <tbody>
-                              <tr>
-                                <td className="fw-medium text-start">Email:</td>
-                                <td className="text-start">
-                                  {currentEmployee?.email || <em>NA</em>}
-                                </td>
-                              </tr>
-                              <tr>
-                                <td className="fw-medium text-start text-nowrap">
-                                  Phone Number:
-                                </td>
-                                <td className="text-start">
-                                  {currentEmployee?.phoneNumber || <em>NA</em>}
-                                </td>
-                              </tr> 
-                              <tr>
-                                <td className="fw-medium text-start" style={{ width: '120px' }}>
-                                  Emergency Contact Person:
-                                </td>
-                                <td className="text-start align-bottom">
-                                  {currentEmployee?.emergencyContactPerson || <em>NA</em>}
-                                </td>
-                              </tr>
-                              <tr>
-                                <td className="fw-medium text-start">
-                                  Emergency Contact Number:
-                                </td>
-                                <td className="text-start align-bottom">
-                                  {currentEmployee?.emergencyPhoneNumber || <em>NA</em>}
-                                </td>
-                              </tr>
-                              <tr>
-                                <td className="fw-medium text-start">
-                                  Gender:
-                                </td>
-                                <td className="text-start">
-                                  {currentEmployee?.gender || <em>NA</em>}
-                                </td>
-                              </tr>
-                              <tr>
-                                <td className="fw-medium text-start">
-                                  Birth Date:
-                                </td>
-                                <td className="text-start">
-                                  {currentEmployee?.birthDate ? (
-                                    new Date(
-                                      currentEmployee.birthDate
-                                    ).toLocaleDateString()
-                                  ) : (
-                                    <em>NA</em>
-                                  )}
-                                </td>
-                              </tr>
-
-                              <tr>
-                                <td className="fw-medium text-start">
-                                  Joining Date:
-                                </td>
-                                <td className="text-start">
-                                  {currentEmployee?.joiningDate ? (
-                                    new Date(
-                                      currentEmployee.joiningDate
-                                    ).toLocaleDateString()
-                                  ) : (
-                                    <em>NA</em>
-                                  )}
-                                </td>
-                              </tr>
-                              <tr>
-                                <td className="fw-medium text-start">
-                                  Job Role:
-                                </td>
-                                <td className="text-start">
-                                  {currentEmployee?.jobRole || <em>NA</em>}
-                                </td>
-                              </tr>
-                              <tr>
-                                <td className="fw-medium text-start align-top" >
-                                  Address:
-                                </td>
-                                <td className="text-start">
-                                  {currentEmployee?.currentAddress || <em>NA</em>}
-                                </td>
-                              </tr>
-
-                            </tbody>
-                          </table>
-                        </div>
-                        <button
-                          className="btn btn-primary btn-block"
-                          onClick={() => setShowModal(true)}
-                        >
-                          Edit Profile
-                        </button>
-                        {currentEmployee?.id == profile?.employeeInfo?.id && (
-                          <button
-                            className="btn btn-outline-primary btn-block mt-2"
-                            onClick={() => openChangePassword()}
-                          >
-                            Change Password
-                          </button>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div className="col-12 col-lg-8 order-2 order-lg-2 mb-4">
         <div className="row">
+          <div className="col-12 ">
             <EmployeeNav
               onPillClick={handlePillClick}
               activePill={activePill}
             />
           </div>
-            <div className="card">
-              <div className="row row-bordered g-0">{renderContent()}</div>
-            </div>
         </div>
+        <div className="row">
+              <div className=" ">{renderContent()}</div>
         </div>
       </div>
     </>

src/repositories/ProjectRepository.jsx

@@ -8,7 +8,8 @@ const ProjectRepository = {
   getProjectAllocation: (projetid) =>
     api.get(`api/project/allocation/${projetid}`),
 
-  getEmployeesByProject:(projectId)=>api.get(`/api/Project/employees/get/${projectId}`),
+  getEmployeesByProject: (projectId) =>
+    api.get(`/api/Project/employees/get/${projectId}`),
 
   manageProject: (data) => api.post("/api/project", data),
   // updateProject: (data) => api.post("/api/project/update", data),
@@ -21,17 +22,25 @@ const ProjectRepository = {
 
   updateProject: (id, data) => api.put(`/api/project/update/${id}`, data),
   deleteProject: (id) => api.delete(`/projects/${id}`),
-  getProjectsByEmployee: ( id ) => api.get( `/api/project/assigned-projects/${ id }` ),
+  getProjectsByEmployee: (id) =>
-  updateProjectsByEmployee:(id,data)=>api.post(`/api/project/assign-projects/${id}`,data),
+    api.get(`/api/project/assigned-projects/${id}`),
+  getProjectsAllocationByEmployee: (id) =>
+    api.get(`/api/project/allocation-histery/${id}`),
+  updateProjectsByEmployee: (id, data) =>
+    api.post(`/api/project/assign-projects/${id}`, data),
   projectNameList: () => api.get("/api/project/list/basic"),
 
   getProjectDetails: (id) => api.get(`/api/project/details/${id}`),
   getProjectInfraByproject: (id) => api.get(`/api/project/infra-details/${id}`),
-  getProjectTasksByWorkArea:(id)=>api.get(`/api/project/tasks/${id}`)
+  getProjectTasksByWorkArea: (id) => api.get(`/api/project/tasks/${id}`),
+  getProjectTasksByEmployee: (id, fromDate, toDate) =>
+    api.get(
+      `/api/project/tasks-employee/${id}?fromDate=${fromDate}&toDate=${toDate}`
+    ),
 };
 
 export const TasksRepository = {
   assignTask: (data) => api.post("/api/task/assign", data),
   // reportTask:(data)=>api.post("/api/task/report",data)
-}
+};
 export default ProjectRepository;