Rearranging the fields of Payment Request Popup.
This commit is contained in:
parent
192c04fb6f
commit
346ef0174b
@ -11,8 +11,8 @@ import { formatFileSize, localToUtc } from '../../utils/appUtils';
|
|||||||
import { defaultPaymentRequest, PaymentRequestSchema } from './PaymentRequestSchema';
|
import { defaultPaymentRequest, PaymentRequestSchema } from './PaymentRequestSchema';
|
||||||
|
|
||||||
function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
||||||
const {data,isLoading,isError,error:requestError}= usePaymentRequestDetail(requestToEdit)
|
const { data, isLoading, isError, error: requestError } = usePaymentRequestDetail(requestToEdit)
|
||||||
// const data = {}
|
// const data = {}
|
||||||
|
|
||||||
const { projectNames, loading: projectLoading, error, isError: isProjectError,
|
const { projectNames, loading: projectLoading, error, isError: isProjectError,
|
||||||
} = useProjectName();
|
} = useProjectName();
|
||||||
@ -25,7 +25,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
loading: ExpenseLoading,
|
loading: ExpenseLoading,
|
||||||
error: ExpenseError,
|
error: ExpenseError,
|
||||||
} = useExpenseCategory();
|
} = useExpenseCategory();
|
||||||
|
|
||||||
const schema = PaymentRequestSchema(ExpenseTypes);
|
const schema = PaymentRequestSchema(ExpenseTypes);
|
||||||
const { register, control, watch, handleSubmit, setValue, reset, formState: { errors }, } = useForm({
|
const { register, control, watch, handleSubmit, setValue, reset, formState: { errors }, } = useForm({
|
||||||
resolver: zodResolver(schema),
|
resolver: zodResolver(schema),
|
||||||
@ -158,6 +158,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
{requestToEdit ? "Update Payment Request " : "Create Payment Request"}
|
{requestToEdit ? "Update Payment Request " : "Create Payment Request"}
|
||||||
</h5>
|
</h5>
|
||||||
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
|
<form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
|
||||||
|
{/* Project and Category */}
|
||||||
<div className="row my-2 text-start">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<Label className="form-label" required>
|
<Label className="form-label" required>
|
||||||
@ -214,90 +215,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="row my-2 text-start">
|
{/* Title and Advance Payment */}
|
||||||
<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>
|
|
||||||
|
|
||||||
<div className="row my-2 text-start">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-6">
|
<div className="col-md-6">
|
||||||
<Label htmlFor="title" className="form-label" required>
|
<Label htmlFor="title" className="form-label" required>
|
||||||
@ -339,6 +257,94 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
|
|
||||||
</div>
|
</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="row my-2 text-start">
|
||||||
<div className="col-md-12">
|
<div className="col-md-12">
|
||||||
<Label htmlFor="description" className="form-label" required>
|
<Label htmlFor="description" className="form-label" required>
|
||||||
@ -358,6 +364,7 @@ function ManagePaymentRequest({ closeModal, requestToEdit = null }) {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Upload Document */}
|
||||||
<div className="row my-2 text-start">
|
<div className="row my-2 text-start">
|
||||||
<div className="col-md-12">
|
<div className="col-md-12">
|
||||||
<Label className="form-label">
|
<Label className="form-label">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user