# ============================================================================
# FRONTEND_INVENTORY.yml - Trading Platform Trading Platform
# ============================================================================
# Proposito: Inventario consolidado de todos los componentes del frontend
# Ultima actualizacion: 2025-12-05
# Version: 1.0.0
# ============================================================================

version: "1.0.0"
project: "Trading Platform"
framework: "React 18 + TypeScript + Vite"
styling: "TailwindCSS + shadcn/ui"
state_management: "Zustand"
last_updated: "2025-12-05"

# ============================================================================
# RESUMEN EJECUTIVO
# ============================================================================
summary:
  total_features: 7   # +1 notifications
  total_pages: 14     # +2 (NotificationsPage, settings/notifications)
  total_components: 23  # +5 (NotificationBell, Dropdown, Item, List, index)
  total_hooks: 0
  total_stores: 1     # +1 notificationStore
  status: "En desarrollo (OQI-001 parcial)"

# ============================================================================
# ESTRUCTURA DE DIRECTORIOS
# ============================================================================
structure:
  root: "apps/frontend/src"
  directories:
    - path: components/
      purpose: "Componentes compartidos (layout)"

    - path: modules/
      purpose: "Features organizados por dominio"

    - path: hooks/
      purpose: "Custom hooks compartidos"
      status: "Pendiente"

    - path: stores/
      purpose: "Zustand stores"
      status: "Pendiente"

    - path: types/
      purpose: "Tipos TypeScript compartidos"
      status: "Pendiente"

    - path: lib/
      purpose: "Utilidades y helpers"
      status: "Pendiente"

# ============================================================================
# FEATURES (MODULOS)
# ============================================================================
features:
  # --------------------------------------------------------------------------
  # AUTH - Autenticacion
  # --------------------------------------------------------------------------
  - name: auth
    path: modules/auth/
    epic: OQI-001
    status: implemented
    description: "Login, registro, OAuth, 2FA"

    pages:
      - name: Login.tsx
        route: /login
        description: "Pagina de login"
        rf: RF-AUTH-002

      - name: Register.tsx
        route: /register
        description: "Pagina de registro"
        rf: RF-AUTH-002

      - name: ForgotPassword.tsx
        route: /forgot-password
        description: "Solicitar reset de password"
        rf: RF-AUTH-002

      - name: ResetPassword.tsx
        route: /reset-password
        description: "Completar reset de password"
        rf: RF-AUTH-002

      - name: VerifyEmail.tsx
        route: /verify-email
        description: "Verificacion de email"
        rf: RF-AUTH-002

      - name: AuthCallback.tsx
        route: /auth/callback
        description: "Callback de OAuth"
        rf: RF-AUTH-001

    components:
      - name: SocialLoginButtons.tsx
        purpose: "Botones de login social (Google, Facebook, X, Apple, GitHub)"
        rf: RF-AUTH-001

      - name: PhoneLoginForm.tsx
        purpose: "Formulario de login por telefono"
        rf: RF-AUTH-002

  # --------------------------------------------------------------------------
  # DASHBOARD - Panel principal
  # --------------------------------------------------------------------------
  - name: dashboard
    path: modules/dashboard/
    epic: OQI-001
    status: structure_only
    description: "Panel principal del usuario"

    pages:
      - name: Dashboard.tsx
        route: /dashboard
        description: "Dashboard principal"

    components_planned:
      - name: PortfolioSummary.tsx
        purpose: "Resumen de portfolio"

      - name: RecentActivity.tsx
        purpose: "Actividad reciente"

      - name: QuickActions.tsx
        purpose: "Acciones rapidas"

  # --------------------------------------------------------------------------
  # EDUCATION - Cursos
  # --------------------------------------------------------------------------
  - name: education
    path: modules/education/
    epic: OQI-002
    status: structure_only
    description: "Catalogo y detalle de cursos"

    pages:
      - name: Courses.tsx
        route: /courses
        description: "Catalogo de cursos"
        rf: RF-EDU-001

      - name: CourseDetail.tsx
        route: /courses/:slug
        description: "Detalle de curso"
        rf: RF-EDU-002

    pages_planned:
      - name: LessonViewer.tsx
        route: /courses/:slug/lessons/:lessonId
        description: "Visor de leccion"

      - name: QuizPage.tsx
        route: /courses/:slug/quizzes/:quizId
        description: "Pagina de quiz"

      - name: MyLearning.tsx
        route: /my-learning
        description: "Mis cursos inscritos"

    components_planned:
      - name: CourseCard.tsx
        purpose: "Tarjeta de curso"

      - name: LessonList.tsx
        purpose: "Lista de lecciones"

      - name: VideoPlayer.tsx
        purpose: "Reproductor de video"

      - name: QuizForm.tsx
        purpose: "Formulario de quiz"

      - name: ProgressBar.tsx
        purpose: "Barra de progreso"

  # --------------------------------------------------------------------------
  # TRADING - Trading y charts
  # --------------------------------------------------------------------------
  - name: trading
    path: modules/trading/
    epic: OQI-003
    status: structure_only
    description: "Charts, watchlists, paper trading"

    pages:
      - name: Trading.tsx
        route: /trading
        description: "Pagina principal de trading"
        rf: RF-TRD-001

    pages_planned:
      - name: PaperTrading.tsx
        route: /trading/paper
        description: "Paper trading"

      - name: Signals.tsx
        route: /trading/signals
        description: "Senales ML"

    components_planned:
      - name: TradingChart.tsx
        purpose: "Chart con Lightweight Charts + ML overlay"
        rf: RF-TRD-003

      - name: OrderPanel.tsx
        purpose: "Panel de ordenes"

      - name: WatchlistPanel.tsx
        purpose: "Panel de watchlist"

      - name: PositionsTable.tsx
        purpose: "Tabla de posiciones"

      - name: SignalCard.tsx
        purpose: "Tarjeta de senal ML"

      - name: MLOverlay.tsx
        purpose: "Overlay de predicciones ML"
        rf: RF-TRD-003

      - name: AMDZoneIndicator.tsx
        purpose: "Indicador de zonas AMD"

  # --------------------------------------------------------------------------
  # INVESTMENT - Cuentas de inversion
  # --------------------------------------------------------------------------
  - name: investment
    path: modules/investment/
    epic: OQI-004
    status: structure_only
    description: "Productos, cuentas, rendimiento"

    pages:
      - name: Investment.tsx
        route: /investment
        description: "Pagina de inversiones"
        rf: RF-INV-001

    pages_planned:
      - name: Products.tsx
        route: /investment/products
        description: "Catalogo de productos"

      - name: AccountDetail.tsx
        route: /investment/accounts/:id
        description: "Detalle de cuenta"

      - name: OpenAccount.tsx
        route: /investment/open-account
        description: "Abrir cuenta nueva"

    components_planned:
      - name: ProductCard.tsx
        purpose: "Tarjeta de producto (Atlas/Orion/Nova)"

      - name: AccountSummary.tsx
        purpose: "Resumen de cuenta"

      - name: PerformanceChart.tsx
        purpose: "Grafico de rendimiento"

      - name: DepositModal.tsx
        purpose: "Modal de deposito"

      - name: WithdrawModal.tsx
        purpose: "Modal de retiro"

      - name: BotSelector.tsx
        purpose: "Selector de bot/agente"

  # --------------------------------------------------------------------------
  # SETTINGS - Configuracion
  # --------------------------------------------------------------------------
  - name: settings
    path: modules/settings/
    epic: OQI-001
    status: structure_only
    description: "Configuracion de usuario"

    pages:
      - name: Settings.tsx
        route: /settings
        description: "Pagina de configuracion"

    pages_planned:
      - name: Profile.tsx
        route: /settings/profile
        description: "Editar perfil"

      - name: Security.tsx
        route: /settings/security
        description: "Seguridad y 2FA"

      - name: Notifications.tsx
        route: /settings/notifications
        description: "Preferencias de notificaciones"

      - name: Billing.tsx
        route: /settings/billing
        description: "Suscripcion y pagos"

  # --------------------------------------------------------------------------
  # NOTIFICATIONS - Centro de notificaciones
  # --------------------------------------------------------------------------
  - name: notifications
    path: modules/notifications/
    epic: OQI-001
    status: implemented
    description: "Centro de notificaciones con bell, dropdown y pagina completa"
    created: "2026-01-25"

    pages:
      - name: NotificationsPage.tsx
        route: /notifications
        description: "Pagina completa de notificaciones con filtros"
        rf: RF-AUTH-001

    components:
      - name: NotificationBell.tsx
        purpose: "Icono de campana con badge de no leidas"
        rf: RF-AUTH-001

      - name: NotificationDropdown.tsx
        purpose: "Dropdown con ultimas 10 notificaciones"
        rf: RF-AUTH-001

      - name: NotificationItem.tsx
        purpose: "Item individual de notificacion"
        rf: RF-AUTH-001

      - name: index.ts
        purpose: "Exports de componentes"

    store:
      - name: notificationStore.ts
        path: stores/notificationStore.ts
        purpose: "Estado de notificaciones con Zustand"
        state:
          - notifications
          - unreadCount
          - preferences
          - loading
          - error
        actions:
          - fetchNotifications()
          - fetchUnreadCount()
          - markAsRead(id)
          - markAllAsRead()
          - addNotification(notification)
          - initializeWebSocket()

    service:
      - name: notification.service.ts
        path: services/notification.service.ts
        purpose: "API client para notificaciones"
        methods:
          - getNotifications(params)
          - getUnreadCount()
          - markAsRead(id)
          - markAllAsRead()
          - getPreferences()
          - updatePreferences(data)

# ============================================================================
# COMPONENTES COMPARTIDOS
# ============================================================================
shared_components:
  layout:
    - name: MainLayout.tsx
      path: components/layout/MainLayout.tsx
      purpose: "Layout principal con sidebar"

    - name: AuthLayout.tsx
      path: components/layout/AuthLayout.tsx
      purpose: "Layout para paginas de auth"

  planned:
    - name: Navbar.tsx
      purpose: "Barra de navegacion"

    - name: Sidebar.tsx
      purpose: "Menu lateral"

    - name: Footer.tsx
      purpose: "Pie de pagina"

    - name: LoadingSpinner.tsx
      purpose: "Indicador de carga"

    - name: ErrorBoundary.tsx
      purpose: "Manejo de errores"

    - name: Modal.tsx
      purpose: "Componente modal base"

    - name: Toast.tsx
      purpose: "Notificaciones toast"

# ============================================================================
# ROUTING
# ============================================================================
routing:
  file: App.tsx
  routes:
    public:
      - path: /login
        component: Login
      - path: /register
        component: Register
      - path: /forgot-password
        component: ForgotPassword
      - path: /reset-password
        component: ResetPassword
      - path: /verify-email
        component: VerifyEmail
      - path: /auth/callback
        component: AuthCallback

    protected:
      - path: /dashboard
        component: Dashboard
      - path: /courses
        component: Courses
      - path: /courses/:slug
        component: CourseDetail
      - path: /trading
        component: Trading
      - path: /investment
        component: Investment
      - path: /settings
        component: Settings
      - path: /notifications
        component: NotificationsPage
      - path: /settings/notifications
        component: NotificationsPage

# ============================================================================
# STORES (ZUSTAND)
# ============================================================================
stores:
  implemented:
    - name: notificationStore
      path: stores/notificationStore.ts
      purpose: "Estado de notificaciones"
      state:
        - notifications
        - unreadCount
        - preferences
        - loading
        - error
      actions:
        - fetchNotifications()
        - fetchUnreadCount()
        - markAsRead()
        - markAllAsRead()
        - addNotification()
        - initializeWebSocket()
      created: "2026-01-25"

  planned:
    - name: authStore
      purpose: "Estado de autenticacion"
      state:
        - user
        - isAuthenticated
        - accessToken
      actions:
        - login()
        - logout()
        - refreshToken()

    - name: tradingStore
      purpose: "Estado de trading"
      state:
        - selectedSymbol
        - timeframe
        - watchlists
        - positions
      actions:
        - setSymbol()
        - addToWatchlist()
        - placeOrder()

    - name: educationStore
      purpose: "Estado de educacion"
      state:
        - enrolledCourses
        - currentLesson
        - progress
      actions:
        - enrollCourse()
        - updateProgress()

    - name: uiStore
      purpose: "Estado de UI"
      state:
        - theme
        - sidebarOpen
        - notifications
      actions:
        - toggleTheme()
        - toggleSidebar()
        - showNotification()

# ============================================================================
# HOOKS PERSONALIZADOS
# ============================================================================
hooks:
  planned:
    - name: useAuth
      purpose: "Hook de autenticacion"
      returns: [user, isLoading, login, logout]

    - name: useApi
      purpose: "Hook para llamadas API"
      returns: [data, error, isLoading, refetch]

    - name: useTradingChart
      purpose: "Hook para manejo de charts"

    - name: useWebSocket
      purpose: "Hook para conexiones WebSocket"

    - name: useNotification
      purpose: "Hook para notificaciones"

# ============================================================================
# MAPEO A EPICAS
# ============================================================================
epic_mapping:
  OQI-001:
    features: [auth, dashboard, settings]
    pages_count: 8
    status: "Parcialmente implementado"

  OQI-002:
    features: [education]
    pages_count: 2
    status: "Estructura creada"

  OQI-003:
    features: [trading]
    pages_count: 1
    status: "Estructura creada"

  OQI-004:
    features: [investment]
    pages_count: 1
    status: "Estructura creada"

  OQI-005:
    features: []
    pages_count: 0
    status: "Pendiente"
    note: "Paginas de billing en settings"

  OQI-006:
    features: []
    pages_count: 0
    status: "Pendiente"
    note: "Componentes ML en trading"

  OQI-007:
    features: []
    pages_count: 0
    status: "Planificado"
    note: "Feature copilot a crear"

  OQI-008:
    features: []
    pages_count: 0
    status: "Planificado"
    note: "Feature portfolio a crear"

# ============================================================================
# DEPENDENCIAS PRINCIPALES
# ============================================================================
dependencies:
  production:
    - react: "^18.x"
    - react-dom: "^18.x"
    - react-router-dom: "^6.x"
    - typescript: "^5.x"
    - zustand: "^4.x"
    - tailwindcss: "^3.x"
    - "@tanstack/react-query": "^5.x"
    - axios: "^1.x"
    - lightweight-charts: "^4.x"
    - lucide-react: "^0.x"

  development:
    - vite: "^5.x"
    - "@types/react": "^18.x"
    - "@vitejs/plugin-react": "^4.x"
    - autoprefixer: "^10.x"
    - postcss: "^8.x"

# ============================================================================
# ARCHIVOS CLAVE
# ============================================================================
key_files:
  - path: apps/frontend/src/main.tsx
    purpose: "Entry point de la aplicacion"

  - path: apps/frontend/src/App.tsx
    purpose: "Componente raiz con routing"

  - path: apps/frontend/tailwind.config.js
    purpose: "Configuracion de Tailwind"

  - path: apps/frontend/vite.config.ts
    purpose: "Configuracion de Vite"

  - path: apps/frontend/package.json
    purpose: "Dependencias y scripts"

# ============================================================================
# NOTAS Y PENDIENTES
# ============================================================================
notes:
  - "Solo auth tiene implementacion real, resto son paginas placeholder"
  - "Falta crear stores Zustand"
  - "Falta crear hooks personalizados"
  - "Falta integracion con API del backend"
  - "Falta componente TradingChart con Lightweight Charts"
  - "Falta feature Copilot (OQI-007)"
  - "Falta feature Portfolio (OQI-008)"
  - "Tests E2E pendientes"

# ============================================================================
# FIN DEL INVENTARIO
# ============================================================================