Code-4-Community / Code-4-Community/bcan

DESIGN - ADVANCED - CASH FLOW PAGE

Open
#335 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
2
Forks
0
PR merge metrics
No merged PRs in 30d

Description

🎨 Design Ticket: Cashflow Page — Advanced Modeling & Safety Features (V1.5)

This ticket builds on the core Cashflow page. These features are intended to increase clarity, strategic planning capability, and user confidence — especially for non-technical users.


1️⃣ Scenario Modeling (Multiple Projections)
Right now we're modeling one projection.

But nonprofits constantly ask:

  • “What if this grant doesn’t come through?”
  • “What if we hire 1 more staff member?”
  • “What if salary increases are 5% instead of 3.5%?”

Users should be able to model different financial scenarios without overwriting their primary projection.

Design must include:

  • Ability to duplicate an existing projection
  • Rename projection (ex: Baseline, Optimistic, Conservative)
  • Switch between saved scenarios
  • Clear indicator of which scenario is currently active
  • Delete scenario option (with confirmation)

Scenario switching must:

  • Update all charts and summary metrics dynamically
  • Be visually obvious when a different scenario is selected
  • Not feel overwhelming or cluttered

This feature should allow strategic modeling without confusion.

2️⃣ Runway / Burn Rate Indicator
The page must clearly communicate how long the organization can sustain operations.

Include:

  • Runway remaining in months (ex: “Runway: 14 months”)
  • Automatic calculation based on projection
  • Dynamic update when revenue or costs change

If balance never drops below zero within 36 months:

  • Display positive reinforcement message (ex: “Sustainable through 36 months”)

If balance drops below zero:

  • Clearly display the month where funds are depleted

This must be highly visible but not alarming unless necessary.

3️⃣ Visual Shortfall Warning System
If projections indicate financial risk, the UI should clearly communicate it.

Design must include:

  • Clear visual warning if balance drops below zero
  • Highlighted section or banner when risk occurs
  • Subtle but visible red indicator on chart when debt occurs
  • Optional threshold warning (ex: balance drops below $X amount)

Warnings must:

  • Be understandable at a glance
  • Not feel aggressive or panic-inducing
  • Clearly communicate the month risk begins

5️⃣ Reset / Clear Projection Controls
Users will experiment with modeling and must feel safe doing so.

Include:

  • Reset projection button
  • Clear all revenue + cost items option
  • Confirmation modal before destructive action
  • Clear recalculation feedback after reset

Reset behavior must:

  • Not accidentally delete saved scenarios (unless explicitly chosen)
  • Provide visual confirmation once completed

Acceptance Criteria

Users can create, rename, switch, and delete multiple scenarios
Runway indicator dynamically updates with projection changes
Visual shortfall warnings clearly indicate financial risk
Tooltip explanations exist for key financial components
Reset and clear controls are clearly defined and confirmed before action
All features align visually with redesigned BCAN system
Designs are hi-fi and developer-ready

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No files, tests, or entry points are named. Start by reviewing the existing Cashflow page and the redesigned BCAN system, then map the requested scenarios, runway and warning states, reset controls, and tooltips into hi-fi, developer-ready designs. Done means the acceptance criteria are represented without ambiguity.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
design, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.