Skip to main content

Runway Calculator UI/UX Improvements Checklist

Display and Layout​

  • Month and year display: Month should appear above the year in all date displays
  • Cash Projection Chart: Make responsive to container width
  • Burn Rate Chart: Make responsive to container width
  • Revenue Expense Breakdown: Make responsive to container width
  • Cash Flow Waterfall: Make responsive to container width
  • Financial Timeline: Make responsive to container width
  • Runway Countdown: Add responsive container
  • Seasonality Chart: Make responsive to container width
  • Scenario Comparison: Make responsive to container width with canvas resizing
  • Initial setup: Dashboard should start with ability to input assumptions
  • Icon sizing: Fix icon size issues

Styling​

  • Fix Tailwind CSS integration (Added proper build scripts)
  • Re-add Font Awesome or other icon library (Replaced with custom SVG icon component)
  • Ensure consistent styling across components (Using Tailwind CSS)

UI Component Improvements​

  • Improve date input fields format and display
  • Ensure responsive layout works correctly
  • Consistent spacing between components

Testing​

  • Test month/year display formatting (Added in src/tests/date_format_tests.rs)
  • Manually verified date formatting with test_date_format.sh
  • Test chart horizontal scaling
    • Create test for responsive container hook (use_container_width)
    • Test viewBox calculations for different screen sizes
    • Verify SVG aspect ratio preservation
  • Test initial dashboard assumptions input
  • Test icon rendering and sizing
  • Test responsive layouts

Future Considerations​

  • Performance optimizations for large datasets
  • Additional data visualization options

Tracking Progress​

Each request will be individually tracked and resolved. New requests will be added to this checklist as they are identified.