@spaceinvoices/react-ui 0.4.5 → 0.4.7

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

@@ -13,7 +13,7 @@ import { Form } 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 { useViesCheck } from "@/ui/hooks/use-vies-check";
+import { useTransactionTypeCheck } from "@/ui/hooks/use-transaction-type-check";
 import type { ComponentTranslationProps } from "@/ui/lib/translation";
 import { createTranslation } from "@/ui/lib/translation";
 import { cn } from "@/ui/lib/utils";
@@ -22,8 +22,10 @@ import { useFormFooterRegistration } from "@/ui/providers/form-footer-context";
 import { CUSTOMERS_CACHE_KEY } from "../../customers/customers.hooks";
 import {
   DocumentDetailsSection,
+  DocumentFooterField,
   DocumentNoteField,
   DocumentPaymentTermsField,
+  DocumentSignatureField,
   DocumentTaxClauseField,
 } from "../../documents/create/document-details-section";
 import { DocumentItemsSection, type PriceModesMap } from "../../documents/create/document-items-section";
@@ -61,6 +63,8 @@ function calculateDueDate(dateIso: string, days: number): string {
   return date.toISOString();
 }
 
+const DUE_DAYS_PRESETS = [0, 7, 14, 30, 60, 90] as const;
+
 const translations = {
   sl,
   de,
@@ -132,6 +136,7 @@ export default function CreateInvoiceForm({
   // Get default invoice note and payment terms from entity settings
   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 defaultInvoiceDueDays = (activeEntity?.settings as any)?.default_invoice_due_days ?? 30;
 
   // ============================================================================
@@ -169,8 +174,8 @@ export default function CreateInvoiceForm({
   const hasFinaPremises = activeFinaPremises.length > 0;
 
   // FINA premise/device selection state (no skip - all FINA invoices must be fiscalized)
-  const [selectedFinaPremiseId, setSelectedFinaPremiseId] = useState<string | undefined>();
-  const [selectedFinaDeviceId, setSelectedFinaDeviceId] = useState<string | undefined>();
+  const [selectedFinaBusinessPremiseName, setSelectedFinaBusinessPremiseName] = useState<string | undefined>();
+  const [selectedFinaElectronicDeviceName, setSelectedFinaElectronicDeviceName] = useState<string | undefined>();
 
   // UI-only state (not part of API schema)
   const [markAsPaid, setMarkAsPaid] = useState(false);
@@ -180,6 +185,12 @@ export default function CreateInvoiceForm({
   // Service date type state (single date or range)
   const [serviceDateType, setServiceDateType] = useState<"single" | "range">("single");
 
+  // Due days type state for invoice due date selector
+  const [dueDaysType, setDueDaysType] = useState<number | "custom">(() => {
+    if (mode === "edit" || initialValues?.date_due) return "custom";
+    return (DUE_DAYS_PRESETS as readonly number[]).includes(defaultInvoiceDueDays) ? defaultInvoiceDueDays : "custom";
+  });
+
   // Price modes per item (gross vs net) - collected from component state at submit
   // Initialize from initialValues for duplicated documents
   const initialPriceModes = useMemo(() => {
@@ -269,22 +280,24 @@ export default function CreateInvoiceForm({
 
   // Get active FINA devices for selected premise
   const activeFinaDevices = useMemo(() => {
-    if (!selectedFinaPremiseId) return [];
-    const premise = activeFinaPremises.find((p: any) => p.premise_id === selectedFinaPremiseId);
+    if (!selectedFinaBusinessPremiseName) return [];
+    const premise = activeFinaPremises.find((p: any) => p.business_premise_name === selectedFinaBusinessPremiseName);
     return premise?.Devices?.filter((d: any) => d.is_active) || [];
-  }, [activeFinaPremises, selectedFinaPremiseId]);
+  }, [activeFinaPremises, selectedFinaBusinessPremiseName]);
 
   // Initialize FINA selection from localStorage or first active combo
   useEffect(() => {
-    if (!isFinaEnabled || !hasFinaPremises || selectedFinaPremiseId) return;
+    if (!isFinaEnabled || !hasFinaPremises || selectedFinaBusinessPremiseName) return;
 
     const lastUsed = getLastUsedFinaCombo(entityId);
     if (lastUsed) {
-      const premise = activeFinaPremises.find((p: any) => p.premise_id === lastUsed.premise_id);
-      const device = premise?.Devices?.find((d: any) => d.device_id === lastUsed.device_id && d.is_active);
+      const premise = activeFinaPremises.find((p: any) => p.business_premise_name === lastUsed.business_premise_name);
+      const device = premise?.Devices?.find(
+        (d: any) => d.electronic_device_name === lastUsed.electronic_device_name && d.is_active,
+      );
       if (premise && device) {
-        setSelectedFinaPremiseId(lastUsed.premise_id);
-        setSelectedFinaDeviceId(lastUsed.device_id);
+        setSelectedFinaBusinessPremiseName(lastUsed.business_premise_name);
+        setSelectedFinaElectronicDeviceName(lastUsed.electronic_device_name);
         return;
       }
     }
@@ -292,25 +305,25 @@ export default function CreateInvoiceForm({
     const firstPremise = activeFinaPremises[0];
     const firstDevice = firstPremise?.Devices?.find((d: any) => d.is_active);
     if (firstPremise && firstDevice) {
-      setSelectedFinaPremiseId(firstPremise.premise_id);
-      setSelectedFinaDeviceId(firstDevice.device_id);
+      setSelectedFinaBusinessPremiseName(firstPremise.business_premise_name);
+      setSelectedFinaElectronicDeviceName(firstDevice.electronic_device_name);
     }
-  }, [isFinaEnabled, hasFinaPremises, activeFinaPremises, entityId, selectedFinaPremiseId]);
+  }, [isFinaEnabled, hasFinaPremises, activeFinaPremises, entityId, selectedFinaBusinessPremiseName]);
 
   // When FINA premise changes, select first active device
   useEffect(() => {
-    if (!selectedFinaPremiseId) return;
-    const premise = activeFinaPremises.find((p: any) => p.premise_id === selectedFinaPremiseId);
+    if (!selectedFinaBusinessPremiseName) return;
+    const premise = activeFinaPremises.find((p: any) => p.business_premise_name === selectedFinaBusinessPremiseName);
     const firstDevice = premise?.Devices?.find((d: any) => d.is_active);
-    if (firstDevice && selectedFinaDeviceId !== firstDevice.device_id) {
+    if (firstDevice && selectedFinaElectronicDeviceName !== firstDevice.electronic_device_name) {
       const currentDeviceInPremise = premise?.Devices?.find(
-        (d: any) => d.device_id === selectedFinaDeviceId && d.is_active,
+        (d: any) => d.electronic_device_name === selectedFinaElectronicDeviceName && d.is_active,
       );
       if (!currentDeviceInPremise) {
-        setSelectedFinaDeviceId(firstDevice.device_id);
+        setSelectedFinaElectronicDeviceName(firstDevice.electronic_device_name);
       }
     }
-  }, [selectedFinaPremiseId, activeFinaPremises, selectedFinaDeviceId]);
+  }, [selectedFinaBusinessPremiseName, activeFinaPremises, selectedFinaElectronicDeviceName]);
 
   const form = useForm<CreateInvoiceFormValues>({
     // Cast resolver to accept extended form type (includes UI-only fields)
@@ -345,9 +358,11 @@ export default function CreateInvoiceForm({
             },
           ],
       currency_code: initialValues?.currency_code || activeEntity?.currency_code || "EUR",
+      reference: (initialValues as any)?.reference ?? "",
       note: initialValues?.note ?? defaultInvoiceNote,
       tax_clause: (initialValues as any)?.tax_clause ?? "",
       payment_terms: initialValues?.payment_terms ?? defaultPaymentTerms,
+      footer: (initialValues as any)?.footer ?? defaultFooter,
       date_due:
         initialValues?.date_due ||
         calculateDueDate(initialValues?.date || new Date().toISOString(), defaultInvoiceDueDays),
@@ -373,6 +388,20 @@ export default function CreateInvoiceForm({
     }
   }, [serviceDateType, form]);
 
+  // Handle due days type change - recalculate due date for presets
+  const handleDueDaysTypeChange = useCallback(
+    (type: number | "custom") => {
+      setDueDaysType(type);
+      if (type !== "custom") {
+        const currentDate = form.getValues("date");
+        if (currentDate) {
+          form.setValue("date_due", calculateDueDate(currentDate, type));
+        }
+      }
+    },
+    [form],
+  );
+
   // Check if FURS selection is ready (needed to prevent number flashing)
   // Selection is ready when: FURS not enabled, OR no premises, OR we have a valid selection
   const isFursSelectionReady = !isFursEnabled || !hasFursPremises || (!!selectedPremiseName && !!selectedDeviceName);
@@ -383,17 +412,60 @@ export default function CreateInvoiceForm({
 
   // FINA selection ready and active checks
   const isFinaSelectionReady =
-    !isFinaEnabled || !hasFinaPremises || (!!selectedFinaPremiseId && !!selectedFinaDeviceId);
-  const isFinaActive = isFinaEnabled && hasFinaPremises && selectedFinaPremiseId && selectedFinaDeviceId;
+    !isFinaEnabled || !hasFinaPremises || (!!selectedFinaBusinessPremiseName && !!selectedFinaElectronicDeviceName);
+  const isFinaActive =
+    isFinaEnabled && hasFinaPremises && selectedFinaBusinessPremiseName && selectedFinaElectronicDeviceName;
+
+  // ============================================================================
+  // VIES Check - determine transaction type early (needed for number preview)
+  // ============================================================================
+  const customerCountry = useWatch({ control: form.control, name: "customer.country" });
+  const customerCountryCode = useWatch({ control: form.control, name: "customer.country_code" });
+  const customerTaxNumber = useWatch({ control: form.control, name: "customer.tax_number" });
+  const customerIsEndConsumerWatch =
+    useWatch({ control: form.control, name: "customer.is_end_consumer" as any }) === true;
+
+  const {
+    reverseChargeApplies,
+    transactionType,
+    isFetching: isViesFetching,
+    warning: viesWarning,
+  } = useTransactionTypeCheck({
+    issuerCountryCode: activeEntity?.country_code,
+    isTaxSubject: activeEntity?.is_tax_subject ?? true,
+    customerCountry,
+    customerCountryCode,
+    customerTaxNumber,
+    customerIsEndConsumer: customerIsEndConsumerWatch,
+    enabled: !!activeEntity,
+  });
+
+  // FINA numbering guard: use FINA numbering for domestic transactions (or all if unified numbering is on)
+  const finaUnifiedNumbering = finaSettings?.unified_numbering !== false;
+  const useFinaNumbering =
+    !!isFinaActive && (finaUnifiedNumbering || transactionType == null || transactionType === "domestic");
+  const isFinaNonDomestic = !!isFinaActive && !useFinaNumbering;
 
   // ============================================================================
   // Next Invoice Number Preview
   // ============================================================================
   // Wait for FURS selection to be ready before querying to prevent number flashing
   // Skip in edit mode - we use the existing document number
+  // Use the same premise/device params for both FURS and FINA (an entity is either one, never both)
+  const activePremiseName = isFursActive
+    ? selectedPremiseName
+    : useFinaNumbering
+      ? selectedFinaBusinessPremiseName
+      : undefined;
+  const activeDeviceNameForNumber = isFursActive
+    ? selectedDeviceName
+    : useFinaNumbering
+      ? selectedFinaElectronicDeviceName
+      : undefined;
+
   const { data: nextNumberData, isLoading: isNextNumberLoading } = useNextInvoiceNumber(entityId, {
-    business_premise_name: isFursActive ? selectedPremiseName : undefined,
-    electronic_device_name: isFursActive ? selectedDeviceName : undefined,
+    business_premise_name: activePremiseName,
+    electronic_device_name: activeDeviceNameForNumber,
     enabled:
       !!entityId && !isFursLoading && isFursSelectionReady && !isFinaLoading && isFinaSelectionReady && !isEditMode,
   });
@@ -521,11 +593,6 @@ export default function CreateInvoiceForm({
     }
   }, [nextNumberData?.number, form]);
 
-  // Watch specific fields for VIES check (stable references)
-  const customerCountry = useWatch({ control: form.control, name: "customer.country" });
-  const customerCountryCode = useWatch({ control: form.control, name: "customer.country_code" });
-  const customerTaxNumber = useWatch({ control: form.control, name: "customer.tax_number" });
-
   // 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" });
@@ -533,26 +600,45 @@ export default function CreateInvoiceForm({
   const watchedCurrencyCode = useWatch({ control: form.control, name: "currency_code" });
   const watchedCustomer = useWatch({ control: form.control, name: "customer" });
 
-  // ============================================================================
-  // VIES Check - determine if reverse charge applies
-  // ============================================================================
-  const {
-    reverseChargeApplies,
-    transactionType,
-    customerCountryCode: viesCustomerCountryCode,
-    isFetching: isViesFetching,
-    warning: viesWarning,
-  } = useViesCheck({
-    issuerCountryCode: activeEntity?.country_code,
-    isTaxSubject: activeEntity?.is_tax_subject ?? true,
-    customerCountry,
-    customerCountryCode,
-    customerTaxNumber,
-    enabled: !!activeEntity,
-  });
+  // Croatian invoice validation:
+  // - Domestic/3w B2C requires FINA
+  // - Domestic B2B (customer has tax number and NOT end consumer) is blocked
+  const isCroatianEntity = activeEntity?.country_code === "HR";
+  const customerHasTaxNumber = !!customerTaxNumber?.trim();
+  const isDomesticTransaction = transactionType === "domestic";
+  const requiresFinaFiscalization = isDomesticTransaction || transactionType === "3w_b2c";
+  const is3wTransaction = transactionType === "3w_b2b" || transactionType === "3w_b2c";
+
+  // Auto-toggle is_end_consumer based on tax number for Croatian domestic/3w customers
+  // Default: checked (end consumer). When tax number is entered: uncheck (business). User can override.
+  const prevAutoSetTaxRef = useRef<string | undefined>(undefined);
+  useEffect(() => {
+    if (!isCroatianEntity || !(isDomesticTransaction || is3wTransaction)) return;
+    const hasTaxNumber = !!customerTaxNumber?.trim();
+    const hadTaxNumber = !!prevAutoSetTaxRef.current?.trim();
+    prevAutoSetTaxRef.current = customerTaxNumber ?? undefined;
+
+    // Auto-uncheck when tax number goes from empty to filled (likely a business)
+    if (hasTaxNumber && !hadTaxNumber && customerIsEndConsumerWatch) {
+      form.setValue("customer.is_end_consumer" as any, false);
+    }
+    // Auto-check when tax number goes from filled to empty (likely an individual)
+    if (!hasTaxNumber && hadTaxNumber && !customerIsEndConsumerWatch) {
+      form.setValue("customer.is_end_consumer" as any, true);
+    }
+  }, [customerTaxNumber, isCroatianEntity, isDomesticTransaction, is3wTransaction, customerIsEndConsumerWatch, form]);
 
-  // FINA non-domestic guard: hide FINA selectors for non-domestic transactions
-  const isFinaNonDomestic = isFinaEnabled && viesCustomerCountryCode != null && viesCustomerCountryCode !== "HR";
+  const finaValidationError = (() => {
+    if (!isCroatianEntity || !requiresFinaFiscalization) return undefined;
+    // Domestic B2B is always blocked (3w B2B never reaches here since requiresFinaFiscalization is false for 3w B2B)
+    if (isDomesticTransaction && customerHasTaxNumber && !customerIsEndConsumerWatch) {
+      return t("Domestic B2B invoicing in Croatia is not supported");
+    }
+    if (!isFinaEnabled) {
+      return t("FINA fiscalization must be enabled for domestic invoices");
+    }
+    return undefined;
+  })();
 
   // Auto-populate tax_clause from entity settings when transaction type changes
   const effectiveTransactionType = transactionType ?? "domestic";
@@ -590,10 +676,10 @@ export default function CreateInvoiceForm({
         });
       }
       // Save FINA combo to localStorage on successful creation
-      if (isFinaActive && selectedFinaPremiseId && selectedFinaDeviceId) {
+      if (isFinaActive && selectedFinaBusinessPremiseName && selectedFinaElectronicDeviceName) {
         setLastUsedFinaCombo(entityId, {
-          premise_id: selectedFinaPremiseId,
-          device_id: selectedFinaDeviceId,
+          business_premise_name: selectedFinaBusinessPremiseName,
+          electronic_device_name: selectedFinaElectronicDeviceName,
         });
       }
       // Invalidate customers cache when a customer was created/linked
@@ -625,6 +711,9 @@ export default function CreateInvoiceForm({
   // Shared submit logic for both regular save and save as draft
   const submitInvoice = useCallback(
     (values: CreateInvoiceFormValues, isDraft: boolean) => {
+      // Block Croatian domestic B2B and domestic B2C without FINA
+      if (finaValidationError) return;
+
       // Skip e-SLOG validation for drafts and edit mode
       if (!isDraft && !isEditMode && eslogValidationEnabled) {
         const validationErrors = validateEslogForm(values as any, activeEntity);
@@ -656,8 +745,16 @@ export default function CreateInvoiceForm({
 
       // Build FINA options (skip for drafts, edit mode, and non-domestic transactions)
       const finaOptions =
-        !isDraft && !isEditMode && isFinaEnabled && !isFinaNonDomestic && selectedFinaPremiseId && selectedFinaDeviceId
-          ? { premise_id: selectedFinaPremiseId, device_id: selectedFinaDeviceId, payment_type: paymentTypes[0] }
+        !isDraft &&
+        !isEditMode &&
+        useFinaNumbering &&
+        selectedFinaBusinessPremiseName &&
+        selectedFinaElectronicDeviceName
+          ? {
+              business_premise_name: selectedFinaBusinessPremiseName,
+              electronic_device_name: selectedFinaElectronicDeviceName,
+              payment_type: paymentTypes[0],
+            }
           : undefined;
 
       // Build e-SLOG options (skip for drafts and edit mode)
@@ -698,20 +795,20 @@ export default function CreateInvoiceForm({
       updateInvoice,
       documentId,
       eslogValidationEnabled,
+      finaValidationError,
       forceLinkedDocuments,
       form,
       isEditMode,
       isEslogAvailable,
       isFursEnabled,
-      isFinaEnabled,
-      isFinaNonDomestic,
+      useFinaNumbering,
       markAsPaid,
       originalCustomer,
       paymentTypes,
       selectedDeviceName,
       selectedPremiseName,
-      selectedFinaPremiseId,
-      selectedFinaDeviceId,
+      selectedFinaBusinessPremiseName,
+      selectedFinaElectronicDeviceName,
       showCustomerForm,
       skipFiscalization,
     ],
@@ -776,14 +873,23 @@ export default function CreateInvoiceForm({
     if (entityDefaultPaymentTerms && !form.getValues("payment_terms")) {
       form.setValue("payment_terms", entityDefaultPaymentTerms);
     }
+    const entityDefaultFooter = (activeEntity.settings as any)?.document_footer;
+    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);
+    }
 
-    // Auto-populate due date from entity settings when entity loads async
+    // Auto-populate due date and due days type from entity settings when entity loads async
     if (!isEditMode && !initialValues?.date_due) {
       const dueDays = (activeEntity.settings as any)?.default_invoice_due_days ?? 30;
       const currentDate = form.getValues("date");
       if (currentDate) {
         form.setValue("date_due", calculateDueDate(currentDate, dueDays));
       }
+      setDueDaysType((DUE_DAYS_PRESETS as readonly number[]).includes(dueDays) ? dueDays : "custom");
     }
 
     // Auto-add tax field for tax subject entities
@@ -797,15 +903,16 @@ export default function CreateInvoiceForm({
     initialSetupDoneRef.current = true;
   }, [activeEntity, form, isEditMode, initialValues?.date_due]);
 
-  // Recalculate due date when document date changes (skip in edit mode)
+  // Recalculate due date when document date changes (skip in edit mode and custom due days)
   const prevDateRef = useRef(form.getValues("date"));
   useEffect(() => {
     if (isEditMode) return;
     if (!watchedDate || watchedDate === prevDateRef.current) return;
     prevDateRef.current = watchedDate;
-    const dueDays = (activeEntity?.settings as any)?.default_invoice_due_days ?? 30;
-    form.setValue("date_due", calculateDueDate(watchedDate, dueDays));
-  }, [watchedDate, activeEntity, isEditMode, form]);
+    if (dueDaysType !== "custom") {
+      form.setValue("date_due", calculateDueDate(watchedDate, dueDaysType));
+    }
+  }, [watchedDate, isEditMode, form, dueDaysType]);
 
   // Use form.watch subscription for onChange callback (avoids re-render loops)
   const prevPayloadRef = useRef<string>("");
@@ -827,8 +934,10 @@ export default function CreateInvoiceForm({
         customer: formValues.customer,
         items: transformedItems,
         currency_code: formValues.currency_code,
+        reference: formValues.reference,
         note: formValues.note,
         payment_terms: formValues.payment_terms,
+        signature: formValues.signature,
       };
     };
 
@@ -862,25 +971,36 @@ export default function CreateInvoiceForm({
         <div className="flex w-full flex-col md:flex-row md:gap-6">
           {/* Recipient section skeleton */}
           <div className="flex-1 space-y-4">
-            <Skeleton className="h-7 w-24" /> {/* "Recipient" title */}
-            <Skeleton className="h-10 w-full" /> {/* Customer autocomplete */}
+            <Skeleton className="h-7 w-24" />
+            <Skeleton className="h-10 w-full" />
           </div>
-          {/* Details section skeleton */}
-          <div className="flex-1 space-y-4">
-            <Skeleton className="h-7 w-20" /> {/* "Details" title */}
-            <Skeleton className="h-5 w-16" /> {/* "Number *" label */}
-            <Skeleton className="h-10 w-full" /> {/* Number field */}
-            <Skeleton className="h-5 w-12" /> {/* "Date *" label */}
-            <Skeleton className="h-10 w-full" /> {/* Date picker */}
-            <Skeleton className="h-5 w-16" /> {/* "Due Date" label */}
-            <Skeleton className="h-10 w-full" /> {/* Due date picker */}
-            <Skeleton className="h-5 w-20" /> {/* "Currency *" label */}
-            <Skeleton className="h-10 w-full" /> {/* Currency select */}
-            {/* Mark as paid section */}
+          {/* Details section skeleton — inline label rows */}
+          <div className="flex-1 space-y-3">
+            <Skeleton className="h-7 w-20" />
+            <div className="flex items-center gap-3">
+              <Skeleton className="h-5 w-[6.5rem] shrink-0" />
+              <Skeleton className="h-10 flex-1" />
+            </div>
+            <div className="flex items-center gap-3">
+              <Skeleton className="h-5 w-[6.5rem] shrink-0" />
+              <Skeleton className="h-10 flex-1" />
+            </div>
+            <div className="flex items-center gap-3">
+              <Skeleton className="h-5 w-[6.5rem] shrink-0" />
+              <Skeleton className="h-10 flex-1" />
+            </div>
+            <div className="flex items-center gap-3">
+              <Skeleton className="h-5 w-[6.5rem] shrink-0" />
+              <Skeleton className="h-10 flex-1" />
+            </div>
+            <div className="flex items-center gap-3">
+              <Skeleton className="h-5 w-[6.5rem] shrink-0" />
+              <Skeleton className="h-10 flex-1" />
+            </div>
             <div className="space-y-3 rounded-md border p-4">
               <div className="flex items-center gap-3">
-                <Skeleton className="h-4 w-4 rounded" /> {/* Checkbox */}
-                <Skeleton className="h-5 w-28" /> {/* "Mark as Paid" */}
+                <Skeleton className="h-4 w-4 rounded" />
+                <Skeleton className="h-5 w-28" />
               </div>
             </div>
           </div>
@@ -888,25 +1008,22 @@ export default function CreateInvoiceForm({
 
         {/* Items section skeleton */}
         <div className="space-y-4">
-          <Skeleton className="h-7 w-16" /> {/* "Items" title */}
+          <Skeleton className="h-7 w-16" />
           <div className="space-y-4 rounded-lg border p-4">
-            <Skeleton className="h-10 w-full" /> {/* Item name */}
+            <Skeleton className="h-10 w-full" />
             <div className="flex gap-4">
-              <Skeleton className="h-10 w-24" /> {/* Quantity */}
-              <Skeleton className="h-10 flex-1" /> {/* Price */}
+              <Skeleton className="h-10 w-24" />
+              <Skeleton className="h-10 flex-1" />
             </div>
           </div>
-          <Skeleton className="h-9 w-24" /> {/* Add item button */}
+          <Skeleton className="h-9 w-24" />
         </div>
 
         {/* Note field skeleton */}
         <div className="space-y-2">
-          <Skeleton className="h-5 w-12" /> {/* "Note" label */}
-          <Skeleton className="h-24 w-full" /> {/* Textarea */}
+          <Skeleton className="h-5 w-12" />
+          <Skeleton className="h-24 w-full" />
         </div>
-
-        {/* Save button skeleton */}
-        <Skeleton className="h-10 w-24" />
       </div>
     );
   }
@@ -914,6 +1031,14 @@ export default function CreateInvoiceForm({
   return (
     <Form {...form}>
       <form id="create-invoice-form" onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        {/* Croatian domestic invoice validation errors */}
+        {finaValidationError && (
+          <Alert variant="destructive">
+            <AlertCircle className="h-4 w-4" />
+            <AlertTitle>{finaValidationError}</AlertTitle>
+          </Alert>
+        )}
+
         {/* e-SLOG entity-level validation errors */}
         {eslogEntityErrors.length > 0 && (
           <Alert variant="destructive">
@@ -942,6 +1067,7 @@ export default function CreateInvoiceForm({
             shouldFocusName={shouldFocusName}
             selectedCustomerId={selectedCustomerId}
             initialCustomerName={initialCustomerName}
+            showEndConsumerToggle={isCroatianEntity && (isDomesticTransaction || is3wTransaction)}
             t={t}
           />
           <DocumentDetailsSection
@@ -963,14 +1089,20 @@ export default function CreateInvoiceForm({
                 : undefined
             }
             finaInline={
-              !isEditMode && isFinaEnabled && hasFinaPremises && !isFinaNonDomestic
+              !isEditMode && useFinaNumbering
                 ? {
-                    premises: activeFinaPremises.map((p: any) => ({ id: p.id, premise_id: p.premise_id })),
-                    devices: activeFinaDevices.map((d: any) => ({ id: d.id, device_id: d.device_id })),
-                    selectedPremise: selectedFinaPremiseId,
-                    selectedDevice: selectedFinaDeviceId,
-                    onPremiseChange: setSelectedFinaPremiseId,
-                    onDeviceChange: setSelectedFinaDeviceId,
+                    premises: activeFinaPremises.map((p: any) => ({
+                      id: p.id,
+                      business_premise_name: p.business_premise_name,
+                    })),
+                    devices: activeFinaDevices.map((d: any) => ({
+                      id: d.id,
+                      electronic_device_name: d.electronic_device_name,
+                    })),
+                    selectedPremise: selectedFinaBusinessPremiseName,
+                    selectedDevice: selectedFinaElectronicDeviceName,
+                    onPremiseChange: setSelectedFinaBusinessPremiseName,
+                    onDeviceChange: setSelectedFinaElectronicDeviceName,
                   }
                 : undefined
             }
@@ -978,6 +1110,10 @@ export default function CreateInvoiceForm({
               dateType: serviceDateType,
               onDateTypeChange: setServiceDateType,
             }}
+            dueDays={{
+              dueDaysType,
+              onDueDaysTypeChange: handleDueDaysTypeChange,
+            }}
           >
             {/* Invoice-specific: Mark as paid section (UI-only state, not in form schema) */}
             {/* Hide in edit mode - payments are managed separately */}
@@ -988,7 +1124,7 @@ export default function CreateInvoiceForm({
                 paymentTypes={paymentTypes}
                 onPaymentTypesChange={setPaymentTypes}
                 t={t}
-                alwaysShowPaymentType={!!isFinaActive}
+                alwaysShowPaymentType={!!isFinaActive && requiresFinaFiscalization}
               />
             )}
           </DocumentDetailsSection>
@@ -1054,6 +1190,32 @@ export default function CreateInvoiceForm({
           }}
         />
 
+        <DocumentSignatureField
+          control={form.control}
+          t={t}
+          entity={activeEntity}
+          document={{
+            number: watchedNumber,
+            date: watchedDate,
+            date_due: watchedDateDue,
+            currency_code: watchedCurrencyCode,
+            customer: watchedCustomer as any,
+          }}
+        />
+
+        <DocumentFooterField
+          control={form.control}
+          t={t}
+          entity={activeEntity}
+          document={{
+            number: watchedNumber,
+            date: watchedDate,
+            date_due: watchedDateDue,
+            currency_code: watchedCurrencyCode,
+            customer: watchedCustomer as any,
+          }}
+        />
+
         {sourceDocuments && sourceDocuments.length > 0 && (
           <LinkedDocumentsInfo documents={sourceDocuments} locale={locale || "en"} t={t} />
         )}

package/src/components/invoices/create/locales/de.ts

@@ -40,6 +40,9 @@ export default {
   "Insert variable": "Variable einfügen",
   "Add payment instructions, terms, or other notes...":
     "Zahlungsanweisungen, Bedingungen oder andere Notizen hinzufügen...",
+  // Signature field
+  Signature: "Unterschrift",
+  "Add signature text...": "Unterschriftstext hinzufügen...",
   // Payment terms field
   "Payment Terms": "Zahlungsbedingungen",
   "Add payment terms...": "Zahlungsbedingungen hinzufügen...",
@@ -120,6 +123,14 @@ export default {
   "Advance invoice": "Vorausrechnung",
   "FINA fiscalized invoices always use the current date":
     "FINA-fiskalisierte Rechnungen verwenden immer das aktuelle Datum",
+  // Due days selector
+  "On receipt": "Bei Erhalt",
+  "7 days": "7 Tage",
+  "14 days": "14 Tage",
+  "30 days": "30 Tage",
+  "60 days": "60 Tage",
+  "90 days": "90 Tage",
+  Custom: "Benutzerdefiniert",
   // Service date
   "Service Date": "Leistungsdatum",
   "Single Date": "Datum",
@@ -141,4 +152,12 @@ export default {
     "Diese Rechnung wird nicht fiskalisiert (nicht-inländische Transaktion)",
   "Tax Clause": "Steuerklausel",
   "Add tax clause...": "Steuerklausel hinzufügen...",
+  Footer: "Fußzeile",
+  "Add document footer...": "Dokumentfußzeile hinzufügen...",
+  // Croatian domestic invoice validation
+  "End consumer": "Endverbraucher",
+  "Domestic B2B invoicing in Croatia is not supported":
+    "Inländische B2B-Rechnungsstellung in Kroatien wird nicht unterstützt. Kroatien erfordert die Einhaltung von Fiskalisierung 2.0 für B2B-Rechnungsstellung.",
+  "FINA fiscalization must be enabled for domestic invoices":
+    "FINA-Fiskalisierung muss für inländische Rechnungen aktiviert sein. Aktivieren Sie sie in den Unternehmenseinstellungen.",
 } as const;