Admin Dashboard & Analytics
Relevant source files
The following files were used as context for generating this wiki page:
The Admin Dashboard & Analytics system serves as the central management hub for the wedding invitation platform. It provides administrators with real-time visibility into guest RSVPs, attendance statistics, and content configuration. The system is protected by an authentication layer and allows for granular control over the invitation's visual theme, event details, and guest communications via WhatsApp integration.
Sources: src/pages/AdminPage.jsx:9-15, src/components/admin/Dashboard.jsx:7-9
System Architecture & Navigation
The administration interface is structured as a Single Page Application (SPA) component that manages multiple views through a local state. It utilizes a sticky header for quick actions (Logout, View Invitation) and a secondary navigation bar to toggle between the primary management modules.
Core Navigation Modules
| Module | ID | Description |
|---|---|---|
| Dashboard | dashboard | High-level summary of guest statistics and recent registrations. |
| Guests | guests | Detailed guest management, filtering, and communication tools. |
| Content | content | Real-time editor for event details, gallery, and location data. |
Sources: src/pages/AdminPage.jsx:20-24, src/pages/AdminPage.jsx:62-108
The diagram above illustrates the conditional rendering logic and component hierarchy within the Admin portal.
Sources: src/pages/AdminPage.jsx:13-108
Analytics & Statistical Tracking
The dashboard tracks and displays key performance indicators (KPIs) derived from the GuestContext. These statistics are calculated dynamically to reflect the current state of the invitation database.
Tracked Metrics
- Total Guests: Aggregate count of all registered entries.
- Confirmed: Guests who have set their attendance status to "confirmed".
- Pending: Guests who have not yet responded.
- Adults/Children: Breakdown of total headcounts based on guest category.
Sources: src/components/admin/Dashboard.jsx:8-37, src/components/admin/GuestList.jsx:106-111
The data flow for analytics involves pulling the raw guest array from context and processing it through a series of filters to populate the UI cards.
Sources: src/components/admin/Dashboard.jsx:7-38
Guest Management & Communication
The guest management system includes advanced features for bulk operations and direct messaging. It supports searching by name, email, or phone, and filtering by attendance status.
WhatsApp Broadcast System
The platform includes a specialized WhatsAppBroadcast component that allows for personalized bulk messaging using template variables.
| Variable | Key | Description |
|---|---|---|
| Guest Name | {{nombre}} | Personalized name of the recipient. |
| Event Date | {{fecha}} | Formatted date of the wedding. |
| Location | {{lugar}} | Venue name. |
| Status | {{estado}} | Current RSVP status (Confirmed, Pending). |
Sources: src/components/admin/WhatsAppBroadcast.jsx:79-92, src/components/admin/WhatsAppBroadcast.jsx:144-180
Data Portability
The GuestImportExport module facilitates data management via:
- CSV/JSON Export: Allows administrators to download the full guest list for external use (e.g., Excel, Google Sheets).
- Bulk Import: Supports importing guests from files, including a normalization engine to handle varied attendance labels (e.g., "Si", "Yes", "Confirmado" all map to
confirmed).
Sources: src/components/admin/GuestImportExport.jsx:32-62, src/components/admin/GuestImportExport.jsx:146-155
Content & Theme Configuration
The ContentEditor and ThemeEditor modules allow for real-time updates to the invitation without redeploying code.
Configuration Areas
- Hero/Portada: Names, dates, and background image uploads (base64).
- Events: CRUD operations for multiple event types (Ceremony, Reception, Cocktail).
- Theme: Management of primary/secondary colors, typography, and animation intensity.
- Location: Integration with a
LocationPickerfor interactive map coordinates.
Sources: src/components/admin/ContentEditor.jsx:42-50, src/components/admin/ThemeEditor.jsx:136-230
This sequence shows the reactive data flow between the admin editor and the public invitation view.
Sources: src/components/admin/ContentEditor.jsx:54-62, src/pages/AdminPage.jsx:101-103
Conclusion
The Admin Dashboard & Analytics system provides a robust toolset for managing wedding logistics. By combining real-time data visualization with flexible content management and integrated communication tools, it ensures that administrators can efficiently monitor RSVPs and maintain a consistent brand identity across the invitation platform.
Sources: src/pages/AdminPage.jsx:5-108, src/components/admin/Dashboard.jsx:5-48