90 lines
2.8 KiB
TypeScript
90 lines
2.8 KiB
TypeScript
|
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-4'>
|
||
|
|
<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
|
||
|
|
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'
|
||
|
|
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}
|
||
|
|
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
|
||
|
|
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
|
||
|
|
className='lg:col-span-2'
|
||
|
|
control={control}
|
||
|
|
name='notes'
|
||
|
|
label={t("form_fields.notes.label")}
|
||
|
|
placeholder={t("form_fields.notes.placeholder")}
|
||
|
|
description={t("form_fields.notes.description")}
|
||
|
|
/>
|
||
|
|
</FieldGroup>
|
||
|
|
</Fieldset>
|
||
|
|
);
|
||
|
|
};
|