100 lines
3.0 KiB
TypeScript
100 lines
3.0 KiB
TypeScript
import {
|
|
DatePickerInputField,
|
|
Description,
|
|
Field,
|
|
FieldGroup,
|
|
Fieldset,
|
|
Legend,
|
|
TextField
|
|
} from "@repo/rdx-ui/components";
|
|
import { FileTextIcon } from "lucide-react";
|
|
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}>
|
|
<Legend className='flex items-center gap-2 text-foreground'>
|
|
<FileTextIcon className='size-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 xl:grid-cols-2'>
|
|
<Field>
|
|
<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")}
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<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 >
|
|
<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>
|
|
|
|
<Field>
|
|
<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>
|
|
|
|
<Field>
|
|
<TextField
|
|
typePreset='text'
|
|
maxLength={256}
|
|
control={control}
|
|
name='reference'
|
|
label={t("form_fields.reference.label")}
|
|
placeholder={t("form_fields.reference.placeholder")}
|
|
description={t("form_fields.reference.description")}
|
|
/>
|
|
</Field>
|
|
|
|
<Field>
|
|
<TextField
|
|
typePreset='text'
|
|
maxLength={256}
|
|
control={control}
|
|
name='description'
|
|
label={t("form_fields.description.label")}
|
|
placeholder={t("form_fields.description.placeholder")}
|
|
description={t("form_fields.description.description")}
|
|
/>
|
|
</Field>
|
|
</FieldGroup>
|
|
</Fieldset>
|
|
);
|
|
};
|