created purchase form
This commit is contained in:
parent
b8df8a2bde
commit
82c1dc4b8e
@ -11,6 +11,18 @@
|
||||
top: var(--sticky-top, 0px) !important;
|
||||
z-index: 1025;
|
||||
}
|
||||
.form-control-md {
|
||||
min-height: calc(1.6em + 0.65rem + calc(var(--bs-border-width) * 2));
|
||||
padding: 0.18rem 0.60rem;
|
||||
font-size: 0.875rem; /* ~14px */
|
||||
border-radius: var(--bs-border-radius);
|
||||
}
|
||||
|
||||
.form-control-md::file-selector-button {
|
||||
padding: 0.32rem 0.75rem;
|
||||
margin: -0.32rem -0.75rem;
|
||||
margin-inline-end: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
/* ===========================% Background_Colors %========================================================== */
|
||||
|
||||
@ -200,7 +200,9 @@ export const SelectProjectField = ({
|
||||
isFullObject = false,
|
||||
isMultiple = false,
|
||||
isAllProject = false,
|
||||
disabled
|
||||
disabled,
|
||||
className,
|
||||
errors
|
||||
}) => {
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const debounce = useDebounce(searchText, 300);
|
||||
@ -302,6 +304,10 @@ export const SelectProjectField = ({
|
||||
{displayText}
|
||||
</span>
|
||||
</button>
|
||||
|
||||
{errors?.projectId && (
|
||||
<div className="danger-text">{errors.projectId.message}</div>
|
||||
)}
|
||||
|
||||
{/* DROPDOWN */}
|
||||
{open && (
|
||||
@ -377,6 +383,7 @@ export const SelectFieldSearch = ({
|
||||
isMultiple = false,
|
||||
hookParams,
|
||||
useFetchHook,
|
||||
errors=null,
|
||||
}) => {
|
||||
const [searchText, setSearchText] = useState("");
|
||||
const debounce = useDebounce(searchText, 300);
|
||||
@ -512,6 +519,9 @@ export const SelectFieldSearch = ({
|
||||
{displayText}
|
||||
</span>
|
||||
</button>
|
||||
{errors && (
|
||||
<div className="danger-text">{errors.message}</div>
|
||||
)}
|
||||
|
||||
{/* DROPDOWN */}
|
||||
{open && (
|
||||
|
||||
@ -50,7 +50,6 @@ const InputSuggestions = ({
|
||||
{filteredList.map((org) => (
|
||||
<li
|
||||
key={org}
|
||||
className="ropdown-item"
|
||||
style={{
|
||||
cursor: "pointer",
|
||||
padding: "5px 12px",
|
||||
|
||||
@ -6,14 +6,15 @@ import {
|
||||
PurchaseSchema,
|
||||
getStepFields,
|
||||
} from "./PurchaseSchema";
|
||||
import { defaultJobValue } from "../ServiceProject/ServiceProjectSchema";
|
||||
import PurchasePartyDetails from "./PurchasePartyDetails";
|
||||
import PurchaseTransportDetails from "./PurchaseTransportDetails";
|
||||
import PurchasePaymentDetails from "./PurchasePaymentDetails";
|
||||
|
||||
const ManagePurchase = () => {
|
||||
const [activeTab, setActiveTab] = useState(0);
|
||||
const [completedTabs, setCompletedTabs] = useState([]);
|
||||
|
||||
const newTenantConfig = [
|
||||
const stepsConfig = [
|
||||
{
|
||||
name: "Contact Info",
|
||||
icon: "bx bx-user bx-md",
|
||||
@ -24,29 +25,29 @@ const ManagePurchase = () => {
|
||||
name: "Organization",
|
||||
icon: "bx bx-buildings bx-md",
|
||||
subtitle: "Organization Details",
|
||||
component: <div>Invoice & Transport Details</div>,
|
||||
component: <PurchaseTransportDetails/>,
|
||||
},
|
||||
{
|
||||
name: "SubScription",
|
||||
name: "Subscription",
|
||||
icon: "bx bx-star bx-md",
|
||||
component: <div>Payment & Financials</div>,
|
||||
subtitle: "Payment & Financials",
|
||||
component: <PurchasePaymentDetails/>,
|
||||
},
|
||||
];
|
||||
|
||||
const purchaseOrder = useAppForm({
|
||||
resolver: zodResolver(PurchaseSchema),
|
||||
defaultJobValue: defaultPurchaseValue,
|
||||
defaultValues: defaultPurchaseValue,
|
||||
mode: "onChange",
|
||||
});
|
||||
const getCurrentTrigger = () =>
|
||||
activeTab === 2 ? subscriptionForm.trigger : tenantForm.trigger;
|
||||
|
||||
const handleNext = async () => {
|
||||
const currentStepFields = getStepFields(activeTab);
|
||||
const trigger = getCurrentTrigger();
|
||||
const valid = await trigger(currentStepFields);
|
||||
const valid = await purchaseOrder.trigger(currentStepFields);
|
||||
|
||||
if (valid) {
|
||||
setCompletedTabs((prev) => [...new Set([...prev, activeTab])]);
|
||||
setActiveTab((prev) => Math.min(prev + 1, newTenantConfig.length - 1));
|
||||
setActiveTab((prev) => Math.min(prev + 1, stepsConfig.length - 1));
|
||||
}
|
||||
};
|
||||
|
||||
@ -54,59 +55,84 @@ const ManagePurchase = () => {
|
||||
setActiveTab((prev) => Math.max(prev - 1, 0));
|
||||
};
|
||||
|
||||
const onsubmit = (formData) => {};
|
||||
const onSubmit = (formData) => {
|
||||
console.log("PURCHASE DATA:", formData);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
id="wizard-property-listing"
|
||||
className="bs-stepper horizontically mt-2 b-secondry px-1 shadow-none border-0"
|
||||
className="bs-stepper horizontically mt-2 b-secondry px-1 py-1 shadow-none border-0"
|
||||
>
|
||||
{/* <span className="fs-5">New Parchase</span> */}
|
||||
<div className="bs-stepper-header text-start px-0">
|
||||
{newTenantConfig
|
||||
.filter((step) => step.name.toLowerCase() !== "congratulation")
|
||||
.map((step, index) => {
|
||||
const isActive = activeTab === index;
|
||||
const isCompleted = completedTabs.includes(index);
|
||||
{/* Header */}
|
||||
<div className="bs-stepper-header text-start px-0 py-1">
|
||||
{stepsConfig.map((step, index) => {
|
||||
const isActive = activeTab === index;
|
||||
const isCompleted = completedTabs.includes(index);
|
||||
|
||||
return (
|
||||
<React.Fragment key={step.name}>
|
||||
<div
|
||||
className={`step ${isActive ? "active" : ""} ${
|
||||
isCompleted ? "crossed" : ""
|
||||
}`}
|
||||
data-target={`#step-${index}`}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className={`step-trigger ${isActive ? "active" : ""}`}
|
||||
// onClick={() => setActiveTab(index)} // optional
|
||||
>
|
||||
<span className="bs-stepper-circle">
|
||||
{isCompleted ? (
|
||||
<i className="bx bx-check"></i>
|
||||
) : (
|
||||
<i className={step.icon}></i>
|
||||
)}
|
||||
return (
|
||||
<React.Fragment key={step.name}>
|
||||
<div
|
||||
className={`step ${isActive ? "active" : ""} ${
|
||||
isCompleted ? "crossed" : ""
|
||||
}`}
|
||||
>
|
||||
<button type="button" className="step-trigger">
|
||||
<span className="bs-stepper-circle">
|
||||
{isCompleted ? (
|
||||
<i className="bx bx-check"></i>
|
||||
) : (
|
||||
<i className={step.icon}></i>
|
||||
)}
|
||||
</span>
|
||||
|
||||
<span className="bs-stepper-label">
|
||||
<span className="bs-stepper-title">{step.name}</span>
|
||||
<span className="bs-stepper-subtitle">
|
||||
{step.subtitle}
|
||||
</span>
|
||||
<span className="bs-stepper-label">
|
||||
<span className="bs-stepper-title">{step.name}</span>
|
||||
<span className="bs-stepper-subtitle">
|
||||
{step.subtitle}
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
{index < newTenantConfig.length - 1 && (
|
||||
<div className="line text-primary"></div>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{index < stepsConfig.length - 1 && (
|
||||
<div className="line text-primary"></div>
|
||||
)}
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="bs-stepper-content py-2">
|
||||
<AppFormProvider>
|
||||
<form onSubmit={purchaseOrder.handleSubmit(onsubmit)}>
|
||||
{newTenantConfig[activeTab].component}
|
||||
<AppFormProvider {...purchaseOrder}>
|
||||
<form onSubmit={purchaseOrder.handleSubmit(onSubmit)}>
|
||||
{stepsConfig[activeTab].component}
|
||||
|
||||
<div className="d-flex justify-content-between mt-4">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline-secondary"
|
||||
onClick={handlePrev}
|
||||
disabled={activeTab === 0}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
|
||||
{activeTab < stepsConfig.length - 1 ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm btn-primary"
|
||||
onClick={handleNext}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
) : (
|
||||
<button type="submit" className="btn btn-sm btn-primary">
|
||||
Submit
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</AppFormProvider>
|
||||
</div>
|
||||
|
||||
@ -1,31 +1,232 @@
|
||||
import React from "react";
|
||||
import { useAppFormContext } from "../../hooks/appHooks/useAppForm";
|
||||
import { AppFormController, useAppFormContext } from "../../hooks/appHooks/useAppForm";
|
||||
import Label from "../common/Label";
|
||||
import DatePicker from "../common/DatePicker";
|
||||
import {
|
||||
SelectFieldSearch,
|
||||
SelectProjectField,
|
||||
} from "../common/Forms/SelectFieldServerSide";
|
||||
import { useOrganization, useOrganizationsList } from "../../hooks/useOrganization";
|
||||
import { ITEMS_PER_PAGE } from "../../utils/constants";
|
||||
|
||||
const PurchasePartyDetails = ({ onNext }) => {
|
||||
const PurchasePartyDetails = () => {
|
||||
const {
|
||||
register,
|
||||
control,
|
||||
trigger,
|
||||
setValue,
|
||||
watch,
|
||||
formState: { errors },
|
||||
} = useAppFormContext();
|
||||
|
||||
const handleNext = async () => {
|
||||
const valid = await trigger([
|
||||
"title",
|
||||
"projectId",
|
||||
"organizationId",
|
||||
"supplier",
|
||||
"billingAddress",
|
||||
"shippingAddress",
|
||||
"purchaseOrderNumber",
|
||||
"purchaseOrderDate",
|
||||
"porformaInvoiceNo",
|
||||
]);
|
||||
if (valid) {
|
||||
onNext();
|
||||
}
|
||||
};
|
||||
return <div className="row"></div>;
|
||||
|
||||
return (
|
||||
<div className="row g-2 text-start">
|
||||
{/* Title */}
|
||||
<div className="col-12 col-md-6">
|
||||
<Label htmlFor="title" required>
|
||||
Title
|
||||
</Label>
|
||||
|
||||
<input
|
||||
id="title"
|
||||
type="text"
|
||||
className={`form-control form-control-md ${
|
||||
errors?.title ? "is-invalid" : ""
|
||||
}`}
|
||||
{...register("title")}
|
||||
/>
|
||||
|
||||
{errors?.title && (
|
||||
<div className="danger-text">{errors.title.message}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Project ID */}
|
||||
<div className="col-12 col-md-6">
|
||||
<SelectProjectField
|
||||
className={`form-control form-control-md ${
|
||||
errors?.projectId ? "is-invalid" : ""
|
||||
}`}
|
||||
label="Project"
|
||||
required
|
||||
placeholder="Select Project"
|
||||
value={watch("projectId")}
|
||||
onChange={(val) =>
|
||||
setValue("projectId", val, {
|
||||
shouldDirty: true,
|
||||
shouldValidate: true,
|
||||
})
|
||||
}
|
||||
errors={errors}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Organization */}
|
||||
<div className="col-12 col-md-6">
|
||||
|
||||
{/* <input
|
||||
id="organizationId"
|
||||
type="text"
|
||||
className={`form-control form-control-md `}
|
||||
{...register("organizationId")}
|
||||
/> */}
|
||||
<AppFormController
|
||||
name="organizationId"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<SelectFieldSearch
|
||||
label="Organization"
|
||||
placeholder="Select Organization"
|
||||
required
|
||||
value={field.value}
|
||||
onChange={field.onChange}
|
||||
valueKey="id"
|
||||
labelKey="name"
|
||||
useFetchHook={useOrganizationsList}
|
||||
hookParams={[ITEMS_PER_PAGE,1]}
|
||||
errors={errors?.organizationId}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Supplier */}
|
||||
<div className="col-12 col-md-6">
|
||||
<Label htmlFor="supplierId" required>
|
||||
Supplier
|
||||
</Label>
|
||||
|
||||
<input
|
||||
id="supplierId"
|
||||
type="text"
|
||||
className={`form-control form-control-md `}
|
||||
{...register("supplierId")}
|
||||
/>
|
||||
|
||||
{errors?.supplierId && (
|
||||
<div className="danger-text">{errors.supplierId.message}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Billing Address */}
|
||||
<div className="col-12 col-md-6">
|
||||
<Label htmlFor="billingAddress">Billing Address</Label>
|
||||
|
||||
<textarea
|
||||
id="billingAddress"
|
||||
rows="2"
|
||||
className={`form-control form-control-md `}
|
||||
{...register("billingAddress")}
|
||||
/>
|
||||
|
||||
{errors?.billingAddress && (
|
||||
<div className="danger-text">{errors.billingAddress.message}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-6">
|
||||
<Label htmlFor="shippingAddress">Shipping Address</Label>
|
||||
|
||||
<textarea
|
||||
id="shippingAddress"
|
||||
rows="2"
|
||||
className={`form-control form-control-md `}
|
||||
{...register("shippingAddress")}
|
||||
/>
|
||||
|
||||
{errors?.shippingAddress && (
|
||||
<div className="danger-text">{errors.shippingAddress.message}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Purchase Order Number */}
|
||||
<div className="col-12 col-md-6">
|
||||
<Label htmlFor="purchaseOrderNumber" required>
|
||||
Purchase Order Number
|
||||
</Label>
|
||||
|
||||
<input
|
||||
id="purchaseOrderNumber"
|
||||
type="text"
|
||||
className={`form-control form-control-md `}
|
||||
{...register("purchaseOrderNumber")}
|
||||
/>
|
||||
|
||||
{errors?.purchaseOrderNumber && (
|
||||
<div className="danger-text">
|
||||
{errors.purchaseOrderNumber.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Purchase Order Date */}
|
||||
<div className="col-12 col-md-6">
|
||||
<Label htmlFor="purchaseOrderDate" required>
|
||||
Purchase Order Date
|
||||
</Label>
|
||||
|
||||
<DatePicker
|
||||
control={control}
|
||||
name="purchaseOrderDate"
|
||||
className={` w-full ${
|
||||
errors?.purchaseOrderDate ? "is-invalid" : ""
|
||||
}`}
|
||||
/>
|
||||
|
||||
{errors?.purchaseOrderDate && (
|
||||
<div className="danger-text">{errors.purchaseOrderDate.message}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Proforma Invoice */}
|
||||
<div className="col-12 col-md-6">
|
||||
<Label htmlFor="proformaInvoiceNumber">Proforma Invoice Number</Label>
|
||||
<input
|
||||
id="proformaInvoiceNumber"
|
||||
type="text"
|
||||
className={`form-control `}
|
||||
{...register("proformaInvoiceNumber")}
|
||||
/>
|
||||
|
||||
{errors?.proformaInvoiceNumber && (
|
||||
<div className="danger-text">
|
||||
{errors.proformaInvoiceNumber.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6">
|
||||
<Label htmlFor="proformaInvoiceAmountt">Proforma Amount</Label>
|
||||
<input
|
||||
id="proformaInvoiceAmount"
|
||||
type="text"
|
||||
className={`form-control `}
|
||||
{...register("proformaInvoiceAmount")}
|
||||
/>
|
||||
|
||||
{errors?.proformaInvoiceAmountt && (
|
||||
<div className="danger-text">
|
||||
{errors.proformaInvoiceAmount.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 col-md-6">
|
||||
<Label htmlFor="proformaInvoiceDate">Proforma Date</Label>
|
||||
|
||||
<DatePicker
|
||||
control={control}
|
||||
name="proformaInvoiceDate"
|
||||
className="w-full"
|
||||
/>
|
||||
|
||||
{errors?.proformaInvoiceDate && (
|
||||
<div className="danger-text">
|
||||
{errors.proformaInvoiceDate.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PurchasePartyDetails;
|
||||
|
||||
@ -1,11 +1,143 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
import Label from "../common/Label";
|
||||
import { useAppFormContext } from "../../hooks/appHooks/useAppForm";
|
||||
import DatePicker from "../common/DatePicker";
|
||||
|
||||
const PurchasePaymentDetails = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const {
|
||||
register,
|
||||
watch,
|
||||
setValue,control,
|
||||
formState: { errors },
|
||||
} = useAppFormContext();
|
||||
|
||||
export default PurchasePaymentDetails
|
||||
const baseAmount = watch("baseAmount");
|
||||
const taxAmount = watch("taxAmount");
|
||||
|
||||
React.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">
|
||||
{/* Base Amount */}
|
||||
<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>
|
||||
|
||||
{/* Tax Amount */}
|
||||
<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>
|
||||
|
||||
{/* Total Amount */}
|
||||
<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>
|
||||
|
||||
{/* Transport Charges */}
|
||||
<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>
|
||||
|
||||
{/* Payment Due Date */}
|
||||
<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;
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { z } from "zod";
|
||||
import { normalizeAllowedContentTypes } from "../../utils/appUtils";
|
||||
|
||||
export const AttachmentSchema = (allowedContentType, maxSizeAllowedInMB) => {
|
||||
const allowedTypes = normalizeAllowedContentTypes(allowedContentType);
|
||||
@ -6,6 +7,10 @@ export const AttachmentSchema = (allowedContentType, maxSizeAllowedInMB) => {
|
||||
return z.object({
|
||||
fileName: z.string().min(1, { message: "File name is required" }),
|
||||
base64Data: z.string().min(1, { message: "File data is required" }),
|
||||
invoiceAttachmentTypeId: z
|
||||
.string()
|
||||
.min(1, { message: "File data is required" }),
|
||||
|
||||
contentType: z
|
||||
.string()
|
||||
.min(1, { message: "MIME type is required" })
|
||||
@ -15,6 +20,7 @@ export const AttachmentSchema = (allowedContentType, maxSizeAllowedInMB) => {
|
||||
message: `File type must be one of: ${allowedTypes.join(", ")}`,
|
||||
}
|
||||
),
|
||||
|
||||
fileSize: z
|
||||
.number()
|
||||
.int()
|
||||
@ -23,6 +29,7 @@ export const AttachmentSchema = (allowedContentType, maxSizeAllowedInMB) => {
|
||||
(maxSizeAllowedInMB ?? 25) * 1024 * 1024,
|
||||
`fileSize must be ≤ ${maxSizeAllowedInMB ?? 25}MB`
|
||||
),
|
||||
|
||||
description: z.string().optional().default(""),
|
||||
isActive: z.boolean(),
|
||||
});
|
||||
@ -34,27 +41,32 @@ export const PurchaseSchema = z.object({
|
||||
organizationId: z.string().min(1, { message: "Organization is required" }),
|
||||
billingAddress: z.string().min(1, { message: "Address is required" }),
|
||||
shippingAddress: z.string().min(1, { message: "Address is required" }),
|
||||
|
||||
purchaseOrderNumber: z.string().nullable(),
|
||||
purchaseOrderDate: z.string().nullable(),
|
||||
supplier: z.string().min(1, { message: "Supplier is required" }),
|
||||
porformaInvoiceNo: z.string().nullable(),
|
||||
// Supplier Details
|
||||
purchaseOrderDate: z.coerce.date().nullable(),
|
||||
|
||||
invoiceNo: z.string().min(1, { message: "Invoice No is required" }),
|
||||
invoiceDate: z.string().min(1, { message: "Date is required" }),
|
||||
ewayBillNo: z.string().min(1, { message: "E-Way Bill No is required" }),
|
||||
ewayBillDate: z.string().min(1, { message: "E-Way Bill Date is required" }),
|
||||
irnNo: z.string().min(1, { message: "IRN is required" }),
|
||||
ackDate: z.string().min(1, { message: "Date is required" }),
|
||||
ackNo: z.string().min(1, { message: "acknowledgement No is required" }),
|
||||
supplierId: z.string().min(1, { message: "Supplier is required" }),
|
||||
|
||||
proformaInvoiceNumber: z.string().nullable(),
|
||||
proformaInvoiceDate: z.coerce.date().nullable(),
|
||||
proformaInvoiceAmount: z.string().nullable(),
|
||||
|
||||
invoiceNumber: z.string().nullable(),
|
||||
invoiceDate: z.coerce.date().nullable(),
|
||||
eWayBillNumber: z.string().nullable(),
|
||||
eWayBillDate: z.coerce.date().nullable(),
|
||||
invoiceReferenceNumber: z.string().nullable(),
|
||||
acknowledgmentDate: z.coerce.date().nullable(),
|
||||
acknowledgmentNumber: z.string().nullable(),
|
||||
|
||||
// Payment Detail
|
||||
baseAmount: z.string().min(1, { message: "Base amount is required" }),
|
||||
taxAmount: z.string().min(1, { message: "Tax amount is required" }),
|
||||
totalAmount: z.string().min(1, { message: "Total amount is required" }),
|
||||
paymentDueDate: z.string().nullable(),
|
||||
TransportCharges: z.string().nullable(),
|
||||
description: z.string().min(1, { message: "description is required" }),
|
||||
paymentDueDate: z.coerce.date().nullable(),
|
||||
transportCharges: z.string().nullable(),
|
||||
description: z.string().min(1, { message: "Description is required" }),
|
||||
|
||||
attachments: z.array(AttachmentSchema([], 25)).optional(),
|
||||
});
|
||||
|
||||
// deliveryChallanNo: z
|
||||
@ -64,30 +76,36 @@ export const PurchaseSchema = z.object({
|
||||
// shippingAddress: z.string().min(1, { message: "Delevery Date is required" }),
|
||||
|
||||
export const defaultPurchaseValue = {
|
||||
title: null,
|
||||
projectId: null,
|
||||
organizationId: null,
|
||||
billingAddress: null,
|
||||
shippingAddress: null,
|
||||
title: "",
|
||||
projectId: "",
|
||||
organizationId: "",
|
||||
billingAddress: "",
|
||||
shippingAddress: "",
|
||||
purchaseOrderNumber: null,
|
||||
purchaseOrderDate: null,
|
||||
supplier: null,
|
||||
porformaInvoiceNo: null,
|
||||
|
||||
invoiceNo: null,
|
||||
supplierId: "",
|
||||
|
||||
proformaInvoiceNumber: null,
|
||||
proformaInvoiceDate: null,
|
||||
proformaInvoiceAmount: null,
|
||||
|
||||
invoiceNumber: null,
|
||||
invoiceDate: null,
|
||||
ewayBillNo: null,
|
||||
ewayBillDate: null,
|
||||
irnNo: null,
|
||||
ackDate: null,
|
||||
ackNo: null,
|
||||
eWayBillNumber: null,
|
||||
eWayBillDate: null,
|
||||
invoiceReferenceNumber: null,
|
||||
acknowledgmentNumber: null,
|
||||
acknowledgmentDate: null,
|
||||
|
||||
baseAmount: null,
|
||||
taxAmount: null,
|
||||
totalAmount: null,
|
||||
baseAmount: "",
|
||||
taxAmount: "",
|
||||
totalAmount: "",
|
||||
paymentDueDate: null,
|
||||
TransportCharges: null,
|
||||
description: null,
|
||||
transportCharges: null,
|
||||
description: "",
|
||||
|
||||
attachments: [],
|
||||
};
|
||||
|
||||
export const getStepFields = (stepIndex) => {
|
||||
@ -96,28 +114,29 @@ export const getStepFields = (stepIndex) => {
|
||||
"title",
|
||||
"projectId",
|
||||
"organizationId",
|
||||
"supplier",
|
||||
"supplierId",
|
||||
"billingAddress",
|
||||
"shippingAddress",
|
||||
"purchaseOrderNumber",
|
||||
"purchaseOrderDate",
|
||||
"porformaInvoiceNo",
|
||||
"proformaInvoiceNumber",
|
||||
"proformaInvoiceDate",
|
||||
"proformaInvoiceAmount",
|
||||
],
|
||||
1: [
|
||||
"invoiceNo",
|
||||
"invoiceNumber",
|
||||
"invoiceDate",
|
||||
"ewayBillNo",
|
||||
"ewayBillDate",
|
||||
"irnNo",
|
||||
"ackNo",
|
||||
"taxId",
|
||||
"ackDate",
|
||||
"eWayBillNumber",
|
||||
"eWayBillDate",
|
||||
"invoiceReferenceNumber",
|
||||
"acknowledgmentNumber",
|
||||
"acknowledgmentDate",
|
||||
],
|
||||
2: [
|
||||
"baseAmount",
|
||||
"taxAmount",
|
||||
"totalAmount",
|
||||
"TransportCharges",
|
||||
"transportCharges",
|
||||
"paymentDueDate",
|
||||
"description",
|
||||
],
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
const PurchaseTansportDetails = () => {
|
||||
return (
|
||||
<div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PurchaseTansportDetails
|
||||
131
src/components/purchase/PurchaseTransportDetails.jsx
Normal file
131
src/components/purchase/PurchaseTransportDetails.jsx
Normal file
@ -0,0 +1,131 @@
|
||||
import React from "react";
|
||||
import { useAppFormContext } from "../../hooks/appHooks/useAppForm";
|
||||
import DatePicker from "../common/DatePicker";
|
||||
import Label from "../common/Label";
|
||||
|
||||
const PurchaseTransportDetails = () => {
|
||||
const {
|
||||
register,control,
|
||||
formState: { errors },
|
||||
} = useAppFormContext();
|
||||
|
||||
return (
|
||||
<div className="row g-2 text-start">
|
||||
{/* Invoice Number */}
|
||||
<div className="col-12 col-md-6">
|
||||
<Label htmlFor="invoiceNumber" required>
|
||||
Invoice Number
|
||||
</Label>
|
||||
|
||||
<input
|
||||
id="invoiceNumber"
|
||||
type="text"
|
||||
className="form-control form-control-md"
|
||||
{...register("invoiceNumber")}
|
||||
/>
|
||||
|
||||
{errors?.invoiceNumber && (
|
||||
<div className="small text-danger mt-1">
|
||||
{errors.invoiceNumber.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Invoice Date */}
|
||||
<div className="col-12 col-md-6">
|
||||
<Label htmlFor="invoiceDate">Invoice Date</Label>
|
||||
|
||||
|
||||
<DatePicker control={control} name="invoiceDate" className="w-full"/>
|
||||
|
||||
{errors?.invoiceDate && (
|
||||
<div className="small text-danger mt-1">
|
||||
{errors.invoiceDate.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* E-Way Bill Number */}
|
||||
<div className="col-12 col-md-6">
|
||||
<Label htmlFor="eWayBillNumber">E-Way Bill Number</Label>
|
||||
|
||||
<input
|
||||
id="eWayBillNumber"
|
||||
type="text"
|
||||
className="form-control form-control-md"
|
||||
{...register("eWayBillNumber")}
|
||||
/>
|
||||
|
||||
{errors?.eWayBillNumber && (
|
||||
<div className="small text-danger mt-1">
|
||||
{errors.eWayBillNumber.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* E-Way Bill Date */}
|
||||
<div className="col-12 col-md-6">
|
||||
<Label htmlFor="eWayBillDate">E-Way Bill Date</Label>
|
||||
|
||||
|
||||
<DatePicker control={control} name="eWayBillDate" className="w-full"/>
|
||||
|
||||
{errors?.eWayBillDate && (
|
||||
<div className="small text-danger mt-1">
|
||||
{errors.eWayBillDate.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Invoice Reference Number */}
|
||||
<div className="col-12 col-md-6">
|
||||
<Label htmlFor="invoiceReferenceNumber">Invoice Reference Number</Label>
|
||||
|
||||
<input
|
||||
id="invoiceReferenceNumber"
|
||||
type="text"
|
||||
className="form-control form-control-md"
|
||||
{...register("invoiceReferenceNumber")}
|
||||
/>
|
||||
|
||||
{errors?.invoiceReferenceNumber && (
|
||||
<div className="small text-danger mt-1">
|
||||
{errors.invoiceReferenceNumber.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Acknowledgment Number */}
|
||||
<div className="col-12 col-md-6">
|
||||
<Label htmlFor="acknowledgmentNumber">Acknowledgment Number</Label>
|
||||
|
||||
<input
|
||||
id="acknowledgmentNumber"
|
||||
type="text"
|
||||
className="form-control form-control-md"
|
||||
{...register("acknowledgmentNumber")}
|
||||
/>
|
||||
|
||||
{errors?.acknowledgmentNumber && (
|
||||
<div className="small text-danger mt-1">
|
||||
{errors.acknowledgmentNumber.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-12 col-md-6">
|
||||
<Label htmlFor="acknowledgmentDate">Acknowledgment Date</Label>
|
||||
|
||||
<DatePicker control={control} name="acknowledgmentDate" className="w-full"/>
|
||||
|
||||
{errors?.acknowledgmentDate && (
|
||||
<div className="small text-danger mt-1">
|
||||
{errors.acknowledgmentDate.message}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PurchaseTransportDetails;
|
||||
Loading…
x
Reference in New Issue
Block a user