# ET-SETTINGS-FRONTEND: Componentes React

## Identificacion

| Campo | Valor |
|-------|-------|
| **ID** | ET-SETTINGS-FRONTEND |
| **Modulo** | MGN-006 Settings |
| **Version** | 1.0 |
| **Estado** | En Diseno |
| **Framework** | React + TypeScript |
| **UI Library** | shadcn/ui |
| **State** | Zustand |
| **Autor** | Requirements-Analyst |
| **Fecha** | 2025-12-05 |

---

## Descripcion General

Especificacion tecnica del modulo frontend de Settings. Incluye paginas de configuracion del sistema, tenant, preferencias de usuario y gestion de feature flags con interfaces jerarquicas y validacion en tiempo real.

### Estructura de Archivos

```
apps/frontend/src/modules/settings/
├── index.ts
├── routes.tsx
├── pages/
│   ├── SettingsLayout.tsx
│   ├── SystemSettingsPage.tsx
│   ├── TenantSettingsPage.tsx
│   ├── UserPreferencesPage.tsx
│   ├── FeatureFlagsPage.tsx
│   └── SettingsOverviewPage.tsx
├── components/
│   ├── system/
│   │   ├── SystemSettingsForm.tsx
│   │   ├── SettingsCategoryNav.tsx
│   │   ├── SettingsSearch.tsx
│   │   └── SettingsResetConfirm.tsx
│   ├── tenant/
│   │   ├── TenantSettingsForm.tsx
│   │   ├── TenantBrandingSection.tsx
│   │   ├── TenantLocaleSection.tsx
│   │   └── TenantLimitsSection.tsx
│   ├── preferences/
│   │   ├── UserPreferencesForm.tsx
│   │   ├── ThemeSelector.tsx
│   │   ├── LocaleSelector.tsx
│   │   ├── NotificationPrefs.tsx
│   │   └── TimezoneSelector.tsx
│   ├── feature-flags/
│   │   ├── FeatureFlagList.tsx
│   │   ├── FeatureFlagForm.tsx
│   │   ├── FeatureFlagCard.tsx
│   │   ├── FeatureFlagToggle.tsx
│   │   ├── RolloutSlider.tsx
│   │   ├── VariantEditor.tsx
│   │   └── FeatureFlagHistory.tsx
│   └── shared/
│       ├── SettingItem.tsx
│       ├── SettingGroup.tsx
│       ├── SettingDescription.tsx
│       ├── SettingInput.tsx
│       └── SettingToggle.tsx
├── stores/
│   ├── system-settings.store.ts
│   ├── tenant-settings.store.ts
│   ├── user-preferences.store.ts
│   └── feature-flags.store.ts
├── hooks/
│   ├── useSystemSettings.ts
│   ├── useTenantSettings.ts
│   ├── useUserPreferences.ts
│   ├── useFeatureFlag.ts
│   └── useEffectiveSetting.ts
├── services/
│   ├── system-settings.service.ts
│   ├── tenant-settings.service.ts
│   ├── user-preferences.service.ts
│   └── feature-flags.service.ts
└── types/
    ├── system-settings.types.ts
    ├── tenant-settings.types.ts
    ├── user-preferences.types.ts
    └── feature-flag.types.ts
```

---

## Types

### System Settings Types

```typescript
// types/system-settings.types.ts

export type SettingDataType = 'string' | 'integer' | 'boolean' | 'json' | 'decimal';

export interface SystemSettingDefinition {
  id: string;
  key: string;
  category: string;
  label: string;
  description?: string;
  dataType: SettingDataType;
  defaultValue: string;
  validationRules?: ValidationRule[];
  options?: SettingOption[];
  isEncrypted: boolean;
  requiresRestart: boolean;
}

export interface SystemSettingValue {
  id: string;
  definitionId: string;
  definition?: SystemSettingDefinition;
  value: string;
  level: 'system' | 'plan' | 'tenant';
  levelId?: string;
  createdAt: string;
  updatedAt: string;
}

export interface SettingOption {
  value: string;
  label: string;
}

export interface ValidationRule {
  type: 'min' | 'max' | 'regex' | 'enum';
  value: string | number;
  message: string;
}

export interface SettingCategory {
  key: string;
  label: string;
  icon: string;
  order: number;
  settings: SystemSettingDefinition[];
}

export interface UpdateSettingDto {
  value: string;
}

export interface SettingsFilters {
  category?: string;
  search?: string;
  level?: 'system' | 'plan' | 'tenant';
}
```

### Tenant Settings Types

```typescript
// types/tenant-settings.types.ts

export interface TenantSettings {
  id: string;
  tenantId: string;

  // Branding
  companyName: string;
  legalName?: string;
  logo?: string;
  favicon?: string;
  primaryColor: string;
  secondaryColor?: string;

  // Locale
  defaultLocale: string;
  timezone: string;
  dateFormat: string;
  timeFormat: string;
  currencyId: string;

  // Business
  fiscalYearStart: number; // 1-12
  weekStart: number; // 0-6

  // Limits
  maxUsers?: number;
  maxStorage?: number; // MB
  features: string[];

  // Contact
  supportEmail?: string;
  website?: string;

  createdAt: string;
  updatedAt: string;
}

export interface UpdateTenantSettingsDto {
  companyName?: string;
  legalName?: string;
  logo?: string;
  primaryColor?: string;
  secondaryColor?: string;
  defaultLocale?: string;
  timezone?: string;
  dateFormat?: string;
  timeFormat?: string;
  currencyId?: string;
  fiscalYearStart?: number;
  weekStart?: number;
  supportEmail?: string;
  website?: string;
}

export interface BrandingPreview {
  primaryColor: string;
  secondaryColor: string;
  logo?: string;
}
```

### User Preferences Types

```typescript
// types/user-preferences.types.ts

export type ThemeMode = 'light' | 'dark' | 'system';

export interface UserPreferences {
  id: string;
  userId: string;

  // UI
  theme: ThemeMode;
  locale: string;
  timezone: string;
  dateFormat?: string;
  timeFormat?: string;
  density: 'compact' | 'normal' | 'comfortable';

  // Notifications
  emailNotifications: boolean;
  pushNotifications: boolean;
  inAppNotifications: boolean;
  digestFrequency: 'realtime' | 'daily' | 'weekly' | 'never';
  notificationCategories: Record<string, boolean>;

  // Navigation
  sidebarCollapsed: boolean;
  defaultLandingPage?: string;
  recentItems: string[];

  // Accessibility
  highContrast: boolean;
  reducedMotion: boolean;
  fontSize: 'small' | 'medium' | 'large';

  createdAt: string;
  updatedAt: string;
}

export interface UpdateUserPreferencesDto {
  theme?: ThemeMode;
  locale?: string;
  timezone?: string;
  dateFormat?: string;
  timeFormat?: string;
  density?: 'compact' | 'normal' | 'comfortable';
  emailNotifications?: boolean;
  pushNotifications?: boolean;
  inAppNotifications?: boolean;
  digestFrequency?: 'realtime' | 'daily' | 'weekly' | 'never';
  notificationCategories?: Record<string, boolean>;
  sidebarCollapsed?: boolean;
  defaultLandingPage?: string;
  highContrast?: boolean;
  reducedMotion?: boolean;
  fontSize?: 'small' | 'medium' | 'large';
}
```

### Feature Flag Types

```typescript
// types/feature-flag.types.ts

export type FlagType = 'boolean' | 'percentage' | 'variant';
export type FlagStatus = 'active' | 'inactive' | 'scheduled';

export interface FeatureFlag {
  id: string;
  key: string;
  name: string;
  description?: string;
  flagType: FlagType;
  status: FlagStatus;

  // Boolean
  enabled?: boolean;

  // Percentage (rollout)
  percentage?: number;

  // Variant (A/B)
  variants?: FlagVariant[];

  // Targeting
  tenantIds?: string[];
  userIds?: string[];
  planIds?: string[];
  rules?: FlagRule[];

  // Scheduling
  startDate?: string;
  endDate?: string;

  // Metadata
  tags?: string[];
  createdBy: string;
  createdAt: string;
  updatedAt: string;
}

export interface FlagVariant {
  key: string;
  name: string;
  weight: number; // 0-100, suma = 100
  payload?: Record<string, any>;
}

export interface FlagRule {
  id: string;
  attribute: string; // 'userId', 'tenantId', 'plan', 'country', etc
  operator: 'equals' | 'contains' | 'startsWith' | 'in' | 'notIn';
  value: string | string[];
  enabled: boolean;
}

export interface CreateFeatureFlagDto {
  key: string;
  name: string;
  description?: string;
  flagType: FlagType;
  enabled?: boolean;
  percentage?: number;
  variants?: FlagVariant[];
}

export interface UpdateFeatureFlagDto {
  name?: string;
  description?: string;
  status?: FlagStatus;
  enabled?: boolean;
  percentage?: number;
  variants?: FlagVariant[];
  tenantIds?: string[];
  userIds?: string[];
  planIds?: string[];
  rules?: FlagRule[];
  startDate?: string;
  endDate?: string;
  tags?: string[];
}

export interface FlagEvaluation {
  flagKey: string;
  enabled: boolean;
  variant?: string;
  payload?: Record<string, any>;
  reason: 'default' | 'targeting' | 'rollout' | 'scheduled' | 'disabled';
}

export interface FlagHistory {
  id: string;
  flagId: string;
  action: 'created' | 'updated' | 'enabled' | 'disabled';
  changes: Record<string, { old: any; new: any }>;
  userId: string;
  userName: string;
  createdAt: string;
}
```

---

## Stores (Zustand)

### User Preferences Store

```typescript
// stores/user-preferences.store.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import { UserPreferences, UpdateUserPreferencesDto, ThemeMode } from '../types/user-preferences.types';
import { userPreferencesService } from '../services/user-preferences.service';

interface UserPreferencesState {
  preferences: UserPreferences | null;
  isLoading: boolean;
  error: string | null;

  // Computed
  effectiveTheme: 'light' | 'dark';

  // Actions
  fetchPreferences: () => Promise<void>;
  updatePreferences: (dto: UpdateUserPreferencesDto) => Promise<void>;
  setTheme: (theme: ThemeMode) => Promise<void>;
  setLocale: (locale: string) => Promise<void>;
  toggleSidebar: () => Promise<void>;
  resetPreferences: () => Promise<void>;
}

export const useUserPreferencesStore = create<UserPreferencesState>()(
  persist(
    (set, get) => ({
      preferences: null,
      isLoading: false,
      error: null,
      effectiveTheme: 'light',

      fetchPreferences: async () => {
        set({ isLoading: true, error: null });
        try {
          const preferences = await userPreferencesService.get();
          const effectiveTheme = resolveTheme(preferences.theme);
          set({ preferences, effectiveTheme, isLoading: false });
          applyTheme(effectiveTheme);
          applyAccessibility(preferences);
        } catch (error: any) {
          set({ error: error.message, isLoading: false });
        }
      },

      updatePreferences: async (dto: UpdateUserPreferencesDto) => {
        const current = get().preferences;
        if (!current) return;

        // Optimistic update
        set({
          preferences: { ...current, ...dto },
          error: null
        });

        try {
          const updated = await userPreferencesService.update(dto);
          const effectiveTheme = resolveTheme(updated.theme);
          set({ preferences: updated, effectiveTheme });

          if (dto.theme) applyTheme(effectiveTheme);
          if (dto.highContrast !== undefined || dto.reducedMotion !== undefined || dto.fontSize) {
            applyAccessibility(updated);
          }
        } catch (error: any) {
          // Revert on error
          set({ preferences: current, error: error.message });
          throw error;
        }
      },

      setTheme: async (theme: ThemeMode) => {
        await get().updatePreferences({ theme });
      },

      setLocale: async (locale: string) => {
        await get().updatePreferences({ locale });
      },

      toggleSidebar: async () => {
        const current = get().preferences;
        if (!current) return;
        await get().updatePreferences({
          sidebarCollapsed: !current.sidebarCollapsed
        });
      },

      resetPreferences: async () => {
        set({ isLoading: true });
        try {
          const preferences = await userPreferencesService.reset();
          const effectiveTheme = resolveTheme(preferences.theme);
          set({ preferences, effectiveTheme, isLoading: false });
          applyTheme(effectiveTheme);
        } catch (error: any) {
          set({ error: error.message, isLoading: false });
        }
      },
    }),
    {
      name: 'user-preferences',
      partialize: (state) => ({
        preferences: state.preferences,
        effectiveTheme: state.effectiveTheme,
      }),
    }
  )
);

function resolveTheme(theme: ThemeMode): 'light' | 'dark' {
  if (theme === 'system') {
    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  }
  return theme;
}

function applyTheme(theme: 'light' | 'dark') {
  document.documentElement.classList.remove('light', 'dark');
  document.documentElement.classList.add(theme);
}

function applyAccessibility(prefs: UserPreferences) {
  document.documentElement.classList.toggle('high-contrast', prefs.highContrast);
  document.documentElement.classList.toggle('reduce-motion', prefs.reducedMotion);
  document.documentElement.setAttribute('data-font-size', prefs.fontSize);
}
```

### Feature Flags Store

```typescript
// stores/feature-flags.store.ts
import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
import { FeatureFlag, CreateFeatureFlagDto, UpdateFeatureFlagDto, FlagEvaluation } from '../types/feature-flag.types';
import { featureFlagsService } from '../services/feature-flags.service';

interface FeatureFlagsState {
  flags: FeatureFlag[];
  evaluations: Record<string, FlagEvaluation>;
  isLoading: boolean;
  error: string | null;

  // Actions
  fetchFlags: () => Promise<void>;
  createFlag: (dto: CreateFeatureFlagDto) => Promise<FeatureFlag>;
  updateFlag: (id: string, dto: UpdateFeatureFlagDto) => Promise<FeatureFlag>;
  deleteFlag: (id: string) => Promise<void>;
  toggleFlag: (id: string) => Promise<void>;
  evaluateFlag: (key: string) => Promise<FlagEvaluation>;
  evaluateAllFlags: () => Promise<void>;

  // Helpers
  isEnabled: (key: string) => boolean;
  getVariant: (key: string) => string | undefined;
}

export const useFeatureFlagsStore = create<FeatureFlagsState>()(
  devtools(
    (set, get) => ({
      flags: [],
      evaluations: {},
      isLoading: false,
      error: null,

      fetchFlags: async () => {
        set({ isLoading: true, error: null });
        try {
          const flags = await featureFlagsService.getAll();
          set({ flags, isLoading: false });
        } catch (error: any) {
          set({ error: error.message, isLoading: false });
        }
      },

      createFlag: async (dto: CreateFeatureFlagDto) => {
        set({ isLoading: true, error: null });
        try {
          const flag = await featureFlagsService.create(dto);
          set((state) => ({
            flags: [...state.flags, flag],
            isLoading: false,
          }));
          return flag;
        } catch (error: any) {
          set({ error: error.message, isLoading: false });
          throw error;
        }
      },

      updateFlag: async (id: string, dto: UpdateFeatureFlagDto) => {
        set({ isLoading: true, error: null });
        try {
          const flag = await featureFlagsService.update(id, dto);
          set((state) => ({
            flags: state.flags.map((f) => (f.id === id ? flag : f)),
            isLoading: false,
          }));
          return flag;
        } catch (error: any) {
          set({ error: error.message, isLoading: false });
          throw error;
        }
      },

      deleteFlag: async (id: string) => {
        set({ isLoading: true, error: null });
        try {
          await featureFlagsService.delete(id);
          set((state) => ({
            flags: state.flags.filter((f) => f.id !== id),
            isLoading: false,
          }));
        } catch (error: any) {
          set({ error: error.message, isLoading: false });
          throw error;
        }
      },

      toggleFlag: async (id: string) => {
        const flag = get().flags.find((f) => f.id === id);
        if (!flag) return;

        await get().updateFlag(id, { enabled: !flag.enabled });
      },

      evaluateFlag: async (key: string) => {
        try {
          const evaluation = await featureFlagsService.evaluate(key);
          set((state) => ({
            evaluations: { ...state.evaluations, [key]: evaluation },
          }));
          return evaluation;
        } catch (error: any) {
          // Return disabled on error
          return { flagKey: key, enabled: false, reason: 'disabled' as const };
        }
      },

      evaluateAllFlags: async () => {
        try {
          const evaluations = await featureFlagsService.evaluateAll();
          const evaluationsMap: Record<string, FlagEvaluation> = {};
          evaluations.forEach((e) => {
            evaluationsMap[e.flagKey] = e;
          });
          set({ evaluations: evaluationsMap });
        } catch (error: any) {
          console.error('Failed to evaluate flags:', error);
        }
      },

      isEnabled: (key: string) => {
        const evaluation = get().evaluations[key];
        return evaluation?.enabled ?? false;
      },

      getVariant: (key: string) => {
        const evaluation = get().evaluations[key];
        return evaluation?.variant;
      },
    }),
    { name: 'feature-flags-store' }
  )
);
```

---

## Custom Hooks

### useFeatureFlag

```typescript
// hooks/useFeatureFlag.ts
import { useEffect, useState } from 'react';
import { useFeatureFlagsStore } from '../stores/feature-flags.store';

export interface UseFeatureFlagOptions {
  fallback?: boolean;
}

export function useFeatureFlag(
  key: string,
  options: UseFeatureFlagOptions = {}
): boolean {
  const { evaluations, evaluateFlag, isEnabled } = useFeatureFlagsStore();
  const [loading, setLoading] = useState(!evaluations[key]);

  useEffect(() => {
    if (!evaluations[key]) {
      setLoading(true);
      evaluateFlag(key).finally(() => setLoading(false));
    }
  }, [key, evaluations, evaluateFlag]);

  if (loading) {
    return options.fallback ?? false;
  }

  return isEnabled(key);
}

export function useFeatureFlagVariant(key: string): {
  enabled: boolean;
  variant?: string;
  payload?: Record<string, any>;
  loading: boolean;
} {
  const { evaluations, evaluateFlag } = useFeatureFlagsStore();
  const [loading, setLoading] = useState(!evaluations[key]);

  useEffect(() => {
    if (!evaluations[key]) {
      setLoading(true);
      evaluateFlag(key).finally(() => setLoading(false));
    }
  }, [key, evaluations, evaluateFlag]);

  const evaluation = evaluations[key];

  return {
    enabled: evaluation?.enabled ?? false,
    variant: evaluation?.variant,
    payload: evaluation?.payload,
    loading,
  };
}
```

### useEffectiveSetting

```typescript
// hooks/useEffectiveSetting.ts
import { useMemo } from 'react';
import { useSystemSettingsStore } from '../stores/system-settings.store';
import { useTenantSettingsStore } from '../stores/tenant-settings.store';
import { useUserPreferencesStore } from '../stores/user-preferences.store';

/**
 * Resuelve el valor efectivo de una configuracion
 * considerando la jerarquia: user > tenant > plan > system
 */
export function useEffectiveSetting<T>(
  key: string,
  options?: {
    userOverride?: T;
    tenantOverride?: T;
    defaultValue?: T;
  }
): T | undefined {
  const { getSystemValue } = useSystemSettingsStore();
  const { settings: tenantSettings } = useTenantSettingsStore();
  const { preferences } = useUserPreferencesStore();

  return useMemo(() => {
    // 1. Check user preference override
    if (options?.userOverride !== undefined) {
      return options.userOverride;
    }

    // 2. Check user preferences
    const userValue = preferences?.[key as keyof typeof preferences];
    if (userValue !== undefined) {
      return userValue as T;
    }

    // 3. Check tenant override
    if (options?.tenantOverride !== undefined) {
      return options.tenantOverride;
    }

    // 4. Check tenant settings
    const tenantValue = tenantSettings?.[key as keyof typeof tenantSettings];
    if (tenantValue !== undefined) {
      return tenantValue as T;
    }

    // 5. Check system setting
    const systemValue = getSystemValue(key);
    if (systemValue !== undefined) {
      return systemValue as T;
    }

    // 6. Return default
    return options?.defaultValue;
  }, [key, preferences, tenantSettings, getSystemValue, options]);
}
```

---

## Components

### ThemeSelector

```tsx
// components/preferences/ThemeSelector.tsx
import { Moon, Sun, Monitor } from 'lucide-react';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Label } from '@/components/ui/label';
import { Card, CardContent } from '@/components/ui/card';
import { ThemeMode } from '../../types/user-preferences.types';
import { cn } from '@/lib/utils';

interface ThemeSelectorProps {
  value: ThemeMode;
  onChange: (theme: ThemeMode) => void;
}

const themes: { value: ThemeMode; label: string; icon: any; description: string }[] = [
  {
    value: 'light',
    label: 'Claro',
    icon: Sun,
    description: 'Tema claro para uso diurno',
  },
  {
    value: 'dark',
    label: 'Oscuro',
    icon: Moon,
    description: 'Tema oscuro para reducir fatiga visual',
  },
  {
    value: 'system',
    label: 'Sistema',
    icon: Monitor,
    description: 'Sigue la preferencia del sistema operativo',
  },
];

export function ThemeSelector({ value, onChange }: ThemeSelectorProps) {
  return (
    <RadioGroup
      value={value}
      onValueChange={onChange}
      className="grid grid-cols-3 gap-4"
    >
      {themes.map((theme) => {
        const Icon = theme.icon;
        const isSelected = value === theme.value;

        return (
          <Label key={theme.value} htmlFor={theme.value} className="cursor-pointer">
            <Card
              className={cn(
                'transition-colors hover:bg-muted/50',
                isSelected && 'border-primary bg-primary/5'
              )}
            >
              <CardContent className="flex flex-col items-center p-6">
                <RadioGroupItem
                  value={theme.value}
                  id={theme.value}
                  className="sr-only"
                />
                <Icon
                  className={cn(
                    'h-8 w-8 mb-2',
                    isSelected ? 'text-primary' : 'text-muted-foreground'
                  )}
                />
                <span className="font-medium">{theme.label}</span>
                <span className="text-xs text-muted-foreground text-center mt-1">
                  {theme.description}
                </span>
              </CardContent>
            </Card>
          </Label>
        );
      })}
    </RadioGroup>
  );
}
```

### FeatureFlagCard

```tsx
// components/feature-flags/FeatureFlagCard.tsx
import { Clock, Users, Percent, ToggleLeft, ToggleRight, Layers } from 'lucide-react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Switch } from '@/components/ui/switch';
import { Button } from '@/components/ui/button';
import { Progress } from '@/components/ui/progress';
import { FeatureFlag, FlagType } from '../../types/feature-flag.types';
import { cn } from '@/lib/utils';
import { formatDistanceToNow } from 'date-fns';
import { es } from 'date-fns/locale';

interface FeatureFlagCardProps {
  flag: FeatureFlag;
  onToggle: (id: string) => void;
  onEdit: (flag: FeatureFlag) => void;
}

const flagTypeConfig: Record<FlagType, { icon: any; label: string; color: string }> = {
  boolean: { icon: ToggleLeft, label: 'Boolean', color: 'bg-blue-500' },
  percentage: { icon: Percent, label: 'Rollout', color: 'bg-amber-500' },
  variant: { icon: Layers, label: 'Variante', color: 'bg-purple-500' },
};

export function FeatureFlagCard({ flag, onToggle, onEdit }: FeatureFlagCardProps) {
  const config = flagTypeConfig[flag.flagType];
  const Icon = config.icon;

  const isScheduled = flag.startDate || flag.endDate;
  const hasTargeting = (flag.tenantIds?.length ?? 0) > 0 ||
                       (flag.userIds?.length ?? 0) > 0 ||
                       (flag.planIds?.length ?? 0) > 0;

  return (
    <Card className="hover:shadow-md transition-shadow">
      <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-2">
        <div className="space-y-1">
          <div className="flex items-center gap-2">
            <Badge variant="secondary" className={cn('text-white', config.color)}>
              <Icon className="h-3 w-3 mr-1" />
              {config.label}
            </Badge>
            {flag.status === 'scheduled' && (
              <Badge variant="outline" className="text-amber-600">
                <Clock className="h-3 w-3 mr-1" />
                Programado
              </Badge>
            )}
          </div>
          <CardTitle className="text-lg font-semibold">
            {flag.name}
          </CardTitle>
          <code className="text-sm text-muted-foreground">
            {flag.key}
          </code>
        </div>

        <Switch
          checked={flag.enabled ?? false}
          onCheckedChange={() => onToggle(flag.id)}
          disabled={flag.status === 'scheduled'}
        />
      </CardHeader>

      <CardContent className="space-y-4">
        {flag.description && (
          <p className="text-sm text-muted-foreground">
            {flag.description}
          </p>
        )}

        {/* Rollout Progress */}
        {flag.flagType === 'percentage' && flag.percentage !== undefined && (
          <div className="space-y-2">
            <div className="flex justify-between text-sm">
              <span>Rollout</span>
              <span className="font-medium">{flag.percentage}%</span>
            </div>
            <Progress value={flag.percentage} className="h-2" />
          </div>
        )}

        {/* Variants */}
        {flag.flagType === 'variant' && flag.variants && (
          <div className="space-y-2">
            <span className="text-sm font-medium">Variantes:</span>
            <div className="flex flex-wrap gap-2">
              {flag.variants.map((variant) => (
                <Badge key={variant.key} variant="outline">
                  {variant.name} ({variant.weight}%)
                </Badge>
              ))}
            </div>
          </div>
        )}

        {/* Targeting */}
        {hasTargeting && (
          <div className="flex items-center gap-2 text-sm text-muted-foreground">
            <Users className="h-4 w-4" />
            <span>
              {[
                flag.tenantIds?.length && `${flag.tenantIds.length} tenants`,
                flag.userIds?.length && `${flag.userIds.length} usuarios`,
                flag.planIds?.length && `${flag.planIds.length} planes`,
              ]
                .filter(Boolean)
                .join(', ')}
            </span>
          </div>
        )}

        {/* Tags */}
        {flag.tags && flag.tags.length > 0 && (
          <div className="flex flex-wrap gap-1">
            {flag.tags.map((tag) => (
              <Badge key={tag} variant="secondary" className="text-xs">
                {tag}
              </Badge>
            ))}
          </div>
        )}

        {/* Footer */}
        <div className="flex items-center justify-between pt-2 border-t">
          <span className="text-xs text-muted-foreground">
            Actualizado {formatDistanceToNow(new Date(flag.updatedAt), {
              addSuffix: true,
              locale: es,
            })}
          </span>
          <Button variant="ghost" size="sm" onClick={() => onEdit(flag)}>
            Editar
          </Button>
        </div>
      </CardContent>
    </Card>
  );
}
```

### RolloutSlider

```tsx
// components/feature-flags/RolloutSlider.tsx
import { useState, useEffect } from 'react';
import { Slider } from '@/components/ui/slider';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { cn } from '@/lib/utils';

interface RolloutSliderProps {
  value: number;
  onChange: (value: number) => void;
  disabled?: boolean;
}

export function RolloutSlider({ value, onChange, disabled }: RolloutSliderProps) {
  const [localValue, setLocalValue] = useState(value);

  useEffect(() => {
    setLocalValue(value);
  }, [value]);

  const handleSliderChange = (values: number[]) => {
    const newValue = values[0];
    setLocalValue(newValue);
    onChange(newValue);
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = Math.min(100, Math.max(0, parseInt(e.target.value) || 0));
    setLocalValue(newValue);
    onChange(newValue);
  };

  const getColor = (percent: number) => {
    if (percent === 0) return 'bg-gray-200';
    if (percent < 25) return 'bg-red-500';
    if (percent < 50) return 'bg-orange-500';
    if (percent < 75) return 'bg-yellow-500';
    if (percent < 100) return 'bg-blue-500';
    return 'bg-green-500';
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center gap-4">
        <div className="flex-1">
          <Slider
            value={[localValue]}
            onValueChange={handleSliderChange}
            max={100}
            step={1}
            disabled={disabled}
            className={cn('cursor-pointer', disabled && 'opacity-50')}
          />
        </div>
        <div className="w-20">
          <Input
            type="number"
            min={0}
            max={100}
            value={localValue}
            onChange={handleInputChange}
            disabled={disabled}
            className="text-center"
          />
        </div>
        <span className="text-sm text-muted-foreground">%</span>
      </div>

      {/* Visual indicator */}
      <div className="relative h-8 bg-muted rounded-md overflow-hidden">
        <div
          className={cn('h-full transition-all duration-300', getColor(localValue))}
          style={{ width: `${localValue}%` }}
        />
        <div className="absolute inset-0 flex items-center justify-center text-sm font-medium">
          {localValue === 0 && 'Desactivado'}
          {localValue > 0 && localValue < 100 && `${localValue}% de usuarios`}
          {localValue === 100 && 'Todos los usuarios'}
        </div>
      </div>

      {/* Quick buttons */}
      <div className="flex gap-2">
        {[0, 10, 25, 50, 75, 100].map((percent) => (
          <button
            key={percent}
            type="button"
            onClick={() => {
              setLocalValue(percent);
              onChange(percent);
            }}
            disabled={disabled}
            className={cn(
              'px-3 py-1 text-sm rounded-md border transition-colors',
              localValue === percent
                ? 'bg-primary text-primary-foreground border-primary'
                : 'hover:bg-muted',
              disabled && 'opacity-50 cursor-not-allowed'
            )}
          >
            {percent}%
          </button>
        ))}
      </div>
    </div>
  );
}
```

### SettingItem

```tsx
// components/shared/SettingItem.tsx
import { ReactNode } from 'react';
import { Info } from 'lucide-react';
import { Label } from '@/components/ui/label';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';
import { Badge } from '@/components/ui/badge';
import { cn } from '@/lib/utils';

interface SettingItemProps {
  label: string;
  description?: string;
  children: ReactNode;
  badge?: string;
  badgeVariant?: 'default' | 'secondary' | 'destructive' | 'outline';
  required?: boolean;
  disabled?: boolean;
  className?: string;
}

export function SettingItem({
  label,
  description,
  children,
  badge,
  badgeVariant = 'secondary',
  required,
  disabled,
  className,
}: SettingItemProps) {
  return (
    <div
      className={cn(
        'flex items-start justify-between py-4 border-b last:border-b-0',
        disabled && 'opacity-50',
        className
      )}
    >
      <div className="space-y-1 flex-1 mr-4">
        <div className="flex items-center gap-2">
          <Label className="font-medium">
            {label}
            {required && <span className="text-destructive ml-1">*</span>}
          </Label>
          {badge && (
            <Badge variant={badgeVariant} className="text-xs">
              {badge}
            </Badge>
          )}
        </div>
        {description && (
          <p className="text-sm text-muted-foreground">
            {description}
          </p>
        )}
      </div>
      <div className="flex-shrink-0 w-64">
        {children}
      </div>
    </div>
  );
}
```

---

## Pages

### UserPreferencesPage

```tsx
// pages/UserPreferencesPage.tsx
import { useEffect } from 'react';
import { Loader2 } from 'lucide-react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { Switch } from '@/components/ui/switch';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { ThemeSelector } from '../components/preferences/ThemeSelector';
import { LocaleSelector } from '../components/preferences/LocaleSelector';
import { TimezoneSelector } from '../components/preferences/TimezoneSelector';
import { NotificationPrefs } from '../components/preferences/NotificationPrefs';
import { SettingItem } from '../components/shared/SettingItem';
import { useUserPreferencesStore } from '../stores/user-preferences.store';
import { toast } from 'sonner';

export function UserPreferencesPage() {
  const {
    preferences,
    isLoading,
    fetchPreferences,
    updatePreferences,
    resetPreferences,
  } = useUserPreferencesStore();

  useEffect(() => {
    fetchPreferences();
  }, [fetchPreferences]);

  const handleUpdate = async (updates: Partial<typeof preferences>) => {
    try {
      await updatePreferences(updates);
      toast.success('Preferencias actualizadas');
    } catch (error) {
      toast.error('Error al actualizar preferencias');
    }
  };

  const handleReset = async () => {
    if (confirm('¿Restaurar todas las preferencias a valores predeterminados?')) {
      await resetPreferences();
      toast.success('Preferencias restauradas');
    }
  };

  if (isLoading && !preferences) {
    return (
      <div className="flex items-center justify-center h-64">
        <Loader2 className="h-8 w-8 animate-spin" />
      </div>
    );
  }

  if (!preferences) return null;

  return (
    <div className="container max-w-4xl mx-auto py-6 space-y-8">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">Preferencias</h1>
          <p className="text-muted-foreground">
            Personaliza tu experiencia en la aplicacion
          </p>
        </div>
        <Button variant="outline" onClick={handleReset}>
          Restaurar Predeterminados
        </Button>
      </div>

      {/* Apariencia */}
      <Card>
        <CardHeader>
          <CardTitle>Apariencia</CardTitle>
          <CardDescription>
            Personaliza el aspecto visual de la aplicacion
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          <div>
            <h4 className="text-sm font-medium mb-4">Tema</h4>
            <ThemeSelector
              value={preferences.theme}
              onChange={(theme) => handleUpdate({ theme })}
            />
          </div>

          <Separator />

          <SettingItem
            label="Densidad de Contenido"
            description="Ajusta el espaciado de los elementos"
          >
            <Select
              value={preferences.density}
              onValueChange={(density: any) => handleUpdate({ density })}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="compact">Compacto</SelectItem>
                <SelectItem value="normal">Normal</SelectItem>
                <SelectItem value="comfortable">Espacioso</SelectItem>
              </SelectContent>
            </Select>
          </SettingItem>

          <SettingItem
            label="Barra Lateral Colapsada"
            description="Inicia con la barra lateral minimizada"
          >
            <Switch
              checked={preferences.sidebarCollapsed}
              onCheckedChange={(sidebarCollapsed) => handleUpdate({ sidebarCollapsed })}
            />
          </SettingItem>
        </CardContent>
      </Card>

      {/* Regional */}
      <Card>
        <CardHeader>
          <CardTitle>Regional</CardTitle>
          <CardDescription>
            Configura idioma, zona horaria y formatos
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <SettingItem label="Idioma" description="Idioma de la interfaz">
            <LocaleSelector
              value={preferences.locale}
              onChange={(locale) => handleUpdate({ locale })}
            />
          </SettingItem>

          <SettingItem label="Zona Horaria" description="Tu zona horaria local">
            <TimezoneSelector
              value={preferences.timezone}
              onChange={(timezone) => handleUpdate({ timezone })}
            />
          </SettingItem>

          <SettingItem label="Formato de Fecha" description="Como se muestran las fechas">
            <Select
              value={preferences.dateFormat ?? 'DD/MM/YYYY'}
              onValueChange={(dateFormat) => handleUpdate({ dateFormat })}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="DD/MM/YYYY">31/12/2025</SelectItem>
                <SelectItem value="MM/DD/YYYY">12/31/2025</SelectItem>
                <SelectItem value="YYYY-MM-DD">2025-12-31</SelectItem>
              </SelectContent>
            </Select>
          </SettingItem>
        </CardContent>
      </Card>

      {/* Notificaciones */}
      <Card>
        <CardHeader>
          <CardTitle>Notificaciones</CardTitle>
          <CardDescription>
            Controla como y cuando recibes notificaciones
          </CardDescription>
        </CardHeader>
        <CardContent>
          <NotificationPrefs
            preferences={preferences}
            onUpdate={handleUpdate}
          />
        </CardContent>
      </Card>

      {/* Accesibilidad */}
      <Card>
        <CardHeader>
          <CardTitle>Accesibilidad</CardTitle>
          <CardDescription>
            Opciones para mejorar la accesibilidad
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <SettingItem
            label="Alto Contraste"
            description="Aumenta el contraste de colores"
          >
            <Switch
              checked={preferences.highContrast}
              onCheckedChange={(highContrast) => handleUpdate({ highContrast })}
            />
          </SettingItem>

          <SettingItem
            label="Reducir Movimiento"
            description="Minimiza animaciones y transiciones"
          >
            <Switch
              checked={preferences.reducedMotion}
              onCheckedChange={(reducedMotion) => handleUpdate({ reducedMotion })}
            />
          </SettingItem>

          <SettingItem
            label="Tamano de Fuente"
            description="Ajusta el tamano del texto"
          >
            <Select
              value={preferences.fontSize}
              onValueChange={(fontSize: any) => handleUpdate({ fontSize })}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="small">Pequeno</SelectItem>
                <SelectItem value="medium">Mediano</SelectItem>
                <SelectItem value="large">Grande</SelectItem>
              </SelectContent>
            </Select>
          </SettingItem>
        </CardContent>
      </Card>
    </div>
  );
}
```

### FeatureFlagsPage

```tsx
// pages/FeatureFlagsPage.tsx
import { useEffect, useState } from 'react';
import { Plus, Search, Filter } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { FeatureFlagCard } from '../components/feature-flags/FeatureFlagCard';
import { FeatureFlagForm } from '../components/feature-flags/FeatureFlagForm';
import { useFeatureFlagsStore } from '../stores/feature-flags.store';
import { FeatureFlag, FlagType } from '../types/feature-flag.types';

export function FeatureFlagsPage() {
  const {
    flags,
    isLoading,
    fetchFlags,
    createFlag,
    updateFlag,
    toggleFlag,
  } = useFeatureFlagsStore();

  const [search, setSearch] = useState('');
  const [typeFilter, setTypeFilter] = useState<FlagType | 'all'>('all');
  const [statusFilter, setStatusFilter] = useState<'all' | 'active' | 'inactive'>('all');
  const [isFormOpen, setIsFormOpen] = useState(false);
  const [editingFlag, setEditingFlag] = useState<FeatureFlag | null>(null);

  useEffect(() => {
    fetchFlags();
  }, [fetchFlags]);

  const filteredFlags = flags.filter((flag) => {
    const matchesSearch =
      flag.name.toLowerCase().includes(search.toLowerCase()) ||
      flag.key.toLowerCase().includes(search.toLowerCase());
    const matchesType = typeFilter === 'all' || flag.flagType === typeFilter;
    const matchesStatus =
      statusFilter === 'all' ||
      (statusFilter === 'active' && flag.enabled) ||
      (statusFilter === 'inactive' && !flag.enabled);

    return matchesSearch && matchesType && matchesStatus;
  });

  const handleEdit = (flag: FeatureFlag) => {
    setEditingFlag(flag);
    setIsFormOpen(true);
  };

  const handleClose = () => {
    setIsFormOpen(false);
    setEditingFlag(null);
  };

  // Stats
  const activeCount = flags.filter((f) => f.enabled).length;
  const booleanCount = flags.filter((f) => f.flagType === 'boolean').length;
  const rolloutCount = flags.filter((f) => f.flagType === 'percentage').length;
  const variantCount = flags.filter((f) => f.flagType === 'variant').length;

  return (
    <div className="container mx-auto py-6 space-y-6">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold">Feature Flags</h1>
          <p className="text-muted-foreground">
            Gestiona funcionalidades y experimentos
          </p>
        </div>
        <Button onClick={() => setIsFormOpen(true)}>
          <Plus className="mr-2 h-4 w-4" />
          Nueva Feature Flag
        </Button>
      </div>

      {/* Stats */}
      <div className="grid grid-cols-4 gap-4">
        <Card>
          <CardContent className="pt-6">
            <div className="text-2xl font-bold">{flags.length}</div>
            <p className="text-sm text-muted-foreground">Total Flags</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="text-2xl font-bold text-green-600">{activeCount}</div>
            <p className="text-sm text-muted-foreground">Activas</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="text-2xl font-bold text-amber-600">{rolloutCount}</div>
            <p className="text-sm text-muted-foreground">En Rollout</p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="pt-6">
            <div className="text-2xl font-bold text-purple-600">{variantCount}</div>
            <p className="text-sm text-muted-foreground">Con Variantes</p>
          </CardContent>
        </Card>
      </div>

      {/* Filters */}
      <Card>
        <CardContent className="pt-6">
          <div className="flex items-center gap-4">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Buscar por nombre o clave..."
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                className="pl-10"
              />
            </div>

            <Select value={typeFilter} onValueChange={(v: any) => setTypeFilter(v)}>
              <SelectTrigger className="w-40">
                <SelectValue placeholder="Tipo" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Todos los tipos</SelectItem>
                <SelectItem value="boolean">Boolean</SelectItem>
                <SelectItem value="percentage">Rollout</SelectItem>
                <SelectItem value="variant">Variante</SelectItem>
              </SelectContent>
            </Select>

            <Select value={statusFilter} onValueChange={(v: any) => setStatusFilter(v)}>
              <SelectTrigger className="w-40">
                <SelectValue placeholder="Estado" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Todos</SelectItem>
                <SelectItem value="active">Activas</SelectItem>
                <SelectItem value="inactive">Inactivas</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </CardContent>
      </Card>

      {/* Flags Grid */}
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {filteredFlags.map((flag) => (
          <FeatureFlagCard
            key={flag.id}
            flag={flag}
            onToggle={toggleFlag}
            onEdit={handleEdit}
          />
        ))}
      </div>

      {filteredFlags.length === 0 && (
        <Card>
          <CardContent className="py-12 text-center">
            <p className="text-muted-foreground">
              No se encontraron feature flags
            </p>
          </CardContent>
        </Card>
      )}

      {/* Form Dialog */}
      <Dialog open={isFormOpen} onOpenChange={handleClose}>
        <DialogContent className="max-w-2xl">
          <DialogHeader>
            <DialogTitle>
              {editingFlag ? 'Editar Feature Flag' : 'Nueva Feature Flag'}
            </DialogTitle>
          </DialogHeader>
          <FeatureFlagForm
            flag={editingFlag}
            onSubmit={async (data) => {
              if (editingFlag) {
                await updateFlag(editingFlag.id, data);
              } else {
                await createFlag(data);
              }
              handleClose();
            }}
            onCancel={handleClose}
          />
        </DialogContent>
      </Dialog>
    </div>
  );
}
```

---

## Routes

```tsx
// routes.tsx
import { lazy } from 'react';
import { RouteObject, Navigate } from 'react-router-dom';

const SettingsLayout = lazy(() => import('./pages/SettingsLayout'));
const SettingsOverviewPage = lazy(() => import('./pages/SettingsOverviewPage'));
const SystemSettingsPage = lazy(() => import('./pages/SystemSettingsPage'));
const TenantSettingsPage = lazy(() => import('./pages/TenantSettingsPage'));
const UserPreferencesPage = lazy(() => import('./pages/UserPreferencesPage'));
const FeatureFlagsPage = lazy(() => import('./pages/FeatureFlagsPage'));

export const settingsRoutes: RouteObject[] = [
  {
    path: 'settings',
    element: <SettingsLayout />,
    children: [
      {
        index: true,
        element: <SettingsOverviewPage />,
      },
      {
        path: 'system',
        element: <SystemSettingsPage />,
      },
      {
        path: 'tenant',
        element: <TenantSettingsPage />,
      },
      {
        path: 'preferences',
        element: <UserPreferencesPage />,
      },
      {
        path: 'feature-flags',
        element: <FeatureFlagsPage />,
      },
    ],
  },
];
```

---

## Wireframes

### Preferencias de Usuario

```
+------------------------------------------------------------------+
| Preferencias                              [Restaurar Predeterminados] |
| Personaliza tu experiencia en la aplicacion                       |
+------------------------------------------------------------------+

+------------------------------------------------------------------+
| Apariencia                                                        |
| Personaliza el aspecto visual de la aplicacion                    |
+------------------------------------------------------------------+
| Tema                                                              |
| +------------------+ +------------------+ +------------------+    |
| |      [☀]        | |      [🌙]        | |      [🖥]        |    |
| |     Claro       | |     Oscuro       | |     Sistema      |    |
| |  Tema claro ... | |  Tema oscuro ... | |  Sigue sistema...|    |
| +------------------+ +------------------+ +------------------+    |
|                                                                   |
| Densidad de Contenido          | [Normal          v]             |
| Ajusta el espaciado            |                                 |
|                                                                   |
| Barra Lateral Colapsada        | [  O  ]                        |
| Inicia minimizada              |                                 |
+------------------------------------------------------------------+

+------------------------------------------------------------------+
| Regional                                                          |
| Configura idioma, zona horaria y formatos                        |
+------------------------------------------------------------------+
| Idioma                         | [Espanol (Mexico) v]            |
| Idioma de la interfaz          |                                 |
|                                                                   |
| Zona Horaria                   | [America/Mexico_City v]         |
| Tu zona horaria local          |                                 |
|                                                                   |
| Formato de Fecha               | [DD/MM/YYYY      v]             |
| Como se muestran las fechas    |                                 |
+------------------------------------------------------------------+

+------------------------------------------------------------------+
| Notificaciones                                                    |
| Controla como y cuando recibes notificaciones                    |
+------------------------------------------------------------------+
| Notificaciones por Email       | [  O  ]                        |
| Recibe alertas en tu correo    |                                 |
|                                                                   |
| Notificaciones Push            | [  O  ]                        |
| Alertas en tiempo real         |                                 |
|                                                                   |
| Frecuencia de Resumen          | [Diario          v]            |
| Consolida multiples alertas    |                                 |
+------------------------------------------------------------------+
```

### Feature Flags

```
+------------------------------------------------------------------+
| Feature Flags                                      [+ Nueva Flag]  |
| Gestiona funcionalidades y experimentos                           |
+------------------------------------------------------------------+

+--------+ +--------+ +--------+ +--------+
| 12     | | 8      | | 3      | | 1      |
| Total  | | Activas| | Rollout| | Variant|
+--------+ +--------+ +--------+ +--------+

+------------------------------------------------------------------+
| [🔍 Buscar por nombre o clave...   ]  [Tipo ▼]  [Estado ▼]       |
+------------------------------------------------------------------+

+--------------------------------+ +--------------------------------+
| [Boolean] NEW_CHECKOUT         | | [Rollout] DARK_MODE            |
| new-checkout-flow              | | dark-mode-beta                 |
|                         [ON O] | |                         [ON O] |
| Nuevo flujo de checkout con    | | Modo oscuro para usuarios      |
| proceso simplificado           | | seleccionados                  |
|                                | |                                |
|                                | | Rollout [=====>    ] 35%       |
| Actualizado hace 2 dias [Editar] | Actualizado hace 1 hora [Editar] |
+--------------------------------+ +--------------------------------+

+--------------------------------+ +--------------------------------+
| [Variant] PRICING_TEST         | | [Boolean] BULK_EXPORT          |
| pricing-ab-test                | | bulk-export-feature            |
|                        [ON  O] | |                        [OFF O] |
| Test A/B de pagina de precios  | | Exportacion masiva de datos    |
|                                | |                                |
| Variantes:                     | |                                |
| [Control (50%)] [New (50%)]    | |                                |
|                                | |                                |
| Actualizado hace 5 dias [Editar] | Actualizado hace 1 mes [Editar] |
+--------------------------------+ +--------------------------------+
```

---

## Historial de Cambios

| Version | Fecha | Autor | Cambios |
|---------|-------|-------|---------|
| 1.0 | 2025-12-05 | Requirements-Analyst | Creacion inicial |

---

## Aprobaciones

| Rol | Nombre | Fecha | Firma |
|-----|--------|-------|-------|
| Frontend Lead | - | - | [ ] |
| UX Designer | - | - | [ ] |