@spaceinvoices/react-ui 0.4.8 → 0.4.10

package/src/components/invoices/create/prepare-invoice-submission.ts

@@ -54,14 +54,6 @@ export function prepareInvoiceSubmission(values: CreateInvoiceSchema, options: P
     isDraft: options.isDraft,
   }) as CreateInvoiceRequest;
 
-  // Add service date fields if provided
-  if ((values as any).date_service) {
-    (payload as any).date_service = new Date((values as any).date_service);
-  }
-  if ((values as any).date_service_to) {
-    (payload as any).date_service_to = new Date((values as any).date_service_to);
-  }
-
   // Add FURS data if provided
   if (options.furs) {
     if (options.furs.skip) {

package/src/components/invoices/list/list-table.tsx

@@ -4,6 +4,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,
@@ -31,7 +32,7 @@ import pl from "./locales/pl";
 import pt from "./locales/pt";
 import sl from "./locales/sl";
 
-const translations = {
+const translations = withTableTranslations({
   en,
   sl,
   de,
@@ -42,12 +43,13 @@ const translations = {
   nl,
   pl,
   hr,
-} as const;
+} as const);
 
 type InvoiceListTableProps = {
   t?: (key: string) => string;
   namespace?: string;
   locale?: string;
+  translationLocale?: string;
   entityId?: string;
   onView?: (invoice: Invoice) => void;
   onAddPayment?: (invoice: Invoice) => void;
@@ -85,6 +87,7 @@ export default function InvoiceListTable({
 }: InvoiceListTableProps) {
   const t = createTranslation({
     translations,
+    locale: i18nProps.translationLocale ?? i18nProps.locale,
     ...i18nProps,
   });
 
@@ -210,12 +213,12 @@ export default function InvoiceListTable({
       {
         id: "date",
         header: t("Date"),
-        cell: (invoice) => <FormattedDate date={invoice.date} />,
+        cell: (invoice) => <FormattedDate date={invoice.date} locale={i18nProps.locale} />,
       },
       {
         id: "date_due",
         header: t("Date Due"),
-        cell: (invoice) => <FormattedDate date={invoice.date_due} />,
+        cell: (invoice) => <FormattedDate date={invoice.date_due} locale={i18nProps.locale} />,
       },
       {
         id: "total",

package/src/components/invoices/list/use-invoice-download.ts

@@ -33,18 +33,8 @@ export function useInvoiceDownload({
     onDownloadStart?.();
 
     try {
-      // SDK signature: renderPdf(id, params?, SDKMethodOptions?)
-      // entity_id goes in SDKMethodOptions (last arg), not params
-      const blob = await sdk.invoices.renderPdf(invoice.id, {}, { entity_id: activeEntity.id });
-      const downloadUrl = window.URL.createObjectURL(blob);
-      const link = document.createElement("a");
-      link.href = downloadUrl;
       const fileName = `${t("Invoice")} ${invoice.number}.pdf`;
-      link.download = fileName;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      window.URL.revokeObjectURL(downloadUrl);
+      await sdk.invoices.downloadPdf(invoice.id, fileName, {}, { entity_id: activeEntity.id });
 
       onDownloadSuccess?.(fileName);
     } catch (error) {

package/src/components/invoices/send-email-dialog/locales/de.ts

@@ -15,4 +15,6 @@ export default {
   "Failed to send email": "E-Mail konnte nicht gesendet werden",
   "Sandbox email warning":
     "Im Sandbox-Modus können E-Mails nur an verifizierte Teammitglieder dieses Kontos gesendet werden.",
+  "PDF Language": "PDF-Sprache",
+  Default: "Standard",
 } as const;

package/src/components/invoices/send-email-dialog/locales/es.ts

@@ -15,4 +15,6 @@ export default {
   "Failed to send email": "Error al enviar el correo",
   "Sandbox email warning":
     "En modo sandbox solo se pueden enviar correos a los miembros verificados del equipo de esta cuenta.",
+  "PDF Language": "Idioma del PDF",
+  Default: "Predeterminado",
 } as const;

package/src/components/invoices/send-email-dialog/locales/fr.ts

@@ -15,4 +15,6 @@ export default {
   "Failed to send email": "Échec de l'envoi de l'e-mail",
   "Sandbox email warning":
     "En mode sandbox, les e-mails ne peuvent être envoyés qu'aux membres vérifiés de l'équipe de ce compte.",
+  "PDF Language": "Langue du PDF",
+  Default: "Par défaut",
 } as const;

package/src/components/invoices/send-email-dialog/locales/hr.ts

@@ -14,4 +14,6 @@ export default {
   "Invoice sent to": "Račun poslan na",
   "Failed to send email": "Slanje e-maila nije uspjelo",
   "Sandbox email warning": "U sandbox načinu e-mailovi se mogu slati samo verificiranim članovima tima ovog računa.",
+  "PDF Language": "Jezik PDF-a",
+  Default: "Zadano",
 } as const;

package/src/components/invoices/send-email-dialog/locales/it.ts

@@ -15,4 +15,6 @@ export default {
   "Failed to send email": "Invio dell'e-mail non riuscito",
   "Sandbox email warning":
     "In modalità sandbox è possibile inviare e-mail solo ai membri del team verificati di questo account.",
+  "PDF Language": "Lingua del PDF",
+  Default: "Predefinito",
 } as const;

package/src/components/invoices/send-email-dialog/locales/nl.ts

@@ -15,4 +15,6 @@ export default {
   "Failed to send email": "E-mail verzenden mislukt",
   "Sandbox email warning":
     "In sandbox-modus kunnen e-mails alleen worden verzonden naar geverifieerde teamleden van dit account.",
+  "PDF Language": "PDF-taal",
+  Default: "Standaard",
 } as const;

package/src/components/invoices/send-email-dialog/locales/pl.ts

@@ -15,4 +15,6 @@ export default {
   "Failed to send email": "Nie udało się wysłać e-maila",
   "Sandbox email warning":
     "W trybie sandbox e-maile można wysyłać tylko do zweryfikowanych członków zespołu tego konta.",
+  "PDF Language": "Język PDF",
+  Default: "Domyślnie",
 } as const;

package/src/components/invoices/send-email-dialog/locales/pt.ts

@@ -15,4 +15,6 @@ export default {
   "Failed to send email": "Falha ao enviar o e-mail",
   "Sandbox email warning":
     "No modo sandbox, os e-mails só podem ser enviados para membros verificados da equipa desta conta.",
+  "PDF Language": "Idioma do PDF",
+  Default: "Padrão",
 } as const;

package/src/components/invoices/send-email-dialog/locales/sl.ts

@@ -14,4 +14,6 @@ export default {
   "Invoice sent to": "Račun poslan na",
   "Failed to send email": "Pošiljanje e-pošte ni uspelo",
   "Sandbox email warning": "V testnem načinu lahko pošiljate e-pošto samo verificiranim članom ekipe tega računa.",
+  "PDF Language": "Jezik PDF-ja",
+  Default: "Privzeto",
 } as const;

package/src/components/invoices/send-email-dialog/send-email-dialog.tsx

@@ -26,6 +26,7 @@ import {
   FormMessage,
 } from "@/ui/components/ui/form";
 import { Input } from "@/ui/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/ui/components/ui/select";
 import { Spinner } from "@/ui/components/ui/spinner";
 import { type SendEmailSchema, sendEmailSchema } from "@/ui/generated/schemas";
 import type { ComponentTranslationProps } from "@/ui/lib/translation";
@@ -44,6 +45,29 @@ import sl from "./locales/sl";
 
 const translations = { de, sl, it, fr, es, pt, nl, pl, hr } as const;
 
+const LOCALE_OPTIONS = [
+  { value: "en-US", label: "English (US)" },
+  { value: "de-DE", label: "Deutsch" },
+  { value: "it-IT", label: "Italiano" },
+  { value: "fr-FR", label: "Français" },
+  { value: "es-ES", label: "Español" },
+  { value: "sl-SI", label: "Slovenščina" },
+  { value: "pt-PT", label: "Português" },
+  { value: "nl-NL", label: "Nederlands" },
+  { value: "pl-PL", label: "Polski" },
+  { value: "hr-HR", label: "Hrvatski" },
+  { value: "sv-SE", label: "Svenska" },
+  { value: "fi-FI", label: "Suomi" },
+  { value: "et-EE", label: "Eesti" },
+  { value: "bg-BG", label: "Български" },
+  { value: "cs-CZ", label: "Čeština" },
+  { value: "sk-SK", label: "Slovenčina" },
+  { value: "nb-NO", label: "Norsk bokmål" },
+  { value: "is-IS", label: "Íslenska" },
+] as const;
+
+const DEFAULT_LANGUAGE_VALUE = "__default__";
+
 type SendEmailDialogProps = {
   invoice: Invoice;
   defaultEmail?: string;
@@ -87,12 +111,14 @@ export function SendEmailDialog({
   // biome-ignore lint/suspicious/noEmptyBlockStatements: noop fallback for controlled mode
   const setOpen = isControlled ? onOpenChange || (() => {}) : setInternalOpen;
   const [isLoading, setIsLoading] = useState(false);
+  const [language, setLanguage] = useState<string>("");
   const { sdk } = useSDK();
   const { activeEntity } = useEntities();
 
   // Get entity email defaults if not provided
   const entitySettings = (activeEntity?.settings as Record<string, any>) || {};
   const emailDefaults = entitySettings.email_defaults || {};
+  const entityLocale = (activeEntity as any)?.locale || "en-US";
 
   const finalSubject = defaultSubject || emailDefaults.invoice_subject || `Invoice #${invoice.number}`;
   const finalBody =
@@ -107,18 +133,26 @@ export function SendEmailDialog({
       attach_pdf: false,
     },
   });
+  const { control, handleSubmit, reset, setValue } = form;
+  const handleLanguageChange = (value: string | null) => {
+    setLanguage(value ?? DEFAULT_LANGUAGE_VALUE);
+  };
+
+  const entityLocaleLabel = LOCALE_OPTIONS.find((option) => option.value === entityLocale)?.label ?? entityLocale;
+  const defaultLanguageLabel = `${t("Default")} (${entityLocaleLabel})`;
 
   // Reset form and fetch customer email when dialog opens
   useEffect(() => {
     if (!open) return;
 
     // Reset form to defaults when dialog opens
-    form.reset({
+    reset({
       to: defaultEmail,
       subject: finalSubject,
       body_text: finalBody,
       attach_pdf: false,
     });
+    setLanguage(DEFAULT_LANGUAGE_VALUE);
 
     // Fetch customer email from linked customer if not in invoice snapshot
     const fetchCustomerEmail = async () => {
@@ -135,7 +169,7 @@ export function SendEmailDialog({
 
         const customer = response.data[0];
         if (customer?.email) {
-          form.setValue("to", customer.email);
+          setValue("to", customer.email);
         }
       } catch {
         // Silently fail - customer might not exist or not have email
@@ -143,7 +177,18 @@ export function SendEmailDialog({
     };
 
     fetchCustomerEmail();
-  }, [open, defaultEmail, invoice.customer_id, sdk, activeEntity?.id, form, finalSubject, finalBody]);
+  }, [
+    open,
+    defaultEmail,
+    invoice.customer_id,
+    sdk,
+    activeEntity?.id,
+    reset,
+    setValue,
+    finalSubject,
+    finalBody,
+    entityLocale,
+  ]);
 
   const onSubmit = async (values: SendEmailSchema) => {
     setIsLoading(true);
@@ -153,6 +198,9 @@ export function SendEmailDialog({
       // Ensure we have an active entity
       if (!activeEntity?.id) throw new Error("Entity context required");
 
+      const localeOverride =
+        language && language !== DEFAULT_LANGUAGE_VALUE && language !== entityLocale ? language : undefined;
+
       // Call the email API endpoint using SDK
       await (sdk.email as any).send(
         {
@@ -160,6 +208,8 @@ export function SendEmailDialog({
           subject: values.subject,
           body_text: values.body_text,
           document_id: invoice.id,
+          locale: localeOverride,
+          language: localeOverride,
         },
         { entity_id: activeEntity.id },
       );
@@ -169,7 +219,7 @@ export function SendEmailDialog({
       });
 
       setOpen(false);
-      form.reset();
+      reset();
       onSuccess?.();
     } catch (error) {
       const errorMessage = error instanceof Error ? error.message : t("Failed to send email");
@@ -213,9 +263,9 @@ export function SendEmailDialog({
         )}
 
         <Form {...form}>
-          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
             <FormField
-              control={form.control}
+              control={control}
               name="to"
               render={({ field }) => (
                 <FormItem>
@@ -228,8 +278,27 @@ export function SendEmailDialog({
               )}
             />
 
+            <div className="space-y-2">
+              <label htmlFor="pdf-language" className="font-medium text-sm leading-none">
+                {t("PDF Language")}
+              </label>
+              <Select value={language} onValueChange={handleLanguageChange}>
+                <SelectTrigger id="pdf-language">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value={DEFAULT_LANGUAGE_VALUE}>{defaultLanguageLabel}</SelectItem>
+                  {LOCALE_OPTIONS.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
             <FormField
-              control={form.control}
+              control={control}
               name="subject"
               render={({ field }) => (
                 <FormItem>
@@ -252,7 +321,7 @@ export function SendEmailDialog({
             />
 
             <FormField
-              control={form.control}
+              control={control}
               name="body_text"
               render={({ field }) => (
                 <FormItem>

package/src/components/invoices/view/eslog-info-display.tsx

@@ -7,6 +7,22 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/ui/
 import type { ComponentTranslationProps } from "@/ui/lib/translation";
 import { createTranslation } from "@/ui/lib/translation";
 
+const translations = {
+  en: {
+    Valid: "Valid",
+    Invalid: "Invalid",
+    "Not validated": "Not validated",
+    "e-SLOG 2.0": "e-SLOG 2.0",
+    "Slovenian electronic invoice format (EN 16931)": "Slovenian electronic invoice format (EN 16931)",
+    "Validation Errors": "Validation Errors",
+    "Downloading...": "Downloading...",
+    "Download e-SLOG XML": "Download e-SLOG XML",
+    "This document has not been validated for e-SLOG. Enable validation in entity settings or on the document to validate.":
+      "This document has not been validated for e-SLOG. Enable validation in entity settings or on the document to validate.",
+    "Validated at": "Validated at",
+  },
+} as const;
+
 // Type for eslog data
 interface EslogData {
   validation_enabled?: boolean | null;
@@ -46,7 +62,7 @@ export function EslogInfoDisplay({
     t: translateFn,
     namespace,
     locale,
-    translations: {},
+    translations,
   });
 
   // Cast eslog to the proper type

package/src/components/invoices/view/fiscalization-status-card.tsx

@@ -58,7 +58,11 @@ export function FiscalizationStatusCard({
     switch (fiscalizationData.status) {
       case "success":
         return (
-          <Badge className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100">
+          <Badge
+            className="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100"
+            data-testid={`${fiscalizationType}-fiscalization-status-badge`}
+            data-status="success"
+          >
             <CheckCircle2 className="mr-1 h-3 w-3" />
             {t("Fiscalized")}
           </Badge>
@@ -120,7 +124,7 @@ export function FiscalizationStatusCard({
 
   if (variant === "inline") {
     return (
-      <div className="space-y-3">
+      <div className="space-y-3" data-testid={`${fiscalizationType}-fiscalization-status-card`}>
         <div className="flex items-center justify-between font-medium text-sm">
           <span>{t("Fiscalization")}</span>
           {getStatusBadge()}
@@ -131,7 +135,7 @@ export function FiscalizationStatusCard({
   }
 
   return (
-    <Card>
+    <Card data-testid={`${fiscalizationType}-fiscalization-status-card`}>
       <CardHeader className="pb-3">
         <CardTitle className="flex items-center justify-between text-lg">
           <span>{t("Fiscalization")}</span>

package/src/components/items/item-combobox.tsx

@@ -12,9 +12,13 @@ type ItemComboboxProps = {
   entityId: string;
   value?: string;
   onSelect?: (item: Item | null, customName?: string) => void;
+  onCommitInlineName?: (value: string) => void;
+  commitOnBlurMode?: "create" | "update-inline";
   placeholder?: string;
   className?: string;
   disabled?: boolean;
+  locale?: string;
+  inputTestId?: string;
 };
 
 /**
@@ -25,9 +29,13 @@ export function ItemCombobox({
   entityId,
   value,
   onSelect,
+  onCommitInlineName,
+  commitOnBlurMode = "create",
   placeholder = "Search or enter item name...",
   className,
   disabled,
+  locale,
+  inputTestId,
 }: ItemComboboxProps) {
   const [search, setSearch] = useState("");
   const [displayValue, setDisplayValue] = useState(value || "");
@@ -53,7 +61,7 @@ export function ItemCombobox({
   const formatPrice = (item: Item) => {
     const price = item.gross_price ?? item.price;
     if (price === null || price === undefined) return "";
-    return ` - ${price.toFixed(2)}`;
+    return ` - ${new Intl.NumberFormat(locale, { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(price)}`;
   };
 
   const options = items.map((item) => ({
@@ -113,11 +121,20 @@ export function ItemCombobox({
     }
   };
 
-  const handleBlur = () => {
-    // If nothing was selected but there's text, treat as custom name
-    if (!displayValue && search) {
-      handleValueChange(`__custom__:${search}`);
+  const commitCustomName = (customName: string) => {
+    const trimmedName = customName.trim();
+    if (!trimmedName) return;
+
+    if (commitOnBlurMode === "update-inline") {
+      onCommitInlineName?.(trimmedName);
+      setSearch(trimmedName);
+      setDisplayValue(trimmedName);
+      return;
     }
+
+    onSelect?.(null, trimmedName);
+    setSearch(trimmedName);
+    setDisplayValue(trimmedName);
   };
 
   // Sync when value changes externally (e.g., duplication, form reset)
@@ -136,7 +153,8 @@ export function ItemCombobox({
       onSearch={handleSearch}
       value={value}
       onValueChange={handleValueChange}
-      onBlur={handleBlur}
+      onCommitUnselectedInput={commitCustomName}
+      commitUnselectedOnBlur={true}
       options={options}
       placeholder={placeholder}
       className={className}
@@ -144,6 +162,8 @@ export function ItemCombobox({
       loading={isLoading}
       emptyText={debouncedSearch ? "No items found" : "Recent items"}
       displayValue={displayValue}
+      inputTestId={inputTestId}
+      committedDisplayValue={value}
     />
   );
 }

package/src/components/items/item-list-table/item-list-table.tsx

@@ -1,5 +1,6 @@
 import type { Item } from "@spaceinvoices/js-sdk";
 
+import { withTableTranslations } from "../../table/locales";
 import { createTranslation } from "@/ui/lib/translation";
 import { useSDK } from "@/ui/providers/sdk-provider";
 import { DataTable } from "../../table/data-table";
@@ -19,7 +20,7 @@ import pl from "./locales/pl";
 import pt from "./locales/pt";
 import sl from "./locales/sl";
 
-const translations = {
+const translations = withTableTranslations({
   en,
   sl,
   de,
@@ -30,12 +31,13 @@ const translations = {
   nl,
   pl,
   hr,
-} as const;
+} as const);
 
 type ItemListTableProps = {
   t?: (key: string) => string;
   namespace?: string;
   locale?: string;
+  translationLocale?: string;
   entityId?: string;
   onView?: (item: Item) => void;
 } & ListTableProps<Item>;
@@ -51,6 +53,7 @@ export default function ItemListTable({
 }: ItemListTableProps) {
   const t = createTranslation({
     translations,
+    locale: i18nProps.translationLocale ?? i18nProps.locale,
     ...i18nProps,
   });
   const { sdk } = useSDK();

package/src/components/payments/list/list-table.tsx

@@ -4,6 +4,7 @@ import { useMemo } 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 type { Column, ListTableProps, TableQueryParams, TableQueryResponse } from "@/ui/components/table/types";
 import { Button } from "@/ui/components/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/ui/components/ui/popover";
@@ -22,7 +23,7 @@ import pl from "./locales/pl";
 import pt from "./locales/pt";
 import sl from "./locales/sl";
 
-const translations = {
+const translations = withTableTranslations({
   en,
   sl,
   de,
@@ -33,7 +34,7 @@ const translations = {
   nl,
   pl,
   hr,
-} as const;
+} as const);
 
 // Extended payment type that includes Invoice relation from API
 type PaymentWithInvoice = Payment & {
@@ -44,6 +45,7 @@ type PaymentListTableProps = {
   t?: (key: string) => string;
   namespace?: string;
   locale?: string;
+  translationLocale?: string;
   entityId?: string;
   onViewInvoice?: (invoiceId: string) => void;
   onEditPayment?: (payment: Payment) => void;
@@ -63,6 +65,7 @@ export default function PaymentListTable({
 }: PaymentListTableProps) {
   const t = createTranslation({
     translations,
+    locale: i18nProps.translationLocale ?? i18nProps.locale,
     ...i18nProps,
   });
 
@@ -99,13 +102,20 @@ export default function PaymentListTable({
       {
         id: "date",
         header: t("Date"),
-        cell: (payment) => <FormattedDate date={payment.date} />,
+        cell: (payment) => <FormattedDate date={payment.date} locale={i18nProps.locale} />,
       },
       {
         id: "amount",
         header: t("Amount"),
         align: "right",
-        cell: (payment) => <span className="font-medium">{payment.amount.toFixed(2)}</span>,
+        cell: (payment) => (
+          <span className="font-medium">
+            {new Intl.NumberFormat(i18nProps.locale, {
+              minimumFractionDigits: 2,
+              maximumFractionDigits: 2,
+            }).format(payment.amount)}
+          </span>
+        ),
       },
       {
         id: "type",

package/src/components/recurring-invoices/list/list-table.tsx

@@ -3,6 +3,7 @@ import { useMemo } 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 type { Column, ListTableProps, TableQueryParams, TableQueryResponse } from "@/ui/components/table/types";
 import { Badge } from "@/ui/components/ui/badge";
 import { createTranslation } from "@/ui/lib/translation";
@@ -20,7 +21,7 @@ import pl from "./locales/pl";
 import pt from "./locales/pt";
 import sl from "./locales/sl";
 
-const translations = {
+const translations = withTableTranslations({
   en,
   sl,
   de,
@@ -31,7 +32,7 @@ const translations = {
   nl,
   pl,
   hr,
-} as const;
+} as const);
 
 function statusVariant(status: string): "default" | "secondary" | "outline" {
   switch (status) {
@@ -48,6 +49,7 @@ type RecurringInvoiceListTableProps = {
   t?: (key: string) => string;
   namespace?: string;
   locale?: string;
+  translationLocale?: string;
   entityId?: string;
   onViewSourceInvoice?: (documentId: string) => void;
   onDeleteSuccess?: () => void;
@@ -65,6 +67,7 @@ export default function RecurringInvoiceListTable({
 }: RecurringInvoiceListTableProps) {
   const t = createTranslation({
     translations,
+    locale: i18nProps.translationLocale ?? i18nProps.locale,
     ...i18nProps,
   });
 
@@ -120,7 +123,7 @@ export default function RecurringInvoiceListTable({
         header: t("Next Run"),
         cell: (ri) =>
           ri.next_run_date ? (
-            <FormattedDate date={ri.next_run_date} />
+            <FormattedDate date={ri.next_run_date} locale={i18nProps.locale} />
           ) : (
             <span className="text-muted-foreground">-</span>
           ),
@@ -134,7 +137,7 @@ export default function RecurringInvoiceListTable({
       {
         id: "created_at",
         header: t("Created"),
-        cell: (ri) => <FormattedDate date={ri.created_at} />,
+        cell: (ri) => <FormattedDate date={ri.created_at} locale={i18nProps.locale} />,
       },
       {
         id: "actions",