marco.pms.web/src/components/Tenanat/OrganizationInfo.jsx

import React from "react";
import { useFormContext, Controller } from "react-hook-form";
import Label from "../common/Label";
import DatePicker from "../common/DatePicker";

const OrganizationInfo = ({ onNext, onPrev }) => {
  const {
    register,
    control,
    trigger,
    formState: { errors },
  } = useFormContext();

  const handleNext = async () => {
    const valid = await trigger([
      "organizationName",
      "officeNumber",
      "domainName",
      "description",
      "onBoardingDate",
      "organizationSize",
      "taxId",
      "industryId",
      "reference",
      "logoImage",
    ]);
    if (valid) onNext();
  };

  return (
    <div className="row g-6">
      <div className="col-sm-6">
        <Label htmlFor="organizationName" required>
          Organization Name
        </Label>

        <input
          id="organizationName"
          className={`form-control form-control-sm ${
            errors.organizationName ? "is-invalid" : ""
          }`}
          {...register("organizationName")}
        />
        {errors.organizationName && (
          <div className="invalid-feedback">
            {errors.organizationName.message}
          </div>
        )}
      </div>

      <div className="col-sm-6">
        <Label htmlFor="officeNumber" required>
          Office Number
        </Label>
        <input
          id="officeNumber"
          className={`form-control form-control-sm ${
            errors.officeNumber ? "is-invalid" : ""
          }`}
          {...register("officeNumber")}
        />
        {errors.officeNumber && (
          <div className="invalid-feedback">{errors.officeNumber.message}</div>
        )}
      </div>

      <div className="col-sm-6">
        <Label htmlFor="domainName" required>
          Domain Name
        </Label>
        <input
          id="domainName"
          className={`form-control form-control-sm ${
            errors.domainName ? "is-invalid" : ""
          }`}
          {...register("domainName")}
        />
        {errors.domainName && (
          <div className="invalid-feedback">{errors.domainName.message}</div>
        )}
      </div>

      <div className="col-sm-6">
        <Label htmlFor="taxId" required>
          Tax ID
        </Label>
        <input
          id="taxId"
          className={`form-control form-control-sm ${
            errors.taxId ? "is-invalid" : ""
          }`}
          {...register("taxId")}
        />
        {errors.taxId && (
          <div className="invalid-feedback">{errors.taxId.message}</div>
        )}
      </div>

      <div className="col-sm-6">
        <Label htmlFor="onBoardingDate" required>
          Onboarding Date
        </Label>
        {/* this will upcomming from main */}
        {/* <DatePicker
  name="onBoardingDate"
  control={control}
  placeholder="Select onboarding date"
  maxDate={new Date()}
  className={errors.onBoardingDate ? "is-invalid" : ""}
/>
{errors.onBoardingDate && (
  <div className="invalid-feedback">{errors.onBoardingDate.message}</div>
)} */}

        <label htmlFor="onBoardingDate" className="form-label">
          Onboarding Date <span className="text-danger">*</span>
        </label>
        <input
          type="date"
          id="onBoardingDate"
          {...register("onBoardingDate")}
          className={`form-control form-control-sm ${
            errors.onBoardingDate ? "is-invalid" : ""
          }`}
        />
        {errors.onBoardingDate && (
          <div className="invalid-feedback">
            {errors.onBoardingDate.message}
          </div>
        )}
      </div>

      <div className="col-sm-6">
        <Label htmlFor="organizationSize" required>
          Organization Size
        </Label>
        <input
          id="organizationSize"
          type="number"
          className={`form-control form-control-sm ${
            errors.organizationSize ? "is-invalid" : ""
          }`}
          {...register("organizationSize")}
        />
        {errors.organizationSize && (
          <div className="invalid-feedback">
            {errors.organizationSize.message}
          </div>
        )}
      </div>

      <div className="col-sm-6">
        <Label htmlFor="industryId" required>
          Industry
        </Label>
        <Controller
          name="industryId"
          control={control}
          render={({ field }) => (
            <Select
              {...field}
              id="industryId"
              className={`form-control form-control-sm ${
                errors.industryId ? "is-invalid" : ""
              }`}
              options={[
                { label: "Tech", value: 1 },
                { label: "Healthcare", value: 2 },
              ]} // replace with your data
            />
          )}
        />
        {errors.industryId && (
          <div className="invalid-feedback">{errors.industryId.message}</div>
        )}
      </div>

      <div className="col-sm-6">
        <Label htmlFor="reference">Reference</Label>
        <input
          id="reference"
          className={`form-control form-control-sm ${
            errors.reference ? "is-invalid" : ""
          }`}
          {...register("reference")}
        />
        {errors.reference && (
          <div className="invalid-feedback">{errors.reference.message}</div>
        )}
      </div>

      <div className="col-sm-12">
        <Label htmlFor="description">Description</Label>
        <textarea
          id="description"
          rows={3}
          className={`form-control form-control-sm ${
            errors.description ? "is-invalid" : ""
          }`}
          {...register("description")}
        />
        {errors.description && (
          <div className="invalid-feedback">{errors.description.message}</div>
        )}
      </div>

      <div className="col-sm-12">
        <Label htmlFor="logoImage">Logo Image</Label>
        <input
          id="logoImage"
          type="file"
          className={`form-control form-control-sm ${
            errors.logoImage ? "is-invalid" : ""
          }`}
          {...register("logoImage")}
        />
        {errors.logoImage && (
          <div className="invalid-feedback">{errors.logoImage.message}</div>
        )}
      </div>

      <div className="d-flex justify-content-between mt-3">
        <button type="button" className="btn btn-secondary" onClick={onPrev}>
          Back
        </button>
        <button type="button" className="btn btn-primary" onClick={handleNext}>
          Next
        </button>
      </div>
    </div>
  );
};

export default OrganizationInfo;