marco.pms.web/src/components/Employee/EmpActivities.jsx

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="7"
              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;