@spaceinvoices/react-ui 0.4.2 → 0.4.4

package/src/components/delivery-notes/list/locales/sl.ts

@@ -0,0 +1,13 @@
+export default {
+  "Your list is empty": "Seznam dobavnic je prazen",
+  "Get started by creating your first entry": "Začnite z ustvarjanjem prve dobavnice",
+  "Create new": "Ustvari dobavnico",
+  "No results found": "Ni najdenih dobavnic",
+  selected: "izbranih",
+  "Export PDFs": "Izvozi PDF-je",
+  "Deselect all": "Počisti izbor",
+  "Copy to Invoice": "Kopiraj v račun",
+  "Clear all": "Počisti vse",
+  Void: "Storniraj",
+  Voided: "Stornirano",
+} as const;

package/src/components/delivery-notes/list/use-delivery-note-download.ts

@@ -0,0 +1,63 @@
+import type { DeliveryNote } from "@spaceinvoices/js-sdk";
+import { useState } from "react";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import { useEntities } from "@/ui/providers/entities-context";
+import { useSDK } from "@/ui/providers/sdk-provider";
+
+type UseDeliveryNoteDownloadProps = {
+  onDownloadStart?: () => void;
+  onDownloadSuccess?: (fileName: string) => void;
+  onDownloadError?: (error: string) => void;
+} & ComponentTranslationProps;
+
+export function useDeliveryNoteDownload({
+  onDownloadStart,
+  onDownloadSuccess,
+  onDownloadError,
+  ...i18nProps
+}: UseDeliveryNoteDownloadProps) {
+  const [isDownloading, setIsDownloading] = useState(false);
+  const { activeEntity } = useEntities();
+  const { sdk } = useSDK();
+  const t = createTranslation(i18nProps);
+
+  const downloadPDF = async (deliveryNote: DeliveryNote) => {
+    if (!activeEntity?.id || !sdk) {
+      console.error("Missing SDK or active entity for PDF download");
+      onDownloadError?.(t("Failed to download PDF"));
+      return;
+    }
+
+    setIsDownloading(true);
+    onDownloadStart?.();
+
+    try {
+      // SDK signature: renderPdf(id, params?, SDKMethodOptions?)
+      // entity_id goes in SDKMethodOptions (last arg), not params
+      // Note: renderPdf is on invoices module but works with any document ID
+      const blob = await sdk.invoices.renderPdf(deliveryNote.id, {}, { entity_id: activeEntity.id });
+      const downloadUrl = window.URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = downloadUrl;
+      const fileName = `${t("Delivery Note")} ${deliveryNote.number}.pdf`;
+      link.download = fileName;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      window.URL.revokeObjectURL(downloadUrl);
+
+      onDownloadSuccess?.(fileName);
+    } catch (error) {
+      console.error("Error downloading PDF:", error);
+      onDownloadError?.(t("Failed to download PDF"));
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  return {
+    isDownloading,
+    downloadPDF,
+  };
+}

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

@@ -83,10 +83,10 @@ export function DocumentDetailsSection({
   serviceDate,
 }: DocumentDetailsSectionProps) {
   // Determine the date field name based on document type
-  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");
+  // Delivery notes don't have a secondary date field
+  const hasSecondaryDate = documentType !== "delivery_note" && documentType !== "advance_invoice";
+  const dateFieldName = documentType === "invoice" ? "date_due" : "date_valid_till";
+  const dateFieldLabel = documentType === "invoice" ? t("Due Date") : t("Valid Until");
 
   // Check if FURS/FINA inline should show premise/device selects
   const showFursSelects = fursInline && !fursInline.isSkipped;
@@ -214,28 +214,44 @@ export function DocumentDetailsSection({
         render={({ field }) => (
           <FormItem>
             <FormLabel className="">{t("Date")} *</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() || date < new Date("1900-01-01")}
-                  initialFocus
-                />
-              </PopoverContent>
-            </Popover>
+            {showFinaSelects ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <FormControl>
+                    <Button variant="outline" disabled className="w-full pl-3 text-left font-normal">
+                      {new Date().toLocaleDateString()}
+                      <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                    </Button>
+                  </FormControl>
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>{t("FINA fiscalized invoices always use the current date")}</p>
+                </TooltipContent>
+              </Tooltip>
+            ) : (
+              <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() || date < new Date("1900-01-01")}
+                    initialFocus
+                  />
+                </PopoverContent>
+              </Popover>
+            )}
             <FormMessage />
           </FormItem>
         )}
@@ -346,38 +362,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/linked-documents-info.tsx

@@ -0,0 +1,82 @@
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/ui/components/ui/table";
+
+export type LinkedDocumentSummary = {
+  id: string;
+  type: string;
+  number: string;
+  date: string;
+  total_with_tax: number;
+  currency_code: string;
+};
+
+type LinkedDocumentsInfoProps = {
+  documents: LinkedDocumentSummary[];
+  locale: string;
+  t: (key: string) => string;
+};
+
+export function LinkedDocumentsInfo({ documents, locale, t }: LinkedDocumentsInfoProps) {
+  if (documents.length === 0) return null;
+
+  const currencyCode = documents[0].currency_code || "EUR";
+
+  const formatDate = (dateStr: string) => {
+    try {
+      return new Date(dateStr).toLocaleDateString(locale, {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+      });
+    } catch {
+      return dateStr;
+    }
+  };
+
+  const formatCurrency = (amount: number) => {
+    try {
+      return new Intl.NumberFormat(locale, {
+        style: "currency",
+        currency: currencyCode,
+      }).format(amount);
+    } catch {
+      return `${amount.toFixed(2)} ${currencyCode}`;
+    }
+  };
+
+  const typeLabel = (type: string) => {
+    const key = {
+      delivery_note: "Delivery note",
+      invoice: "Invoice",
+      estimate: "Estimate",
+      credit_note: "Credit note",
+      advance_invoice: "Advance invoice",
+    }[type];
+    return key ? t(key) : type;
+  };
+
+  return (
+    <div className="space-y-2">
+      <h3 className="font-medium text-muted-foreground text-sm">{t("Linked documents")}</h3>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="h-8 text-xs">{t("Type")}</TableHead>
+            <TableHead className="h-8 text-xs">{t("Number")}</TableHead>
+            <TableHead className="h-8 text-xs">{t("Date")}</TableHead>
+            <TableHead className="h-8 text-right text-xs">{t("Total")}</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {documents.map((doc) => (
+            <TableRow key={doc.id}>
+              <TableCell className="py-1.5 text-sm">{typeLabel(doc.type)}</TableCell>
+              <TableCell className="py-1.5 text-sm">{doc.number}</TableCell>
+              <TableCell className="py-1.5 text-sm">{formatDate(doc.date)}</TableCell>
+              <TableCell className="py-1.5 text-right text-sm">{formatCurrency(doc.total_with_tax)}</TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

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

@@ -8,9 +8,10 @@ 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";
+export type PdfTemplateId = "modern" | "classic" | "condensed" | "minimal" | "fashion";
 
 type LiveInvoicePreviewProps = {
   data: Partial<CreateInvoiceRequest>;
@@ -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/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;
@@ -46,11 +46,20 @@ export const DOCUMENT_CONFIGS: Record<DocumentTypes, DocumentConfig> = {
     type: "advance_invoice",
     apiEndpoint: "advance-invoices",
     cacheKey: "advance-invoices",
-    dateFieldName: "date_due",
-    dateFieldLabel: "Due Date",
+    dateFieldName: null,
+    dateFieldLabel: null,
     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;
 
 /**