# MiInventario - Frontend Inventory (Mobile)
# Version: 3.0.0
# Actualizado: 2026-01-13

metadata:
  proyecto: miinventario
  componente: mobile
  framework: React Native (Expo)
  lenguaje: TypeScript
  version_expo: "SDK 52"
  navegacion: expo-router
  estado_global: Zustand
  version: "3.0.0"
  estado: completado
  creado: 2026-01-10
  actualizado: 2026-01-13
  actualizado_por: "Agente Arquitecto de Documentación"

# ===========================================
# RESUMEN
# ===========================================
resumen:
  screens_implementados: 22
  layouts_implementados: 11
  stores_implementados: 9
  services_implementados: 12
  hooks_implementados: 2
  componentes_ui: 3
  componentes_skeletons: 4
  componentes_validation: 3
  componentes_feedback: 4
  grupos_navegacion: 9
  nota: "App mobile completa con expo-router, animaciones fluidas, modo offline y sistema de validación"

# ===========================================
# SCREENS IMPLEMENTADOS
# ===========================================
screens:
  # Root
  - nombre: index
    ruta: "app/index.tsx"
    ruta_expo: "/"
    descripcion: "Entry point - redirige segun estado de auth"
    estado: implementado
    grupo: root

  # Auth Flow
  - nombre: login
    ruta: "app/(auth)/login.tsx"
    ruta_expo: "/(auth)/login"
    descripcion: "Inicio de sesion con telefono"
    estado: implementado
    grupo: auth

  - nombre: register
    ruta: "app/(auth)/register.tsx"
    ruta_expo: "/(auth)/register"
    descripcion: "Registro de nuevo usuario"
    estado: implementado
    grupo: auth

  - nombre: verify-otp
    ruta: "app/(auth)/verify-otp.tsx"
    ruta_expo: "/(auth)/verify-otp"
    descripcion: "Verificacion de codigo OTP"
    estado: implementado
    grupo: auth

  # Tabs (Main Navigation)
  - nombre: home
    ruta: "app/(tabs)/index.tsx"
    ruta_expo: "/(tabs)"
    descripcion: "Dashboard principal con resumen"
    estado: implementado
    grupo: tabs
    es_tab: true

  - nombre: scan
    ruta: "app/(tabs)/scan.tsx"
    ruta_expo: "/(tabs)/scan"
    descripcion: "Captura de video para inventario"
    estado: implementado
    grupo: tabs
    es_tab: true
    dependencias: [expo-camera, expo-av]

  - nombre: inventory
    ruta: "app/(tabs)/inventory.tsx"
    ruta_expo: "/(tabs)/inventory"
    descripcion: "Lista de items de inventario"
    estado: implementado
    grupo: tabs
    es_tab: true

  - nombre: profile
    ruta: "app/(tabs)/profile.tsx"
    ruta_expo: "/(tabs)/profile"
    descripcion: "Perfil de usuario y configuracion"
    estado: implementado
    grupo: tabs
    es_tab: true

  # Credits
  - nombre: credits/buy
    ruta: "app/credits/buy.tsx"
    ruta_expo: "/credits/buy"
    descripcion: "Compra de paquetes de creditos"
    estado: implementado
    grupo: credits

  - nombre: credits/history
    ruta: "app/credits/history.tsx"
    ruta_expo: "/credits/history"
    descripcion: "Historial de transacciones de creditos"
    estado: implementado
    grupo: credits

  # Stores
  - nombre: stores/index
    ruta: "app/stores/index.tsx"
    ruta_expo: "/stores"
    descripcion: "Lista de tiendas del usuario"
    estado: implementado
    grupo: stores

  - nombre: stores/new
    ruta: "app/stores/new.tsx"
    ruta_expo: "/stores/new"
    descripcion: "Crear nueva tienda"
    estado: implementado
    grupo: stores

  - nombre: stores/[id]
    ruta: "app/stores/[id].tsx"
    ruta_expo: "/stores/:id"
    descripcion: "Detalle y edicion de tienda"
    estado: implementado
    grupo: stores
    parametros: [id]

  # Inventory Items
  - nombre: inventory/[id]
    ruta: "app/inventory/[id].tsx"
    ruta_expo: "/inventory/:id"
    descripcion: "Detalle de item de inventario"
    estado: implementado
    grupo: inventory
    parametros: [id]

  # Notifications
  - nombre: notifications/index
    ruta: "app/notifications/index.tsx"
    ruta_expo: "/notifications"
    descripcion: "Lista de notificaciones"
    estado: implementado
    grupo: notifications

  # Referrals
  - nombre: referrals/index
    ruta: "app/referrals/index.tsx"
    ruta_expo: "/referrals"
    descripcion: "Codigo de referido y estadisticas"
    estado: implementado
    grupo: referrals

  # Profile
  - nombre: profile/edit
    ruta: "app/profile/edit.tsx"
    ruta_expo: "/profile/edit"
    descripcion: "Edicion de perfil de usuario"
    estado: implementado
    grupo: profile

  # Payments
  - nombre: payments/methods
    ruta: "app/payments/methods.tsx"
    ruta_expo: "/payments/methods"
    descripcion: "Metodos de pago disponibles"
    estado: implementado
    grupo: payments

  # Help
  - nombre: help/index
    ruta: "app/help/index.tsx"
    ruta_expo: "/help"
    descripcion: "Centro de ayuda y FAQ"
    estado: implementado
    grupo: help

  # Support
  - nombre: support/index
    ruta: "app/support/index.tsx"
    ruta_expo: "/support"
    descripcion: "Soporte y contacto"
    estado: implementado
    grupo: support

  # Legal
  - nombre: legal/terms
    ruta: "app/legal/terms.tsx"
    ruta_expo: "/legal/terms"
    descripcion: "Terminos y condiciones"
    estado: implementado
    grupo: legal

  - nombre: legal/privacy
    ruta: "app/legal/privacy.tsx"
    ruta_expo: "/legal/privacy"
    descripcion: "Politica de privacidad"
    estado: implementado
    grupo: legal

  # Validation
  - nombre: validation/items
    ruta: "app/validation/items.tsx"
    ruta_expo: "/validation/items"
    descripcion: "Lista de items pendientes de validacion"
    estado: implementado
    grupo: validation

  - nombre: validation/complete
    ruta: "app/validation/complete.tsx"
    ruta_expo: "/validation/complete"
    descripcion: "Pantalla de validacion completada"
    estado: implementado
    grupo: validation

# ===========================================
# LAYOUTS (expo-router)
# ===========================================
layouts:
  - nombre: _layout (root)
    ruta: "app/_layout.tsx"
    descripcion: "Layout raiz con providers globales"
    estado: implementado

  - nombre: _layout (auth)
    ruta: "app/(auth)/_layout.tsx"
    descripcion: "Layout para flujo de autenticacion"
    estado: implementado

  - nombre: _layout (tabs)
    ruta: "app/(tabs)/_layout.tsx"
    descripcion: "Layout con tab navigation"
    estado: implementado

  - nombre: _layout (credits)
    ruta: "app/credits/_layout.tsx"
    descripcion: "Layout para seccion de creditos"
    estado: implementado

  - nombre: _layout (stores)
    ruta: "app/stores/_layout.tsx"
    descripcion: "Layout para seccion de tiendas"
    estado: implementado

  - nombre: _layout (inventory)
    ruta: "app/inventory/_layout.tsx"
    descripcion: "Layout para detalle de inventario"
    estado: implementado

  - nombre: _layout (notifications)
    ruta: "app/notifications/_layout.tsx"
    descripcion: "Layout para notificaciones"
    estado: implementado

  - nombre: _layout (referrals)
    ruta: "app/referrals/_layout.tsx"
    descripcion: "Layout para referidos"
    estado: implementado

  - nombre: _layout (validation)
    ruta: "app/validation/_layout.tsx"
    descripcion: "Layout para flujo de validacion"
    estado: implementado

# ===========================================
# HOOKS PERSONALIZADOS
# ===========================================
hooks:
  - nombre: useAnimations
    archivo: "src/hooks/useAnimations.ts"
    descripcion: "Coleccion de hooks para animaciones con react-native-reanimated"
    estado: implementado
    exports:
      - useFadeIn
      - useSlideIn
      - useSlideFromRight
      - usePressScale
      - useListItemAnimation
      - useShimmer
      - usePulse
      - useToggleAnimation
      - Animated

  - nombre: useNetworkStatus
    archivo: "src/hooks/useNetworkStatus.ts"
    descripcion: "Hooks para detectar estado de conexion de red"
    estado: implementado
    exports:
      - useNetworkStatus
      - useIsOnline
      - useIsOffline

# ===========================================
# SISTEMA DE TEMAS
# ===========================================
theme:
  - nombre: ThemeContext
    archivo: "src/theme/ThemeContext.tsx"
    descripcion: "Sistema de temas con soporte light/dark mode"
    estado: implementado
    exports:
      - ThemeColors
      - Theme
      - ThemeProvider
      - useTheme
      - useColors

# ===========================================
# COMPONENTES UI
# ===========================================
componentes_ui:
  - nombre: Skeleton
    archivo: "src/components/ui/Skeleton.tsx"
    descripcion: "Componentes skeleton base con animacion shimmer"
    estado: implementado
    exports:
      - Skeleton
      - SkeletonText
      - SkeletonCircle
      - SkeletonImage
      - SkeletonCard
      - SkeletonListItem
      - SkeletonStat
      - SkeletonList

  - nombre: OfflineBanner
    archivo: "src/components/ui/OfflineBanner.tsx"
    descripcion: "Banner animado para indicar modo offline"
    estado: implementado
    exports:
      - OfflineBanner
      - WithOfflineBanner

  - nombre: AnimatedList
    archivo: "src/components/ui/AnimatedList.tsx"
    descripcion: "FlatList con animaciones de entrada staggered"
    estado: implementado
    exports:
      - AnimatedList
      - useListItemEntering
      - AnimatedListItem

# ===========================================
# COMPONENTES SKELETON
# ===========================================
componentes_skeletons:
  - nombre: InventoryItemSkeleton
    archivo: "src/components/skeletons/InventoryItemSkeleton.tsx"
    descripcion: "Skeletons para lista de inventario"
    estado: implementado
    exports:
      - InventoryItemSkeleton
      - InventoryListSkeleton
      - InventoryStatsSkeleton

  - nombre: StoreCardSkeleton
    archivo: "src/components/skeletons/StoreCardSkeleton.tsx"
    descripcion: "Skeletons para tarjetas de tienda"
    estado: implementado
    exports:
      - StoreCardSkeleton
      - StoreListSkeleton

  - nombre: CreditCardSkeleton
    archivo: "src/components/skeletons/CreditCardSkeleton.tsx"
    descripcion: "Skeletons para seccion de creditos"
    estado: implementado
    exports:
      - CreditBalanceSkeleton
      - TransactionSkeleton
      - TransactionListSkeleton
      - CreditPackageSkeleton
      - CreditPackageListSkeleton

  - nombre: NotificationSkeleton
    archivo: "src/components/skeletons/NotificationSkeleton.tsx"
    descripcion: "Skeletons para lista de notificaciones"
    estado: implementado
    exports:
      - NotificationItemSkeleton
      - NotificationListSkeleton
      - NotificationHeaderSkeleton

# ===========================================
# COMPONENTES VALIDATION
# ===========================================
componentes_validation:
  - nombre: ValidationPromptModal
    archivo: "src/components/validation/ValidationPromptModal.tsx"
    descripcion: "Modal para iniciar flujo de validacion"
    estado: implementado
    exports:
      - ValidationPromptModal

  - nombre: ValidationItemCard
    archivo: "src/components/validation/ValidationItemCard.tsx"
    descripcion: "Tarjeta de item en validacion"
    estado: implementado
    exports:
      - ValidationItemCard

  - nombre: ValidationProgressBar
    archivo: "src/components/validation/ValidationProgressBar.tsx"
    descripcion: "Barra de progreso de validacion"
    estado: implementado
    exports:
      - ValidationProgressBar

# ===========================================
# COMPONENTES FEEDBACK
# ===========================================
componentes_feedback:
  - nombre: ConfirmItemButton
    archivo: "src/components/feedback/ConfirmItemButton.tsx"
    descripcion: "Boton para confirmar item correcto"
    estado: implementado
    exports:
      - ConfirmItemButton

  - nombre: CorrectionHistoryCard
    archivo: "src/components/feedback/CorrectionHistoryCard.tsx"
    descripcion: "Tarjeta de historial de correcciones"
    estado: implementado
    exports:
      - CorrectionHistoryCard

  - nombre: CorrectSkuModal
    archivo: "src/components/feedback/CorrectSkuModal.tsx"
    descripcion: "Modal para corregir SKU de item"
    estado: implementado
    exports:
      - CorrectSkuModal

  - nombre: CorrectQuantityModal
    archivo: "src/components/feedback/CorrectQuantityModal.tsx"
    descripcion: "Modal para corregir cantidad de item"
    estado: implementado
    exports:
      - CorrectQuantityModal

# ===========================================
# STORES (Zustand)
# ===========================================
stores:
  - nombre: useAuthStore
    archivo: "stores/auth.store.ts"
    descripcion: "Estado de autenticacion y sesion"
    estado: implementado
    persistencia: "expo-secure-store"
    acciones:
      - login
      - logout
      - register
      - verifyOtp
      - refreshToken
      - setUser

  - nombre: useCreditsStore
    archivo: "stores/credits.store.ts"
    descripcion: "Balance y transacciones de creditos"
    estado: implementado
    persistencia: "miinventario-credits"
    limite_cache: 50
    acciones:
      - fetchBalance
      - fetchPackages
      - fetchTransactions

  - nombre: useInventoryStore
    archivo: "stores/inventory.store.ts"
    descripcion: "Items de inventario"
    estado: implementado
    persistencia: "miinventario-inventory"
    limite_cache: 100
    acciones:
      - fetchItems
      - updateItem
      - deleteItem
      - fetchStatistics
      - fetchLowStock

  - nombre: useNotificationsStore
    archivo: "stores/notifications.store.ts"
    descripcion: "Notificaciones del usuario"
    estado: implementado
    persistencia: "miinventario-notifications"
    limite_cache: 50
    acciones:
      - fetchNotifications
      - markAsRead
      - markAllAsRead
      - fetchUnreadCount

  - nombre: usePaymentsStore
    archivo: "stores/payments.store.ts"
    descripcion: "Historial de pagos"
    estado: implementado
    acciones:
      - fetchPayments
      - createPayment
      - fetchPaymentDetail

  - nombre: useReferralsStore
    archivo: "stores/referrals.store.ts"
    descripcion: "Sistema de referidos"
    estado: implementado
    acciones:
      - fetchMyCode
      - fetchStats
      - fetchReferrals
      - applyCode

  - nombre: useStoresStore
    archivo: "stores/stores.store.ts"
    descripcion: "Tiendas del usuario"
    estado: implementado
    persistencia: "miinventario-stores"
    acciones:
      - fetchStores
      - createStore
      - updateStore
      - deleteStore
      - setCurrentStore

  - nombre: useValidationsStore
    archivo: "stores/validations.store.ts"
    descripcion: "Estado de validaciones de inventario"
    estado: implementado
    persistencia: "miinventario-validations"
    acciones:
      - fetchPendingValidations
      - validateItem
      - skipItem
      - completeValidation
      - resetValidation

  - nombre: useFeedbackStore
    archivo: "stores/feedback.store.ts"
    descripcion: "Feedback y correcciones de usuario"
    estado: implementado
    persistencia: "miinventario-feedback"
    acciones:
      - submitCorrection
      - fetchCorrectionHistory
      - confirmItem
      - rejectItem

# ===========================================
# SERVICES (API)
# ===========================================
services:
  - nombre: client
    archivo: "services/api/client.ts"
    descripcion: "Cliente base Axios con interceptors"
    estado: implementado
    notas: "Maneja tokens, refresh automatico, errores"

  - nombre: authService
    archivo: "services/api/auth.service.ts"
    descripcion: "Endpoints de autenticacion"
    estado: implementado
    endpoints:
      - POST /auth/register
      - POST /auth/verify-otp
      - POST /auth/login
      - POST /auth/refresh
      - POST /auth/logout

  - nombre: usersService
    archivo: "services/api/users.service.ts"
    descripcion: "Endpoints de usuarios"
    estado: implementado
    endpoints:
      - GET /users/me
      - PATCH /users/me
      - PATCH /users/me/fcm-token

  - nombre: storesService
    archivo: "services/api/stores.service.ts"
    descripcion: "Endpoints de tiendas"
    estado: implementado
    endpoints:
      - POST /stores
      - GET /stores
      - GET /stores/:id
      - PATCH /stores/:id
      - DELETE /stores/:id

  - nombre: inventoryService
    archivo: "services/api/inventory.service.ts"
    descripcion: "Endpoints de inventario"
    estado: implementado
    endpoints:
      - GET /stores/:storeId/inventory
      - GET /stores/:storeId/inventory/statistics
      - GET /stores/:storeId/inventory/low-stock
      - GET /stores/:storeId/inventory/categories
      - GET /stores/:storeId/inventory/:itemId
      - PATCH /stores/:storeId/inventory/:itemId
      - DELETE /stores/:storeId/inventory/:itemId

  - nombre: videosService
    archivo: "services/api/videos.service.ts"
    descripcion: "Endpoints de videos"
    estado: implementado
    endpoints:
      - POST /stores/:storeId/videos/initiate
      - POST /stores/:storeId/videos/:videoId/confirm
      - GET /stores/:storeId/videos/:videoId/status
      - GET /stores/:storeId/videos/:videoId/result
      - GET /stores/:storeId/videos

  - nombre: creditsService
    archivo: "services/api/credits.service.ts"
    descripcion: "Endpoints de creditos"
    estado: implementado
    endpoints:
      - GET /credits/balance
      - GET /credits/transactions
      - GET /credits/packages

  - nombre: paymentsService
    archivo: "services/api/payments.service.ts"
    descripcion: "Endpoints de pagos"
    estado: implementado
    endpoints:
      - POST /payments
      - GET /payments
      - GET /payments/:paymentId

  - nombre: referralsService
    archivo: "services/api/referrals.service.ts"
    descripcion: "Endpoints de referidos"
    estado: implementado
    endpoints:
      - GET /referrals/my-code
      - GET /referrals/stats
      - GET /referrals
      - GET /referrals/validate
      - POST /referrals/apply

  - nombre: notificationsService
    archivo: "services/api/notifications.service.ts"
    descripcion: "Endpoints de notificaciones"
    estado: implementado
    endpoints:
      - GET /notifications
      - GET /notifications/unread-count
      - PATCH /notifications/:id/read
      - POST /notifications/mark-all-read
      - POST /notifications/register-token

  - nombre: validationsService
    archivo: "services/api/validations.service.ts"
    descripcion: "Endpoints de validaciones de inventario"
    estado: implementado
    endpoints:
      - GET /stores/:storeId/validations/pending
      - POST /stores/:storeId/validations/:itemId/validate
      - POST /stores/:storeId/validations/:itemId/skip
      - POST /stores/:storeId/validations/complete

  - nombre: feedbackService
    archivo: "services/api/feedback.service.ts"
    descripcion: "Endpoints de feedback y correcciones"
    estado: implementado
    endpoints:
      - POST /stores/:storeId/feedback/correction
      - GET /stores/:storeId/feedback/history
      - POST /stores/:storeId/feedback/:itemId/confirm
      - POST /stores/:storeId/feedback/:itemId/reject

# ===========================================
# NAVIGATION STRUCTURE
# ===========================================
navigation:
  tipo: expo-router (file-based)
  grupos:
    - nombre: (auth)
      tipo: stack
      screens: [login, register, verify-otp]
      protegido: false

    - nombre: (tabs)
      tipo: tabs
      screens: [index, scan, inventory, profile]
      protegido: true

    - nombre: credits
      tipo: stack
      screens: [buy, history]
      protegido: true

    - nombre: stores
      tipo: stack
      screens: [index, new, "[id]"]
      protegido: true

    - nombre: inventory
      tipo: stack
      screens: ["[id]"]
      protegido: true

    - nombre: notifications
      tipo: stack
      screens: [index]
      protegido: true

    - nombre: referrals
      tipo: stack
      screens: [index]
      protegido: true

    - nombre: legal
      tipo: stack
      screens: [terms, privacy]
      protegido: false

    - nombre: validation
      tipo: stack
      screens: [items, complete]
      protegido: true

# ===========================================
# TIPOS COMPARTIDOS
# ===========================================
types:
  archivo: "types/index.ts"
  descripcion: "Tipos TypeScript centralizados"
  estado: implementado
  interfaces:
    - User
    - Store
    - InventoryItem
    - Video
    - CreditBalance
    - CreditPackage
    - CreditTransaction
    - Payment
    - Referral
    - Notification
    - ApiResponse
    - PaginatedResponse

# ===========================================
# DEPENDENCIAS PRINCIPALES
# ===========================================
dependencias:
  navegacion:
    - expo-router
  estado:
    - zustand
    - "@react-native-async-storage/async-storage"
  http:
    - axios
  ui:
    - expo-status-bar
    - "@expo/vector-icons"
  media:
    - expo-camera
    - expo-av
    - expo-image-picker
  animaciones:
    - react-native-reanimated
  offline:
    - "@react-native-async-storage/async-storage"
    - "@react-native-community/netinfo"
  otros:
    - expo-secure-store
    - expo-notifications

# ===========================================
# TESTS
# ===========================================
tests:
  nota: "Tests unitarios pendientes de implementacion"
  unit:
    total: 0
    pasando: 0
    fallando: 0

  e2e:
    total: 0
    pasando: 0
    fallando: 0

# ===========================================
# CHANGELOG
# ===========================================
changelog:
  - version: "1.0.0"
    fecha: 2026-01-10
    cambios:
      - "Creacion inicial del inventario mobile"
      - "Definicion de 16 screens planificados"
      - "Identificacion de componentes y hooks"

  - version: "2.0.0"
    fecha: 2026-01-10
    cambios:
      - "Actualizacion completa con estado real implementado"
      - "20 screens implementados con expo-router"
      - "10 layouts de navegacion"
      - "7 stores Zustand implementados"
      - "10 servicios API implementados"
      - "Estructura de navegacion documentada"
      - "Tipos TypeScript centralizados"

  - version: "3.0.0"
    fecha: 2026-01-13
    cambios:
      - "Agregados 2 hooks personalizados (useAnimations, useNetworkStatus)"
      - "Agregado sistema de temas (ThemeContext)"
      - "Agregados 3 componentes UI (Skeleton, OfflineBanner, AnimatedList)"
      - "Agregados 4 componentes skeleton especificos"
      - "Actualizada persistencia en 4 stores con AsyncStorage"
      - "Agregadas animaciones a Home e Inventory screens"
      - "Agregado banner offline en layout raiz"
      - "Nuevas dependencias: @react-native-community/netinfo"
      - "Agregadas 3 screens de validacion (items, complete, _layout)"
      - "Agregados 2 stores (validations.store.ts, feedback.store.ts)"
      - "Agregados 2 services (validations.service.ts, feedback.service.ts)"
      - "Agregados 3 componentes de validacion (ValidationPromptModal, ValidationItemCard, ValidationProgressBar)"
      - "Agregados 4 componentes de feedback (ConfirmItemButton, CorrectionHistoryCard, CorrectSkuModal, CorrectQuantityModal)"
      - "Total: 22 screens, 9 stores, 12 services, 7 nuevos componentes"