Missing Bottom Border in Masters Dropdown Menu.

src/pages/master/MasterPage.jsx

@@ -1,94 +1,94 @@
 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 { mastersList } from "../../data/masters";
 import { useDispatch, useSelector } from "react-redux";
 import { changeMaster } from "../../slices/localVariablesSlice";
 import useMaster from "../../hooks/masterHook/useMaster"
 import MasterTable from "./MasterTable";
 import { getCachedData } from "../../slices/apiDataManager";
-import {useHasUserPermission} from "../../hooks/useHasUserPermission";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { MANAGE_MASTER } from "../../utils/constants";
-import {useQueryClient} from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
 
 
 const MasterPage = () => {
-const [modalConfig, setModalConfig] = useState({ modalType: "", item: null, masterType: null });
+  const [modalConfig, setModalConfig] = useState({ modalType: "", item: null, masterType: null });
-const [searchTerm, setSearchTerm] = useState('');
+  const [searchTerm, setSearchTerm] = useState('');
-const [filteredResults, setFilteredResults] = useState([]);
+  const [filteredResults, setFilteredResults] = useState([]);
-const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
 
-const hasMasterPermission = useHasUserPermission(MANAGE_MASTER);
+  const hasMasterPermission = useHasUserPermission(MANAGE_MASTER);
-const dispatch = useDispatch();
+  const dispatch = useDispatch();
-const selectedMaster = useSelector((store) => store.localVariables.selectedMaster);
+  const selectedMaster = useSelector((store) => store.localVariables.selectedMaster);
-const queryClient = useQueryClient();
+  const queryClient = useQueryClient();
 
-const { data: masterData = [], loading, error, RecallApi } = useMaster();
+  const { data: masterData = [], loading, error, RecallApi } = useMaster();
 
-const openModal = () => setIsCreateModalOpen(true);
+  const openModal = () => setIsCreateModalOpen(true);
 
-const closeModal = () => {
+  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();
+    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();
+    };
+  }, []);
 
 
   return (
     <>
       {isCreateModalOpen && (
-          <MasterModal modaldata={modalConfig} closeModal={closeModal}    />
+        <MasterModal modaldata={modalConfig} closeModal={closeModal} />
-       
+
       )}
 
       <div className="container-fluid">
@@ -100,7 +100,7 @@ useEffect(() => {
         ></Breadcrumb>
         <div className="row">
           <div className="card">
-            <div className="card-datatable table-responsive pt-2">
+            <div className="card-datatable table-responsive py-4">
               <div
                 id="DataTables_Table_0_wrapper"
                 className="dataTables_wrapper dt-bootstrap5 no-footer"
@@ -115,15 +115,15 @@ useEffect(() => {
                       >
                         <label>
                           <select
-                            onChange={(e) => dispatch(changeMaster(e.target.value))} 
+                            onChange={(e) => dispatch(changeMaster(e.target.value))}
                             name="DataTables_Table_0_length"
                             aria-controls="DataTables_Table_0"
                             className="form-select form-select-sm"
                             value={selectedMaster}
                           >
 
-                            {mastersList.map( ( item ) => (
+                            {mastersList.map((item) => (
-                              
+
                               <option key={item.id} value={item.name}>{item.name}</option>
                             ))}
                           </select>
@@ -151,7 +151,7 @@ useEffect(() => {
                       <div className={`dt-buttons btn-group flex-wrap ${!hasMasterPermission && 'd-none'}`}>
                         {" "}
                         <div className="input-group">
-                
+
                           <button
                             className={`btn btn-sm  add-new btn-primary `}
                             // ${hasUserPermission('660131a4-788c-4739-a082-cbbf7879cbf2') ? "":"d-none"}
@@ -161,8 +161,8 @@ useEffect(() => {
                             data-bs-toggle="modal"
                             data-bs-target="#master-modal"
                             onClick={() => {
-                              handleModalData(selectedMaster,"null",selectedMaster)
+                              handleModalData(selectedMaster, "null", selectedMaster)
-                              
+
                             }}
                           >
                             <span>
@@ -177,7 +177,7 @@ useEffect(() => {
                     </div>
                   </div>
                 </div>
-               
+
                 <MasterTable data={displayData} columns={columns} loading={loading} handleModalData={handleModalData} />
                 <div style={{ width: "1%" }}></div>
               </div>

src/pages/master/MasterTable.jsx

@@ -184,7 +184,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
       {/* Pagination */}
       {!loading && safeData.length > 20 && (
         <nav aria-label="Page ">
-          <ul className="pagination pagination-sm justify-content-end py-1">
+          <ul className="pagination pagination-sm justify-content-end mt-3">
             <li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
               <button
                 className="page-link btn-xs"