Activity Feed Component
Component Detail
Description
Paginated, filterable list component that renders a chronological stream of recent activity events across the organization. Displays activity type, peer mentor name, associated contact, timestamp, and current approval status (pending, approved, flagged) for each feed item. Supports client-side data fetching with optimistic UI updates for inline approval actions.
activity-feed-component
Responsibilities
- Render chronological activity feed with pagination controls
- Display activity metadata including type, peer mentor, contact, timestamp, and status
- Provide filter controls for date range, peer mentor, activity type, and status
- Handle optimistic UI updates when coordinators approve or flag activities
- Adapt visible data scope based on user role (coordinator sees local association, org admin sees full organization)
Interfaces
renderFeedItem(activity: Activity)
applyFilters(filters: ActivityFilters)
loadNextPage(cursor: string)
refreshFeed()
handleApprovalAction(activityId: string, action: ApprovalAction)
renderEmptyState()
renderFilterBar()
Relationships
Sub-Components (2)
Horizontal filter bar allowing coordinators and admins to narrow the feed by date range, peer mentor, activity type, and approval status. Uses dropdowns and date pickers with clear/reset functionality.
- Render filter controls for date range, peer mentor, activity type, and status
- Emit filter change events to parent feed component
- Persist active filter state across page navigations
Individual feed item displaying activity details with status badge, peer mentor avatar, contact name, and quick-action buttons for approval or flagging.
- Display activity metadata in a compact card layout
- Show color-coded status badge (pending, approved, flagged)
- Provide inline action buttons for approval workflows
Related Data Entities (3)
Data entities managed by this component