Chore/v2/translation fixes (#5011)

# Description of Changes

<!--
Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)
-->

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### Translations (if applicable)

- [ ] I ran
[`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.

frontend/src/proprietary/components/shared/config/configNavSections.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { createConfigNavSections as createCoreConfigNavSections, ConfigNavSection } from '@core/components/shared/config/configNavSections';
+import { useTranslation } from 'react-i18next';
+import { useConfigNavSections as useCoreConfigNavSections, createConfigNavSections as createCoreConfigNavSections, ConfigNavSection } from '@core/components/shared/config/configNavSections';
 import PeopleSection from '@app/components/shared/config/configSections/PeopleSection';
 import TeamsSection from '@app/components/shared/config/configSections/TeamsSection';
 import AdminGeneralSection from '@app/components/shared/config/configSections/AdminGeneralSection';
@@ -17,6 +18,196 @@ import AdminUsageSection from '@app/components/shared/config/configSections/Admi
 import ApiKeys from '@app/components/shared/config/configSections/ApiKeys';
 
 /**
+ * Hook version of proprietary config nav sections with proper i18n support
+ */
+export const useConfigNavSections = (
+  isAdmin: boolean = false,
+  runningEE: boolean = false,
+  loginEnabled: boolean = false
+): ConfigNavSection[] => {
+  const { t } = useTranslation();
+
+  // Get the core sections (just Preferences)
+  const sections = useCoreConfigNavSections(isAdmin, runningEE, loginEnabled);
+
+  // Add Admin sections if user is admin OR if login is disabled (but mark as disabled)
+  if (isAdmin || !loginEnabled) {
+    const requiresLogin = !loginEnabled;
+    const enableLoginTooltip = t('settings.tooltips.enableLoginFirst', 'Enable login mode first');
+    const requiresEnterpriseTooltip = t('settings.tooltips.requiresEnterprise', 'Requires Enterprise license');
+
+    // Workspace
+    sections.push({
+      title: t('settings.workspace.title', 'Workspace'),
+      items: [
+        {
+          key: 'people',
+          label: t('settings.workspace.people', 'People'),
+          icon: 'group-rounded',
+          component: <PeopleSection />,
+          disabled: requiresLogin,
+          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined
+        },
+        {
+          key: 'teams',
+          label: t('settings.workspace.teams', 'Teams'),
+          icon: 'groups-rounded',
+          component: <TeamsSection />,
+          disabled: requiresLogin,
+          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined
+        },
+      ],
+    });
+
+    // Configuration
+    sections.push({
+      title: t('settings.configuration.title', 'Configuration'),
+      items: [
+        {
+          key: 'adminGeneral',
+          label: t('settings.configuration.systemSettings', 'System Settings'),
+          icon: 'settings-rounded',
+          component: <AdminGeneralSection />,
+          disabled: requiresLogin,
+          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined
+        },
+        {
+          key: 'adminFeatures',
+          label: t('settings.configuration.features', 'Features'),
+          icon: 'extension-rounded',
+          component: <AdminFeaturesSection />,
+          disabled: requiresLogin,
+          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined
+        },
+        {
+          key: 'adminEndpoints',
+          label: t('settings.configuration.endpoints', 'Endpoints'),
+          icon: 'api-rounded',
+          component: <AdminEndpointsSection />,
+          disabled: requiresLogin,
+          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined
+        },
+        {
+          key: 'adminDatabase',
+          label: t('settings.configuration.database', 'Database'),
+          icon: 'storage-rounded',
+          component: <AdminDatabaseSection />,
+          disabled: requiresLogin,
+          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined
+        },
+        {
+          key: 'adminAdvanced',
+          label: t('settings.configuration.advanced', 'Advanced'),
+          icon: 'tune-rounded',
+          component: <AdminAdvancedSection />,
+          disabled: requiresLogin,
+          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined
+        },
+      ],
+    });
+
+    // Security & Authentication
+    sections.push({
+      title: t('settings.securityAuth.title', 'Security & Authentication'),
+      items: [
+        {
+          key: 'adminSecurity',
+          label: t('settings.securityAuth.security', 'Security'),
+          icon: 'shield-rounded',
+          component: <AdminSecuritySection />,
+          disabled: requiresLogin,
+          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined
+        },
+        {
+          key: 'adminConnections',
+          label: t('settings.securityAuth.connections', 'Connections'),
+          icon: 'link-rounded',
+          component: <AdminConnectionsSection />,
+          disabled: requiresLogin,
+          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined
+        },
+      ],
+    });
+
+    // Licensing & Analytics
+    sections.push({
+      title: t('settings.licensingAnalytics.title', 'Licensing & Analytics'),
+      items: [
+        {
+          key: 'adminPlan',
+          label: t('settings.licensingAnalytics.plan', 'Plan'),
+          icon: 'star-rounded',
+          component: <AdminPlanSection />,
+          disabled: requiresLogin,
+          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined
+        },
+        {
+          key: 'adminAudit',
+          label: t('settings.licensingAnalytics.audit', 'Audit'),
+          icon: 'fact-check-rounded',
+          component: <AdminAuditSection />,
+          disabled: !runningEE || requiresLogin,
+          disabledTooltip: requiresLogin ? enableLoginTooltip : requiresEnterpriseTooltip
+        },
+        {
+          key: 'adminUsage',
+          label: t('settings.licensingAnalytics.usageAnalytics', 'Usage Analytics'),
+          icon: 'analytics-rounded',
+          component: <AdminUsageSection />,
+          disabled: !runningEE || requiresLogin,
+          disabledTooltip: requiresLogin ? enableLoginTooltip : requiresEnterpriseTooltip
+        },
+      ],
+    });
+
+    // Policies & Privacy
+    sections.push({
+      title: t('settings.policiesPrivacy.title', 'Policies & Privacy'),
+      items: [
+        {
+          key: 'adminLegal',
+          label: t('settings.policiesPrivacy.legal', 'Legal'),
+          icon: 'gavel-rounded',
+          component: <AdminLegalSection />,
+          disabled: requiresLogin,
+          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined
+        },
+        {
+          key: 'adminPrivacy',
+          label: t('settings.policiesPrivacy.privacy', 'Privacy'),
+          icon: 'visibility-rounded',
+          component: <AdminPrivacySection />,
+          disabled: requiresLogin,
+          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined
+        },
+      ],
+    });
+  }
+
+  // Add Developer section if login is enabled
+  if (loginEnabled) {
+    const developerSection: ConfigNavSection = {
+      title: t('settings.developer.title', 'Developer'),
+      items: [
+        {
+          key: 'api-keys',
+          label: t('settings.developer.apiKeys', 'API Keys'),
+          icon: 'key-rounded',
+          component: <ApiKeys />
+        },
+      ],
+    };
+
+    // Add Developer section after Preferences (or Workspace if it exists)
+    const insertIndex = isAdmin ? 2 : 1;
+    sections.splice(insertIndex, 0, developerSection);
+  }
+
+  return sections;
+};
+
+/**
+ * Deprecated: Use useConfigNavSections hook instead
  * Proprietary extension of createConfigNavSections that adds all admin and workspace sections
  */
 export const createConfigNavSections = (
@@ -24,6 +215,8 @@ export const createConfigNavSections = (
   runningEE: boolean = false,
   loginEnabled: boolean = false
 ): ConfigNavSection[] => {
+  console.warn('createConfigNavSections is deprecated. Use useConfigNavSections hook instead for proper i18n support.');
+
   // Get the core sections (just Preferences)
   const sections = createCoreConfigNavSections(isAdmin, runningEE, loginEnabled);
 

frontend/src/proprietary/components/shared/config/configSections/AdminGeneralSection.tsx

@@ -336,7 +336,7 @@ export default function AdminGeneralSection() {
                     <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.25rem 0' }}>
                       <img
                         src="/classic-logo/favicon.ico"
-                        alt="Classic logo"
+                        alt={t('admin.settings.general.logoStyle.classicAlt', 'Classic logo')}
                         style={{ width: '24px', height: '24px' }}
                       />
                       <span>{t('admin.settings.general.logoStyle.classic', 'Classic')}</span>
@@ -349,7 +349,7 @@ export default function AdminGeneralSection() {
                     <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.25rem 0' }}>
                       <img
                         src="/modern-logo/StirlingPDFLogoNoTextLight.svg"
-                        alt="Modern logo"
+                        alt={t('admin.settings.general.logoStyle.modernAlt', 'Modern logo')}
                         style={{ width: '24px', height: '24px' }}
                       />
                       <span>{t('admin.settings.general.logoStyle.modern', 'Modern')}</span>
@@ -385,7 +385,7 @@ export default function AdminGeneralSection() {
               ]}
               searchable
               clearable
-              placeholder="Select languages"
+              placeholder={t('admin.settings.general.languages.placeholder', 'Select languages')}
               comboboxProps={{ zIndex: 1400 }}
               disabled={!loginEnabled}
             />

frontend/src/proprietary/components/shared/config/configSections/TeamDetailsSection.tsx

@@ -72,7 +72,7 @@ export default function TeamDetailsSection({ teamId, onBack }: TeamDetailsSectio
       });
     } catch (error) {
       console.error('Failed to fetch team details:', error);
-      alert({ alertType: 'error', title: 'Failed to load team details' });
+      alert({ alertType: 'error', title: t('workspace.teams.loadError', 'Failed to load team details') });
       onBack();
     } finally {
       setLoading(false);