Header Component

Header Component

Component File: src/components/shared/Header.tsx Usage: Global top navigation bar Access Level: All authenticated users Last Updated: April 13, 2026

Overview

The Header component provides the top navigation bar for the application. It displays the organization selector, global search, MintyAI assistant, notification bell, and user profile menu. The header is persistent across all pages and provides quick access to key global functions.

UI Features

Main Elements

• Organization Selector - Dropdown to switch between nonprofits (parent org view). While entitiesLoading is true, the center slot shows a muted Loading… pill with role="status" — no spinner or duck (Header.tsx).
• Global Search - People & organizations (CRM records) plus pages & tools (Cmd/Ctrl+K)
• MintyAI Assistant - Quick access to AI assistant (parent_org and fund_user only)
• Notification Bell - Shows notification count badge
• User Profile Menu - Avatar with dropdown menu

Global Search (March 2026)

The header search modal (GlobalSearch.tsx) combines:

People & Organizations (database, debounced ~300ms, min 2 characters):

• Donors, prospects, vendors, volunteers, contacts — scoped to the current org where applicable; donors include both donation-linked donors and donors created under the org (src/lib/db/global-search.ts).
• Choosing a row deep-links into the right hub/tool via pendingSearchResult.

Pages & Tools (instant fuzzy match on SEARCH_INDEX):

• Navigation pages, hub tools, reports, and actions the user is allowed to see.
• The modal does not surface MintyAI prompts, help templates, or the data-query banner; use MintyAI from the header dropdown or sidebar for AI and query templates.

Result order: People & Organizations first, then Pages & Tools.

April 13, 2026 stability hardening:

• Permission context used by static-index filtering is now memoized to avoid unnecessary result/reset churn.
• Database search now uses a latest-request guard so stale async responses cannot overwrite newer query results while typing quickly.

Canonical technical doc: DEVELOPER-PLAYBOOK §31 — Global Search System.

User Profile Menu Options

• View Profile
• Settings
• Sign Out

Functionality

Organization Switching

• Parent org admins see all nonprofits in dropdown
• Fund users see only their organization
• Selection updates global selectedEntity state
• Triggers data refresh across application

MintyAI Assistant

• Quick access dropdown for AI assistant
• Available to parent_org and fund_user roles
• Opens MintyAI dropdown panel for quick questions
• Full MintyAI page accessible from sidebar

Notifications

• Badge shows unread count
• Click opens notification panel
• Real-time updates (future)

State Management

Global State (AppContext)

• selectedEntity - Current organization
• setSelectedEntity - Change organization
• theme - Current theme ('light' or 'dark')
• toggleTheme - Toggle theme
• notifications - Notification array
• entities - Available organizations

Related Documentation

• 20-ENTITY-SELECTOR.md - Detailed entity/fund selector documentation
• 02-APP-SIDEBAR.md
• 03-NOTIFICATION-PANEL.md
• ../administration/02-SETTINGS.md
• ../tools/07-MINTY-AI.md - Minty AI (separate from global search modal)
• ../../frontend/DEVELOPER-PLAYBOOK.md - §31 Global Search System

Synced from IFMmvp-Frontend documentation: pages/components/01-HEADER.md