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

  // --- START: Tab Configuration Array
  const tabsData = [
    {
      id: "all",
      title: "Today's",
      content: (
        <Attendance
          handleModalData={handleModalData}
          getRole={getRole}
          searchTerm={searchTerm}
          organizationId={appliedFilters.selectedOrganization}
        />
      ),
    },
    {
      id: "logs",
      title: "Logs",
      content: (
        <AttendanceLog
          handleModalData={handleModalData}
          searchTerm={searchTerm}
          organizationId={appliedFilters.selectedOrganization}
        />
      ),
    },
    // Conditionally include Regularization tab based on permission
    ...(DoRegularized
      ? [
        {
          id: "regularization",
          title: "Regularization",
          content: (
            <Regularization
              searchTerm={searchTerm}
              organizationId={appliedFilters.selectedOrganization}
            />
          ),
        },
      ]
      : []),
  ];
  // --- END: Tab Configuration Array
  useEffect(() => {
    if (!orgLoading && organizations?.length === 1) {
      setAppliedFilters((prev) => ({
        ...prev,
        selectedOrganization: organizations[0].id,
      }));
    }
  }, [orgLoading, organizations]);


  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 header with search and filter */}
          <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 Buttons */}
              <div className="col-12 col-md mt-1">
                <ul className="nav nav-tabs" role="tablist">
                  {tabsData.map((tab) => (
                    <li
                      className={`nav-item ${tab.id === "regularization" && !DoRegularized
                        ? "d-none"
                        : ""
                        }`} // Keep the d-none logic for regularization, although it's filtered above
                      key={tab.id}
                    >
                      <button
                        type="button"
                        className={`nav-link ${activeTab === tab.id ? "active" : ""
                          } fs-6`}
                        onClick={() => handleTabChange(tab.id)}
                        data-bs-toggle="tab"
                        data-bs-target={`#navs-top-${tab.id}`}
                      >
                        {tab.title}
                      </button>
                    </li>
                  ))}
                </ul>
              </div>

              {/* Search + Organization filter */}
              <div className="col-12 col-md-auto mb-2 mt-md-0 ms-md-auto nav">
                <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>

          {/* Tab Content */}
          <div className="tab-content attedanceTabs py-0 px-1 px-sm-3 pb-10">
            {selectedProject ? (
              <>
                {tabsData.map((tab) => (
                  <div
                    key={tab.id}
                    className={`tab-pane fade ${activeTab === tab.id ? "show active" : ""
                      } py-0 ${tab.id === "all" ? "mx-2" : "p-3"}`}
                    id={`navs-top-${tab.id}`}
                    role="tabpanel"
                  >
                    {activeTab === tab.id && tab.content}
                  </div>
                ))}
              </>
            ) : (
              <div className="py-2">
                <small>Please Select Project!</small>
              </div>
            )}
          </div>
        </div>
      </div>
    </>
  );
};

export default AttendancePage;