@spaceinvoices/react-ui 0.1.1 → 0.4.0

package/src/components/dashboard/payment-trend-chart/payment-trend-chart.tsx

@@ -6,10 +6,18 @@ 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 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";
 import { usePaymentTrendData } from "./use-payment-trend";
 
-const translations = { sl } as const;
+const translations = { sl, de, it, fr, es, pt, nl, pl, hr } as const;
 
 export type PaymentTrendChartData = { month: string; amount: number }[];
 
@@ -113,7 +121,7 @@ export function PaymentTrendChart(props: PaymentTrendChartProps) {
           cursor={false}
           content={
             <ChartTooltipContent
-              labelFormatter={(label) => formatMonth(label, locale)}
+              labelFormatter={(label) => formatMonth(String(label), locale)}
               formatter={(value) => formatCurrency(Number(value), currency, locale)}
             />
           }

package/src/components/dashboard/revenue-trend-chart/locales/de.ts

@@ -0,0 +1,5 @@
+export default {
+  "Revenue Trend": "Umsatztrend",
+  "Monthly revenue over the last 6 months": "Monatlicher Umsatz der letzten 6 Monate",
+  "No data available": "Keine Daten verfügbar",
+} as const;

package/src/components/dashboard/revenue-trend-chart/locales/es.ts

@@ -0,0 +1,5 @@
+export default {
+  "Revenue Trend": "Tendencia de ingresos",
+  "Monthly revenue over the last 6 months": "Ingresos mensuales en los últimos 6 meses",
+  "No data available": "No hay datos disponibles",
+} as const;

package/src/components/dashboard/revenue-trend-chart/locales/fr.ts

@@ -0,0 +1,5 @@
+export default {
+  "Revenue Trend": "Tendance des revenus",
+  "Monthly revenue over the last 6 months": "Revenus mensuels au cours des 6 derniers mois",
+  "No data available": "Aucune donnée disponible",
+} as const;

package/src/components/dashboard/revenue-trend-chart/locales/hr.ts

@@ -0,0 +1,5 @@
+export default {
+  "Revenue Trend": "Trend prihoda",
+  "Monthly revenue over the last 6 months": "Mjesečni prihodi u posljednjih 6 mjeseci",
+  "No data available": "Nema dostupnih podataka",
+} as const;

package/src/components/dashboard/revenue-trend-chart/locales/it.ts

@@ -0,0 +1,5 @@
+export default {
+  "Revenue Trend": "Andamento dei ricavi",
+  "Monthly revenue over the last 6 months": "Ricavi mensili negli ultimi 6 mesi",
+  "No data available": "Nessun dato disponibile",
+} as const;

package/src/components/dashboard/revenue-trend-chart/locales/nl.ts

@@ -0,0 +1,5 @@
+export default {
+  "Revenue Trend": "Omzettrend",
+  "Monthly revenue over the last 6 months": "Maandelijkse omzet over de afgelopen 6 maanden",
+  "No data available": "Geen gegevens beschikbaar",
+} as const;

package/src/components/dashboard/revenue-trend-chart/locales/pl.ts

@@ -0,0 +1,5 @@
+export default {
+  "Revenue Trend": "Trend przychodów",
+  "Monthly revenue over the last 6 months": "Miesięczne przychody z ostatnich 6 miesięcy",
+  "No data available": "Brak dostępnych danych",
+} as const;

package/src/components/dashboard/revenue-trend-chart/locales/pt.ts

@@ -0,0 +1,5 @@
+export default {
+  "Revenue Trend": "Tendência de receitas",
+  "Monthly revenue over the last 6 months": "Receitas mensais nos últimos 6 meses",
+  "No data available": "Sem dados disponíveis",
+} as const;

package/src/components/dashboard/revenue-trend-chart/revenue-trend-chart.tsx

@@ -6,10 +6,18 @@ 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 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";
 import { useRevenueTrendData } from "./use-revenue-trend";
 
-const translations = { sl } as const;
+const translations = { sl, de, it, fr, es, pt, nl, pl, hr } as const;
 
 export type RevenueTrendChartData = { month: string; revenue: number }[];
 
@@ -113,7 +121,7 @@ export function RevenueTrendChart(props: RevenueTrendChartProps) {
           cursor={false}
           content={
             <ChartTooltipContent
-              labelFormatter={(label) => formatMonth(label, locale)}
+              labelFormatter={(label) => formatMonth(String(label), locale)}
               formatter={(value) => formatCurrency(Number(value), currency, locale)}
             />
           }

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

@@ -0,0 +1,5 @@
+export default {
+  "Top Customers": "Top-Kunden",
+  "Top 5 customers by revenue": "Top 5 Kunden nach Umsatz",
+  "No data available": "Keine Daten verfügbar",
+} as const;

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

@@ -0,0 +1,5 @@
+export default {
+  "Top Customers": "Mejores clientes",
+  "Top 5 customers by revenue": "Los 5 mejores clientes por ingresos",
+  "No data available": "No hay datos disponibles",
+} as const;

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

@@ -0,0 +1,5 @@
+export default {
+  "Top Customers": "Meilleurs clients",
+  "Top 5 customers by revenue": "Les 5 meilleurs clients par chiffre d'affaires",
+  "No data available": "Aucune donnée disponible",
+} as const;

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

@@ -0,0 +1,5 @@
+export default {
+  "Top Customers": "Najbolji kupci",
+  "Top 5 customers by revenue": "Top 5 kupaca po prihodu",
+  "No data available": "Nema dostupnih podataka",
+} as const;

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

@@ -0,0 +1,5 @@
+export default {
+  "Top Customers": "Migliori clienti",
+  "Top 5 customers by revenue": "I 5 migliori clienti per fatturato",
+  "No data available": "Nessun dato disponibile",
+} as const;

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

@@ -0,0 +1,5 @@
+export default {
+  "Top Customers": "Topklanten",
+  "Top 5 customers by revenue": "Top 5 klanten op basis van omzet",
+  "No data available": "Geen gegevens beschikbaar",
+} as const;

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

@@ -0,0 +1,5 @@
+export default {
+  "Top Customers": "Najlepsi klienci",
+  "Top 5 customers by revenue": "5 najlepszych klientów pod względem przychodów",
+  "No data available": "Brak dostępnych danych",
+} as const;

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

@@ -0,0 +1,5 @@
+export default {
+  "Top Customers": "Melhores clientes",
+  "Top 5 customers by revenue": "Os 5 melhores clientes por receita",
+  "No data available": "Sem dados disponíveis",
+} as const;

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

@@ -6,10 +6,18 @@ 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 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";
 import { useTopCustomersData } from "./use-top-customers";
 
-const translations = { sl } as const;
+const translations = { sl, de, it, fr, es, pt, nl, pl, hr } as const;
 
 export type TopCustomersChartData = { name: string; revenue: number }[];
 
@@ -106,7 +114,7 @@ export function TopCustomersChart(props: TopCustomersChartProps) {
           cursor={false}
           content={
             <ChartTooltipContent
-              labelFormatter={(_, payload) => payload?.[0]?.payload?.name || ""}
+              labelFormatter={(_, payload): React.ReactNode => String(payload?.[0]?.payload?.name || "")}
               formatter={(value) => formatCurrency(Number(value), currency, locale)}
             />
           }

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

@@ -51,7 +51,7 @@ export default function DocumentAddItemForm({
   index,
   control,
   entityId,
-  currencyCode,
+  currencyCode: _currencyCode,
   onRemove,
   onMoveUp,
   onMoveDown,

package/src/components/documents/create/form-types.ts

@@ -4,14 +4,13 @@
  * This file provides type utilities to handle react-hook-form's complex generic types
  * when passing control and other form utilities between components.
  */
-import type { Control, FieldValues, UseFormGetValues, UseFormSetValue, UseFormWatch } from "react-hook-form";
+import type { Control, UseFormGetValues, UseFormSetValue, UseFormWatch } from "react-hook-form";
 
 /**
  * A more permissive Control type that accepts any form control.
  * Use this in component props when the component doesn't need to know
  * the exact form type, only that it has certain fields.
  */
-// biome-ignore lint/suspicious/noExplicitAny: Required for react-hook-form compatibility
 export type AnyControl = Control<any, any, any>;
 
 /**
@@ -20,11 +19,8 @@ export type AnyControl = Control<any, any, any>;
  */
 export type DocumentFormSectionProps = {
   control: AnyControl;
-  // biome-ignore lint/suspicious/noExplicitAny: Required for react-hook-form compatibility
   watch: UseFormWatch<any>;
-  // biome-ignore lint/suspicious/noExplicitAny: Required for react-hook-form compatibility
   setValue: UseFormSetValue<any>;
-  // biome-ignore lint/suspicious/noExplicitAny: Required for react-hook-form compatibility
   getValues: UseFormGetValues<any>;
 };
 

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

@@ -1,4 +1,5 @@
-import { HelpCircle } from "lucide-react";
+import { HelpCircle, Plus, Trash2 } from "lucide-react";
+import { Button } from "@/ui/components/ui/button";
 import { Checkbox } from "@/ui/components/ui/checkbox";
 import { Label } from "@/ui/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/ui/components/ui/select";
@@ -22,10 +23,10 @@ type MarkAsPaidSectionProps = {
   checked: boolean;
   /** Called when the checkbox changes */
   onCheckedChange: (checked: boolean) => void;
-  /** Selected payment type */
-  paymentType: string;
-  /** Called when payment type changes */
-  onPaymentTypeChange: (value: string) => void;
+  /** Selected payment types */
+  paymentTypes: string[];
+  /** Called when payment types change */
+  onPaymentTypesChange: (values: string[]) => void;
   /** Translation function */
   t: (key: string) => string;
 };
@@ -33,12 +34,12 @@ type MarkAsPaidSectionProps = {
 export function MarkAsPaidSection({
   checked,
   onCheckedChange,
-  paymentType,
-  onPaymentTypeChange,
+  paymentTypes,
+  onPaymentTypesChange,
   t,
 }: MarkAsPaidSectionProps) {
   return (
-    <div className={cn("flex flex-col gap-4 rounded-md border p-4", checked && "md:flex-row md:items-center md:gap-6")}>
+    <div className={cn("flex flex-col gap-4 rounded-md border p-4", checked && "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,21 +62,57 @@ export function MarkAsPaidSection({
       </div>
 
       {checked && (
-        <>
-          <div className="hidden flex-1 md:block" />
-          <Select value={paymentType} onValueChange={(v) => v && onPaymentTypeChange(v)}>
-            <SelectTrigger className="w-full md:w-fit">
-              <SelectValue placeholder={t("Select payment type")}>{t(PAYMENT_TYPE_LABELS[paymentType])}</SelectValue>
-            </SelectTrigger>
-            <SelectContent>
-              {regularPaymentTypes.map((type) => (
-                <SelectItem key={type} value={type}>
-                  {t(PAYMENT_TYPE_LABELS[type])}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </>
+        <div className="flex flex-col gap-2">
+          {paymentTypes.map((type, index) => (
+            <div key={index} className="flex items-center gap-2">
+              <Select
+                value={type}
+                onValueChange={(v) => {
+                  if (v) {
+                    const updated = [...paymentTypes];
+                    updated[index] = v;
+                    onPaymentTypesChange(updated);
+                  }
+                }}
+              >
+                <SelectTrigger className="w-full md:w-fit">
+                  <SelectValue placeholder={t("Select payment type")}>{t(PAYMENT_TYPE_LABELS[type])}</SelectValue>
+                </SelectTrigger>
+                <SelectContent>
+                  {regularPaymentTypes.map((pt) => (
+                    <SelectItem key={pt} value={pt}>
+                      {t(PAYMENT_TYPE_LABELS[pt])}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              {paymentTypes.length > 1 && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="size-8 shrink-0"
+                  onClick={() => {
+                    const updated = paymentTypes.filter((_, i) => i !== index);
+                    onPaymentTypesChange(updated);
+                  }}
+                >
+                  <Trash2 className="size-4 text-muted-foreground" />
+                </Button>
+              )}
+            </div>
+          ))}
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="w-fit gap-1 text-muted-foreground"
+            onClick={() => onPaymentTypesChange([...paymentTypes, "bank_transfer"])}
+          >
+            <Plus className="size-4" />
+            {t("Add payment")}
+          </Button>
+        </div>
       )}
     </div>
   );

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

@@ -121,12 +121,12 @@ describe("prepareDocumentSubmission", () => {
         documentType: "invoice",
         isDraft: true,
         markAsPaid: true,
-        paymentType: "cash",
+        paymentTypes: ["cash"],
       });
 
       // Both flags can technically be set, though the form logic prevents this
       expect(result.is_draft).toBe(true);
-      expect(result.payment).toBeDefined();
+      expect(result.payments).toBeDefined();
     });
   });
 });

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

@@ -30,8 +30,8 @@ type PrepareDocumentOptions = {
   wasCustomerFormShown?: boolean;
   /** For invoices/credit notes: whether to mark as paid */
   markAsPaid?: boolean;
-  /** For invoices/credit notes: payment type when markAsPaid is true */
-  paymentType?: string;
+  /** 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";
   /** Secondary date field value (date_due for invoices, date_valid_till for estimates) */
@@ -167,16 +167,21 @@ export function prepareDocumentSubmission<T extends BaseDocumentValues>(
   // Credit notes don't have a secondary date field
 
   // Handle markAsPaid for invoices and credit notes
-  if (options.documentType !== "estimate" && options.markAsPaid) {
-    payload.payment = {
-      type: options.paymentType || "bank_transfer",
+  if (
+    options.documentType !== "estimate" &&
+    options.markAsPaid &&
+    options.paymentTypes &&
+    options.paymentTypes.length > 0
+  ) {
+    payload.payments = options.paymentTypes.map((type: string) => ({
+      type,
       date: payload.date ?? undefined,
-    };
+    }));
   }
 
   // Remove UI-only fields from payload
   delete payload.markAsPaid;
-  delete payload.paymentType;
+  delete payload.paymentTypes;
 
   // Add draft flag if requested
   if (options.isDraft) {

package/src/components/documents/create/prepare-preview-data.test.ts

@@ -150,6 +150,6 @@ describe("filterUnresolvedTaxes", () => {
     ];
     const result = filterUnresolvedTaxes(items as any);
 
-    expect(result[0].taxes).toEqual([{ tax_id: "tax-123", rate: 22, name: "VAT" }]);
+    expect(result[0].taxes).toEqual([{ tax_id: "tax-123", rate: 22, name: "VAT" }] as any);
   });
 });

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

@@ -1,6 +1,5 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { AUTH_COOKIES } from "@/ui/lib/auth";
-import { getCookie } from "@/ui/lib/browser-cookies";
+import { useSDK } from "@/ui/providers/sdk-provider";
 
 // Document type union for API calls
 export type DocumentType = "invoice" | "estimate" | "credit_note" | "advance_invoice";
@@ -13,44 +12,6 @@ const CACHE_KEYS: Record<DocumentType, string> = {
   advance_invoice: "advance-invoices",
 };
 
-/**
- * Get API base URL from environment
- */
-function getApiBaseUrl(): string {
-  if (typeof window === "undefined") return "";
-  return (import.meta.env?.VITE_API_URL || import.meta.env?.BUN_PUBLIC_API_URL || "") as string;
-}
-
-/**
- * Make authenticated API request
- */
-async function apiRequest<T>(path: string, options: RequestInit & { entityId: string }): Promise<T> {
-  const token = getCookie(AUTH_COOKIES.TOKEN);
-  const baseUrl = getApiBaseUrl();
-
-  const response = await fetch(`${baseUrl}${path}`, {
-    ...options,
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${token}`,
-      "x-entity-id": options.entityId,
-      ...options.headers,
-    },
-  });
-
-  if (!response.ok) {
-    const errorData = await response.json().catch(() => ({}));
-    throw new Error(errorData.message || `Request failed with status ${response.status}`);
-  }
-
-  // DELETE returns 204 No Content
-  if (response.status === 204) {
-    return undefined as T;
-  }
-
-  return response.json();
-}
-
 // ============================================================================
 // Finalize Document Hook
 // ============================================================================
@@ -71,14 +32,12 @@ type FinalizeDocumentVariables = {
  * Assigns a document number and runs fiscalization (if applicable)
  */
 export function useFinalizeDocument(options: FinalizeDocumentOptions) {
+  const { sdk } = useSDK();
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async ({ documentId, documentType }: FinalizeDocumentVariables) => {
-      return apiRequest(`/documents/${documentId}/finalize?type=${documentType}`, {
-        method: "POST",
-        entityId: options.entityId,
-      });
+      return sdk.documents.finalizeDocument(documentId, { type: documentType });
     },
     onSuccess: (data, variables) => {
       // Invalidate list cache
@@ -118,14 +77,12 @@ type DeleteDraftDocumentVariables = {
  * Only draft documents can be deleted
  */
 export function useDeleteDraftDocument(options: DeleteDraftDocumentOptions) {
+  const { sdk } = useSDK();
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async ({ documentId, documentType }: DeleteDraftDocumentVariables) => {
-      return apiRequest(`/documents/${documentId}?type=${documentType}`, {
-        method: "DELETE",
-        entityId: options.entityId,
-      });
+      return sdk.documents.delete(documentId, { type: documentType });
     },
     onSuccess: (_, variables) => {
       // Invalidate list cache

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

@@ -63,6 +63,7 @@ export function DocumentPreviewDisplay({
 
   const { containerRef, contentRef, scale, contentHeight, A4_WIDTH_PX } = useA4Scaling(previewHtml);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: document.updated_at intentionally triggers re-fetch when document changes server-side (e.g. after payment)
   useEffect(() => {
     const fetchPreview = async () => {
       // For public view, use per-type shareable HTML endpoint
@@ -113,7 +114,17 @@ export function DocumentPreviewDisplay({
     };
 
     fetchPreview();
-  }, [document?.id, activeEntity?.id, template, apiBaseUrl, locale, isPublicView, shareableId, sdk]);
+  }, [
+    document?.id,
+    document?.updated_at,
+    activeEntity?.id,
+    template,
+    apiBaseUrl,
+    locale,
+    isPublicView,
+    shareableId,
+    sdk,
+  ]);
 
   return (
     <div ref={containerRef} className={cn("relative h-full", className)}>

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

@@ -28,20 +28,31 @@ import type { ComponentTranslationProps } from "@/ui/lib/translation";
 import { createTranslation } from "@/ui/lib/translation";
 import type { Entity } from "@/ui/providers/entities-context";
 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";
 import { useDocumentDownload } from "./use-document-download";
 
-const translations = { de, sl } as const;
+const translations = { sl, de, it, fr, es, pt, nl, pl, hr } as const;
 
 type Document = Invoice | Estimate | CreditNote | AdvanceInvoice;
 
-const PDF_LOCALES = [
-  { code: "en-US", label: "English" },
-  { code: "de-DE", label: "Deutsch" },
-  { code: "es-ES", label: "Español" },
-  { code: "fr-FR", label: "Français" },
-  { code: "it-IT", label: "Italiano" },
-  { code: "sl-SI", label: "Slovenščina" },
+const PDF_LOCALE_CODES = [
+  { label: "English", code: "en-US" },
+  { label: "German", code: "de-DE" },
+  { label: "Slovenian", code: "sl-SI" },
+  { label: "Italian", code: "it-IT" },
+  { label: "French", code: "fr-FR" },
+  { label: "Spanish", code: "es-ES" },
+  { label: "Portuguese", code: "pt-PT" },
+  { label: "Dutch", code: "nl-NL" },
+  { label: "Polish", code: "pl-PL" },
+  { label: "Croatian", code: "hr-HR" },
 ] as const;
 
 interface DocumentActionsBarProps extends ComponentTranslationProps {
@@ -82,11 +93,15 @@ interface DocumentActionsBarProps extends ComponentTranslationProps {
 function getApiLocale(uiLanguage: string): string {
   const localeMap: Record<string, string> = {
     en: "en-US",
-    sl: "sl-SI",
     de: "de-DE",
-    es: "es-ES",
-    fr: "fr-FR",
+    sl: "sl-SI",
     it: "it-IT",
+    fr: "fr-FR",
+    es: "es-ES",
+    pt: "pt-PT",
+    nl: "nl-NL",
+    pl: "pl-PL",
+    hr: "hr-HR",
   };
   return localeMap[uiLanguage] || "en-US";
 }
@@ -178,13 +193,13 @@ export function DocumentActionsBar({
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end">
-            {PDF_LOCALES.map((locale) => (
+            {PDF_LOCALE_CODES.map((locale) => (
               <DropdownMenuItem
                 key={locale.code}
                 onClick={() => handleDownloadPdf(locale.code)}
                 className="cursor-pointer"
               >
-                {locale.label}
+                {t(locale.label)}
               </DropdownMenuItem>
             ))}
           </DropdownMenuContent>