@spaceinvoices/react-ui 0.4.8 → 0.4.11

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

@@ -1,19 +1,18 @@
 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 { AlertCircle, Info } from "lucide-react";
+import type { FC, ReactNode } 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 { type FiscalizationStepConfig, useFiscalizationStepFlow } from "../shared/fiscalization-step-flow";
+import { FiscalizationStepTabs } from "../shared/fiscalization-step-tabs";
 import { useFursPremises, useFursSettings, useUpdateFursSettings, useUserFursSettings } from "./furs-settings.hooks";
 // Import locale files
 import de from "./locales/de";
@@ -99,10 +98,6 @@ export const FursSettingsForm: FC<FursSettingsFormProps> = ({
   renderSection,
   hideUserOperatorSection,
 }) => {
-  // 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,
@@ -111,15 +106,6 @@ export const FursSettingsForm: FC<FursSettingsFormProps> = ({
     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);
@@ -178,7 +164,7 @@ export const FursSettingsForm: FC<FursSettingsFormProps> = ({
   const canAccessEnable =
     hasEntityTaxNumber && hasOperatorSettings && certificateValid && hasPremises && hasPremiseWithDevice;
 
-  const steps = [
+  const steps: FiscalizationStepConfig<StepType>[] = [
     {
       id: "settings" as const,
       title: translate("General Settings"),
@@ -194,14 +180,14 @@ export const FursSettingsForm: FC<FursSettingsFormProps> = ({
     {
       id: "premises" as const,
       title: translate("Business Premises"),
-      complete: hasPremiseWithDevice,
-      unlocked: canAccessPremises,
+      complete: Boolean(hasPremiseWithDevice),
+      unlocked: Boolean(canAccessPremises),
     },
     {
       id: "enable" as const,
       title: translate("Enable Fiscalization"),
-      complete: fursEnabled,
-      unlocked: canAccessEnable,
+      complete: Boolean(fursEnabled),
+      unlocked: Boolean(canAccessEnable),
     },
   ];
 
@@ -222,30 +208,13 @@ export const FursSettingsForm: FC<FursSettingsFormProps> = ({
     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]);
+  const { activeStep, handleStepChange } = useFiscalizationStepFlow({
+    initialStep,
+    isReady: !settingsLoading && !premisesLoading,
+    steps,
+    getDefaultStep,
+    onStepChange,
+  });
 
   // Check if entity is Slovenian
   if (entity.country_code !== "SI") {
@@ -274,88 +243,39 @@ export const FursSettingsForm: FC<FursSettingsFormProps> = ({
   // 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 === "certificate") {
-                if (!hasEntityTaxNumber) {
-                  tooltipText = translate("Set entity tax number in General Settings first");
-                } else {
-                  tooltipText = translate("Set operator tax number and label in General Settings first");
-                }
-              } else if (step.id === "premises") {
-                if (!hasEntityTaxNumber) {
-                  tooltipText = translate("Set entity tax number in General Settings first");
-                } else if (!hasOperatorSettings) {
-                  tooltipText = translate("Set operator tax number and label in General Settings first");
-                } else {
-                  tooltipText = translate("Upload and validate digital certificate first");
-                }
-              } else if (step.id === "enable") {
-                if (!hasEntityTaxNumber || !hasOperatorSettings) {
-                  tooltipText = translate("Complete General Settings first");
-                } else 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>
-  );
+  const getStepTooltipText = (step: (typeof steps)[number]) => {
+    if (step.id === "certificate") {
+      if (!hasEntityTaxNumber) {
+        return translate("Set entity tax number in General Settings first");
+      }
+      return translate("Set operator tax number and label in General Settings first");
+    }
+
+    if (step.id === "premises") {
+      if (!hasEntityTaxNumber) {
+        return translate("Set entity tax number in General Settings first");
+      }
+      if (!hasOperatorSettings) {
+        return translate("Set operator tax number and label in General Settings first");
+      }
+      return translate("Upload and validate digital certificate first");
+    }
+
+    if (step.id === "enable") {
+      if (!hasEntityTaxNumber || !hasOperatorSettings) {
+        return translate("Complete General Settings first");
+      }
+      if (!certificateValid) {
+        return translate("Upload and validate digital certificate first");
+      }
+      if (!hasPremises) {
+        return translate("Register at least one business premise first");
+      }
+      return translate("Register at least one electronic device first");
+    }
+
+    return "";
+  };
 
   // Helper to wrap section content with render prop if provided
   const wrapSection = (section: SectionType, content: ReactNode) => {
@@ -385,7 +305,13 @@ export const FursSettingsForm: FC<FursSettingsFormProps> = ({
         )}
 
         {/* Tabs navigation */}
-        {tabsNavigation}
+        <FiscalizationStepTabs
+          activeStep={activeStep}
+          steps={steps}
+          onStepChange={handleStepChange}
+          getTooltipText={getStepTooltipText}
+          testIdPrefix="furs-tab"
+        />
 
         {/* Step content - each section wrapped with its own help */}
         {activeStep === "settings" && (

package/src/components/entities/furs-settings-form/sections/certificate-settings-section.tsx

@@ -171,7 +171,11 @@ export const CertificateSettingsSection: FC<CertificateSettingsSectionProps> = (
         {/* Certificate Status - Show when certificate exists */}
         {hasCertificate && (
           <div className="space-y-4">
-            <Alert variant={currentStatus.variant}>
+            <Alert
+              variant={currentStatus.variant}
+              data-testid="furs-certificate-status"
+              data-status={fursSettings?.certificate_status || "unknown"}
+            >
               <StatusIcon className={cn("h-4 w-4", currentStatus.iconColor)} />
               <AlertTitle>Certificate Status: {currentStatus.label}</AlertTitle>
               <AlertDescription className="space-y-2">
@@ -221,6 +225,7 @@ export const CertificateSettingsSection: FC<CertificateSettingsSectionProps> = (
                   onChange={handleFileChange}
                   disabled={isPending}
                   className="flex-1"
+                  data-testid="furs-certificate-file-input"
                 />
                 {certificateFile && <CheckCircle2 className="h-5 w-5 text-green-500" />}
               </div>
@@ -240,6 +245,7 @@ export const CertificateSettingsSection: FC<CertificateSettingsSectionProps> = (
                 onChange={(e) => setPassphrase(e.target.value)}
                 disabled={isPending}
                 placeholder={t("Enter certificate passphrase")}
+                data-testid="furs-certificate-passphrase-input"
               />
             </div>
 
@@ -264,6 +270,7 @@ export const CertificateSettingsSection: FC<CertificateSettingsSectionProps> = (
                 onClick={handleUpload}
                 disabled={!certificateFile || !passphrase || isPending}
                 className={cn(hasCertificate && showUploadForm ? "flex-1" : "w-full", "cursor-pointer")}
+                data-testid="furs-certificate-upload-submit"
               >
                 <Upload className="mr-2 h-4 w-4" />
                 {isPending ? t("Loading...") : hasCertificate ? t("Upload New Certificate") : t("Upload Certificate")}

package/src/components/entities/furs-settings-form/sections/enable-fiscalization-section.tsx

@@ -116,6 +116,7 @@ export const EnableFiscalizationSection: FC<EnableFiscalizationSectionProps> = (
                   onCheckedChange={field.onChange}
                   disabled={!allPrerequisitesMet && !field.value}
                   className="cursor-pointer"
+                  data-testid="furs-enable-switch"
                 />
               </FormControl>
             </FormItem>

package/src/components/entities/furs-settings-form/sections/general-settings-section.tsx

@@ -175,6 +175,7 @@ export const GeneralSettingsSection: FC<GeneralSettingsSectionProps> = ({
           onClick={handleSaveEntityInfo}
           disabled={isEntityUpdatePending}
           className="cursor-pointer"
+          data-testid="furs-entity-info-save"
         >
           {isEntityUpdatePending ? t("Saving...") : t("Save Entity Info")}
         </Button>
@@ -240,6 +241,7 @@ export const GeneralSettingsSection: FC<GeneralSettingsSectionProps> = ({
           onClick={handleSaveUserSettings}
           disabled={isUserSettingsPending || userSettingsLoading}
           className="cursor-pointer"
+          data-testid="furs-operator-settings-save"
         >
           {isUserSettingsPending ? t("Saving...") : t("Save Operator Settings")}
         </Button>
@@ -320,6 +322,7 @@ export const GeneralSettingsSection: FC<GeneralSettingsSectionProps> = ({
         type="button"
         onClick={() => setIsAdvancedOpen(!isAdvancedOpen)}
         className="flex w-full items-center gap-2 py-2 text-muted-foreground hover:text-foreground"
+        data-testid="furs-advanced-toggle"
       >
         <ChevronRight className={cn("h-4 w-4 transition-transform", isAdvancedOpen && "rotate-90")} />
         <span className="font-medium text-sm">{t("Advanced Settings")}</span>
@@ -342,7 +345,12 @@ export const GeneralSettingsSection: FC<GeneralSettingsSectionProps> = ({
                   <FormItem>
                     <FormLabel className="text-sm">{t("Operator Tax Number")}</FormLabel>
                     <FormControl>
-                      <Input placeholder="12345678" {...field} className="h-10" />
+                      <Input
+                        placeholder="12345678"
+                        {...field}
+                        className="h-10"
+                        data-testid="furs-api-operator-tax-number-input"
+                      />
                     </FormControl>
                     <FormDescription className="text-xs">
                       {t("Tax number for API key usage (optional)")}
@@ -359,7 +367,12 @@ export const GeneralSettingsSection: FC<GeneralSettingsSectionProps> = ({
                   <FormItem>
                     <FormLabel className="text-sm">{t("Operator Label")}</FormLabel>
                     <FormControl>
-                      <Input placeholder="API Default" {...field} className="h-10" />
+                      <Input
+                        placeholder="API Default"
+                        {...field}
+                        className="h-10"
+                        data-testid="furs-api-operator-label-input"
+                      />
                     </FormControl>
                     <FormDescription className="text-xs">
                       {t("Operator label for API key usage (optional)")}

package/src/components/entities/furs-settings-form/sections/premises-management-section.tsx

@@ -150,11 +150,21 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
       <div className="space-y-6">
         {/* Add Premise Buttons */}
         <div className="flex gap-3">
-          <Button onClick={() => handleAddPremise("real-estate")} variant="default" className="flex-1 cursor-pointer">
+          <Button
+            onClick={() => handleAddPremise("real-estate")}
+            variant="default"
+            className="flex-1 cursor-pointer"
+            data-testid="furs-add-real-estate-premise"
+          >
             <Building2 className="mr-2 h-4 w-4" />
             {t("Add Real Estate")}
           </Button>
-          <Button onClick={() => handleAddPremise("movable")} variant="outline" className="flex-1 cursor-pointer">
+          <Button
+            onClick={() => handleAddPremise("movable")}
+            variant="outline"
+            className="flex-1 cursor-pointer"
+            data-testid="furs-add-movable-premise"
+          >
             <Truck className="mr-2 h-4 w-4" />
             {t("Add Movable")}
           </Button>
@@ -196,7 +206,11 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
                           </Button>
                         </DropdownMenuTrigger>
                         <DropdownMenuContent align="end">
-                          <DropdownMenuItem onClick={() => handleAddDevice(premise.id)} className="cursor-pointer">
+                          <DropdownMenuItem
+                            onClick={() => handleAddDevice(premise.id)}
+                            className="cursor-pointer"
+                            data-testid={`furs-add-device-${premise.business_premise_name}`}
+                          >
                             <Cpu className="mr-2 h-4 w-4" />
                             {t("Add Electronic Device")}
                           </DropdownMenuItem>
@@ -274,6 +288,7 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
                             variant="outline"
                             onClick={() => handleAddDevice(premise.id)}
                             className="cursor-pointer"
+                            data-testid={`furs-add-device-${premise.business_premise_name}`}
                           >
                             <Cpu className="mr-2 h-4 w-4" />
                             {t("Add Electronic Device")}
@@ -337,6 +352,7 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
                       handleRegisterDevice();
                     }
                   }}
+                  data-testid="furs-device-name-input"
                 />
                 <p className="text-muted-foreground text-sm">
                   {t("Enter a unique name for this device (e.g., E1, E2, POS1, DEVICE1)")}
@@ -357,6 +373,7 @@ export const PremisesManagementSection: FC<PremisesManagementSectionProps> = ({
                 onClick={handleRegisterDevice}
                 disabled={!deviceName.trim() || isRegisteringDevice}
                 className="cursor-pointer"
+                data-testid="furs-register-device-submit"
               >
                 {isRegisteringDevice ? t("Registering...") : t("Register Device")}
               </Button>

package/src/components/entities/furs-settings-form/sections/register-premise-dialog.tsx

@@ -188,7 +188,14 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
                   <FormItem>
                     <FormLabel>{t("Cadastral Number")} *</FormLabel>
                     <FormControl>
-                      <Input type="text" inputMode="numeric" pattern="[0-9]*" placeholder="123" {...field} />
+                      <Input
+                        type="text"
+                        inputMode="numeric"
+                        pattern="[0-9]*"
+                        placeholder="123"
+                        {...field}
+                        data-testid="furs-real-estate-cadastral-number"
+                      />
                     </FormControl>
                     <FormDescription>{t("Required by FURS (must be numeric)")}</FormDescription>
                     <FormMessage />
@@ -205,7 +212,14 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
                     <FormItem>
                       <FormLabel>{t("Building Number")} *</FormLabel>
                       <FormControl>
-                        <Input type="text" inputMode="numeric" pattern="[0-9]*" placeholder="456" {...field} />
+                        <Input
+                          type="text"
+                          inputMode="numeric"
+                          pattern="[0-9]*"
+                          placeholder="456"
+                          {...field}
+                          data-testid="furs-real-estate-building-number"
+                        />
                       </FormControl>
                       <FormDescription className="text-xs">{t("Numeric, use 0 if not applicable")}</FormDescription>
                       <FormMessage />
@@ -219,7 +233,14 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
                     <FormItem>
                       <FormLabel>{t("Building Section")} *</FormLabel>
                       <FormControl>
-                        <Input type="text" inputMode="numeric" pattern="[0-9]*" placeholder="1" {...field} />
+                        <Input
+                          type="text"
+                          inputMode="numeric"
+                          pattern="[0-9]*"
+                          placeholder="1"
+                          {...field}
+                          data-testid="furs-real-estate-building-section"
+                        />
                       </FormControl>
                       <FormDescription className="text-xs">{t("Numeric, use 0 if not applicable")}</FormDescription>
                       <FormMessage />
@@ -236,7 +257,7 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
                   <FormItem>
                     <FormLabel>{t("Community")} *</FormLabel>
                     <FormControl>
-                      <Input placeholder="Ljubljana" {...field} />
+                      <Input placeholder="Ljubljana" {...field} data-testid="furs-real-estate-community" />
                     </FormControl>
                     <FormDescription>{t("Slovenian administrative community (občina) name")}</FormDescription>
                     <FormMessage />
@@ -252,7 +273,7 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
                   <FormItem>
                     <FormLabel>{t("Street")} *</FormLabel>
                     <FormControl>
-                      <Input placeholder="Dunajska cesta" {...field} />
+                      <Input placeholder="Dunajska cesta" {...field} data-testid="furs-real-estate-street" />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -267,7 +288,7 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
                     <FormItem>
                       <FormLabel>{t("House Number")} *</FormLabel>
                       <FormControl>
-                        <Input placeholder="22" {...field} />
+                        <Input placeholder="22" {...field} data-testid="furs-real-estate-house-number" />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -280,7 +301,12 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
                     <FormItem>
                       <FormLabel>{t("Additional")}</FormLabel>
                       <FormControl>
-                        <Input placeholder="A" {...field} value={field.value || ""} />
+                        <Input
+                          placeholder="A"
+                          {...field}
+                          value={field.value || ""}
+                          data-testid="furs-real-estate-house-number-additional"
+                        />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -296,7 +322,7 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
                     <FormItem>
                       <FormLabel>{t("City")} *</FormLabel>
                       <FormControl>
-                        <Input placeholder="Ljubljana" {...field} />
+                        <Input placeholder="Ljubljana" {...field} data-testid="furs-real-estate-city" />
                       </FormControl>
                       <FormMessage />
                     </FormItem>
@@ -309,7 +335,7 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
                     <FormItem>
                       <FormLabel>{t("Postal Code")} *</FormLabel>
                       <FormControl>
-                        <Input placeholder="1000" {...field} />
+                        <Input placeholder="1000" {...field} data-testid="furs-real-estate-postal-code" />
                       </FormControl>
                       <FormDescription className="text-xs">{t("Exactly 4 digits")}</FormDescription>
                       <FormMessage />
@@ -322,7 +348,7 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
                 <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isPending}>
                   {t("Cancel")}
                 </Button>
-                <Button type="submit" disabled={isPending}>
+                <Button type="submit" disabled={isPending} data-testid="furs-register-premise-submit">
                   {isPending ? t("Registering...") : t("Register Premise")}
                 </Button>
               </DialogFooter>
@@ -345,7 +371,7 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
                   <FormItem>
                     <FormLabel>{t("Premise Name")}</FormLabel>
                     <FormControl>
-                      <Input placeholder="P1" {...field} />
+                      <Input placeholder="P1" {...field} data-testid="furs-movable-premise-name" />
                     </FormControl>
                     <FormDescription>{t("Unique identifier for this premise (e.g., P1, P2)")}</FormDescription>
                     <FormMessage />
@@ -382,7 +408,7 @@ export const RegisterPremiseDialog: FC<RegisterPremiseDialogProps> = ({
                 <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isPending}>
                   {t("Cancel")}
                 </Button>
-                <Button type="submit" disabled={isPending}>
+                <Button type="submit" disabled={isPending} data-testid="furs-register-premise-submit">
                   {isPending ? t("Registering...") : t("Register Premise")}
                 </Button>
               </DialogFooter>

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

@@ -30,11 +30,11 @@ const translations = { sl, de } as const;
 
 const SUPPORTED_LOCALES = [
   { value: "en-US", label: "English (US)" },
-  { value: "de-DE", label: "Deutsch (DE)" },
-  { value: "it-IT", label: "Italiano (IT)" },
-  { value: "fr-FR", label: "Français (FR)" },
-  { value: "es-ES", label: "Español (ES)" },
-  { value: "sl-SI", label: "Slovenščina (SI)" },
+  { value: "de-DE", label: "German (DE)" },
+  { value: "it-IT", label: "Italian (IT)" },
+  { value: "fr-FR", label: "French (FR)" },
+  { value: "es-ES", label: "Spanish (ES)" },
+  { value: "sl-SI", label: "Slovenian (SI)" },
 ] as const;
 
 const defaultsSettingsSchema = z.object({
@@ -206,7 +206,7 @@ export function DefaultsSettingsForm({
               <SelectContent>
                 {SUPPORTED_LOCALES.map((loc) => (
                   <SelectItem key={loc.value} value={loc.value}>
-                    {loc.label}
+                    {t(loc.label)}
                   </SelectItem>
                 ))}
               </SelectContent>

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

@@ -16,6 +16,18 @@ const eslogSettingsSchema = z.object({
 
 type EslogSettingsSchema = z.infer<typeof eslogSettingsSchema>;
 
+const translations = {
+  en: {
+    "Save Settings": "Save Settings",
+    "Enable e-SLOG validation": "Enable e-SLOG validation",
+    "When enabled, documents will be automatically validated against e-SLOG 2.0 requirements when created.":
+      "When enabled, documents will be automatically validated against e-SLOG 2.0 requirements when created.",
+    "About e-SLOG 2.0": "About e-SLOG 2.0",
+    "e-SLOG 2.0 is the Slovenian electronic invoice standard based on the European EN 16931 specification. Valid documents can be downloaded in XML format and attached to emails.":
+      "e-SLOG 2.0 is the Slovenian electronic invoice standard based on the European EN 16931 specification. Valid documents can be downloaded in XML format and attached to emails.",
+  },
+} as const;
+
 export type EslogSettingsFormProps = {
   entity: Entity;
   onSuccess?: (data: Entity) => void;
@@ -30,7 +42,7 @@ export function EslogSettingsForm({
   onSuccess,
   onError,
 }: EslogSettingsFormProps) {
-  const t = createTranslation({ t: translateProp, namespace, locale, translations: {} });
+  const t = createTranslation({ t: translateProp, namespace, locale, translations });
 
   const currentSettings = (entity.settings as Record<string, unknown>) || {};
 

package/src/components/entities/settings/pdf-template-selector/demo-invoice-data.ts

@@ -116,12 +116,13 @@ const demoDataByLocale: Record<string, LocaleDemoData> = {
   },
 };
 
+import { getFullLocale } from "@/ui/lib/locale";
+
 /**
  * Get demo invoice data for template preview based on locale
  */
 export function getDemoInvoiceData(locale: string): DemoInvoiceData {
-  // Normalize locale (e.g., "en" -> "en-US", "sl" -> "sl-SI")
-  const normalizedLocale = normalizeLocale(locale);
+  const normalizedLocale = getFullLocale(locale);
   const data = demoDataByLocale[normalizedLocale] || demoDataByLocale["en-US"];
 
   const today = new Date();
@@ -142,23 +143,3 @@ export function getDemoInvoiceData(locale: string): DemoInvoiceData {
     note: data.note,
   };
 }
-
-function normalizeLocale(locale: string): string {
-  const mapping: Record<string, string> = {
-    en: "en-US",
-    sl: "sl-SI",
-    de: "de-DE",
-    fr: "fr-FR",
-    es: "es-ES",
-    it: "it-IT",
-  };
-
-  // If already full locale, return as-is if supported
-  if (demoDataByLocale[locale]) {
-    return locale;
-  }
-
-  // Try to match short code
-  const shortCode = locale.split("-")[0].toLowerCase();
-  return mapping[shortCode] || "en-US";
-}