[Frontend] Comprehensive Stream Analytics Explorer, Multi-Dimensional Filtering & Accounting Export #1472

Overview & Background

Users managing hundreds of streams (e.g. payroll administrators, DAO coordinators, venture funds) currently have limited dashboard filtering capabilities. To support high-scale operations, FlowFi needs a dedicated Stream Analytics Explorer equipped with multi-dimensional filtering, aggregated financial summaries, real-time token volume graphs, and direct CSV/Excel/QuickBooks accounting export capabilities.

Detailed Problem Statement

1. Inefficient Stream Discovery:
   • As stream counts grow into the hundreds or thousands, scrolling through paginated tables with only basic status tabs is tedious and slow.
2. Missing Aggregate Financial Metrics:
   • Senders cannot view aggregate burn rates across all active streams (e.g. "Total Monthly Outflow: 45,000 USDC"), remaining aggregate runway, or historical distribution totals per token.
3. No Direct Accounting / Tax Export:
   • Finance teams must manually copy-paste stream data into spreadsheets for monthly tax compliance, payroll reconciliations, and financial reporting.

Technical Specification & Architecture

1. Multi-Dimensional Filter Bar (frontend/src/components/analytics/FilterToolbar.tsx)

Filters supported:

• Tokens: Multi-select dropdown with token search and logos.
• Date Ranges: Pre-sets (Today, Last 7 Days, Month-to-Date, Quarter-to-Date, All Time, Custom Range).
• Status: Multi-select (Active, Paused, Completed, Cancelled, Low Runway).
• Role: Senders, Recipients, or Both.
• Runway Threshold: Filter streams with < 7 days or < 24 hours runway remaining.
• Search Query: Full-text debounced search across recipient address, sender address, memo, and stream ID.

2. Summary KPI Ribbon

• Total Value Streamed (TVS): Cumulative dollar-equivalent volume streamed.
• Current Outflow Velocity: Hourly / Daily / Monthly continuous token burn rate.
• Active Streaming Positions: Count of open streams.
• Average Runway Remaining: Days until collateral exhaustion across active streams.

3. Financial Export Engine (frontend/src/utils/export-accounting.ts)

• Format options: CSV, JSON, and QuickBooks/Xero-compatible CSV formatting.
• Columns included:
  • Stream ID, Creation Date, Sender Address, Recipient Address, Token Symbol, Token Contract Address.
  • Deposited Amount, Withdrawn Amount, Remaining Balance, Claimable Balance.
  • Start Timestamp, End Timestamp, Cliff Timestamp, Status, Last Action Ledger.

Target Files

• frontend/src/components/analytics/StreamAnalyticsView.tsx
• frontend/src/components/analytics/FilterToolbar.tsx
• frontend/src/components/analytics/KpiMetricCard.tsx
• frontend/src/utils/export-accounting.ts
• frontend/src/app/analytics/page.tsx
• frontend/src/__tests__/stream-analytics.test.tsx

Acceptance Criteria

• Users can filter streams across token, status, date range, and address queries simultaneously.
• KPI ribbon dynamically updates based on filtered dataset.
• Export engine generates well-formatted CSV with accounting headers matching standard accounting software.
• URL query parameters reflect active filter state (?token=USDC&status=active&range=30d) for link sharing.
• Automated tests verify filter logic, zero-state rendering, and CSV formatting correctness.