@spaceinvoices/react-ui 0.4.0 → 0.4.2

package/src/components/estimates/list/locales/it.ts

@@ -29,4 +29,7 @@ export default {
   "No results found": "Nessun preventivo trovato",
   "Try adjusting your search criteria": "Prova a modificare i criteri di ricerca",
   "Clear search": "Cancella ricerca",
+  selected: "selezionati",
+  "Export PDFs": "Esporta PDF",
+  "Deselect all": "Deseleziona tutto",
 } as const;

package/src/components/estimates/list/locales/nl.ts

@@ -29,4 +29,7 @@ export default {
   "No results found": "Geen offertes gevonden",
   "Try adjusting your search criteria": "Probeer uw zoekcriteria aan te passen",
   "Clear search": "Zoekopdracht wissen",
+  selected: "geselecteerd",
+  "Export PDFs": "PDFs exporteren",
+  "Deselect all": "Alles deselecteren",
 } as const;

package/src/components/estimates/list/locales/pl.ts

@@ -29,4 +29,7 @@ export default {
   "No results found": "Nie znaleziono kosztorysów",
   "Try adjusting your search criteria": "Spróbuj dostosować kryteria wyszukiwania",
   "Clear search": "Wyczyść wyszukiwanie",
+  selected: "wybranych",
+  "Export PDFs": "Eksportuj PDF-y",
+  "Deselect all": "Odznacz wszystko",
 } as const;

package/src/components/estimates/list/locales/pt.ts

@@ -29,4 +29,7 @@ export default {
   "No results found": "Nenhum orçamento encontrado",
   "Try adjusting your search criteria": "Tente ajustar os seus critérios de pesquisa",
   "Clear search": "Limpar pesquisa",
+  selected: "selecionados",
+  "Export PDFs": "Exportar PDFs",
+  "Deselect all": "Desselecionar tudo",
 } as const;

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

@@ -32,4 +32,7 @@ export default {
   "No results found": "Ni najdenih predračunov",
   "Try adjusting your search criteria": "Poskusite prilagoditi iskalne kriterije",
   "Clear search": "Počisti iskanje",
+  selected: "izbranih",
+  "Export PDFs": "Izvozi PDF-je",
+  "Deselect all": "Počisti izbiro",
 } as const;

package/src/components/export/document-export-form.tsx

@@ -44,7 +44,7 @@ export type DocumentExportFormProps = {
   t: TFunction;
   onSuccess?: (fileName: string) => void;
   onError?: (error: Error) => void;
-  onPdfExportStarted?: () => void;
+  onPdfExportStarted?: (jobId: string) => void;
   onLoadingChange?: (isLoading: boolean, toastId: string | number | null) => void;
 };
 
@@ -105,7 +105,8 @@ export function DocumentExportForm({
           throw new Error(error.error || `Export failed: ${response.statusText}`);
         }
 
-        onPdfExportStarted?.();
+        const data = await response.json();
+        onPdfExportStarted?.(data.id);
       } catch (error) {
         onError?.(error instanceof Error ? error : new Error("Unknown error"));
       } finally {
@@ -175,40 +176,39 @@ export function DocumentExportForm({
 
   return (
     <div className="space-y-6">
-      <p className="text-muted-foreground">{t("export-page.description")}</p>
-
-      {/* Document Type */}
-      <div className="space-y-2">
-        <Label htmlFor="document-type">{t("export-page.document-type")}</Label>
-        <Select value={documentType} onValueChange={(v) => setDocumentType(v as DocumentType)}>
-          <SelectTrigger id="document-type">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="invoice">{t("export-page.types.invoice")}</SelectItem>
-            <SelectItem value="estimate">{t("export-page.types.estimate")}</SelectItem>
-            <SelectItem value="credit_note">{t("export-page.types.credit_note")}</SelectItem>
-          </SelectContent>
-        </Select>
-      </div>
+      {/* Document Type + Export Format */}
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="document-type">{t("export-page.document-type")}</Label>
+          <Select value={documentType} onValueChange={(v) => setDocumentType(v as DocumentType)}>
+            <SelectTrigger id="document-type">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="invoice">{t("export-page.types.invoice")}</SelectItem>
+              <SelectItem value="estimate">{t("export-page.types.estimate")}</SelectItem>
+              <SelectItem value="credit_note">{t("export-page.types.credit_note")}</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
 
-      {/* Export Format */}
-      <div className="space-y-2">
-        <Label htmlFor="export-format">{t("export-page.format")}</Label>
-        <Select value={exportFormat} onValueChange={(v) => setExportFormat(v as ExportFormat)}>
-          <SelectTrigger id="export-format">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="xlsx">{t("export-page.formats.xlsx")}</SelectItem>
-            <SelectItem value="csv">{t("export-page.formats.csv")}</SelectItem>
-            <SelectItem value="pdf_zip">{t("export-page.formats.pdf_zip")}</SelectItem>
-          </SelectContent>
-        </Select>
-        {exportFormat === "pdf_zip" && (
-          <p className="text-muted-foreground text-sm">{t("export-page.pdf-export-info")}</p>
-        )}
+        <div className="space-y-2">
+          <Label htmlFor="export-format">{t("export-page.format")}</Label>
+          <Select value={exportFormat} onValueChange={(v) => setExportFormat(v as ExportFormat)}>
+            <SelectTrigger id="export-format">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="xlsx">{t("export-page.formats.xlsx")}</SelectItem>
+              <SelectItem value="csv">{t("export-page.formats.csv")}</SelectItem>
+              <SelectItem value="pdf_zip">{t("export-page.formats.pdf_zip")}</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
       </div>
+      {exportFormat === "pdf_zip" && (
+        <p className="text-muted-foreground text-sm">{t("export-page.pdf-export-info")}</p>
+      )}
 
       {/* Date Range */}
       <div className="grid grid-cols-2 gap-4">

package/src/components/invoices/create/create-invoice-form.tsx

@@ -29,9 +29,12 @@ import { DocumentItemsSection, type PriceModesMap } from "../../documents/create
 import { DocumentRecipientSection } from "../../documents/create/document-recipient-section";
 import { MarkAsPaidSection } from "../../documents/create/mark-as-paid-section";
 import type { DocumentTypes } from "../../documents/types";
+import { useFinaPremises, useFinaSettings } from "../../entities/fina-settings-form/fina-settings.hooks";
 import { useFursPremises, useFursSettings } from "../../entities/furs-settings-form/furs-settings.hooks";
 import {
+  getLastUsedFinaCombo,
   getLastUsedFursCombo,
+  setLastUsedFinaCombo,
   setLastUsedFursCombo,
   useCreateInvoice,
   useNextInvoiceNumber,
@@ -137,6 +140,23 @@ export default function CreateInvoiceForm({
   const [selectedDeviceName, setSelectedDeviceName] = useState<string | undefined>();
   const [skipFiscalization, setSkipFiscalization] = useState(false);
 
+  // ============================================================================
+  // FINA Settings & Premises
+  // ============================================================================
+  const { data: finaSettings, isLoading: isFinaSettingsLoading } = useFinaSettings(entityId);
+  const { data: finaPremises, isLoading: isFinaPremisesLoading } = useFinaPremises(entityId, {
+    enabled: finaSettings?.enabled === true,
+  });
+
+  const isFinaLoading = isFinaSettingsLoading || (finaSettings?.enabled && isFinaPremisesLoading);
+  const isFinaEnabled = finaSettings?.enabled === true;
+  const activeFinaPremises = useMemo(() => finaPremises?.filter((p: any) => p.is_active) || [], [finaPremises]);
+  const hasFinaPremises = activeFinaPremises.length > 0;
+
+  // FINA premise/device selection state (no skip - all FINA invoices must be fiscalized)
+  const [selectedFinaPremiseId, setSelectedFinaPremiseId] = useState<string | undefined>();
+  const [selectedFinaDeviceId, setSelectedFinaDeviceId] = useState<string | undefined>();
+
   // UI-only state (not part of API schema)
   const [markAsPaid, setMarkAsPaid] = useState(false);
   const [paymentTypes, setPaymentTypes] = useState<string[]>(["bank_transfer"]);
@@ -232,6 +252,51 @@ export default function CreateInvoiceForm({
     }
   }, [selectedPremiseName, activePremises, selectedDeviceName]);
 
+  // Get active FINA devices for selected premise
+  const activeFinaDevices = useMemo(() => {
+    if (!selectedFinaPremiseId) return [];
+    const premise = activeFinaPremises.find((p: any) => p.premise_id === selectedFinaPremiseId);
+    return premise?.Devices?.filter((d: any) => d.is_active) || [];
+  }, [activeFinaPremises, selectedFinaPremiseId]);
+
+  // Initialize FINA selection from localStorage or first active combo
+  useEffect(() => {
+    if (!isFinaEnabled || !hasFinaPremises || selectedFinaPremiseId) return;
+
+    const lastUsed = getLastUsedFinaCombo(entityId);
+    if (lastUsed) {
+      const premise = activeFinaPremises.find((p: any) => p.premise_id === lastUsed.premise_id);
+      const device = premise?.Devices?.find((d: any) => d.device_id === lastUsed.device_id && d.is_active);
+      if (premise && device) {
+        setSelectedFinaPremiseId(lastUsed.premise_id);
+        setSelectedFinaDeviceId(lastUsed.device_id);
+        return;
+      }
+    }
+
+    const firstPremise = activeFinaPremises[0];
+    const firstDevice = firstPremise?.Devices?.find((d: any) => d.is_active);
+    if (firstPremise && firstDevice) {
+      setSelectedFinaPremiseId(firstPremise.premise_id);
+      setSelectedFinaDeviceId(firstDevice.device_id);
+    }
+  }, [isFinaEnabled, hasFinaPremises, activeFinaPremises, entityId, selectedFinaPremiseId]);
+
+  // When FINA premise changes, select first active device
+  useEffect(() => {
+    if (!selectedFinaPremiseId) return;
+    const premise = activeFinaPremises.find((p: any) => p.premise_id === selectedFinaPremiseId);
+    const firstDevice = premise?.Devices?.find((d: any) => d.is_active);
+    if (firstDevice && selectedFinaDeviceId !== firstDevice.device_id) {
+      const currentDeviceInPremise = premise?.Devices?.find(
+        (d: any) => d.device_id === selectedFinaDeviceId && d.is_active,
+      );
+      if (!currentDeviceInPremise) {
+        setSelectedFinaDeviceId(firstDevice.device_id);
+      }
+    }
+  }, [selectedFinaPremiseId, activeFinaPremises, selectedFinaDeviceId]);
+
   const form = useForm<CreateInvoiceFormValues>({
     // Cast resolver to accept extended form type (includes UI-only fields)
     resolver: zodResolver(createInvoiceSchema) as Resolver<CreateInvoiceFormValues>,
@@ -291,6 +356,11 @@ export default function CreateInvoiceForm({
   const isFursActive =
     isFursEnabled && hasFursPremises && selectedPremiseName && selectedDeviceName && !skipFiscalization;
 
+  // FINA selection ready and active checks
+  const isFinaSelectionReady =
+    !isFinaEnabled || !hasFinaPremises || (!!selectedFinaPremiseId && !!selectedFinaDeviceId);
+  const isFinaActive = isFinaEnabled && hasFinaPremises && selectedFinaPremiseId && selectedFinaDeviceId;
+
   // ============================================================================
   // Next Invoice Number Preview
   // ============================================================================
@@ -299,20 +369,21 @@ export default function CreateInvoiceForm({
   const { data: nextNumberData, isLoading: isNextNumberLoading } = useNextInvoiceNumber(entityId, {
     business_premise_name: isFursActive ? selectedPremiseName : undefined,
     electronic_device_name: isFursActive ? selectedDeviceName : undefined,
-    enabled: !!entityId && !isFursLoading && isFursSelectionReady && !isEditMode,
+    enabled:
+      !!entityId && !isFursLoading && isFursSelectionReady && !isFinaLoading && isFinaSelectionReady && !isEditMode,
   });
 
-  // Overall loading state - wait until we have FURS data, selection ready, and next number (only in create mode)
+  // Overall loading state - wait until we have FURS/FINA data, selection ready, and next number (only in create mode)
   const isFormDataLoading = isEditMode
     ? false // In edit mode, don't wait for next number
-    : isFursLoading || !isFursSelectionReady || isNextNumberLoading;
+    : isFursLoading || !isFursSelectionReady || isFinaLoading || !isFinaSelectionReady || isNextNumberLoading;
 
   // Update header action with FURS and e-SLOG toggle buttons
   useEffect(() => {
     if (!onHeaderActionChange) return;
 
-    // Don't set header action while loading or in edit mode (FURS/e-SLOG not editable)
-    if (isFursLoading || isEditMode) {
+    // Don't set header action while loading or in edit mode (FURS/FINA/e-SLOG not editable)
+    if (isFursLoading || isFinaLoading || isEditMode) {
       onHeaderActionChange(null);
       return;
     }
@@ -406,6 +477,7 @@ export default function CreateInvoiceForm({
     }
   }, [
     isFursLoading,
+    isFinaLoading,
     isFursEnabled,
     hasFursPremises,
     skipFiscalization,
@@ -469,6 +541,13 @@ export default function CreateInvoiceForm({
           electronic_device_name: selectedDeviceName,
         });
       }
+      // Save FINA combo to localStorage on successful creation
+      if (isFinaActive && selectedFinaPremiseId && selectedFinaDeviceId) {
+        setLastUsedFinaCombo(entityId, {
+          premise_id: selectedFinaPremiseId,
+          device_id: selectedFinaDeviceId,
+        });
+      }
       // Invalidate customers cache when a customer was created/linked
       // This ensures the new customer appears in autocomplete for future documents
       if (data.customer_id) {
@@ -527,6 +606,12 @@ export default function CreateInvoiceForm({
               : undefined
           : undefined;
 
+      // Build FINA options (skip for drafts and edit mode; FINA can't be skipped)
+      const finaOptions =
+        !isDraft && !isEditMode && isFinaEnabled && selectedFinaPremiseId && selectedFinaDeviceId
+          ? { premise_id: selectedFinaPremiseId, device_id: selectedFinaDeviceId, payment_type: paymentTypes[0] }
+          : undefined;
+
       // Build e-SLOG options (skip for drafts and edit mode)
       const eslogOptions =
         !isDraft && !isEditMode && isEslogAvailable
@@ -539,6 +624,7 @@ export default function CreateInvoiceForm({
         markAsPaid: isDraft || isEditMode ? false : markAsPaid,
         paymentTypes,
         furs: fursOptions,
+        fina: finaOptions,
         eslog: eslogOptions,
         priceModes: priceModesRef.current,
         isDraft,
@@ -563,11 +649,14 @@ export default function CreateInvoiceForm({
       isEditMode,
       isEslogAvailable,
       isFursEnabled,
+      isFinaEnabled,
       markAsPaid,
       originalCustomer,
       paymentTypes,
       selectedDeviceName,
       selectedPremiseName,
+      selectedFinaPremiseId,
+      selectedFinaDeviceId,
       showCustomerForm,
       skipFiscalization,
     ],
@@ -798,6 +887,18 @@ export default function CreateInvoiceForm({
                   }
                 : undefined
             }
+            finaInline={
+              !isEditMode && isFinaEnabled && hasFinaPremises
+                ? {
+                    premises: activeFinaPremises.map((p: any) => ({ id: p.id, premise_id: p.premise_id })),
+                    devices: activeFinaDevices.map((d: any) => ({ id: d.id, device_id: d.device_id })),
+                    selectedPremise: selectedFinaPremiseId,
+                    selectedDevice: selectedFinaDeviceId,
+                    onPremiseChange: setSelectedFinaPremiseId,
+                    onDeviceChange: setSelectedFinaDeviceId,
+                  }
+                : undefined
+            }
             serviceDate={{
               dateType: serviceDateType,
               onDateTypeChange: setServiceDateType,
@@ -812,6 +913,7 @@ export default function CreateInvoiceForm({
                 paymentTypes={paymentTypes}
                 onPaymentTypesChange={setPaymentTypes}
                 t={t}
+                alwaysShowPaymentType={!!isFinaActive}
               />
             )}
           </DocumentDetailsSection>

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

@@ -8,6 +8,12 @@ type FursData = {
   skip?: boolean;
 };
 
+type FinaData = {
+  premise_id?: string;
+  device_id?: string;
+  payment_type?: string;
+};
+
 type EslogData = {
   validation_enabled?: boolean;
 };
@@ -22,6 +28,8 @@ type PrepareOptions = {
   paymentTypes?: string[];
   /** FURS fiscalization data (for Slovenia) */
   furs?: FursData;
+  /** FINA fiscalization data (for Croatia) */
+  fina?: FinaData;
   /** e-SLOG validation data (for Slovenia) */
   eslog?: EslogData;
   /** Map of item index to gross price mode (collected from component state) */
@@ -68,6 +76,15 @@ export function prepareInvoiceSubmission(values: CreateInvoiceSchema, options: P
     }
   }
 
+  // Add FINA data if provided (FINA can't be skipped - all invoices must be fiscalized)
+  if (options.fina?.premise_id && options.fina.device_id) {
+    (payload as any).fina = {
+      premise_id: options.fina.premise_id,
+      device_id: options.fina.device_id,
+      ...(options.fina.payment_type && { payment_type: options.fina.payment_type }),
+    };
+  }
+
   // Add e-SLOG data if provided
   if (options.eslog !== undefined) {
     (payload as any).eslog = {

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

@@ -1,4 +1,4 @@
-import type { CreateInvoice201, CreateInvoiceBody } from "@spaceinvoices/js-sdk";
+import type { CreateInvoice, Invoice } from "@spaceinvoices/js-sdk";
 import { useQuery } from "@tanstack/react-query";
 
 import { createResourceHooks } from "@/ui/hooks/create-resource-hooks";
@@ -13,7 +13,7 @@ const {
   useCreateResource: useCreateInvoice,
   useUpdateResource: useUpdateInvoice,
   useDeleteResource: useDeleteInvoice,
-} = createResourceHooks<CreateInvoice201, CreateInvoiceBody>("invoices", INVOICES_CACHE_KEY);
+} = createResourceHooks<Invoice, CreateInvoice>("invoices", INVOICES_CACHE_KEY);
 
 export { useCreateInvoice, useUpdateInvoice, useDeleteInvoice };
 
@@ -108,3 +108,33 @@ export function setLastUsedFursCombo(entityId: string, combo: FursCombo): void {
     // Ignore localStorage errors (quota exceeded, etc.)
   }
 }
+
+// ============================================================================
+// FINA Last-Used Combo (localStorage)
+// ============================================================================
+
+const FINA_LAST_USED_KEY = "hr:fina:last-used";
+
+export type FinaCombo = {
+  premise_id: string;
+  device_id: string;
+};
+
+export function getLastUsedFinaCombo(entityId: string): FinaCombo | null {
+  if (typeof window === "undefined") return null;
+  try {
+    const stored = localStorage.getItem(`${FINA_LAST_USED_KEY}:${entityId}`);
+    return stored ? JSON.parse(stored) : null;
+  } catch {
+    return null;
+  }
+}
+
+export function setLastUsedFinaCombo(entityId: string, combo: FinaCombo): void {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(`${FINA_LAST_USED_KEY}:${entityId}`, JSON.stringify(combo));
+  } catch {
+    // Ignore localStorage errors (quota exceeded, etc.)
+  }
+}

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

@@ -1,6 +1,6 @@
 import type { Invoice } from "@spaceinvoices/js-sdk";
 
-import { Copy, Download, Eye, Link2Off, Loader2, Mail, MoreHorizontal, Plus } from "lucide-react";
+import { Ban, Copy, Download, Eye, Link2Off, Loader2, Mail, MoreHorizontal, Plus } from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/ui/components/ui/button";
 import {
@@ -19,6 +19,7 @@ import { useInvoiceDownload } from "./use-invoice-download";
 
 type InvoiceListRowActionsProps = {
   invoice: Invoice;
+  onView?: (invoice: Invoice) => void;
   onAddPayment?: (invoice: Invoice) => void;
   onDuplicate?: (invoice: Invoice) => void;
   onDownloadStart?: () => void;
@@ -26,10 +27,13 @@ type InvoiceListRowActionsProps = {
   onDownloadError?: (error: string) => void;
   onUnshare?: (invoice: Invoice) => Promise<void>;
   isUnsharing?: boolean;
+  onVoid?: (invoice: Invoice) => void;
+  isVoiding?: boolean;
 } & ComponentTranslationProps;
 
 export default function InvoiceListRowActions({
   invoice,
+  onView,
   onAddPayment,
   onDuplicate,
   onDownloadStart,
@@ -37,6 +41,8 @@ export default function InvoiceListRowActions({
   onDownloadError,
   onUnshare,
   isUnsharing,
+  onVoid,
+  isVoiding,
   ...i18nProps
 }: InvoiceListRowActionsProps) {
   const t = createTranslation(i18nProps);
@@ -67,13 +73,7 @@ export default function InvoiceListRowActions({
           </DropdownMenuGroup>
           <DropdownMenuSeparator />
           <DropdownMenuGroup>
-            <DropdownMenuItem
-              className="cursor-pointer"
-              onClick={() => {
-                // TODO: Use router
-                window.location.href = `/app/documents/view/${invoice.id}`;
-              }}
-            >
+            <DropdownMenuItem className="cursor-pointer" onClick={() => onView?.(invoice)}>
               <Eye className="h-4 w-4" />
               {t("View invoice")}
             </DropdownMenuItem>
@@ -118,6 +118,21 @@ export default function InvoiceListRowActions({
               </DropdownMenuGroup>
             </>
           )}
+          {onVoid && !invoice.voided_at && !(invoice as any).is_draft && (
+            <>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuItem
+                  className="cursor-pointer text-destructive focus:text-destructive"
+                  onClick={() => onVoid(invoice)}
+                  disabled={isVoiding}
+                >
+                  {isVoiding ? <Loader2 className="h-4 w-4 animate-spin" /> : <Ban className="h-4 w-4" />}
+                  {t("Void")}
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+            </>
+          )}
         </DropdownMenuContent>
       </DropdownMenu>
       <SendEmailDialog

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

@@ -1,8 +1,9 @@
 import type { Invoice } from "@spaceinvoices/js-sdk";
-import { useMemo } from "react";
+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 { SelectionToolbar } from "@/ui/components/table/selection-toolbar";
 import type {
   Column,
   FilterConfig,
@@ -44,16 +45,21 @@ type InvoiceListTableProps = {
   namespace?: string;
   locale?: string;
   entityId?: string;
+  onView?: (invoice: Invoice) => void;
   onAddPayment?: (invoice: Invoice) => void;
   onDuplicate?: (invoice: Invoice) => void;
   onDownloadStart?: () => void;
   onDownloadSuccess?: (fileName: string) => void;
   onDownloadError?: (error: string) => void;
+  onExportSelected?: (documentIds: string[]) => void;
+  onVoid?: (invoice: Invoice) => void;
+  isVoiding?: boolean;
 } & ListTableProps<Invoice>;
 
 export default function InvoiceListTable({
   queryParams,
   onRowClick,
+  onView,
   onAddPayment,
   onDuplicate,
   onChangeParams,
@@ -62,6 +68,9 @@ export default function InvoiceListTable({
   onDownloadStart,
   onDownloadSuccess,
   onDownloadError,
+  onExportSelected,
+  onVoid,
+  isVoiding,
   ...i18nProps
 }: InvoiceListTableProps) {
   const t = createTranslation({
@@ -70,6 +79,7 @@ export default function InvoiceListTable({
   });
 
   const { sdk } = useSDK();
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
 
   const handleFetch = useTableFetch(async (params: TableQueryParams) => {
     if (!sdk) throw new Error("SDK not initialized");
@@ -99,6 +109,28 @@ export default function InvoiceListTable({
     [t],
   );
 
+  const handleExportPdfs = useCallback(() => {
+    if (selectedIds.size > 0 && onExportSelected) {
+      onExportSelected(Array.from(selectedIds));
+    }
+  }, [selectedIds, onExportSelected]);
+
+  const handleDeselectAll = useCallback(() => {
+    setSelectedIds(new Set());
+  }, []);
+
+  const selectionToolbar = useCallback(
+    (count: number) => (
+      <SelectionToolbar
+        selectedCount={count}
+        onExportPdfs={onExportSelected ? handleExportPdfs : undefined}
+        onDeselectAll={handleDeselectAll}
+        t={t}
+      />
+    ),
+    [handleExportPdfs, handleDeselectAll, onExportSelected, t],
+  );
+
   const columns: Column<Invoice>[] = useMemo(
     () => [
       {
@@ -149,18 +181,33 @@ export default function InvoiceListTable({
         cell: (invoice) => (
           <InvoiceListRowActions
             invoice={invoice}
+            onView={onView}
             onAddPayment={onAddPayment}
             onDuplicate={onDuplicate}
             onDownloadStart={onDownloadStart}
             onDownloadSuccess={onDownloadSuccess}
             onDownloadError={onDownloadError}
+            onVoid={onVoid}
+            isVoiding={isVoiding}
             t={t}
             locale={i18nProps.locale}
           />
         ),
       },
     ],
-    [t, onRowClick, onAddPayment, onDuplicate, onDownloadStart, onDownloadSuccess, onDownloadError, i18nProps.locale],
+    [
+      t,
+      onRowClick,
+      onView,
+      onAddPayment,
+      onDuplicate,
+      onDownloadStart,
+      onDownloadSuccess,
+      onDownloadError,
+      onVoid,
+      isVoiding,
+      i18nProps.locale,
+    ],
   );
 
   return (
@@ -177,6 +224,10 @@ export default function InvoiceListTable({
       filterConfig={filterConfig}
       t={t}
       locale={i18nProps.locale}
+      selectable={!!onExportSelected}
+      selectedIds={selectedIds}
+      onSelectionChange={setSelectedIds}
+      selectionToolbar={selectionToolbar}
     />
   );
 }

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

@@ -39,4 +39,8 @@ export default {
   "No results found": "Keine Rechnungen gefunden",
   "Try adjusting your search criteria": "Versuchen Sie, Ihre Suchkriterien anzupassen",
   "Clear search": "Suche zurücksetzen",
+  selected: "ausgewählt",
+  "Export PDFs": "PDFs exportieren",
+  "Deselect all": "Auswahl aufheben",
+  Void: "Stornieren",
 } as const;

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

@@ -5,4 +5,8 @@ export default {
   "Create new": "Create invoice",
   // No results translations
   "No results found": "No invoices found",
+  selected: "selected",
+  "Export PDFs": "Export PDFs",
+  "Deselect all": "Deselect all",
+  Void: "Void",
 } as const;

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

@@ -39,4 +39,8 @@ export default {
   "No results found": "No se encontraron facturas",
   "Try adjusting your search criteria": "Intente ajustar sus criterios de búsqueda",
   "Clear search": "Limpiar búsqueda",
+  selected: "seleccionados",
+  "Export PDFs": "Exportar PDFs",
+  "Deselect all": "Deseleccionar todo",
+  Void: "Anular",
 } as const;