saafe-redirection-flow 2.1.0 → 2.2.1

package/docs/features/theming-internationalization.md

@@ -0,0 +1,982 @@
+# Theming and Internationalization Module Documentation
+
+## Overview
+
+The Theming and Internationalization module provides comprehensive support for multiple visual themes and languages in the SAAFE Redirection Flow. This module ensures the application can adapt to different user preferences, regional requirements, and accessibility needs while maintaining brand consistency.
+
+## Theming System
+
+### Theme Context (`ThemeContext.tsx`)
+
+**Location**: `src/contexts/ThemeContext.tsx`
+
+**Core Features**:
+- Light, dark, and system theme support
+- Dynamic theme switching
+- Platform-specific theme detection
+- CSS custom properties integration
+- Theme persistence across sessions
+
+**Theme Types**:
+```typescript
+type Theme = "light" | "dark" | "system";
+
+interface ThemeContextType {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+  effectiveTheme: "light" | "dark";
+  isSystemTheme: boolean;
+}
+```
+
+### Theme Implementation
+
+**Theme Provider Setup**:
+```tsx
+export const ThemeProvider: React.FC<ThemeProviderProps> = ({
+  children,
+  defaultTheme = "system",
+  storageKey = "saafe-ui-theme",
+  ...props
+}) => {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  );
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+      applyThemeToDocument(theme);
+    },
+    effectiveTheme: getEffectiveTheme(theme),
+    isSystemTheme: theme === "system"
+  };
+
+  return (
+    <ThemeContext.Provider {...props} value={value}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+```
+
+### CSS Variables System
+
+**Theme Variables**:
+```css
+:root {
+  /* Light theme variables */
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+  --primary: 221.2 83.2% 53.3%;
+  --primary-foreground: 210 40% 98%;
+  --secondary: 210 40% 96%;
+  --secondary-foreground: 222.2 84% 4.9%;
+  --muted: 210 40% 96%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+  --accent: 210 40% 96%;
+  --accent-foreground: 222.2 84% 4.9%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 221.2 83.2% 53.3%;
+  --radius: 0.5rem;
+}
+
+.dark {
+  /* Dark theme variables */
+  --background: 222.2 84% 4.9%;
+  --foreground: 210 40% 98%;
+  --card: 222.2 84% 4.9%;
+  --card-foreground: 210 40% 98%;
+  --popover: 222.2 84% 4.9%;
+  --popover-foreground: 210 40% 98%;
+  --primary: 217.2 91.2% 59.8%;
+  --primary-foreground: 222.2 84% 4.9%;
+  --secondary: 217.2 32.6% 17.5%;
+  --secondary-foreground: 210 40% 98%;
+  --muted: 217.2 32.6% 17.5%;
+  --muted-foreground: 215 20.2% 65.1%;
+  --accent: 217.2 32.6% 17.5%;
+  --accent-foreground: 210 40% 98%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 210 40% 98%;
+  --border: 217.2 32.6% 17.5%;
+  --input: 217.2 32.6% 17.5%;
+  --ring: 224.3 76.3% 94.1%;
+}
+```
+
+### Theme Toggle Component
+
+**Mode Toggle Component**:
+```tsx
+// src/components/mode-toggle.tsx
+export function ModeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+```
+
+### Platform-Specific Theme Detection
+
+**URL Parameter Theme Override**:
+```typescript
+const getThemeFromParams = (): Theme | null => {
+  const params = new URLSearchParams(window.location.search);
+  const themeParam = params.get('theme');
+  
+  if (themeParam && ['light', 'dark', 'system'].includes(themeParam)) {
+    return themeParam as Theme;
+  }
+  
+  return null;
+};
+
+const initializeTheme = () => {
+  const urlTheme = getThemeFromParams();
+  const storedTheme = localStorage.getItem('saafe-ui-theme');
+  const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  
+  return urlTheme || storedTheme || systemTheme;
+};
+```
+
+## Internationalization (i18n)
+
+### i18n Configuration (`i18n.ts`)
+
+**Location**: `src/lib/i18n.ts`
+
+**Setup and Configuration**:
+```typescript
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+// Import translation files
+import enTranslation from '../locales/en/common.json';
+import hiTranslation from '../locales/hi/common.json';
+import taTranslation from '../locales/ta/common.json';
+import mlTranslation from '../locales/ml/common.json';
+import teTranslation from '../locales/te/common.json';
+import knTranslation from '../locales/kn/common.json';
+import urTranslation from '../locales/ur/common.json';
+
+const resources = {
+  en: { translation: enTranslation },
+  hi: { translation: hiTranslation },
+  ta: { translation: taTranslation },
+  ml: { translation: mlTranslation },
+  te: { translation: teTranslation },
+  kn: { translation: knTranslation },
+  ur: { translation: urTranslation },
+};
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    resources,
+    fallbackLng: 'en',
+    debug: import.meta.env.DEV,
+    
+    interpolation: {
+      escapeValue: false,
+    },
+    
+    detection: {
+      order: ['querystring', 'localStorage', 'navigator'],
+      caches: ['localStorage'],
+      lookupQuerystring: 'lang',
+      lookupLocalStorage: 'i18nextLng',
+    },
+  });
+
+export default i18n;
+```
+
+### Language Context (`LanguageContext.tsx`)
+
+**Location**: `src/contexts/LanguageContext.tsx`
+
+**Language Management**:
+```typescript
+interface LanguageContextType {
+  currentLanguage: string;
+  setLanguage: (lang: string) => void;
+  availableLanguages: Language[];
+  isRTL: boolean;
+  t: TFunction;
+}
+
+export const LanguageProvider: React.FC<LanguageProviderProps> = ({ children }) => {
+  const [currentLanguage, setCurrentLanguage] = useState(i18n.language);
+  const { t } = useTranslation();
+
+  const setLanguage = useCallback((lang: string) => {
+    i18n.changeLanguage(lang);
+    setCurrentLanguage(lang);
+    
+    // Update document direction for RTL languages
+    updateDocumentDirection(lang);
+    
+    // Track language change
+    trackEvent('LANGUAGE_CHANGED', { 
+      from: currentLanguage, 
+      to: lang 
+    });
+  }, [currentLanguage]);
+
+  const value = {
+    currentLanguage,
+    setLanguage,
+    availableLanguages: SUPPORTED_LANGUAGES,
+    isRTL: RTL_LANGUAGES.includes(currentLanguage),
+    t
+  };
+
+  return (
+    <LanguageContext.Provider value={value}>
+      {children}
+    </LanguageContext.Provider>
+  );
+};
+```
+
+### Supported Languages
+
+**Language Configuration**:
+```typescript
+export const SUPPORTED_LANGUAGES = [
+  { code: 'en', name: 'English', nativeName: 'English' },
+  { code: 'hi', name: 'Hindi', nativeName: 'हिन्दी' },
+  { code: 'ta', name: 'Tamil', nativeName: 'தமிழ்' },
+  { code: 'ml', name: 'Malayalam', nativeName: 'മലയാളം' },
+  { code: 'te', name: 'Telugu', nativeName: 'తెలుగు' },
+  { code: 'kn', name: 'Kannada', nativeName: 'ಕನ್ನಡ' },
+  { code: 'ur', name: 'Urdu', nativeName: 'اردو' }
+];
+
+export const RTL_LANGUAGES = ['ur', 'ar'];
+export const DEFAULT_LANGUAGE = 'en';
+```
+
+### Language Switcher Component
+
+**Location**: `src/components/language/LanguageSwitcher.tsx`
+
+**Component Features**:
+```tsx
+export function LanguageSwitcher() {
+  const { currentLanguage, setLanguage, availableLanguages } = useLanguage();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="sm">
+          <Globe className="mr-2 h-4 w-4" />
+          {availableLanguages.find(lang => lang.code === currentLanguage)?.nativeName}
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {availableLanguages.map((language) => (
+          <DropdownMenuItem
+            key={language.code}
+            onClick={() => setLanguage(language.code)}
+            className={currentLanguage === language.code ? 'bg-accent' : ''}
+          >
+            <span className="text-sm font-medium">{language.nativeName}</span>
+            <span className="ml-2 text-xs text-muted-foreground">{language.name}</span>
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+```
+
+## RTL (Right-to-Left) Support
+
+### RTL Context (`RTLContext.tsx`)
+
+**Location**: `src/contexts/RTLContext.tsx`
+
+**RTL Management**:
+```typescript
+interface RTLContextType {
+  isRTL: boolean;
+  direction: 'ltr' | 'rtl';
+  toggleDirection: () => void;
+  setDirection: (direction: 'ltr' | 'rtl') => void;
+}
+
+export const RTLProvider: React.FC<RTLProviderProps> = ({ children }) => {
+  const { currentLanguage } = useLanguage();
+  const [isRTL, setIsRTL] = useState(RTL_LANGUAGES.includes(currentLanguage));
+
+  useEffect(() => {
+    const shouldBeRTL = RTL_LANGUAGES.includes(currentLanguage);
+    setIsRTL(shouldBeRTL);
+    updateDocumentDirection(shouldBeRTL ? 'rtl' : 'ltr');
+  }, [currentLanguage]);
+
+  const value = {
+    isRTL,
+    direction: isRTL ? 'rtl' : 'ltr',
+    toggleDirection: () => setIsRTL(!isRTL),
+    setDirection: (direction: 'ltr' | 'rtl') => setIsRTL(direction === 'rtl')
+  };
+
+  return (
+    <RTLContext.Provider value={value}>
+      {children}
+    </RTLContext.Provider>
+  );
+};
+```
+
+### RTL Styling
+
+**RTL CSS Utilities**:
+```css
+/* src/styles/rtl.css */
+.rtl {
+  direction: rtl;
+}
+
+.ltr {
+  direction: ltr;
+}
+
+/* RTL-aware margins and paddings */
+.ms-auto {
+  margin-inline-start: auto;
+}
+
+.me-auto {
+  margin-inline-end: auto;
+}
+
+.ps-4 {
+  padding-inline-start: 1rem;
+}
+
+.pe-4 {
+  padding-inline-end: 1rem;
+}
+
+/* RTL-aware text alignment */
+.text-start {
+  text-align: start;
+}
+
+.text-end {
+  text-align: end;
+}
+
+/* RTL-aware transforms */
+.rtl .transform-flip-x {
+  transform: scaleX(-1);
+}
+
+/* RTL-aware animations */
+.rtl .animate-slide-in-right {
+  animation: slideInLeft 0.3s ease-out;
+}
+
+.rtl .animate-slide-in-left {
+  animation: slideInRight 0.3s ease-out;
+}
+```
+
+**RTL Utility Classes**:
+```css
+/* src/styles/rtl-utils.css */
+.border-s {
+  border-inline-start-width: 1px;
+}
+
+.border-e {
+  border-inline-end-width: 1px;
+}
+
+.rounded-s {
+  border-start-start-radius: 0.375rem;
+  border-end-start-radius: 0.375rem;
+}
+
+.rounded-e {
+  border-start-end-radius: 0.375rem;
+  border-end-end-radius: 0.375rem;
+}
+```
+
+### RTL Hooks
+
+**useRTL Hook**:
+```typescript
+// src/hooks/use-rtl.ts
+export function useRTL() {
+  const context = useContext(RTLContext);
+  if (!context) {
+    throw new Error('useRTL must be used within an RTLProvider');
+  }
+  return context;
+}
+
+// Helper hook for conditional RTL styling
+export function useRTLClass(baseClass: string, rtlClass?: string) {
+  const { isRTL } = useRTL();
+  return isRTL && rtlClass ? `${baseClass} ${rtlClass}` : baseClass;
+}
+```
+
+## Translation Management
+
+### Translation File Structure
+
+**Common Translation Keys**:
+```json
+// src/locales/en/common.json
+{
+  "common": {
+    "continue": "Continue",
+    "cancel": "Cancel",
+    "back": "Back",
+    "next": "Next",
+    "save": "Save",
+    "loading": "Loading...",
+    "error": "Something went wrong",
+    "retry": "Retry",
+    "close": "Close"
+  },
+  "authentication": {
+    "login": "Login",
+    "username": "Username",
+    "password": "Password",
+    "otp": "Enter OTP",
+    "loginButton": "Sign In",
+    "forgotPassword": "Forgot Password?",
+    "invalidCredentials": "Invalid username or password",
+    "otpExpired": "OTP has expired. Please request a new one.",
+    "sessionExpired": "Your session has expired. Please login again."
+  },
+  "accounts": {
+    "selectAccounts": "Select Accounts",
+    "noAccountsFound": "No accounts found",
+    "accountType": "Account Type",
+    "accountNumber": "Account Number",
+    "balance": "Balance",
+    "selectAll": "Select All",
+    "deselectAll": "Deselect All",
+    "linkedAccounts": "Linked Accounts"
+  },
+  "categories": {
+    "banks": "Banks",
+    "nbfc": "NBFCs",
+    "insurance": "Insurance",
+    "gst": "GST",
+    "investments": "Investments",
+    "banksDescription": "Traditional banking institutions",
+    "nbfcDescription": "Non-Banking Financial Companies",
+    "insuranceDescription": "Insurance providers",
+    "gstDescription": "GST-related financial data",
+    "investmentsDescription": "Investment and mutual fund companies"
+  },
+  "consent": {
+    "reviewConsent": "Review Consent",
+    "dataSharing": "Data Sharing",
+    "approve": "Approve",
+    "reject": "Reject",
+    "consentGiven": "Consent has been granted",
+    "consentRejected": "Consent has been rejected",
+    "dataScope": "Data that will be shared:",
+    "purpose": "Purpose of data sharing:",
+    "duration": "Data will be retained for:",
+    "termsAndConditions": "Terms and Conditions",
+    "privacyPolicy": "Privacy Policy"
+  },
+  "errors": {
+    "networkError": "Please check your internet connection",
+    "serverError": "Server error occurred. Please try again later.",
+    "validationError": "Please check the entered information",
+    "sessionTimeout": "Session timeout. Please login again.",
+    "accessDenied": "Access denied. Please contact support."
+  },
+  "success": {
+    "accountsLinked": "Accounts successfully linked",
+    "consentApproved": "Consent approved successfully",
+    "dataWillBeShared": "Your selected data will now be shared",
+    "returnToApp": "Return to Application",
+    "downloadReceipt": "Download Consent Receipt"
+  }
+}
+```
+
+### Pluralization Support
+
+**Plural Forms**:
+```json
+{
+  "accountCount": "{{count}} account",
+  "accountCount_other": "{{count}} accounts",
+  "institutionCount": "{{count}} institution",
+  "institutionCount_other": "{{count}} institutions",
+  "dayCount": "{{count}} day",
+  "dayCount_other": "{{count}} days"
+}
+```
+
+**Usage in Components**:
+```tsx
+const AccountSummary: React.FC<{ count: number }> = ({ count }) => {
+  const { t } = useTranslation();
+  
+  return (
+    <div>
+      {t('accountCount', { count })} selected
+    </div>
+  );
+};
+```
+
+### Interpolation and Formatting
+
+**Variable Interpolation**:
+```json
+{
+  "welcomeMessage": "Welcome, {{userName}}!",
+  "accountBalance": "Your balance is {{amount, currency}}",
+  "lastLogin": "Last login: {{date, datetime}}",
+  "expiryWarning": "Consent expires in {{days}} days"
+}
+```
+
+**Usage Examples**:
+```tsx
+// Simple interpolation
+const welcome = t('welcomeMessage', { userName: 'John Doe' });
+
+// Currency formatting
+const balance = t('accountBalance', { 
+  amount: 25000.50,
+  formatParams: {
+    amount: { style: 'currency', currency: 'INR' }
+  }
+});
+
+// Date formatting
+const lastLogin = t('lastLogin', { 
+  date: new Date(),
+  formatParams: {
+    date: { 
+      year: 'numeric', 
+      month: 'long', 
+      day: 'numeric' 
+    }
+  }
+});
+```
+
+## Custom Styling and Branding
+
+### Dynamic Styling Support
+
+**Custom Style Options**:
+```typescript
+interface CustomStyling {
+  primaryColor?: string;
+  secondaryColor?: string;
+  backgroundColor?: string;
+  textColor?: string;
+  borderRadius?: string;
+  fontFamily?: string;
+  logoUrl?: string;
+  brandName?: string;
+}
+
+const applyCustomStyling = (styles: CustomStyling) => {
+  const root = document.documentElement;
+  
+  if (styles.primaryColor) {
+    root.style.setProperty('--primary', styles.primaryColor);
+  }
+  
+  if (styles.secondaryColor) {
+    root.style.setProperty('--secondary', styles.secondaryColor);
+  }
+  
+  if (styles.backgroundColor) {
+    root.style.setProperty('--background', styles.backgroundColor);
+  }
+  
+  if (styles.fontFamily) {
+    root.style.setProperty('--font-family', styles.fontFamily);
+  }
+};
+```
+
+### Brand Integration
+
+**Logo and Branding**:
+```tsx
+interface BrandingProps {
+  logoUrl?: string;
+  brandName?: string;
+  primaryColor?: string;
+}
+
+const BrandHeader: React.FC<BrandingProps> = ({ 
+  logoUrl, 
+  brandName, 
+  primaryColor 
+}) => {
+  return (
+    <header 
+      className="flex items-center space-x-4 p-4"
+      style={{ color: primaryColor }}
+    >
+      {logoUrl && (
+        <img 
+          src={logoUrl} 
+          alt={`${brandName} logo`} 
+          className="h-8 w-auto"
+        />
+      )}
+      {brandName && (
+        <h1 className="text-xl font-semibold">{brandName}</h1>
+      )}
+    </header>
+  );
+};
+```
+
+## Accessibility Features
+
+### Theme-Based Accessibility
+
+**High Contrast Mode**:
+```css
+@media (prefers-contrast: high) {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 0%;
+    --border: 0 0% 0%;
+    --primary: 220 100% 40%;
+  }
+  
+  .dark {
+    --background: 0 0% 0%;
+    --foreground: 0 0% 100%;
+    --border: 0 0% 100%;
+    --primary: 220 100% 60%;
+  }
+}
+```
+
+**Reduced Motion Support**:
+```css
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+```
+
+### Language-Specific Accessibility
+
+**Screen Reader Support**:
+```tsx
+const AccessibleText: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { currentLanguage } = useLanguage();
+  
+  return (
+    <span lang={currentLanguage} role="text">
+      {children}
+    </span>
+  );
+};
+```
+
+## Platform-Specific Adaptations
+
+### Mobile Theme Adaptations
+
+**Mobile-Specific Variables**:
+```css
+@media (max-width: 768px) {
+  :root {
+    --mobile-header-height: 60px;
+    --mobile-footer-height: 80px;
+    --mobile-padding: 1rem;
+    --mobile-border-radius: 0.75rem;
+  }
+}
+```
+
+### Web Theme Adaptations
+
+**Desktop Enhancements**:
+```css
+@media (min-width: 1024px) {
+  :root {
+    --desktop-sidebar-width: 280px;
+    --desktop-content-max-width: 1200px;
+    --desktop-border-radius: 0.5rem;
+  }
+}
+```
+
+## Performance Optimizations
+
+### Lazy Loading of Translations
+
+**Dynamic Import Strategy**:
+```typescript
+const loadTranslations = async (language: string) => {
+  try {
+    const module = await import(`../locales/${language}/common.json`);
+    return module.default;
+  } catch (error) {
+    console.warn(`Failed to load translations for ${language}`);
+    return await import('../locales/en/common.json').then(m => m.default);
+  }
+};
+```
+
+### Theme Caching
+
+**Theme Persistence**:
+```typescript
+const THEME_CACHE_KEY = 'saafe-theme-cache';
+const THEME_CACHE_VERSION = '1.0';
+
+const cacheTheme = (theme: Theme, customStyles?: CustomStyling) => {
+  const cacheData = {
+    version: THEME_CACHE_VERSION,
+    theme,
+    customStyles,
+    timestamp: Date.now()
+  };
+  
+  localStorage.setItem(THEME_CACHE_KEY, JSON.stringify(cacheData));
+};
+
+const getCachedTheme = (): { theme: Theme; customStyles?: CustomStyling } | null => {
+  try {
+    const cached = localStorage.getItem(THEME_CACHE_KEY);
+    if (!cached) return null;
+    
+    const data = JSON.parse(cached);
+    if (data.version !== THEME_CACHE_VERSION) return null;
+    
+    return { theme: data.theme, customStyles: data.customStyles };
+  } catch {
+    return null;
+  }
+};
+```
+
+## Testing Strategy
+
+### Theme Testing
+
+**Theme Switch Testing**:
+```typescript
+describe('Theme System', () => {
+  test('switches between light and dark themes', () => {
+    render(<ThemeProvider><TestComponent /></ThemeProvider>);
+    
+    const toggleButton = screen.getByRole('button', { name: /toggle theme/i });
+    
+    // Test initial theme
+    expect(document.documentElement).not.toHaveClass('dark');
+    
+    // Switch to dark
+    fireEvent.click(toggleButton);
+    expect(document.documentElement).toHaveClass('dark');
+    
+    // Switch back to light
+    fireEvent.click(toggleButton);
+    expect(document.documentElement).not.toHaveClass('dark');
+  });
+});
+```
+
+### i18n Testing
+
+**Translation Testing**:
+```typescript
+describe('Internationalization', () => {
+  test('displays correct language text', () => {
+    render(
+      <I18nextProvider i18n={i18n}>
+        <TestComponent />
+      </I18nextProvider>
+    );
+    
+    expect(screen.getByText('Continue')).toBeInTheDocument();
+    
+    // Change language
+    act(() => {
+      i18n.changeLanguage('hi');
+    });
+    
+    expect(screen.getByText('जारी रखें')).toBeInTheDocument();
+  });
+});
+```
+
+### RTL Testing
+
+**RTL Layout Testing**:
+```typescript
+describe('RTL Support', () => {
+  test('applies RTL styles for RTL languages', () => {
+    render(
+      <RTLProvider>
+        <LanguageProvider>
+          <TestComponent />
+        </LanguageProvider>
+      </RTLProvider>
+    );
+    
+    // Switch to RTL language
+    act(() => {
+      i18n.changeLanguage('ur');
+    });
+    
+    expect(document.documentElement).toHaveAttribute('dir', 'rtl');
+    expect(document.documentElement).toHaveClass('rtl');
+  });
+});
+```
+
+## Configuration
+
+### Theme Configuration
+
+```typescript
+export const THEME_CONFIG = {
+  defaultTheme: 'system' as Theme,
+  storageKey: 'saafe-ui-theme',
+  enableSystemDetection: true,
+  enableCustomStyling: true,
+  supportedThemes: ['light', 'dark', 'system'] as Theme[],
+  transitionDuration: '0.3s',
+};
+```
+
+### i18n Configuration
+
+```typescript
+export const I18N_CONFIG = {
+  defaultLanguage: 'en',
+  fallbackLanguage: 'en',
+  supportedLanguages: SUPPORTED_LANGUAGES,
+  rtlLanguages: RTL_LANGUAGES,
+  storageKey: 'i18nextLng',
+  enableDebug: import.meta.env.DEV,
+  loadPath: '/locales/{{lng}}/{{ns}}.json',
+  interpolation: {
+    escapeValue: false,
+    formatSeparator: ',',
+  },
+};
+```
+
+## Future Enhancements
+
+### Planned Features
+
+1. **Advanced Theming**
+   - Multiple theme variants
+   - User-created themes
+   - Theme marketplace
+   - Animation themes
+
+2. **Enhanced i18n**
+   - Real-time translation updates
+   - Context-aware translations
+   - AI-powered translations
+   - Voice-based language switching
+
+3. **Accessibility Improvements**
+   - Better screen reader support
+   - Voice navigation
+   - Enhanced keyboard navigation
+   - Color-blind friendly themes
+
+4. **Performance Optimizations**
+   - Tree-shaking for unused translations
+   - Preloading strategies
+   - CDN-based theme delivery
+   - Runtime optimization
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Theme Not Applying**
+   - Check CSS variable definitions
+   - Verify theme provider wrapping
+   - Clear localStorage cache
+
+2. **Translation Missing**
+   - Verify translation key exists
+   - Check fallback language setup
+   - Validate JSON syntax
+
+3. **RTL Layout Issues**
+   - Use logical CSS properties
+   - Test with RTL browser tools
+   - Verify direction attribute
+
+### Debug Mode
+
+```typescript
+// Enable theme debugging
+localStorage.setItem('theme-debug', 'true');
+
+// Enable i18n debugging
+localStorage.setItem('i18n-debug', 'true');
+```
+
+## Conclusion
+
+The Theming and Internationalization module provides comprehensive support for creating accessible, multi-language, and visually adaptable applications. It ensures the SAAFE Redirection Flow can serve users across different regions, languages, and accessibility needs while maintaining a consistent and professional appearance.