From beefe6396c54aaec9dfeceb6eaf4a04ee9458926 Mon Sep 17 00:00:00 2001
From: Vikas Nale <vikas@marcoaiot.com>
Date: Wed, 6 Aug 2025 18:32:43 +0530
Subject: [PATCH] - Add date format hook - add Ui for Activities

---
 package-lock.json                         |  10 ++
 package.json                              |   1 +
 src/components/Employee/EmpActivities.jsx | 155 ++++++++++++++++++++++
 src/components/Employee/EmpAttendance.jsx |   2 +-
 src/components/Employee/EmpBanner.jsx     |   4 +-
 src/components/Employee/EmpDocuments.jsx  |   2 +-
 src/components/common/DateRangePicker.jsx |   3 +-
 src/hooks/useFormattedDate.js             |  26 ++++
 src/hooks/useProjects.js                  |  28 ++++
 src/pages/employee/EmployeeProfile.jsx    |   3 +-
 src/repositories/ProjectRepository.jsx    |   4 +
 11 files changed, 231 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Employee/EmpActivities.jsx
 create mode 100644 src/hooks/useFormattedDate.js

diff --git a/package-lock.json b/package-lock.json
index 39e9a3b4..3baaf7c9 100644
--- a/package-lock.json
+++ b/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,15 @@
         "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==",
+      "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",
diff --git a/package.json b/package.json
index 3f4d52fe..33e1f019 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Employee/EmpActivities.jsx b/src/components/Employee/EmpActivities.jsx
new file mode 100644
index 00000000..53b568ec
--- /dev/null
+++ b/src/components/Employee/EmpActivities.jsx
@@ -0,0 +1,155 @@
+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");
+  console.log(employee);
+
+  const {
+    ProjectTaskList,
+    loading: selectedProjectLoding,
+    refetch,
+  } = useProjectTasksByEmployee(employee?.id);
+
+  console.log(ProjectTaskList);
+  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">
+            <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">Matrix Properties</h6>
+                  <small className="text-body-secondary">
+                    {formattedToday}
+                  </small>
+                </div>
+                <p className="mb-2">Branch Fitting</p>
+                <p className="mb-2">
+                  Building 1 &gt; First Floor &gt; Zone One
+                </p>
+                <p className="mb-2">
+                  <span>Planned: 22 Meter</span>
+                  <span className="ms-2">Completed: 22 Meter</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;
diff --git a/src/components/Employee/EmpAttendance.jsx b/src/components/Employee/EmpAttendance.jsx
index f94b3a8a..d3cbe817 100644
--- a/src/components/Employee/EmpAttendance.jsx
+++ b/src/components/Employee/EmpAttendance.jsx
@@ -120,7 +120,7 @@ const EmpAttendance = ({ employee }) => {
           <AttendLogs Id={attendanceId} />
         </GlobalModel>
       )}
-      <div className="card px-4 mt-0 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"
diff --git a/src/components/Employee/EmpBanner.jsx b/src/components/Employee/EmpBanner.jsx
index 7b022d09..f77de0a0 100644
--- a/src/components/Employee/EmpBanner.jsx
+++ b/src/components/Employee/EmpBanner.jsx
@@ -24,7 +24,7 @@ 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">
-          {profile.gender.toLowerCase() == "male" && (
+          {profile?.gender?.toLowerCase() == "male" && (
             <img
               width={125}
               src="../../assets/img/avatars/avatar_m_01.png"
@@ -32,7 +32,7 @@ const EmpBanner = ({ profile, loggedInUser }) => {
               className="d-block h-auto ms-0 ms-sm-6 rounded-3 user-profile-img"
             />
           )}
-          {profile.gender.toLowerCase() == "female" && (
+          {profile?.gender?.toLowerCase() == "female" && (
             <img
               width={125}
               src="../../assets/img/avatars/avatar_f_02.png"
diff --git a/src/components/Employee/EmpDocuments.jsx b/src/components/Employee/EmpDocuments.jsx
index 1042c6c8..b8390590 100644
--- a/src/components/Employee/EmpDocuments.jsx
+++ b/src/components/Employee/EmpDocuments.jsx
@@ -5,7 +5,7 @@ const EmpDocuments = ({ profile, loggedInUser }) => {
     <>
       <div
         id="DataTables_Table_0_wrapper"
-        class="dt-container dt-bootstrap5 dt-empty-footer"
+        class=" card mt-5 dt-container dt-bootstrap5 dt-empty-footer"
       >
         <div class="row card-header border-bottom mx-0 px-3 py-2">
           <div class="d-md-flex justify-content-between align-items-center dt-layout-start col-md-auto me-auto">
diff --git a/src/components/common/DateRangePicker.jsx b/src/components/common/DateRangePicker.jsx
index 1e95ef09..ce89b5e1 100644
--- a/src/components/common/DateRangePicker.jsx
+++ b/src/components/common/DateRangePicker.jsx
@@ -27,8 +27,7 @@ const DateRangePicker = ({
       altInput: true,
       altFormat: "d-m-Y",
       defaultDate: [startDate, endDate],
-      static: false,
-      // appendTo: document.body,
+      static: true,
       clickOpens: true,
       maxDate: endDate,
       onChange: (selectedDates, dateStr) => {
diff --git a/src/hooks/useFormattedDate.js b/src/hooks/useFormattedDate.js
new file mode 100644
index 00000000..4c908865
--- /dev/null
+++ b/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;
diff --git a/src/hooks/useProjects.js b/src/hooks/useProjects.js
index 8c7cc573..2be75a17 100644
--- a/src/hooks/useProjects.js
+++ b/src/hooks/useProjects.js
@@ -206,6 +206,34 @@ export const useProjectTasks = (workAreaId, IsExpandedArea = false) => {
   return { ProjectTaskList, isLoading, error };
 };
 
+export const useProjectTasksByEmployee = (
+  employeeId,
+  fromDate,
+  toDate,
+  IsExpandedArea = false
+) => {
+  const {
+    data: ProjectTaskList,
+    isLoading,
+    error,
+  } = useQuery({
+    queryKey: ["TasksByEmployee", employeeId],
+    queryFn: async () => {
+      const res = await ProjectRepository.getProjectTasksByEmployee(
+        employeeId,
+        fromDate,
+        toDate
+      );
+      return res.data;
+    },
+    enabled: !!employeeId && !!IsExpandedArea,
+    onError: (error) => {
+      showToast(error.message || "Error while Fetching project Tasks", "error");
+    },
+  });
+  return { ProjectTaskList, isLoading, error };
+};
+
 // -- -------------Mutation-------------------------------
 
 export const useCreateProject = ({ onSuccessCallback }) => {
diff --git a/src/pages/employee/EmployeeProfile.jsx b/src/pages/employee/EmployeeProfile.jsx
index e7fafa4a..3a31019c 100644
--- a/src/pages/employee/EmployeeProfile.jsx
+++ b/src/pages/employee/EmployeeProfile.jsx
@@ -21,6 +21,7 @@ import ManageEmployee from "../../components/Employee/ManageEmployee";
 import EmpBanner from "../../components/Employee/EmpBanner";
 import EmpDashboard from "../../components/Employee/EmpDashboard";
 import EmpDocuments from "../../components/Employee/EmpDocuments";
+import EmpActivities from "../../components/Employee/EmpActivities";
 
 const EmployeeProfile = () => {
   const { profile } = useProfile();
@@ -85,7 +86,7 @@ const EmployeeProfile = () => {
       case "activities": {
         return (
           <>
-            <ComingSoonPage />
+            <EmpActivities employee={currentEmployee} />
           </>
         );
         break;
diff --git a/src/repositories/ProjectRepository.jsx b/src/repositories/ProjectRepository.jsx
index 66788834..c930948d 100644
--- a/src/repositories/ProjectRepository.jsx
+++ b/src/repositories/ProjectRepository.jsx
@@ -33,6 +33,10 @@ const ProjectRepository = {
   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}`),
+  getProjectTasksByEmployee: (id, fromDate, toDate) =>
+    api.get(
+      `/api/project/tasks-employee/${id}?fromDate=${fromDate}&toDate:${toDate}`
+    ),
 };
 
 export const TasksRepository = {