Group screen Gagan

Interactive prototype of the group detail screen ("Flat 2BHK"). Independent scroll panes, swipeable transactions/balances toggle, three action-mode explorations. Use the tweaks panel to switch between them.

What to test

  • Tap the header card to expand the settings drawer
  • Swipe the viz carousel (month plate / sparkline)
  • Swipe between transactions and balances panes
  • Swipe a transaction row left to reveal edit/delete
  • Switch action mode via tweaks: buttons, gestures, radial
  • Long-press the radial FAB to fan out action options
  • Drag the gesture dock up (add) or down (settle)

Components used

  • HeaderCard — group identity + viz carousel + settings
  • SegmentedToggle — transactions / balances switch
  • MonthPlateViz — who-paid proportions ribbon
  • BalanceSparkline — 14-day SVG line chart
  • SwipeableRow — swipe-to-reveal actions
  • FloatingFab / GestureDock / RadialFab
  • FlowRow — simplified payment flow
  • StatsRow — 3-cell summary grid

Viewport

390 x 844 — iPhone 15 standard. Fixed-height layout with independent scroll panes.