@spaceinvoices/react-ui 0.1.1 → 0.3.0

package/src/components/dashboard/payment-methods-chart/locales/pt.ts

@@ -0,0 +1,12 @@
+export default {
+  "Payment Methods": "Metodos de pagamento",
+  "Breakdown of payments by method": "Distribuicao dos pagamentos por metodo",
+  Cash: "Dinheiro",
+  "Bank Transfer": "Transferencia bancaria",
+  Card: "Cartao",
+  Check: "Cheque",
+  "Credit Note": "Nota de credito",
+  Advance: "Adiantamento",
+  Other: "Outro",
+  "No data available": "Sem dados disponiveis",
+} as const;

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

@@ -13,10 +13,18 @@ import {
 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 { usePaymentMethodsData } from "./use-payment-methods";
 
-const translations = { sl } as const;
+const translations = { de, es, fr, hr, it, nl, pl, pt, sl } as const;
 
 export type PaymentMethodsChartData = { type: string; count: number; amount: number }[];
 

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

@@ -0,0 +1,5 @@
+export default {
+  "Payment Trend": "Zahlungstrend",
+  "Monthly payments received over the last 6 months": "Monatlich eingegangene Zahlungen der letzten 6 Monate",
+  "No data available": "Keine Daten verfügbar",
+} as const;

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

@@ -0,0 +1,5 @@
+export default {
+  "Payment Trend": "Tendencia de pagos",
+  "Monthly payments received over the last 6 months": "Pagos mensuales recibidos en los últimos 6 meses",
+  "No data available": "No hay datos disponibles",
+} as const;

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

@@ -0,0 +1,5 @@
+export default {
+  "Payment Trend": "Tendance des paiements",
+  "Monthly payments received over the last 6 months": "Paiements mensuels reçus au cours des 6 derniers mois",
+  "No data available": "Aucune donnée disponible",
+} as const;

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

@@ -0,0 +1,5 @@
+export default {
+  "Payment Trend": "Trend plaćanja",
+  "Monthly payments received over the last 6 months": "Mjesečna primljena plaćanja u posljednjih 6 mjeseci",
+  "No data available": "Nema dostupnih podataka",
+} as const;

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

@@ -0,0 +1,5 @@
+export default {
+  "Payment Trend": "Andamento dei pagamenti",
+  "Monthly payments received over the last 6 months": "Pagamenti mensili ricevuti negli ultimi 6 mesi",
+  "No data available": "Nessun dato disponibile",
+} as const;

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

@@ -0,0 +1,5 @@
+export default {
+  "Payment Trend": "Betalingstrend",
+  "Monthly payments received over the last 6 months": "Maandelijkse ontvangen betalingen over de afgelopen 6 maanden",
+  "No data available": "Geen gegevens beschikbaar",
+} as const;

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

@@ -0,0 +1,5 @@
+export default {
+  "Payment Trend": "Trend płatności",
+  "Monthly payments received over the last 6 months": "Miesięczne otrzymane płatności z ostatnich 6 miesięcy",
+  "No data available": "Brak dostępnych danych",
+} as const;

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

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

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/view/document-actions-bar.tsx

@@ -28,10 +28,17 @@ 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;
 

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

@@ -5,9 +5,16 @@ import { Separator } from "@/ui/components/ui/separator";
 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 = { de, sl } as const;
+const translations = { sl, de, it, fr, es, pt, nl, pl, hr } as const;
 
 // Document type union
 type Document = Invoice | Estimate | CreditNote | AdvanceInvoice;

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

@@ -23,9 +23,16 @@ import type { ComponentTranslationProps } from "@/ui/lib/translation";
 import { createTranslation } from "@/ui/lib/translation";
 import { useSDK } from "@/ui/providers/sdk-provider";
 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 = { de, sl } as const;
+const translations = { sl, de, it, fr, es, pt, nl, pl, hr } as const;
 
 type DocumentType = "invoice" | "credit_note" | "advance_invoice";