marco.pms.web/src/components/purchase/PurchasePartyDetails.jsx

import React from "react";
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 {
  useGlobaleOrganizations,
  useOrganization,
  useOrganizationsList,
} from "../../hooks/useOrganization";
import { ITEMS_PER_PAGE } from "../../utils/constants";

const PurchasePartyDetails = () => {
  const {
    register,
    control,
    setValue,
    watch,
    formState: { errors },
  } = useAppFormContext();

  return (
    <div className="row g-3 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-xs ${
            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-xs ${
            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>

      <div className="col-12 col-md-6 my-0">
        <AppFormController
          name="organizationId"
          control={control}
          render={({ field }) => (
            <SelectFieldSearch
              {...field}
              label="Organization"
              placeholder="Select Organization"
              required
              valueKey="id"
              labelKey="name"
              useFetchHook={useGlobaleOrganizations}
              hookParams={[ITEMS_PER_PAGE, 1]}
              error={errors?.organizationId?.message}
            />
          )}
        />
      </div>

      <div className="col-12 col-md-6 my-0">
        <AppFormController
          name="supplierId"
          control={control}
          render={({ field }) => (
            <SelectFieldSearch
              label="Supplier"
              placeholder="Select Organization"
              required
              value={field.value}
              onChange={field.onChange}
              valueKey="id"
              labelKey="name"
              useFetchHook={useGlobaleOrganizations}
              hookParams={[ITEMS_PER_PAGE, 1]}
              errors={errors.supplierId}
            />
          )}
        />
      </div>

      <div className="col-12 col-md-6 my-0">
        <Label htmlFor="billingAddress">Billing Address</Label>

        <textarea
          id="billingAddress"
          rows="2"
          className={`form-control form-control-xs `}
          {...register("billingAddress")}
        />

        {errors?.billingAddress && (
          <div className="danger-text">{errors.billingAddress.message}</div>
        )}
      </div>

      <div className="col-12 col-md-6 my-0 mb-1">
        <Label htmlFor="shippingAddress">Shipping Address</Label>

        <textarea
          id="shippingAddress"
          rows="2"
          className={`form-control form-control-xs `}
          {...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-xs `}
          {...register("purchaseOrderNumber")}
        />

        {errors?.purchaseOrderNumber && (
          <div className="danger-text">
            {errors.purchaseOrderNumber.message}
          </div>
        )}
      </div>

      {/* Purchase Order Date */}
      <div className="col-12 col-md-6 mb-1">
        <Label htmlFor="purchaseOrderDate" required>
          Purchase Order Date
        </Label>

        <DatePicker
          control={control}
          name="purchaseOrderDate"
          size="xs"
          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 mb-1">
        <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 mb-2">
        <Label htmlFor="proformaInvoiceDate">Proforma Date</Label>

        <DatePicker
          control={control}
          name="proformaInvoiceDate"
          className="w-full"
          size="xs"
        />

        {errors?.proformaInvoiceDate && (
          <div className="danger-text">
            {errors.proformaInvoiceDate.message}
          </div>
        )}
      </div>
    </div>
  );
};

export default PurchasePartyDetails;