@spaceinvoices/react-ui 0.4.3 → 0.4.5

package/src/components/export/document-export-form.tsx

@@ -3,13 +3,16 @@ type TFunction = (key: string, options?: Record<string, unknown>) => string;
 import { Calendar, Download, Loader2 } from "lucide-react";
 import { useRef, useState } from "react";
 import { Button } from "../ui/button";
+import { Checkbox } from "../ui/checkbox";
 import { Input } from "../ui/input";
 import { Label } from "../ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
 
-export type DocumentType = "invoice" | "estimate" | "credit_note";
+export type DocumentType = "invoice" | "estimate" | "credit_note" | "advance_invoice" | "delivery_note";
 export type ExportFormat = "xlsx" | "csv" | "pdf_zip";
 
+const ALL_DOCUMENT_TYPES: DocumentType[] = ["invoice", "estimate", "credit_note", "advance_invoice", "delivery_note"];
+
 // Maximum date range for export (1 year in milliseconds)
 const MAX_DATE_RANGE_MS = 365 * 24 * 60 * 60 * 1000;
 
@@ -40,8 +43,11 @@ function isDateRangeValid(dateFrom: string, dateTo: string): boolean {
 export type DocumentExportFormProps = {
   entityId: string;
   token: string;
+  accountId?: string | null;
   language: string;
   t: TFunction;
+  /** Base URL for API calls (required in embed context where relative paths don't reach the API) */
+  apiBaseUrl?: string;
   onSuccess?: (fileName: string) => void;
   onError?: (error: Error) => void;
   onPdfExportStarted?: (jobId: string) => void;
@@ -51,8 +57,10 @@ export type DocumentExportFormProps = {
 export function DocumentExportForm({
   entityId,
   token,
+  accountId,
   language,
   t,
+  apiBaseUrl = "",
   onSuccess,
   onError,
   onPdfExportStarted,
@@ -60,6 +68,7 @@ export function DocumentExportForm({
 }: DocumentExportFormProps) {
   const defaultDates = getPreviousMonthRange();
   const [documentType, setDocumentType] = useState<DocumentType>("invoice");
+  const [selectedTypes, setSelectedTypes] = useState<DocumentType[]>(["invoice"]);
   const [exportFormat, setExportFormat] = useState<ExportFormat>("xlsx");
   const [dateFrom, setDateFrom] = useState(defaultDates.from);
   const [dateTo, setDateTo] = useState(defaultDates.to);
@@ -68,6 +77,17 @@ export function DocumentExportForm({
 
   const toastIdRef = useRef<string | number | null>(null);
 
+  const toggleType = (type: DocumentType) => {
+    setSelectedTypes((prev) => {
+      if (prev.includes(type)) {
+        // Don't allow deselecting the last type
+        if (prev.length === 1) return prev;
+        return prev.filter((t) => t !== type);
+      }
+      return [...prev, type];
+    });
+  };
+
   const validateDateRange = (from: string, to: string) => {
     const isValid = isDateRangeValid(from, to);
     setDateRangeError(!isValid);
@@ -86,15 +106,16 @@ export function DocumentExportForm({
     // PDF export is async - different flow
     if (exportFormat === "pdf_zip") {
       try {
-        const response = await fetch("/documents/export/pdf", {
+        const response = await fetch(`${apiBaseUrl}/documents/export/pdf`, {
           method: "POST",
           headers: {
             Authorization: `Bearer ${token}`,
             "x-entity-id": entityId,
+            ...(accountId && { "x-account-id": accountId }),
             "Content-Type": "application/json",
           },
           body: JSON.stringify({
-            type: documentType,
+            types: selectedTypes,
             date_from: dateFrom || undefined,
             date_to: dateTo || undefined,
           }),
@@ -132,10 +153,11 @@ export function DocumentExportForm({
         queryParams.date_to = dateTo;
       }
 
-      const response = await fetch(`/documents/export?${new URLSearchParams(queryParams).toString()}`, {
+      const response = await fetch(`${apiBaseUrl}/documents/export?${new URLSearchParams(queryParams).toString()}`, {
         headers: {
           Authorization: `Bearer ${token}`,
           "x-entity-id": entityId,
+          ...(accountId && { "x-account-id": accountId }),
         },
       });
 
@@ -180,16 +202,35 @@ export function DocumentExportForm({
       <div className="grid grid-cols-2 gap-4">
         <div className="space-y-2">
           <Label htmlFor="document-type">{t("export-page.document-type")}</Label>
-          <Select value={documentType} onValueChange={(v) => setDocumentType(v as DocumentType)}>
-            <SelectTrigger id="document-type">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="invoice">{t("export-page.types.invoice")}</SelectItem>
-              <SelectItem value="estimate">{t("export-page.types.estimate")}</SelectItem>
-              <SelectItem value="credit_note">{t("export-page.types.credit_note")}</SelectItem>
-            </SelectContent>
-          </Select>
+          {exportFormat === "pdf_zip" ? (
+            <fieldset className="space-y-2 rounded-md border p-3">
+              {ALL_DOCUMENT_TYPES.map((type) => (
+                <div key={type} className="flex items-center gap-2">
+                  <Checkbox
+                    id={`type-${type}`}
+                    checked={selectedTypes.includes(type)}
+                    onCheckedChange={() => toggleType(type)}
+                  />
+                  <Label htmlFor={`type-${type}`} className="cursor-pointer font-normal">
+                    {t(`export-page.types.${type}`)}
+                  </Label>
+                </div>
+              ))}
+            </fieldset>
+          ) : (
+            <Select value={documentType} onValueChange={(v) => setDocumentType(v as DocumentType)}>
+              <SelectTrigger id="document-type">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="invoice">{t("export-page.types.invoice")}</SelectItem>
+                <SelectItem value="estimate">{t("export-page.types.estimate")}</SelectItem>
+                <SelectItem value="credit_note">{t("export-page.types.credit_note")}</SelectItem>
+                <SelectItem value="advance_invoice">{t("export-page.types.advance_invoice")}</SelectItem>
+                <SelectItem value="delivery_note">{t("export-page.types.delivery_note")}</SelectItem>
+              </SelectContent>
+            </Select>
+          )}
         </div>
 
         <div className="space-y-2">

package/src/components/export/index.ts

@@ -1,2 +1,4 @@
 export type { DocumentExportFormProps, DocumentType, ExportFormat } from "./document-export-form";
 export { DocumentExportForm } from "./document-export-form";
+export type { SalesPerItemExportFormProps } from "./sales-per-item-export-form";
+export { SalesPerItemExportForm } from "./sales-per-item-export-form";

package/src/components/export/sales-per-item-export-form.tsx

@@ -0,0 +1,223 @@
+type TFunction = (key: string, options?: Record<string, unknown>) => string;
+
+import { Calendar, Download, Loader2 } from "lucide-react";
+import { useState } from "react";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+
+type ExportFormat = "xlsx" | "csv";
+
+// Maximum date range for export (1 year in milliseconds)
+const MAX_DATE_RANGE_MS = 365 * 24 * 60 * 60 * 1000;
+
+function formatDateLocal(date: Date): string {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+function getPreviousMonthRange(): { from: string; to: string } {
+  const now = new Date();
+  const firstDayPrevMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+  const lastDayPrevMonth = new Date(now.getFullYear(), now.getMonth(), 0);
+  return {
+    from: formatDateLocal(firstDayPrevMonth),
+    to: formatDateLocal(lastDayPrevMonth),
+  };
+}
+
+function isDateRangeValid(dateFrom: string, dateTo: string): boolean {
+  if (!dateFrom || !dateTo) return false;
+  const from = new Date(dateFrom);
+  const to = new Date(dateTo);
+  return to.getTime() - from.getTime() <= MAX_DATE_RANGE_MS && to >= from;
+}
+
+export type SalesPerItemExportFormProps = {
+  entityId: string;
+  token: string;
+  accountId?: string | null;
+  language: string;
+  t: TFunction;
+  /** Base URL for API calls (required in embed context where relative paths don't reach the API) */
+  apiBaseUrl?: string;
+  onSuccess?: (fileName: string) => void;
+  onError?: (error: Error) => void;
+};
+
+export function SalesPerItemExportForm({
+  entityId,
+  token,
+  accountId,
+  language,
+  t,
+  apiBaseUrl = "",
+  onSuccess,
+  onError,
+}: SalesPerItemExportFormProps) {
+  const defaultDates = getPreviousMonthRange();
+  const [exportFormat, setExportFormat] = useState<ExportFormat>("xlsx");
+  const [dateFrom, setDateFrom] = useState(defaultDates.from);
+  const [dateTo, setDateTo] = useState(defaultDates.to);
+  const [isExporting, setIsExporting] = useState(false);
+  const [dateRangeError, setDateRangeError] = useState(false);
+
+  const validateDateRange = (from: string, to: string) => {
+    const isValid = isDateRangeValid(from, to);
+    setDateRangeError(!isValid && !!from && !!to);
+    return isValid;
+  };
+
+  const handleExport = async () => {
+    if (!dateFrom || !dateTo) {
+      onError?.(new Error(t("sales-per-item-export.error.dates-required")));
+      return;
+    }
+
+    if (!validateDateRange(dateFrom, dateTo)) {
+      onError?.(new Error(t("export-page.error.date-range-exceeded")));
+      return;
+    }
+
+    setIsExporting(true);
+
+    try {
+      const exportLanguage = language === "sl" ? "sl" : "en";
+      const queryParams: Record<string, string> = {
+        format: exportFormat,
+        date_from: dateFrom,
+        date_to: dateTo,
+        language: exportLanguage,
+      };
+
+      const response = await fetch(
+        `${apiBaseUrl}/documents/export/sales-per-item?${new URLSearchParams(queryParams).toString()}`,
+        {
+          headers: {
+            Authorization: `Bearer ${token}`,
+            "x-entity-id": entityId,
+            ...(accountId && { "x-account-id": accountId }),
+          },
+        },
+      );
+
+      if (!response.ok) {
+        throw new Error(`Export failed: ${response.statusText}`);
+      }
+
+      const contentDisposition = response.headers.get("content-disposition");
+      let fileName = `sales-per-item.${exportFormat}`;
+      if (contentDisposition) {
+        const match = contentDisposition.match(/filename="?([^";\n]+)"?/);
+        if (match) {
+          fileName = match[1];
+        }
+      }
+
+      const blob = await response.blob();
+      const downloadUrl = window.URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = downloadUrl;
+      link.download = fileName;
+      document.body.appendChild(link);
+      link.click();
+      setTimeout(() => {
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(downloadUrl);
+      }, 1000);
+
+      onSuccess?.(fileName);
+    } catch (error) {
+      onError?.(error instanceof Error ? error : new Error("Unknown error"));
+    } finally {
+      setIsExporting(false);
+    }
+  };
+
+  const datesProvided = !!dateFrom && !!dateTo;
+
+  return (
+    <div className="space-y-6">
+      {/* Export Format */}
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="sales-export-format">{t("export-page.format")}</Label>
+          <Select value={exportFormat} onValueChange={(v) => setExportFormat(v as ExportFormat)}>
+            <SelectTrigger id="sales-export-format">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="xlsx">{t("export-page.formats.xlsx")}</SelectItem>
+              <SelectItem value="csv">{t("export-page.formats.csv")}</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {/* Date Range */}
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="sales-date-from">{t("export-page.date-from")}</Label>
+          <div className="relative">
+            <Input
+              id="sales-date-from"
+              type="date"
+              value={dateFrom}
+              onChange={(e) => {
+                setDateFrom(e.target.value);
+                if (dateTo) validateDateRange(e.target.value, dateTo);
+              }}
+              onClick={(e) => (e.target as HTMLInputElement).showPicker?.()}
+              className="cursor-pointer pr-9 [&::-webkit-calendar-picker-indicator]:hidden"
+            />
+            <Calendar className="pointer-events-none absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="sales-date-to">{t("export-page.date-to")}</Label>
+          <div className="relative">
+            <Input
+              id="sales-date-to"
+              type="date"
+              value={dateTo}
+              onChange={(e) => {
+                setDateTo(e.target.value);
+                if (dateFrom) validateDateRange(dateFrom, e.target.value);
+              }}
+              onClick={(e) => (e.target as HTMLInputElement).showPicker?.()}
+              className={`cursor-pointer pr-9 [&::-webkit-calendar-picker-indicator]:hidden ${dateRangeError ? "border-destructive" : ""}`}
+            />
+            <Calendar className="pointer-events-none absolute top-1/2 right-2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          </div>
+        </div>
+      </div>
+
+      {/* Date range error message */}
+      {dateRangeError && <p className="text-destructive text-sm">{t("export-page.error.date-range-exceeded")}</p>}
+
+      {/* Export Button */}
+      <Button
+        onClick={handleExport}
+        disabled={isExporting || dateRangeError || !datesProvided}
+        className="w-full"
+        size="lg"
+      >
+        {isExporting ? (
+          <>
+            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            {t("export-page.exporting")}
+          </>
+        ) : (
+          <>
+            <Download className="mr-2 h-4 w-4" />
+            {t("export-page.export-button")}
+          </>
+        )}
+      </Button>
+    </div>
+  );
+}

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

@@ -24,9 +24,11 @@ import {
   DocumentDetailsSection,
   DocumentNoteField,
   DocumentPaymentTermsField,
+  DocumentTaxClauseField,
 } from "../../documents/create/document-details-section";
 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 type { DocumentTypes } from "../../documents/types";
 import { useFinaPremises, useFinaSettings } from "../../entities/fina-settings-form/fina-settings.hooks";
@@ -53,6 +55,12 @@ import sl from "./locales/sl";
 import { prepareInvoiceSubmission } from "./prepare-invoice-submission";
 import { useInvoiceCustomerForm } from "./use-invoice-customer-form";
 
+function calculateDueDate(dateIso: string, days: number): string {
+  const date = new Date(dateIso);
+  date.setDate(date.getDate() + days);
+  return date.toISOString();
+}
+
 const translations = {
   sl,
   de,
@@ -83,6 +91,10 @@ type DocumentAddFormProps = {
   onHeaderActionChange?: (action: ReactNode) => void;
   /** Initial values for form fields (used for document duplication or editing) */
   initialValues?: Partial<CreateInvoiceRequest> & { number?: string };
+  /** Source documents linked to this invoice (e.g., delivery notes merged into this invoice) */
+  sourceDocuments?: LinkedDocumentSummary[];
+  /** Force linking documents even if an advance invoice is already applied to another invoice */
+  forceLinkedDocuments?: boolean;
   /** Mode: create (default) or edit */
   mode?: "create" | "edit";
   /** Document ID for edit mode */
@@ -98,6 +110,8 @@ export default function CreateInvoiceForm({
   onAddNewTax,
   onHeaderActionChange,
   initialValues,
+  sourceDocuments,
+  forceLinkedDocuments,
   mode = "create",
   documentId,
   t: translateProp,
@@ -118,6 +132,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 defaultInvoiceDueDays = (activeEntity?.settings as any)?.default_invoice_due_days ?? 30;
 
   // ============================================================================
   // FURS Settings & Premises
@@ -307,13 +322,18 @@ export default function CreateInvoiceForm({
       // Cast customer to form schema type (API type may have additional fields)
       customer: (initialValues?.customer as CreateInvoiceFormValues["customer"]) ?? undefined,
       items: initialValues?.items?.length
-        ? initialValues.items.map((item) => ({
+        ? initialValues.items.map((item: any) => ({
+            type: item.type,
             name: item.name || "",
             description: item.description || "",
-            quantity: item.quantity ?? 1,
-            // Use gross_price if set, otherwise use price
-            price: item.gross_price ?? item.price,
-            taxes: item.taxes || [],
+            ...(item.type !== "separator"
+              ? {
+                  quantity: item.quantity ?? 1,
+                  // Use gross_price if set, otherwise use price
+                  price: item.gross_price ?? item.price,
+                  taxes: item.taxes || [],
+                }
+              : {}),
           }))
         : [
             {
@@ -326,8 +346,13 @@ export default function CreateInvoiceForm({
           ],
       currency_code: initialValues?.currency_code || activeEntity?.currency_code || "EUR",
       note: initialValues?.note ?? defaultInvoiceNote,
+      tax_clause: (initialValues as any)?.tax_clause ?? "",
       payment_terms: initialValues?.payment_terms ?? defaultPaymentTerms,
+      date_due:
+        initialValues?.date_due ||
+        calculateDueDate(initialValues?.date || new Date().toISOString(), defaultInvoiceDueDays),
       date_service: new Date().toISOString(),
+      linked_documents: (initialValues as any)?.linked_documents,
     },
   });
 
@@ -511,7 +536,13 @@ export default function CreateInvoiceForm({
   // ============================================================================
   // VIES Check - determine if reverse charge applies
   // ============================================================================
-  const { reverseChargeApplies, warning: viesWarning } = useViesCheck({
+  const {
+    reverseChargeApplies,
+    transactionType,
+    customerCountryCode: viesCustomerCountryCode,
+    isFetching: isViesFetching,
+    warning: viesWarning,
+  } = useViesCheck({
     issuerCountryCode: activeEntity?.country_code,
     isTaxSubject: activeEntity?.is_tax_subject ?? true,
     customerCountry,
@@ -520,6 +551,23 @@ export default function CreateInvoiceForm({
     enabled: !!activeEntity,
   });
 
+  // FINA non-domestic guard: hide FINA selectors for non-domestic transactions
+  const isFinaNonDomestic = isFinaEnabled && viesCustomerCountryCode != null && viesCustomerCountryCode !== "HR";
+
+  // Auto-populate tax_clause from entity settings when transaction type changes
+  const effectiveTransactionType = transactionType ?? "domestic";
+  const prevTransactionTypeRef = useRef<string | undefined>(undefined);
+  useEffect(() => {
+    if (effectiveTransactionType === prevTransactionTypeRef.current) return;
+    prevTransactionTypeRef.current = effectiveTransactionType;
+
+    const taxClauseDefaults = (activeEntity?.settings as any)?.tax_clause_defaults;
+    if (!taxClauseDefaults) return;
+
+    const clause = taxClauseDefaults[effectiveTransactionType] ?? "";
+    form.setValue("tax_clause", clause);
+  }, [effectiveTransactionType, activeEntity, form]);
+
   // Extract customer management logic into a custom hook
   const {
     originalCustomer,
@@ -606,9 +654,9 @@ export default function CreateInvoiceForm({
               : undefined
           : undefined;
 
-      // Build FINA options (skip for drafts and edit mode; FINA can't be skipped)
+      // Build FINA options (skip for drafts, edit mode, and non-domestic transactions)
       const finaOptions =
-        !isDraft && !isEditMode && isFinaEnabled && selectedFinaPremiseId && selectedFinaDeviceId
+        !isDraft && !isEditMode && isFinaEnabled && !isFinaNonDomestic && selectedFinaPremiseId && selectedFinaDeviceId
           ? { premise_id: selectedFinaPremiseId, device_id: selectedFinaDeviceId, payment_type: paymentTypes[0] }
           : undefined;
 
@@ -630,6 +678,11 @@ export default function CreateInvoiceForm({
         isDraft,
       });
 
+      // Add force_linked_documents if set (used after conflict dialog approval)
+      if (forceLinkedDocuments) {
+        (payload as any).force_linked_documents = true;
+      }
+
       if (isEditMode && documentId) {
         // In edit mode, use updateInvoice
         // Remove number from payload as it's not editable
@@ -645,11 +698,13 @@ export default function CreateInvoiceForm({
       updateInvoice,
       documentId,
       eslogValidationEnabled,
+      forceLinkedDocuments,
       form,
       isEditMode,
       isEslogAvailable,
       isFursEnabled,
       isFinaEnabled,
+      isFinaNonDomestic,
       markAsPaid,
       originalCustomer,
       paymentTypes,
@@ -693,7 +748,8 @@ export default function CreateInvoiceForm({
   );
 
   // Watch isDirty to get stable reference
-  const isDirty = form.formState.isDirty;
+  // When form is pre-populated via initialValues (duplicate/merge), treat as dirty immediately
+  const isDirty = form.formState.isDirty || !!initialValues;
 
   useFormFooterRegistration({
     formId: "create-invoice-form",
@@ -721,6 +777,15 @@ export default function CreateInvoiceForm({
       form.setValue("payment_terms", entityDefaultPaymentTerms);
     }
 
+    // Auto-populate due date 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));
+      }
+    }
+
     // Auto-add tax field for tax subject entities
     if (activeEntity.is_tax_subject) {
       const items = form.getValues("items") || [];
@@ -730,7 +795,17 @@ export default function CreateInvoiceForm({
     }
 
     initialSetupDoneRef.current = true;
-  }, [activeEntity, form]);
+  }, [activeEntity, form, isEditMode, initialValues?.date_due]);
+
+  // Recalculate due date when document date changes (skip in edit mode)
+  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]);
 
   // Use form.watch subscription for onChange callback (avoids re-render loops)
   const prevPayloadRef = useRef<string>("");
@@ -888,7 +963,7 @@ export default function CreateInvoiceForm({
                 : undefined
             }
             finaInline={
-              !isEditMode && isFinaEnabled && hasFinaPremises
+              !isEditMode && isFinaEnabled && hasFinaPremises && !isFinaNonDomestic
                 ? {
                     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 })),
@@ -950,6 +1025,22 @@ export default function CreateInvoiceForm({
           }}
         />
 
+        <DocumentTaxClauseField
+          control={form.control}
+          t={t}
+          entity={activeEntity}
+          document={{
+            number: watchedNumber,
+            date: watchedDate,
+            date_due: watchedDateDue,
+            currency_code: watchedCurrencyCode,
+            customer: watchedCustomer as any,
+          }}
+          transactionType={transactionType}
+          isTransactionTypeFetching={isViesFetching}
+          isFinaNonDomestic={isFinaNonDomestic}
+        />
+
         <DocumentPaymentTermsField
           control={form.control}
           t={t}
@@ -962,6 +1053,10 @@ export default function CreateInvoiceForm({
             customer: watchedCustomer as any,
           }}
         />
+
+        {sourceDocuments && sourceDocuments.length > 0 && (
+          <LinkedDocumentsInfo documents={sourceDocuments} locale={locale || "en"} t={t} />
+        )}
       </form>
     </Form>
   );

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

@@ -109,10 +109,36 @@ export default {
   "Net price": "Nettopreis",
   "Gross price (tax included)": "Bruttopreis (inkl. MwSt.)",
   "Net price (before tax)": "Nettopreis (exkl. MwSt.)",
+  // Linked documents
+  "Linked documents": "Verknüpfte Dokumente",
+  Type: "Typ",
+  Total: "Gesamt",
+  "Delivery note": "Lieferschein",
+  Invoice: "Rechnung",
+  Estimate: "Angebot",
+  "Credit note": "Gutschrift",
+  "Advance invoice": "Vorausrechnung",
+  "FINA fiscalized invoices always use the current date":
+    "FINA-fiskalisierte Rechnungen verwenden immer das aktuelle Datum",
   // Service date
   "Service Date": "Leistungsdatum",
   "Single Date": "Datum",
   "Date Range": "Zeitraum",
   From: "Von",
   To: "Bis",
+  // Separator items
+  "Add separator": "Trennzeile hinzufügen",
+  "Section header": "Abschnittsüberschrift",
+  "Section title...": "Abschnittstitel...",
+  // Transaction type
+  "Transaction type": "Transaktionstyp",
+  Domestic: "Inland",
+  "EU B2B": "EU B2B",
+  "EU B2C": "EU B2C",
+  Export: "Export",
+  "Determining transaction type...": "Transaktionstyp wird ermittelt...",
+  "This invoice will not be fiscalized (non-domestic transaction)":
+    "Diese Rechnung wird nicht fiskalisiert (nicht-inländische Transaktion)",
+  "Tax Clause": "Steuerklausel",
+  "Add tax clause...": "Steuerklausel hinzufügen...",
 } as const;