@spaceinvoices/react-ui 0.4.1 → 0.4.3

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-furs.hooks.ts

@@ -1,28 +1,43 @@
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { useSDK } from "@/ui/providers/sdk-provider";
 
-interface VoidInvoiceParams {
-  invoiceId: string;
+interface VoidDocumentParams {
+  documentId: string;
+  documentType: "invoice" | "credit_note" | "advance_invoice";
   entityId: string;
   reason?: string;
 }
 
 /**
- * Hook to void an invoice
- * Automatically handles FURS technical cancellation for fiscalized invoices
+ * Hook to void a document (invoice, credit note, or advance invoice)
+ * Automatically handles FURS/FINA technical cancellation for fiscalized documents
  */
-export function useVoidInvoice() {
+export function useVoidDocument() {
   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 });
+    mutationFn: async ({ documentId, documentType, entityId, reason }: VoidDocumentParams) => {
+      const body = { reason: reason || undefined };
+      const opts = { entity_id: entityId };
+
+      switch (documentType) {
+        case "invoice":
+          return sdk.invoices.void(documentId, body, opts);
+        case "credit_note":
+          return sdk.creditNotes.void(documentId, body, opts);
+        case "advance_invoice":
+          return sdk.advanceInvoices.void(documentId, body, opts);
+      }
     },
     onSuccess: (_, variables) => {
-      // Invalidate invoice queries to refresh the data
       queryClient.invalidateQueries({ queryKey: ["invoices"] });
-      queryClient.invalidateQueries({ queryKey: ["documents", "invoice", variables.invoiceId] });
+      queryClient.invalidateQueries({ queryKey: ["credit-notes"] });
+      queryClient.invalidateQueries({ queryKey: ["advance-invoices"] });
+      queryClient.invalidateQueries({ queryKey: ["documents", variables.documentType, variables.documentId] });
     },
   });
 }
+
+/** @deprecated Use useVoidDocument instead */
+export const useVoidInvoice = useVoidDocument;

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,7 +1,7 @@
 import type { Invoice } from "@spaceinvoices/js-sdk";
 
-import { Copy, Download, Eye, Link2Off, Loader2, Mail, MoreHorizontal, Plus } from "lucide-react";
-import { useState } from "react";
+import { Ban, Copy, Download, Eye, Link2Off, Loader2, Mail, MoreHorizontal, Plus } from "lucide-react";
+import { memo, useState } from "react";
 import { Button } from "@/ui/components/ui/button";
 import {
   DropdownMenu,
@@ -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({
+export default memo(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
@@ -129,4 +144,4 @@ export default function InvoiceListRowActions({
       />
     </>
   );
-}
+});