User Interface
PCH-SIG features a modern and responsive web interface, accessible from a browser.
Overview
The interface consists of three main areas:
┌─────────────────────────────────────────────────────────────┐
│ Top bar (Header) │
├────────────┬────────────────────────────────────────────────┤
│ │ │
│ Side │ Content area │
│ menu │ │
│ │ │
│ │ │
└────────────┴────────────────────────────────────────────────┘
Top bar
The top bar contains:
| Element | Description |
|---|---|
| Menu button | Opens/closes the side menu (mobile) or collapses/expands (desktop) |
| Language selector | Language choice (French, English) |
| Notifications | Bell showing unread notifications |
| User profile | Access to profile and logout |
Side menu
The side menu organizes features into thematic groups. Click on a group to expand it and see the submenus.
Navigation groups
Dashboard
- Dashboard: Overview with statistics and charts
Social Registry
- Households: List and household management
- Duplicates: Duplicate detection and merging
- Identity documents: Identity document verification
- Eligibility: Eligibility rules and criteria
Programs
- Donors: Donor management
- Programs: Social program configuration
Health (CHW)
- CHW: Community Health Worker management
- CHW Cycles: CHW subsidy cycles
Cash Transfers
- Cycles: Payment cycles
- Beneficiaries: List of active beneficiaries
- Payments: Transfer tracking
- Recurrence: Automatic recurring cycles
- Reconciliation: Payment reconciliation
- Operator accounts: Mobile Money and bank accounts
GRM - Complaints
- Complaints: Grievance redress mechanism
- My assignments: Complaints assigned to the user
Data
- KoBoToolbox: Kobo form synchronization
- Survey Solutions: Survey Solutions integration
- GIS Map: Cartographic visualization
Monitoring
- Data quality: Quality indicators
- Coverage: Geographic coverage tracking
- Climate: Climate vulnerability data
Reports
- Reports: Report generation
- Government reports: Official reports
Administration
- Audits: Action audit log
- Settings: System configuration
Collapse menu
On desktop, click the collapse button to switch to icon-only mode. The menu retains the group icons, and hovering displays the submenus.
Mobile navigation
On mobile and tablet:
- The side menu is hidden by default
- Click the hamburger icon (☰) to open it
- The menu displays as an overlay on the content
- Click outside to close it
Content area
The content area displays the active page. Common elements include:
Page header
- Title: Page or module name
- Breadcrumb: Hierarchical navigation (e.g., Households > Detail > #12345)
- Actions: Contextual action buttons (Create, Export, etc.)
Data tables
- Search: Quick search field
- Filters: Advanced filters panel
- Pagination: Page navigation
- Selection: Checkboxes for bulk actions
- Sorting: Click on column headers
Forms
- Required fields: Marked with an asterisk (*)
- Validation: Error messages in red below fields
- Buttons: Save, Cancel, Delete
Toast notifications
Temporary notifications appear in the top right corner:
- Green: Success (action completed)
- Red: Error (action failed)
- Yellow: Warning
- Blue: Information
Keyboard shortcuts
| Shortcut | Action |
|---|---|
Ctrl + K | Global search |
Escape | Close a modal |
Enter | Submit a form |
Offline mode
When the connection is lost, a red indicator appears in the top bar. Viewed data remains accessible in read-only mode, but modifications are disabled until the connection returns.
Customization
Language
Change the language via the selector in the top bar. The choice is saved in your browser.
Menu state
The side menu state (expanded or collapsed) is preserved between sessions.
Accessibility
The interface follows accessibility best practices:
- Keyboard navigation
- Sufficient color contrasts
- Labels on form fields
- Explicit error messages