marco.pms.web/src/pages/master/MasterPage.jsx

import React, { useState, useEffect, useMemo } from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import MasterModal from "../../components/master/MasterModal";
import { mastersList } from "../../data/masters";
import { useDispatch, useSelector } from "react-redux";
import { changeMaster } from "../../slices/localVariablesSlice";
import useMaster, { useMasterMenu } from "../../hooks/masterHook/useMaster"
import MasterTable from "./MasterTable";
import { getCachedData } from "../../slices/apiDataManager";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { MANAGE_MASTER } from "../../utils/constants";
import { useQueryClient } from "@tanstack/react-query";


const MasterPage = () => {
  const {data,isLoading,isError,error:menuError} = useMasterMenu()
  const [modalConfig, setModalConfig] = useState({ modalType: "", item: null, masterType: null });
  const [searchTerm, setSearchTerm] = useState('');
  const [filteredResults, setFilteredResults] = useState([]);
  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);

  const hasMasterPermission = useHasUserPermission(MANAGE_MASTER);
  const dispatch = useDispatch();
  const selectedMaster = useSelector((store) => store.localVariables.selectedMaster);
  const queryClient = useQueryClient();

  const { data: masterData = [], loading, error, RecallApi,isError:isMasterError } = useMaster();

  const openModal = () => setIsCreateModalOpen(true);

  const closeModal = () => {
    setIsCreateModalOpen(false);
    setModalConfig(null);

    // Clean up Bootstrap modal manually
    const modalEl = document.getElementById('master-modal');
    modalEl?.classList.remove('show');
    if (modalEl) modalEl.style.display = 'none';

    document.body.classList.remove('modal-open');
    document.body.style.overflow = 'auto';

    document.querySelectorAll('.modal-backdrop').forEach((el) => el.remove());
  };

  const handleModalData = (modalType, item, masterType = selectedMaster) => {
    setModalConfig({ modalType, item, masterType });
  };

  const handleSearch = (e) => {
    const value = e.target.value.toLowerCase();
    setSearchTerm(value);

    if (!masterData?.length) return;

    const results = masterData.filter((item) =>
      Object.values(item).some(
        (field) => field?.toString().toLowerCase().includes(value)
      )
    );
    setFilteredResults(results);
  };
  const displayData = useMemo(() => {
    if (searchTerm) return filteredResults;
    return queryClient.getQueryData(["masterData", selectedMaster]) || masterData;
  }, [searchTerm, filteredResults, selectedMaster, masterData]);

  const columns = useMemo(() => {
    if (!displayData?.length) return [];
    return Object.keys(displayData[0]).map((key) => ({
      key,
      label: key.toUpperCase(),
    }));
  }, [displayData]);

  useEffect(() => {
    if (modalConfig) openModal();
  }, [modalConfig]);

  useEffect(() => {
    return () => {
      setIsCreateModalOpen(false);
      closeModal();
    };
  }, []);

  if(isError || isMasterError) return <div className="d-flex flex-column align-items-center justify-content-center py-5">
      <h4 className=" mb-3"><i className="fa-solid fa-triangle-exclamation fs-5" /> Oops, an error occurred</h4>
      <p className="text-muted">{error?.message || menuError?.message}</p>
  </div>
  return (
    <>
      {isCreateModalOpen && (
        <MasterModal modaldata={modalConfig} closeModal={closeModal} />

      )}

      <div className="container-fluid">
        <Breadcrumb
          data={[
            { label: "Home", link: "/dashboard" },
            { label: "Masters", link: null },
          ]}
        ></Breadcrumb>
        <div className="row">
          <div className="card">
            <div className="card-datatable table-responsive py-4">
              <div
                id="DataTables_Table_0_wrapper"
                className="dataTables_wrapper dt-bootstrap5 no-footer"
                style={{ width: "98%" }}
              >
                <div className="row  mb-2">
                  <div className="col-md-3 col-sm-6">
                    <div className="ms-0">
                      <div
                        className="dataTables_length text-start"
                        id="DataTables_Table_0_length"
                      >
                        <label>
                          <select
                            onChange={(e) => dispatch(changeMaster(e.target.value))}
                            name="DataTables_Table_0_length"
                            aria-controls="DataTables_Table_0"
                            className="form-select py-1 px-2"
                            style={{ fontSize: "0.875rem", height: "32px", width: "170px" }}
                            value={selectedMaster}
                          >
                            {isLoading && <option value="">Loading...</option>}
                            {!isLoading &&
                              data?.map((item) => (
                                <option key={item.id} value={item.name}>
                                  {item.name}
                                </option>
                              ))}
                          </select>
                        </label>
                      </div>
                    </div>
                  </div>
                  <div className="col-md-9 col-sm-6">
                    <div className="dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-sm-end justify-content-between gap-2 flex-md-row flex-sm-column mb-3 mb-md-0 mt-1 mt-md-0 gap-md-4">
                      <div
                        id="DataTables_Table_0_filter"
                        className="dataTables_filter"
                      >
                        <label>
                          <input
                            type="search"
                            className="form-control form-control-sm"
                            placeholder="Search"
                            aria-controls="DataTables_Table_0"
                            value={searchTerm}
                            onChange={handleSearch}
                          ></input>
                        </label>
                      </div>
                      <div className={`dt-buttons btn-group flex-wrap ${!hasMasterPermission && 'd-none'}`}>
                        {" "}
                        <div className="input-group">

                          <button
                            className={`btn btn-sm  add-new btn-primary `}
                            tabIndex="0"
                            aria-controls="DataTables_Table_0"
                            type="button"
                            data-bs-toggle="modal"
                            data-bs-target="#master-modal"
                            onClick={() => {
                              handleModalData(selectedMaster, "null", selectedMaster)
                            }}
                          >
                            <span>
                              <i className="bx bx-plus-circle me-2"></i>
                              <span className=" d-sm-inline-block">
                                Add  {selectedMaster}
                              </span>
                            </span>
                          </button>{" "}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <MasterTable data={displayData} columns={columns} loading={loading} handleModalData={handleModalData} />
                <div style={{ width: "1%" }}></div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </>
  );
};

export default MasterPage;