Rearranging the fields of Payment Request Popup.

src/components/PaymentRequest/ManagePaymentRequest.jsx

@@ -158,6 +158,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
                 {requestToEdit ? "Update Payment Request " : "Create Payment Request"}
             </h5>
             <form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
+                {/* Project and Category */}
                 <div className="row my-2 text-start">
                     <div className="col-md-6">
                         <Label className="form-label" required>
@@ -214,6 +215,50 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
 
                 </div>
 
+                {/* Title and Advance Payment  */}
+                <div className="row my-2 text-start">
+                    <div className="col-md-6">
+                        <Label htmlFor="title" className="form-label" required>
+                            Title
+                        </Label>
+                        <input
+                            type="text"
+                            id="title"
+                            className="form-control form-control-sm"
+                            {...register("title")}
+                        />
+                        {errors.title && (
+                            <small className="danger-text">
+                                {errors.title.message}
+                            </small>
+                        )}
+                    </div>
+
+                    <div className="col-md-6">
+                        <Label htmlFor="isAdvancePayment" className="form-label" required>
+                            Advance Payment
+                        </Label>
+                        <select
+                            id="isAdvancePayment"
+                            className="form-select form-select-sm"
+                            {...register("isAdvancePayment", {
+                                setValueAs: (v) => v === "true" ? true : v === "false" ? false : undefined,
+                            })}
+                        >
+                            <option value="">Select Option</option>
+                            <option value="true">True</option>
+                            <option value="false">False</option>
+                        </select>
+                        {errors.isAdvancePayment && (
+                            <small className="danger-text">{errors.isAdvancePayment.message}</small>
+                        )}
+                    </div>
+
+
+                </div>
+
+
+                {/* Date and Amount */}
                 <div className="row my-2 text-start">
                     <div className="col-md-6">
                         <Label htmlFor="dueDate" className="form-label" required>
@@ -252,10 +297,11 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
                     </div>
                 </div>
 
+                {/* Payee and Currency  */}
                 <div className="row my-2 text-start">
                     <div className="col-md-6">
                         <Label htmlFor="payee" className="form-label" required>
-                            Supplier Name/Transporter Name/Other
+                            Payee(Supplier Name/Transporter Name/Other)
                         </Label>
                         <input
                             type="text"
@@ -298,47 +344,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
 
                 </div>                
 
-                <div className="row my-2 text-start">
+                {/* Description  */}
-                    <div className="col-md-6">
-                        <Label htmlFor="title" className="form-label" required>
-                            Title
-                        </Label>
-                        <input
-                            type="text"
-                            id="title"
-                            className="form-control form-control-sm"
-                            {...register("title")}
-                        />
-                        {errors.title && (
-                            <small className="danger-text">
-                                {errors.title.message}
-                            </small>
-                        )}
-                    </div>
-
-                    <div className="col-md-6">
-                        <Label htmlFor="isAdvancePayment" className="form-label" required>
-                            Advance Payment
-                        </Label>
-                        <select
-                            id="isAdvancePayment"
-                            className="form-select form-select-sm"
-                            {...register("isAdvancePayment", {
-                                setValueAs: (v) => v === "true" ? true : v === "false" ? false : undefined,
-                            })}
-                        >
-                            <option value="">Select Option</option>
-                            <option value="true">True</option>
-                            <option value="false">False</option>
-                        </select>
-                        {errors.isAdvancePayment && (
-                            <small className="danger-text">{errors.isAdvancePayment.message}</small>
-                        )}
-                    </div>
-
-
-                </div>
-
                 <div className="row my-2 text-start">
                     <div className="col-md-12">
                         <Label htmlFor="description" className="form-label" required>
@@ -358,6 +364,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
                     </div>
                 </div>
 
+                {/* Upload Document  */}
                 <div className="row my-2 text-start">
                     <div className="col-md-12">
                         <Label className="form-label">