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

import React, { useState, useEffect } from "react";
import {
  cacheData,
  clearCacheKey,
  getCachedData,
  getCachedProfileData,
  useSelectedProject,
} from "../../slices/apiDataManager";
import Breadcrumb from "../../components/common/Breadcrumb";
import AttendanceLog from "../../components/Activities/AttendcesLogs";
import Attendance from "../../components/Activities/Attendance";
import Regularization from "../../components/Activities/Regularization";
import { useAttendance } from "../../hooks/useAttendance";
import { useDispatch, useSelector } from "react-redux";
import { setOrganization, setProjectId } from "../../slices/localVariablesSlice";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { REGULARIZE_ATTENDANCE } from "../../utils/constants";
import eventBus from "../../services/eventBus";
import {
  useProjectAssignedOrganizationsName,
  useProjectName,
} from "../../hooks/useProjects";
import GlobalModel from "../../components/common/GlobalModel";
import CheckCheckOutmodel from "../../components/Activities/CheckCheckOutForm";
import AttendLogs from "../../components/Activities/AttendLogs";
import { useQueryClient } from "@tanstack/react-query";

const AttendancePage = () => {
  const [activeTab, setActiveTab] = useState("all");
  const [ShowPending, setShowPending] = useState(false);
  const [searchTerm, setSearchTerm] = useState("");
  const queryClient = useQueryClient();
  const loginUser = getCachedProfileData();

  const selectedProject = useSelectedProject();
  const dispatch = useDispatch();

  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 [appliedFilters, setAppliedFilters] = useState({
    selectedOrganization: "",
    selectedServices: [],
  });

  const { data: organizations = [], isLoading: orgLoading } =
    useProjectAssignedOrganizationsName(selectedProject);

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

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

  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);
  };

  useEffect(() => {
    if (modelConfig !== null) {
      openModel();
    }
  }, [modelConfig, isCreateModalOpen]);

  // Handler to change tab and reset search term
  const handleTabChange = (tabName) => {
    setActiveTab(tabName);
    setSearchTerm(""); // Reset search term when tab changes
  };

  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 ">
          {/* Tabs */}
          <div className="nav-align-top nav-tabs-shadow bg-white border-bottom  pt-5">
            <div className="row align-items-center g-0 mb-3 mb-md-0 mx-1 mx-sm-5">
              {/* Tabs */}
              <div className="col-12 col-md">
                <ul className="nav nav-tabs" role="tablist">
                  <li className="nav-item">
                    <button
                      type="button"
                      className={`nav-link ${
                        activeTab === "all" ? "active" : ""
                      } fs-6`}
                      onClick={() => handleTabChange("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={() => handleTabChange("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={() => handleTabChange("regularization")}
                      data-bs-toggle="tab"
                      data-bs-target="#navs-top-messages"
                    >
                      Regularization
                    </button>
                  </li>
                </ul>
              </div>

              {/* Search + Organization filter */}
              <div className="col-12 col-md-auto mt-2 mt-md-0 ms-md-auto">
                <div className="row g-2">
                  <div className="col-12 col-sm-6">
                    <select
                      className="form-select form-select-sm"
                      value={appliedFilters.selectedOrganization}
                      onChange={(e) =>
                        setAppliedFilters((prev) => ({
                          ...prev,
                          selectedOrganization: e.target.value,
                        }))
                      }
                      disabled={orgLoading}
                    >
                      <option value="">All Organizations</option>
                      {organizations?.map((org, ind) => (
                        <option key={`${org.id}-${ind}`} value={org.id}>
                          {org.name}
                        </option>
                      ))}
                    </select>
                  </div>
                  <div className="col-12 col-sm-6">
                    <input
                      type="text"
                      className="form-control form-control-sm"
                      placeholder="Search Employee..."
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                    />
                  </div>
                </div>
              </div>

            </div>
          </div>

          <div className="tab-content attedanceTabs py-0 px-1 px-sm-3 pb-10">
            {selectedProject ? (
              <>
                {activeTab === "all" && (
                  <div className="tab-pane fade show active py-0 mx-5">
                    <Attendance
                      handleModalData={handleModalData}
                      getRole={getRole}
                      searchTerm={searchTerm}
                      organizationId={appliedFilters.selectedOrganization}
                    />
                  </div>
                )}
                {activeTab === "logs" && (
                  <div className="tab-pane fade show active py-0">
                    <AttendanceLog
                      handleModalData={handleModalData}
                      searchTerm={searchTerm}
                      organizationId={appliedFilters.selectedOrganization}
                    />
                  </div>
                )}
                {activeTab === "regularization" && DoRegularized && (
                  <div className="tab-pane fade show active py-0">
                    <Regularization
                      searchTerm={searchTerm}
                      organizationId={appliedFilters.selectedOrganization}
                    />
                  </div>
                )}
              </>
            ) : (
              <div className="py-2">
                <small>Please Select Project!</small>
              </div>
            )}
          </div>
        </div>
      </div>
    </>
  );
};

export default AttendancePage;