Missing Bottom Border in Masters Dropdown Menu.

src/pages/master/MasterPage.jsx

@@ -1,33 +1,33 @@
 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);
 
@@ -40,13 +40,13 @@ const closeModal = () => {
     document.body.style.overflow = 'auto';
 
     document.querySelectorAll('.modal-backdrop').forEach((el) => el.remove());
-};
+  };
 
-const handleModalData = (modalType, item, masterType = selectedMaster) => {
+  const handleModalData = (modalType, item, masterType = selectedMaster) => {
     setModalConfig({ modalType, item, masterType });
-};
+  };
 
-const handleSearch = (e) => {
+  const handleSearch = (e) => {
     const value = e.target.value.toLowerCase();
     setSearchTerm(value);
 
@@ -58,30 +58,30 @@ const handleSearch = (e) => {
       )
     );
     setFilteredResults(results);
-};
+  };
-const displayData = useMemo(() => {
+  const displayData = useMemo(() => {
     if (searchTerm) return filteredResults;
     return queryClient.getQueryData(["masterData", selectedMaster]) || masterData;
-}, [searchTerm, filteredResults, selectedMaster, masterData]);
+  }, [searchTerm, filteredResults, selectedMaster, masterData]);
 
-const columns = useMemo(() => {
+  const columns = useMemo(() => {
     if (!displayData?.length) return [];
     return Object.keys(displayData[0]).map((key) => ({
       key,
       label: key.toUpperCase(),
     }));
-}, [displayData]);
+  }, [displayData]);
 
-useEffect(() => {
+  useEffect(() => {
     if (modalConfig) openModal();
-}, [modalConfig]);
+  }, [modalConfig]);
 
-useEffect(() => {
+  useEffect(() => {
     return () => {
       setIsCreateModalOpen(false);
       closeModal();
     };
-}, []);
+  }, []);
 
 
   return (
@@ -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"
@@ -122,7 +122,7 @@ useEffect(() => {
                             value={selectedMaster}
                           >
 
-                            {mastersList.map( ( item ) => (
+                            {mastersList.map((item) => (
 
                               <option key={item.id} value={item.name}>{item.name}</option>
                             ))}
@@ -161,7 +161,7 @@ useEffect(() => {
                             data-bs-toggle="modal"
                             data-bs-target="#master-modal"
                             onClick={() => {
-                              handleModalData(selectedMaster,"null",selectedMaster)
+                              handleModalData(selectedMaster, "null", selectedMaster)
 
                             }}
                           >

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"