Rearranging the fields of Payment Request Popup.

This commit is contained in:
Kartik Sharma 2025-11-04 11:42:43 +05:30
parent 192c04fb6f
commit 346ef0174b

View File

@ -11,8 +11,8 @@ import { formatFileSize, localToUtc } from '../../utils/appUtils';
import { defaultPaymentRequest, PaymentRequestSchema } from './PaymentRequestSchema';
function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
const {data,isLoading,isError,error:requestError}= usePaymentRequestDetail(requestToEdit)
// const data = {}
const { data, isLoading, isError, error: requestError } = usePaymentRequestDetail(requestToEdit)
// const data = {}
const { projectNames, loading: projectLoading, error, isError: isProjectError,
} = useProjectName();
@ -25,7 +25,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
loading: ExpenseLoading,
error: ExpenseError,
} = useExpenseCategory();
const schema = PaymentRequestSchema(ExpenseTypes);
const { register, control, watch, handleSubmit, setValue, reset, formState: { errors }, } = useForm({
resolver: zodResolver(schema),
@ -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,90 +215,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
</div>
<div className="row my-2 text-start">
<div className="col-md-6">
<Label htmlFor="dueDate" className="form-label" required>
Due To Date
</Label>
<DatePicker
name="dueDate"
control={control}
minDate={new Date()}
className='w-100'
/>
{errors.dueDate && (
<small className="danger-text">
{errors.dueDate.message}
</small>
)}
</div>
<div className="col-md-6">
<Label htmlFor="amount" className="form-label" required>
Amount
</Label>
<input
type="number"
id="amount"
className="form-control form-control-sm"
min="1"
step="0.01"
inputMode="decimal"
{...register("amount", { valueAsNumber: true })}
/>
{errors.amount && (
<small className="danger-text">{errors.amount.message}</small>
)}
</div>
</div>
<div className="row my-2 text-start">
<div className="col-md-6">
<Label htmlFor="payee" className="form-label" required>
Supplier Name/Transporter Name/Other
</Label>
<input
type="text"
id="payee"
className="form-control form-control-sm"
{...register("payee")}
/>
{errors.payee && (
<small className="danger-text">
{errors.payee.message}
</small>
)}
</div>
<div className="col-md-6">
<Label htmlFor="currencyId" className="form-label" required>
Currency
</Label>
<select
id="currencyId"
className="form-select form-select-sm"
{...register("currencyId")}
>
<option value="">Select Currency</option>
{currencyLoading && <option>Loading...</option>}
{!currencyLoading &&
!currencyError &&
currencyData?.map((currency) => (
<option key={currency.id} value={currency.id}>
{`${currency.currencyName} (${currency.symbol})`}
</option>
))}
</select>
{errors.currencyId && (
<small className="danger-text">{errors.currencyId.message}</small>
)}
</div>
</div>
{/* Title and Advance Payment */}
<div className="row my-2 text-start">
<div className="col-md-6">
<Label htmlFor="title" className="form-label" required>
@ -339,6 +257,94 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
</div>
{/* Date and Amount */}
<div className="row my-2 text-start">
<div className="col-md-6">
<Label htmlFor="dueDate" className="form-label" required>
Due To Date
</Label>
<DatePicker
name="dueDate"
control={control}
minDate={new Date()}
className='w-100'
/>
{errors.dueDate && (
<small className="danger-text">
{errors.dueDate.message}
</small>
)}
</div>
<div className="col-md-6">
<Label htmlFor="amount" className="form-label" required>
Amount
</Label>
<input
type="number"
id="amount"
className="form-control form-control-sm"
min="1"
step="0.01"
inputMode="decimal"
{...register("amount", { valueAsNumber: true })}
/>
{errors.amount && (
<small className="danger-text">{errors.amount.message}</small>
)}
</div>
</div>
{/* Payee and Currency */}
<div className="row my-2 text-start">
<div className="col-md-6">
<Label htmlFor="payee" className="form-label" required>
Payee(Supplier Name/Transporter Name/Other)
</Label>
<input
type="text"
id="payee"
className="form-control form-control-sm"
{...register("payee")}
/>
{errors.payee && (
<small className="danger-text">
{errors.payee.message}
</small>
)}
</div>
<div className="col-md-6">
<Label htmlFor="currencyId" className="form-label" required>
Currency
</Label>
<select
id="currencyId"
className="form-select form-select-sm"
{...register("currencyId")}
>
<option value="">Select Currency</option>
{currencyLoading && <option>Loading...</option>}
{!currencyLoading &&
!currencyError &&
currencyData?.map((currency) => (
<option key={currency.id} value={currency.id}>
{`${currency.currencyName} (${currency.symbol})`}
</option>
))}
</select>
{errors.currencyId && (
<small className="danger-text">{errors.currencyId.message}</small>
)}
</div>
</div>
{/* Description */}
<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">