Home

Descripción

Ubicación: src/modules/home/ Pantalla principal de la app que muestra el dashboard de la propiedad seleccionada, el selector de propiedades y la galería de fotos. Este módulo actúa como punto de entrada principal para el usuario autenticado.

El tab Home (01_home) actúa como gate de selección de propiedad. Los demás tabs permanecen bloqueados hasta que el usuario seleccione una propiedad.

Screens

Screen	Ruta	Descripción
`HomeScreen`	`/(tabs)/01_home`	Dashboard principal de la propiedad
`HomeGuestScreen`	`/(tabs)/01_home` (visitors)	Vista para usuarios visitantes
`AmenitiesScreen`	`/(tabs)/01_home/amenities`	Listado de amenities de la propiedad
`GalleryScreen`	`/(tabs)/01_home/gallery`	Galería de fotos de la propiedad

API Endpoints

Este módulo no expone endpoints propios. Consume datos de propiedades a través del hook useProperties del módulo property.

Hooks

Hook	Descripción
`useHome()`	Hook principal del módulo. Expone propiedades owned/public, selección de propiedad activa, tipo/rol del usuario, estado de carga y visibilidad del selector.
`useFinancialReport2025(email?, propertyId?)`	Resuelve el modo (`card` \| `link`) y la URL del reporte financiero externo (`finance.vivla.com`) para el email y propiedad dados. Controlado por el feature flag `financialReport2025`.

useHome
useFinancialReport2025

const {
  ownedProperties,
  publicProperties,
  selectedProperty,
  selectProperty,
  userType,
  userRole,
  isLoading,
  selectorVisible,
  setSelectorVisible,
} = useHome();

const { isEnabled, mode, url } = useFinancialReport2025(email, propertyId);

El feature flag financialReport2025 devuelve el modo como string (card o link). El hook solo expone mode/url cuando el valor es un modo válido; en caso contrario isEnabled es false. La url solo se genera si se pasan email y propertyId.

Tipos principales

interface HomeState {
  selectedPropertyId: string | null;
  hasSelectedInCurrentAppSession: boolean;
  selectorVisible: boolean;
}

interface PropertySelectorProps {
  properties: Property[];
  selectedPropertyId: string | null;
  onSelect: (propertyId: string) => void;
  visible: boolean;
  onClose: () => void;
}

Store

El módulo mantiene un store local (HomeState) que persiste:

selectedPropertyId — ID de la propiedad actualmente seleccionada.
hasSelectedInCurrentAppSession — Indica si el usuario ya seleccionó una propiedad en la sesión actual.
selectorVisible — Controla la visibilidad del modal del selector de propiedades.

Componentes destacados

HomePropertyHero

Sección hero con la imagen principal de la propiedad seleccionada. Muestra nombre, ubicación y acceso rápido a la galería.

HomePropertySelector

Selector de propiedades con implementaciones separadas para iOS y Android. Permite cambiar entre propiedades owned y public.

HomePropertyDetails

Detalles de la propiedad seleccionada: descripción, amenities destacadas, información general y reporte financiero (si aplica).

HomeScreenSkeleton

Loading skeleton que se muestra mientras se cargan los datos de la propiedad. Replica la estructura visual del dashboard.

HomeEmptyState

Estado vacío que se muestra cuando el usuario no tiene propiedades asociadas. Incluye llamada a la acción para explorar propiedades públicas.

El feature flag financialReport2025 determina cómo se ofrece el reporte financiero externo. En modo card se muestra una tarjeta en el hero, y en modo link un acceso directo; ambos abren la URL de finance.vivla.com. El hook useFinancialReport2025 se consume desde HomePropertyHero y desde PropertyActions (módulo property). Cuando el flag no devuelve un modo válido, no se renderiza nada.

Overview

Architecture

Modules

Shared

Integrations

Guides

Descripción

Screens

API Endpoints

Hooks

Tipos principales

Store

Componentes destacados

HomePropertyHero

HomePropertySelector

HomePropertyDetails

HomeScreenSkeleton

HomeEmptyState

​Descripción

​Screens

​API Endpoints

​Hooks

​Tipos principales

​Store

​Componentes destacados

HomePropertyHero

HomePropertySelector

HomePropertyDetails

HomeScreenSkeleton

HomeEmptyState

Descripción

Screens

API Endpoints

Hooks

Tipos principales

Store

Componentes destacados