Email Components
Specialized components for email templates and Zeigo Hub specific applications, organized by category, documentation status and implementation priority.
Core Email Components
Componentes principales utilizados en templates de email y interfaces específicas
| Component | Category | Status | Usage Context | Variants |
|---|---|---|---|---|
step-status Progress indicator for multi-step processes | Progress & Status | Documented | Onboarding flows, program progression | LinearCircularWith labels |
hub-learning-journey Learning path visualization component | Education | Documented | Education module navigation | Horizontal timelineVertical steps |
program-summary-card Program overview cards with key metrics | Content Cards | Documented | Dashboard, program listings | CompactDetailedWith actions |
dashboard-sponsor Sponsor-specific dashboard components | Dashboard | Documented | Sponsor portal dashboard | OverviewMetricsActions |
invited-participants Participant invitation display cards | User Management | Documented | Program management, invitations | PendingAcceptedDeclined |
participants-information Comprehensive participant data display | User Management | Documented | User profiles, participant management | SummaryDetailedEditable |
to-do-list Task list components with status tracking | Task Management | Documented | Action items, task management | SimpleWith prioritiesWith due dates |
participants-education-material Educational content cards for participants | Education | Documented | Learning modules, resource library | ArticleVideoInteractive |
lesson-card Individual lesson cards (Figma specs missing) | Education | Missing Figma | Course content, lesson navigation | To be defined |
lesson-content-card Lesson content display with media support | Education | Documented | Learning content presentation | TextVideoInteractive |
lesson-programs Program lesson lists and navigation | Education | Documented | Course structure, lesson browsing | GridListTimeline |
search-box Search input components with filters | Navigation | Documented | Content discovery, filtering | SimpleWith filtersAuto-complete |
user-details User profile information display | User Management | Documented | Profile pages, user cards | CompactDetailedEditable |
participant-insights Participant analytics and metrics display | Analytics | Documented | Performance tracking, insights dashboard | SummaryDetailed chartsComparative |
menu Navigation menu components | Navigation | Documented | Site navigation, contextual menus | HorizontalVerticalDropdown |
collapsed-subitems Collapsible menu items with sub-navigation | Navigation | Documented | Hierarchical navigation | AccordionTreeNested |
participants Participant list components with actions | User Management | Documented | User management, participant overview | TableGridCards |
targets-list Goals and targets display with progress | Goals & Targets | Documented | Goal tracking, performance management | Progress barsChartsSummary cards |
program-sponsor-card Sponsor-specific program cards | Content Cards | Documented | Sponsor dashboard, program management | OverviewDetailedActions |
program-card General program display cards | Content Cards | Documented | Program browsing, dashboard | CompactDetailedFeatured |
Analytics Components
Componentes especializados para visualización de datos y métricas
| Component | Category | Status | Usage Context | Variants |
|---|---|---|---|---|
global-energy-breakdown Energy consumption analytics with breakdowns | Analytics | Documented | Environmental impact tracking | Pie chartBar chartTimeline |
maturity-kpi Maturity KPI indicators and progress | Analytics | Documented | Performance assessment, progress tracking | GaugeProgress barScore card |
emissions-intensity-benchmarking Emissions comparison and benchmarking charts | Analytics | Documented | Environmental reporting, comparisons | Comparative chartsIndustry benchmarks |
emissions-over-time Time-based emissions tracking visualization | Analytics | Documented | Trend analysis, progress monitoring | Line chartsArea chartsGrouped data |
Modal Components
Componentes de overlay y modal específicos para funcionalidades avanzadas
| Component | Category | Status | Usage Context | Variants |
|---|---|---|---|---|
carousel-modal Image/content carousel modal component | Modals & Overlays | Documented | Media galleries, content browsing | Image carouselContent carouselMixed media |
improve-maturity-modal Maturity improvement action modals | Modals & Overlays | Documented | Performance improvement suggestions | RecommendationsAction plansProgress tracking |
confirmation-modal Action confirmation dialog components | Modals & Overlays | Documented | Critical actions, data deletion | Simple confirmWith detailsMulti-step |
feedback-modal-content Feedback form content and layouts | Modals & Overlays | Documented | User feedback collection | RatingText feedbackStructured forms |
uploading-img-modal Image upload modal with progress | Modals & Overlays | Documented | File uploads, image management | Single uploadBatch uploadWith preview |
Implementation Status
La mayoría de estos componentes están documentados en el sistema ZUD pero no implementados en esta librería compartida. Representan funcionalidades específicas de Zeigo Hub.
Priority Components:
- • search-box (Navigation)
- • confirmation-modal
- • user-details
- • program-card
Analytics Suite:
- • Energy breakdowns
- • Emissions tracking
- • KPI indicators
- • Benchmarking charts
Education Module:
- • Learning journey
- • Lesson components
- • Progress tracking
- • Educational materials