User Profile
Relevant source files
The following files were used as context for generating this wiki page:The User Profile module serves as the central hub for user-specific information and actions within the ELMEC application. It provides users with a view of their personal data, access to application settings, and navigation to role-specific features. For standard users, it offers summaries of their activity, such as service requests. For administrators, it acts as a gateway to the Admin Dashboard.
This module is responsible for displaying user identity, managing account settings, viewing personal activity metrics, and handling session termination (logout). It integrates with the authentication context to retrieve user data and leverages role-based access control to conditionally display administrative functions.
1. Main Profile Screen
The main profile screen is the primary interface for the user profile module. It displays key user information, provides navigation to various sub-sections, and includes diagnostic and session management tools.
Sources: app/(tabs)/profile.tsx
1.1. Core Components
The screen is composed of several key visual and functional components:
| Component | Description | Source |
|---|---|---|
| User Header | Displays the user's full name, email, and role (e.g., 'admin', 'agent'). | app/(tabs)/profile.tsx:103-118 |
| Action Menu | A list of navigable items, including role-specific links like "Admin Dashboard". | app/(tabs)/profile.tsx:126-192 |
| Requests Summary | Shows a count of the user's service requests, grouped by status ('nuevo', 'asignado', 'en_proceso', 'resuelto'). | app/(tabs)/profile.tsx:130-149 |
| Health Check | A button to test the connection to the Supabase backend. | app/(tabs)/profile.tsx:182-186 |
| Logout Button | A prominent button to sign the user out of the application. | app/(tabs)/profile.tsx:199-205 |
| App Version | Displays the application's version number. | app/(tabs)/profile.tsx:212-214 |
1.2. Navigation and Data Flow
The main profile screen acts as a navigator to other parts of the application. The data fetching is primarily focused on summarizing the user's requests.
This diagram illustrates the user flow and component interactions on the main profile screen.
1.3. Health Check
The "Health Check" feature provides a simple diagnostic tool to verify connectivity with the Supabase backend. When pressed, it attempts to fetch a single record from the requests table.
- On Success: A toast notification "Conexión con Supabase exitosa." is displayed, and an informational log is created using
Logger.info. - On Failure: A toast notification "Error de conexión con Supabase." is shown, and an error log is created using
Logger.error.
Sources: app/(tabs)/profile.tsx:80-92, utils/logger.ts:31, 39
2. Account Management
The Account Management screen allows users to view and update their personal information and change their password.
Sources: app/settings/account.tsx
2.1. Updatable Fields
Users can modify a specific set of fields. The form is pre-populated with the user's current data fetched via the useAuth hook.
| Field | Description | Validation | Source |
|---|---|---|---|
| Nombre(s) | User's first name. | Required | app/settings/account.tsx:130 |
| Apellido Paterno | User's paternal last name. | Required | app/settings/account.tsx:137 |
| Apellido Materno | User's maternal last name. | Optional | app/settings/account.tsx:144 |
| Celular | User's mobile phone number. | Optional | app/settings/account.tsx:151 |
| Password | New password for the user. | Min 6 characters if provided. | app/settings/account.tsx:162 |
2.2. Profile Update Process
The following sequence diagram shows the process of updating user information.
Sources: app/settings/account.tsx:55-88
3. User-Specific Data Views
The profile module provides entry points to screens that display data filtered for the logged-in user.
3.1. Requests by Status
This screen lists all service requests created by the current user that match a specific status (e.g., 'nuevo', 'resuelto'). The status is passed as a navigation parameter.
Sources: app/profile/requests-by-status.tsx
The data loading flow is as follows:
- The screen retrieves the
statusparameter from the URL usinguseLocalSearchParams. - A Supabase query is constructed to fetch records from the
requeststable. - The query filters requests where
usuario_idmatches the current user's ID andestatusmatches the provided status. - The results are displayed in a list.
This diagram shows the data flow for the "Requests by Status" screen.
3.2. Admin Dashboard
For users with the admin role, the main profile screen includes a navigation link to the Admin Dashboard. This feature is conditionally rendered based on the user's role.
Sources: app/(tabs)/profile.tsx:151-155, VALIDACION-COMPLETA.md
4. User Data Model
The user data model is defined in the Supabase users table and referenced across the application. The create-auth-invites.js script provides insight into the expected metadata associated with a user profile.
Sources: scripts/create-auth-invites.js
4.1. User Schema
The following ER diagram describes the users table structure as inferred from the available files.
This data is stored in the user_metadata field within Supabase Auth and is also synchronized to the public users table.
5. Summary
The User Profile module is a critical component for user interaction and personalization in the ELMEC application. It provides a clear and organized interface for users to manage their account, view their activity, and access role-specific functionalities. The architecture relies on a central authentication context (useAuth) to source user data and Supabase for data persistence and updates. The inclusion of features like the Admin Dashboard link and detailed request summaries makes the profile screen a dynamic and essential part of the user experience.