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(
-        {
-          queryKey: ["Expenses"],
-          exact: false,
-        },
-        (oldData) => {
-          if (!oldData) return oldData;
-          return {
-            ...oldData,
-            data: oldData.data.map((item) =>
-              item.id === updatedExpense.id
-                ? {
-                    ...item,
-                    nextStatus: updatedExpense.nextStatus,
-                    status: updatedExpense.status,
-                  }
-                : item
-            ),
-          };
-        }
-      );
+      // queryClient.setQueriesData(
+      //   {
+      //     queryKey: ["Expenses"],
+      //     exact: false,
+      //   },
+      //   (oldData) => {
+      //     if (!oldData) return oldData;
+      //     return {
+      //       ...oldData,
+      //       data: oldData.data.map((item) =>
+      //         item.id === updatedExpense.id
+      //           ? {
+      //               ...item,
+      //               nextStatus: updatedExpense.nextStatus,
+      //               status: updatedExpense.status,
+      //             }
+      //           : 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

@@ -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"

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"