Saltar a contenido

Pantalla: Adjuntar Documentos

Identificador: SCR-EVT-005 Modulo: MTS-EVT-001 - Eventos de Salud Version: 1.0.0 Fecha: 2025-12-05 Autor: MobileUxUiDrone (Eight of Eight) Estado: Especificado


1. Informacion General

Atributo Valor
Nombre Adjuntar Documentos
Proposito Capturar y gestionar fotos asociadas a tratamientos
Tipo Bottom Sheet / Full Screen
Acceso Registro Tratamiento > Agregar foto
Prioridad Media

2. Wireframe ASCII

2.1. Selector de Fuente

+------------------------------------------+
|            AGREGAR FOTO                   |
+------------------------------------------+
|                                           |
|  +------------------------------------+   |
|  |                                    |   |
|  |         [Camera Icon]              |   |
|  |         Tomar foto                 |   |
|  |                                    |   |
|  +------------------------------------+   |
|                                           |
|  +------------------------------------+   |
|  |                                    |   |
|  |         [Gallery Icon]             |   |
|  |         Elegir de galeria          |   |
|  |                                    |   |
|  +------------------------------------+   |
|                                           |
|           [Cancelar]                      |
|                                           |
+------------------------------------------+

2.2. Captura de Foto

+------------------------------------------+
|  [X]                              [Flash]  |
+------------------------------------------+
|                                           |
|                                           |
|                                           |
|         +------------------+              |
|         |                  |              |
|         |    [Viewfinder]  |              |
|         |                  |              |
|         |                  |              |
|         +------------------+              |
|                                           |
|                                           |
|                                           |
|  +------------------------------------+   |
|  | [i] Asegurate de tener buena       |   |
|  |     iluminacion y enfoque          |   |
|  +------------------------------------+   |
|                                           |
|         +------------------+              |
|         |    [Capture]     |              |
|         +------------------+              |
|                                           |
|  [Thumbnail] [Thumbnail] [Thumbnail]      |  <- Fotos recientes
|                                           |
+------------------------------------------+

2.3. Preview y Confirmacion

+------------------------------------------+
|  [<]    Vista Previa               [Crop]  |
+------------------------------------------+
|                                           |
|  +------------------------------------+   |
|  |                                    |   |
|  |                                    |   |
|  |         [Foto capturada]           |   |
|  |                                    |   |
|  |                                    |   |
|  |                                    |   |
|  +------------------------------------+   |
|                                           |
|  Tipo de foto                             |
|  [Antes*] [Despues] [Progreso]            |
|                                           |
|  Fecha y hora                             |
|  [05/12/2025  07:30]              [Ahora] |
|                                           |
|  Nota (opcional)                          |
|  +------------------------------------+   |
|  | Aspecto de la herida al inicio    |   |
|  +------------------------------------+   |
|                                           |
+------------------------------------------+
|  [Descartar]          [Usar esta foto]    |
+------------------------------------------+

2.4. Galeria de Fotos del Evento

+------------------------------------------+
|  [<]    Fotos de Curacion          [ADD]  |
+------------------------------------------+
|                                           |
|  5 DE DICIEMBRE                           |
|  +------------------------------------+   |
|  | +-------------+ +-------------+       |
|  | |             | |             |       |
|  | | [Foto 1]    | | [Foto 2]    |       |
|  | |             | |             |       |
|  | +-------------+ +-------------+       |
|  | Antes - 07:30   Despues - 07:45       |
|  +------------------------------------+   |
|                                           |
|  4 DE DICIEMBRE                           |
|  +------------------------------------+   |
|  | +-------------+ +-------------+       |
|  | |             | |             |       |
|  | | [Foto 3]    | | [Foto 4]    |       |
|  | |             | |             |       |
|  | +-------------+ +-------------+       |
|  | Antes - 07:30   Despues - 07:42       |
|  +------------------------------------+   |
|                                           |
|  3 DE DICIEMBRE                           |
|  +------------------------------------+   |
|  | +-------------+ +-------------+       |
|  | |             | |             |       |
|  | | [Foto 5]    | | [Foto 6]    |       |
|  | |             | |             |       |
|  | +-------------+ +-------------+       |
|  +------------------------------------+   |
|                                           |
|  [Ver evolucion]                          |  <- Timeline visual
|                                           |
+------------------------------------------+

2.5. Vista de Evolucion

+------------------------------------------+
|  [<]    Evolucion de Herida               |
+------------------------------------------+
|                                           |
|  PROGRESO VISUAL                          |
|                                           |
|  +------------------------------------+   |
|  |  <  [Foto grande]  >               |   |  <- Carousel
|  |      5 de diciembre                   |
|  |      Mejorando                        |
|  +------------------------------------+   |
|                                           |
|  [*] [o] [o] [o] [o]                      |  <- Indicadores
|                                           |
|  TIMELINE                                 |
|  +------------------------------------+   |
|  | Dic 5  [Thumb] Mejorando             |
|  | Dic 4  [Thumb] Mejorando             |
|  | Dic 3  [Thumb] Igual                 |
|  | Dic 2  [Thumb] Igual                 |
|  | Dic 1  [Thumb] Inicial               |
|  +------------------------------------+   |
|                                           |
|  RESUMEN                                  |
|  +------------------------------------+   |
|  | Total de fotos: 10                    |
|  | Dias de seguimiento: 5                |
|  | Tendencia: Mejorando                  |
|  +------------------------------------+   |
|                                           |
+------------------------------------------+

3. Componentes UI

3.1. Camera View

Propiedad Valor
Componente CMP-CAM-001 (Camera View)
Controles Flash, Captura
Guias Marco de enfoque
Preview Ultimas 3 fotos

3.2. Photo Preview

Propiedad Valor
Componente CMP-IMG-008 (Photo Preview)
Acciones Crop, Rotar
Metadata Tipo, Fecha, Nota

3.3. Photo Grid

Propiedad Valor
Componente CMP-GRD-001 (Photo Grid)
Columnas 2
Agrupacion Por fecha
Labels Tipo + hora
Propiedad Valor
Componente CMP-CRS-001 (Photo Carousel)
Navegacion Swipe horizontal
Indicadores Dots
Metadata Fecha + estado

4. Comportamientos

4.1. Captura de Foto

Paso Accion
1 Usuario tap "Agregar foto"
2 Seleccionar camara o galeria
3 Capturar/seleccionar imagen
4 Preview con opcion de recortar
5 Seleccionar tipo (antes/despues)
6 Confirmar y adjuntar

4.2. Almacenamiento

Aspecto Valor
Compresion 80% JPEG
Max dimension 2048px lado mayor
Ubicacion Local + Cloud (Pro/Perfect)
Cifrado E2E obligatorio

4.3. Consentimiento para Compartir

Al intentar compartir fotos:

  1. Mostrar lista de fotos a compartir
  2. Solicitar consentimiento explicito
  3. Confirmar con biometria
  4. Acceso temporal segun configuracion

5. Datos Requeridos

interface PhotoAttachment {
  id: string;
  eventId: string;
  type: 'BEFORE' | 'AFTER' | 'PROGRESS';
  uri: string;
  thumbnailUri: string;
  timestamp: Date;
  note?: string;
  shared: boolean;
  sharedWith?: string[];
}

6. Accesibilidad

6.1. Labels

Elemento accessibilityLabel
Camera button "Capturar foto"
Gallery button "Seleccionar de galeria"
Photo thumbnail "Foto {tipo}, {fecha}"
Carousel "Evolucion, foto {N} de {total}"

6.2. Feedback Haptico

Evento Feedback
Captura Vibration corta
Guardado Confirmacion haptica
Error Vibration de error

7. Consideraciones de Privacidad

7.1. Disclaimers

+------------------------------------------+
| [i] Las fotos de tratamientos contienen  |
|     informacion de salud sensible.       |
|     Solo se comparten con tu             |
|     consentimiento explicito.            |
+------------------------------------------+

7.2. Retencion

  • Fotos almacenadas 7 anos (requisito legal)
  • Usuario puede solicitar eliminacion
  • Backup cifrado E2E

8. Referencias


Documento generado por MobileUxUiDrone (Eight of Eight)