Skip to main content

​
Member Dashboard

Your member dashboard is the central hub for all platform activities. It provides a personalized view of content, events, and community resources.

​
Dashboard Layout

The dashboard is organized into three main sections accessible via tabs:

​
Tab Navigation

Resumen

Main overview with personalized content and upcoming events

Historial

Complete history of your activities and interactions

Mi Perfil

Profile editor for personal information and preferences

​
Header Section

The dashboard header is a customizable, immersive component that displays:

​
Your Identity

  • Profile Avatar: White circular icon with your initial
  • Greeting: “Hola, [Your First Name]”
  • Profile Badge: Your wizard profile type (e.g., “Miembro”, “Explorador”)
  • Member Since: Join date in Spanish format (e.g., “octubre 2023”)
  • Online Indicator: Green status dot

​
Cover Image Customization

The header includes a customizable background cover image:
1

Hover Over Header

Move your mouse over the header area to reveal the edit button.
2

Click Camera Icon

Click the image icon in the top-right to cycle through preset backgrounds.
3

Background Rotates

Each click advances to the next beautiful landscape image from the preset collection.
The cover image is preserved in your user profile and persists across sessions.

​
Action Buttons

Opens the external donation platform in a new tab:
https://contribuciones.cafh.cl/login
Styled with the cafh-peach theme color.
Switches to the Mi Perfil tab for editing your profile information.
Logs out by calling db.auth.logout() and redirects to /login.

​
Resumen Tab (Main View)

The main dashboard view uses a two-column layout:

​
Left Column: Main Content (8/12 width)

​
Tu Biblioteca Personalizada

This is the heart of content personalization:
  • Purpose: Displays content matched to your interests
  • Content Sources:
    • Articles from the content database
    • Media assets (documents, videos, audio)
  • Filtering Logic: 
    items.filter(item => 
  item.tags.some(tag => userInterests.includes(tag))
)
  • Limit: Top 6 recommended items
Content Card Information:
  • Type badge (Article, Resource, Video, Audio)
  • Title and brief description
  • Icon based on content type:
    • 📄 Article (Feather icon, blue background)
    • 📥 Resource/Document (Download icon, green background)
    • 🎵 Audio (Play icon, purple background)
    • 🎬 Video (Video icon, red background)
If no matching content is found, you’ll see a message prompting you to complete the Journey Wizard or add tags to your profile.

​
Content Viewer Modal

Clicking any content card opens a full-screen modal viewer:
  • Articles: Display with styled layout and reading analytics
  • Videos: Embedded video player with autoplay
  • Audio: Clean audio player with play controls
  • Documents: Embedded iframe for PDF viewing
Analytics Tracking: When you open content, the system automatically: 
db.analytics.trackConsumption({
  assetId: item.id,
  assetName: item.title,
  assetType: item.type,
  tags: item.tags
});
This builds your activity history and improves future recommendations.

​
Right Column: Sidebar (4/12 width)

​
Sala Virtual (Virtual Room) Widget

The Zoom widget shows your next upcoming online event: When an Event Exists:
  • Event title and status badge
  • Date and time (with calendar/clock icons)
  • Live indicator if event is currently happening
  • “Unirse a la sesión” button to join
When No Events:
  • Calendar icon with message
  • “Sin sesiones virtuales próximas”
  • Link to view full calendar

Learn More

See the complete guide to joining and participating in virtual meetings.

​
Novedades para ti (News for You)

Displays the 2 most recent blog posts:
  • Thumbnail image (64x64px, rounded)
  • Post title (truncated to 2 lines)
  • Date and author metadata
  • Hover effect with scale animation
Data Source: 
const recentPosts = db.blog.getAll().slice(0, 2);

​
Historial Tab

Your complete activity timeline showing:

​
Activity Types

  • Events: Attended sessions and meetings
  • Reading: Articles and resources consumed
  • Meditation: Meditation sessions logged
  • Donations: Contribution history

​
Timeline Display

Activities are shown in a vertical timeline with:
  • Timeline Rail: Visual line connecting activities
  • Activity Nodes: Circular markers for each entry
  • Activity Cards:
    • Title and description
    • Activity type and date
    • Status badge (“Completado”, “Registrado”)
Data Structure: 
interface UserActivity {
  id: string;
  type: 'Event' | 'Reading' | 'Donation' | 'Meditation';
  title: string;
  date: string;
  status: 'Completed' | 'Registered';
}
Your activity history is automatically populated as you interact with content and attend events. No manual logging required!

​
Mi Perfil Tab (Profile Editor)

Edit your personal information with a clean form interface:

​
Editable Fields

Your full display name shown throughout the platform.
Contact phone number (format: +56 9 1234 5678)
Your current city (e.g., “Santiago”, “Buenos Aires”)

​
Save Process

1

Edit Fields

Update any of the editable fields with your new information.
2

Click Save

Click the “Guardar Cambios” button (with Save icon).
3

Auto-Update

The system updates your profile via:
db.auth.updateCurrentUser({
  name: profileForm.name,
  phone: profileForm.phone,
  city: profileForm.city
});
4

Instant Reflection

Changes are immediately reflected throughout the platform, including the dashboard header.
Profile changes are saved to browser storage. If you’re using multiple devices, update your profile on each one for consistency.

​
Responsive Design

The dashboard adapts seamlessly to all screen sizes:
  • Desktop: Full two-column layout with sidebar
  • Tablet: Stacked columns with adjusted spacing
  • Mobile: Single column with optimized touch targets
Key Breakpoints:
  • md: prefix for medium screens and up
  • lg: prefix for large screens (two-column layout)
  • Tab navigation optimized for mobile with icon-only display

​
Performance Features

​
Efficient Data Loading

The dashboard loads data on mount using React’s useEffect: 
useEffect(() => {
  // 1. Load authenticated user
  const user = db.auth.getCurrentUser();
  
  // 2. Load wizard profile
  const wizardProfile = loadWizardProfile(user.id);
  
  // 3. Determine interests
  const interests = wizardProfile?.derivedTags || user.interests;
  
  // 4. Load and filter content
  const recommendations = filterByInterests(interests);
  
  // 5. Load recent blog posts
  const posts = db.blog.getAll().slice(0, 2);
  
  // 6. Find next virtual event
  const nextEvent = findNextOnlineEvent();
}, []);

​
Optimized Rendering

  • Conditional rendering based on active tab
  • Lazy loading of content modals
  • Memoized state updates to prevent unnecessary re-renders

Performance Tip

The dashboard limits recommendations to 6 items and blog posts to 2, ensuring fast load times even with large content libraries.

Build docs developers (and LLMs) love

Get started for freeTalk to us