created purchase form

public/assets/css/core-extend.css

@@ -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 %========================================================== */

src/components/common/Forms/SelectFieldServerSide.jsx

@@ -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);
@@ -303,6 +305,10 @@ export const SelectProjectField = ({
         </span>
       </button>
      
+        {errors?.projectId && (
+          <div className="danger-text">{errors.projectId.message}</div>
+        )}
+
       {/* DROPDOWN */}
       {open && (
         <ul
@@ -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 && (

src/components/common/InputSuggestion.jsx

@@ -50,7 +50,6 @@ const InputSuggestions = ({
           {filteredList.map((org) => (
             <li
               key={org}
-              className="ropdown-item"
               style={{
                 cursor: "pointer",
                 padding: "5px 12px",

src/components/purchase/ManagePurchase.jsx

@@ -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 purchaseOrder.trigger(currentStepFields);
-    const valid = await 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,17 +55,18 @@ 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> */}
+      {/* Header */}
-      <div className="bs-stepper-header  text-start px-0">
+      <div className="bs-stepper-header text-start px-0 py-1">
-        {newTenantConfig
+        {stepsConfig.map((step, index) => {
-          .filter((step) => step.name.toLowerCase() !== "congratulation")
-          .map((step, index) => {
           const isActive = activeTab === index;
           const isCompleted = completedTabs.includes(index);
 
@@ -74,13 +76,8 @@ const ManagePurchase = () => {
                 className={`step ${isActive ? "active" : ""} ${
                   isCompleted ? "crossed" : ""
                 }`}
-                  data-target={`#step-${index}`}
-                >
-                  <button
-                    type="button"
-                    className={`step-trigger ${isActive ? "active" : ""}`}
-                    // onClick={() => setActiveTab(index)} // optional
               >
+                <button type="button" className="step-trigger">
                   <span className="bs-stepper-circle">
                     {isCompleted ? (
                       <i className="bx bx-check"></i>
@@ -88,6 +85,7 @@ const ManagePurchase = () => {
                       <i className={step.icon}></i>
                     )}
                   </span>
+
                   <span className="bs-stepper-label">
                     <span className="bs-stepper-title">{step.name}</span>
                     <span className="bs-stepper-subtitle">
@@ -96,17 +94,45 @@ const ManagePurchase = () => {
                   </span>
                 </button>
               </div>
-                {index < newTenantConfig.length - 1 && (
+
+              {index < stepsConfig.length - 1 && (
                 <div className="line text-primary"></div>
               )}
             </React.Fragment>
           );
         })}
       </div>
+
+      {/* Content */}
       <div className="bs-stepper-content py-2">
-        <AppFormProvider>
+        <AppFormProvider {...purchaseOrder}>
-          <form onSubmit={purchaseOrder.handleSubmit(onsubmit)}>
+          <form onSubmit={purchaseOrder.handleSubmit(onSubmit)}>
-            {newTenantConfig[activeTab].component}
+            {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>

src/components/purchase/PurchasePartyDetails.jsx

@@ -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([
+  return (
-      "title",
+    <div className="row g-2 text-start">
-      "projectId",
+      {/* Title */}
-      "organizationId",
+      <div className="col-12 col-md-6">
-      "supplier",
+        <Label htmlFor="title" required>
-      "billingAddress",
+          Title
-      "shippingAddress",
+        </Label>
-      "purchaseOrderNumber",
+
-      "purchaseOrderDate",
+        <input
-      "porformaInvoiceNo",
+          id="title"
-    ]);
+          type="text"
-    if (valid) {
+          className={`form-control form-control-md ${
-      onNext();
+            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}
-  return <div className="row"></div>;
+        />
+      </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;

src/components/purchase/PurchasePaymentDetails.jsx

@@ -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 (
+  const {
-    <div>
+    register,
+    watch,
+    setValue,control,
+    formState: { errors },
+  } = useAppFormContext();
 
-    </div>
+  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]);
 
-export default PurchasePaymentDetails
+  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;

src/components/purchase/PurchaseSchema.jsx

@@ -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(),
+  purchaseOrderDate: z.coerce.date().nullable(),
-  supplier: z.string().min(1, { message: "Supplier is required" }),
-  porformaInvoiceNo: z.string().nullable(),
-  // Supplier Details
 
-  invoiceNo: z.string().min(1, { message: "Invoice No is required" }),
+  supplierId: z.string().min(1, { message: "Supplier is required" }),
-  invoiceDate: z.string().min(1, { message: "Date is required" }),
+
-  ewayBillNo: z.string().min(1, { message: "E-Way Bill No is required" }),
+  proformaInvoiceNumber: z.string().nullable(),
-  ewayBillDate: z.string().min(1, { message: "E-Way Bill Date is required" }),
+  proformaInvoiceDate: z.coerce.date().nullable(),
-  irnNo: z.string().min(1, { message: "IRN is required" }),
+  proformaInvoiceAmount: z.string().nullable(),
-  ackDate: z.string().min(1, { message: "Date is required" }),
+
-  ackNo: z.string().min(1, { message: "acknowledgement No is required" }),
+  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(),
+  paymentDueDate: z.coerce.date().nullable(),
-  TransportCharges: z.string().nullable(),
+  transportCharges: z.string().nullable(),
-  description: z.string().min(1, { message: "description is required" }),
+  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,
+  title: "",
-  projectId: null,
+  projectId: "",
-  organizationId: null,
+  organizationId: "",
-  billingAddress: null,
+  billingAddress: "",
-  shippingAddress: null,
+  shippingAddress: "",
   purchaseOrderNumber: null,
   purchaseOrderDate: null,
-  supplier: null,
-  porformaInvoiceNo: null,
 
-  invoiceNo: null,
+  supplierId: "",
+
+  proformaInvoiceNumber: null,
+  proformaInvoiceDate: null,
+  proformaInvoiceAmount: null,
+
+  invoiceNumber: null,
   invoiceDate: null,
-  ewayBillNo: null,
+  eWayBillNumber: null,
-  ewayBillDate: null,
+  eWayBillDate: null,
-  irnNo: null,
+  invoiceReferenceNumber: null,
-  ackDate: null,
+  acknowledgmentNumber: null,
-  ackNo: null,
+  acknowledgmentDate: null,
 
-  baseAmount: null,
+  baseAmount: "",
-  taxAmount: null,
+  taxAmount: "",
-  totalAmount: null,
+  totalAmount: "",
   paymentDueDate: null,
-  TransportCharges: null,
+  transportCharges: null,
-  description: 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",
+      "eWayBillNumber",
-      "ewayBillDate",
+      "eWayBillDate",
-      "irnNo",
+      "invoiceReferenceNumber",
-      "ackNo",
+      "acknowledgmentNumber",
-      "taxId",
+      "acknowledgmentDate",
-      "ackDate",
     ],
     2: [
       "baseAmount",
       "taxAmount",
       "totalAmount",
-      "TransportCharges",
+      "transportCharges",
       "paymentDueDate",
       "description",
     ],

src/components/purchase/PurchaseTansportDetails.jsx

@@ -1,11 +0,0 @@
-import React from 'react'
-
-const PurchaseTansportDetails = () => {
-  return (
-    <div>
-      
-    </div>
-  )
-}
-
-export default PurchaseTansportDetails

src/components/purchase/PurchaseTransportDetails.jsx

@@ -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;