75 lines
2.6 KiB
TypeScript
75 lines
2.6 KiB
TypeScript
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>
|
|
);
|
|
}; |