@spaceinvoices/react-ui 0.4.11 → 0.4.31

package/src/components/invoices/create/create-invoice-form.tsx

@@ -9,20 +9,32 @@ import { useForm, useWatch } from "react-hook-form";
 import type { z } from "zod";
 import { Alert, AlertDescription, AlertTitle } from "@/ui/components/ui/alert";
 import { Button } from "@/ui/components/ui/button";
-import { Form } from "@/ui/components/ui/form";
+import { Form, FormRoot } from "@/ui/components/ui/form";
 import { Skeleton } from "@/ui/components/ui/skeleton";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/ui/components/ui/tooltip";
 import { createInvoiceSchema } from "@/ui/generated/schemas";
 import { useEslogValidation } from "@/ui/hooks/use-eslog-validation";
 import { usePremiseSelection } from "@/ui/hooks/use-premise-selection";
 import { useTransactionTypeCheck } from "@/ui/hooks/use-transaction-type-check";
-import { buildEslogOptions, buildFinaOptions, buildFursOptions } from "@/ui/lib/fiscalization-options";
+import {
+  buildEslogOptions,
+  buildFinaOptions,
+  buildFursOptions,
+  type FiscalizationOperatorOverride,
+} from "@/ui/lib/fiscalization-options";
+import {
+  normalizePtDocumentInput,
+  type PtDocumentInputForm,
+  ptDocumentInputFormSchema,
+} from "@/ui/lib/pt-document-input";
+import { normalizeLineItemDiscountsForForm } from "@/ui/lib/schemas/shared";
 import type { ComponentTranslationProps } from "@/ui/lib/translation";
 import { createTranslation } from "@/ui/lib/translation";
 import { cn } from "@/ui/lib/utils";
 import { useEntities } from "@/ui/providers/entities-context";
 import { useFormFooterRegistration } from "@/ui/providers/form-footer-context";
 import { CUSTOMERS_CACHE_KEY } from "../../customers/customers.hooks";
+import { withInvoiceIssueDateValidation } from "../../documents/create/document-date-validation";
 import {
   DocumentDetailsSection,
   DocumentFooterField,
@@ -31,13 +43,34 @@ import {
   DocumentSignatureField,
   DocumentTaxClauseField,
 } from "../../documents/create/document-details-section";
+import { withRequiredDocumentItemFields } from "../../documents/create/document-item-validation";
 import { DocumentItemsSection, type PriceModesMap } from "../../documents/create/document-items-section";
 import { DocumentRecipientSection } from "../../documents/create/document-recipient-section";
 import { type LinkedDocumentSummary, LinkedDocumentsInfo } from "../../documents/create/linked-documents-info";
 import { MarkAsPaidSection } from "../../documents/create/mark-as-paid-section";
+import {
+  calculateDocumentTotal,
+  coercePaymentRowsToType,
+  createEmptyPaymentRow,
+  type DraftPaymentRow,
+  getFirstValidPaymentType,
+  serializePaymentRows,
+  validatePaymentRows,
+} from "../../documents/create/payment-rows";
+import { prepareDocumentItems } from "../../documents/create/prepare-document-submission";
+import { applyCustomCreateTemplate } from "../../documents/create/custom-create-template";
+import { financialInputsMatchInitial, resolvePreservedExpectedTotal } from "../../documents/create/preserved-expected-total";
+import { scrollToFirstInvalidField } from "../../documents/create/scroll-to-first-invalid-field";
 import type { DocumentTypes } from "../../documents/types";
-import { useCreateInvoice, useNextInvoiceNumber, useUpdateInvoice } from "../invoices.hooks";
-import { getEntityErrors, getFormFieldErrors, validateEslogForm } from "./eslog-validation";
+import { useCreateCustomInvoice, useCreateInvoice, useNextInvoiceNumber, useUpdateInvoice } from "../invoices.hooks";
+import {
+  buildEslogFieldErrors,
+  getEntityErrors,
+  getFormFieldErrors,
+  mergeFieldErrors,
+  translateEslogValidationError,
+  validateEslogForm,
+} from "./eslog-validation";
 import de from "./locales/de";
 import es from "./locales/es";
 import fr from "./locales/fr";
@@ -47,7 +80,7 @@ import nl from "./locales/nl";
 import pl from "./locales/pl";
 import pt from "./locales/pt";
 import sl from "./locales/sl";
-import { prepareInvoiceSubmission } from "./prepare-invoice-submission";
+import { prepareInvoiceSubmission, prepareInvoiceUpdateSubmission } from "./prepare-invoice-submission";
 import { useInvoiceCustomerForm } from "./use-invoice-customer-form";
 
 function calculateDueDate(dateIso: string, days: number): string {
@@ -56,6 +89,19 @@ function calculateDueDate(dateIso: string, days: number): string {
   return date.toISOString();
 }
 
+function isSameCalendarDate(left: string | Date | undefined, right: string | Date): boolean {
+  if (!left) return false;
+
+  const leftDate = new Date(left);
+  const rightDate = new Date(right);
+
+  return (
+    leftDate.getFullYear() === rightDate.getFullYear() &&
+    leftDate.getMonth() === rightDate.getMonth() &&
+    leftDate.getDate() === rightDate.getDate()
+  );
+}
+
 const DUE_DAYS_PRESETS = [0, 7, 14, 30, 60, 90] as const;
 
 const translations = {
@@ -72,18 +118,26 @@ const translations = {
 
 const DUPLICATE_PREVIEW_SETTLE_MS = 120;
 const DUPLICATE_PREVIEW_MIN_DELAY_MS = 260;
+const FORM_ID = "create-invoice-form";
+const createInvoiceFormSchema = withInvoiceIssueDateValidation(
+  withRequiredDocumentItemFields(
+    createInvoiceSchema.extend({
+      pt: ptDocumentInputFormSchema.optional(),
+    }),
+  ),
+);
 
 function emitInvoiceCreateDebug(_detail: Record<string, unknown>) {
   if (!import.meta.env.DEV || typeof window === "undefined") return;
 }
 
 // Form values: extend schema with local-only fields (number is for display, not sent to API)
-type CreateInvoiceFormValues = z.infer<typeof createInvoiceSchema> & {
+type CreateInvoiceFormValues = z.infer<typeof createInvoiceFormSchema> & {
   number?: string;
 };
 
 /** Preview payload extends request with display-only fields */
-type InvoicePreviewPayload = Partial<CreateInvoiceRequest> & { number?: string };
+type InvoicePreviewPayload = Partial<CreateInvoiceRequest> & { id?: string; number?: string; pt?: PtDocumentInputForm };
 
 type DocumentAddFormProps = {
   type: DocumentTypes;
@@ -103,6 +157,13 @@ type DocumentAddFormProps = {
   mode?: "create" | "edit";
   /** Document ID for edit mode */
   documentId?: string;
+  /** Whether draft actions should be available in the UI */
+  allowDrafts?: boolean;
+  /** Optional app-level content rendered inside the details section. */
+  detailsExtras?: ReactNode;
+  /** Request-scoped operator override for embed fiscalization flows. */
+  operatorPrefill?: FiscalizationOperatorOverride;
+  translationLocale?: string;
 } & ComponentTranslationProps;
 
 function buildInvoiceFormValues({
@@ -111,30 +172,40 @@ function buildInvoiceFormValues({
   defaultInvoiceNote,
   defaultPaymentTerms,
   defaultFooter,
+  defaultSignature,
   defaultInvoiceDueDays,
+  isEditMode,
 }: {
   initialValues?: Partial<CreateInvoiceRequest> & { number?: string };
   currencyCode?: string;
   defaultInvoiceNote: string;
   defaultPaymentTerms: string;
   defaultFooter: string;
+  defaultSignature: string;
   defaultInvoiceDueDays: number;
+  isEditMode: boolean;
 }): CreateInvoiceFormValues {
   return {
     number: initialValues?.number || "",
+    calculation_mode: (initialValues as any)?.calculation_mode ?? undefined,
     date: initialValues?.date || new Date().toISOString(),
     customer_id: initialValues?.customer_id ?? undefined,
     customer: (initialValues?.customer as CreateInvoiceFormValues["customer"]) ?? undefined,
     items: initialValues?.items?.length
       ? initialValues.items.map((item: any) => ({
-          type: item.type,
+          type: item.type ?? undefined,
           name: item.name || "",
           description: item.description || "",
           ...(item.type !== "separator"
             ? {
+                item_id: item.item_id,
+                classification: item.classification ?? undefined,
+                unit: item.unit ?? undefined,
                 quantity: item.quantity ?? 1,
                 price: item.gross_price ?? item.price,
+                gross_price: item.gross_price ?? undefined,
                 taxes: item.taxes || [],
+                discounts: normalizeLineItemDiscountsForForm(item.discounts),
               }
             : {}),
         }))
@@ -149,15 +220,22 @@ function buildInvoiceFormValues({
         ],
     currency_code: initialValues?.currency_code || currencyCode || "EUR",
     reference: (initialValues as any)?.reference ?? "",
-    note: initialValues?.note ?? defaultInvoiceNote,
+    note: initialValues?.note ?? (isEditMode ? "" : defaultInvoiceNote),
     tax_clause: (initialValues as any)?.tax_clause ?? "",
-    payment_terms: initialValues?.payment_terms ?? defaultPaymentTerms,
-    footer: (initialValues as any)?.footer ?? defaultFooter,
+    payment_terms: initialValues?.payment_terms ?? (isEditMode ? "" : defaultPaymentTerms),
+    footer: (initialValues as any)?.footer ?? (isEditMode ? "" : defaultFooter),
+    signature: (initialValues as any)?.signature ?? (isEditMode ? "" : defaultSignature),
     date_due:
       initialValues?.date_due ||
-      calculateDueDate(initialValues?.date || new Date().toISOString(), defaultInvoiceDueDays),
-    date_service: (initialValues as any)?.date_service || new Date().toISOString(),
+      (isEditMode
+        ? undefined
+        : calculateDueDate(initialValues?.date || new Date().toISOString(), defaultInvoiceDueDays)),
+    date_service:
+      (initialValues as any)?.date_service ??
+      (isEditMode ? undefined : (initialValues?.date ?? new Date().toISOString())),
+    date_service_to: (initialValues as any)?.date_service_to ?? undefined,
     linked_documents: (initialValues as any)?.linked_documents,
+    pt: ((initialValues as any)?.pt as PtDocumentInputForm | undefined) ?? undefined,
   };
 }
 
@@ -174,6 +252,10 @@ export default function CreateInvoiceForm({
   forceLinkedDocuments,
   mode = "create",
   documentId,
+  allowDrafts = true,
+  detailsExtras,
+  operatorPrefill,
+  translationLocale,
   t: translateProp,
   namespace,
   locale,
@@ -182,6 +264,7 @@ export default function CreateInvoiceForm({
     t: translateProp,
     namespace,
     locale,
+    translationLocale,
     translations,
   });
 
@@ -193,6 +276,7 @@ export default function CreateInvoiceForm({
   const defaultInvoiceNote = (activeEntity?.settings as any)?.default_invoice_note || "";
   const defaultPaymentTerms = (activeEntity?.settings as any)?.default_invoice_payment_terms || "";
   const defaultFooter = (activeEntity?.settings as any)?.document_footer || "";
+  const defaultSignature = (activeEntity?.settings as any)?.default_document_signature || "";
   const defaultInvoiceDueDays = (activeEntity?.settings as any)?.default_invoice_due_days ?? 30;
 
   // ============================================================================
@@ -206,10 +290,14 @@ export default function CreateInvoiceForm({
   // e-SLOG Validation (shared hook)
   // ============================================================================
   const eslog = useEslogValidation(activeEntity);
+  const eslogValidationModeRef = useRef<"submit" | "draft">("submit");
+  const eslogEntityErrorsRef = useRef(eslog.entityErrors);
+  eslogEntityErrorsRef.current = eslog.entityErrors;
 
   // UI-only state (not part of API schema)
   const [markAsPaid, setMarkAsPaid] = useState(false);
-  const [paymentTypes, setPaymentTypes] = useState<string[]>(["bank_transfer"]);
+  const [paymentRows, setPaymentRows] = useState<DraftPaymentRow[]>([createEmptyPaymentRow()]);
+  const [paymentValidationMessage, setPaymentValidationMessage] = useState<string | undefined>();
   const [isDraftPending, setIsDraftPending] = useState(false);
 
   // Service date type state (single date or range)
@@ -233,6 +321,36 @@ export default function CreateInvoiceForm({
     }, {} as PriceModesMap);
   }, [initialValues?.items]);
   const priceModesRef = useRef<PriceModesMap>(initialPriceModes);
+  const customCreateTemplate = (initialValues as any)?._custom_create_template;
+  const financialInputsMatchSource = useCallback(
+    (values: { items?: any[]; currency_code?: string; calculation_mode?: string | null }) =>
+      financialInputsMatchInitial({
+        initialItems: initialValues?.items,
+        currentItems: values.items,
+        initialCurrencyCode: initialValues?.currency_code,
+        currentCurrencyCode: values.currency_code,
+        initialCalculationMode: (initialValues as any)?.calculation_mode ?? null,
+        currentCalculationMode: values.calculation_mode ?? null,
+        initialPriceModes,
+        currentPriceModes: priceModesRef.current,
+      }),
+    [initialPriceModes, initialValues],
+  );
+  const getPreservedExpectedTotalWithTax = useCallback(
+    (values: { items?: any[]; currency_code?: string; calculation_mode?: string | null }) =>
+      resolvePreservedExpectedTotal({
+        initialExpectedTotalWithTax: (initialValues as any)?._preserved_expected_total_with_tax,
+        initialItems: initialValues?.items,
+        currentItems: values.items,
+        initialCurrencyCode: initialValues?.currency_code,
+        currentCurrencyCode: values.currency_code,
+        initialCalculationMode: (initialValues as any)?.calculation_mode ?? null,
+        currentCalculationMode: values.calculation_mode ?? null,
+        initialPriceModes,
+        currentPriceModes: priceModesRef.current,
+      }),
+    [initialPriceModes, initialValues],
+  );
 
   const formDefaultValues = useMemo(
     () =>
@@ -242,7 +360,9 @@ export default function CreateInvoiceForm({
         defaultInvoiceNote,
         defaultPaymentTerms,
         defaultFooter,
+        defaultSignature,
         defaultInvoiceDueDays,
+        isEditMode,
       }),
     [
       activeEntity?.currency_code,
@@ -250,25 +370,123 @@ export default function CreateInvoiceForm({
       defaultInvoiceDueDays,
       defaultInvoiceNote,
       defaultPaymentTerms,
+      defaultSignature,
       initialValues,
+      isEditMode,
     ],
   );
 
+  const baseResolver = useMemo(() => zodResolver(createInvoiceFormSchema) as Resolver<CreateInvoiceFormValues>, []);
+  const eslogResolverStateRef = useRef({
+    activeEntity,
+    isEnabled: eslog.isEnabled === true,
+    isEditMode,
+    translate: t,
+    setEntityErrors: eslog.setEntityErrors,
+  });
+  eslogResolverStateRef.current = {
+    activeEntity,
+    isEnabled: eslog.isEnabled === true,
+    isEditMode,
+    translate: t,
+    setEntityErrors: eslog.setEntityErrors,
+  };
+  const resolver = useMemo<Resolver<CreateInvoiceFormValues>>(
+    () => async (values, context, options) => {
+      const result = await baseResolver(values, context, options);
+      const resolverState = eslogResolverStateRef.current;
+      const shouldValidateEslog =
+        eslogValidationModeRef.current === "submit" && !resolverState.isEditMode && resolverState.isEnabled;
+
+      if (!shouldValidateEslog) {
+        eslogEntityErrorsRef.current = [];
+        resolverState.setEntityErrors([]);
+        return result;
+      }
+
+      const validationErrors = validateEslogForm(values as any, resolverState.activeEntity);
+      const entityErrors = getEntityErrors(validationErrors);
+      eslogEntityErrorsRef.current = entityErrors;
+      resolverState.setEntityErrors(entityErrors);
+
+      const fieldErrors = getFormFieldErrors(validationErrors);
+      if (fieldErrors.length === 0) {
+        return result;
+      }
+
+      const mergedErrors = mergeFieldErrors(
+        result.errors,
+        buildEslogFieldErrors<CreateInvoiceFormValues>(fieldErrors, resolverState.translate),
+      );
+
+      return {
+        values: {},
+        errors: mergedErrors,
+      };
+    },
+    [baseResolver],
+  );
+
   const form = useForm<CreateInvoiceFormValues>({
-    // Cast resolver to accept extended form type (includes UI-only fields)
-    resolver: zodResolver(createInvoiceSchema) as Resolver<CreateInvoiceFormValues>,
+    resolver,
     defaultValues: formDefaultValues,
   });
 
-  // Skip fiscalization is only allowed for bank transfers or unpaid invoices
-  const canSkipFiscalization = !markAsPaid || paymentTypes.every((type) => type === "bank_transfer");
+  const watchedItems = useWatch({ control: form.control, name: "items" });
+  const paymentDocumentTotal = useMemo(
+    () => calculateDocumentTotal((watchedItems as any[]) ?? [], priceModesRef.current),
+    [watchedItems],
+  );
+  const hasExplicitNonBankTransferPayment =
+    markAsPaid && paymentRows.some((row) => row.type != null && row.type !== "bank_transfer");
+  const skipPreferenceInitializedRef = useRef(false);
+  const skipPaymentCoercionPendingRef = useRef(false);
+  const previousSkipFiscalizationRef = useRef(skipFiscalization);
+  const previousMarkAsPaidRef = useRef(markAsPaid);
+
+  useEffect(() => {
+    if (skipPreferenceInitializedRef.current || furs.isLoading || isEditMode) return;
+
+    skipPreferenceInitializedRef.current = true;
+    if (furs.settings?.default_skip_fiscalization === true) {
+      setSkipFiscalization(true);
+    }
+  }, [furs.isLoading, furs.settings?.default_skip_fiscalization, isEditMode]);
 
-  // Auto-disable skip when it becomes invalid (e.g., user changes payment type to cash)
   useEffect(() => {
-    if (!canSkipFiscalization && skipFiscalization) {
+    const skipJustEnabled = skipFiscalization && !previousSkipFiscalizationRef.current;
+    const paidJustEnabled = markAsPaid && !previousMarkAsPaidRef.current;
+
+    if (skipFiscalization && markAsPaid && (skipJustEnabled || paidJustEnabled)) {
+      const nextPaymentRows = coercePaymentRowsToType(paymentRows, "bank_transfer");
+      const hasChanged = nextPaymentRows.some((row, index) => row.type !== paymentRows[index]?.type);
+
+      if (hasChanged) {
+        skipPaymentCoercionPendingRef.current = true;
+        setPaymentRows(nextPaymentRows);
+      }
+    }
+
+    previousSkipFiscalizationRef.current = skipFiscalization;
+    previousMarkAsPaidRef.current = markAsPaid;
+  }, [markAsPaid, paymentRows, skipFiscalization]);
+
+  // Auto-disable skip when the user explicitly changes payment away from bank transfer.
+  useEffect(() => {
+    if (skipPaymentCoercionPendingRef.current) return;
+
+    if (hasExplicitNonBankTransferPayment && skipFiscalization) {
       setSkipFiscalization(false);
     }
-  }, [canSkipFiscalization, skipFiscalization]);
+  }, [hasExplicitNonBankTransferPayment, skipFiscalization]);
+
+  useEffect(() => {
+    if (!skipPaymentCoercionPendingRef.current) return;
+
+    if (!markAsPaid || paymentRows.every((row) => row.type === "bank_transfer")) {
+      skipPaymentCoercionPendingRef.current = false;
+    }
+  }, [markAsPaid, paymentRows]);
 
   // Clear date_service_to when switching from range to single
   useEffect(() => {
@@ -323,6 +541,10 @@ export default function CreateInvoiceForm({
   const useFinaNumbering =
     !!fina.isActive && (finaUnifiedNumbering || transactionType == null || transactionType === "domestic");
   const isFinaNonDomestic = !!fina.isActive && !useFinaNumbering;
+  const isFiscalizationDateLocked = !isEditMode && (isFursActive || useFinaNumbering);
+  const fiscalizationDateLockReason = useFinaNumbering
+    ? t("FINA fiscalized invoices always use the current date")
+    : t("FURS fiscalized invoices always use the current date");
 
   // ============================================================================
   // Next Invoice Number Preview
@@ -354,22 +576,42 @@ export default function CreateInvoiceForm({
     : furs.isLoading || !furs.isSelectionReady || fina.isLoading || !fina.isSelectionReady || isNextNumberLoading;
 
   // Update header action with FURS and e-SLOG toggle buttons
+  const headerActionSignatureRef = useRef<string | null>(null);
   useEffect(() => {
     if (!onHeaderActionChange) return;
 
     // Don't set header action while loading or in edit mode (FURS/FINA/e-SLOG not editable)
     if (furs.isLoading || fina.isLoading || isEditMode) {
+      if (headerActionSignatureRef.current === null) return;
+      headerActionSignatureRef.current = null;
       onHeaderActionChange(null);
       return;
     }
 
     const showFursToggle = furs.isEnabled && furs.hasPremises;
     const showEslogToggle = eslog.isAvailable;
+    const isFursChecked = !skipFiscalization;
+    const isEslogChecked = eslog.isEnabled === true;
+    const headerActionSignature =
+      showFursToggle || showEslogToggle
+        ? JSON.stringify({
+            showFursToggle,
+            showEslogToggle,
+            isFursChecked,
+            isEslogChecked,
+            eslogLabel: t("e-SLOG"),
+            eslogEnabledDescription: t("Click to skip e-SLOG validation for this invoice"),
+            eslogDisabledDescription: t("Click to enable e-SLOG validation"),
+            fiscalizationLabel: t("Fiscally verify"),
+            fiscalizationEnabledDescription: t("Click to skip fiscalization for this invoice"),
+            fiscalizationDisabledDescription: t("Click to enable fiscalization"),
+          })
+        : null;
+
+    if (headerActionSignatureRef.current === headerActionSignature) return;
+    headerActionSignatureRef.current = headerActionSignature;
 
     if (showFursToggle || showEslogToggle) {
-      const isFursChecked = !skipFiscalization;
-      const isEslogChecked = eslog.isEnabled === true;
-
       onHeaderActionChange(
         <div className="flex items-center gap-2">
           {/* e-SLOG toggle */}
@@ -417,10 +659,9 @@ export default function CreateInvoiceForm({
                     size="sm"
                     className={cn(
                       "h-8 cursor-pointer gap-2",
-                      !canSkipFiscalization && "cursor-not-allowed opacity-50",
                       !isFursChecked && "text-destructive hover:text-destructive",
                     )}
-                    onClick={() => canSkipFiscalization && setSkipFiscalization(!skipFiscalization)}
+                    onClick={() => setSkipFiscalization(!skipFiscalization)}
                   >
                     <div
                       className={cn(
@@ -436,11 +677,9 @@ export default function CreateInvoiceForm({
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent side="bottom" className="max-w-xs">
-                  {canSkipFiscalization
-                    ? isFursChecked
-                      ? t("Click to skip fiscalization for this invoice")
-                      : t("Click to enable fiscalization")
-                    : t("Cannot skip fiscalization for cash payments")}
+                  {isFursChecked
+                    ? t("Click to skip fiscalization for this invoice")
+                    : t("Click to enable fiscalization")}
                 </TooltipContent>
               </Tooltip>
             </TooltipProvider>
@@ -456,7 +695,6 @@ export default function CreateInvoiceForm({
     furs.isEnabled,
     furs.hasPremises,
     skipFiscalization,
-    canSkipFiscalization,
     eslog.isAvailable,
     eslog.isEnabled,
     eslog.setEnabled,
@@ -472,12 +710,67 @@ export default function CreateInvoiceForm({
     }
   }, [nextNumberData?.number, form]);
 
+  useEffect(() => {
+    if (!isFiscalizationDateLocked) return;
+
+    const today = new Date();
+    if (isSameCalendarDate(form.getValues("date"), today)) return;
+
+    form.setValue("date", today.toISOString(), {
+      shouldDirty: true,
+      shouldTouch: false,
+      shouldValidate: true,
+    });
+  }, [form, isFiscalizationDateLocked]);
+
   // Watch fields needed for document note/payment terms preview
   const watchedNumber = useWatch({ control: form.control, name: "number" });
   const watchedDate = useWatch({ control: form.control, name: "date" });
   const watchedDateDue = useWatch({ control: form.control, name: "date_due" });
   const watchedCurrencyCode = useWatch({ control: form.control, name: "currency_code" });
   const watchedCustomer = useWatch({ control: form.control, name: "customer" });
+  const watchedValidationSnapshot = useMemo(
+    () =>
+      JSON.stringify({
+        date: watchedDate,
+        date_due: watchedDateDue,
+        currency_code: watchedCurrencyCode,
+        customer: watchedCustomer,
+        items: watchedItems,
+      }),
+    [watchedCurrencyCode, watchedCustomer, watchedDate, watchedDateDue, watchedItems],
+  );
+  const lastRevalidatedSnapshotRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!form.formState.isSubmitted || form.formState.isSubmitting) {
+      return;
+    }
+
+    const hasErrors = Object.keys(form.formState.errors).length > 0 || eslog.entityErrors.length > 0;
+    if (!hasErrors) {
+      lastRevalidatedSnapshotRef.current = watchedValidationSnapshot;
+      return;
+    }
+
+    if (lastRevalidatedSnapshotRef.current === watchedValidationSnapshot) {
+      return;
+    }
+
+    lastRevalidatedSnapshotRef.current = watchedValidationSnapshot;
+    const timeoutId = window.setTimeout(() => {
+      void form.trigger();
+    }, 0);
+
+    return () => window.clearTimeout(timeoutId);
+  }, [
+    eslog.entityErrors.length,
+    form,
+    form.formState.errors,
+    form.formState.isSubmitted,
+    form.formState.isSubmitting,
+    watchedValidationSnapshot,
+  ]);
 
   // Croatian invoice validation:
   // - Domestic/3w B2C requires FINA
@@ -522,16 +815,23 @@ export default function CreateInvoiceForm({
   // Auto-populate tax_clause from entity settings when transaction type changes
   const effectiveTransactionType = transactionType ?? "domestic";
   const prevTransactionTypeRef = useRef<string | undefined>(undefined);
+  const prevTaxClauseHydrationVersionRef = useRef<number | undefined>(undefined);
+  const [taxClauseHydrationVersion, setTaxClauseHydrationVersion] = useState(0);
   useEffect(() => {
-    if (effectiveTransactionType === prevTransactionTypeRef.current) return;
+    if (isEditMode) return;
+    const transactionTypeChanged = effectiveTransactionType !== prevTransactionTypeRef.current;
+    const hydrationVersionChanged = taxClauseHydrationVersion !== prevTaxClauseHydrationVersionRef.current;
+    if (!transactionTypeChanged && !hydrationVersionChanged) return;
+
     prevTransactionTypeRef.current = effectiveTransactionType;
+    prevTaxClauseHydrationVersionRef.current = taxClauseHydrationVersion;
 
     const taxClauseDefaults = (activeEntity?.settings as any)?.tax_clause_defaults;
     if (!taxClauseDefaults) return;
 
     const clause = taxClauseDefaults[effectiveTransactionType] ?? "";
     form.setValue("tax_clause", clause);
-  }, [effectiveTransactionType, activeEntity, form]);
+  }, [activeEntity, effectiveTransactionType, form, isEditMode, taxClauseHydrationVersion]);
 
   // Extract customer management logic into a custom hook
   const {
@@ -560,6 +860,19 @@ export default function CreateInvoiceForm({
     onError,
   });
 
+  const { mutate: createCustomInvoice, isPending: isCreateCustomPending } = useCreateCustomInvoice({
+    entityId,
+    onSuccess: (data) => {
+      furs.saveCombo();
+      fina.saveCombo();
+      if (data.customer_id) {
+        queryClient.invalidateQueries({ queryKey: [CUSTOMERS_CACHE_KEY] });
+      }
+      onSuccess?.(data);
+    },
+    onError,
+  });
+
   const { mutate: updateInvoice, isPending: isUpdatePending } = useUpdateInvoice({
     entityId,
     onSuccess: (data) => {
@@ -574,7 +887,7 @@ export default function CreateInvoiceForm({
     onError,
   });
 
-  const isPending = isCreatePending || isUpdatePending;
+  const isPending = isCreatePending || isCreateCustomPending || isUpdatePending;
 
   // Shared submit logic for both regular save and save as draft
   const submitInvoice = useCallback(
@@ -582,23 +895,8 @@ export default function CreateInvoiceForm({
       // Block Croatian domestic B2B and domestic B2C without FINA
       if (finaValidationError) return;
 
-      // Skip e-SLOG validation for drafts and edit mode
-      if (!isDraft && !isEditMode && eslog.isEnabled) {
-        const validationErrors = validateEslogForm(values as any, activeEntity);
-
-        if (validationErrors.length > 0) {
-          const entityErrors = getEntityErrors(validationErrors);
-          const formErrors = getFormFieldErrors(validationErrors);
-          eslog.setEntityErrors(entityErrors);
-          for (const error of formErrors) {
-            form.setError(error.field as any, {
-              type: "eslog",
-              message: error.message,
-            });
-          }
-          return;
-        }
-        eslog.setEntityErrors([]);
+      if (!isDraft && !isEditMode && eslog.isEnabled && eslogEntityErrorsRef.current.length > 0) {
+        return;
       }
 
       // Build FURS options (skip for drafts and edit mode)
@@ -609,6 +907,7 @@ export default function CreateInvoiceForm({
         skipFiscalization,
         premiseName: furs.selectedPremiseName,
         deviceName: furs.selectedDeviceName,
+        operator: operatorPrefill,
       });
 
       // Build FINA options (skip for drafts, edit mode, and non-domestic transactions)
@@ -618,7 +917,8 @@ export default function CreateInvoiceForm({
         isEditMode,
         premiseName: fina.selectedPremiseName,
         deviceName: fina.selectedDeviceName,
-        paymentType: paymentTypes[0],
+        paymentType: getFirstValidPaymentType(paymentRows),
+        operator: operatorPrefill,
       });
 
       // Build e-SLOG options (skip for drafts and edit mode)
@@ -629,50 +929,83 @@ export default function CreateInvoiceForm({
         isEnabled: eslog.isEnabled,
       });
 
-      const payload = prepareInvoiceSubmission(values as any, {
-        originalCustomer,
-        wasCustomerFormShown: showCustomerForm,
-        markAsPaid: isDraft || isEditMode ? false : markAsPaid,
-        paymentTypes,
-        furs: fursOptions,
-        fina: finaOptions,
-        eslog: eslogOptions,
-        priceModes: priceModesRef.current,
-        isDraft,
-      });
+      if (!isDraft && !isEditMode && markAsPaid) {
+        const paymentValidation = validatePaymentRows(paymentRows, paymentDocumentTotal, "partial_allowed");
+        const paymentMessage =
+          paymentValidation.typeError ?? paymentValidation.amountError ?? paymentValidation.totalError;
 
-      // Add force_linked_documents if set (used after conflict dialog approval)
-      if (forceLinkedDocuments) {
-        (payload as any).force_linked_documents = true;
+        if (paymentMessage) {
+          setPaymentValidationMessage(paymentMessage);
+          return;
+        }
       }
 
       if (isEditMode && documentId) {
-        // In edit mode, use updateInvoice
-        // Remove number from payload as it's not editable
-        const { number: _number, ...updatePayload } = payload as any;
+        const updatePayload = prepareInvoiceUpdateSubmission(values as any, {
+          originalCustomer,
+          wasCustomerFormShown: showCustomerForm,
+          eslog: eslogOptions,
+          priceModes: priceModesRef.current,
+        }) as any;
+
+        if (forceLinkedDocuments) {
+          updatePayload.force_linked_documents = true;
+        }
+
         updateInvoice({ id: documentId, data: updatePayload });
       } else {
-        createInvoice(payload);
+        const payload = prepareInvoiceSubmission(values as any, {
+          originalCustomer,
+          wasCustomerFormShown: showCustomerForm,
+          markAsPaid: isDraft ? false : markAsPaid,
+          payments: serializePaymentRows(paymentRows, paymentDocumentTotal),
+          furs: fursOptions,
+          fina: finaOptions,
+          eslog: eslogOptions,
+          priceModes: priceModesRef.current,
+          isDraft,
+        });
+        const preservedExpectedTotalWithTax = getPreservedExpectedTotalWithTax(values);
+        if (preservedExpectedTotalWithTax !== undefined) {
+          (payload as any).expected_total_with_tax = preservedExpectedTotalWithTax;
+        } else {
+          delete (payload as any).expected_total_with_tax;
+        }
+
+        if (forceLinkedDocuments) {
+          (payload as any).force_linked_documents = true;
+        }
+
+        if (customCreateTemplate && financialInputsMatchSource(values)) {
+          delete (payload as any).expected_total_with_tax;
+          createCustomInvoice(applyCustomCreateTemplate(payload as any, customCreateTemplate));
+        } else {
+          createInvoice(payload);
+        }
       }
     },
     [
-      activeEntity,
       createInvoice,
+      createCustomInvoice,
       updateInvoice,
+      customCreateTemplate,
       documentId,
       eslog,
       finaValidationError,
       fina,
       forceLinkedDocuments,
-      form,
       furs,
       isEditMode,
       useFinaNumbering,
       markAsPaid,
       originalCustomer,
-      paymentTypes,
+      paymentDocumentTotal,
+      paymentRows,
       showCustomerForm,
       skipFiscalization,
+      operatorPrefill,
+      financialInputsMatchSource,
+      getPreservedExpectedTotalWithTax,
     ],
   );
 
@@ -680,12 +1013,16 @@ export default function CreateInvoiceForm({
   const handleSaveAsDraft = useCallback(async () => {
     setIsDraftPending(true);
     try {
+      eslogValidationModeRef.current = "draft";
       const isValid = await form.trigger();
       if (isValid) {
         const values = form.getValues();
         submitInvoice(values, true);
+      } else {
+        scrollToFirstInvalidField(FORM_ID);
       }
     } finally {
+      eslogValidationModeRef.current = "submit";
       setIsDraftPending(false);
     }
   }, [form, submitInvoice]);
@@ -696,14 +1033,14 @@ export default function CreateInvoiceForm({
   const saveLabel = isEditMode ? t("Update") : t("Save");
   const secondaryAction = useMemo(
     () =>
-      isEditMode
+      isEditMode || !allowDrafts
         ? undefined
         : {
             label: draftLabel,
             onClick: handleSaveAsDraft,
             isPending: isDraftPending,
           },
-    [draftLabel, handleSaveAsDraft, isDraftPending, isEditMode],
+    [allowDrafts, draftLabel, handleSaveAsDraft, isDraftPending, isEditMode],
   );
 
   // Watch isDirty to get stable reference
@@ -721,6 +1058,7 @@ export default function CreateInvoiceForm({
   // Track if initial setup has been done
   const initialSetupDoneRef = useRef(false);
   const hasInitialValues = !!initialValues;
+  const hasInitialDueDate = !!initialValues?.date_due;
   const duplicateHydrationStartedAtRef = useRef<number | null>(hasInitialValues ? performance.now() : null);
   const duplicateHydrationLoggedRef = useRef(false);
   const appliedInitialValuesSignatureRef = useRef<string | null>(null);
@@ -736,6 +1074,7 @@ export default function CreateInvoiceForm({
     duplicateHydrationStartedAtRef.current = performance.now();
     duplicateHydrationLoggedRef.current = false;
     form.reset(formDefaultValues);
+    setTaxClauseHydrationVersion((currentVersion) => currentVersion + 1);
     priceModesRef.current = initialPriceModes;
   }, [form, formDefaultValues, hasInitialValues, initialPriceModes]);
 
@@ -745,6 +1084,26 @@ export default function CreateInvoiceForm({
     if (initialSetupDoneRef.current) return;
     if (!activeEntity) return;
 
+    if (isEditMode) {
+      if (activeEntity.is_tax_subject) {
+        const items = form.getValues("items") || [];
+        if (items.length > 0 && (!items[0].taxes || items[0].taxes.length === 0)) {
+          form.setValue("items.0.taxes", [{ tax_id: undefined }]);
+        }
+      }
+
+      initialSetupDoneRef.current = true;
+      if (hasInitialValues && duplicateHydrationStartedAtRef.current && !duplicateHydrationLoggedRef.current) {
+        duplicateHydrationLoggedRef.current = true;
+        emitInvoiceCreateDebug({
+          stage: "entity_defaults_applied",
+          hasInitialValues: true,
+          elapsedMs: Number((performance.now() - duplicateHydrationStartedAtRef.current).toFixed(1)),
+        });
+      }
+      return;
+    }
+
     const entityDefaultNote = (activeEntity.settings as any)?.default_invoice_note;
     if (entityDefaultNote && !form.getValues("note")) {
       form.setValue("note", entityDefaultNote);
@@ -757,13 +1116,12 @@ export default function CreateInvoiceForm({
     if (entityDefaultFooter && !form.getValues("footer")) {
       form.setValue("footer", entityDefaultFooter);
     }
-    const entityDefaultSignature = (activeEntity.settings as any)?.default_document_signature;
-    if (entityDefaultSignature && !form.getValues("signature")) {
-      form.setValue("signature", entityDefaultSignature);
+    if (defaultSignature && !form.getValues("signature")) {
+      form.setValue("signature", defaultSignature);
     }
 
     // Auto-populate due date and due days type from entity settings when entity loads async
-    if (!isEditMode && !initialValues?.date_due) {
+    if (!isEditMode && !hasInitialDueDate) {
       const dueDays = (activeEntity.settings as any)?.default_invoice_due_days ?? 30;
       const currentDate = form.getValues("date");
       if (currentDate) {
@@ -789,7 +1147,7 @@ export default function CreateInvoiceForm({
         elapsedMs: Number((performance.now() - duplicateHydrationStartedAtRef.current).toFixed(1)),
       });
     }
-  }, [activeEntity, form, hasInitialValues, isEditMode, initialValues]);
+  }, [activeEntity, defaultSignature, form, hasInitialDueDate, hasInitialValues, initialValues, isEditMode]);
 
   // Recalculate due date when document date changes (skip in edit mode and custom due days)
   const prevDateRef = useRef(form.getValues("date"));
@@ -820,28 +1178,38 @@ export default function CreateInvoiceForm({
     }
   }, [hasInitialValues]);
 
-  const buildPreviewPayload = useCallback((formValues: any): InvoicePreviewPayload => {
-    const currentItems = formValues.items || [];
-    const transformedItems = currentItems.map((item: any, index: number) => {
-      const { price, ...rest } = item;
-      const isGross = priceModesRef.current[index] ?? false;
-      return isGross ? { ...rest, gross_price: price } : { ...rest, price };
-    });
-    return {
-      number: formValues.number,
-      date: formValues.date,
-      date_service: formValues.date_service,
-      date_service_to: formValues.date_service_to,
-      customer_id: formValues.customer_id,
-      customer: formValues.customer,
-      items: transformedItems,
-      currency_code: formValues.currency_code,
-      reference: formValues.reference,
-      note: formValues.note,
-      payment_terms: formValues.payment_terms,
-      signature: formValues.signature,
-    };
-  }, []);
+  const buildPreviewPayload = useCallback(
+    (formValues: any): InvoicePreviewPayload => {
+      const preservedExpectedTotalWithTax = getPreservedExpectedTotalWithTax(formValues);
+      const previewItems = formValues.items?.map((item: any) => {
+        const { id: _id, ...rest } = item;
+        return rest;
+      });
+      return {
+        number: formValues.number,
+        date: formValues.date,
+        date_service: formValues.date_service,
+        date_service_to: formValues.date_service_to,
+        customer_id: formValues.customer_id,
+        customer: formValues.customer,
+        items: prepareDocumentItems(previewItems, priceModesRef.current),
+        currency_code: formValues.currency_code,
+        linked_documents: formValues.linked_documents,
+        ...(forceLinkedDocuments ? { force_linked_documents: true } : {}),
+        reference: formValues.reference,
+        note: formValues.note,
+        payment_terms: formValues.payment_terms,
+        tax_clause: formValues.tax_clause,
+        footer: formValues.footer,
+        signature: formValues.signature,
+        ...(preservedExpectedTotalWithTax !== undefined
+          ? { expected_total_with_tax: preservedExpectedTotalWithTax }
+          : {}),
+        ...(normalizePtDocumentInput(formValues.pt) ? { pt: normalizePtDocumentInput(formValues.pt) } : {}),
+      };
+    },
+    [forceLinkedDocuments, getPreservedExpectedTotalWithTax],
+  );
 
   const emitCurrentPreviewPayload = useCallback(() => {
     if (!onChange) return;
@@ -927,7 +1295,7 @@ export default function CreateInvoiceForm({
     return (
       <div className="space-y-8">
         {/* Recipient + Details columns */}
-        <div className="flex w-full flex-col md:flex-row md:gap-6">
+        <div className="flex w-full flex-col gap-8 md:flex-row md:gap-6">
           {/* Recipient section skeleton */}
           <div className="flex-1 space-y-4">
             <Skeleton className="h-7 w-24" />
@@ -989,10 +1357,10 @@ export default function CreateInvoiceForm({
 
   return (
     <Form {...form}>
-      <form id="create-invoice-form" onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+      <FormRoot id={FORM_ID} onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
         {/* Croatian domestic invoice validation errors */}
         {finaValidationError && (
-          <Alert variant="destructive">
+          <Alert variant="destructive" data-form-error-summary="true">
             <AlertCircle className="h-4 w-4" />
             <AlertTitle>{finaValidationError}</AlertTitle>
           </Alert>
@@ -1000,7 +1368,7 @@ export default function CreateInvoiceForm({
 
         {/* e-SLOG entity-level validation errors */}
         {eslog.entityErrors.length > 0 && (
-          <Alert variant="destructive">
+          <Alert variant="destructive" data-form-error-summary="true">
             <AlertCircle className="h-4 w-4" />
             <AlertTitle>{t("e-SLOG Validation Failed")}</AlertTitle>
             <AlertDescription>
@@ -1008,7 +1376,7 @@ export default function CreateInvoiceForm({
               <ul className="list-disc space-y-1 pl-4">
                 {eslog.entityErrors.map((error) => (
                   <li key={error.field} className="text-sm">
-                    {error.message}
+                    {translateEslogValidationError(error, t)}
                   </li>
                 ))}
               </ul>
@@ -1028,11 +1396,13 @@ export default function CreateInvoiceForm({
             initialCustomerName={initialCustomerName}
             showEndConsumerToggle={isCroatianEntity && (isDomesticTransaction || is3wTransaction)}
             t={t}
+            locale={locale}
           />
           <DocumentDetailsSection
             control={form.control}
             documentType={_type}
             t={t}
+            locale={locale}
             fursInline={
               // Hide FURS selector in edit mode - fiscalization is set at creation only
               !isEditMode && furs.isEnabled && furs.hasPremises
@@ -1079,31 +1449,49 @@ export default function CreateInvoiceForm({
               dueDaysType,
               onDueDaysTypeChange: handleDueDaysTypeChange,
             }}
+            dateLock={{
+              isLocked: isFiscalizationDateLocked,
+              reason: fiscalizationDateLockReason,
+            }}
           >
             {/* Invoice-specific: Mark as paid section (UI-only state, not in form schema) */}
             {/* Hide in edit mode - payments are managed separately */}
             {!isEditMode && (
               <MarkAsPaidSection
                 checked={markAsPaid}
-                onCheckedChange={setMarkAsPaid}
-                paymentTypes={paymentTypes}
-                onPaymentTypesChange={setPaymentTypes}
+                onCheckedChange={(checked) => {
+                  setMarkAsPaid(checked);
+                  setPaymentValidationMessage(undefined);
+                }}
+                paymentRows={paymentRows}
+                onPaymentRowsChange={(rows) => {
+                  setPaymentRows(rows);
+                  setPaymentValidationMessage(undefined);
+                }}
+                documentTotal={paymentDocumentTotal}
                 t={t}
                 alwaysShowPaymentType={!!fina.isActive && requiresFinaFiscalization}
+                validationMessage={paymentValidationMessage}
               />
             )}
+            {detailsExtras}
           </DocumentDetailsSection>
         </div>
 
         <DocumentItemsSection
           control={form.control}
+          documentType={_type}
           watch={form.watch}
           setValue={form.setValue}
+          clearErrors={form.clearErrors}
+          trigger={form.trigger}
+          isSubmitted={form.formState.isSubmitted}
           getValues={form.getValues}
           entityId={entityId}
           currencyCode={activeEntity?.currency_code ?? undefined}
           onAddNewTax={onAddNewTax}
           t={t}
+          locale={locale}
           taxesDisabled={reverseChargeApplies}
           taxesDisabledMessage={
             reverseChargeApplies ? t("Reverse charge - tax exempt EU B2B sale") : viesWarning ? viesWarning : undefined
@@ -1185,7 +1573,7 @@ export default function CreateInvoiceForm({
         {sourceDocuments && sourceDocuments.length > 0 && (
           <LinkedDocumentsInfo documents={sourceDocuments} locale={locale || "en"} t={t} />
         )}
-      </form>
+      </FormRoot>
     </Form>
   );
 }