@spaceinvoices/react-ui 0.1.1 → 0.3.0

package/src/components/entities/entity-settings-form/locales/pt.ts

@@ -0,0 +1,194 @@
+export default {
+  // Company settings
+  "Company Information": "Informações da empresa",
+  "Basic information about your company": "Informações básicas sobre a sua empresa",
+  // Branding settings
+  Branding: "Marca",
+  "Primary Color": "Cor primária",
+  Logo: "Logotipo",
+  "Logo URL": "URL do logotipo",
+  "Enter the URL of your company logo": "Introduza o URL do logotipo da sua empresa",
+  "Upload your company logo for invoices": "Carregue o logotipo da sua empresa para as faturas",
+  "Upload Logo": "Carregar logotipo",
+  "Change Logo": "Alterar logotipo",
+  "Current logo (displayed on invoices)": "Logotipo atual (apresentado nas faturas)",
+  "Logo preview": "Pré-visualização do logotipo",
+  "Crop Your Logo": "Recortar o seu logotipo",
+  Signature: "Assinatura",
+  "Upload a signature image for PDFs (optional)": "Carregue uma imagem de assinatura para os PDF (opcional)",
+  "Upload Signature": "Carregar assinatura",
+  "Change Signature": "Alterar assinatura",
+  "Current signature (for PDF documents)": "Assinatura atual (para documentos PDF)",
+  "Signature preview": "Pré-visualização da assinatura",
+  "Crop Your Signature": "Recortar a sua assinatura",
+  "Adjust the crop area or upload the full image": "Ajuste a área de recorte ou carregue a imagem completa",
+  "Upload failed. Please try again.": "O carregamento falhou. Por favor, tente novamente.",
+  "Uploading...": "A carregar...",
+  "Upload & Save": "Carregar e guardar",
+  Cancel: "Cancelar",
+  Localization: "Localização",
+  "Currency Code": "Código de moeda",
+  "ISO 4217 currency code (e.g., USD, EUR, GBP)": "Código de moeda ISO 4217 (ex. USD, EUR, GBP)",
+  Locale: "Configuração regional",
+  "BCP 47 language tag (e.g., en-US, de-DE, sl-SI)": "Etiqueta de idioma BCP 47 (ex. en-US, de-DE, sl-SI)",
+  "Select currency": "Selecionar moeda",
+  "Select locale": "Selecionar configuração regional",
+  "Configure entity localization": "Configurar a localização da entidade",
+  "Email Settings": "Definições de email",
+  "Configure email settings for invoices": "Configurar as definições de email para as faturas",
+  "Email Address": "Endereço de email",
+  "Email address to send invoices to": "Endereço de email para enviar faturas",
+  "Email Subject": "Assunto do email",
+  "Subject line for email invoices": "Linha de assunto para as faturas por email",
+  "Email Body": "Corpo do email",
+  "Body content for email invoices": "Conteúdo do texto para as faturas por email",
+  "Save Settings": "Guardar definições",
+  // Document Defaults section
+  "Document Defaults": "Valores predefinidos de documentos",
+  "Default values for new documents": "Valores predefinidos para novos documentos",
+  "Default Note": "Nota predefinida",
+  "Default Invoice Note": "Nota de fatura predefinida",
+  "This note will be pre-filled when creating new invoices": "Esta nota será pré-preenchida ao criar novas faturas",
+  "This note will be pre-filled when creating new estimates": "Esta nota será pré-preenchida ao criar novos orçamentos",
+  "This note will be pre-filled when creating new credit notes":
+    "Esta nota será pré-preenchida ao criar novas notas de crédito",
+  "Payment terms pre-filled when creating new invoices":
+    "Condições de pagamento pré-preenchidas ao criar novas faturas",
+  "Payment terms pre-filled when creating new estimates":
+    "Condições de pagamento pré-preenchidas ao criar novos orçamentos",
+  "Payment terms pre-filled when creating new credit notes":
+    "Condições de pagamento pré-preenchidas ao criar novas notas de crédito",
+  "Payment due by {document_due_date}. Please reference invoice {document_number}.":
+    "Pagamento até {document_due_date}. Por favor, indique o número da fatura {document_number}.",
+  "Net 30 days. Payment due by {document_due_date}.": "Líquido 30 dias. Pagamento até {document_due_date}.",
+  "This estimate is valid until {document_valid_until}.": "Este orçamento é válido até {document_valid_until}.",
+  "Payment due upon acceptance.": "Pagamento na aceitação.",
+  "Credit note for invoice {document_number}.": "Nota de crédito para a fatura {document_number}.",
+  "Credit will be applied to your account.": "O crédito será aplicado à sua conta.",
+  "Invoice Notes": "Notas da fatura",
+  "Smart Template Variables": "Variáveis de modelo inteligentes",
+  "Use variables to personalize your notes automatically":
+    "Use variáveis para personalizar as suas notas automaticamente",
+  "Set a default note that will appear on all new invoices. Use template variables to personalize the note automatically.":
+    "Defina uma nota predefinida que aparecerá em todas as novas faturas. Use as variáveis de modelo para personalizar a nota automaticamente.",
+  // Smart code insert button
+  "Insert variable": "Inserir variável",
+  Entity: "Empresa",
+  Document: "Documento",
+  Customer: "Cliente",
+  Other: "Outro",
+  "Company name": "Nome da empresa",
+  "Email address": "Endereço de email",
+  "Invoice number": "Número da fatura",
+  "Invoice date": "Data da fatura",
+  "Due date": "Data de vencimento",
+  "Total amount": "Valor total",
+  Currency: "Moeda",
+  "Customer name": "Nome do cliente",
+  "Customer email": "Email do cliente",
+  "Today's date": "Data de hoje",
+  "Current year": "Ano corrente",
+  // Payment terms defaults
+  "Default Payment Terms": "Condições de pagamento predefinidas",
+  "This payment terms will be pre-filled when creating new documents":
+    "Estas condições de pagamento serão pré-preenchidas ao criar novos documentos",
+  "Payment Terms": "Condições de pagamento",
+  "Add payment terms...": "Adicionar condições de pagamento...",
+  // Document footer
+  "Document Footer": "Rodapé do documento",
+  "Footer text displayed at the bottom of PDF documents":
+    "Texto do rodapé apresentado na parte inferior dos documentos PDF",
+  "Footer text displayed at the bottom of all PDF documents":
+    "Texto do rodapé apresentado na parte inferior de todos os documentos PDF",
+  "{entity_name} | Due Date: {document_due_date} | Invoice #{document_number}":
+    "{entity_name} | Vencimento: {document_due_date} | Fatura #{document_number}",
+  // Overdue Notifications section
+  "Overdue Notifications": "Notificações de atraso",
+  "Automatically remind customers about overdue invoices":
+    "Lembrar automaticamente os clientes sobre faturas em atraso",
+  "Enable Notifications": "Ativar notificações",
+  "Send automatic payment reminder emails to customers with overdue invoices":
+    "Enviar emails de lembrete de pagamento automáticos a clientes com faturas em atraso",
+  "Reminder Days": "Dias de lembrete",
+  "Days after due date to send reminders (comma-separated). E.g., '7, 14, 30' sends reminders at 7, 14, and 30 days overdue.":
+    "Dias após a data de vencimento para enviar lembretes (separados por vírgulas). Ex. '7, 14, 30' envia lembretes aos 7, 14 e 30 dias de atraso.",
+  "Custom Reminder Templates": "Modelos de lembrete personalizados",
+  "Subject line for overdue notification emails": "Linha de assunto para os emails de notificação de atraso",
+  "Body content for overdue emails. Use {invoice_list} to include the invoice table, or it will be auto-appended.":
+    "Conteúdo do texto para os emails de atraso. Use {invoice_list} para incluir a tabela de faturas, ou será adicionada automaticamente.",
+  "Dear {customer_name},\n\nThis is a reminder about your overdue invoices...":
+    "Caro/a {customer_name},\n\nEste é um lembrete sobre as suas faturas em atraso...",
+  "Payment Reminders": "Lembretes de pagamento",
+  "When enabled, customers will automatically receive email reminders when their invoices become overdue. Emails are sent on the exact day each threshold is reached.":
+    "Quando ativado, os clientes receberão automaticamente lembretes por email quando as suas faturas ficarem em atraso. Os emails são enviados exatamente no dia em que cada limite é atingido.",
+  "Available Variables": "Variáveis disponíveis",
+  "{customer_name}, {entity_name}, {entity_email}, {invoice_list}, {total_amount}, {overdue_count}":
+    "{customer_name}, {entity_name}, {entity_email}, {invoice_list}, {total_amount}, {overdue_count}",
+  // UPN QR Payment section
+  "UPN QR Payment": "Pagamento UPN QR",
+  "Configure UPN QR payment slip for invoices": "Configurar o talão de pagamento UPN QR para faturas",
+  IBAN: "IBAN",
+  "Bank account IBAN for receiving payments": "IBAN da conta bancária para receber pagamentos",
+  "Enable UPN QR on invoices": "Ativar UPN QR nas faturas",
+  "Show payment QR code on PDF invoices for easy mobile banking payments":
+    "Mostrar código QR de pagamento nas faturas PDF para pagamentos bancários móveis fáceis",
+  "Display Mode": "Modo de exibição",
+  "QR code only": "Apenas código QR",
+  "Shows compact QR code inline with invoice content": "Mostra código QR compacto em linha com o conteúdo da fatura",
+  "Full UPN payment slip": "Talão de pagamento UPN completo",
+  "Shows complete payment slip at bottom of page": "Mostra o talão de pagamento completo no fundo da página",
+  "Purpose Code": "Código de finalidade",
+  "OTHR - Other": "OTHR - Outro",
+  "GDSV - Goods and Services": "GDSV - Bens e serviços",
+  "SUPP - Supplier Payment": "SUPP - Pagamento a fornecedor",
+  "Payment purpose code (ISO 20022)": "Código de finalidade de pagamento (ISO 20022)",
+  "UPN QR Payments": "Pagamentos UPN QR",
+  "UPN QR is a Slovenian standard for payment slips. When enabled, your invoices will include a QR code that customers can scan with their mobile banking app to pay instantly.":
+    "UPN QR é um padrão esloveno para talões de pagamento. Quando ativado, as suas faturas incluirão um código QR que os clientes podem digitalizar com a aplicação de banca móvel para pagar instantaneamente.",
+  // Number format settings
+  Invoice: "Fatura",
+  Estimate: "Orçamento",
+  "Credit Note": "Nota de crédito",
+  "Advance Invoice": "Fatura antecipada",
+  "Number Format": "Formato de numeração",
+  Preview: "Pré-visualização",
+  // Tax rules settings
+  "EU Tax Rules": "Regras fiscais da UE",
+  "Automatic tax handling for cross-border transactions":
+    "Gestão automática de impostos para transações transfronteiriças",
+  "tax-rules.vies_validate_vat.label": "Validação de IVA VIES",
+  "tax-rules.vies_validate_vat.description":
+    "Verificar os números de IVA da UE através da API VIES. Os números de IVA dos clientes são verificados antes da criação de faturas.",
+  "tax-rules.auto_reverse_charge.label": "Autoliquidação automática",
+  "tax-rules.auto_reverse_charge.description":
+    "Aplicar automaticamente a taxa 0% (autoliquidação) para transações B2B intra-UE com números de IVA válidos.",
+  "tax-rules.auto_remove_tax_export.label": "Remoção automática de imposto de exportação",
+  "tax-rules.auto_remove_tax_export.description":
+    "Remover automaticamente todos os impostos para exportações para países fora da UE.",
+  "tax-rules.require_gross_prices.label": "Exigir preços brutos",
+  "tax-rules.require_gross_prices.description":
+    "Exigir preços brutos quando a autoliquidação é aplicada. Previne variações inesperadas nos valores totais das faturas.",
+  // Tax clauses settings
+  "Default Tax Clauses": "Cláusulas fiscais predefinidas",
+  "Set default tax clauses that are automatically added to documents based on transaction type":
+    "Defina as cláusulas fiscais predefinidas que são automaticamente adicionadas aos documentos com base no tipo de transação.",
+  "tax-clauses.other-title": "Cláusulas fiscais transfronteiriças",
+  "tax-clauses.other-description":
+    "Cláusulas fiscais para transações UE e internacionais (autoliquidação, exportação).",
+  "tax-clauses.intra_eu_b2b.label": "Intra-UE B2B (autoliquidação)",
+  "tax-clauses.intra_eu_b2b.description":
+    "Para vendas a empresas da UE com números de IVA válidos. Normalmente inclui uma declaração de autoliquidação.",
+  "Enter reverse charge clause...": "Introduza a cláusula de autoliquidação...",
+  "tax-clauses.export.label": "Exportação (fora da UE)",
+  "tax-clauses.export.description":
+    "Para vendas a clientes fora da UE. Normalmente indica a isenção de IVA por exportação.",
+  "Enter export exemption clause...": "Introduza a cláusula de isenção de exportação...",
+  "tax-clauses.domestic.label": "Predefinido / Nacional",
+  "tax-clauses.domestic.description":
+    "Cláusula predefinida para transações nacionais. Para entidades não sujeitas a IVA, aparece em todos os documentos.",
+  "Enter default tax clause...": "Introduza a cláusula fiscal predefinida...",
+  "tax-clauses.intra_eu_b2c.label": "Intra-UE B2C",
+  "Enter EU consumer sales clause...": "Introduza a cláusula de venda ao consumidor UE...",
+  "tax-clauses.other.description":
+    "Estes tipos de transações normalmente não requerem cláusulas fiscais específicas, mas pode configurá-las conforme necessário.",
+} as const;

package/src/components/entities/entity-settings-form/locales/sl.ts

@@ -1,5 +1,7 @@
 export default {
   // Company settings
+  "Tax ID 2": "Davčna številka 2",
+  "Secondary tax identification number (optional)": "Sekundarna davčna identifikacijska številka (neobvezno)",
   "Company Information": "Podatki o podjetju",
   "Basic information about your company": "Osnovni podatki o vašem podjetju",
   // Branding settings

package/src/components/entities/fina-settings-form/fina-settings-form.tsx

@@ -0,0 +1,461 @@
+import { AlertCircle, CheckCircle2, Info } from "lucide-react";
+import { type FC, type ReactNode, useCallback, useEffect, useState } from "react";
+import { Alert, AlertDescription, AlertTitle } from "@/ui/components/ui/alert";
+import { Button } from "@/ui/components/ui/button";
+import { Label } from "@/ui/components/ui/label";
+import { PageLoadingSpinner } from "@/ui/components/ui/loading-spinner";
+import { RadioGroup, RadioGroupItem } from "@/ui/components/ui/radio-group";
+import { Switch } from "@/ui/components/ui/switch";
+import { Tabs, TabsList, TabsTrigger } from "@/ui/components/ui/tabs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/ui/components/ui/tooltip";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import { cn } from "@/ui/lib/utils";
+import { useFinaPremises, useFinaSettings, useUpdateFinaSettings } from "./fina-settings.hooks";
+import de from "./locales/de";
+import en from "./locales/en";
+import es from "./locales/es";
+import fr from "./locales/fr";
+import hr from "./locales/hr";
+import it from "./locales/it";
+import nl from "./locales/nl";
+import pl from "./locales/pl";
+import pt from "./locales/pt";
+import sl from "./locales/sl";
+import { CertificateSettingsSection } from "./sections/certificate-settings-section";
+import { PremisesManagementSection } from "./sections/premises-management-section";
+
+const translations = { sl, de, en, it, fr, es, pt, nl, pl, hr } as const;
+
+export type FinaStepType = "settings" | "certificate" | "premises" | "enable";
+export type FinaSectionType = "operator" | "numbering" | "certificate-upload" | "premises-list" | "enable-toggle";
+
+interface FinaSettingsFormProps extends ComponentTranslationProps {
+  entity: any;
+  onSuccess?: () => void;
+  onError?: (error: unknown) => void;
+  initialStep?: FinaStepType;
+  onStepChange?: (step: FinaStepType) => void;
+  renderSection?: (section: FinaSectionType, content: ReactNode) => ReactNode;
+}
+
+/**
+ * FINA Settings Form Component
+ *
+ * Implements progressive unlocking flow (same as FURS):
+ * 1. General Settings - numbering sequence, operator OIB, PDV system
+ * 2. Certificate Upload - FINA P12/PFX certificate
+ * 3. Business Premises - register locations & devices with FINA
+ * 4. Enable Fiscalization - final activation
+ */
+export const FinaSettingsForm: FC<FinaSettingsFormProps> = ({
+  entity,
+  onSuccess,
+  onError,
+  t: translateFn,
+  namespace,
+  locale,
+  initialStep = "settings",
+  onStepChange,
+  renderSection,
+}) => {
+  const [activeStep, setActiveStep] = useState<FinaStepType>(initialStep);
+  const [hasInitializedStep, setHasInitializedStep] = useState(false);
+
+  const translate = createTranslation({
+    t: translateFn,
+    namespace,
+    locale,
+    translations,
+  });
+
+  const handleStepChange = useCallback(
+    (newStep: FinaStepType) => {
+      setActiveStep(newStep);
+      onStepChange?.(newStep);
+    },
+    [onStepChange],
+  );
+
+  // Fetch FINA settings and premises
+  const { data: finaSettings, isLoading: settingsLoading } = useFinaSettings(entity.id);
+  const { data: premises, isLoading: premisesLoading } = useFinaPremises(entity.id);
+
+  const { mutate: updateSettings, isPending } = useUpdateFinaSettings({
+    onSuccess: () => {
+      onSuccess?.();
+    },
+    onError: (error) => {
+      onError?.(error);
+    },
+  });
+
+  // Form state for settings
+  const [formData, setFormData] = useState({
+    enabled: false,
+    numbering_sequence: "N" as "N" | "P",
+    operator_oib: "",
+    operator_label: "",
+    u_sust_pdv: true,
+  });
+
+  // Sync form data when settings load
+  useEffect(() => {
+    if (finaSettings) {
+      setFormData({
+        enabled: finaSettings.enabled || false,
+        numbering_sequence: finaSettings.numbering_sequence || "N",
+        operator_oib: finaSettings.operator_oib || "",
+        operator_label: finaSettings.operator_label || "",
+        u_sust_pdv: finaSettings.u_sust_pdv ?? true,
+      });
+    }
+  }, [finaSettings]);
+
+  // Determine completion status
+  const hasCertificate = finaSettings?.has_certificate || false;
+  const certificateValid = finaSettings?.certificate_status === "valid";
+  const hasPremises = (premises?.length || 0) > 0;
+  const hasPremiseWithDevice =
+    hasPremises && premises?.some((premise: any) => premise.Devices && premise.Devices.length > 0);
+
+  const finaEnabled = finaSettings?.enabled || false;
+  const canAccessPremises = hasCertificate && certificateValid;
+  const canAccessEnable = certificateValid && hasPremises && hasPremiseWithDevice;
+
+  const steps = [
+    { id: "settings" as const, title: translate("General Settings"), complete: true, unlocked: true },
+    {
+      id: "certificate" as const,
+      title: translate("Certificate"),
+      complete: hasCertificate && certificateValid,
+      unlocked: true,
+    },
+    {
+      id: "premises" as const,
+      title: translate("Business Premises"),
+      complete: !!hasPremiseWithDevice,
+      unlocked: canAccessPremises,
+    },
+    {
+      id: "enable" as const,
+      title: translate("Enable Fiscalization"),
+      complete: finaEnabled,
+      unlocked: canAccessEnable,
+    },
+  ];
+
+  const getDefaultStep = (): FinaStepType => {
+    if (initialStep) {
+      const stepInfo = steps.find((s) => s.id === initialStep);
+      if (stepInfo?.unlocked) return initialStep;
+    }
+    if (!certificateValid) return "certificate";
+    if (!hasPremiseWithDevice) return "premises";
+    if (!finaEnabled) return "enable";
+    return "settings";
+  };
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Intentionally run only when data loads
+  useEffect(() => {
+    if (!hasInitializedStep && !settingsLoading && !premisesLoading) {
+      const smartStep = getDefaultStep();
+      if (smartStep !== activeStep) {
+        handleStepChange(smartStep);
+      }
+      setHasInitializedStep(true);
+    }
+  }, [settingsLoading, premisesLoading, hasInitializedStep]);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: steps is recreated on each render but values are stable
+  useEffect(() => {
+    const currentStepInfo = steps.find((s) => s.id === activeStep);
+    if (currentStepInfo && !currentStepInfo.unlocked) {
+      const firstUnlockedStep = steps.find((s) => s.unlocked);
+      if (firstUnlockedStep) {
+        handleStepChange(firstUnlockedStep.id);
+      }
+    }
+  }, [activeStep, handleStepChange]);
+
+  if (entity.country_code !== "HR") {
+    return (
+      <Alert variant="destructive">
+        <AlertCircle className="h-4 w-4" />
+        <AlertTitle>{translate("FINA is for Croatian Entities")}</AlertTitle>
+        <AlertDescription>
+          {translate("FINA fiscalization is only available for entities with country code HR")}
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  if (settingsLoading || premisesLoading) {
+    return <PageLoadingSpinner />;
+  }
+
+  const isSandboxMode = entity.environment === "sandbox";
+
+  const handleSaveSettings = () => {
+    updateSettings({
+      entityId: entity.id,
+      data: formData,
+    });
+  };
+
+  const wrapSection = (section: FinaSectionType, content: ReactNode) => {
+    if (renderSection) {
+      return renderSection(section, content);
+    }
+    return content;
+  };
+
+  const tabsNavigation = (
+    <div className="grid items-start gap-6 lg:grid-cols-[1fr_280px]">
+      <Tabs value={activeStep} onValueChange={(value) => handleStepChange(value as FinaStepType)} className="w-full">
+        <TabsList className="grid w-full grid-cols-4 rounded-none p-0">
+          {steps.map((step, index) => {
+            const isLocked = !step.unlocked;
+            let tooltipText = "";
+            if (isLocked) {
+              if (step.id === "premises") {
+                tooltipText = translate("Upload and validate digital certificate first");
+              } else if (step.id === "enable") {
+                if (!certificateValid) {
+                  tooltipText = translate("Upload and validate digital certificate first");
+                } else if (!hasPremises) {
+                  tooltipText = translate("Register at least one business premise first");
+                } else {
+                  tooltipText = translate("Register at least one electronic device first");
+                }
+              }
+            }
+
+            const trigger = (
+              <TabsTrigger
+                value={step.id}
+                disabled={isLocked}
+                className={cn("cursor-pointer justify-center", !step.unlocked && "opacity-50")}
+              >
+                <span className="flex items-center gap-2">
+                  {step.complete ? (
+                    <CheckCircle2 className="h-4 w-4 text-green-500" />
+                  ) : (
+                    <span className="text-xs">{index + 1}</span>
+                  )}
+                  {step.title}
+                </span>
+              </TabsTrigger>
+            );
+
+            if (isLocked) {
+              return (
+                <Tooltip key={step.id} delayDuration={0}>
+                  <TooltipTrigger asChild>
+                    <span className="flex cursor-not-allowed justify-center">{trigger}</span>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{tooltipText}</p>
+                  </TooltipContent>
+                </Tooltip>
+              );
+            }
+
+            return (
+              <span key={step.id} className="flex justify-center">
+                {trigger}
+              </span>
+            );
+          })}
+        </TabsList>
+      </Tabs>
+      <div className="hidden lg:block" />
+    </div>
+  );
+
+  return (
+    <div className="space-y-6">
+      {isSandboxMode && (
+        <div className="grid items-start gap-6 lg:grid-cols-[1fr_280px]">
+          <Alert>
+            <Info className="h-4 w-4" />
+            <AlertTitle>{translate("Test Mode (Sandbox)")}</AlertTitle>
+            <AlertDescription>
+              {translate(
+                "This entity is in test mode. FINA invoices will be sent to the test environment. No real fiscalization will occur.",
+              )}
+            </AlertDescription>
+          </Alert>
+          <div className="hidden lg:block" />
+        </div>
+      )}
+
+      {tabsNavigation}
+
+      {/* Settings step */}
+      {activeStep === "settings" && (
+        <div className="space-y-6">
+          {wrapSection(
+            "numbering",
+            <div className="space-y-4">
+              <div>
+                <Label className="font-medium text-sm">{translate("Numbering Sequence")}</Label>
+                <p className="text-muted-foreground text-sm">{translate("Choose how invoice numbers are sequenced")}</p>
+              </div>
+              <RadioGroup
+                value={formData.numbering_sequence}
+                onValueChange={(value) => setFormData((prev) => ({ ...prev, numbering_sequence: value as "N" | "P" }))}
+                className="space-y-2"
+              >
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="N" id="seq-n" />
+                  <Label htmlFor="seq-n">{translate("Per Premise (N)")}</Label>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="P" id="seq-p" />
+                  <Label htmlFor="seq-p">{translate("Per Device (P)")}</Label>
+                </div>
+              </RadioGroup>
+            </div>,
+          )}
+
+          {wrapSection(
+            "operator",
+            <div className="space-y-4">
+              <div>
+                <Label className="font-medium text-sm">{translate("PDV System")}</Label>
+                <div className="mt-2 flex items-center space-x-2">
+                  <Switch
+                    checked={formData.u_sust_pdv}
+                    onCheckedChange={(checked) => setFormData((prev) => ({ ...prev, u_sust_pdv: checked }))}
+                  />
+                  <Label>{translate("Entity is registered in the Croatian PDV (VAT) system")}</Label>
+                </div>
+              </div>
+              <div>
+                <Label className="font-medium text-sm">{translate("Operator OIB")}</Label>
+                <input
+                  type="text"
+                  value={formData.operator_oib}
+                  onChange={(e) => setFormData((prev) => ({ ...prev, operator_oib: e.target.value }))}
+                  placeholder={translate("OIB of the operator (11 digits, optional)")}
+                  className="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                  maxLength={11}
+                />
+              </div>
+              <div>
+                <Label className="font-medium text-sm">{translate("Operator Label")}</Label>
+                <input
+                  type="text"
+                  value={formData.operator_label}
+                  onChange={(e) => setFormData((prev) => ({ ...prev, operator_label: e.target.value }))}
+                  placeholder={translate("Descriptive label for the operator (optional)")}
+                  className="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
+                />
+              </div>
+            </div>,
+          )}
+
+          <div className="grid items-start gap-6 lg:grid-cols-[1fr_280px]">
+            <Button onClick={handleSaveSettings} disabled={isPending}>
+              {isPending ? translate("Saving...") : translate("Save Settings")}
+            </Button>
+            <div className="hidden lg:block" />
+          </div>
+        </div>
+      )}
+
+      {/* Certificate step */}
+      {activeStep === "certificate" && (
+        <CertificateSettingsSection
+          entity={entity}
+          finaSettings={finaSettings}
+          t={translate}
+          onSuccess={onSuccess}
+          onError={onError}
+          wrapSection={wrapSection}
+        />
+      )}
+
+      {/* Premises step */}
+      {activeStep === "premises" && (
+        <PremisesManagementSection
+          entity={entity}
+          premises={premises || []}
+          t={translate}
+          onSuccess={onSuccess}
+          onError={onError}
+          wrapSection={wrapSection}
+        />
+      )}
+
+      {/* Enable step */}
+      {activeStep === "enable" && (
+        <div className="space-y-4">
+          {wrapSection(
+            "enable-toggle",
+            <div className="space-y-4">
+              <h3 className="font-medium text-sm">{translate("Setup Checklist")}</h3>
+              <div className="space-y-2">
+                <div className="flex items-center gap-2">
+                  {certificateValid ? (
+                    <CheckCircle2 className="h-4 w-4 text-green-500" />
+                  ) : (
+                    <AlertCircle className="h-4 w-4 text-muted-foreground" />
+                  )}
+                  <span className="text-sm">{translate("Valid certificate uploaded")}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  {hasPremises ? (
+                    <CheckCircle2 className="h-4 w-4 text-green-500" />
+                  ) : (
+                    <AlertCircle className="h-4 w-4 text-muted-foreground" />
+                  )}
+                  <span className="text-sm">{translate("At least one business premise registered")}</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  {hasPremiseWithDevice ? (
+                    <CheckCircle2 className="h-4 w-4 text-green-500" />
+                  ) : (
+                    <AlertCircle className="h-4 w-4 text-muted-foreground" />
+                  )}
+                  <span className="text-sm">{translate("At least one electronic device registered")}</span>
+                </div>
+              </div>
+
+              {canAccessEnable ? (
+                <div className="mt-4 flex items-center space-x-2">
+                  <Switch
+                    checked={formData.enabled}
+                    onCheckedChange={(checked) => {
+                      setFormData((prev) => ({ ...prev, enabled: checked }));
+                      updateSettings({
+                        entityId: entity.id,
+                        data: { ...formData, enabled: checked },
+                      });
+                    }}
+                  />
+                  <Label>{translate("Enable FINA Fiscalization")}</Label>
+                </div>
+              ) : (
+                <Alert>
+                  <AlertCircle className="h-4 w-4" />
+                  <AlertTitle>{translate("Cannot Enable Fiscalization")}</AlertTitle>
+                  <AlertDescription>
+                    {translate("Complete all prerequisites above before enabling FINA fiscalization.")}
+                  </AlertDescription>
+                </Alert>
+              )}
+
+              {finaEnabled && (
+                <p className="text-green-600 text-sm">
+                  {translate("Once enabled, all new B2C invoices will be automatically fiscalized with FINA")}
+                </p>
+              )}
+            </div>,
+          )}
+        </div>
+      )}
+    </div>
+  );
+};