@spaceinvoices/react-ui 0.4.1 → 0.4.2

package/src/components/recurring-invoices/create-recurring-invoice-form/locales/nl.ts

@@ -0,0 +1,44 @@
+export default {
+  Name: "Naam",
+  "Enter schedule name": "Voer schemanaam in",
+  Frequency: "Frequentie",
+  "Select frequency": "Selecteer frequentie",
+  Daily: "Dagelijks",
+  Weekly: "Wekelijks",
+  Monthly: "Maandelijks",
+  Yearly: "Jaarlijks",
+  Interval: "Interval",
+  "Day of Week": "Dag van de week",
+  "Select day": "Selecteer dag",
+  Sunday: "Zondag",
+  Monday: "Maandag",
+  Tuesday: "Dinsdag",
+  Wednesday: "Woensdag",
+  Thursday: "Donderdag",
+  Friday: "Vrijdag",
+  Saturday: "Zaterdag",
+  "Day of Month": "Dag van de maand",
+  Month: "Maand",
+  "Select month": "Selecteer maand",
+  January: "Januari",
+  February: "Februari",
+  March: "Maart",
+  April: "April",
+  May: "Mei",
+  June: "Juni",
+  July: "Juli",
+  August: "Augustus",
+  September: "September",
+  October: "Oktober",
+  November: "November",
+  December: "December",
+  "Start Date": "Startdatum",
+  "End Date": "Einddatum",
+  "Pick a date": "Kies een datum",
+  "No end date": "Geen einddatum",
+  "Auto-send": "Automatisch verzenden",
+  "Automatically email generated invoices": "Automatisch gegenereerde facturen per e-mail verzenden",
+  "Create as draft": "Aanmaken als concept",
+  "Generated invoices will be drafts for review": "Gegenereerde facturen worden concepten ter beoordeling",
+  "There was an error creating the schedule": "Er is een fout opgetreden bij het aanmaken van het schema",
+} as const;

package/src/components/recurring-invoices/create-recurring-invoice-form/locales/pl.ts

@@ -0,0 +1,44 @@
+export default {
+  Name: "Nazwa",
+  "Enter schedule name": "Wprowadź nazwę harmonogramu",
+  Frequency: "Częstotliwość",
+  "Select frequency": "Wybierz częstotliwość",
+  Daily: "Codziennie",
+  Weekly: "Tygodniowo",
+  Monthly: "Miesięcznie",
+  Yearly: "Rocznie",
+  Interval: "Interwał",
+  "Day of Week": "Dzień tygodnia",
+  "Select day": "Wybierz dzień",
+  Sunday: "Niedziela",
+  Monday: "Poniedziałek",
+  Tuesday: "Wtorek",
+  Wednesday: "Środa",
+  Thursday: "Czwartek",
+  Friday: "Piątek",
+  Saturday: "Sobota",
+  "Day of Month": "Dzień miesiąca",
+  Month: "Miesiąc",
+  "Select month": "Wybierz miesiąc",
+  January: "Styczeń",
+  February: "Luty",
+  March: "Marzec",
+  April: "Kwiecień",
+  May: "Maj",
+  June: "Czerwiec",
+  July: "Lipiec",
+  August: "Sierpień",
+  September: "Wrzesień",
+  October: "Październik",
+  November: "Listopad",
+  December: "Grudzień",
+  "Start Date": "Data rozpoczęcia",
+  "End Date": "Data zakończenia",
+  "Pick a date": "Wybierz datę",
+  "No end date": "Bez daty zakończenia",
+  "Auto-send": "Automatyczne wysyłanie",
+  "Automatically email generated invoices": "Automatycznie wysyłaj wygenerowane faktury e-mailem",
+  "Create as draft": "Utwórz jako wersję roboczą",
+  "Generated invoices will be drafts for review": "Wygenerowane faktury będą wersjami roboczymi do przeglądu",
+  "There was an error creating the schedule": "Wystąpił błąd podczas tworzenia harmonogramu",
+} as const;

package/src/components/recurring-invoices/create-recurring-invoice-form/locales/pt.ts

@@ -0,0 +1,44 @@
+export default {
+  Name: "Nome",
+  "Enter schedule name": "Insira o nome do agendamento",
+  Frequency: "Frequência",
+  "Select frequency": "Selecionar frequência",
+  Daily: "Diário",
+  Weekly: "Semanal",
+  Monthly: "Mensal",
+  Yearly: "Anual",
+  Interval: "Intervalo",
+  "Day of Week": "Dia da semana",
+  "Select day": "Selecionar dia",
+  Sunday: "Domingo",
+  Monday: "Segunda-feira",
+  Tuesday: "Terça-feira",
+  Wednesday: "Quarta-feira",
+  Thursday: "Quinta-feira",
+  Friday: "Sexta-feira",
+  Saturday: "Sábado",
+  "Day of Month": "Dia do mês",
+  Month: "Mês",
+  "Select month": "Selecionar mês",
+  January: "Janeiro",
+  February: "Fevereiro",
+  March: "Março",
+  April: "Abril",
+  May: "Maio",
+  June: "Junho",
+  July: "Julho",
+  August: "Agosto",
+  September: "Setembro",
+  October: "Outubro",
+  November: "Novembro",
+  December: "Dezembro",
+  "Start Date": "Data de início",
+  "End Date": "Data de fim",
+  "Pick a date": "Escolher data",
+  "No end date": "Sem data de fim",
+  "Auto-send": "Envio automático",
+  "Automatically email generated invoices": "Enviar automaticamente faturas geradas por e-mail",
+  "Create as draft": "Criar como rascunho",
+  "Generated invoices will be drafts for review": "As faturas geradas serão rascunhos para revisão",
+  "There was an error creating the schedule": "Ocorreu um erro ao criar o agendamento",
+} as const;

package/src/components/recurring-invoices/create-recurring-invoice-form/locales/sl.ts

@@ -0,0 +1,44 @@
+export default {
+  Name: "Ime",
+  "Enter schedule name": "Vnesite ime urnika",
+  Frequency: "Pogostost",
+  "Select frequency": "Izberite pogostost",
+  Daily: "Dnevno",
+  Weekly: "Tedensko",
+  Monthly: "Mesečno",
+  Yearly: "Letno",
+  Interval: "Interval",
+  "Day of Week": "Dan v tednu",
+  "Select day": "Izberite dan",
+  Sunday: "Nedelja",
+  Monday: "Ponedeljek",
+  Tuesday: "Torek",
+  Wednesday: "Sreda",
+  Thursday: "Četrtek",
+  Friday: "Petek",
+  Saturday: "Sobota",
+  "Day of Month": "Dan v mesecu",
+  Month: "Mesec",
+  "Select month": "Izberite mesec",
+  January: "Januar",
+  February: "Februar",
+  March: "Marec",
+  April: "April",
+  May: "Maj",
+  June: "Junij",
+  July: "Julij",
+  August: "Avgust",
+  September: "September",
+  October: "Oktober",
+  November: "November",
+  December: "December",
+  "Start Date": "Datum začetka",
+  "End Date": "Datum konca",
+  "Pick a date": "Izberite datum",
+  "No end date": "Brez datuma konca",
+  "Auto-send": "Samodejno pošlji",
+  "Automatically email generated invoices": "Samodejno pošlji ustvarjene račune po e-pošti",
+  "Create as draft": "Ustvari kot osnutek",
+  "Generated invoices will be drafts for review": "Ustvarjeni računi bodo osnutki za pregled",
+  "There was an error creating the schedule": "Prišlo je do napake pri ustvarjanju urnika",
+} as const;

package/src/components/recurring-invoices/index.ts

@@ -0,0 +1,3 @@
+export { default as CreateRecurringInvoiceForm } from "./create-recurring-invoice-form/create-recurring-invoice-form";
+export * from "./list";
+export * from "./recurring-invoices.hooks";

package/src/components/recurring-invoices/list/index.ts

@@ -0,0 +1,2 @@
+export { default as RecurringInvoiceListRowActions } from "./list-row-actions";
+export { default as RecurringInvoiceListTable } from "./list-table";

package/src/components/recurring-invoices/list/list-row-actions.tsx

@@ -0,0 +1,139 @@
+import type { RecurringInvoice } from "@spaceinvoices/js-sdk";
+import { useQueryClient } from "@tanstack/react-query";
+import { Eye, MoreHorizontal, Pause, Play, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { Button } from "@/ui/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/ui/components/ui/dropdown-menu";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import { useSDK } from "@/ui/providers/sdk-provider";
+
+import { RECURRING_INVOICES_CACHE_KEY, useDeleteRecurringInvoice } from "../recurring-invoices.hooks";
+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 = {
+  sl,
+  de,
+  it,
+  fr,
+  es,
+  pt,
+  nl,
+  pl,
+  hr,
+} as const;
+
+type RecurringInvoiceListRowActionsProps = {
+  recurringInvoice: RecurringInvoice;
+  entityId?: string;
+  onViewSourceInvoice?: (documentId: string) => void;
+  onDeleteSuccess?: () => void;
+  onDeleteError?: (error: string) => void;
+} & ComponentTranslationProps;
+
+export default function RecurringInvoiceListRowActions({
+  recurringInvoice,
+  entityId,
+  onViewSourceInvoice,
+  onDeleteSuccess,
+  onDeleteError,
+  ...i18nProps
+}: RecurringInvoiceListRowActionsProps) {
+  const t = createTranslation({
+    translations,
+    ...i18nProps,
+  });
+
+  const { sdk } = useSDK();
+  const queryClient = useQueryClient();
+  const [isToggling, setIsToggling] = useState(false);
+
+  const { mutate: deleteRecurringInvoice, isPending: isDeleting } = useDeleteRecurringInvoice({
+    entityId,
+    onSuccess: () => {
+      onDeleteSuccess?.();
+    },
+    onError: (error: Error) => {
+      onDeleteError?.(error.message);
+    },
+  });
+
+  const handleDelete = () => {
+    deleteRecurringInvoice({ id: recurringInvoice.id });
+  };
+
+  const handleTogglePause = async () => {
+    if (!sdk) return;
+    setIsToggling(true);
+    try {
+      if (recurringInvoice.status === "active") {
+        await sdk.recurringInvoices.pauseRecurringInvoice(recurringInvoice.id);
+      } else {
+        await sdk.recurringInvoices.resumeRecurringInvoice(recurringInvoice.id);
+      }
+      queryClient.invalidateQueries({ queryKey: [RECURRING_INVOICES_CACHE_KEY] });
+    } catch (error) {
+      onDeleteError?.(error instanceof Error ? error.message : "Unknown error");
+    } finally {
+      setIsToggling(false);
+    }
+  };
+
+  const isPaused = recurringInvoice.status === "paused";
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="h-8 w-8 cursor-pointer p-0" id="action-menu-trigger">
+          <span className="sr-only">{t("Open menu")}</span>
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuLabel>{t("Actions")}</DropdownMenuLabel>
+        <DropdownMenuGroup>
+          {recurringInvoice.document_id && (
+            <DropdownMenuItem
+              className="cursor-pointer"
+              onClick={() => onViewSourceInvoice?.(recurringInvoice.document_id)}
+            >
+              <Eye className="h-4 w-4" />
+              {t("View source invoice")}
+            </DropdownMenuItem>
+          )}
+          <DropdownMenuItem className="cursor-pointer" onClick={handleTogglePause} disabled={isToggling}>
+            {isPaused ? <Play className="h-4 w-4" /> : <Pause className="h-4 w-4" />}
+            {isToggling ? t("Processing...") : isPaused ? t("Resume") : t("Pause")}
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            className="cursor-pointer text-destructive focus:text-destructive"
+            onClick={handleDelete}
+            disabled={isDeleting}
+          >
+            <Trash2 className="h-4 w-4" />
+            {isDeleting ? t("Deleting...") : t("Delete schedule")}
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

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

@@ -0,0 +1,179 @@
+import type { RecurringInvoice } from "@spaceinvoices/js-sdk";
+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 type { Column, ListTableProps, TableQueryParams, TableQueryResponse } from "@/ui/components/table/types";
+import { Badge } from "@/ui/components/ui/badge";
+import { createTranslation } from "@/ui/lib/translation";
+import { useSDK } from "@/ui/providers/sdk-provider";
+
+import RecurringInvoiceListRowActions from "./list-row-actions";
+import de from "./locales/de";
+import en from "./locales/en";
+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 = {
+  en,
+  sl,
+  de,
+  it,
+  fr,
+  es,
+  pt,
+  nl,
+  pl,
+  hr,
+} as const;
+
+function statusVariant(status: string): "default" | "secondary" | "outline" {
+  switch (status) {
+    case "active":
+      return "default";
+    case "paused":
+      return "secondary";
+    default:
+      return "outline";
+  }
+}
+
+type RecurringInvoiceListTableProps = {
+  t?: (key: string) => string;
+  namespace?: string;
+  locale?: string;
+  entityId?: string;
+  onViewSourceInvoice?: (documentId: string) => void;
+  onDeleteSuccess?: () => void;
+  onDeleteError?: (error: string) => void;
+} & ListTableProps<RecurringInvoice>;
+
+export default function RecurringInvoiceListTable({
+  queryParams,
+  onChangeParams,
+  entityId,
+  onViewSourceInvoice,
+  onDeleteSuccess,
+  onDeleteError,
+  ...i18nProps
+}: RecurringInvoiceListTableProps) {
+  const t = createTranslation({
+    translations,
+    ...i18nProps,
+  });
+
+  const { sdk } = useSDK();
+
+  const handleFetch = useTableFetch(async (params: TableQueryParams) => {
+    if (!sdk) throw new Error("SDK not initialized");
+    if (!params.entity_id) throw new Error("Entity ID required");
+
+    const response = await sdk.recurringInvoices.list({
+      entity_id: params.entity_id,
+      limit: params.limit,
+      next_cursor: params.next_cursor,
+      prev_cursor: params.prev_cursor,
+      order_by: params.order_by,
+      search: params.search,
+      query: params.query,
+    });
+    return response as unknown as TableQueryResponse<RecurringInvoice>;
+  }, entityId);
+
+  const frequencyLabels: Record<string, string> = useMemo(
+    () => ({
+      daily: t("frequency.daily"),
+      weekly: t("frequency.weekly"),
+      monthly: t("frequency.monthly"),
+      yearly: t("frequency.yearly"),
+    }),
+    [t],
+  );
+
+  const columns: Column<RecurringInvoice>[] = useMemo(
+    () => [
+      {
+        id: "name",
+        header: t("Name"),
+        sortable: true,
+        cell: (ri) => <span className="font-medium">{ri.name}</span>,
+      },
+      {
+        id: "frequency",
+        header: t("Frequency"),
+        sortable: true,
+        cell: (ri) => {
+          const label = frequencyLabels[ri.frequency] ?? ri.frequency;
+          return ri.interval > 1 ? `${t("Every")} ${ri.interval} ${label.toLowerCase()}` : label;
+        },
+      },
+      {
+        id: "status",
+        header: t("Status"),
+        sortable: true,
+        cell: (ri) => <Badge variant={statusVariant(ri.status)}>{t(`status.${ri.status}`)}</Badge>,
+      },
+      {
+        id: "next_run_date",
+        header: t("Next Run"),
+        sortable: true,
+        cell: (ri) =>
+          ri.next_run_date ? (
+            <FormattedDate date={ri.next_run_date} />
+          ) : (
+            <span className="text-muted-foreground">-</span>
+          ),
+      },
+      {
+        id: "invoices_generated",
+        header: t("Generated"),
+        sortable: true,
+        align: "right",
+        cell: (ri) => ri.invoices_generated,
+      },
+      {
+        id: "created_at",
+        header: t("Created"),
+        sortable: true,
+        cell: (ri) => <FormattedDate date={ri.created_at} />,
+      },
+      {
+        id: "actions",
+        header: "",
+        align: "right",
+        cell: (ri) => (
+          <RecurringInvoiceListRowActions
+            recurringInvoice={ri}
+            entityId={entityId}
+            onViewSourceInvoice={onViewSourceInvoice}
+            onDeleteSuccess={onDeleteSuccess}
+            onDeleteError={onDeleteError}
+            t={t}
+            locale={i18nProps.locale}
+          />
+        ),
+      },
+    ],
+    [t, frequencyLabels, entityId, onViewSourceInvoice, onDeleteSuccess, onDeleteError, i18nProps.locale],
+  );
+
+  return (
+    <DataTable
+      columns={columns}
+      queryParams={queryParams}
+      resourceName="recurring-invoice"
+      cacheKey="recurring-invoices"
+      onFetch={handleFetch}
+      onChangeParams={onChangeParams}
+      entityId={entityId}
+      t={t}
+      locale={i18nProps.locale}
+    />
+  );
+}

package/src/components/recurring-invoices/list/locales/de.ts

@@ -0,0 +1,27 @@
+export default {
+  Name: "Name",
+  Frequency: "Häufigkeit",
+  Status: "Status",
+  "Next Run": "Nächste Ausführung",
+  Generated: "Erstellt",
+  Created: "Erstellt",
+  Every: "Alle",
+  Actions: "Aktionen",
+  "Open menu": "Menü öffnen",
+  "View source invoice": "Quellrechnung anzeigen",
+  Pause: "Pausieren",
+  Resume: "Fortsetzen",
+  "Processing...": "Verarbeitung...",
+  "Delete schedule": "Plan löschen",
+  "Deleting...": "Lösche...",
+  "frequency.daily": "Täglich",
+  "frequency.weekly": "Wöchentlich",
+  "frequency.monthly": "Monatlich",
+  "frequency.yearly": "Jährlich",
+  "status.active": "Aktiv",
+  "status.paused": "Pausiert",
+  "status.completed": "Abgeschlossen",
+  "Your list is empty": "Ihre Liste der wiederkehrenden Rechnungen ist leer",
+  "Get started by creating your first entry": "Erstellen Sie Ihren ersten wiederkehrenden Plan",
+  "No results found": "Keine wiederkehrenden Rechnungen gefunden",
+} as const;

package/src/components/recurring-invoices/list/locales/en.ts

@@ -0,0 +1,5 @@
+export default {
+  "Your list is empty": "Your recurring invoices list is empty",
+  "Get started by creating your first entry": "Get started by creating your first recurring schedule",
+  "No results found": "No recurring invoices found",
+} as const;

package/src/components/recurring-invoices/list/locales/es.ts

@@ -0,0 +1,27 @@
+export default {
+  Name: "Nombre",
+  Frequency: "Frecuencia",
+  Status: "Estado",
+  "Next Run": "Próxima ejecución",
+  Generated: "Generadas",
+  Created: "Creado",
+  Every: "Cada",
+  Actions: "Acciones",
+  "Open menu": "Abrir menú",
+  "View source invoice": "Ver factura de origen",
+  Pause: "Pausar",
+  Resume: "Reanudar",
+  "Processing...": "Procesando...",
+  "Delete schedule": "Eliminar programa",
+  "Deleting...": "Eliminando...",
+  "frequency.daily": "Diario",
+  "frequency.weekly": "Semanal",
+  "frequency.monthly": "Mensual",
+  "frequency.yearly": "Anual",
+  "status.active": "Activo",
+  "status.paused": "Pausado",
+  "status.completed": "Completado",
+  "Your list is empty": "Su lista de facturas recurrentes está vacía",
+  "Get started by creating your first entry": "Comience creando su primer programa recurrente",
+  "No results found": "No se encontraron facturas recurrentes",
+} as const;

package/src/components/recurring-invoices/list/locales/fr.ts

@@ -0,0 +1,27 @@
+export default {
+  Name: "Nom",
+  Frequency: "Fréquence",
+  Status: "Statut",
+  "Next Run": "Prochaine exécution",
+  Generated: "Générées",
+  Created: "Créé",
+  Every: "Tous les",
+  Actions: "Actions",
+  "Open menu": "Ouvrir le menu",
+  "View source invoice": "Voir la facture source",
+  Pause: "Mettre en pause",
+  Resume: "Reprendre",
+  "Processing...": "Traitement...",
+  "Delete schedule": "Supprimer le programme",
+  "Deleting...": "Suppression...",
+  "frequency.daily": "Quotidien",
+  "frequency.weekly": "Hebdomadaire",
+  "frequency.monthly": "Mensuel",
+  "frequency.yearly": "Annuel",
+  "status.active": "Actif",
+  "status.paused": "En pause",
+  "status.completed": "Terminé",
+  "Your list is empty": "Votre liste de factures récurrentes est vide",
+  "Get started by creating your first entry": "Commencez par créer votre premier programme récurrent",
+  "No results found": "Aucune facture récurrente trouvée",
+} as const;

package/src/components/recurring-invoices/list/locales/hr.ts

@@ -0,0 +1,27 @@
+export default {
+  Name: "Naziv",
+  Frequency: "Učestalost",
+  Status: "Status",
+  "Next Run": "Sljedeće pokretanje",
+  Generated: "Generirano",
+  Created: "Kreirano",
+  Every: "Svaki",
+  Actions: "Akcije",
+  "Open menu": "Otvori izbornik",
+  "View source invoice": "Prikaži izvorni račun",
+  Pause: "Pauziraj",
+  Resume: "Nastavi",
+  "Processing...": "Obrađujem...",
+  "Delete schedule": "Obriši raspored",
+  "Deleting...": "Brišem...",
+  "frequency.daily": "Dnevno",
+  "frequency.weekly": "Tjedno",
+  "frequency.monthly": "Mjesečno",
+  "frequency.yearly": "Godišnje",
+  "status.active": "Aktivan",
+  "status.paused": "Pauziran",
+  "status.completed": "Završen",
+  "Your list is empty": "Vaš popis ponavljajućih računa je prazan",
+  "Get started by creating your first entry": "Počnite kreiranjem prvog ponavljajućeg rasporeda",
+  "No results found": "Nisu pronađeni ponavljajući računi",
+} as const;

package/src/components/recurring-invoices/list/locales/it.ts

@@ -0,0 +1,27 @@
+export default {
+  Name: "Nome",
+  Frequency: "Frequenza",
+  Status: "Stato",
+  "Next Run": "Prossima esecuzione",
+  Generated: "Generate",
+  Created: "Creato",
+  Every: "Ogni",
+  Actions: "Azioni",
+  "Open menu": "Apri menu",
+  "View source invoice": "Visualizza fattura originale",
+  Pause: "Pausa",
+  Resume: "Riprendi",
+  "Processing...": "Elaborazione...",
+  "Delete schedule": "Elimina programma",
+  "Deleting...": "Eliminazione...",
+  "frequency.daily": "Giornaliero",
+  "frequency.weekly": "Settimanale",
+  "frequency.monthly": "Mensile",
+  "frequency.yearly": "Annuale",
+  "status.active": "Attivo",
+  "status.paused": "In pausa",
+  "status.completed": "Completato",
+  "Your list is empty": "La lista delle fatture ricorrenti è vuota",
+  "Get started by creating your first entry": "Inizia creando il tuo primo programma ricorrente",
+  "No results found": "Nessuna fattura ricorrente trovata",
+} as const;