@spaceinvoices/react-ui 0.4.8 → 0.4.11

package/src/components/documents/create/document-items-section.tsx

@@ -5,6 +5,7 @@
 import { PlusIcon, SeparatorHorizontal } from "lucide-react";
 import type { MutableRefObject } from "react";
 import type { UseFormGetValues, UseFormSetValue, UseFormWatch } from "react-hook-form";
+import { useFieldArray } from "react-hook-form";
 import { Button } from "@/ui/components/ui/button";
 import DocumentAddItemForm from "./document-add-item-form";
 import type { AnyControl } from "./form-types";
@@ -12,6 +13,14 @@ import type { AnyControl } from "./form-types";
 /** Map of item index to gross price mode */
 export type PriceModesMap = Record<number, boolean>;
 
+function reindexPriceModes(priceModes: PriceModesMap, nextLength: number): PriceModesMap {
+  const reindexed: PriceModesMap = {};
+  for (let index = 0; index < nextLength; index += 1) {
+    reindexed[index] = priceModes[index] ?? false;
+  }
+  return reindexed;
+}
+
 type DocumentItemsSectionProps = {
   control: AnyControl;
 
@@ -34,6 +43,8 @@ type DocumentItemsSectionProps = {
   priceModesRef?: MutableRefObject<PriceModesMap>;
   /** Initial price modes (from duplicated document) */
   initialPriceModes?: PriceModesMap;
+  /** Called when item ordering or price mode changes outside normal field edits. */
+  onItemsStateChange?: () => void;
 };
 
 export function DocumentItemsSection({
@@ -50,66 +61,85 @@ export function DocumentItemsSection({
   maxTaxesPerItem,
   priceModesRef,
   initialPriceModes = {},
+  onItemsStateChange,
 }: DocumentItemsSectionProps) {
+  const { fields, append, remove, move } = useFieldArray({
+    control: control as any,
+    name: "items",
+  });
+
+  const syncPriceModes = (updater: (current: PriceModesMap) => PriceModesMap) => {
+    if (!priceModesRef) return;
+    priceModesRef.current = updater(priceModesRef.current ?? {});
+  };
+
   const addItem = () => {
-    const currentItems = getValues("items") || [];
-    setValue("items", [
-      ...currentItems,
-      {
-        name: "",
-        description: "",
-        quantity: 1,
-        price: undefined,
-        taxes: [],
-      },
-    ]);
+    append({
+      name: "",
+      description: "",
+      quantity: 1,
+      price: undefined,
+      taxes: [],
+    });
+    syncPriceModes((current) => ({ ...current, [fields.length]: false }));
+    onItemsStateChange?.();
   };
 
   const addSeparator = () => {
-    const currentItems = getValues("items") || [];
-    setValue("items", [
-      ...currentItems,
-      {
-        type: "separator",
-        name: "",
-        description: "",
-      },
-    ]);
+    append({
+      type: "separator",
+      name: "",
+      description: "",
+    });
+    syncPriceModes((current) => ({ ...current, [fields.length]: false }));
+    onItemsStateChange?.();
   };
 
   const removeItem = (index: number) => {
-    const currentItems = getValues("items") || [];
-    setValue(
-      "items",
-      currentItems.filter((_: unknown, i: number) => i !== index),
-    );
+    remove(index);
+    syncPriceModes((current) => {
+      const next: PriceModesMap = {};
+      let nextIndex = 0;
+      for (let currentIndex = 0; currentIndex < fields.length; currentIndex += 1) {
+        if (currentIndex === index) continue;
+        next[nextIndex] = current[currentIndex] ?? false;
+        nextIndex += 1;
+      }
+      return next;
+    });
+    onItemsStateChange?.();
   };
 
   const moveItemUp = (index: number) => {
     if (index === 0) return;
-    const items = getValues("items");
-    const newItems = [...items];
-    [newItems[index], newItems[index - 1]] = [newItems[index - 1], newItems[index]];
-    setValue("items", newItems);
+    move(index, index - 1);
+    syncPriceModes((current) => {
+      const next = reindexPriceModes(current, fields.length);
+      [next[index], next[index - 1]] = [next[index - 1], next[index]];
+      return next;
+    });
+    onItemsStateChange?.();
   };
 
   const moveItemDown = (index: number) => {
-    const items = getValues("items");
-    if (index === items.length - 1) return;
-    const newItems = [...items];
-    [newItems[index], newItems[index + 1]] = [newItems[index + 1], newItems[index]];
-    setValue("items", newItems);
+    if (index === fields.length - 1) return;
+    move(index, index + 1);
+    syncPriceModes((current) => {
+      const next = reindexPriceModes(current, fields.length);
+      [next[index], next[index + 1]] = [next[index + 1], next[index]];
+      return next;
+    });
+    onItemsStateChange?.();
   };
 
-  const items = watch("items") || [];
+  const items = watch("items") || fields;
 
   return (
     <div className="flex flex-col gap-4">
       <h2 className="font-bold text-xl">{t("Items")}</h2>
 
-      {items.map((_: unknown, index: number) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: index is stable
-        <div key={index}>
+      {fields.map((field, index: number) => (
+        <div key={field.id}>
           <DocumentAddItemForm
             form={{ control, watch, setValue, getValues } as any}
             index={index}
@@ -127,11 +157,12 @@ export function DocumentItemsSection({
             taxesDisabled={taxesDisabled}
             taxesDisabledMessage={taxesDisabledMessage}
             maxTaxesPerItem={maxTaxesPerItem}
-            initialIsGrossPrice={initialPriceModes[index] ?? false}
+            initialIsGrossPrice={priceModesRef?.current[index] ?? initialPriceModes[index] ?? false}
             onPriceModeChange={(isGross) => {
               if (priceModesRef) {
                 priceModesRef.current[index] = isGross;
               }
+              onItemsStateChange?.();
             }}
           />
         </div>

package/src/components/documents/create/document-recipient-section.tsx

@@ -47,6 +47,10 @@ export function DocumentRecipientSection({
     control: control as any,
     name: "customer.is_end_consumer" as any,
   });
+  const customerNameController = useController({
+    control: control as any,
+    name: "customer.name" as any,
+  });
 
   useEffect(() => {
     if (showCustomerForm && shouldFocusName) {
@@ -80,16 +84,21 @@ export function DocumentRecipientSection({
         <CustomerAutocomplete
           entityId={entityId}
           value={selectedCustomerId}
+          committedDisplayName={customerNameController.field.value ?? initialCustomerName}
           onValueChange={onCustomerSelect}
+          onCommitInlineName={(nextName) => customerNameController.field.onChange(nextName)}
           onClear={onCustomerClear}
           placeholder={t("Search or create customer...")}
           initialDisplayName={initialCustomerName}
+          inputTestId="document-customer-input"
+          inputRef={nameInputRef}
+          commitOnBlurMode={showCustomerForm ? "update-inline" : "create"}
         />
       </div>
 
       {showCustomerForm && (
         <>
-          <FormInput control={control} name="customer.address" placeholder={t("Address")} label="" ref={nameInputRef} />
+          <FormInput control={control} name="customer.address" placeholder={t("Address")} label="" />
 
           <FormInput control={control} name="customer.address_2" placeholder={t("Address 2")} label="" />
 

package/src/components/documents/create/live-preview.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import type { CreateInvoiceRequest } from "@spaceinvoices/js-sdk";
+import { Loader2 } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { cn } from "@/ui/lib/utils";
 import { useEntities } from "@/ui/providers/entities-context";
@@ -11,6 +12,14 @@ import { useA4Scaling } from "../shared/use-a4-scaling";
 import type { DocumentTypes } from "../types";
 import { filterUnresolvedTaxes } from "./prepare-preview-data";
 
+const LIVE_PREVIEW_TIMING_EVENT = "si:live-preview-timing";
+const LIVE_PREVIEW_DEBOUNCE_MS = 300;
+
+function emitLivePreviewDebug(detail: Record<string, unknown>) {
+  if (!import.meta.env.DEV || typeof window === "undefined") return;
+  window.dispatchEvent(new CustomEvent(LIVE_PREVIEW_TIMING_EVENT, { detail }));
+}
+
 export type PdfTemplateId = "modern" | "classic" | "condensed" | "minimal" | "fashion";
 
 type LiveInvoicePreviewProps = {
@@ -30,6 +39,8 @@ type LiveInvoicePreviewProps = {
   documentTypeLabel?: string;
   /** Document type to determine which render endpoint to use */
   documentType?: DocumentTypes;
+  /** Skip debounce for the first non-empty preview request. */
+  eagerFirstPreview?: boolean;
   /** QR settings overrides for preview (before saving) */
   qrOverrides?: {
     upn_qr_enabled?: boolean;
@@ -45,7 +56,7 @@ type LiveInvoicePreviewProps = {
  * Uses debouncing to avoid excessive API calls and shows loading states.
  *
  * Features:
- * - Debounced API requests (500ms delay after user stops typing)
+ * - Debounced API requests (300ms delay after user stops typing)
  * - Loading skeleton while fetching preview
  * - Error handling with fallback display
  * - Fully styled HTML with scoped CSS (prevents style leakage)
@@ -60,16 +71,20 @@ export function LiveInvoicePreview({
   t: tProp,
   documentTypeLabel: _documentTypeLabel,
   documentType = "invoice",
+  eagerFirstPreview = false,
   qrOverrides,
 }: LiveInvoicePreviewProps) {
   const t = tProp ?? ((key: string) => key);
   const [previewHtml, setPreviewHtml] = useState<string>("");
   const [isLoading, setIsLoading] = useState(false);
+  const [isRefreshPending, setIsRefreshPending] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const { activeEntity } = useEntities();
   const { sdk } = useSDK();
   const abortControllerRef = useRef<AbortController | null>(null);
   const debounceTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const lastRequestKeyRef = useRef<string | null>(null);
+  const hasDispatchedFirstPreviewRef = useRef(false);
 
   const { containerRef, contentRef, scale: dynamicScale, contentHeight, A4_WIDTH_PX } = useA4Scaling(previewHtml);
   const scale = fixedScale ?? dynamicScale;
@@ -82,6 +97,14 @@ export function LiveInvoicePreview({
       // Don't fetch if no items exist (name can be empty for preview)
       if (!invoiceData.items || invoiceData.items.length === 0) {
         setPreviewHtml("");
+        lastRequestKeyRef.current = null;
+        setIsRefreshPending(false);
+        emitLivePreviewDebug({
+          stage: "skipped",
+          reason: "no_items",
+          documentType,
+          itemCount: 0,
+        });
         return;
       }
 
@@ -95,12 +118,14 @@ export function LiveInvoicePreview({
       abortControllerRef.current = abortController;
 
       setIsLoading(true);
+      setIsRefreshPending(false);
       setError(null);
 
       try {
         if (!sdk || !activeEntity?.id) {
           throw new Error("Authentication required");
         }
+        const startedAt = performance.now();
 
         // Prepare preview data with active entity as issuer (if not already set)
         // Exclude 'number' as it's auto-generated by the render endpoint
@@ -122,6 +147,30 @@ export function LiveInvoicePreview({
             ...invoiceData.issuer,
           },
         };
+        const requestKey = JSON.stringify({
+          documentType,
+          template,
+          qrOverrides,
+          entityId: activeEntity.id,
+          previewData,
+        });
+        if (lastRequestKeyRef.current === requestKey) {
+          setIsLoading(false);
+          setIsRefreshPending(false);
+          emitLivePreviewDebug({
+            stage: "deduped",
+            documentType,
+            itemCount: previewData.items?.length ?? 0,
+          });
+          return;
+        }
+        lastRequestKeyRef.current = requestKey;
+        emitLivePreviewDebug({
+          stage: "request_started",
+          documentType,
+          itemCount: previewData.items?.length ?? 0,
+          template,
+        });
 
         // Call the render API using the appropriate SDK method for the document type
         // Don't send locale — let entity locale drive formatting (decimal separators, date format)
@@ -135,7 +184,7 @@ export function LiveInvoicePreview({
         if (qrOverrides?.epc_qr_enabled !== undefined) {
           renderParams.epc_qr_enabled = qrOverrides.epc_qr_enabled ? "true" : "false";
         }
-        const requestOpts = { entity_id: activeEntity.id };
+        const requestOpts = { entity_id: activeEntity.id, signal: abortController.signal };
         let html: string;
         switch (documentType) {
           case "estimate":
@@ -157,19 +206,40 @@ export function LiveInvoicePreview({
 
         setPreviewHtml(html);
         setError(null);
+        emitLivePreviewDebug({
+          stage: "request_succeeded",
+          documentType,
+          itemCount: previewData.items?.length ?? 0,
+          elapsedMs: Number((performance.now() - startedAt).toFixed(1)),
+        });
       } catch (err) {
         // Ignore abort errors (they're expected when user keeps typing)
         if (err instanceof Error && err.name === "AbortError") {
+          emitLivePreviewDebug({
+            stage: "request_aborted",
+            documentType,
+          });
           return;
         }
 
         // Ignore 422 validation errors - expected while user is still filling the form
         if (err instanceof Error && "status" in err && (err as any).status === 422) {
+          emitLivePreviewDebug({
+            stage: "request_validation_error",
+            documentType,
+            status: 422,
+          });
           return;
         }
 
         setError(err instanceof Error ? err.message : "Failed to generate preview");
         setPreviewHtml("");
+        lastRequestKeyRef.current = null;
+        emitLivePreviewDebug({
+          stage: "request_failed",
+          documentType,
+          message: err instanceof Error ? err.message : "Failed to generate preview",
+        });
       } finally {
         // Only set loading to false if this request wasn't aborted
         if (!abortController.signal.aborted) {
@@ -190,6 +260,7 @@ export function LiveInvoicePreview({
       template,
       sdk,
       documentType,
+      qrOverrides,
       qrOverrides?.upn_qr_enabled,
       qrOverrides?.upn_qr_display_mode,
       qrOverrides?.epc_qr_enabled,
@@ -198,7 +269,7 @@ export function LiveInvoicePreview({
 
   /**
    * Debounced preview fetch
-   * Waits 500ms after user stops typing before fetching
+   * Waits briefly after user stops typing before fetching
    */
   useEffect(() => {
     // Clear previous timeout
@@ -206,18 +277,31 @@ export function LiveInvoicePreview({
       clearTimeout(debounceTimeoutRef.current);
     }
 
-    // Set new timeout
-    debounceTimeoutRef.current = setTimeout(() => {
+    const hasItems = !!data.items && data.items.length > 0;
+    const shouldFetchImmediately = eagerFirstPreview && hasItems && !hasDispatchedFirstPreviewRef.current;
+
+    if (shouldFetchImmediately) {
+      setIsRefreshPending(false);
+      hasDispatchedFirstPreviewRef.current = true;
       fetchPreview(data);
-    }, 500);
+    } else {
+      setIsRefreshPending(hasItems);
+      // Set new timeout
+      debounceTimeoutRef.current = setTimeout(() => {
+        setIsRefreshPending(false);
+        hasDispatchedFirstPreviewRef.current = true;
+        fetchPreview(data);
+      }, LIVE_PREVIEW_DEBOUNCE_MS);
+    }
 
     // Cleanup
     return () => {
       if (debounceTimeoutRef.current) {
         clearTimeout(debounceTimeoutRef.current);
       }
+      setIsRefreshPending(false);
     };
-  }, [data, fetchPreview]);
+  }, [data, eagerFirstPreview, fetchPreview]);
 
   /**
    * Cleanup on unmount
@@ -232,10 +316,13 @@ export function LiveInvoicePreview({
       if (debounceTimeoutRef.current) {
         clearTimeout(debounceTimeoutRef.current);
       }
+      setIsRefreshPending(false);
+      lastRequestKeyRef.current = null;
     };
   }, []);
 
   const showSkeleton = (!previewHtml && !error) || (isLoading && !previewHtml);
+  const showRefreshBadge = !!previewHtml && (isRefreshPending || isLoading);
 
   return (
     <div ref={containerRef} className={cn("relative", className)}>
@@ -254,14 +341,25 @@ export function LiveInvoicePreview({
 
       {/* Preview - Scoped HTML injection with A4 scaling */}
       {previewHtml && !error && (
-        <div className={cn(isLoading && "opacity-50 transition-opacity duration-200")}>
-          <ScaledDocumentPreview
-            htmlContent={previewHtml}
-            scale={scale}
-            contentHeight={contentHeight}
-            A4_WIDTH_PX={A4_WIDTH_PX}
-            contentRef={contentRef}
-          />
+        <div className="relative">
+          {showRefreshBadge && (
+            <div className="absolute top-4 right-4 z-20">
+              <div className="inline-flex items-center gap-2 rounded-full border bg-background/95 px-3 py-1.5 text-muted-foreground text-xs shadow-sm">
+                <Loader2 className={cn("size-3.5", (isRefreshPending || isLoading) && "animate-spin")} />
+                <span>{isLoading ? t("Updating preview...") : t("Refreshing preview...")}</span>
+              </div>
+            </div>
+          )}
+          {isLoading && <div className="absolute inset-0 z-10 rounded-lg bg-background/35 backdrop-blur-[1.5px]" />}
+          <div className={cn(isLoading && "opacity-75 transition-opacity duration-200")}>
+            <ScaledDocumentPreview
+              htmlContent={previewHtml}
+              scale={scale}
+              contentHeight={contentHeight}
+              A4_WIDTH_PX={A4_WIDTH_PX}
+              contentRef={contentRef}
+            />
+          </div>
         </div>
       )}
     </div>

package/src/components/documents/create/prepare-document-submission.ts

@@ -73,39 +73,47 @@ export function prepareDocumentSubmission<T extends BaseDocumentValues>(
   values: T,
   options: PrepareDocumentOptions,
 ): any {
+  const nextValues: any = {
+    ...values,
+    customer: values.customer ? { ...values.customer } : values.customer,
+    items: values.items
+      ? values.items.map((item: any) => ({ ...item, taxes: item?.taxes ? [...item.taxes] : item?.taxes }))
+      : values.items,
+  };
+
   // Document numbers are always auto-generated by the server
   // Remove number from payload (even if form provides a preview value)
 
   // Handle customer logic
-  if (values.customer_id && values.customer) {
+  if (nextValues.customer_id && nextValues.customer) {
     // If customer form was not shown, remove customer data (keep only customer_id)
     if (options.wasCustomerFormShown === false) {
-      delete values.customer;
+      delete nextValues.customer;
     } else {
       // Existing customer loaded - check if data was actually modified
       const customerChanged =
-        options.originalCustomer && JSON.stringify(values.customer) !== JSON.stringify(options.originalCustomer);
+        options.originalCustomer && JSON.stringify(nextValues.customer) !== JSON.stringify(options.originalCustomer);
 
       if (!customerChanged) {
         // No changes - send only customer_id
-        delete values.customer;
+        delete nextValues.customer;
       } else {
         // Changes detected - clean null/empty values and send with save_customer flag
         const cleanedCustomer: any = { save_customer: true };
-        for (const [key, value] of Object.entries(values.customer)) {
+        for (const [key, value] of Object.entries(nextValues.customer)) {
           if (key !== "save_customer" && value !== "" && value !== null && value !== undefined) {
             cleanedCustomer[key] = value;
           }
         }
-        values.customer = cleanedCustomer;
+        nextValues.customer = cleanedCustomer;
       }
     }
-  } else if (values.customer) {
+  } else if (nextValues.customer) {
     // New inline customer - clean null/empty values and add save flag
     const cleanedCustomer: any = { save_customer: true };
     let hasAnyValue = false;
 
-    for (const [key, value] of Object.entries(values.customer)) {
+    for (const [key, value] of Object.entries(nextValues.customer)) {
       if (key !== "save_customer" && value !== "" && value !== null && value !== undefined) {
         cleanedCustomer[key] = value;
         hasAnyValue = true;
@@ -113,21 +121,21 @@ export function prepareDocumentSubmission<T extends BaseDocumentValues>(
     }
 
     if (!hasAnyValue) {
-      delete values.customer;
+      delete nextValues.customer;
     } else {
-      values.customer = cleanedCustomer;
+      nextValues.customer = cleanedCustomer;
     }
   }
 
   // Clean up customer_id if empty
-  if (!values.customer_id) {
-    delete values.customer_id;
+  if (!nextValues.customer_id) {
+    delete nextValues.customer_id;
   }
 
   // Clean up taxes and handle gross price transformation
-  if (values.items) {
+  if (nextValues.items) {
     const priceModes = options.priceModes ?? {};
-    values.items = values.items.map((item: any, index: number) => {
+    nextValues.items = nextValues.items.map((item: any, index: number) => {
       // Separator items — pass through with only type, name, description
       if (item.type === "separator") {
         return {
@@ -162,7 +170,7 @@ export function prepareDocumentSubmission<T extends BaseDocumentValues>(
 
   // Build payload with date conversions
   // Destructure to exclude fields we handle explicitly (number is always server-generated)
-  const { number: _number, note, payment_terms, reference, signature, ...restValues } = values as any;
+  const { number: _number, note, payment_terms, reference, signature, ...restValues } = nextValues as any;
   const payload: any = {
     ...restValues,
     ...(note?.trim() && { note: note.trim() }),
@@ -170,7 +178,7 @@ export function prepareDocumentSubmission<T extends BaseDocumentValues>(
     // Advance invoices don't have payment terms - they are documents requesting payment
     ...(options.documentType !== "advance_invoice" && payment_terms?.trim() && { payment_terms: payment_terms.trim() }),
     ...(signature?.trim() && { signature: signature.trim() }),
-    date: values.date ? new Date(values.date) : undefined,
+    date: nextValues.date ? new Date(nextValues.date) : undefined,
   };
 
   // Add secondary date field based on document type
@@ -181,6 +189,17 @@ export function prepareDocumentSubmission<T extends BaseDocumentValues>(
   }
   // Credit notes don't have a secondary date field
 
+  // Add service date fields for invoices and credit notes
+  if (options.documentType === "invoice" || options.documentType === "credit_note") {
+    const v = nextValues as any;
+    if (v.date_service) {
+      payload.date_service = new Date(v.date_service);
+    }
+    if (v.date_service_to) {
+      payload.date_service_to = new Date(v.date_service_to);
+    }
+  }
+
   // Handle markAsPaid for invoices and credit notes
   if (
     options.documentType !== "estimate" &&

package/src/components/documents/create/use-document-customer-form.ts

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import type { FieldValues, Path, PathValue, UseFormReturn } from "react-hook-form";
 
 /**
@@ -67,9 +67,20 @@ export function useDocumentCustomerForm<TForm extends DocumentFormWithCustomer>(
   const [shouldFocusName, setShouldFocusName] = useState(false);
   const [selectedCustomerId, setSelectedCustomerId] = useState<string | undefined>(initialCustomerId);
 
+  useEffect(() => {
+    const defaultCustomerId = form.formState.defaultValues?.customer_id as string | undefined;
+    const defaultCustomer = form.formState.defaultValues?.customer as CustomerData | undefined;
+    const hasDefaultCustomer = !!(defaultCustomerId || defaultCustomer?.name);
+
+    setOriginalCustomer(hasDefaultCustomer && defaultCustomer ? defaultCustomer : null);
+    setSelectedCustomerId(defaultCustomerId);
+    setShowCustomerForm(hasDefaultCustomer);
+    setShouldFocusName(false);
+  }, [form.formState.defaultValues]);
+
   // Type-safe setValue that works with the generic form type
   const setValue = <K extends Path<TForm>>(name: K, value: PathValue<TForm, K>) => {
-    form.setValue(name, value);
+    form.setValue(name, value, { shouldDirty: true, shouldTouch: true });
   };
 
   const handleCustomerSelect = (customerId: string, customer: CustomerData) => {
@@ -158,7 +169,7 @@ export function useDocumentCustomerForm<TForm extends DocumentFormWithCustomer>(
     shouldFocusName,
     selectedCustomerId,
     /** Initial customer name from form defaults (for duplication display) */
-    initialCustomerName: initialCustomer?.name ?? undefined,
+    initialCustomerName: (form.formState.defaultValues?.customer as CustomerData | undefined)?.name ?? undefined,
     handleCustomerSelect,
     handleCustomerClear,
   };

package/src/components/documents/documents.hooks.ts

@@ -26,6 +26,8 @@ type FinalizeDocumentOptions = {
 type FinalizeDocumentVariables = {
   documentId: string;
   documentType: DocumentType;
+  furs?: { business_premise_name: string; electronic_device_name: string } | { skip: true };
+  fina?: { business_premise_name: string; electronic_device_name: string; payment_type?: string };
 };
 
 /**
@@ -37,8 +39,11 @@ export function useFinalizeDocument(options: FinalizeDocumentOptions) {
   const queryClient = useQueryClient();
 
   return useMutation({
-    mutationFn: async ({ documentId, documentType }: FinalizeDocumentVariables) => {
-      return sdk.documents.finalizeDocument(documentId, { type: documentType });
+    mutationFn: async ({ documentId, documentType, furs, fina }: FinalizeDocumentVariables) => {
+      const body: Record<string, unknown> = {};
+      if (furs) body.furs = furs;
+      if (fina) body.fina = fina;
+      return sdk.documents.finalizeDocument(documentId, body, { type: documentType });
     },
     onSuccess: (data, variables) => {
       // Invalidate list cache