set up action properly

src/components/Expenses/ViewExpense.jsx

@@ -15,6 +15,7 @@ const ViewExpense = ({ ExpenseId }) => {
     register,
     handleSubmit,
     setValue,
+    reset,
     formState: { errors },
   } = useForm({
     resolver: zodResolver(ActionSchema),
@@ -24,11 +25,11 @@ const ViewExpense = ({ ExpenseId }) => {
     },
   });
 
-  const { mutate: MakeAction } = useActionOnExpense();
+  const { mutate: MakeAction } = useActionOnExpense(()=>reset());
 
   const onSubmit = (formData) => {
     const Payload = {
-      expenseId: ExpenseId?.id,
+      expenseId: ExpenseId,
       statusId: formData.selectedStatus,
       comment: formData.comment,
     };
@@ -241,7 +242,7 @@ const ViewExpense = ({ ExpenseId }) => {
 
           <input type="hidden" {...register("selectedStatus")} />
 
-          <div className="d-flex flex-wrap gap-2 my-2">
+          <div className="text-center flex-wrap gap-2 my-2">
             {data.nextStatus.map((status, index) => (
               <button
                 key={index}
@@ -250,12 +251,8 @@ const ViewExpense = ({ ExpenseId }) => {
                   setValue("selectedStatus", status.id);
                   handleSubmit(onSubmit)();
                 }}
-                className="badge cursor-pointer border-0"
-                style={{
-                  backgroundColor: status.color || "#6c757d",
-                  color: "#fff",
-                  fontSize: "0.85rem",
-                }}
+                className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
+               
               >
                 {status.displayName || status.name} 
               </button>

src/hooks/useExpense.js

@@ -101,9 +101,9 @@ export const useUpdateExpense = (onSuccessCallBack) => {
       //     };
       //   }
       // );
-      queryClient.removeQueries({queryKey:['Expense', variables.id]});
-      queryClient.invalidateQueries({queryKey:['Expenses']})
-      showToast('Expense updated Successfully', 'success');
+      queryClient.removeQueries({ queryKey: ["Expense", variables.id] });
+      queryClient.invalidateQueries({ queryKey: ["Expenses"] });
+      showToast("Expense updated Successfully", "success");
 
       if (onSuccessCallBack) onSuccessCallBack();
     },
@@ -119,11 +119,11 @@ export const useActionOnExpense = (onSuccessCallBack) => {
       return response.data;
     },
     onSuccess: (updatedExpense, variables) => {
-      showToast("Expense updated successfully", "success");
+      showToast("Request processed successfully.", "success");
 
       queryClient.setQueriesData(
         {
-          queryKey: ["expenses"],
+          queryKey: ["Expenses"],
           exact: false,
         },
         (oldData) => {
@@ -142,6 +142,16 @@ export const useActionOnExpense = (onSuccessCallBack) => {
           };
         }
       );
+      queryClient.setQueriesData(
+        { queryKey: ["Expense", updatedExpense.id] },
+        (oldData) => {
+          return {
+            ...oldData,
+            nextStatus: updatedExpense.nextStatus,
+            status: updatedExpense.status,
+          };
+        }
+      );
 
       if (onSuccessCallBack) onSuccessCallBack();
     },