Merge pull request 'Highlight Separator Line Between Expense Details and History Section adding border-2 for the thikness of the line.' (#326) from Expense_Bugs into Expense_Manangement_Feature

Reviewed-on: #326
merged

src/components/Expenses/ViewExpense.jsx

@@ -30,7 +30,7 @@ import moment from "moment";
 import ExpenseStatusLogs from "./ExpenseStatusLogs";
 
 const ViewExpense = ({ ExpenseId }) => {
-  const { data, isLoading, isError, error } = useExpense(ExpenseId);
+  const { data, isLoading, isError, error, isFetching } = useExpense(ExpenseId);
   const [IsPaymentProcess, setIsPaymentProcess] = useState(false);
   const [clickedStatusId, setClickedStatusId] = useState(null);
 
@@ -363,7 +363,7 @@ const ViewExpense = ({ ExpenseId }) => {
           )}
         </div>
       )}
-     <hr className="divider my-1  divider-primary"  />
+     <hr className="divider my-1 border-2 divider-primary my-2"/>
 
       {Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
         <>
@@ -435,7 +435,7 @@ const ViewExpense = ({ ExpenseId }) => {
                         setValue("statusId", status.id);
                         handleSubmit(onSubmit)();
                       }}
-                      disabled={isPending}
+                      disabled={isPending || isFetching}
                       className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
                     >
                       {isPending && clickedStatusId === status.id

src/components/common/SelectMultiple.jsx

@@ -67,7 +67,7 @@ const SelectMultiple = ({
   const dropdownElement = (
     <div
       ref={dropdownRef}
-      className="multi-select-dropdown-options"
+      className="multi-select-dropdown-options py-2"
       style={{
         position: "absolute",
         top: dropdownStyles.top,

src/hooks/useExpense.js

@@ -168,27 +168,27 @@ export const useActionOnExpense = (onSuccessCallBack) => {
     onSuccess: (updatedExpense, variables) => {
       showToast("Request processed successfully.", "success");
 
-      queryClient.setQueriesData(
+      // queryClient.setQueriesData(
-        {
+      //   {
-          queryKey: ["Expenses"],
+      //     queryKey: ["Expenses"],
-          exact: false,
+      //     exact: false,
-        },
+      //   },
-        (oldData) => {
+      //   (oldData) => {
-          if (!oldData) return oldData;
+      //     if (!oldData) return oldData;
-          return {
+      //     return {
-            ...oldData,
+      //       ...oldData,
-            data: oldData.data.map((item) =>
+      //       data: oldData.data.map((item) =>
-              item.id === updatedExpense.id
+      //         item.id === updatedExpense.id
-                ? {
+      //           ? {
-                    ...item,
+      //               ...item,
-                    nextStatus: updatedExpense.nextStatus,
+      //               nextStatus: updatedExpense.nextStatus,
-                    status: updatedExpense.status,
+      //               status: updatedExpense.status,
-                  }
+      //             }
-                : item
+      //           : item
-            ),
+      //       ),
-          };
+      //     };
-        }
+      //   }
-      );
+      // );
       // queryClient.setQueriesData(
       //   { queryKey: ["Expense", updatedExpense.id] },
       //   (oldData) => {
@@ -200,6 +200,7 @@ export const useActionOnExpense = (onSuccessCallBack) => {
       //   }
       // );
       queryClient.invalidateQueries({queryKey:["Expense",updatedExpense.id]})
+      queryClient.invalidateQueries({queryKey:["Expenses",updatedExpense.id]})
 
       if (onSuccessCallBack) onSuccessCallBack();
     },

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"