Adding TDS percentage calculation at View Payment Request.

src/components/PaymentRequest/ActionPaymentRequest.jsx

@@ -65,6 +65,20 @@ const ActionPaymentRequest = ({ requestId }) => {
     defaultValues: defaultPRActionValues,
   });
 
+  const baseAmount = watch("baseAmount") || 0;
+  const taxAmount = watch("taxAmount") || 0;
+  const tdsPercentage = watch("tdsPercentage") || 0;
+
+  const grossAmount = baseAmount + taxAmount;
+
+  const tdsAmount = useMemo(() => (baseAmount * tdsPercentage) / 100, [
+    baseAmount,
+    tdsPercentage,
+  ]);
+
+  const netPayable = useMemo(() => grossAmount - tdsAmount, [grossAmount, tdsAmount]);
+
+
   const userPermissions = useSelector(
     (state) => state?.globalVariables?.loginUser?.featurePermissions || []
   );
@@ -309,7 +323,7 @@ const ActionPaymentRequest = ({ requestId }) => {
                             (fileError?.fileSize?.message ||
                               fileError?.contentType?.message ||
                               fileError?.base64Data?.message,
-                            fileError?.documentId?.message)
+                              fileError?.documentId?.message)
                           }
                         </div>
                       ))}
@@ -354,21 +368,7 @@ const ActionPaymentRequest = ({ requestId }) => {
                   projectId={null}
                 />
               </div>
-              <div className="col-12 col-md-6 text-start mb-1">
-                <Label className="form-label">TDS Percentage</Label>
-                <input
-                  type="number"
-                  className="form-control form-control-sm"
-                  {...register("tdsPercentage", { valueAsNumber: true })}
-                  min="0"
-                  step="any"
-                />
-                {errors.tdsPercentage && (
-                  <small className="danger-text">
-                    {errors.tdsPercentage.message}
-                  </small>
-                )}
-              </div>
+
               <div className="col-12 col-md-6 text-start mb-1">
                 <Label className="form-label" required>
                   Base Amount
@@ -388,7 +388,7 @@ const ActionPaymentRequest = ({ requestId }) => {
               </div>
               <div className="col-12 col-md-6 text-start mb-1">
                 <Label className="form-label" required>
-                  Tax Amount
+                  Tax / GST Amount
                 </Label>
                 <input
                   type="number"
@@ -403,27 +403,53 @@ const ActionPaymentRequest = ({ requestId }) => {
                   </small>
                 )}
               </div>
+              <div className="col-12 col-md-6 text-start mb-1">
+                <Label className="form-label">TDS %</Label>
+                <input
+                  type="number"
+                  className="form-control form-control-sm"
+                  {...register("tdsPercentage", { valueAsNumber: true })}
+                  min="0"
+                  step="any"
+                />
+                {errors.tdsPercentage && (
+                  <small className="danger-text">{errors.tdsPercentage.message}</small>
+                )}
+              </div>
+
+              <div className="col-12 col-md-6 d-flex align-items-center gap-4 mb-1 mt-3">
+                <div>
+                  <span className="fw-semibold">TDS Amount: </span>
+                  <span className="bg-label-success">{tdsAmount.toFixed(2)}</span>
+                </div>
+
+                <div>
+                  <span className="fw-semibold">Net Payable: </span>
+                  <span className="bg-label-primary">{netPayable.toFixed(2)}</span>
+                </div>
+              </div>
             </div>
+
           )}
         </>
       )}
       <div className="col-12 mb-3 text-start">
         {((nextStatusWithPermission?.length > 0 && !isRejectedRequest) ||
           (isRejectedRequest && isCreatedBy)) && (
-          <>
-            <Label className="form-label me-2 mb-0" required>
-              Comment
-            </Label>
-            <textarea
-              className="form-control form-control-sm"
-              {...register("comment")}
-              rows="2"
-            />
-            {errors.comment && (
-              <small className="danger-text">{errors.comment.message}</small>
-            )}
-          </>
-        )}
+            <>
+              <Label className="form-label me-2 mb-0" required>
+                Comment
+              </Label>
+              <textarea
+                className="form-control form-control-sm"
+                {...register("comment")}
+                rows="2"
+              />
+              {errors.comment && (
+                <small className="danger-text">{errors.comment.message}</small>
+              )}
+            </>
+          )}
 
         {nextStatusWithPermission?.length > 0 &&
           (!isRejectedRequest || isCreatedBy) && (

src/components/PaymentRequest/ViewPaymentRequest.jsx

@@ -129,6 +129,8 @@ const ViewPaymentRequest = ({ requestId }) => {
     [EXPENSE_STATUS.review_pending]: "Payment Request - Review & Validation",
     [EXPENSE_STATUS.approve_pending]: "Payment Request - Approval",
     [EXPENSE_STATUS.payment_pending]: "Payment Request -  Processing & Disbursement",
+    [EXPENSE_STATUS.payment_processed]: "Payment Request -  Bills & Tax Invoices Upload",
+    [EXPENSE_STATUS.payment_done]: "Payment Request - Reconciliation & Confirmation",
   };
 
   return (

src/utils/constants.jsx

@@ -163,7 +163,8 @@ export const EXPENSE_STATUS = {
   review_pending: "6537018f-f4e9-4cb3-a210-6c3b2da999d7",
   payment_pending: "f18c5cfd-7815-4341-8da2-2c2d65778e27",
   approve_pending: "4068007f-c92f-4f37-a907-bc15fe57d4d8",
-  payment_processed:"61578360-3a49-4c34-8604-7b35a3787b95",
+  payment_processed: "61578360-3a49-4c34-8604-7b35a3787b95",
+  payment_done: "b8586f67-dc19-49c3-b4af-224149efe1d3",
 }
 
 export const UUID_REGEX =