@spaceinvoices/react-ui 0.4.2 → 0.4.4

package/src/components/estimates/create/create-estimate-form.tsx

@@ -37,6 +37,12 @@ import sl from "./locales/sl";
 import { prepareEstimateSubmission } from "./prepare-estimate-submission";
 import { useEstimateCustomerForm } from "./use-estimate-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,
@@ -101,6 +107,7 @@ export default function CreateEstimateForm({
 
   // Get default estimate note from entity settings
   const defaultEstimateNote = (activeEntity?.settings as any)?.default_estimate_note || "";
+  const defaultEstimateValidDays = (activeEntity?.settings as any)?.default_estimate_valid_days ?? 30;
 
   // Fetch next estimate number
   const { data: nextNumberData } = useNextDocumentNumber(entityId, "estimate", {
@@ -139,6 +146,9 @@ export default function CreateEstimateForm({
       currency_code: initialValues?.currency_code || activeEntity?.currency_code || "EUR",
       note: initialValues?.note ?? defaultEstimateNote,
       payment_terms: initialValues?.payment_terms ?? defaultPaymentTerms,
+      date_valid_till:
+        initialValues?.date_valid_till ||
+        calculateDueDate(initialValues?.date || new Date().toISOString(), defaultEstimateValidDays),
     },
   });
 
@@ -165,13 +175,20 @@ export default function CreateEstimateForm({
     }
   }, [nextNumberData?.number, form]);
 
-  // Update default note when entity loads
+  // Update default note and valid-till date when entity loads
   useEffect(() => {
     const entityDefaultNote = (activeEntity?.settings as any)?.default_estimate_note;
     if (entityDefaultNote && !form.getValues("note")) {
       form.setValue("note", entityDefaultNote);
     }
-  }, [activeEntity, form]);
+    if (!initialValues?.date_valid_till) {
+      const validDays = (activeEntity?.settings as any)?.default_estimate_valid_days ?? 30;
+      const currentDate = form.getValues("date");
+      if (currentDate) {
+        form.setValue("date_valid_till", calculateDueDate(currentDate, validDays));
+      }
+    }
+  }, [activeEntity, form, initialValues?.date_valid_till]);
 
   // Auto-add tax field for tax subject entities
   useEffect(() => {
@@ -300,6 +317,16 @@ export default function CreateEstimateForm({
     }
   }, [activeEntity, form]);
 
+  // Recalculate valid-till date when document date changes
+  const prevDateRef = useRef(form.getValues("date"));
+  useEffect(() => {
+    const currentDate = formValues.date;
+    if (!currentDate || currentDate === prevDateRef.current) return;
+    prevDateRef.current = currentDate;
+    const validDays = (activeEntity?.settings as any)?.default_estimate_valid_days ?? 30;
+    form.setValue("date_valid_till", calculateDueDate(currentDate, validDays));
+  }, [formValues.date, activeEntity, form]);
+
   useEffect(() => {
     const callback = onChangeRef.current;
     if (!callback) return;

package/src/components/estimates/list/list-table.tsx

@@ -52,6 +52,7 @@ type EstimateListTableProps = {
   onDownloadSuccess?: (fileName: string) => void;
   onDownloadError?: (error: string) => void;
   onExportSelected?: (documentIds: string[]) => void;
+  onCreateNew?: () => void;
 } & ListTableProps<Estimate>;
 
 export default function EstimateListTable({
@@ -65,6 +66,7 @@ export default function EstimateListTable({
   onDownloadSuccess,
   onDownloadError,
   onExportSelected,
+  onCreateNew,
   ...i18nProps
 }: EstimateListTableProps) {
   const t = createTranslation({
@@ -84,7 +86,6 @@ export default function EstimateListTable({
       limit: params.limit,
       next_cursor: params.next_cursor,
       prev_cursor: params.prev_cursor,
-      order_by: params.order_by,
       search: params.search,
       query: params.query,
     });
@@ -130,7 +131,6 @@ export default function EstimateListTable({
       {
         id: "number",
         header: t("Number"),
-        sortable: true,
         cell: (estimate) => (
           <div className="flex items-center gap-2">
             <Button variant="link" className="cursor-pointer py-0 underline" onClick={() => onRowClick?.(estimate)}>
@@ -155,26 +155,22 @@ export default function EstimateListTable({
       {
         id: "date",
         header: t("Date"),
-        sortable: true,
         cell: (estimate) => <FormattedDate date={estimate.date} />,
       },
       {
         id: "date_valid_till",
         header: t("Valid Until"),
-        sortable: true,
         cell: (estimate) => <FormattedDate date={estimate.date_valid_till} />,
       },
       {
         id: "total",
         header: t("Total"),
-        sortable: true,
         align: "right",
         cell: (estimate) => estimate.total,
       },
       {
         id: "total_with_tax",
         header: t("Total with Tax"),
-        sortable: true,
         align: "right",
         cell: (estimate) => estimate.total_with_tax,
       },
@@ -208,6 +204,7 @@ export default function EstimateListTable({
       cacheKey="estimates"
       resourceName="estimate"
       createNewLink={entityId ? `/app/${entityId}/documents/add/estimate` : undefined}
+      onCreateNew={onCreateNew}
       entityId={entityId}
       filterConfig={filterConfig}
       t={t}

package/src/components/estimates/list/locales/de.ts

@@ -32,6 +32,7 @@ export default {
   "No results found": "Keine Angebote gefunden",
   "Try adjusting your search criteria": "Versuchen Sie, Ihre Suchkriterien anzupassen",
   "Clear search": "Suche zurücksetzen",
+  "Clear all": "Alles zurücksetzen",
   selected: "ausgewählt",
   "Export PDFs": "PDFs exportieren",
   "Deselect all": "Auswahl aufheben",

package/src/components/estimates/list/locales/es.ts

@@ -29,6 +29,7 @@ export default {
   "No results found": "No se encontraron presupuestos",
   "Try adjusting your search criteria": "Intente ajustar sus criterios de búsqueda",
   "Clear search": "Limpiar búsqueda",
+  "Clear all": "Borrar todo",
   selected: "seleccionados",
   "Export PDFs": "Exportar PDFs",
   "Deselect all": "Deseleccionar todo",

package/src/components/estimates/list/locales/fr.ts

@@ -29,6 +29,7 @@ export default {
   "No results found": "Aucun devis trouvé",
   "Try adjusting your search criteria": "Essayez d'ajuster vos critères de recherche",
   "Clear search": "Effacer la recherche",
+  "Clear all": "Tout effacer",
   selected: "sélectionnés",
   "Export PDFs": "Exporter les PDF",
   "Deselect all": "Tout désélectionner",

package/src/components/estimates/list/locales/hr.ts

@@ -29,6 +29,7 @@ export default {
   "No results found": "Nisu pronađeni predračuni",
   "Try adjusting your search criteria": "Pokušajte prilagoditi kriterije pretraživanja",
   "Clear search": "Očisti pretraživanje",
+  "Clear all": "Očisti sve",
   selected: "odabranih",
   "Export PDFs": "Izvezi PDF-ove",
   "Deselect all": "Poništi odabir",

package/src/components/estimates/list/locales/it.ts

@@ -29,6 +29,7 @@ export default {
   "No results found": "Nessun preventivo trovato",
   "Try adjusting your search criteria": "Prova a modificare i criteri di ricerca",
   "Clear search": "Cancella ricerca",
+  "Clear all": "Cancella tutto",
   selected: "selezionati",
   "Export PDFs": "Esporta PDF",
   "Deselect all": "Deseleziona tutto",

package/src/components/estimates/list/locales/nl.ts

@@ -29,6 +29,7 @@ export default {
   "No results found": "Geen offertes gevonden",
   "Try adjusting your search criteria": "Probeer uw zoekcriteria aan te passen",
   "Clear search": "Zoekopdracht wissen",
+  "Clear all": "Alles wissen",
   selected: "geselecteerd",
   "Export PDFs": "PDFs exporteren",
   "Deselect all": "Alles deselecteren",

package/src/components/estimates/list/locales/pl.ts

@@ -29,6 +29,7 @@ export default {
   "No results found": "Nie znaleziono kosztorysów",
   "Try adjusting your search criteria": "Spróbuj dostosować kryteria wyszukiwania",
   "Clear search": "Wyczyść wyszukiwanie",
+  "Clear all": "Wyczyść wszystko",
   selected: "wybranych",
   "Export PDFs": "Eksportuj PDF-y",
   "Deselect all": "Odznacz wszystko",

package/src/components/estimates/list/locales/pt.ts

@@ -29,6 +29,7 @@ export default {
   "No results found": "Nenhum orçamento encontrado",
   "Try adjusting your search criteria": "Tente ajustar os seus critérios de pesquisa",
   "Clear search": "Limpar pesquisa",
+  "Clear all": "Limpar tudo",
   selected: "selecionados",
   "Export PDFs": "Exportar PDFs",
   "Deselect all": "Desselecionar tudo",

package/src/components/estimates/list/locales/sl.ts

@@ -32,6 +32,7 @@ export default {
   "No results found": "Ni najdenih predračunov",
   "Try adjusting your search criteria": "Poskusite prilagoditi iskalne kriterije",
   "Clear search": "Počisti iskanje",
+  "Clear all": "Počisti vse",
   selected: "izbranih",
   "Export PDFs": "Izvozi PDF-je",
   "Deselect all": "Počisti izbiro",

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

@@ -40,8 +40,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 +54,10 @@ export type DocumentExportFormProps = {
 export function DocumentExportForm({
   entityId,
   token,
+  accountId,
   language,
   t,
+  apiBaseUrl = "",
   onSuccess,
   onError,
   onPdfExportStarted,
@@ -86,11 +91,12 @@ 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({
@@ -132,10 +138,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 }),
         },
       });
 

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

@@ -27,6 +27,7 @@ import {
 } 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 +54,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 +90,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 +109,8 @@ export default function CreateInvoiceForm({
   onAddNewTax,
   onHeaderActionChange,
   initialValues,
+  sourceDocuments,
+  forceLinkedDocuments,
   mode = "create",
   documentId,
   t: translateProp,
@@ -118,6 +131,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
@@ -327,7 +341,11 @@ export default function CreateInvoiceForm({
       currency_code: initialValues?.currency_code || activeEntity?.currency_code || "EUR",
       note: initialValues?.note ?? defaultInvoiceNote,
       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,
     },
   });
 
@@ -630,6 +648,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,6 +668,7 @@ export default function CreateInvoiceForm({
       updateInvoice,
       documentId,
       eslogValidationEnabled,
+      forceLinkedDocuments,
       form,
       isEditMode,
       isEslogAvailable,
@@ -721,6 +745,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 +763,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>("");
@@ -962,6 +1005,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,6 +109,17 @@ 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",

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

@@ -95,6 +95,17 @@ export default {
   "Net price": "Precio neto",
   "Gross price (tax included)": "Precio bruto (impuestos incluidos)",
   "Net price (before tax)": "Precio neto (antes de impuestos)",
+  // Linked documents
+  "Linked documents": "Documentos vinculados",
+  Type: "Tipo",
+  Total: "Total",
+  "Delivery note": "Albarán",
+  Invoice: "Factura",
+  Estimate: "Presupuesto",
+  "Credit note": "Nota de crédito",
+  "Advance invoice": "Factura anticipada",
+  "FINA fiscalized invoices always use the current date":
+    "Las facturas fiscalizadas con FINA siempre usan la fecha actual",
   "Service Date": "Fecha de servicio",
   "Single Date": "Fecha única",
   "Date Range": "Rango de fechas",