Uecko_ERP/modules/customer-invoices/src/web/components/editor/invoice-basic-info-fields.tsx

import {
  DatePickerInputField,
  TextField
} from "@repo/rdx-ui/components";
import { FieldDescription, FieldGroup, FieldLegend, FieldSet } from '@repo/shadcn-ui/components';
import { ComponentProps } from 'react';
import { useFormContext } from "react-hook-form";
import { useTranslation } from "../../i18n";
import { InvoiceFormData } from "../../schemas";

export const InvoiceBasicInfoFields = (props: ComponentProps<"fieldset">) => {
  const { t } = useTranslation();
  const { control } = useFormContext<InvoiceFormData>();

  return (
    <FieldSet {...props}>
      <FieldLegend className='hidden text-foreground' variant='label'>
        {t("form_groups.basic_info.title")}
      </FieldLegend>
      <FieldDescription className='hidden'>{t("form_groups.basic_info.description")}</FieldDescription>

      <FieldGroup className='flex flex-row flex-wrap gap-6 xl:flex-nowrap'>
        <DatePickerInputField
          className='min-w-44 flex-1 sm:max-w-44'
          control={control}
          name='invoice_date'
          numberOfMonths={2}
          required
          label={t("form_fields.invoice_date.label")}
          placeholder={t("form_fields.invoice_date.placeholder")}
          description={t("form_fields.invoice_date.description")}
        />

        <DatePickerInputField
          className='min-w-44 flex-1 sm:max-w-44'
          control={control}
          numberOfMonths={2}
          name='operation_date'
          label={t("form_fields.operation_date.label")}
          placeholder={t("form_fields.operation_date.placeholder")}
          description={t("form_fields.operation_date.description")}
        />

        <TextField
          className='min-w-16 flex-1 sm:max-w-16'
          control={control}
          name='series'
          label={t("form_fields.series.label")}
          placeholder={t("form_fields.series.placeholder")}
          description={t("form_fields.series.description")}
        />

        <TextField
          className='min-w-32 flex-1 sm:max-w-44'
          maxLength={256}
          control={control}
          name='reference'
          label={t("form_fields.reference.label")}
          placeholder={t("form_fields.reference.placeholder")}
          description={t("form_fields.reference.description")}
        />

        <TextField
          className='min-w-32 flex-1 xs:max-w-full'
          maxLength={256}
          control={control}
          name='description'
          label={t("form_fields.description.label")}
          placeholder={t("form_fields.description.placeholder")}
          description={t("form_fields.description.description")}
        />
      </FieldGroup>
    </FieldSet>
  );
};