@spaceinvoices/react-ui 0.1.1

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

@@ -0,0 +1,188 @@
+export default {
+  // Company settings
+  "Company Information": "Podatki o podjetju",
+  "Basic information about your company": "Osnovni podatki o vašem podjetju",
+  // Branding settings
+  Branding: "Blagovna znamka",
+  "Primary Color": "Primarna barva",
+  Logo: "Logotip",
+  "Logo URL": "URL logotipa",
+  "Enter the URL of your company logo": "Vnesite URL logotipa vašega podjetja",
+  "Upload your company logo for invoices": "Naložite logotip vašega podjetja za račune",
+  "Upload Logo": "Naloži logotip",
+  "Change Logo": "Spremeni logotip",
+  "Current logo (displayed on invoices)": "Trenutni logotip (prikazan na računih)",
+  "Logo preview": "Predogled logotipa",
+  "Crop Your Logo": "Obreži logotip",
+  Signature: "Podpis",
+  "Upload a signature image for PDFs (optional)": "Naložite sliko podpisa za PDF-je (neobvezno)",
+  "Upload Signature": "Naloži podpis",
+  "Change Signature": "Spremeni podpis",
+  "Current signature (for PDF documents)": "Trenutni podpis (za PDF dokumente)",
+  "Signature preview": "Predogled podpisa",
+  "Crop Your Signature": "Obreži podpis",
+  "Adjust the crop area or upload the full image": "Prilagodite območje obrezovanja ali naložite celotno sliko",
+  "Upload failed. Please try again.": "Nalaganje ni uspelo. Prosim poskusite znova.",
+  "Uploading...": "Nalaganje...",
+  "Upload & Save": "Naloži in shrani",
+  Cancel: "Prekliči",
+  Localization: "Lokalizacija",
+  "Currency Code": "Koda valute",
+  "ISO 4217 currency code (e.g., USD, EUR, GBP)": "ISO 4217 koda valute (npr. USD, EUR, GBP)",
+  Locale: "Lokalnost",
+  "BCP 47 language tag (e.g., en-US, de-DE, sl-SI)": "BCP 47 jezikovna oznaka (npr. en-US, de-DE, sl-SI)",
+  "Select currency": "Izberite valuto",
+  "Select locale": "Izberite lokalnost",
+  "Configure entity localization": "Konfigurirajte lokalizacijo pravne osebe",
+  "Email Settings": "Nastavitve e-pošte",
+  "Configure email settings for invoices": "Konfigurirajte nastavitve e-pošte za račune",
+  "Email Address": "Naslov e-pošte",
+  "Email address to send invoices to": "Naslov e-pošte za pošiljanje računov",
+  "Email Subject": "Zadeva e-pošte",
+  "Subject line for email invoices": "Vrstica zadeve za e-pošte računov",
+  "Email Body": "Vsebina e-pošte",
+  "Body content for email invoices": "Vsebina teksta za e-pošte računov",
+  "Save Settings": "Shrani nastavitve",
+  // Document Defaults section
+  "Document Defaults": "Privzete vrednosti dokumentov",
+  "Default values for new documents": "Privzete vrednosti za nove dokumente",
+  "Default Note": "Privzeta opomba",
+  "Default Invoice Note": "Privzeta opomba računa",
+  "This note will be pre-filled when creating new invoices":
+    "Ta opomba bo vnaprej izpolnjena pri ustvarjanju novih računov",
+  "This note will be pre-filled when creating new estimates":
+    "Ta opomba bo vnaprej izpolnjena pri ustvarjanju novih predračunov",
+  "This note will be pre-filled when creating new credit notes":
+    "Ta opomba bo vnaprej izpolnjena pri ustvarjanju novih dobropisov",
+  "Payment terms pre-filled when creating new invoices":
+    "Plačilni pogoji bodo vnaprej izpolnjeni pri ustvarjanju novih računov",
+  "Payment terms pre-filled when creating new estimates":
+    "Plačilni pogoji bodo vnaprej izpolnjeni pri ustvarjanju novih predračunov",
+  "Payment terms pre-filled when creating new credit notes":
+    "Plačilni pogoji bodo vnaprej izpolnjeni pri ustvarjanju novih dobropisov",
+  "Payment due by {document_due_date}. Please reference invoice {document_number}.":
+    "Rok plačila {document_due_date}. Prosimo, navedite številko računa {document_number}.",
+  "Net 30 days. Payment due by {document_due_date}.": "Neto 30 dni. Rok plačila {document_due_date}.",
+  "This estimate is valid until {document_valid_until}.": "Ta predračun velja do {document_valid_until}.",
+  "Payment due upon acceptance.": "Plačilo ob sprejemu.",
+  "Credit note for invoice {document_number}.": "Dobropis za račun {document_number}.",
+  "Credit will be applied to your account.": "Dobropis bo upoštevan na vašem računu.",
+  "Invoice Notes": "Opombe računa",
+  "Smart Template Variables": "Pametne spremenljivke predloge",
+  "Use variables to personalize your notes automatically": "Uporabite spremenljivke za samodejno prilagajanje opomb",
+  "Set a default note that will appear on all new invoices. Use template variables to personalize the note automatically.":
+    "Nastavite privzeto opombo, ki bo prikazana na vseh novih računih. Uporabite spremenljivke predloge za samodejno prilagajanje opombe.",
+  // Smart code insert button
+  "Insert variable": "Vstavi spremenljivko",
+  Entity: "Podjetje",
+  Document: "Dokument",
+  Customer: "Stranka",
+  Other: "Drugo",
+  "Company name": "Ime podjetja",
+  "Email address": "E-poštni naslov",
+  "Invoice number": "Številka računa",
+  "Invoice date": "Datum računa",
+  "Due date": "Rok plačila",
+  "Total amount": "Skupni znesek",
+  Currency: "Valuta",
+  "Customer name": "Ime stranke",
+  "Customer email": "E-pošta stranke",
+  "Today's date": "Današnji datum",
+  "Current year": "Tekoče leto",
+  // Payment terms defaults
+  "Default Payment Terms": "Privzeti plačilni pogoji",
+  "This payment terms will be pre-filled when creating new documents":
+    "Ti plačilni pogoji bodo vnaprej izpolnjeni pri ustvarjanju novih dokumentov",
+  "Payment Terms": "Plačilni pogoji",
+  "Add payment terms...": "Dodajte plačilne pogoje...",
+  // Document footer
+  "Document Footer": "Noga dokumenta",
+  "Footer text displayed at the bottom of PDF documents": "Besedilo noge, prikazano na dnu PDF dokumentov",
+  "Footer text displayed at the bottom of all PDF documents": "Besedilo noge, prikazano na dnu vseh PDF dokumentov",
+  "{entity_name} | Due Date: {document_due_date} | Invoice #{document_number}":
+    "{entity_name} | Rok plačila: {document_due_date} | Račun #{document_number}",
+  // Overdue Notifications section
+  "Overdue Notifications": "Opomniki o zapadlih računih",
+  "Automatically remind customers about overdue invoices": "Samodejno opominjajte stranke o zapadlih računih",
+  "Enable Notifications": "Omogoči opominke",
+  "Send automatic payment reminder emails to customers with overdue invoices":
+    "Pošiljajte avtomatska opomniška e-poštna sporočila strankam z zapadlimi računi",
+  "Reminder Days": "Dnevi opomnikov",
+  "Days after due date to send reminders (comma-separated). E.g., '7, 14, 30' sends reminders at 7, 14, and 30 days overdue.":
+    "Dnevi po roku plačila za pošiljanje opomnikov (ločeni z vejico). Npr. '7, 14, 30' pošlje opomnike 7, 14 in 30 dni po zapadlosti.",
+  "Custom Reminder Templates": "Prilagojene predloge opomnikov",
+  "Subject line for overdue notification emails": "Vrstica zadeve za e-pošte opomnikov o zapadlosti",
+  "Body content for overdue emails. Use {invoice_list} to include the invoice table, or it will be auto-appended.":
+    "Vsebina teksta za e-pošte o zapadlosti. Uporabite {invoice_list} za vključitev tabele računov, sicer bo samodejno dodana.",
+  "Dear {customer_name},\n\nThis is a reminder about your overdue invoices...":
+    "Spoštovani {customer_name},\n\nTo je opomnik o vaših zapadlih računih...",
+  "Payment Reminders": "Opomniki o plačilih",
+  "When enabled, customers will automatically receive email reminders when their invoices become overdue. Emails are sent on the exact day each threshold is reached.":
+    "Ko je omogočeno, bodo stranke samodejno prejele e-poštne opomnike, ko njihovi računi zapadejo. E-pošta se pošlje natančno na dan, ko je dosežen vsak prag.",
+  "Available Variables": "Razpoložljive spremenljivke",
+  "{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": "UPN QR plačilo",
+  "Configure UPN QR payment slip for invoices": "Konfigurirajte UPN QR plačilni nalog za račune",
+  IBAN: "IBAN",
+  "Bank account IBAN for receiving payments": "IBAN bančnega računa za prejemanje plačil",
+  "Enable UPN QR on invoices": "Omogoči UPN QR na računih",
+  "Show payment QR code on PDF invoices for easy mobile banking payments":
+    "Prikaži QR kodo za plačilo na PDF računih za enostavna mobilna bančna plačila",
+  "Display Mode": "Način prikaza",
+  "QR code only": "Samo QR koda",
+  "Shows compact QR code inline with invoice content": "Prikaže kompaktno QR kodo v vrstici z vsebino računa",
+  "Full UPN payment slip": "Celoten UPN plačilni nalog",
+  "Shows complete payment slip at bottom of page": "Prikaže celoten plačilni nalog na dnu strani",
+  "Purpose Code": "Koda namena",
+  "OTHR - Other": "OTHR - Drugo",
+  "GDSV - Goods and Services": "GDSV - Blago in storitve",
+  "SUPP - Supplier Payment": "SUPP - Plačilo dobavitelju",
+  "Payment purpose code (ISO 20022)": "Koda namena plačila (ISO 20022)",
+  "UPN QR Payments": "UPN QR plačila",
+  "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 je slovenski standard za plačilne naloge. Ko je omogočen, bodo vaši računi vključevali QR kodo, ki jo stranke lahko skenirajo z mobilno bančno aplikacijo za takojšnje plačilo.",
+  // Number format settings
+  Invoice: "Račun",
+  Estimate: "Predračun",
+  "Credit Note": "Dobropis",
+  "Advance Invoice": "Avansni račun",
+  "Number Format": "Format številke",
+  Preview: "Predogled",
+  // Tax rules settings
+  "EU Tax Rules": "EU davčna pravila",
+  "Automatic tax handling for cross-border transactions": "Samodejno obravnavanje davkov za čezmejne transakcije",
+  "tax-rules.vies_validate_vat.label": "VIES preverjanje DDV",
+  "tax-rules.vies_validate_vat.description":
+    "Preveri EU DDV številke preko VIES API-ja. DDV številke strank se preverijo pred ustvarjanjem računov.",
+  "tax-rules.auto_reverse_charge.label": "Samodejni obrnjeni davek",
+  "tax-rules.auto_reverse_charge.description":
+    "Samodejno uporabi 0% davek (obrnjena davčna obveznost) za intra-EU B2B transakcije z veljavnimi DDV številkami.",
+  "tax-rules.auto_remove_tax_export.label": "Samodejno odstrani izvozni davek",
+  "tax-rules.auto_remove_tax_export.description": "Samodejno odstrani vse davke za izvoz v države izven EU.",
+  "tax-rules.require_gross_prices.label": "Zahtevaj bruto cene",
+  "tax-rules.require_gross_prices.description":
+    "Zahtevaj bruto cene, ko se uporabi obrnjena davčna obveznost. Prepreči nepričakovane spremembe skupnih zneskov računov.",
+  // Tax clauses settings
+  "Default Tax Clauses": "Privzete davčne klavzule",
+  "Set default tax clauses that are automatically added to documents based on transaction type":
+    "Nastavite privzete davčne klavzule, ki se samodejno dodajo dokumentom glede na vrsto transakcije.",
+  "tax-clauses.other-title": "Čezmejne davčne klavzule",
+  "tax-clauses.other-description": "Davčne klavzule za EU in mednarodne transakcije (samoobdavčitev, izvoz).",
+  "tax-clauses.intra_eu_b2b.label": "Intra-EU B2B (obrnjena davčna obveznost)",
+  "tax-clauses.intra_eu_b2b.description":
+    "Za prodajo EU podjetjem z veljavnimi DDV številkami. Običajno vključuje izjavo o obrnjeni davčni obveznosti.",
+  "Enter reverse charge clause...": "Vnesite klavzulo za samoobdavčitev...",
+  "tax-clauses.export.label": "Izvoz (izven EU)",
+  "tax-clauses.export.description": "Za prodajo strankam izven EU. Običajno navaja oprostitev DDV za izvoz.",
+  "Enter export exemption clause...": "Vnesite klavzulo za izvozno oprostitev...",
+  "tax-clauses.domestic.label": "Privzeto / Domače",
+  "tax-clauses.domestic.description":
+    "Privzeta klavzula za domače transakcije. Za subjekte, ki niso zavezanci za DDV, se prikaže na vseh dokumentih.",
+  "Enter default tax clause...": "Vnesite privzeto davčno klavzulo...",
+  "tax-clauses.intra_eu_b2c.label": "Intra-EU B2C",
+  "Enter EU consumer sales clause...": "Vnesite klavzulo za EU potrošniško prodajo...",
+  "tax-clauses.other.description":
+    "Te vrste transakcij običajno ne zahtevajo posebnih davčnih klavzul, vendar jih lahko konfigurirate po potrebi.",
+} as const;

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

@@ -0,0 +1,410 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import type { Entity } from "@spaceinvoices/js-sdk";
+import { AlertCircle, CheckCircle2, Info } from "lucide-react";
+import { type FC, type ReactNode, useCallback, useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import type { z } from "zod";
+import { Alert, AlertDescription, AlertTitle } from "@/ui/components/ui/alert";
+import { Form } from "@/ui/components/ui/form";
+import { PageLoadingSpinner } from "@/ui/components/ui/loading-spinner";
+import { Tabs, TabsList, TabsTrigger } from "@/ui/components/ui/tabs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/ui/components/ui/tooltip";
+import { updateFursSettingsSchema } from "@/ui/generated/schemas";
+import type { ComponentTranslationProps } from "@/ui/lib/translation";
+import { createTranslation } from "@/ui/lib/translation";
+import { cn } from "@/ui/lib/utils";
+import { useFormFooterRegistration } from "@/ui/providers/form-footer-context";
+import { useFursPremises, useFursSettings, useUpdateFursSettings } from "./furs-settings.hooks";
+// Import locale files
+import de from "./locales/de";
+import en from "./locales/en";
+import sl from "./locales/sl";
+import { CertificateSettingsSection } from "./sections/certificate-settings-section";
+import { EnableFiscalizationSection } from "./sections/enable-fiscalization-section";
+import { GeneralSettingsSection } from "./sections/general-settings-section";
+import { PremisesManagementSection } from "./sections/premises-management-section";
+
+const translations = { de, sl, en } as const;
+
+/**
+ * FURS Settings Form Schema
+ * Uses generated schema from OpenAPI spec
+ */
+const fursSettingsFormSchema = updateFursSettingsSchema.required({
+  enabled: true,
+});
+
+export type FursSettingsFormSchema = z.infer<typeof fursSettingsFormSchema>;
+
+export type StepType = "settings" | "certificate" | "premises" | "enable";
+export type SectionType =
+  | "operator"
+  | "fiscalization"
+  | "advanced"
+  | "certificate-upload"
+  | "premises-list"
+  | "enable-toggle";
+
+interface FursSettingsFormProps extends ComponentTranslationProps {
+  entity: Entity;
+  onSuccess?: () => void;
+  onError?: (error: unknown) => void;
+  /**
+   * Current active step (optional, for URL state management at page level)
+   */
+  initialStep?: StepType;
+  /**
+   * Callback when step changes (optional, for URL state management at page level)
+   */
+  onStepChange?: (step: StepType) => void;
+  /**
+   * Optional render prop to wrap each section with help content
+   */
+  renderSection?: (section: SectionType, content: ReactNode) => ReactNode;
+}
+
+/**
+ * FURS Settings Form Component
+ *
+ * Implements progressive unlocking flow:
+ * 1. General Settings (Step 1 - always accessible, configure numbering strategy & operator info)
+ * 2. Certificate Upload (Step 2 - always accessible, upload P12/PFX certificate)
+ * 3. Business Premises (Step 3 - unlocked after valid certificate, register locations & devices)
+ * 4. Enable Fiscalization (Step 4 - unlocked when all prerequisites met, final activation step)
+ *
+ * Smart initial step selection: Opens to first incomplete step, or first step if all complete.
+ */
+export const FursSettingsForm: FC<FursSettingsFormProps> = ({
+  entity,
+  onSuccess,
+  onError,
+  t: translateFn,
+  namespace,
+  locale,
+  initialStep = "settings",
+  onStepChange,
+  renderSection,
+}) => {
+  // Step navigation state (can be controlled via props for URL sync)
+  const [activeStep, setActiveStep] = useState<StepType>(initialStep);
+  const [hasInitializedStep, setHasInitializedStep] = useState(false);
+
+  // Create a guaranteed translation function using the createTranslation utility
+  const translate = createTranslation({
+    t: translateFn,
+    namespace,
+    locale,
+    translations,
+  });
+
+  // Handle step changes
+  const handleStepChange = useCallback(
+    (newStep: StepType) => {
+      setActiveStep(newStep);
+      onStepChange?.(newStep); // Notify parent (e.g., for URL updates)
+    },
+    [onStepChange],
+  );
+
+  // Fetch FURS settings and premises
+  const { data: fursSettings, isLoading: settingsLoading } = useFursSettings(entity.id);
+  const { data: premises, isLoading: premisesLoading } = useFursPremises(entity.id);
+
+  const { mutate: updateSettings, isPending } = useUpdateFursSettings({
+    onSuccess: () => {
+      onSuccess?.();
+    },
+    onError: (error) => {
+      onError?.(error);
+    },
+  });
+
+  const form = useForm<FursSettingsFormSchema>({
+    resolver: zodResolver(fursSettingsFormSchema),
+    values: {
+      enabled: fursSettings?.enabled || false,
+      numbering_strategy: fursSettings?.numbering_strategy || "C",
+      operator_tax_number: fursSettings?.operator_tax_number || "",
+      operator_label: fursSettings?.operator_label || "",
+    },
+  });
+
+  // Register with form footer for sticky save button
+  useFormFooterRegistration({
+    formId: "furs-settings-form",
+    isPending,
+    isDirty: form.formState.isDirty,
+    label: translate("Save Settings"),
+  });
+
+  // Determine completion status
+  const hasCertificate = fursSettings?.has_certificate || false;
+  const certificateValid = fursSettings?.certificate_status === "valid";
+  const hasPremises = (premises?.length || 0) > 0;
+  // Check if at least one premise has at least one device
+  const hasPremiseWithDevice =
+    hasPremises && premises?.some((premise: any) => premise.Devices && premise.Devices.length > 0);
+
+  // Step unlocking logic (new flow: settings -> certificate -> premises -> enable)
+  // - Step 1 (Settings): Always accessible
+  // - Step 2 (Certificate): Always accessible
+  // - Step 3 (Premises): Requires valid certificate
+  // - Step 4 (Enable): Requires certificate + premise + device
+  const fursEnabled = fursSettings?.enabled || false;
+  const canAccessCertificate = true; // Always accessible
+  const canAccessPremises = hasCertificate && certificateValid;
+  const canAccessEnable = certificateValid && hasPremises && hasPremiseWithDevice;
+
+  const steps = [
+    {
+      id: "settings" as const,
+      title: translate("General Settings"),
+      complete: true, // Settings are always "complete" - just configuration
+      unlocked: true,
+    },
+    {
+      id: "certificate" as const,
+      title: translate("Certificate"),
+      complete: hasCertificate && certificateValid,
+      unlocked: canAccessCertificate,
+    },
+    {
+      id: "premises" as const,
+      title: translate("Business Premises"),
+      complete: hasPremiseWithDevice,
+      unlocked: canAccessPremises,
+    },
+    {
+      id: "enable" as const,
+      title: translate("Enable Fiscalization"),
+      complete: fursEnabled,
+      unlocked: canAccessEnable,
+    },
+  ];
+
+  // Smart initial step selection: open to first incomplete step
+  const getDefaultStep = (): StepType => {
+    // If URL param provided, use it (if valid and unlocked)
+    if (initialStep) {
+      const stepInfo = steps.find((s) => s.id === initialStep);
+      if (stepInfo?.unlocked) return initialStep;
+    }
+
+    // Find first incomplete unlocked step
+    if (!certificateValid) return "certificate";
+    if (!hasPremiseWithDevice) return "premises";
+    if (!fursEnabled) return "enable";
+
+    // All complete - show first step
+    return "settings";
+  };
+
+  // Smart initial step selection on first load (when data is ready)
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Intentionally run only when data loads, not on every dep change
+  useEffect(() => {
+    if (!hasInitializedStep && !settingsLoading && !premisesLoading) {
+      const smartStep = getDefaultStep();
+      if (smartStep !== activeStep) {
+        handleStepChange(smartStep);
+      }
+      setHasInitializedStep(true);
+    }
+  }, [settingsLoading, premisesLoading, hasInitializedStep]);
+
+  // Validate step and redirect if current step becomes locked
+  // 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) {
+      // If current step is locked, redirect to first unlocked step
+      const firstUnlockedStep = steps.find((s) => s.unlocked);
+      if (firstUnlockedStep) {
+        handleStepChange(firstUnlockedStep.id);
+      }
+    }
+  }, [activeStep, handleStepChange]);
+
+  // Check if entity is Slovenian
+  if (entity.country_code !== "SI") {
+    return (
+      <Alert variant="destructive">
+        <AlertCircle className="h-4 w-4" />
+        <AlertTitle>{translate("FURS is for Slovenian Entities")}</AlertTitle>
+        <AlertDescription>
+          {translate("FURS fiscalization is only available for entities with country code SI")}
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  const onSubmit = (data: FursSettingsFormSchema) => {
+    updateSettings({
+      entityId: entity.id,
+      data,
+    });
+  };
+
+  if (settingsLoading || premisesLoading) {
+    return <PageLoadingSpinner text={translate("Loading...")} />;
+  }
+
+  // Check if entity is in sandbox (test) mode
+  const isSandboxMode = entity.environment === "sandbox";
+
+  // Shared tabs navigation component - in left column only
+  const tabsNavigation = (
+    <div className="grid items-start gap-6 lg:grid-cols-[1fr_280px]">
+      <Tabs
+        value={activeStep}
+        onValueChange={(value) => handleStepChange(value as typeof activeStep)}
+        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>
+  );
+
+  // Helper to wrap section content with render prop if provided
+  const wrapSection = (section: SectionType, content: ReactNode) => {
+    if (renderSection) {
+      return renderSection(section, content);
+    }
+    return content;
+  };
+
+  return (
+    <Form {...form}>
+      <form id="furs-settings-form" onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        {/* Sandbox notice - wrapped in grid for left alignment */}
+        {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. FURS invoices will be sent to the test/demo environment. No real fiscalization will occur.",
+                )}
+              </AlertDescription>
+            </Alert>
+            <div className="hidden lg:block" />
+          </div>
+        )}
+
+        {/* Tabs navigation */}
+        {tabsNavigation}
+
+        {/* Step content - each section wrapped with its own help */}
+        {activeStep === "settings" && (
+          <GeneralSettingsSection
+            form={form}
+            entity={entity}
+            t={translate}
+            onSuccess={onSuccess}
+            onError={onError}
+            wrapSection={wrapSection}
+          />
+        )}
+
+        {activeStep === "certificate" && (
+          <CertificateSettingsSection
+            entity={entity}
+            fursSettings={fursSettings}
+            t={translate}
+            onSuccess={onSuccess}
+            onError={onError}
+            wrapSection={wrapSection}
+          />
+        )}
+
+        {activeStep === "premises" && (
+          <div className="space-y-6">
+            {!hasCertificate && (
+              <Alert>
+                <AlertCircle className="h-4 w-4" />
+                <AlertTitle>{translate("Certificate Required")}</AlertTitle>
+                <AlertDescription>
+                  {translate("You must upload a digital certificate before you can register business premises")}
+                </AlertDescription>
+              </Alert>
+            )}
+            <PremisesManagementSection
+              entity={entity}
+              premises={(premises || []) as any}
+              t={translate}
+              onSuccess={onSuccess}
+              onError={onError}
+              wrapSection={wrapSection}
+            />
+          </div>
+        )}
+
+        {activeStep === "enable" && (
+          <EnableFiscalizationSection
+            form={form}
+            fursSettings={fursSettings}
+            premises={(premises || []) as any}
+            t={translate}
+            wrapSection={wrapSection}
+          />
+        )}
+      </form>
+    </Form>
+  );
+};