11 frontend modules
Overview
The frontend is organized into modules serving different user personas and use cases. Each module provides specific functionality while maintaining consistent design patterns and user experience.
Module Architecture
Public Modules
Landing Page
Marketplace
Project Details
User Account Modules
Wallet Connection
Account Management
Retail Modules
Retail Dashboard
Holdings View
Purchase Flow
Retirement Flow
Certificates
Enterprise Modules
Enterprise Dashboard
Organization Management
Emissions Mapping
Purchase & Holdings
Retirement Scheduler
Reports Export
Admin Modules
Admin Panel
Project Review
PoAI Workflow
Governance Support
Public Pages
Landing Page
Purpose: Platform introduction and entry point
Components:
Hero section with value proposition
Key features overview
How it works (simplified flow)
Project highlights
Call-to-action buttons
Footer with links
Key Features:
Responsive design
Clear value proposition
Navigation to marketplace
Sign up / Connect wallet CTAs
Marketplace
Purpose: Browse and discover carbon projects
Components:
Project Grid/List:
Project cards with:
Project image
Project name and type
Location
PoAI verification badge
Vintage year
Price per ton
Remaining units
"View Details" button
Filters:
Project type (Renewable Energy, Reforestation, etc.)
Geography (country/region)
Vintage year
Price range
Verifier
Methodology
Search:
Search by project name
Search by location
Search by verifier
Sorting:
Price (low to high, high to low)
Vintage (newest, oldest)
Availability
Recently added
Pagination:
Load more / infinite scroll
Page navigation
Key Features:
Fast loading (lazy load images)
Filter persistence (URL params)
Responsive grid/list toggle
Project count display
Project Details Page
Purpose: Detailed project information and purchase interface
Components:
Project Header:
Project name and type
PoAI verification badge (prominent)
Project image gallery
Share buttons
Project Information:
Geography (with map if available)
Methodology and verifier details
Vintage year
Project description
Impact metrics
PoAI Verification Section:
Asset Integrity status
Data Integrity status
Process Integrity status
Proof bundle link (if accessible)
Verification timestamp
Pricing & Availability:
Current price per ton
Units available
Minimum/maximum purchase
Price history (if available)
Purchase Section:
Quantity input (supports decimals)
Total price calculation
Connect wallet prompt (if not connected)
Purchase button
Payment method selection
Project Documents (if public):
Verifier reports
Impact assessments
Project photos
Certificates
Related Projects:
Similar projects
Same geography
Same type
Key Features:
Clear PoAI status display
Real-time availability updates
Purchase flow integration
Document viewer
Wallet / Account Module
Connect Wallet
Purpose: Enable wallet connection for non-custodial users
Components:
Wallet provider buttons (MetaMask, WalletConnect, etc.)
Connection status indicator
Wallet address display
Disconnect button
Network selector (if multi-chain)
Key Features:
Multiple wallet support
Connection persistence
Network validation
Error handling
Create Account (Custodial)
Purpose: Simple account creation for non-crypto users
Components:
Email/password signup form
Terms acceptance
Email verification
Account created confirmation
Key Features:
Simple onboarding
Email verification
Password strength indicator
Account Management
Purpose: User profile and settings
Components:
Profile information
Email/notification preferences
Security settings
Connected wallets
Account deletion
Retail Dashboard
Purpose: Retail user's central hub
Components:
Summary Cards:
Total credits owned
Total value (if applicable)
Number of projects
Total retired
Quick Actions:
Browse projects
Purchase credits
Retire credits
Recent Activity:
Recent purchases
Recent retirements
Recent certificates
Holdings Overview:
Holdings by project (summary)
Link to full holdings view
Key Features:
Clean, simple interface
Quick access to main actions
Activity feed
Retail Holdings View
Purpose: View all credit holdings
Components:
Holdings List:
For each project:
Project name and type
Quantity owned (e.g., "0.25 tons")
Purchase date
Purchase price
Current value (if applicable)
Actions: View details, Retire
Filters:
By project type
By purchase date
By value
Empty State:
"No holdings yet" message
"Browse Projects" CTA
Key Features:
Clear quantity display
Project details accessible
Retirement actions
Retail Purchase Flow
Purpose: Purchase credits with simple UX
Components:
Purchase Form:
Project selection (if not from project page)
Quantity input (with decimal support)
Price display (per unit and total)
Payment method selection
Review summary
Purchase Steps:
Status States:
Ready to purchase
Processing
Success
Failed (with error message)
Key Features:
Decimal quantity input
Real-time price calculation
Clear error messages
Transaction status updates
Retail Retirement Flow
Purpose: Retire credits with certificate generation
Components:
Retirement Form:
Project selection (from holdings)
Quantity input (validated against balance)
Retirement purpose (optional)
Retirement message (optional)
Certificate recipient email (optional)
Retirement Steps:
Status States:
Ready to retire
Processing
Success (certificate available)
Failed (with error message)
Key Features:
Balance validation
Clear retirement impact
Certificate preview
Download options
Retail Certificates
Purpose: View and download retirement certificates
Components:
Certificate List:
All retirement certificates
For each certificate:
Project name
Quantity retired
Retirement date
Certificate status
Actions: Download PDF, View JSON, Share
Certificate Viewer:
Full certificate display
PDF viewer
JSON viewer
Share buttons
Print button
Key Features:
Multiple download formats
Shareable links
Verification links
Print-friendly
Enterprise Dashboard
Purpose: Enterprise user's central hub
Components:
Organization Summary:
Organization name and logo
Team members count
Total credits owned
Total credits retired
Active retirement schedules
Quick Actions:
Map emissions
Purchase credits
Schedule retirement
Export reports
Recent Activity:
Recent purchases
Recent retirements
Scheduled retirements (upcoming)
Team activity
Key Metrics:
Credits by project
Retirement schedule status
Compliance status
Key Features:
Role-based content
Team management access
Quick access to main features
Enterprise Organization Management
Purpose: Manage organization and team
Components:
Organization Profile:
Organization details
Logo upload
Contact information
Billing information
Team Management:
Team members list
Add team member
Role assignment (Admin, Finance, Auditor, Viewer)
Remove team member
Invite management
Wallet Management:
Connected wallets
Add wallet (multisig support)
Set default wallet
Payment methods
Settings:
Notification preferences
Report formats
Compliance settings
Key Features:
RBAC management
Team invitation workflow
Wallet configuration
Enterprise Emissions Mapping
Purpose: Input and manage emissions data
Components:
Emissions Input Form:
Period selection (monthly, quarterly, annual)
Scope selection (Scope 1, 2, 3)
Category selection
Quantity input (tons CO₂)
Source description
Supporting documents upload
Emissions Summary:
Total emissions by period
Breakdown by scope
Breakdown by category
Trend charts
Recommendations:
Recommended credit quantity
Project mix suggestions
Retirement schedule suggestions
Key Features:
Multi-period support
Document upload
Calculation automation
Recommendations engine
Enterprise Purchase & Holdings
Purpose: Purchase credits and view holdings
Components:
Purchase Interface:
Portfolio selection
Project mix configuration
Quantity input (exact decimals)
Bulk purchase options
Purchase schedule (one-time or recurring)
Holdings View:
Holdings by project
Total holdings
Purchase history
Allocation breakdown
Key Features:
Exact quantity purchasing
Portfolio management
Bulk operations
Purchase scheduling
Enterprise Retirement Scheduler
Purpose: Configure and manage scheduled retirements
Components:
Retirement Plan Creation:
Schedule selection (monthly, quarterly, annual, custom)
Amount configuration (fixed, percentage, match emissions)
Project allocation
Automation settings (auto vs approval required)
Start date
Retirement Plans List:
Active plans
Paused plans
Completed plans
Plan details and status
Pending Approvals:
Retirement requests awaiting approval
Approve/reject actions
Retirement details
Retirement History:
Past retirements
Scheduled retirements (upcoming)
Retirement certificates
Key Features:
Flexible scheduling
Approval workflows
Automation control
History tracking
Enterprise Reports Export
Purpose: Generate and export ESG reports
Components:
Report Types:
Retirement certificates
Audit trails
ESG reports
Compliance documentation
Report Configuration:
Date range selection
Project filter
Format selection (PDF, CSV, JSON, Excel)
Include/exclude sections
Report Generation:
Generate button
Processing status
Download link
Email delivery (optional)
Report History:
Previously generated reports
Download links
Generation timestamps
Key Features:
Multiple formats
Customizable reports
Batch export
Email delivery
Admin Panel
Purpose: Platform administration and operations
Components:
Dashboard:
Platform metrics
Recent activity
System health
Support tickets
Project Management:
Project submissions list
Project status overview
Project details view
Project actions (approve, suspend, etc.)
PoAI Workflow:
PoAI cases list
Case assignment
Review interface
Approval workflow
Governance Support:
Proposal creation assistance
Proposal status tracking
Execution triggers
Support:
Support tickets list
Ticket management
User communication
Key Features:
Comprehensive admin tools
Workflow management
System monitoring
Common UI Components
PoAI Badge
Visual indicator of verification status
Color-coded (green = approved, yellow = pending, red = rejected)
Tooltip with details
Project Card
Reusable project display component
Consistent styling
Hover effects
Transaction Status
Processing indicator
Success/error states
Transaction hash link
Certificate Viewer
PDF display
JSON viewer
Download buttons
Last updated