Merge pull request 'Feature#794_ActionExpense : completed action on expense' (#289) from Feature#794_ActionExpense into Feature_Expense

Reviewed-on: #289
Merged

src/components/Expenses/ManageExpense.jsx

@@ -155,7 +155,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               fileSize: 0,
               description: "",
               preSignedUrl: doc.preSignedUrl,
-              isActive: doc.isActive || true,
+              isActive: doc.isActive ?? true,
             }))
           : [],
       });
@@ -264,7 +264,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               Payment Mode
             </label>
             <select
-              class="form-select form-select-sm"
+              className="form-select form-select-sm"
               id="paymentModeId"
               {...register("paymentModeId")}
             >
@@ -293,7 +293,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               Paid By
             </label>
             <select
-              class="form-select form-select-sm"
+              className="form-select form-select-sm"
               id="paymentModeId"
               {...register("paidById")}
               disabled={!selectedproject}
@@ -336,7 +336,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             )}
           </div>
 
-          <div class="col-md-6">
+          <div className="col-md-6">
             <label for="amount" className="form-label ">
               Amount
             </label>
@@ -373,7 +373,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             )}
           </div>
 
-          <div class="col-md-6">
+          <div className="col-md-6">
             <label for="location" className="form-label ">
               Location
             </label>
@@ -388,7 +388,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             )}
           </div>
         </div>
-        <div class="row my-2">
+        <div className="row my-2">
           <div className="col-md-6">
             <label for="statusId" className="form-label ">
               TransactionId
@@ -396,7 +396,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             <input
               type="text"
               id="transactionId"
-              class="form-control form-control-sm"
+              className="form-control form-control-sm"
               min="1"
               {...register("transactionId")}
             />
@@ -429,7 +429,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
         </div>
 
         <div className="row my-2">
-          <div class="col-md-12" className="form-label ">
+          <div className="col-md-12" className="form-label ">
             <label for="description">Description</label>
             <textarea
               id="description"

src/components/Expenses/ViewExpense.jsx

@@ -16,6 +16,7 @@ const ViewExpense = ({ ExpenseId }) => {
     register,
     handleSubmit,
     setValue,
+    reset,
     formState: { errors },
   } = useForm({
     resolver: zodResolver(ActionSchema),
@@ -25,11 +26,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,
     };
@@ -226,7 +227,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}
@@ -235,12 +236,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();
     },