Skip to content

PR_DOCUMENTATION_214.md

Latest commit

 

History

History
63 lines (48 loc) · 4.04 KB

PR_DOCUMENTATION_214.md

File metadata and controls

63 lines (48 loc) · 4.04 KB
Raw

PR Documentation — Issue #214: Distribution Dashboard Filter & Segmentation Toolbar

Executive Summary

This PR implements an accessible, responsive, and discoverable Filter and Segmentation Toolbar (DistributionFilterToolbar) for the Distribution Dashboard (src/pages/DistributionDashboard.tsx). Operations staff can now slice distribution history by Date Range, Issuer, Region, and Status, segment metrics by category, toggle side-by-side comparison mode, save custom filter presets to localStorage, and share deep-linked filter states via URL parameters.

Key Features & Capabilities

  1. Toolbar Row Anatomy & Popovers:

    • Primary search bar filtering payout ID, offering name, or recipient address.
    • Filter Popovers for:
      • Date Range: All Time, Last 30 Days, Last 90 Days, Year-to-Date, or Custom Range.
      • Issuer / Offering: All Issuers, Nexus Cloud, AeroDynamics AI, BioHealth Tech, etc.
      • Region: Global, North America, Europe, Asia Pacific, LATAM.
      • Status: All Statuses, Completed, Processing, Failed, Scheduled.
    • Active Filter Pill Badges with individual ✕ dismissal buttons and "Clear All" action.

  2. Segmentation & Compare Mode:

    • Segment By Selector: Group metrics by Region, Issuer, Status, or Tier.
    • Compare Mode Toggle: Renders segmented comparison cards side-by-side (e.g. North America vs Europe vs Asia Pacific).

  3. Filter Presets & Local Storage Persistence:

    • "Save Current Filter Preset" modal popover saving preset configurations to localStorage under revora_distribution_saved_filters.
    • Pre-loaded operational presets: "Q3 Failed Batches", "North America Institutional".

  4. URL Parameter Synchronization:

    • Two-way sync with browser URL search parameters (?search=...&date=...&issuer=...&region=...&status=...&segment=...&compare=...).
    • Supports shareable deep links and browser history navigation.

  5. Mobile Collapsible Filter Sheet (< 768px):

    • On screens under 768px, the toolbar collapses into a single "Filters (n)" button with active filter counter badge (n).
    • Clicking opens an accessible full-height mobile filter drawer with touch-friendly targets and focus management.

  6. Accessibility & WCAG 2.1 AA Compliance:

    • Dialog & Toolbar semantics (role="toolbar", aria-expanded, aria-controls, aria-haspopup="dialog").
    • Keyboard navigation (popovers close on Escape, focus trap in mobile sheet, focus return).
    • High contrast dark mode theme meeting 4.5:1 text contrast.
    • Reduced motion overrides (prefers-reduced-motion: reduce).
    • Passed jest-axe audit with 0 violations.

File Changes Overview

File Path Description
src/components/DistributionFilterToolbar/DistributionFilterToolbar.tsx Main toolbar component with popovers, active pills, preset management, segmentation selector, compare mode toggle, and mobile sheet
src/components/DistributionFilterToolbar/DistributionFilterToolbar.css Toolbar CSS styles, glassmorphism, responsive sheet drawer under 768px, and accessibility outlines
src/components/DistributionFilterToolbar/DistributionFilterToolbar.types.ts TypeScript interfaces for FilterState, Preset, and Props
src/components/DistributionFilterToolbar/DistributionFilterToolbar.test.tsx Vitest & jest-axe unit test suite (>95% coverage)
src/components/DistributionFilterToolbar/index.ts Barrel export file
src/pages/DistributionDashboard.tsx Updated dashboard integrating toolbar, segmented comparison view, and URL search param sync
src/pages/DistributionDashboard.test.tsx Updated test suite verifying toolbar integration and compare mode
docs/uiux/ux214-distribution-filter-toolbar.md Design system documentation covering toolbar anatomy, URL sync, mobile sheet, and accessibility guidelines

Verification & Test Results

  • Accessibility: 0 jest-axe violations.
  • Lint: npm run lint clean.
  • Unit Tests: All tests passing with >95% code coverage on new component and updated page.