User Directory & Profile
Relevant source files
The following files were used as context for generating this wiki page:
The User Directory and Profile system in ElmecV2 provides a centralized interface for managing, searching, and interacting with personnel within the organization. It serves as the primary communication hub, allowing users to locate colleagues based on categories or zones and initiate direct actions such as phone calls, emails, or real-time chats. Sources: README.md:14-25, app/(tabs)/directory.tsx:1-35
Introduction
The User Directory module is designed for performance and usability, featuring an optimized list of up to 15 users to maintain responsiveness while providing comprehensive filtering by category and zone. The Profile system complements this by offering personal information views, notification settings, and administrative dashboards for privileged users. Together, they ensure secure, role-based access to organizational data through Supabase's Row Level Security (RLS) and real-time synchronization. Sources: VALIDACION-COMPLETA.md:58-65, app/(tabs)/directory.tsx:288-295
Architecture and Data Flow
The Directory utilizes a React Native FlatList component for efficient rendering of user profiles fetched from the Supabase users table. The data flow starts with a query to the Supabase client, which retrieves active personnel ordered by name. Sources: app/(tabs)/directory.tsx:49-65
Component Logic
The Directory component manages several states for search queries, category selections, and zone filters. It uses the useEffect hook to load personnel on mount and re-apply filters whenever the dependencies change. Sources: app/(tabs)/directory.tsx:30-46
The diagram above shows the lifecycle of the data within the Directory component, from initial fetch to filtered display. Sources: app/(tabs)/directory.tsx:49-106
User Directory Features
The Directory module provides multiple interaction points for each user card. Actions are handled via the Linking API for native device capabilities and internal routing for app-specific features like Chat or Requests. Sources: app/(tabs)/directory.tsx:114-165
Action Handlers
| Action | Implementation | Purpose |
|---|---|---|
| Call | Linking.openURL('tel:...') | Initiates a native phone call. |
Linking.openURL('mailto:...') | Opens the default mail client. | |
Linking.openURL('whatsapp://send?phone=...') | Opens WhatsApp with the user's number. | |
| Chat | createChatRoom(person.id) | Initiates an in-app real-time chat session. |
| Request | router.push('/(tabs)/requests') | Navigates to the requests tab with the agent pre-selected. |
Sources: app/(tabs)/directory.tsx:114-165, VALIDACION-COMPLETA.md:61-65
User Metadata and Display
User profiles are visually enriched with status indicators and category badges. The system differentiates between roles such as 'admin', 'agent', and 'customer'. Sources: app/(tabs)/directory.tsx:248-278, scripts/setup-supabase-complete.js:43-77
This sequence illustrates how local filtering provides immediate feedback without additional network requests after the initial load. Sources: app/(tabs)/directory.tsx:84-106
Data Structure and Schema
The directory and profile system relies on the users table in the Supabase schema. This table stores both authentication-linked data and organizational metadata. Sources: scripts/setup-supabase-complete.js:37-77, scripts/create-auth-invites.js:69-80
User Table Fields
| Field | Type | Description |
|---|---|---|
id | UUID | Primary key, linked to Auth.uid(). |
nombre | TEXT | First name of the user. |
apellido_paterno | TEXT | Father's last name. |
rol | TEXT | Access level: admin, agent, or customer. |
categoria | TEXT | Department (e.g., Agentes de venta, Soporte). |
zona | TEXT | Geographic region (e.g., Norte, Sur). |
empresa | TEXT | Company name (e.g., ELMEC). |
activo | BOOLEAN | Status flag for directory visibility. |
Sources: app/(tabs)/directory.tsx:325-345, scripts/setup-supabase-complete.js:43-77
Administrative and Profile Management
Administrators have access to an AdminDashboard and tools to generate invitation links for new personnel. The system uses a service_role key via scripts to manage batch user creation and link generation. Sources: VALIDACION-COMPLETA.md:52-57, scripts/create-auth-invites.js:14-25
Invitation Flow
For organizational security, users are created by admins who then generate specific invitation links. This prevents arbitrary registrations while ensuring metadata like company, zone, and role are correctly assigned at the point of creation. Sources: scripts/create-auth-invites.js:56-118
The flow ensures that users in the public.users table are synchronized with Supabase Auth identities. Sources: scripts/create-auth-invites.js:56-125
Conclusion
The User Directory & Profile system is a robust component of the ElmecV2 application, integrating real-time data with native device functions. By leveraging Supabase for both identity and organizational data, the system maintains a high standard of security and performance, allowing for efficient communication and resource management across various company roles and zones. Sources: VALIDACION-COMPLETA.md:144-150, README.md:120-130