From 219161f15ef7eb5d2b6d6bd7e96f309df202cd0f Mon Sep 17 00:00:00 2001
From: Kartik Sharma <kartik.sharma@marcoaiot.com>
Date: Fri, 21 Nov 2025 15:23:58 +0530
Subject: [PATCH] UI alignment in Finance forms.

---
 src/components/Expenses/ManageExpense.jsx     | 79 ++++++-------------
 .../PaymentRequest/ManagePaymentRequest.jsx   | 20 ++---
 .../ManageRecurringExpense.jsx                | 31 ++++----
 src/components/common/InputSuggestion.jsx     |  8 +-
 4 files changed, 55 insertions(+), 83 deletions(-)

diff --git a/src/components/Expenses/ManageExpense.jsx b/src/components/Expenses/ManageExpense.jsx
index 40b4bebf..598b1bf8 100644
--- a/src/components/Expenses/ManageExpense.jsx
+++ b/src/components/Expenses/ManageExpense.jsx
@@ -236,31 +236,8 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
         {expenseToEdit ? "Update Expense " : "Create New Expense"}
       </h5>
       <form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
-        <div className="row my-2 text-start">
-          {/* <div className="col-md-6">
-            <Label className="form-label" required>
-              Select Project
-            </Label>
-            <select
-              className="form-select form-select-sm"
-              {...register("projectId")}
-            >
-              <option value="">Select Project</option>
-              {projectLoading ? (
-                <option>Loading...</option>
-              ) : (
-                projectNames?.map((project) => (
-                  <option key={project.id} value={project.id}>
-                    {project.name}
-                  </option>
-                ))
-              )}
-            </select>
-            {errors.projectId && (
-              <small className="danger-text">{errors.projectId.message}</small>
-            )}
-          </div> */}
-          <div className="col-12 col-md-6 mb-2">
+        <div className="row my-2 text-start">         
+          <div className="col-12 col-md-6">
             <SelectProjectField
               label="Project"
               required
@@ -283,7 +260,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               Expense Category
             </Label>
             <select
-              className="form-select form-select-sm"
+              className="form-select "
               id="expenseCategoryId"
               {...register("expenseCategoryId")}
             >
@@ -314,7 +291,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               Payment Mode
             </Label>
             <select
-              className="form-select form-select-sm"
+              className="form-select "
               id="paymentModeId"
               {...register("paymentModeId")}
             >
@@ -337,34 +314,23 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               </small>
             )}
           </div>
-          <div className="col-12 col-md-6 text-start">
-            {/* <Label className="form-label" required>
-              Paid By{" "}
-            </Label> */}
-            {/* <EmployeeSearchInput
-              control={control}
-              name="paidById"
-              projectId={null}
-              forAll={true}
-            /> */}
-
+          <div className="col-12 col-md-6 text-start">           
             <AppFormController
-              name="paidById"
-              
+              name="paidById"              
               control={control}
               render={({ field }) => (
                 <SelectEmployeeServerSide
                 label="Paid By" required
                   value={field.value}
                   onChange={field.onChange}
-                  isFullObject={false} // because using ID
+                  isFullObject={false} 
                 />
               )}
             />
           </div>
         </div>
 
-        <div className="row my-2 text-start">
+        <div className="row my-2 text-start mb-4">
           <div className="col-md-6">
             <Label htmlFor="transactionDate" className="form-label" required>
               Transaction Date
@@ -374,6 +340,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
               className="w-100"
               control={control}
               maxDate={new Date()}
+              size="md"
             />
 
             {errors.transactionDate && (
@@ -390,7 +357,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             <input
               type="number"
               id="amount"
-              className="form-control form-control-sm"
+              className="form-control "
               min="1"
               step="0.01"
               inputMode="decimal"
@@ -402,7 +369,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
           </div>
         </div>
 
-        <div className="row my-2 text-start">
+        <div className="row my-2 text-start mb-4">
           <div className="col-md-6">
             <Label htmlFor="supplerName" className="form-label" required>
               Supplier Name/Transporter Name/Other
@@ -410,7 +377,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             <input
               type="text"
               id="supplerName"
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("supplerName")}
             />
             {errors.supplerName && (
@@ -427,7 +394,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             <input
               type="text"
               id="location"
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("location")}
             />
             {errors.location && (
@@ -435,7 +402,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             )}
           </div>
         </div>
-        <div className="row my-2 text-start">
+        <div className="row my-2 text-start mb-4">
           <div className="col-md-6">
             <label htmlFor="statusId" className="form-label ">
               Transaction ID
@@ -443,7 +410,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             <input
               type="text"
               id="transactionId"
-              className="form-control form-control-sm"
+              className="form-control "
               min="1"
               {...register("transactionId")}
             />
@@ -460,7 +427,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             <input
               type="text"
               id="gstNumber"
-              className="form-control form-control-sm"
+              className="form-control "
               min="1"
               {...register("gstNumber")}
             />
@@ -469,13 +436,13 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             )}
           </div>
         </div>
-        <div className="row">
+        <div className="row mb-4">
           <div className="col-md-6 text-start ">
             <Label htmlFor="currencyId" className="form-label" required>
               Select Currency
             </Label>
             <select
-              className="form-select form-select-sm"
+              className="form-select "
               id="currencyId"
               {...register("currencyId")}
             >
@@ -497,14 +464,14 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
             )}
           </div>
           {expenseCategory?.noOfPersonsRequired && (
-            <div className="col-md-6  text-start">
+            <div className="col-md-6 text-start">
               <Label className="form-label" required>
                 No. of Persons
               </Label>
               <input
                 type="number"
                 id="noOfPersons"
-                className="form-control form-control-sm"
+                className="form-control "
                 {...register("noOfPersons")}
                 inputMode="numeric"
               />
@@ -517,14 +484,14 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
           )}
         </div>
 
-        <div className="row my-2 text-start">
+        <div className="row my-2 text-start mb-4">
           <div className="col-md-12">
             <Label htmlFor="description" className="form-label" required>
               Description
             </Label>
             <textarea
               id="description"
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("description")}
               rows="2"
             ></textarea>
@@ -536,7 +503,7 @@ const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
           </div>
         </div>
 
-        <div className="row my-2 text-start">
+        <div className="row my-4 text-start">
           <div className="col-md-12">
             <Label className="form-label" required>
               Upload Bill{" "}
diff --git a/src/components/PaymentRequest/ManagePaymentRequest.jsx b/src/components/PaymentRequest/ManagePaymentRequest.jsx
index dcbe78af..5dfbf88b 100644
--- a/src/components/PaymentRequest/ManagePaymentRequest.jsx
+++ b/src/components/PaymentRequest/ManagePaymentRequest.jsx
@@ -239,7 +239,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
               Select Project
             </Label> */}
             {/* <select
-              className="form-select form-select-sm"
+              className="form-select "
               {...register("projectId")}
               disabled={
                 data?.recurringPayment?.isVariable && !isDraft && !isProcessed
@@ -282,7 +282,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
               Expense Category
             </Label>
             <select
-              className="form-select form-select-sm"
+              className="form-select "
               id="expenseCategoryId"
               {...register("expenseCategoryId")}
               disabled={
@@ -311,7 +311,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
         </div>
 
         {/* Title and Advance Payment  */}
-        <div className="row my-2 text-start">
+        <div className="row mt-n2 text-start">
           <div className="col-md-6">
             <Label htmlFor="title" className="form-label" required>
               Title
@@ -319,7 +319,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
             <input
               type="text"
               id="title"
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("title")}
               disabled={
                 data?.recurringPayment?.isVariable && !isDraft && !isProcessed
@@ -330,7 +330,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
             )}
           </div>
 
-          <div className="col-md-6 ">
+          <div className="col-md-6">
             <Label htmlFor="isAdvance" className="form-label">
               Is Advance Payment
             </Label>
@@ -343,7 +343,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
                 data?.recurringPayment?.isVariable && !isDraft && !isProcessed
               }
               render={({ field }) => (
-                <div className="d-flex align-items-center gap-3">
+                <div className="d-flex align-items-center gap-3 mt-3">
                   <div className="form-check d-flex flex-row m-0 gap-2">
                     <input
                       type="radio"
@@ -387,6 +387,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
               control={control}
               minDate={new Date()}
               className="w-100"
+              size="md"
               disabled={
                 data?.recurringPayment?.isVariable && !isDraft && !isProcessed
               }
@@ -404,7 +405,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
             <input
               type="number"
               id="amount"
-              className="form-control form-control-sm"
+              className="form-control "
               min="1"
               step="0.01"
               inputMode="decimal"
@@ -429,6 +430,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
                 setValue("payee", val, { shouldValidate: true })
               }
               error={errors.payee?.message}
+              size="md"
               disabled={
                 data?.recurringPayment?.isVariable && !isDraft && !isProcessed
               }
@@ -458,7 +460,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
             </Label>
             <select
               id="currencyId"
-              className="form-select form-select-sm"
+              className="form-select "
               {...register("currencyId")}
               disabled={
                 data?.recurringPayment?.isVariable && !isDraft && !isProcessed
@@ -490,7 +492,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
             </Label>
             <textarea
               id="description"
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("description")}
               rows="2"
               disabled={
diff --git a/src/components/RecurringExpense/ManageRecurringExpense.jsx b/src/components/RecurringExpense/ManageRecurringExpense.jsx
index 2d29400a..7f88c956 100644
--- a/src/components/RecurringExpense/ManageRecurringExpense.jsx
+++ b/src/components/RecurringExpense/ManageRecurringExpense.jsx
@@ -165,7 +165,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
         <div className="row my-2 text-start">
           <div className="col-md-6">
             {/* <select
-              className="form-select form-select-sm"
+              className="form-select"
               {...register("projectId")}
             >
               <option value="">Select Project</option>
@@ -201,7 +201,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
               Expense Category
             </Label>
             <select
-              className="form-select form-select-sm"
+              className="form-select"
               id="expenseCategoryId"
               {...register("expenseCategoryId")}
             >
@@ -227,7 +227,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
         </div>
 
         {/* Title and Is Variable  */}
-        <div className="row my-2 text-start">
+        <div className="row my-2 text-start mt-n2">
           <div className="col-md-6">
             <Label htmlFor="title" className="form-label" required>
               Title
@@ -235,7 +235,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
             <input
               type="text"
               id="title"
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("title")}
               placeholder="Enter title"
             />
@@ -244,7 +244,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
             )}
           </div>
 
-          <div className="col-md-6 mt-2">
+          <div className="col-md-6">
             <div className="d-flex justify-content-start align-items-center text-nowrap gap-2">
               <Label htmlFor="isVariable" className="form-label mb-0" required>
                 Payment Type
@@ -273,7 +273,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
               control={control}
               defaultValue={defaultRecurringExpense.isVariable ?? false}
               render={({ field }) => (
-                <div className="d-flex align-items-center gap-3 mt-1">
+                <div className="d-flex align-items-center gap-3 mt-2">
                   <div className="form-check">
                     <input
                       type="radio"
@@ -326,6 +326,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
               control={control}
               minDate={new Date()}
               className="w-100"
+              size="md"
             />
             {errors.strikeDate && (
               <small className="danger-text">{errors.strikeDate.message}</small>
@@ -339,7 +340,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
             <input
               type="number"
               id="amount"
-              className="form-control form-control-sm"
+              className="form-control "
               min="1"
               step="0.01"
               inputMode="decimal"
@@ -353,7 +354,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
         </div>
 
         {/* Payee and Currency  */}
-        <div className="row my-2 text-start">
+        <div className="row my-2 text-start mt-3">
           <div className="col-md-6">
             <Label htmlFor="payee" className="form-label" required>
               Payee (Supplier Name/Transporter Name/Other)
@@ -366,6 +367,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
               }
               error={errors.payee?.message}
               placeholder="Select or enter payee"
+              size="md"
             />
           </div>
 
@@ -375,7 +377,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
             </Label>
             <select
               id="currencyId"
-              className="form-select form-select-sm"
+              className="form-select"
               {...register("currencyId")}
             >
               <option value="">Select Currency</option>
@@ -397,7 +399,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
         </div>
 
         {/* Frequency To and Status Id  */}
-        <div className="row my-2 text-start">
+        <div className="row my-2 text-start mt-n2">
           <div className="col-md-6">
             <div className="d-flex justify-content-start align-items-center gap-2">
               <Label htmlFor="frequency" className="form-label mb-0" required>
@@ -419,7 +421,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
 
             <select
               id="frequency"
-              className="form-select form-select-sm mt-1"
+              className="form-select mt-1"
               {...register("frequency", { valueAsNumber: true })}
             >
               <option value="">Select Frequency</option>
@@ -441,7 +443,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
             </Label>
             <select
               id="statusId"
-              className="form-select form-select-sm"
+              className="form-select"
               {...register("statusId")}
             >
               <option value="">Select Status</option>
@@ -488,7 +490,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
             <input
               type="number"
               id="paymentBufferDays"
-              className="form-control form-control-sm mt-1"
+              className="form-control mt-1"
               min="0"
               step="1"
               {...register("paymentBufferDays", { valueAsNumber: true })}
@@ -526,6 +528,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
               control={control}
               minDate={StrikeDate}
               className="w-100 mt-1"
+              size="md"
             />
 
             {errors.endDate && (
@@ -568,7 +571,7 @@ const ManageRecurringExpense = ({ closeModal, requestToEdit = null }) => {
             </Label>
             <textarea
               id="description"
-              className="form-control form-control-sm"
+              className="form-control "
               {...register("description")}
               rows="2"
             ></textarea>
diff --git a/src/components/common/InputSuggestion.jsx b/src/components/common/InputSuggestion.jsx
index 0a79fa35..86b6b5b5 100644
--- a/src/components/common/InputSuggestion.jsx
+++ b/src/components/common/InputSuggestion.jsx
@@ -4,6 +4,7 @@ const InputSuggestions = ({
   organizationList = [],
   value,
   onChange,
+  size = "sm",
   error,
   disabled = false,
 }) => {
@@ -27,7 +28,7 @@ const InputSuggestions = ({
   return (
     <div className="mb-3 position-relative">
       <input
-        className="form-control form-control-sm"
+        className={`form-control form-control-${size}`}
         value={value}
         onChange={handleInputChange}
         onBlur={() => setTimeout(() => setShowSuggestions(false), 150)}
@@ -58,15 +59,14 @@ const InputSuggestions = ({
                 transition: "background-color 0.2s",
               }}
               onMouseDown={() => handleSelectSuggestion(org)}
-                className={`dropdown-item ${
-                  org === value ? "active" : ""
+              className={`dropdown-item ${org === value ? "active" : ""
                 }`}
             >
               {org}
             </li>
           ))}
         </ul>
-  
+
       )}
 
       {error && <small className="danger-text">{error}</small>}