marco.pms.web/src/pages/Activities/AttendancePage.jsx

import React, { useState, useEffect, useCallback } from "react";
import {
  cacheData,
  clearCacheKey,
  getCachedData,
  getCachedProfileData,
} from "../../slices/apiDataManager";
import Breadcrumb from "../../components/common/Breadcrumb";
import AttendanceLog from "../../components/Activities/AttendcesLogs";
import Attendance from "../../components/Activities/Attendance";
import showToast from "../../services/toastService";
import Regularization from "../../components/Activities/Regularization";
import { useAttendance } from "../../hooks/useAttendance";
import { useDispatch, useSelector } from "react-redux";
import { setProjectId } from "../../slices/localVariablesSlice";
import { markCurrentAttendance } from "../../slices/apiSlice/attendanceAllSlice";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
import eventBus from "../../services/eventBus";
import AttendanceRepository from "../../repositories/AttendanceRepository"; // Make sure this is imported if used
import { useProjectName } from "../../hooks/useProjects";
import GlobalModel from "../../components/common/GlobalModel";
import CheckCheckOutmodel from "../../components/Activities/CheckCheckOutForm";
import AttendLogs from "../../components/Activities/AttendLogs";
import Confirmation from "../../components/Activities/Confirmation"; // Make sure this is imported if used
import { useQueryClient } from "@tanstack/react-query";

const AttendancePage = () => {
  const [activeTab, setActiveTab] = useState("all");
  const [showPending, setShowPending] = useState(false); // Renamed for consistency
  const [searchQuery, setSearchQuery] = useState("");
  const loginUser = getCachedProfileData();
  const selectedProject = useSelector((store) => store.localVariables.projectId);
  const dispatch = useDispatch();
  const {
    attendance,
    loading: attLoading,
    recall: attrecall,
  } = useAttendance(selectedProject); // Corrected typo: useAttendace to useAttendance
  const [attendances, setAttendances] = useState();
  const [empRoles, setEmpRoles] = useState(null);
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
  const [modelConfig, setModelConfig] = useState();
  const DoRegularized = useHasUserPermission(REGULARIZE_ATTENDANCE);
  const { projectNames, loading: projectLoading, fetchData } = useProjectName();


  const [formData, setFormData] = useState({
    markTime: "",
    description: "",
    date: new Date().toLocaleDateString(),
  });

  const handler = useCallback(
    (msg) => {
      if (selectedProject === msg.projectId) {
        // Ensure attendances is not null before mapping
        const updatedAttendance = attendances
          ? attendances.map((item) =>
              item.employeeId === msg.response.employeeId
                ? { ...item, ...msg.response }
                : item
            )
          : [msg.response]; // If attendances is null, initialize with new response

        cacheData("Attendance", {
          data: updatedAttendance,
          projectId: selectedProject,
        });
        setAttendances(updatedAttendance);
      }
    },
    [selectedProject, attendances]
  );

  const employeeHandler = useCallback(
    (msg) => {
      if (attendances?.some((item) => item.employeeId === msg.employeeId)) {
        // Ensure AttendanceRepository is imported and available
        AttendanceRepository.getAttendance(selectedProject)
          .then((response) => {
            cacheData("Attendance", { data: response.data, selectedProject });
            setAttendances(response.data);
          })
          .catch((error) => {
            console.error(error);
          });
      }
    },
    [selectedProject, attendances]
  );

  const getRole = (roleId) => {
    if (!empRoles) return "Unassigned";
    if (!roleId) return "Unassigned";
    const role = empRoles.find((b) => b.id === roleId);
    return role ? role.role : "Unassigned";
  };

  const openModel = () => {
    setIsCreateModalOpen(true);
  };

  const handleModalData = (employee) => {
    setModelConfig(employee);
  };

  const closeModal = () => {
    setModelConfig(null);
    setIsCreateModalOpen(false);
    const modalElement = document.getElementById("check-Out-modal");
    if (modalElement) {
      modalElement.classList.remove("show");
      modalElement.style.display = "none";
      document.body.classList.remove("modal-open");
      const modalBackdrop = document.querySelector(".modal-backdrop");
      if (modalBackdrop) {
        modalBackdrop.remove();
      }
    }
  };

  const handleSubmit = (formData) => {
    dispatch(markCurrentAttendance(formData))
      .then((action) => {
        // Check if payload and employeeId exist before mapping
        if (action.payload && action.payload.employeeId) {
          const updatedAttendance = attendances
            ? attendances.map((item) =>
                item.employeeId === action.payload.employeeId
                  ? { ...item, ...action.payload }
                  : item
              )
            : [action.payload]; // If attendances is null, initialize with new payload

          cacheData("Attendance", {
            data: updatedAttendance,
            projectId: selectedProject,
          });
          setAttendances(updatedAttendance);
          showToast("Attendance Marked Successfully", "success");
        } else {
          showToast("Failed to mark attendance: Invalid response", "error");
        }
      })
      .catch((error) => {
        showToast(error.message, "error");
      });
  };

  const handleToggle = (event) => {
    setShowPending(event.target.checked);
  };

  useEffect(() => {
    if (selectedProject === null && projectNames.length > 0) {
      dispatch(setProjectId(projectNames[0]?.id));
    }
  }, [selectedProject, projectNames, dispatch]);

  // Open modal when modelConfig is set
  useEffect(() => {
    if (modelConfig !== null) {
      openModel();
    }
  }, [modelConfig]);

  useEffect(() => {
    setAttendances(attendance);
  }, [attendance]);

  // Filter and search logic for the 'Today's' tab (Attendance component)
  const filteredAndSearchedTodayAttendance = useCallback(() => {
    let currentData = attendances;

    if (showPending) {
      currentData = currentData?.filter(
        (att) => att?.checkInTime !== null && att?.checkOutTime === null
      );
    }

    if (searchQuery) {
      const lowerCaseSearchQuery = searchQuery.toLowerCase();
      currentData = currentData?.filter((att) => {
        // Combine first, middle, and last names for a comprehensive search
        const fullName = [att.firstName, att.middleName, att.lastName]
          .filter(Boolean) // Remove null or undefined parts
          .join(" ")
          .toLowerCase();

        return (
          att.employeeName?.toLowerCase().includes(lowerCaseSearchQuery) ||
          att.employeeId?.toLowerCase().includes(lowerCaseSearchQuery) ||
          fullName.includes(lowerCaseSearchQuery)
        );
      });
    }
    return currentData;
  }, [attendances, showPending, searchQuery]);


  // Event bus listeners
  useEffect(() => {
    eventBus.on("attendance", handler);
    return () => eventBus.off("attendance", handler);
  }, [handler]);

  return (
    <>
      {isCreateModalOpen && modelConfig && (
        <GlobalModel
          isOpen={isCreateModalOpen}
          size={modelConfig?.action === 6 && "lg"}
          closeModal={closeModal}
        >
          {(modelConfig?.action === 0 ||
            modelConfig?.action === 1 ||
            modelConfig?.action === 2) && (
            <CheckCheckOutmodel
              modeldata={modelConfig}
              closeModal={closeModal}
            />
          )}
          {/* For view logs */}
          {modelConfig?.action === 6 && (
            <AttendLogs Id={modelConfig?.id} closeModal={closeModal} />
          )}
          {modelConfig?.action === 7 && (
            <Confirmation closeModal={closeModal} />
          )}
        </GlobalModel>
      )}

      <div className="container-fluid">
        <Breadcrumb
          data={[
            { label: "Home", link: "/dashboard" },
            { label: "Attendance", link: null },
          ]}
        ></Breadcrumb>
        <div className="nav-align-top nav-tabs-shadow">
          <ul className="nav nav-tabs d-flex justify-content-between align-items-center" role="tablist">
            <div className="d-flex">
              <li className="nav-item">
                <button
                  type="button"
                  className={`nav-link ${activeTab === "all" ? "active" : ""} fs-6`}
                  onClick={() => setActiveTab("all")}
                  data-bs-toggle="tab"
                  data-bs-target="#navs-top-home"
                >
                  Today's
                </button>
              </li>
              <li className="nav-item">
                <button
                  type="button"
                  className={`nav-link ${activeTab === "logs" ? "active" : ""} fs-6`}
                  onClick={() => setActiveTab("logs")}
                  data-bs-toggle="tab"
                  data-bs-target="#navs-top-profile"
                >
                  Logs
                </button>
              </li>
              <li className={`nav-item ${!DoRegularized && "d-none"}`}>
                <button
                  type="button"
                  className={`nav-link ${activeTab === "regularization" ? "active" : ""
                    } fs-6`}
                  onClick={() => setActiveTab("regularization")}
                  data-bs-toggle="tab"
                  data-bs-target="#navs-top-messages"
                >
                  Regularization
                </button>
              </li>
            </div>
            {/* Search Box remains here */}
            <div className="p-2">
              <input
                type="text"
                className="form-control form-control-sm" // Bootstrap small size input
                placeholder="Search employee..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
              // style={{ width: "200px", height: "30px" }} // Optional: further reduce width/height
              />
            </div>

          </ul>
          <div className="tab-content attedanceTabs py-0 px-1 px-sm-3" >
            {activeTab === "all" && (
              <div className="tab-pane fade show active py-0">
                <Attendance
                  attendance={filteredAndSearchedTodayAttendance()}
                  handleModalData={handleModalData}
                  getRole={getRole}
                  setshowOnlyCheckout={setShowPending}
                  showOnlyCheckout={showPending}
                />
                {!attLoading && filteredAndSearchedTodayAttendance()?.length === 0 && (
                  <p>
                    {" "}
                    {showPending
                      ? "No Pending Available"
                      : "No Employee assigned yet."}{" "}
                  </p>
                )}
              </div>
            )}
            {activeTab === "logs" && (
              <div className="tab-pane fade show active py-0">
                <AttendanceLog
                  handleModalData={handleModalData}
                  projectId={selectedProject}
                  setshowOnlyCheckout={setShowPending}
                  showOnlyCheckout={showPending}
                  searchQuery={searchQuery} // Pass search query to AttendanceLog
                />
              </div>
            )}
            {activeTab === "regularization" && DoRegularized && (
              <div className="tab-pane fade show active py-0">
                <Regularization
                  handleRequest={handleSubmit}
                  searchQuery={searchQuery} // ✅ Pass it here
                />
              </div>
            )}

            {!attLoading && !attendances && <span>Not Found</span>}
          </div>
        </div>
      </div>
    </>
  );
};

export default AttendancePage;