@spaceinvoices/react-ui 0.1.1

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

@@ -0,0 +1,79 @@
+import type { CreateInvoiceRequest } from "@spaceinvoices/js-sdk";
+import type { CreateInvoiceSchema } from "@/ui/generated/schemas";
+import { prepareDocumentSubmission } from "../../documents/create/prepare-document-submission";
+
+type FursData = {
+  business_premise_name?: string;
+  electronic_device_name?: string;
+  skip?: boolean;
+};
+
+type EslogData = {
+  validation_enabled?: boolean;
+};
+
+/** Map of item index to gross price mode */
+type PriceModesMap = Record<number, boolean>;
+
+type PrepareOptions = {
+  originalCustomer: any;
+  wasCustomerFormShown?: boolean;
+  markAsPaid?: boolean;
+  paymentType?: string;
+  /** FURS fiscalization data (for Slovenia) */
+  furs?: FursData;
+  /** e-SLOG validation data (for Slovenia) */
+  eslog?: EslogData;
+  /** Map of item index to gross price mode (collected from component state) */
+  priceModes?: PriceModesMap;
+  /** Whether to save as draft (skips numbering and fiscalization) */
+  isDraft?: boolean;
+};
+
+/**
+ * Prepares invoice form data for API submission
+ * Handles customer data transformation, payment data, and FURS fiscalization
+ */
+export function prepareInvoiceSubmission(values: CreateInvoiceSchema, options: PrepareOptions): CreateInvoiceRequest {
+  const payload = prepareDocumentSubmission(values, {
+    originalCustomer: options.originalCustomer,
+    wasCustomerFormShown: options.wasCustomerFormShown,
+    markAsPaid: options.markAsPaid,
+    paymentType: options.paymentType,
+    documentType: "invoice",
+    secondaryDate: values.date_due,
+    priceModes: options.priceModes,
+    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) {
+      // Skip fiscalization - only send skip flag
+      (payload as any).furs = { skip: true };
+    } else if (options.furs.business_premise_name && options.furs.electronic_device_name) {
+      // Full FURS fiscalization
+      (payload as any).furs = {
+        business_premise_name: options.furs.business_premise_name,
+        electronic_device_name: options.furs.electronic_device_name,
+      };
+    }
+  }
+
+  // Add e-SLOG data if provided
+  if (options.eslog !== undefined) {
+    (payload as any).eslog = {
+      validation_enabled: options.eslog.validation_enabled,
+    };
+  }
+
+  return payload;
+}

package/src/components/invoices/create/use-invoice-customer-form.ts

@@ -0,0 +1,5 @@
+/**
+ * @deprecated Use useDocumentCustomerForm from documents/create instead
+ * This re-export exists for backward compatibility
+ */
+export { useDocumentCustomerForm as useInvoiceCustomerForm } from "../../documents/create/use-document-customer-form";

package/src/components/invoices/index.ts

@@ -0,0 +1,9 @@
+export { default as CreateInvoiceForm } from "./create/create-invoice-form";
+export * from "./invoices.hooks";
+export * from "./invoices-furs.hooks";
+export * from "./list";
+export { SendEmailDialog } from "./send-email-dialog";
+export * from "./shared";
+export { EslogInfoDisplay } from "./view/eslog-info-display";
+export { FursInfoDisplay } from "./view/furs-info-display";
+// Note: InvoicePreviewDisplay is now DocumentPreviewDisplay in documents/shared

package/src/components/invoices/invoices-furs.hooks.ts

@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useSDK } from "@/ui/providers/sdk-provider";
+
+interface VoidInvoiceParams {
+  invoiceId: string;
+  entityId: string;
+  reason?: string;
+}
+
+/**
+ * Hook to void an invoice
+ * Automatically handles FURS technical cancellation for fiscalized invoices
+ */
+export function useVoidInvoice() {
+  const { sdk } = useSDK();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async ({ invoiceId, entityId, reason }: VoidInvoiceParams) => {
+      return sdk.invoices.void(invoiceId, { reason: reason || undefined }, { entity_id: entityId });
+    },
+    onSuccess: (_, variables) => {
+      // Invalidate invoice queries to refresh the data
+      queryClient.invalidateQueries({ queryKey: ["invoices"] });
+      queryClient.invalidateQueries({ queryKey: ["documents", "invoice", variables.invoiceId] });
+    },
+  });
+}

package/src/components/invoices/invoices.hooks.ts

@@ -0,0 +1,110 @@
+import type { CreateInvoice201, CreateInvoiceBody } from "@spaceinvoices/js-sdk";
+import { useQuery } from "@tanstack/react-query";
+
+import { createResourceHooks } from "@/ui/hooks/create-resource-hooks";
+import { useSDK } from "@/ui/providers/sdk-provider";
+
+// Define a constant for the invoices cache key
+export const INVOICES_CACHE_KEY = "invoices";
+export const NEXT_INVOICE_NUMBER_CACHE_KEY = "next-invoice-number";
+
+// Create invoice-specific hooks using the factory
+const {
+  useCreateResource: useCreateInvoice,
+  useUpdateResource: useUpdateInvoice,
+  useDeleteResource: useDeleteInvoice,
+} = createResourceHooks<CreateInvoice201, CreateInvoiceBody>("invoices", INVOICES_CACHE_KEY);
+
+export { useCreateInvoice, useUpdateInvoice, useDeleteInvoice };
+
+// Re-export document types for backward compatibility
+export type { DocumentTypes } from "../documents/types";
+
+// ============================================================================
+// Next Invoice Number Preview
+// ============================================================================
+
+/** Response type for next invoice number preview */
+export type NextInvoiceNumberResponse = {
+  number: string | null;
+  furs: {
+    business_premise_name: string;
+    electronic_device_name: string;
+  } | null;
+};
+
+/**
+ * Hook to fetch the next invoice number preview
+ * Does not increment the sequence - purely for preview purposes
+ */
+export function useNextInvoiceNumber(
+  entityId: string,
+  options?: {
+    business_premise_name?: string;
+    electronic_device_name?: string;
+    enabled?: boolean;
+  },
+) {
+  const { sdk } = useSDK();
+
+  return useQuery<NextInvoiceNumberResponse>({
+    queryKey: [
+      NEXT_INVOICE_NUMBER_CACHE_KEY,
+      entityId,
+      options?.business_premise_name,
+      options?.electronic_device_name,
+    ],
+    queryFn: async () => {
+      const response = await sdk.documents.getNextNumber(
+        {
+          type: "invoice",
+          business_premise_name: options?.business_premise_name,
+          electronic_device_name: options?.electronic_device_name,
+        },
+        { entity_id: entityId },
+      );
+      return response as NextInvoiceNumberResponse;
+    },
+    enabled: options?.enabled !== false && !!entityId && !!sdk?.documents,
+    staleTime: 5000, // 5 seconds - short to catch concurrent creates
+  });
+}
+
+// ============================================================================
+// FURS Last-Used Combo (localStorage)
+// ============================================================================
+
+const FURS_LAST_USED_KEY = "si:furs:last-used";
+
+export type FursCombo = {
+  business_premise_name: string;
+  electronic_device_name: string;
+};
+
+/**
+ * Get last-used FURS premise/device combo from localStorage
+ * @param entityId - Entity ID (combos are stored per-entity)
+ */
+export function getLastUsedFursCombo(entityId: string): FursCombo | null {
+  if (typeof window === "undefined") return null;
+  try {
+    const stored = localStorage.getItem(`${FURS_LAST_USED_KEY}:${entityId}`);
+    return stored ? JSON.parse(stored) : null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Save last-used FURS premise/device combo to localStorage
+ * @param entityId - Entity ID
+ * @param combo - FURS premise/device combo
+ */
+export function setLastUsedFursCombo(entityId: string, combo: FursCombo): void {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(`${FURS_LAST_USED_KEY}:${entityId}`, JSON.stringify(combo));
+  } catch {
+    // Ignore localStorage errors (quota exceeded, etc.)
+  }
+}

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

@@ -0,0 +1,3 @@
+export { default as InvoiceListRowActions } from "./list-row-actions";
+export { default as InvoiceListTable } from "./list-table";
+export { useInvoiceDownload } from "./use-invoice-download";

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

@@ -0,0 +1,132 @@
+import type { Invoice } from "@spaceinvoices/js-sdk";
+
+import { Copy, Download, Eye, Link2Off, Loader2, Mail, MoreHorizontal, Plus } 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 { SendEmailDialog } from "../send-email-dialog";
+import { useInvoiceDownload } from "./use-invoice-download";
+
+type InvoiceListRowActionsProps = {
+  invoice: Invoice;
+  onAddPayment?: (invoice: Invoice) => void;
+  onDuplicate?: (invoice: Invoice) => void;
+  onDownloadStart?: () => void;
+  onDownloadSuccess?: (fileName: string) => void;
+  onDownloadError?: (error: string) => void;
+  onUnshare?: (invoice: Invoice) => Promise<void>;
+  isUnsharing?: boolean;
+} & ComponentTranslationProps;
+
+export default function InvoiceListRowActions({
+  invoice,
+  onAddPayment,
+  onDuplicate,
+  onDownloadStart,
+  onDownloadSuccess,
+  onDownloadError,
+  onUnshare,
+  isUnsharing,
+  ...i18nProps
+}: InvoiceListRowActionsProps) {
+  const t = createTranslation(i18nProps);
+  const [emailDialogOpen, setEmailDialogOpen] = useState(false);
+  const { isDownloading, downloadPDF } = useInvoiceDownload({
+    onDownloadStart,
+    onDownloadSuccess,
+    onDownloadError,
+    ...i18nProps,
+  });
+
+  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>
+            <DropdownMenuItem className="cursor-pointer" onClick={() => navigator.clipboard.writeText(invoice.id)}>
+              <Copy className="h-4 w-4" />
+              {t("Copy invoice ID")}
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem
+              className="cursor-pointer"
+              onClick={() => {
+                // TODO: Use router
+                window.location.href = `/app/documents/view/${invoice.id}`;
+              }}
+            >
+              <Eye className="h-4 w-4" />
+              {t("View invoice")}
+            </DropdownMenuItem>
+            <DropdownMenuItem className="cursor-pointer" onClick={() => downloadPDF(invoice)} disabled={isDownloading}>
+              <Download className="h-4 w-4" />
+              {isDownloading ? t("Downloading...") : t("Download PDF")}
+            </DropdownMenuItem>
+            <DropdownMenuItem className="cursor-pointer" onClick={() => setEmailDialogOpen(true)}>
+              <Mail className="h-4 w-4" />
+              {t("Send Email")}
+            </DropdownMenuItem>
+            {onDuplicate && (
+              <DropdownMenuItem className="cursor-pointer" onClick={() => onDuplicate(invoice)}>
+                <Copy className="h-4 w-4" />
+                {t("Duplicate")}
+              </DropdownMenuItem>
+            )}
+          </DropdownMenuGroup>
+          {!invoice.paid_in_full && (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuItem className="cursor-pointer" onClick={() => onAddPayment?.(invoice)}>
+                  <Plus className="h-4 w-4" />
+                  {t("Add Payment")}
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+            </>
+          )}
+          {invoice.shareable_id && onUnshare && (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuItem
+                  className="cursor-pointer text-destructive focus:text-destructive"
+                  onClick={() => onUnshare(invoice)}
+                  disabled={isUnsharing}
+                >
+                  {isUnsharing ? <Loader2 className="h-4 w-4 animate-spin" /> : <Link2Off className="h-4 w-4" />}
+                  {t("Unshare")}
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+            </>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <SendEmailDialog
+        invoice={invoice}
+        defaultEmail={invoice.customer?.email || ""}
+        open={emailDialogOpen}
+        onOpenChange={setEmailDialogOpen}
+        translationFn={t}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,165 @@
+import type { Invoice } 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,
+  FilterConfig,
+  ListTableProps,
+  TableQueryParams,
+  TableQueryResponse,
+} from "@/ui/components/table/types";
+import { Button } from "@/ui/components/ui/button";
+import { createTranslation } from "@/ui/lib/translation";
+import { useSDK } from "@/ui/providers/sdk-provider";
+
+import InvoiceListRowActions from "./list-row-actions";
+import de from "./locales/de";
+import sl from "./locales/sl";
+
+const translations = {
+  sl,
+  de,
+} as const;
+
+type InvoiceListTableProps = {
+  t?: (key: string) => string;
+  namespace?: string;
+  locale?: string;
+  entityId?: string;
+  onAddPayment?: (invoice: Invoice) => void;
+  onDuplicate?: (invoice: Invoice) => void;
+  onDownloadStart?: () => void;
+  onDownloadSuccess?: (fileName: string) => void;
+  onDownloadError?: (error: string) => void;
+} & ListTableProps<Invoice>;
+
+export default function InvoiceListTable({
+  queryParams,
+  onRowClick,
+  onAddPayment,
+  onDuplicate,
+  onChangeParams,
+  disableUrlSync,
+  entityId,
+  onDownloadStart,
+  onDownloadSuccess,
+  onDownloadError,
+  ...i18nProps
+}: InvoiceListTableProps) {
+  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.invoices.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<Invoice>;
+  }, entityId);
+
+  const filterConfig: FilterConfig = useMemo(
+    () => ({
+      dateFields: [
+        { id: "date", label: t("Date") },
+        { id: "date_due", label: t("Date Due") },
+        { id: "created_at", label: t("Created At") },
+      ],
+      statusFilter: true,
+    }),
+    [t],
+  );
+
+  const columns: Column<Invoice>[] = useMemo(
+    () => [
+      {
+        id: "number",
+        header: t("Number"),
+        sortable: true,
+        cell: (invoice) => (
+          <Button variant="link" className="cursor-pointer py-0 underline" onClick={() => onRowClick?.(invoice)}>
+            {(invoice as any).is_draft ? t("Draft") : invoice.number}
+          </Button>
+        ),
+      },
+      {
+        id: "customer",
+        header: t("Customer"),
+        cell: (invoice) => invoice.customer?.name ?? "-",
+      },
+      {
+        id: "date",
+        header: t("Date"),
+        sortable: true,
+        cell: (invoice) => <FormattedDate date={invoice.date} />,
+      },
+      {
+        id: "date_due",
+        header: t("Date Due"),
+        sortable: true,
+        cell: (invoice) => <FormattedDate date={invoice.date_due} />,
+      },
+      {
+        id: "total",
+        header: t("Total"),
+        sortable: true,
+        align: "right",
+        cell: (invoice) => invoice.total,
+      },
+      {
+        id: "total_with_tax",
+        header: t("Total with Tax"),
+        sortable: true,
+        align: "right",
+        cell: (invoice) => invoice.total_with_tax,
+      },
+      {
+        id: "actions",
+        header: "",
+        align: "right",
+        cell: (invoice) => (
+          <InvoiceListRowActions
+            invoice={invoice}
+            onAddPayment={onAddPayment}
+            onDuplicate={onDuplicate}
+            onDownloadStart={onDownloadStart}
+            onDownloadSuccess={onDownloadSuccess}
+            onDownloadError={onDownloadError}
+            {...i18nProps}
+          />
+        ),
+      },
+    ],
+    [t, onRowClick, onAddPayment, onDuplicate, onDownloadStart, onDownloadSuccess, onDownloadError, i18nProps],
+  );
+
+  return (
+    <DataTable
+      columns={columns}
+      queryParams={queryParams}
+      resourceName="invoice"
+      cacheKey="invoices"
+      createNewLink="/app/documents/add/invoice"
+      onFetch={handleFetch}
+      onChangeParams={onChangeParams}
+      disableUrlSync={disableUrlSync}
+      entityId={entityId}
+      filterConfig={filterConfig}
+      t={t}
+      locale={i18nProps.locale}
+    />
+  );
+}

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

@@ -0,0 +1,33 @@
+export default {
+  Draft: "Entwurf",
+  Number: "Nummer",
+  Customer: "Kunde",
+  Date: "Datum",
+  "Date Due": "Fälligkeitsdatum",
+  Total: "Gesamt",
+  "Total with Tax": "Gesamt mit MwSt",
+  Actions: "Aktionen",
+  "Open menu": "Menü öffnen",
+  "Copy invoice ID": "Rechnungs-ID kopieren",
+  "View invoice": "Rechnung anzeigen",
+  "Add Payment": "Zahlung hinzufügen",
+  "Download PDF": "PDF herunterladen",
+  "Downloading...": "Wird heruntergeladen...",
+  Duplicate: "Duplizieren",
+  "Send Email": "E-Mail senden",
+  Invoice: "Rechnung",
+  "Failed to download PDF": "PDF-Download fehlgeschlagen",
+  // Filter translations
+  "Search...": "Suchen...",
+  Filters: "Filter",
+  "Date Range": "Datumsbereich",
+  From: "Von",
+  To: "Bis",
+  "Clear filters": "Filter löschen",
+  Status: "Status",
+  Paid: "Bezahlt",
+  Unpaid: "Unbezahlt",
+  Overdue: "Überfällig",
+  Voided: "Storniert",
+  "Created At": "Erstellt am",
+} as const;

package/src/components/invoices/list/locales/sl.ts

@@ -0,0 +1,33 @@
+export default {
+  Draft: "Osnutek",
+  Number: "Številka",
+  Customer: "Stranka",
+  Date: "Datum",
+  "Date Due": "Datum zapadlosti",
+  Total: "Skupaj",
+  "Total with Tax": "Skupaj z DDV",
+  Actions: "Akcije",
+  "Open menu": "Odpri meni",
+  "Copy invoice ID": "Kopiraj ID računa",
+  "View invoice": "Prikaži račun",
+  "Add Payment": "Dodaj plačilo",
+  "Download PDF": "Prenesi PDF",
+  "Downloading...": "Prenašam...",
+  Duplicate: "Podvoji",
+  "Send Email": "Pošlji e-pošto",
+  Invoice: "Račun",
+  "Failed to download PDF": "Prenos PDF-ja je spodletel",
+  // Filter translations
+  "Search...": "Iskanje...",
+  Filters: "Filtri",
+  "Date Range": "Datumski razpon",
+  From: "Od",
+  To: "Do",
+  "Clear filters": "Počisti filtre",
+  Status: "Status",
+  Paid: "Plačano",
+  Unpaid: "Neplačano",
+  Overdue: "Zapadlo",
+  Voided: "Stornirano",
+  "Created At": "Ustvarjeno",
+} as const;

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

@@ -0,0 +1,62 @@
+import type { Invoice } from "@spaceinvoices/js-sdk";
+import { useState } from "react";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import { useEntities } from "@/ui/providers/entities-context";
+import { useSDK } from "@/ui/providers/sdk-provider";
+
+type UseInvoiceDownloadProps = {
+  onDownloadStart?: () => void;
+  onDownloadSuccess?: (fileName: string) => void;
+  onDownloadError?: (error: string) => void;
+} & ComponentTranslationProps;
+
+export function useInvoiceDownload({
+  onDownloadStart,
+  onDownloadSuccess,
+  onDownloadError,
+  ...i18nProps
+}: UseInvoiceDownloadProps) {
+  const [isDownloading, setIsDownloading] = useState(false);
+  const { activeEntity } = useEntities();
+  const { sdk } = useSDK();
+  const t = createTranslation(i18nProps);
+
+  const downloadPDF = async (invoice: Invoice) => {
+    if (!activeEntity?.id || !sdk) {
+      console.error("Missing SDK or active entity for PDF download");
+      onDownloadError?.(t("Failed to download PDF"));
+      return;
+    }
+
+    setIsDownloading(true);
+    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);
+
+      onDownloadSuccess?.(fileName);
+    } catch (error) {
+      console.error("Error downloading PDF:", error);
+      onDownloadError?.(t("Failed to download PDF"));
+    } finally {
+      setIsDownloading(false);
+    }
+  };
+
+  return {
+    isDownloading,
+    downloadPDF,
+  };
+}

package/src/components/invoices/send-email-dialog/index.ts

@@ -0,0 +1 @@
+export { SendEmailDialog } from "./send-email-dialog";