@spaceinvoices/react-ui 0.4.1 → 0.4.3

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

@@ -38,4 +38,8 @@ export default {
   "No results found": "Nije pronadjen nijedan avansni racun",
   "Try adjusting your search criteria": "Pokusajte prilagoditi kriterije pretrazivanja",
   "Clear search": "Ocisti pretragu",
+  selected: "odabranih",
+  "Export PDFs": "Izvezi PDF-ove",
+  "Deselect all": "Poništi odabir",
+  "Partially Paid": "Djelomično plaćeno",
 } as const;

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

@@ -38,4 +38,8 @@ export default {
   "No results found": "Nessuna fattura anticipata trovata",
   "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",
+  "Partially Paid": "Parzialmente pagato",
 } as const;

package/src/components/advance-invoices/list/locales/nl.ts

@@ -38,4 +38,8 @@ export default {
   "No results found": "Geen voorschotfacturen 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",
+  "Partially Paid": "Gedeeltelijk betaald",
 } as const;

package/src/components/advance-invoices/list/locales/pl.ts

@@ -38,4 +38,8 @@ export default {
   "No results found": "Nie znaleziono faktur zaliczkowych",
   "Try adjusting your search criteria": "Sprobuj dostosowac kryteria wyszukiwania",
   "Clear search": "Wyczysc wyszukiwanie",
+  selected: "wybranych",
+  "Export PDFs": "Eksportuj PDF-y",
+  "Deselect all": "Odznacz wszystko",
+  "Partially Paid": "Częściowo opłacona",
 } as const;

package/src/components/advance-invoices/list/locales/pt.ts

@@ -38,4 +38,8 @@ export default {
   "No results found": "Nenhuma fatura antecipada encontrada",
   "Try adjusting your search criteria": "Tente ajustar os seus criterios de pesquisa",
   "Clear search": "Limpar pesquisa",
+  selected: "selecionados",
+  "Export PDFs": "Exportar PDFs",
+  "Deselect all": "Desselecionar tudo",
+  "Partially Paid": "Parcialmente pago",
 } as const;

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

@@ -38,4 +38,8 @@ export default {
   "No results found": "Ni najdenih avansnih rač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",
+  "Partially Paid": "Delno plačano",
 } as const;

package/src/components/credit-notes/create/create-credit-note-form.tsx

@@ -6,6 +6,7 @@ import type { Resolver } from "react-hook-form";
 import { useForm, useWatch } from "react-hook-form";
 import type { z } from "zod";
 import { Form } from "@/ui/components/ui/form";
+import { Skeleton } from "@/ui/components/ui/skeleton";
 import { createCreditNoteSchema } from "@/ui/generated/schemas";
 import { useNextDocumentNumber } from "@/ui/hooks/use-next-document-number";
 import type { ComponentTranslationProps } from "@/ui/lib/translation";
@@ -24,7 +25,8 @@ import { MarkAsPaidSection } from "../../documents/create/mark-as-paid-section";
 import { prepareDocumentSubmission } from "../../documents/create/prepare-document-submission";
 import { useDocumentCustomerForm } from "../../documents/create/use-document-customer-form";
 import type { DocumentTypes } from "../../documents/types";
-import { useCreateCreditNote } from "../credit-notes.hooks";
+import { useFinaPremises, useFinaSettings } from "../../entities/fina-settings-form/fina-settings.hooks";
+import { getLastUsedFinaCombo, setLastUsedFinaCombo, useCreateCreditNote } from "../credit-notes.hooks";
 import de from "./locales/de";
 import es from "./locales/es";
 import fr from "./locales/fr";
@@ -88,11 +90,23 @@ export default function CreateCreditNoteForm({
   const { activeEntity } = useEntities();
   const queryClient = useQueryClient();
 
-  // Fetch next credit note number
-  const { data: nextNumberData } = useNextDocumentNumber(entityId, "credit_note", {
-    enabled: !!entityId,
+  // ============================================================================
+  // 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 credit notes 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"]);
@@ -108,6 +122,68 @@ export default function CreateCreditNoteForm({
   }, [initialValues?.items]);
   const priceModesRef = useRef<PriceModesMap>(initialPriceModes);
 
+  // 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]);
+
+  // FINA selection ready and active checks
+  const isFinaSelectionReady =
+    !isFinaEnabled || !hasFinaPremises || (!!selectedFinaPremiseId && !!selectedFinaDeviceId);
+  const isFinaActive = isFinaEnabled && hasFinaPremises && selectedFinaPremiseId && selectedFinaDeviceId;
+
+  // ============================================================================
+  // Next Credit Note Number Preview
+  // ============================================================================
+  const { data: nextNumberData, isLoading: isNextNumberLoading } = useNextDocumentNumber(entityId, "credit_note", {
+    enabled: !!entityId && !isFinaLoading && isFinaSelectionReady,
+  });
+
+  // Overall loading state
+  const isFormDataLoading = isFinaLoading || !isFinaSelectionReady || isNextNumberLoading;
+
+  // No header action for credit notes - FINA can't be skipped
+
   // Get default payment terms from entity settings
   const defaultPaymentTerms = (activeEntity?.settings as any)?.default_credit_note_payment_terms || "";
 
@@ -169,6 +245,13 @@ export default function CreateCreditNoteForm({
   const { mutate: createCreditNote, isPending } = useCreateCreditNote({
     entityId,
     onSuccess: (data) => {
+      // 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
       if (data.customer_id) {
         queryClient.invalidateQueries({ queryKey: [CUSTOMERS_CACHE_KEY] });
@@ -181,6 +264,12 @@ export default function CreateCreditNoteForm({
   // Shared submit logic for both regular save and save as draft
   const submitCreditNote = useCallback(
     (values: CreateCreditNoteFormValues, isDraft: boolean) => {
+      // Build FINA options (skip for drafts; FINA can't be skipped)
+      const finaOptions =
+        !isDraft && isFinaEnabled && selectedFinaPremiseId && selectedFinaDeviceId
+          ? { premise_id: selectedFinaPremiseId, device_id: selectedFinaDeviceId, payment_type: paymentTypes[0] }
+          : undefined;
+
       const payload = prepareDocumentSubmission(values, {
         originalCustomer,
         wasCustomerFormShown: showCustomerForm,
@@ -190,9 +279,24 @@ export default function CreateCreditNoteForm({
         priceModes: priceModesRef.current,
         isDraft,
       });
+
+      // Add FINA data to payload
+      if (finaOptions) {
+        (payload as any).fina = finaOptions;
+      }
+
       createCreditNote(payload as CreateCreditNoteRequest);
     },
-    [createCreditNote, markAsPaid, originalCustomer, paymentTypes, showCustomerForm],
+    [
+      createCreditNote,
+      isFinaEnabled,
+      markAsPaid,
+      originalCustomer,
+      paymentTypes,
+      selectedFinaDeviceId,
+      selectedFinaPremiseId,
+      showCustomerForm,
+    ],
   );
 
   // Handle save as draft
@@ -276,6 +380,56 @@ export default function CreateCreditNoteForm({
     submitCreditNote(values, false);
   };
 
+  // Show skeleton while loading
+  if (isFormDataLoading) {
+    return (
+      <div className="space-y-8">
+        <div className="flex w-full flex-col md:flex-row md:gap-6">
+          <div className="flex-1 space-y-4">
+            <Skeleton className="h-7 w-24" />
+            <Skeleton className="h-10 w-full" />
+          </div>
+          <div className="flex-1 space-y-4">
+            <Skeleton className="h-7 w-20" />
+            <Skeleton className="h-5 w-16" />
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-5 w-12" />
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-5 w-16" />
+            <Skeleton className="h-10 w-full" />
+            <Skeleton className="h-5 w-20" />
+            <Skeleton className="h-10 w-full" />
+            <div className="space-y-3 rounded-md border p-4">
+              <div className="flex items-center gap-3">
+                <Skeleton className="h-4 w-4 rounded" />
+                <Skeleton className="h-5 w-28" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <Skeleton className="h-7 w-16" />
+          <div className="space-y-4 rounded-lg border p-4">
+            <Skeleton className="h-10 w-full" />
+            <div className="flex gap-4">
+              <Skeleton className="h-10 w-24" />
+              <Skeleton className="h-10 flex-1" />
+            </div>
+          </div>
+          <Skeleton className="h-9 w-24" />
+        </div>
+
+        <div className="space-y-2">
+          <Skeleton className="h-5 w-12" />
+          <Skeleton className="h-24 w-full" />
+        </div>
+
+        <Skeleton className="h-10 w-24" />
+      </div>
+    );
+  }
+
   return (
     <Form {...form}>
       <form id="create-credit-note-form" onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
@@ -291,7 +445,23 @@ export default function CreateCreditNoteForm({
             initialCustomerName={initialCustomerName}
             t={t}
           />
-          <DocumentDetailsSection control={form.control} documentType={_type} t={t}>
+          <DocumentDetailsSection
+            control={form.control}
+            documentType={_type}
+            t={t}
+            finaInline={
+              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
+            }
+          >
             {/* Credit note specific: Mark as paid section (UI-only state, not in form schema) */}
             <MarkAsPaidSection
               checked={markAsPaid}
@@ -299,6 +469,7 @@ export default function CreateCreditNoteForm({
               paymentTypes={paymentTypes}
               onPaymentTypesChange={setPaymentTypes}
               t={t}
+              alwaysShowPaymentType={!!isFinaActive}
             />
           </DocumentDetailsSection>
         </div>

package/src/components/credit-notes/create/locales/de.ts

@@ -66,4 +66,12 @@ export default {
   "Net price": "Nettopreis",
   "Gross price (tax included)": "Bruttopreis (inkl. MwSt.)",
   "Net price (before tax)": "Nettopreis (exkl. MwSt.)",
+  // FINA fiscalization
+  "Fiscally verify": "Steuerlich bestätigen",
+  "Click to skip fiscalization for this credit note":
+    "Klicken, um die Fiskalisierung für diese Gutschrift zu überspringen",
+  "Click to enable fiscalization": "Klicken, um die Fiskalisierung zu aktivieren",
+  "Cannot skip fiscalization for cash payments": "Fiskalisierung kann für Barzahlungen nicht übersprungen werden",
+  Premise: "Geschäftsräume",
+  Device: "Gerät",
 } as const;

package/src/components/credit-notes/create/locales/es.ts

@@ -65,4 +65,12 @@ export default {
   "Net price": "Precio neto",
   "Gross price (tax included)": "Precio bruto (impuestos incluidos)",
   "Net price (before tax)": "Precio neto (antes de impuestos)",
+  // FINA fiscalization
+  "Fiscally verify": "Verificar fiscalmente",
+  "Click to skip fiscalization for this credit note":
+    "Haga clic para omitir la fiscalizacion para esta nota de credito",
+  "Click to enable fiscalization": "Haga clic para habilitar la fiscalizacion",
+  "Cannot skip fiscalization for cash payments": "No se puede omitir la fiscalizacion para pagos en efectivo",
+  Premise: "Local",
+  Device: "Dispositivo",
 } as const;

package/src/components/credit-notes/create/locales/fr.ts

@@ -66,4 +66,11 @@ export default {
   "Net price": "Prix net",
   "Gross price (tax included)": "Prix brut (taxes comprises)",
   "Net price (before tax)": "Prix net (hors taxes)",
+  // FINA fiscalization
+  "Fiscally verify": "Verification fiscale",
+  "Click to skip fiscalization for this credit note": "Cliquez pour ignorer la fiscalisation pour cet avoir",
+  "Click to enable fiscalization": "Cliquez pour activer la fiscalisation",
+  "Cannot skip fiscalization for cash payments": "Impossible d'ignorer la fiscalisation pour les paiements en especes",
+  Premise: "Local",
+  Device: "Appareil",
 } as const;

package/src/components/credit-notes/create/locales/hr.ts

@@ -65,4 +65,11 @@ export default {
   "Net price": "Neto cijena",
   "Gross price (tax included)": "Bruto cijena (s porezom)",
   "Net price (before tax)": "Neto cijena (bez poreza)",
+  // FINA fiscalization
+  "Fiscally verify": "Fiskalno potvrdi",
+  "Click to skip fiscalization for this credit note": "Kliknite za preskakanje fiskalizacije za ovo odobrenje",
+  "Click to enable fiscalization": "Kliknite za ukljucivanje fiskalizacije",
+  "Cannot skip fiscalization for cash payments": "Za gotovinska placanja nije moguce preskociti fiskalizaciju",
+  Premise: "Prostor",
+  Device: "Uredaj",
 } as const;

package/src/components/credit-notes/create/locales/it.ts

@@ -65,4 +65,13 @@ export default {
   "Net price": "Prezzo netto",
   "Gross price (tax included)": "Prezzo lordo (imposte incluse)",
   "Net price (before tax)": "Prezzo netto (prima delle imposte)",
+  // FINA fiscalization
+  "Fiscally verify": "Verifica fiscale",
+  "Click to skip fiscalization for this credit note":
+    "Clicca per saltare la fiscalizzazione per questa nota di credito",
+  "Click to enable fiscalization": "Clicca per abilitare la fiscalizzazione",
+  "Cannot skip fiscalization for cash payments":
+    "Non e possibile saltare la fiscalizzazione per i pagamenti in contanti",
+  Premise: "Locale",
+  Device: "Dispositivo",
 } as const;

package/src/components/credit-notes/create/locales/nl.ts

@@ -66,4 +66,11 @@ export default {
   "Net price": "Nettoprijs",
   "Gross price (tax included)": "Brutoprijs (btw inbegrepen)",
   "Net price (before tax)": "Nettoprijs (exclusief btw)",
+  // FINA fiscalization
+  "Fiscally verify": "Fiscaal verifieren",
+  "Click to skip fiscalization for this credit note": "Klik om fiscalisatie voor deze creditnota over te slaan",
+  "Click to enable fiscalization": "Klik om fiscalisatie in te schakelen",
+  "Cannot skip fiscalization for cash payments": "Fiscalisatie kan niet worden overgeslagen voor contante betalingen",
+  Premise: "Bedrijfsruimte",
+  Device: "Apparaat",
 } as const;

package/src/components/credit-notes/create/locales/pl.ts

@@ -65,4 +65,11 @@ export default {
   "Net price": "Cena netto",
   "Gross price (tax included)": "Cena brutto (z podatkiem)",
   "Net price (before tax)": "Cena netto (przed podatkiem)",
+  // FINA fiscalization
+  "Fiscally verify": "Zweryfikuj fiskalnie",
+  "Click to skip fiscalization for this credit note": "Kliknij, aby pominac fiskalizacje dla tej noty kredytowej",
+  "Click to enable fiscalization": "Kliknij, aby wlaczyc fiskalizacje",
+  "Cannot skip fiscalization for cash payments": "Nie mozna pominac fiskalizacji dla platnosci gotowkowych",
+  Premise: "Lokal",
+  Device: "Urządzenie",
 } as const;

package/src/components/credit-notes/create/locales/pt.ts

@@ -65,4 +65,11 @@ export default {
   "Net price": "Preco liquido",
   "Gross price (tax included)": "Preco bruto (com imposto)",
   "Net price (before tax)": "Preco liquido (sem imposto)",
+  // FINA fiscalization
+  "Fiscally verify": "Verificar fiscalmente",
+  "Click to skip fiscalization for this credit note": "Clique para ignorar a fiscalizacao para esta nota de credito",
+  "Click to enable fiscalization": "Clique para ativar a fiscalizacao",
+  "Cannot skip fiscalization for cash payments": "Nao e possivel ignorar a fiscalizacao para pagamentos em dinheiro",
+  Premise: "Estabelecimento",
+  Device: "Dispositivo",
 } as const;

package/src/components/credit-notes/create/locales/sl.ts

@@ -64,4 +64,11 @@ export default {
   "Net price": "Neto cena",
   "Gross price (tax included)": "Bruto cena (z davkom)",
   "Net price (before tax)": "Neto cena (brez davka)",
+  // FINA fiscalization
+  "Fiscally verify": "Davčno potrdi",
+  "Click to skip fiscalization for this credit note": "Klikni za preskok davčnega potrjevanja za ta dobropis",
+  "Click to enable fiscalization": "Klikni za vključitev davčnega potrjevanja",
+  "Cannot skip fiscalization for cash payments": "Za gotovinska plačila ni mogoče preskočiti davčnega potrjevanja",
+  Premise: "Poslovni prostor",
+  Device: "Naprava",
 } as const;

package/src/components/credit-notes/credit-notes.hooks.ts

@@ -20,3 +20,33 @@ const {
 } = createResourceHooks<CreditNote, CreateCreditNoteRequest>("creditNotes", CREDIT_NOTES_CACHE_KEY);
 
 export { useCreateCreditNote, useUpdateCreditNote, useDeleteCreditNote };
+
+// ============================================================================
+// FINA Last-Used Combo (localStorage) for credit notes
+// ============================================================================
+
+const FINA_CN_LAST_USED_KEY = "hr:fina:cn: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_CN_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_CN_LAST_USED_KEY}:${entityId}`, JSON.stringify(combo));
+  } catch {
+    // Ignore localStorage errors
+  }
+}

package/src/components/credit-notes/list/list-row-actions.tsx

@@ -18,6 +18,7 @@ type CreditNote = any;
 
 type CreditNoteListRowActionsProps = {
   creditNote: CreditNote;
+  onView?: (creditNote: CreditNote) => void;
   onAddPayment?: (creditNote: CreditNote) => void;
   onDuplicate?: (creditNote: CreditNote) => void;
   onDownloadStart?: () => void;
@@ -29,6 +30,7 @@ type CreditNoteListRowActionsProps = {
 
 export default function CreditNoteListRowActions({
   creditNote,
+  onView,
   onAddPayment,
   onDuplicate,
   onDownloadStart,
@@ -64,12 +66,7 @@ export default function CreditNoteListRowActions({
         </DropdownMenuGroup>
         <DropdownMenuSeparator />
         <DropdownMenuGroup>
-          <DropdownMenuItem
-            className="cursor-pointer"
-            onClick={() => {
-              window.location.href = `/app/documents/view/${creditNote.id}`;
-            }}
-          >
+          <DropdownMenuItem className="cursor-pointer" onClick={() => onView?.(creditNote)}>
             <Eye className="h-4 w-4" />
             {t("View credit note")}
           </DropdownMenuItem>

package/src/components/credit-notes/list/list-table.tsx

@@ -1,8 +1,9 @@
 import type { CreditNote } 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,
@@ -45,16 +46,19 @@ type CreditNoteListTableProps = {
   namespace?: string;
   locale?: string;
   entityId?: string;
+  onView?: (creditNote: CreditNote) => void;
   onAddPayment?: (creditNote: CreditNote) => void;
   onDuplicate?: (creditNote: CreditNote) => void;
   onDownloadStart?: () => void;
   onDownloadSuccess?: (fileName: string) => void;
   onDownloadError?: (error: string) => void;
+  onExportSelected?: (documentIds: string[]) => void;
 } & ListTableProps<CreditNote>;
 
 export default function CreditNoteListTable({
   queryParams,
   onRowClick,
+  onView,
   onAddPayment,
   onDuplicate,
   onChangeParams,
@@ -62,6 +66,7 @@ export default function CreditNoteListTable({
   onDownloadStart,
   onDownloadSuccess,
   onDownloadError,
+  onExportSelected,
   ...i18nProps
 }: CreditNoteListTableProps) {
   const t = createTranslation({
@@ -70,6 +75,7 @@ export default function CreditNoteListTable({
   });
 
   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");
@@ -98,6 +104,28 @@ export default function CreditNoteListTable({
     [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<CreditNote>[] = useMemo(
     () => [
       {
@@ -148,7 +176,7 @@ export default function CreditNoteListTable({
       {
         id: "status",
         header: t("Status"),
-        cell: (creditNote) => <PaymentStatusBadge creditNote={creditNote} t={t} />,
+        cell: (creditNote) => <CreditNoteStatusBadge creditNote={creditNote} t={t} />,
       },
       {
         id: "actions",
@@ -157,6 +185,7 @@ export default function CreditNoteListTable({
         cell: (creditNote) => (
           <CreditNoteListRowActions
             creditNote={creditNote}
+            onView={onView}
             onAddPayment={onAddPayment}
             onDuplicate={onDuplicate}
             onDownloadStart={onDownloadStart}
@@ -168,7 +197,17 @@ export default function CreditNoteListTable({
         ),
       },
     ],
-    [t, onRowClick, onAddPayment, onDuplicate, onDownloadStart, onDownloadSuccess, onDownloadError, i18nProps.locale],
+    [
+      t,
+      onRowClick,
+      onView,
+      onAddPayment,
+      onDuplicate,
+      onDownloadStart,
+      onDownloadSuccess,
+      onDownloadError,
+      i18nProps.locale,
+    ],
   );
 
   return (
@@ -184,17 +223,49 @@ export default function CreditNoteListTable({
       filterConfig={filterConfig}
       t={t}
       locale={i18nProps.locale}
+      selectable={!!onExportSelected}
+      selectedIds={selectedIds}
+      onSelectionChange={setSelectedIds}
+      selectionToolbar={selectionToolbar}
     />
   );
 }
 
-/** Payment status badge for credit notes */
-function PaymentStatusBadge({ creditNote, t }: { creditNote: CreditNote; t: (key: string) => string }) {
+/** Status badge for credit notes */
+function CreditNoteStatusBadge({ creditNote, t }: { creditNote: CreditNote; t: (key: string) => string }) {
+  if ((creditNote as any).voided_at) {
+    return (
+      <Badge variant="outline" className="border-red-500 bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-400">
+        {t("Voided")}
+      </Badge>
+    );
+  }
+  if ((creditNote as any).is_draft) {
+    return null;
+  }
   if (creditNote.paid_in_full) {
-    return <span className="rounded-full bg-green-100 px-2 py-1 text-green-800 text-xs">{t("Paid")}</span>;
+    return (
+      <Badge
+        variant="outline"
+        className="border-green-500 bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-400"
+      >
+        {t("Paid")}
+      </Badge>
+    );
   }
   if (creditNote.total_paid > 0) {
-    return <span className="rounded-full bg-yellow-100 px-2 py-1 text-xs text-yellow-800">{t("Partial")}</span>;
+    return (
+      <Badge
+        variant="outline"
+        className="border-yellow-500 bg-yellow-50 text-yellow-700 dark:bg-yellow-950 dark:text-yellow-400"
+      >
+        {t("Partially Paid")}
+      </Badge>
+    );
   }
-  return <span className="rounded-full bg-gray-100 px-2 py-1 text-gray-800 text-xs">{t("Unpaid")}</span>;
+  return (
+    <Badge variant="outline" className="border-gray-500 bg-gray-50 text-gray-700 dark:bg-gray-800 dark:text-gray-400">
+      {t("Unpaid")}
+    </Badge>
+  );
 }