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

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

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

  const { data: menuData, isLoading: menuLoading, isError: menuErrorFlag, error: menuError } = useMasterMenu();
  const { data: masterData = [], loading, isError: isMasterError } = useMaster();
  const { mutate: DeleteMaster, isPending: isDeleting } = useDeleteMasterItem();

  const [modalConfig, setModalConfig] = useState(null);
  const [deleteData, setDeleteData] = useState(null);
  const [searchTerm, setSearchTerm] = useState("");

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

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

  const handleModalData = (type, item = null, masterType = selectedMaster) => {
    if (type === "delete") setDeleteData({ item, masterType });
    else setModalConfig({ modalType: type, item, masterType });
  };

  const handleDeleteSubmit = () => {
    if (!deleteData) return;
    DeleteMaster({ masterType: deleteData.masterType, item: deleteData.item }, {
      onSuccess: () => setDeleteData(null),
    });
  };

  if (menuErrorFlag || 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">{menuError?.message || "Error fetching master data"}</p>
      </div>
    );

  return (
    <>
      {modalConfig && (
        <GlobalModel
          size={["Application Role", "Edit-Application Role"].includes(modalConfig.masterType) ? "lg" : "md"}
          isOpen={!!modalConfig}
          closeModal={() => setModalConfig(null)}
        >
          <MasterModal modaldata={modalConfig} closeModal={() => setModalConfig(null)} />
        </GlobalModel>
      )}

      <ConfirmModal
        type="delete"
        header={`Delete ${selectedMaster}`}
        message={`Are you sure you want to delete this ${selectedMaster}?`}
        isOpen={!!deleteData}
        loading={isDeleting}
        onSubmit={handleDeleteSubmit}
        onClose={() => setDeleteData(null)}
      />

      <div className="container-fluid">
        <Breadcrumb data={[{ label: "Home", link: "/dashboard" }, { label: "Masters" }]} />

        <div className="row">
          <div className="card">
            <div className="card-datatable table-responsive py-4">
              <div className="row mb-2">
                <div className="col-md-3 col-sm-6">
                  <select
                    className="form-select py-1 px-2"
                    style={{ fontSize: "0.875rem", height: "32px", width: "190px" }}
                    value={selectedMaster}
                    onChange={(e) => dispatch(changeMaster(e.target.value))}
                  >
                    {menuLoading ? (
                      <option value="">Loading...</option>
                    ) : (
                      menuData?.map((item) => <option key={item.id} value={item.name}>{item.name}</option>)
                    )}
                  </select>
                </div>
                <div className="col-md-9 col-sm-6 d-flex justify-content-end align-items-center gap-2">
                  <div className="w-25"><input
                    type="search"
                    className="form-control form-control-sm"
                    placeholder="Search"
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                  /></div>
                  {hasMasterPermission && (
                    <button
                      className="btn btn-sm btn-primary"
                      onClick={() => handleModalData(selectedMaster, null, selectedMaster)}
                    >
                      <i className="bx bx-plus-circle me-2"></i>Add {selectedMaster}
                    </button>
                  )}
                </div>
              </div>

              <MasterTable
                data={displayData}
                columns={columns}
                loading={loading}
                handleModalData={handleModalData}
              />
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default MasterPage;