145 lines
3.6 KiB
JavaScript
145 lines
3.6 KiB
JavaScript
import React, { useEffect } from "react";
|
|
import Label from "../common/Label";
|
|
import { useAppFormContext } from "../../hooks/appHooks/useAppForm";
|
|
import DatePicker from "../common/DatePicker";
|
|
import { useInvoiceAttachmentTypes } from "../../hooks/masterHook/useMaster";
|
|
|
|
const PurchasePaymentDetails = () => {
|
|
const { data, isLoading, error, isError } = useInvoiceAttachmentTypes();
|
|
const {
|
|
register,
|
|
watch,
|
|
setValue,
|
|
control,
|
|
formState: { errors },
|
|
} = useAppFormContext();
|
|
|
|
const baseAmount = watch("baseAmount");
|
|
const taxAmount = watch("taxAmount");
|
|
|
|
useEffect(() => {
|
|
const base = parseFloat(baseAmount) || 0;
|
|
const tax = parseFloat(taxAmount) || 0;
|
|
|
|
if (base || tax) {
|
|
setValue("totalAmount", (base + tax).toFixed(2));
|
|
}
|
|
}, [baseAmount, taxAmount, setValue]);
|
|
|
|
return (
|
|
<div className="row g-2 text-start">
|
|
<div className="col-12 col-md-4">
|
|
<Label htmlFor="baseAmount" required>
|
|
Base Amount
|
|
</Label>
|
|
|
|
<input
|
|
id="baseAmount"
|
|
type="number"
|
|
className="form-control form-control-md"
|
|
{...register("baseAmount")}
|
|
/>
|
|
|
|
{errors?.baseAmount && (
|
|
<div className="small danger-text mt-1">
|
|
{errors.baseAmount.message}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="col-12 col-md-4">
|
|
<Label htmlFor="taxAmount" required>
|
|
Tax Amount
|
|
</Label>
|
|
|
|
<input
|
|
id="taxAmount"
|
|
type="number"
|
|
className="form-control form-control-md"
|
|
{...register("taxAmount")}
|
|
/>
|
|
|
|
{errors?.taxAmount && (
|
|
<div className="small danger-text mt-1">
|
|
{errors.taxAmount.message}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="col-12 col-md-4">
|
|
<Label htmlFor="totalAmount" required>
|
|
Total Amount
|
|
</Label>
|
|
|
|
<input
|
|
id="totalAmount"
|
|
type="number"
|
|
className="form-control form-control-md"
|
|
{...register("totalAmount")}
|
|
readOnly
|
|
/>
|
|
|
|
{errors?.totalAmount && (
|
|
<div className="small danger-text mt-1">
|
|
{errors.totalAmount.message}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="col-12 col-md-6">
|
|
<Label htmlFor="transportCharges">Transport Charges</Label>
|
|
|
|
<input
|
|
id="transportCharges"
|
|
type="number"
|
|
className="form-control form-control-md"
|
|
{...register("transportCharges")}
|
|
/>
|
|
|
|
{errors?.transportCharges && (
|
|
<div className="small danger-text mt-1">
|
|
{errors.transportCharges.message}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="col-12 col-md-6">
|
|
<Label htmlFor="paymentDueDate">Payment Due Date</Label>
|
|
|
|
<DatePicker
|
|
name={"paymentDueDate"}
|
|
control={control}
|
|
className="w-full"
|
|
/>
|
|
|
|
{errors?.paymentDueDate && (
|
|
<div className="small danger-text mt-1">
|
|
{errors.paymentDueDate.message}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="col-12">
|
|
<Label htmlFor="description" required>
|
|
Description
|
|
</Label>
|
|
|
|
<textarea
|
|
id="description"
|
|
rows="3"
|
|
className="form-control form-control-md"
|
|
{...register("description")}
|
|
/>
|
|
|
|
{errors?.description && (
|
|
<div className="small danger-text mt-1">
|
|
{errors.description.message}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PurchasePaymentDetails;
|