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

import {
  DatePickerInputField,
  Description,
  Field,
  FieldGroup,
  Fieldset,
  Legend,
  TextAreaField,
  TextField,
} from "@repo/rdx-ui/components";
import { FileTextIcon } from "lucide-react";
import { useFormContext, useWatch } from "react-hook-form";
import { useTranslation } from "../../i18n";
import { CustomerInvoiceFormData } from "../../schemas";

export const InvoiceBasicInfoFields = () => {
  const { t } = useTranslation();
  const { control } = useFormContext<CustomerInvoiceFormData>();

  const status = useWatch({
    control,
    name: "status",
    defaultValue: "",
  });

  return (
    <Fieldset>
      <Legend className='flex items-center gap-2 text-foreground'>
        <FileTextIcon className='h-5 w-5' /> {t("form_groups.basic_into.title")}
      </Legend>

      <Description>{t("form_groups.basic_into.description")}</Description>
      <FieldGroup className='grid grid-cols-1 gap-x-6 lg:grid-cols-3'>
        <TextField
          control={control}
          name='invoice_number'
          readOnly
          label={t("form_fields.invoice_number.label")}
          placeholder={t("form_fields.invoice_number.placeholder")}
          description={t("form_fields.invoice_number.description")}
        />
        <TextField
          typePreset='text'
          control={control}
          name='series'
          label={t("form_fields.series.label")}
          placeholder={t("form_fields.series.placeholder")}
          description={t("form_fields.series.description")}
        />

        <Field className='lg:col-span-2 2xl:col-span-1'>
          <DatePickerInputField
            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")}
          />
        </Field>

        <Field className='lg:col-span-2 lg:col-start-1 2xl:col-auto'>
          <DatePickerInputField
            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")}
          />
        </Field>
        <TextField
          typePreset='text'
          maxLength={256}
          className='lg:col-span-2'
          control={control}
          name='description'
          label={t("form_fields.description.label")}
          placeholder={t("form_fields.description.placeholder")}
          description={t("form_fields.description.description")}
        />
        <TextAreaField
          maxLength={1024}
          className='lg:col-span-full'
          control={control}
          name='notes'
          label={t("form_fields.notes.label")}
          placeholder={t("form_fields.notes.placeholder")}
          description={t("form_fields.notes.description")}
        />
      </FieldGroup>
    </Fieldset>
  );
};