FinPal — Componentes Mobile

✓ Implementado

Design System — Primitivos

9 componentes

Todos los primitivos están completos y funcionando con soporte light/dark mode via useTheme(). Son la base sobre la que se construyen todos los componentes de negocio.

Text

✓ Done

10 variantes tipográficas (display, headline, title, subtitle, body, bodyMedium, small, caption, label, mono). Soporte de color semántico.

variants×10color props

Button

✓ Done

5 variantes (primary, secondary, outline, ghost, destructive) × 3 tamaños. Estado loading con spinner.

variants×5sizes×3loading

Card

✓ Done

4 variantes (default, elevated, outlined, flat). Base de contenedor reutilizable.

variants×4

Input

✓ Done

Campo de texto con label, placeholder, mensaje de error, helper text, íconos left/right.

labelerroricons

Badge

✓ Done

6 variantes (primary, success, warning, error, info, neutral) × 2 tamaños.

variants×6sizes×2

Divider

✓ Done

Separador horizontal con variante labeled (texto centrado).

plainlabeled

Skeleton

✓ Done

Placeholder animado (shimmer) para estados de carga. Configurable en ancho/alto.

shimmerconfigurable

TransactionCard

✓ Done

Tarjeta de transacción con estado categorizado y pendiente. Swipe-to-reveal con acciones Edit/Delete via Feather icons. 18 category color mappings.

swipepending statedark modees-DO format

↗ Basado en: TransactionList.tsx

BudgetCard

✓ Done

Tarjeta de presupuesto con 3 estados (normal/warning/exceeded), barra de progreso, y panel expansible con últimas 3 transacciones + "Ver todas" CTA.

expand/collapse3 statesmini-transactions

↗ Basado en: BudgetCard.tsx

P1 · Foundation

Auth + Dashboard

8 componentes

LoginForm

P1 · Pendiente

Email + password con validación Zod. Manejo de errores de servidor (credenciales incorrectas). Link a registro y forgot password.

react-hook-formzodJWT

↗ Web: Auth.tsx

RegisterForm

P1 · Pendiente

Email único + password + confirm password. Validación de requisitos de seguridad. Redirect al dashboard al completar.

validationunique email

↗ Web: Auth.tsx

ForgotPasswordForm

P1 · Pendiente

Envío de email de recuperación. Estado de éxito con instrucciones. Deep link para abrir formulario de reset.

deep linkemail

↗ Web: ForgotPassword.tsx

AppHeader

✓ Done

Barra superior con logo FinPal + menú hamburguesa (dropdown: cerrar sesión, exportar datos, preferencias, tema). Sticky con safe area.

stickysafe-areadropdown

↗ Web: Index.tsx (nav bar)

StatsCard

✓ Done

Tarjeta de resumen con icono, valor principal y label. Variantes: total gastado, presupuesto restante, ingresos, balance. Soporte de tendencia (↑/↓).

icontrendvariants

↗ Web: StatsCard.tsx

EmptyState

✓ Done

Estado vacío genérico con icono, título, descripción y CTA opcional. Reutilizable para listas vacías de transacciones, presupuestos, Gmail.

iconCTAreusable

LoadingScreen

✓ Done

Pantalla de carga inicial con logo + spinner. Se muestra durante verificación de auth y carga de datos críticos.

logospinner

PeriodNavigator

✓ Done

Navegador de período ← Anterior / Mes actual / Siguiente →. Muestra nombre del mes + rango de fechas exacto del período. Botón "Hoy" para regresar al período actual.

chevronsperiod calctoday btn

↗ Web: BudgetPeriodNavigator.tsx

P2 · Budgets

Presupuestos Core

6 componentes

BottomSheet

P2 · Pendiente

Modal deslizable desde abajo. Base reutilizable para formularios, confirmaciones y selectores. Drag handle, backdrop dismiss, snap points.

reanimatedsnap pointsbackdrop

NewBudgetSheet

P2 · Pendiente

Bottom sheet para crear presupuesto: nombre de categoría (con sugerencias), monto y moneda. Validación con react-hook-form + Zod.

formzodcategory suggest

↗ Web: NewBudgetModal.tsx

EditBudgetSheet

P2 · Pendiente

Bottom sheet para editar monto o nombre de categoría de un presupuesto existente. Precarga los valores actuales.

prefilledinline edit

↗ Web: AddBudgetCard.tsx inline edit

CategoryPicker

P2 · Pendiente

Selector de categoría reutilizable (en formularios de presupuestos y transacciones). Lista de categorías existentes + opción "Nueva categoría". Chips con color de categoría.

reusablecolor chipsnew option

BudgetWizard

P2 · Pendiente

Flujo multi-paso para primer uso: selección de perfil de gasto → categorías personalizables → configuración de período. Se muestra cuando no hay presupuestos.

multi-steponboardingprofile templates

↗ Web: BudgetWizard.tsx

MissingBudgetsBanner

P2 · Pendiente

Banner con CTA "Copiar presupuestos del mes anterior" cuando hay categorías del período anterior sin crear en el período actual.

contextualone-tap action

↗ Web: CreateMissingBudgetsCard.tsx

P3 · Transactions

Transacciones Core

7 componentes

TransactionList

P3 · Pendiente

FlatList paginada de TransactionCards con infinite scroll. SearchBar integrado con debounce. Estado vacío diferenciado (sin resultados vs. sin transacciones).

FlatListinfinite scrollsearch

↗ Web: TransactionList.tsx

AddTransactionFAB

P3 · Pendiente

Floating Action Button (+) posicionado sobre el tab bar. Abre el TransactionFormSheet al presionar.

FABabove tab bar

↗ Web: AddTransactionButton.tsx

TransactionFormSheet

P3 · Pendiente

Bottom sheet con formulario completo: monto, descripción, categoría (CategoryPicker), fecha (DatePicker), tipo (gasto/ingreso), moneda. Modo crear y editar.

create + editDatePickerCategoryPicker

↗ Web: TransactionForm.tsx + EditTransactionDialog.tsx

UncategorizedBanner

P3 · Pendiente

Sección colapsable en el dashboard con transacciones sin categoría. Contador visual (badge rojo). Prioridad alta en la jerarquía visual.

collapsiblebadge countpriority

↗ Web: UncategorizedTransactions.tsx

CategorySelectSheet

P3 · Pendiente

Bottom sheet rápido para asignar categoría a una transacción pendiente. Lista de categorías existentes + opción de crear presupuesto nuevo.

quick assigncreate budget flow

DeleteConfirmSheet

P3 · Pendiente

Bottom sheet de confirmación de borrado con mensaje descriptivo y botones Cancel/Delete. Reutilizable para transacciones y presupuestos.

destructive confirmreusable

SearchBar

P3 · Pendiente

Barra de búsqueda con ícono de lupa, clear button (×), debounce 300ms. Reset de paginación al cambiar la query. Estado de "sin resultados" para búsqueda vacía.

debounceclear btnempty state

↗ Web: TransactionList.tsx (search input)

P4 · Gmail

Integración Gmail / Penny

4 componentes

⚠️ Requiere Development Build (EAS). Usa expo-auth-session con PKCE — no WebView. Necesita deep links configurados en app.json.

GmailConnectButton

P4 · Gmail

Botón "Conectar con Google" que inicia el flujo OAuth 2.0 con PKCE via expo-auth-session. Maneja callback y almacena tokens.

expo-auth-sessionPKCEOAuth

↗ Web: GmailConnectButton.tsx

GmailStatusCard

P4 · Gmail

Card de estado de cuenta Gmail: conectado (verde) / sincronizando (amarillo) / error (rojo). Muestra email, última sincronización y monitoreo activo.

3 stateslast syncmonitoring

↗ Web: GmailStatusIndicator.tsx + GmailAccountCard.tsx

GmailAccountList

P4 · Gmail

Lista de cuentas Gmail conectadas con opciones: pausar/reanudar monitoreo, desconectar cuenta. Estado vacío con CTA de conectar.

pause/resumedisconnect

↗ Web: GmailAccountList.tsx

GmailSettingsScreen

P4 · Gmail

Pantalla completa de gestión de Gmail (fuera de tabs). Incluye GmailAccountList + GmailConnectButton + info de integración con Penny.

full screenPenny info

↗ Web: GmailSettings.tsx

P5 · Push & Native

Push Notifications + Biometría

3 componentes

⚠️ Requiere Development Build (EAS) con FCM credentials (Android) y APNs (iOS). Nuevas tablas Prisma: PushToken, NotificationSetting.

BiometricPrompt

P5 · Native

Prompt de autenticación biométrica (Face ID / Touch ID) al abrir la app si hay sesión activa. Usa expo-local-authentication + SecureStore.

Face IDTouch IDSecureStore

NotificationSettings

P5 · Native

Panel de configuración de alertas push por categoría: toggle on/off y umbral de % para alerta de presupuesto. Guardado en backend via NotificationSetting table.

per-categorythreshold %toggle

PushPermissionPrompt

P5 · Native

Pantalla/modal de solicitud de permisos de notificaciones con valor claro ("Te avisamos cuando te acercas al límite"). Solo se muestra una vez.

one-timevalue prop

P6 · Polish & Offline

Sincronización Offline

2 componentes

Requiere MMKV para offline queue, NetInfo para detección de conectividad, y lógica de reconciliación de cambios en Zustand.

OfflineBanner

P6 · Offline

Banner persistente en la parte superior cuando no hay conexión: "Sin conexión — los cambios se sincronizarán al reconectar". Desaparece automáticamente al recuperar conexión.

NetInfoauto dismiss

SyncIndicator

P6 · Offline

Indicador sutil (spinner pequeño o badge en el header) cuando hay cambios pendientes de sincronizar. Muestra conteo de operaciones en cola.

pending countMMKV queue

Screens

Pantallas / Rutas

10 pantallas

Estructura de rutas con Expo Router. Las pantallas de tabs ya existen como archivos vacíos; las de auth y modales están pendientes.

app/(auth)/login.tsx

Login

Pantalla de inicio de sesión con LoginForm. Redirect a /tabs si ya autenticado.

P1

app/(auth)/register.tsx

Registro

Pantalla de creación de cuenta con RegisterForm.

P1

app/(auth)/forgot-password.tsx

Recuperar Contraseña

ForgotPasswordForm + confirmación de envío de email.

P1

app/(tabs)/index.tsx

Dashboard

Resumen del período: StatsCards + PeriodNavigator + BudgetCards + UncategorizedBanner. Archivo existe, pendiente de implementar.

P1

app/(tabs)/budgets.tsx

Presupuestos

Lista completa de BudgetCards + FAB para agregar + BudgetWizard (primer uso). Archivo existe, vacío.

P2

app/(tabs)/transactions.tsx

Gastos

TransactionList con SearchBar + AddTransactionFAB. Filtros por categoría opcionales. Archivo existe, vacío.

P3

app/(tabs)/settings.tsx

Ajustes

Idioma, moneda, tipo de período, tema, notificaciones. Actualmente tiene el design system showcase.

P1

app/gmail-settings.tsx

Configuración Gmail

GmailSettingsScreen — gestión de cuentas Gmail conectadas y monitoreo Penny.

P4

app/preferences.tsx

Preferencias

Idioma, moneda predeterminada, tipo de período. Puede combinarse con settings.

P2

app/reset-password.tsx

Reset Password

Formulario de nueva contraseña accesible via deep link desde el email de reset.

P1