@spaceinvoices/react-ui 0.4.1 → 0.4.3

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

@@ -39,6 +39,25 @@ type FursInlineProps = {
   isSkipped?: boolean;
 };
 
+type FinaPremise = {
+  id: string;
+  premise_id: string;
+};
+
+type FinaDevice = {
+  id: string;
+  device_id: string;
+};
+
+type FinaInlineProps = {
+  premises: FinaPremise[];
+  devices: FinaDevice[];
+  selectedPremise?: string;
+  selectedDevice?: string;
+  onPremiseChange: (value: string | undefined) => void;
+  onDeviceChange: (value: string | undefined) => void;
+};
+
 type ServiceDateProps = {
   dateType: "single" | "range";
   onDateTypeChange: (type: "single" | "range") => void;
@@ -50,6 +69,7 @@ type DocumentDetailsSectionProps = {
   t: (key: string) => string;
   children?: React.ReactNode; // For document-specific additions (e.g., mark as paid for invoices)
   fursInline?: FursInlineProps; // FURS premise/device inline with number
+  finaInline?: FinaInlineProps; // FINA premise/device inline with number
   serviceDate?: ServiceDateProps; // Service date section (invoice only)
 };
 
@@ -59,16 +79,20 @@ export function DocumentDetailsSection({
   t,
   children,
   fursInline,
+  finaInline,
   serviceDate,
 }: DocumentDetailsSectionProps) {
   // Determine the date field name based on document type
+  // Delivery notes don't have a secondary date field
+  const hasSecondaryDate = documentType !== "delivery_note";
   const dateFieldName =
     documentType === "invoice" || documentType === "advance_invoice" ? "date_due" : "date_valid_till";
   const dateFieldLabel =
     documentType === "invoice" || documentType === "advance_invoice" ? t("Due Date") : t("Valid Until");
 
-  // Check if FURS inline should show premise/device selects
+  // Check if FURS/FINA inline should show premise/device selects
   const showFursSelects = fursInline && !fursInline.isSkipped;
+  const showFinaSelects = !!finaInline;
 
   return (
     <div className="flex-1 space-y-4">
@@ -125,6 +149,50 @@ export function DocumentDetailsSection({
                   </TooltipContent>
                 </Tooltip>
               </div>
+            ) : showFinaSelects ? (
+              <div className="flex gap-2">
+                <Select
+                  value={finaInline.selectedPremise || ""}
+                  onValueChange={(v) => finaInline.onPremiseChange(v ?? undefined)}
+                >
+                  <SelectTrigger className="w-24">
+                    <SelectValue placeholder={t("Premise")} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {finaInline.premises.map((premise) => (
+                      <SelectItem key={premise.id} value={premise.premise_id}>
+                        {premise.premise_id}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Select
+                  value={finaInline.selectedDevice || ""}
+                  onValueChange={(v) => finaInline.onDeviceChange(v ?? undefined)}
+                  disabled={!finaInline.selectedPremise || finaInline.devices.length === 0}
+                >
+                  <SelectTrigger className="w-24">
+                    <SelectValue placeholder={t("Device")} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {finaInline.devices.map((device) => (
+                      <SelectItem key={device.id} value={device.device_id}>
+                        {device.device_id}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <FormControl>
+                      <Input {...field} disabled className="flex-1" />
+                    </FormControl>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{t("Number format can be changed in settings")}</p>
+                  </TooltipContent>
+                </Tooltip>
+              </div>
             ) : (
               <Tooltip>
                 <TooltipTrigger asChild>
@@ -280,38 +348,40 @@ export function DocumentDetailsSection({
         />
       )}
 
-      <FormField
-        control={control}
-        name={dateFieldName}
-        render={({ field }) => (
-          <FormItem>
-            <FormLabel className="">{dateFieldLabel}</FormLabel>
-            <Popover>
-              <PopoverTrigger asChild>
-                <FormControl>
-                  <Button
-                    variant="outline"
-                    className={cn("w-full pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
-                  >
-                    {field.value ? new Date(field.value).toLocaleDateString() : <span>{t("Pick a date")}</span>}
-                    <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
-                  </Button>
-                </FormControl>
-              </PopoverTrigger>
-              <PopoverContent className="w-auto p-0" align="start">
-                <Calendar
-                  mode="single"
-                  selected={field.value ? new Date(field.value) : undefined}
-                  onSelect={(date) => field.onChange(date?.toISOString())}
-                  disabled={(date) => date < new Date("1900-01-01")}
-                  initialFocus
-                />
-              </PopoverContent>
-            </Popover>
-            <FormMessage />
-          </FormItem>
-        )}
-      />
+      {hasSecondaryDate && (
+        <FormField
+          control={control}
+          name={dateFieldName}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="">{dateFieldLabel}</FormLabel>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      variant="outline"
+                      className={cn("w-full pl-3 text-left font-normal", !field.value && "text-muted-foreground")}
+                    >
+                      {field.value ? new Date(field.value).toLocaleDateString() : <span>{t("Pick a date")}</span>}
+                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="start">
+                  <Calendar
+                    mode="single"
+                    selected={field.value ? new Date(field.value) : undefined}
+                    onSelect={(date) => field.onChange(date?.toISOString())}
+                    disabled={(date) => date < new Date("1900-01-01")}
+                    initialFocus
+                  />
+                </PopoverContent>
+              </Popover>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+      )}
 
       <FormField
         control={control}

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

@@ -8,6 +8,7 @@ import { useEntities } from "@/ui/providers/entities-context";
 import { useSDK } from "@/ui/providers/sdk-provider";
 import { ScaledDocumentPreview } from "../shared/scaled-document-preview";
 import { useA4Scaling } from "../shared/use-a4-scaling";
+import type { DocumentTypes } from "../types";
 import { filterUnresolvedTaxes } from "./prepare-preview-data";
 
 export type PdfTemplateId = "modern" | "classic" | "minimal" | "fashion";
@@ -23,6 +24,12 @@ type LiveInvoicePreviewProps = {
   locale?: string;
   /** Fixed scale to use instead of dynamic scaling. Useful to prevent layout shifts. */
   fixedScale?: number;
+  /** Translation function for UI strings */
+  t?: (key: string) => string;
+  /** Document type label for display (e.g., "Invoice", "Estimate") */
+  documentTypeLabel?: string;
+  /** Document type to determine which render endpoint to use */
+  documentType?: DocumentTypes;
 };
 
 /**
@@ -44,7 +51,11 @@ export function LiveInvoicePreview({
   className,
   locale,
   fixedScale,
+  t: tProp,
+  documentTypeLabel,
+  documentType = "invoice",
 }: LiveInvoicePreviewProps) {
+  const t = tProp ?? ((key: string) => key);
   const [previewHtml, setPreviewHtml] = useState<string>("");
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -104,12 +115,27 @@ export function LiveInvoicePreview({
           },
         };
 
-        // Call the render API using the SDK wrapper
-        const html = await sdk.invoices.renderInvoicePreview(
-          previewData as any,
-          { partial: "true", template, locale },
-          { entity_id: activeEntity.id },
-        );
+        // Call the render API using the appropriate SDK method for the document type
+        const renderParams = { partial: "true" as const, template, locale };
+        const requestOpts = { entity_id: activeEntity.id };
+        let html: string;
+        switch (documentType) {
+          case "estimate":
+            html = await sdk.estimates.renderEstimatePreview(previewData as any, renderParams, requestOpts);
+            break;
+          case "credit_note":
+            html = await sdk.creditNotes.renderCreditNotePreview(previewData as any, renderParams, requestOpts);
+            break;
+          case "advance_invoice":
+            html = await sdk.advanceInvoices.renderAdvanceInvoicePreview(previewData as any, renderParams, requestOpts);
+            break;
+          case "delivery_note":
+            html = await sdk.deliveryNotes.renderDeliveryNotePreview(previewData as any, renderParams, requestOpts);
+            break;
+          default:
+            html = await sdk.invoices.renderInvoicePreview(previewData as any, renderParams, requestOpts);
+            break;
+        }
 
         setPreviewHtml(html);
         setError(null);
@@ -146,6 +172,7 @@ export function LiveInvoicePreview({
       template,
       locale,
       sdk,
+      documentType,
     ],
   );
 
@@ -195,7 +222,7 @@ export function LiveInvoicePreview({
         <div className="absolute inset-0 z-10 flex items-center justify-center bg-background/80 backdrop-blur-sm">
           <div className="flex flex-col items-center gap-2">
             <Loader2 className="h-8 w-8 animate-spin text-primary" />
-            <p className="text-muted-foreground text-sm">Generating preview...</p>
+            <p className="text-muted-foreground text-sm">{t("Generating preview...")}</p>
           </div>
         </div>
       )}
@@ -204,7 +231,7 @@ export function LiveInvoicePreview({
       {error && !isLoading && (
         <div className="flex min-h-[200px] items-center justify-center rounded-lg border border-destructive/50 bg-destructive/10 p-8">
           <div className="text-center">
-            <p className="font-semibold text-destructive">Preview Error</p>
+            <p className="font-semibold text-destructive">{t("Preview Error")}</p>
             <p className="text-muted-foreground text-sm">{error}</p>
           </div>
         </div>
@@ -214,8 +241,8 @@ export function LiveInvoicePreview({
       {!previewHtml && !isLoading && !error && (
         <div className="flex min-h-[200px] items-center justify-center rounded-lg border border-dashed p-8">
           <div className="text-center">
-            <p className="font-semibold text-muted-foreground">Invoice Preview</p>
-            <p className="text-muted-foreground text-sm">Start filling the form to see a live preview</p>
+            <p className="font-semibold text-muted-foreground">{documentTypeLabel || t("Document Preview")}</p>
+            <p className="text-muted-foreground text-sm">{t("Start filling the form to see a live preview")}</p>
           </div>
         </div>
       )}

package/src/components/documents/create/mark-as-paid-section.tsx

@@ -29,6 +29,8 @@ type MarkAsPaidSectionProps = {
   onPaymentTypesChange: (values: string[]) => void;
   /** Translation function */
   t: (key: string) => string;
+  /** Always show payment type selector (e.g. for FINA fiscalization) */
+  alwaysShowPaymentType?: boolean;
 };
 
 export function MarkAsPaidSection({
@@ -37,9 +39,12 @@ export function MarkAsPaidSection({
   paymentTypes,
   onPaymentTypesChange,
   t,
+  alwaysShowPaymentType,
 }: MarkAsPaidSectionProps) {
+  const showPaymentTypes = checked || alwaysShowPaymentType;
+
   return (
-    <div className={cn("flex flex-col gap-4 rounded-md border p-4", checked && "gap-3")}>
+    <div className={cn("flex flex-col gap-4 rounded-md border p-4", showPaymentTypes && "gap-3")}>
       <div className="flex flex-row items-center space-x-3 space-y-0">
         <Checkbox checked={checked} onCheckedChange={(v) => onCheckedChange(v === true)} />
         <div className="flex items-center gap-1 leading-none">
@@ -61,9 +66,13 @@ export function MarkAsPaidSection({
         </div>
       </div>
 
-      {checked && (
+      {showPaymentTypes && (
         <div className="flex flex-col gap-2">
+          {alwaysShowPaymentType && !checked && (
+            <Label className="text-muted-foreground text-xs">{t("Payment Type")}</Label>
+          )}
           {paymentTypes.map((type, index) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: payment types list uses index key
             <div key={index} className="flex items-center gap-2">
               <Select
                 value={type}

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

@@ -33,7 +33,7 @@ type PrepareDocumentOptions = {
   /** For invoices/credit notes: payment types when markAsPaid is true */
   paymentTypes?: string[];
   /** Document type for specific date handling */
-  documentType: "invoice" | "estimate" | "credit_note" | "advance_invoice";
+  documentType: "invoice" | "estimate" | "credit_note" | "advance_invoice" | "delivery_note";
   /** Secondary date field value (date_due for invoices, date_valid_till for estimates) */
   secondaryDate?: string;
   /** Map of item index to gross price mode (collected from component state) */

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

@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useSDK } from "@/ui/providers/sdk-provider";
 
 // Document type union for API calls
-export type DocumentType = "invoice" | "estimate" | "credit_note" | "advance_invoice";
+export type DocumentType = "invoice" | "estimate" | "credit_note" | "advance_invoice" | "delivery_note";
 
 // Cache key map for invalidation
 const CACHE_KEYS: Record<DocumentType, string> = {
@@ -10,6 +10,7 @@ const CACHE_KEYS: Record<DocumentType, string> = {
   estimate: "estimates",
   credit_note: "credit-notes",
   advance_invoice: "advance-invoices",
+  delivery_note: "delivery-notes",
 };
 
 // ============================================================================

package/src/components/documents/shared/document-preview-display.tsx

@@ -27,7 +27,7 @@ function getDocTypePathFromShareableId(shareableId: string): string {
 type DocumentPreviewDisplayProps = {
   /** The document to display (invoice, estimate, credit note, or advance invoice) */
   document: Document;
-  template?: "modern";
+  template?: "modern" | "classic" | "minimal" | "fashion";
   className?: string;
   apiBaseUrl?: string;
   /** Locale for document rendering (e.g., "en-US", "sl-SI"). Uses user's UI language. */
@@ -36,6 +36,10 @@ type DocumentPreviewDisplayProps = {
   isPublicView?: boolean;
   /** Shareable ID for public view (required when isPublicView is true) */
   shareableId?: string;
+  /** Translation function for UI strings */
+  t?: (key: string) => string;
+  /** Document type label for display (e.g., "Invoice", "Estimate") */
+  documentTypeLabel?: string;
 };
 
 /**
@@ -53,7 +57,10 @@ export function DocumentPreviewDisplay({
   locale,
   isPublicView = false,
   shareableId,
+  t: tProp,
+  documentTypeLabel,
 }: DocumentPreviewDisplayProps) {
+  const t = tProp ?? ((key: string) => key);
   const [previewHtml, setPreviewHtml] = useState<string>("");
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -133,7 +140,7 @@ export function DocumentPreviewDisplay({
         <div className="flex h-full items-center justify-center rounded-lg border bg-muted/50">
           <div className="flex flex-col items-center gap-2">
             <Loader2 className="h-8 w-8 animate-spin text-primary" />
-            <p className="text-muted-foreground text-sm">Loading preview...</p>
+            <p className="text-muted-foreground text-sm">{t("Loading preview...")}</p>
           </div>
         </div>
       )}
@@ -143,7 +150,7 @@ export function DocumentPreviewDisplay({
         <div className="flex h-full items-center justify-center rounded-lg border border-destructive/50 bg-destructive/10 p-8">
           <div className="flex flex-col items-center gap-2 text-center">
             <AlertCircle className="h-8 w-8 text-destructive" />
-            <p className="font-semibold text-destructive">Preview Error</p>
+            <p className="font-semibold text-destructive">{t("Preview Error")}</p>
             <p className="text-muted-foreground text-sm">{error}</p>
           </div>
         </div>
@@ -157,8 +164,8 @@ export function DocumentPreviewDisplay({
               <FileText className="h-8 w-8 text-muted-foreground" />
             </div>
             <div>
-              <p className="font-medium text-muted-foreground">Document Preview</p>
-              <p className="text-muted-foreground/70 text-sm">Preview will appear here</p>
+              <p className="font-medium text-muted-foreground">{documentTypeLabel || t("Document Preview")}</p>
+              <p className="text-muted-foreground/70 text-sm">{t("Preview will appear here")}</p>
             </div>
           </div>
         </div>

package/src/components/documents/types.ts

@@ -2,7 +2,7 @@
  * Shared document types for invoices, estimates, credit notes, and advance invoices
  */
 
-export type DocumentTypes = "invoice" | "estimate" | "credit_note" | "advance_invoice";
+export type DocumentTypes = "invoice" | "estimate" | "credit_note" | "advance_invoice" | "delivery_note";
 
 export interface DocumentConfig {
   type: DocumentTypes;
@@ -51,6 +51,15 @@ export const DOCUMENT_CONFIGS: Record<DocumentTypes, DocumentConfig> = {
     singularName: "Advance Invoice",
     pluralName: "Advance Invoices",
   },
+  delivery_note: {
+    type: "delivery_note",
+    apiEndpoint: "delivery-notes",
+    cacheKey: "delivery-notes",
+    dateFieldName: null,
+    dateFieldLabel: null,
+    singularName: "Delivery Note",
+    pluralName: "Delivery Notes",
+  },
 } as const;
 
 /**

package/src/components/documents/view/document-actions-bar.tsx

@@ -1,5 +1,6 @@
 import type { AdvanceInvoice, CreditNote, Estimate, Invoice } from "@spaceinvoices/js-sdk";
 import {
+  Ban,
   Check,
   CheckCircle,
   ChevronDown,
@@ -11,6 +12,7 @@ import {
   Mail,
   Pencil,
   Plus,
+  RefreshCw,
   Share2,
   Trash2,
 } from "lucide-react";
@@ -88,6 +90,14 @@ interface DocumentActionsBarProps extends ComponentTranslationProps {
   onDeleteDraft?: () => void;
   /** Whether draft deletion is in progress */
   isDeletingDraft?: boolean;
+  /** Called when user wants to create a recurring schedule from this document */
+  onCreateRecurring?: () => void;
+  /** Custom label for recurring button (e.g. "Edit Recurring" when one already exists) */
+  recurringLabel?: string;
+  /** Called when user wants to void the document */
+  onVoid?: () => void;
+  /** Whether voiding is in progress */
+  isVoiding?: boolean;
 }
 
 function getApiLocale(uiLanguage: string): string {
@@ -128,6 +138,10 @@ export function DocumentActionsBar({
   isFinalizing,
   onDeleteDraft,
   isDeletingDraft,
+  onCreateRecurring,
+  recurringLabel,
+  onVoid,
+  isVoiding,
   ...i18nProps
 }: DocumentActionsBarProps) {
   const t = createTranslation({ translations, locale: currentLocale, ...i18nProps });
@@ -298,6 +312,14 @@ export function DocumentActionsBar({
         </Button>
       ) : null}
 
+      {/* Recurring */}
+      {onCreateRecurring && (
+        <Button variant="outline" size="sm" onClick={onCreateRecurring} className="cursor-pointer">
+          <RefreshCw className="mr-2 h-4 w-4" />
+          {recurringLabel || t("Recurring")}
+        </Button>
+      )}
+
       {/* Duplicate/Convert */}
       {onDuplicate && (
         <DropdownMenu>
@@ -318,6 +340,14 @@ export function DocumentActionsBar({
         </DropdownMenu>
       )}
 
+      {/* Void */}
+      {!isDraft && onVoid && (
+        <Button variant="destructive" size="sm" onClick={onVoid} disabled={isVoiding} className="cursor-pointer">
+          {isVoiding ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Ban className="mr-2 h-4 w-4" />}
+          {isVoiding ? t("Voiding...") : t("Void")}
+        </Button>
+      )}
+
       {/* Draft Actions */}
       {isDraft && onFinalize && (
         <Button variant="default" size="sm" onClick={onFinalize} disabled={isFinalizing} className="cursor-pointer">

package/src/components/documents/view/document-details-card.tsx

@@ -1,4 +1,4 @@
-import type { AdvanceInvoice, CreditNote, Estimate, Invoice } from "@spaceinvoices/js-sdk";
+import type { AdvanceInvoice, CreditNote, DeliveryNote, Estimate, Invoice } from "@spaceinvoices/js-sdk";
 import { Badge } from "@/ui/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/ui/components/ui/card";
 import { Separator } from "@/ui/components/ui/separator";
@@ -17,8 +17,8 @@ import sl from "./locales/sl";
 const translations = { sl, de, it, fr, es, pt, nl, pl, hr } as const;
 
 // Document type union
-type Document = Invoice | Estimate | CreditNote | AdvanceInvoice;
-type DocumentType = "invoice" | "estimate" | "credit_note" | "advance_invoice";
+type Document = Invoice | Estimate | CreditNote | AdvanceInvoice | DeliveryNote;
+type DocumentType = "invoice" | "estimate" | "credit_note" | "advance_invoice" | "delivery_note";
 
 interface DocumentDetailsCardProps extends ComponentTranslationProps {
   document: Document;

package/src/components/documents/view/document-payments-list.tsx

@@ -147,9 +147,9 @@ export function DocumentPaymentsList({
     try {
       await sdk.payments.delete(paymentToDelete.id, { entity_id: entityId });
 
-      // Invalidate queries to refresh data
-      queryClient.invalidateQueries({ queryKey: ["payments"] });
-      queryClient.invalidateQueries({ queryKey: ["documents"] });
+      // Invalidate this document's payments and document view
+      queryClient.invalidateQueries({ queryKey: ["payments", documentType, documentId] });
+      queryClient.invalidateQueries({ queryKey: ["documents", documentType, documentId] });
 
       onDeleteSuccess?.();
     } catch (error) {

package/src/components/documents/view/document-relations-list.tsx

@@ -0,0 +1,105 @@
+import type { DocumentRelation } from "@spaceinvoices/js-sdk";
+import { Link2 } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/ui/components/ui/card";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import de from "./locales/de";
+import es from "./locales/es";
+import fr from "./locales/fr";
+import hr from "./locales/hr";
+import it from "./locales/it";
+import nl from "./locales/nl";
+import pl from "./locales/pl";
+import pt from "./locales/pt";
+import sl from "./locales/sl";
+
+const translations = { sl, de, it, fr, es, pt, nl, pl, hr } as const;
+
+interface DocumentRelationsListProps extends ComponentTranslationProps {
+  documentId: string;
+  documentRelations?: DocumentRelation[];
+  locale?: string;
+  onNavigate?: (documentId: string) => void;
+}
+
+function getDocumentTypeLabel(type: string, t: (key: string) => string): string {
+  const labels: Record<string, string> = {
+    invoice: t("Invoice"),
+    estimate: t("Estimate"),
+    credit_note: t("Credit note"),
+    advance_invoice: t("Advance invoice"),
+    delivery_note: t("Delivery note"),
+  };
+  return labels[type] || type;
+}
+
+function getRelationLabel(relationType: string, t: (key: string) => string): string {
+  const labels: Record<string, string> = {
+    credit_for: t("Credit for"),
+    converted_from: t("Converted from"),
+    converted_to: t("Converted to"),
+    has_credit: t("Has credit"),
+    advance_applied: t("Advance applied"),
+    applied_to: t("Applied to"),
+    delivered_for: t("Delivered for"),
+    has_delivery: t("Has delivery"),
+    fulfills: t("Fulfills"),
+    fulfilled_by: t("Fulfilled by"),
+    references: t("References"),
+  };
+  return labels[relationType] || relationType;
+}
+
+export function DocumentRelationsList({
+  documentId,
+  documentRelations,
+  locale = "en",
+  onNavigate,
+  ...i18nProps
+}: DocumentRelationsListProps) {
+  const t = createTranslation({ translations, locale, ...i18nProps });
+
+  const relations = documentRelations || [];
+
+  if (relations.length === 0) {
+    return null;
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle className="text-lg">
+          {t("Linked documents")} ({relations.length})
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-2">
+          {relations.map((relation) => {
+            const isSource = relation.source_id === documentId;
+            const otherType = isSource ? relation.target_type : relation.source_type;
+            const otherId = isSource ? relation.target_id : relation.source_id;
+
+            return (
+              <div key={relation.id} className="flex items-center justify-between rounded-md border p-3">
+                <div className="flex flex-col gap-0.5">
+                  <span className="font-medium text-sm">{getDocumentTypeLabel(otherType, t)}</span>
+                  <span className="text-muted-foreground text-xs">{getRelationLabel(relation.relation_type, t)}</span>
+                </div>
+                {onNavigate ? (
+                  <button
+                    type="button"
+                    onClick={() => onNavigate(otherId)}
+                    className="flex items-center gap-1 text-primary text-sm hover:underline"
+                  >
+                    <Link2 className="h-3.5 w-3.5" />
+                    {t("View")}
+                  </button>
+                ) : null}
+              </div>
+            );
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}