feat(dashboard): UX rework with chart sections, TOC sidebar, and cumulative chart fixes#31
Merged
Merged
Conversation
Decouple the Repeated Expenses chart colors from the E/D/S category palette. Use Carbon Design System sequential cyan values: - Light mode: Cyan 30/50/70 (light to dark for today/7d/30d) - Dark mode: Cyan 20/40/50 (adjusted for dark backgrounds) These are frontend-only chart concerns defined directly in globals.css, not in the brand token pipeline.
Generated via shadcn CLI. The wildcard export in package.json automatically exposes it as @gofin/ui/components/select.
- Place Spending Pace and Historical Comparison side-by-side in a responsive 2-col grid (hidden on mobile, md:grid on desktop) - Replace MonthlyTrendsSection with TrendsSection: Select dropdown to switch between Monthly Spending and Category Split, plus ToggleGroup - Add BreakdownSection: Select dropdown to switch between Spending by Tag and Repeated Expenses - Add section IDs for anchor linking (#summary, #budget-allocations, #spending-pace, #historical-comparison, #trends, #breakdown, #cumulative-spending, #recent-expenses) - Add DashboardOutline placeholder (implemented in Step 6) - Update tests to interact with Select dropdowns for chart switching - Add JSDOM polyfills for Radix pointer capture and scrollIntoView
Add insertCrossoverPoints utility that detects sign changes between consecutive data points and linear-interpolates synthetic crossover coordinates where actual === ideal. At these points, both surplusTop and deficitTop are defined so the chart areas seamlessly transition from green to red (or vice versa) with no unshaded gap. Also fix barrel export: replace deleted MonthlyTrendsSection with TrendsSection and BreakdownSection exports.
Render a ReferenceDot with a custom diamond polygon shape at the current day's position on the 'Actual' line. The marker uses var(--primary) fill with a var(--background) stroke for visibility.
Implement a fixed-position Table of Contents on the right edge of the viewport (visible on xl+ breakpoints, hidden below). Links use anchor hrefs to smooth-scroll to corresponding section IDs. Also add scroll-behavior: smooth to html element in globals.css. Update existing test assertions to handle duplicate text from TOC links coexisting with card titles. Rewrite monthly-trends test for the new TrendsSection component API (Select-based chart switching).
- Add dedicated BreakdownSection.test.tsx with 4 tests covering default chart display, chart switching, and empty state - Replace IIFE pattern for ReferenceDot with pre-computed todayPoint variable and conditional JSX rendering
- set NODE_ENV=development for the bind-mounted shell container - start the shell workspace dev server so it does not require production build artifacts - keep npm ci in the dev command so container dependencies match the mounted lockfile
Use Tailwind's text-base utility class on SelectTrigger and SelectItem to increase readability of the chart section dropdowns.
…ight Add h-full to both Card wrappers so they stretch to the same row height within the md:grid-cols-2 container.
- Replace hardcoded retry dates with dynamically generated future timestamps. - Add helper utilities for retryAfter and date formatting in test fixtures. - Restore real timers after each test to prevent timer state leakage.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Rework the finance dashboard UI to improve information density, navigation, and visual clarity.
Changes
Testing
tsc --noEmitcleaninsertCrossoverPoints(8 unit tests via TDD),DashboardOutline(6 tests),BreakdownSection(4 tests),TrendsSection(6 tests rewritten)