@spaceinvoices/react-ui 0.4.8 → 0.4.10

package/src/components/dashboard/top-customers-chart/locales/sv.ts

@@ -0,0 +1,7 @@
+export default {
+  "Revenue": "Intäkter",
+  "Unknown": "Okänd",
+  "Top Customers": "Toppkunder",
+  "Top 5 customers by revenue": "Topp 5 kunder efter intäkter",
+  "No data available": "Ingen data tillgänglig",
+} as const;

package/src/components/dashboard/top-customers-chart/top-customers-chart.tsx

@@ -6,18 +6,26 @@ import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } f
 import { createTranslation } from "@/ui/lib/translation";
 import { ChartEmptyState } from "../chart-empty-state";
 import { LoadingCard } from "../loading-card";
+import bg from "./locales/bg";
+import cs from "./locales/cs";
 import de from "./locales/de";
+import et from "./locales/et";
 import es from "./locales/es";
+import fi from "./locales/fi";
 import fr from "./locales/fr";
 import hr from "./locales/hr";
+import is from "./locales/is";
 import it from "./locales/it";
+import nb from "./locales/nb";
 import nl from "./locales/nl";
 import pl from "./locales/pl";
 import pt from "./locales/pt";
+import sk from "./locales/sk";
 import sl from "./locales/sl";
+import sv from "./locales/sv";
 import { useTopCustomersData } from "./use-top-customers";
 
-const translations = { sl, de, it, fr, es, pt, nl, pl, hr } as const;
+const translations = { bg, cs, de, et, es, fi, fr, hr, is, it, nb, nl, pl, pt, sk, sl, sv } as const;
 
 export type TopCustomersChartData = { name: string; revenue: number }[];
 
@@ -41,13 +49,6 @@ type TurnkeyProps = BaseProps & {
 
 export type TopCustomersChartProps = DataProps | TurnkeyProps;
 
-const chartConfig = {
-  revenue: {
-    label: "Revenue",
-    color: "var(--chart-1)",
-  },
-} satisfies ChartConfig;
-
 function formatCurrency(value: number, currency: string, locale?: string): string {
   return new Intl.NumberFormat(locale, {
     style: "currency",
@@ -74,6 +75,12 @@ export function TopCustomersChart(props: TopCustomersChartProps) {
   }
 
   const hasData = data.length > 0;
+  const chartConfig = {
+    revenue: {
+      label: t("Revenue"),
+      color: "var(--chart-1)",
+    },
+  } satisfies ChartConfig;
 
   // Placeholder data for empty state
   const placeholderData = [
@@ -86,10 +93,14 @@ export function TopCustomersChart(props: TopCustomersChartProps) {
 
   // Truncate long names for display
   const chartData = hasData
-    ? data.map((d) => ({
-        ...d,
-        displayName: d.name.length > 18 ? `${d.name.substring(0, 18)}...` : d.name,
-      }))
+    ? data.map((d) => {
+        const localizedName = d.name === "Unknown" ? t("Unknown") : d.name;
+        return {
+          ...d,
+          name: localizedName,
+          displayName: localizedName.length > 18 ? `${localizedName.substring(0, 18)}...` : localizedName,
+        };
+      })
     : placeholderData;
 
   const chartContent = (

package/src/components/delivery-notes/create/create-delivery-note-form.tsx

@@ -193,6 +193,7 @@ export default function CreateDeliveryNoteForm({
   const formValues = useWatch({
     control: form.control,
   });
+  const prevPayloadRef = useRef("");
 
   // ============================================================================
   // VIES Check - determine if reverse charge applies
@@ -301,36 +302,47 @@ export default function CreateDeliveryNoteForm({
     secondaryAction,
   });
 
-  useEffect(() => {
-    const callback = onChangeRef.current;
-    if (!callback) return;
-
-    const currentItems = form.getValues("items") || [];
+  const buildPreviewPayload = useCallback((values: CreateDeliveryNoteFormValues): DeliveryNotePreviewPayload => {
+    const currentItems = values.items || [];
 
-    // Transform items to use gross_price when price mode is gross
     const transformedItems = currentItems.map((item: any, index: number) => {
       const { price, ...rest } = item;
       const isGross = priceModesRef.current[index] ?? false;
-      if (isGross) {
-        return { ...rest, gross_price: price };
-      }
-      return { ...rest, price };
+      return isGross ? { ...rest, gross_price: price } : { ...rest, price };
     });
 
-    const payload: DeliveryNotePreviewPayload = {
-      number: formValues.number,
-      date: formValues.date,
-      customer_id: formValues.customer_id,
-      customer: formValues.customer,
+    return {
+      number: values.number,
+      date: values.date,
+      customer_id: values.customer_id,
+      customer: values.customer,
       items: transformedItems,
-      currency_code: formValues.currency_code,
-      reference: formValues.reference,
-      note: formValues.note,
-      signature: formValues.signature,
+      currency_code: values.currency_code,
+      reference: values.reference,
+      note: values.note,
+      signature: values.signature,
       hide_prices: hidePrices,
     };
+  }, [hidePrices]);
+
+  const emitPreviewPayload = useCallback((payload: DeliveryNotePreviewPayload) => {
+    const callback = onChangeRef.current;
+    if (!callback) return;
+
+    const payloadStr = JSON.stringify(payload);
+    if (payloadStr === prevPayloadRef.current) return;
+    prevPayloadRef.current = payloadStr;
+
     callback(payload);
-  }, [formValues, form, hidePrices]);
+  }, []);
+
+  useEffect(() => {
+    emitPreviewPayload(buildPreviewPayload(formValues as CreateDeliveryNoteFormValues));
+  }, [buildPreviewPayload, emitPreviewPayload, formValues]);
+
+  const emitCurrentPreviewPayload = useCallback(() => {
+    emitPreviewPayload(buildPreviewPayload(form.getValues()));
+  }, [buildPreviewPayload, emitPreviewPayload, form]);
 
   const onSubmit = (values: CreateDeliveryNoteFormValues) => {
     submitDeliveryNote(values, false);
@@ -379,6 +391,7 @@ export default function CreateDeliveryNoteForm({
           maxTaxesPerItem={activeEntity?.country_rules?.max_taxes_per_item}
           priceModesRef={priceModesRef}
           initialPriceModes={initialPriceModes}
+          onItemsStateChange={emitCurrentPreviewPayload}
           taxesDisabled={reverseChargeApplies}
           taxesDisabledMessage={
             reverseChargeApplies ? t("Reverse charge - tax exempt EU B2B sale") : viesWarning ? viesWarning : undefined

package/src/components/delivery-notes/list/list-table.tsx

@@ -3,6 +3,7 @@ import { useCallback, useMemo, useState } from "react";
 import { DataTable } from "@/ui/components/table/data-table";
 import { FormattedDate } from "@/ui/components/table/date-cell";
 import { useTableFetch } from "@/ui/components/table/hooks/use-table-fetch";
+import { withTableTranslations } from "@/ui/components/table/locales";
 import { SelectionToolbar } from "@/ui/components/table/selection-toolbar";
 import type {
   Column,
@@ -28,7 +29,7 @@ import pl from "./locales/pl";
 import pt from "./locales/pt";
 import sl from "./locales/sl";
 
-const translations = {
+const translations = withTableTranslations({
   en,
   sl,
   de,
@@ -39,12 +40,13 @@ const translations = {
   nl,
   pl,
   hr,
-} as const;
+} as const);
 
 type DeliveryNoteListTableProps = {
   t?: (key: string) => string;
   namespace?: string;
   locale?: string;
+  translationLocale?: string;
   entityId?: string;
   onView?: (deliveryNote: DeliveryNote) => void;
   onDuplicate?: (deliveryNote: DeliveryNote) => void;
@@ -77,6 +79,7 @@ export default function DeliveryNoteListTable({
 }: DeliveryNoteListTableProps) {
   const t = createTranslation({
     translations,
+    locale: i18nProps.translationLocale ?? i18nProps.locale,
     ...i18nProps,
   });
 
@@ -127,16 +130,22 @@ export default function DeliveryNoteListTable({
   }, []);
 
   const selectionToolbar = useCallback(
-    (count: number) => (
-      <SelectionToolbar
-        selectedCount={count}
-        onExportPdfs={onExportSelected ? handleExportPdfs : undefined}
-        onCopyToInvoice={onCopyToInvoice ? handleCopyToInvoice : undefined}
-        onDeselectAll={handleDeselectAll}
-        t={t}
-      />
-    ),
-    [handleExportPdfs, handleCopyToInvoice, handleDeselectAll, onExportSelected, onCopyToInvoice, t],
+    (count: number, data: DeliveryNote[]) => {
+      const hasDrafts = data.some((d) => selectedIds.has(d.id) && (d as any).is_draft);
+
+      return (
+        <SelectionToolbar
+          selectedCount={count}
+          onExportPdfs={onExportSelected ? handleExportPdfs : undefined}
+          onCopyToInvoice={onCopyToInvoice ? handleCopyToInvoice : undefined}
+          copyToInvoiceDisabled={hasDrafts}
+          copyToInvoiceTooltip={hasDrafts ? t("Finalize draft documents before copying to invoice") : undefined}
+          onDeselectAll={handleDeselectAll}
+          t={t}
+        />
+      );
+    },
+    [handleExportPdfs, handleCopyToInvoice, handleDeselectAll, onExportSelected, onCopyToInvoice, selectedIds, t],
   );
 
   const columns: Column<DeliveryNote>[] = useMemo(
@@ -168,7 +177,7 @@ export default function DeliveryNoteListTable({
       {
         id: "date",
         header: t("Date"),
-        cell: (deliveryNote) => <FormattedDate date={deliveryNote.date} />,
+        cell: (deliveryNote) => <FormattedDate date={deliveryNote.date} locale={i18nProps.locale} />,
       },
       {
         id: "total",

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

@@ -28,6 +28,8 @@ export default {
   "Export PDFs": "PDFs exportieren",
   "Deselect all": "Alle abwählen",
   "Copy to Invoice": "In Rechnung kopieren",
+  "Finalize draft documents before copying to invoice":
+    "Entwurfsdokumente abschließen, bevor Sie in eine Rechnung kopieren",
   Void: "Stornieren",
   Voided: "Storniert",
   // Row action translations

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

@@ -28,6 +28,7 @@ export default {
   "Export PDFs": "Export PDFs",
   "Deselect all": "Deselect all",
   "Copy to Invoice": "Copy to Invoice",
+  "Finalize draft documents before copying to invoice": "Finalize draft documents before copying to invoice",
   Void: "Void",
   Voided: "Voided",
   // Row action translations

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

@@ -28,6 +28,7 @@ export default {
   "Export PDFs": "Exportar PDFs",
   "Deselect all": "Deseleccionar todo",
   "Copy to Invoice": "Copiar a factura",
+  "Finalize draft documents before copying to invoice": "Finalice los borradores antes de copiar a factura",
   Void: "Anular",
   Voided: "Anulado",
   // Row action translations

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

@@ -28,6 +28,7 @@ export default {
   "Export PDFs": "Exporter les PDFs",
   "Deselect all": "Tout désélectionner",
   "Copy to Invoice": "Copier vers facture",
+  "Finalize draft documents before copying to invoice": "Finalisez les brouillons avant de copier en facture",
   Void: "Annuler",
   Voided: "Annulé",
   // Row action translations

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

@@ -28,6 +28,7 @@ export default {
   "Export PDFs": "Izvezi PDF-ove",
   "Deselect all": "Poništi odabir",
   "Copy to Invoice": "Kopiraj u račun",
+  "Finalize draft documents before copying to invoice": "Dovršite skice dokumenata prije kopiranja u račun",
   Void: "Storniraj",
   Voided: "Poništeno",
   // Row action translations

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

@@ -28,6 +28,7 @@ export default {
   "Export PDFs": "Esporta PDF",
   "Deselect all": "Deseleziona tutto",
   "Copy to Invoice": "Copia in fattura",
+  "Finalize draft documents before copying to invoice": "Finalizzare i documenti bozza prima di copiare in fattura",
   Void: "Annulla",
   Voided: "Annullato",
   // Row action translations

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

@@ -28,6 +28,7 @@ export default {
   "Export PDFs": "PDFs exporteren",
   "Deselect all": "Alles deselecteren",
   "Copy to Invoice": "Kopieer naar factuur",
+  "Finalize draft documents before copying to invoice": "Rond conceptdocumenten af voordat u naar factuur kopieert",
   Void: "Nietig verklaren",
   Voided: "Ongeldig verklaard",
   // Row action translations

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

@@ -28,6 +28,7 @@ export default {
   "Export PDFs": "Eksportuj PDF-y",
   "Deselect all": "Odznacz wszystko",
   "Copy to Invoice": "Kopiuj do faktury",
+  "Finalize draft documents before copying to invoice": "Sfinalizuj wersje robocze przed skopiowaniem do faktury",
   Void: "Anuluj",
   Voided: "Anulowana",
   // Row action translations

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

@@ -28,6 +28,7 @@ export default {
   "Export PDFs": "Exportar PDFs",
   "Deselect all": "Desmarcar tudo",
   "Copy to Invoice": "Copiar para fatura",
+  "Finalize draft documents before copying to invoice": "Finalize os rascunhos antes de copiar para fatura",
   Void: "Anular",
   Voided: "Anulado",
   // Row action translations

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

@@ -28,6 +28,7 @@ export default {
   "Export PDFs": "Izvozi PDF-je",
   "Deselect all": "Počisti izbor",
   "Copy to Invoice": "Kopiraj v račun",
+  "Finalize draft documents before copying to invoice": "Dokončajte osnutke dokumentov pred kopiranjem v račun",
   Void: "Storniraj",
   Voided: "Stornirano",
   // Row action translations

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

@@ -33,19 +33,8 @@ export function useDeliveryNoteDownload({
     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);
+      await sdk.invoices.downloadPdf(deliveryNote.id, fileName, {}, { entity_id: activeEntity.id });
 
       onDownloadSuccess?.(fileName);
     } catch (error) {

package/src/components/documents/create/document-add-item-form.tsx

@@ -1,6 +1,6 @@
 import type { Item } from "@spaceinvoices/js-sdk";
 import { ChevronDown, ChevronUp, DollarSign, Minus, Percent, Plus, PlusIcon, Trash2 } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import type { Control, UseFormReturn } from "react-hook-form";
 import { useWatch } from "react-hook-form";
 
@@ -77,10 +77,13 @@ export default function DocumentAddItemForm({
     control,
     name: `items.${index}.taxes`,
   });
-
   // Component-local state for gross/net price mode (not in form schema)
   const [isGrossPrice, setIsGrossPrice] = useState(initialIsGrossPrice);
 
+  useEffect(() => {
+    setIsGrossPrice(initialIsGrossPrice);
+  }, [initialIsGrossPrice]);
+
   const setPriceMode = (mode: string) => {
     const isGross = mode === "gross";
     setIsGrossPrice(isGross);
@@ -91,12 +94,16 @@ export default function DocumentAddItemForm({
     const currentTaxes = taxes || [];
     if (currentTaxes.length >= maxTaxesPerItem) return;
 
-    form.setValue(`items.${index}.taxes`, [
-      ...currentTaxes,
-      {
-        rate: 22,
-      },
-    ]);
+    form.setValue(
+      `items.${index}.taxes`,
+      [
+        ...currentTaxes,
+        {
+          rate: 22,
+        },
+      ],
+      { shouldDirty: true, shouldTouch: true },
+    );
   };
 
   const removeTax = (taxIndex: number) => {
@@ -104,6 +111,7 @@ export default function DocumentAddItemForm({
     form.setValue(
       `items.${index}.taxes`,
       currentTaxes.filter((_: any, i: number) => i !== taxIndex),
+      { shouldDirty: true, shouldTouch: true },
     );
   };
 
@@ -111,23 +119,23 @@ export default function DocumentAddItemForm({
   const handleItemSelect = (item: Item | null, customName?: string) => {
     if (item) {
       // Selected a saved item - set item_id and prefill fields for visual feedback
-      form.setValue(`items.${index}.item_id`, item.id);
-      form.setValue(`items.${index}.name`, item.name);
+      form.setValue(`items.${index}.item_id`, item.id, { shouldDirty: true, shouldTouch: true });
+      form.setValue(`items.${index}.name`, item.name, { shouldDirty: true, shouldTouch: true });
 
       // Prefill price (use gross_price if available, otherwise price)
       if (item.gross_price !== null && item.gross_price !== undefined) {
-        form.setValue(`items.${index}.price`, item.gross_price);
+        form.setValue(`items.${index}.price`, item.gross_price, { shouldDirty: true, shouldTouch: true });
         setIsGrossPrice(true);
         onPriceModeChange?.(true);
       } else if (item.price !== null && item.price !== undefined) {
-        form.setValue(`items.${index}.price`, item.price);
+        form.setValue(`items.${index}.price`, item.price, { shouldDirty: true, shouldTouch: true });
         setIsGrossPrice(false);
         onPriceModeChange?.(false);
       }
 
       // Prefill description
       if (item.description) {
-        form.setValue(`items.${index}.description`, item.description);
+        form.setValue(`items.${index}.description`, item.description, { shouldDirty: true, shouldTouch: true });
       }
 
       // Prefill taxes from item's tax_ids (or clear if item has no taxes)
@@ -135,14 +143,15 @@ export default function DocumentAddItemForm({
         form.setValue(
           `items.${index}.taxes`,
           item.tax_ids.map((tax_id) => ({ tax_id })),
+          { shouldDirty: true, shouldTouch: true },
         );
       } else {
-        form.setValue(`items.${index}.taxes`, []);
+        form.setValue(`items.${index}.taxes`, [], { shouldDirty: true, shouldTouch: true });
       }
     } else if (customName) {
       // Custom name entered - clear item_id, just use the name
-      form.setValue(`items.${index}.item_id`, undefined);
-      form.setValue(`items.${index}.name`, customName);
+      form.setValue(`items.${index}.item_id`, undefined, { shouldDirty: true, shouldTouch: true });
+      form.setValue(`items.${index}.name`, customName, { shouldDirty: true, shouldTouch: true });
     }
   };
 
@@ -225,7 +234,10 @@ export default function DocumentAddItemForm({
                     entityId={entityId}
                     value={field.value}
                     onSelect={handleItemSelect}
+                    onCommitInlineName={(nextName) => form.setValue(`items.${index}.name`, nextName)}
+                    commitOnBlurMode={field.value ? "update-inline" : "create"}
                     placeholder={t("Search or enter item name...")}
+                    inputTestId={`document-item-input-${index}`}
                   />
                 </FormControl>
                 <FormMessage />

package/src/components/documents/create/document-add-item-tax-rate-field.tsx

@@ -7,8 +7,16 @@ import { Button } from "@/ui/components/ui/button";
 import { FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/ui/components/ui/form";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/ui/components/ui/select";
 import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
 import { useListTaxes } from "../../taxes/taxes.hooks";
 
+const translations = {
+  en: {
+    Tax: "Tax",
+    "Add...": "Add...",
+  },
+} as const;
+
 /**
  * Get the current active rate from a tax (most recent rate by valid_from)
  */
@@ -43,9 +51,11 @@ export default function DocumentAddItemTaxRateField({
   onRemove,
   onAddNewTax,
   showLabel = true,
-  t,
+  t: translateFn,
+  namespace,
+  locale,
 }: DocumentAddItemTaxRateFieldProps) {
-  const translate = t || ((key: string) => key);
+  const translate = createTranslation({ t: translateFn, namespace, locale, translations });
   const { setValue } = useFormContext();
 
   // Fetch available taxes