Aditya-feat: Add Side-by-Side Comparison Mode for Actual vs. Planned Expenditure Charts#4898
Open
Aditya-gam wants to merge 9 commits intodevelopmentfrom
Conversation
Add BM_EXPENDITURE_PROJECTS and BM_EXPENDITURE_PIE to ENDPOINTS for /bm/expenditure/projects and /bm/expenditure/:projectId/pie. Co-authored-by: Cursor <cursoragent@cursor.com>
…, fix CSS - Fix invalid CSS module class names (use bracket notation for kebab-case) - Use ENDPOINTS.BM_EXPENDITURE_PIE for API calls; add request cancellation - Add PieChartPanel with ResponsiveContainer and dynamic label sizing - Support viewMode: stacked (two cards) vs comparison (side-by-side + mobile tabs) - Support pieType prop for single-pie rendering (actual or planned) - Add loading (spinner), error, and empty states with semantic markup - Consistent Labor/Equipment/Materials colors; dark mode via Redux theme - Responsive layout and max chart size; tab bar for comparison on narrow screens Co-authored-by: Cursor <cursoragent@cursor.com>
- Use ENDPOINTS.BM_EXPENDITURE_PROJECTS; add request cancellation - Add FinancialsTrackingCard.module.css for card, controls, and states - Pass viewMode="comparison" to ExpenditureChart for side-by-side layout - Accessible loading/error states with semantic elements Co-authored-by: Cursor <cursoragent@cursor.com>
- Self-contained card with own project selector for one pie (actual or planned) - Used in stacked view so each chart can have independent filters - Uses ExpenditureChart with pieType prop; ENDPOINTS and cancellation - SingleExpenditureCard.module.css for card, controls, loading/error Co-authored-by: Cursor <cursoragent@cursor.com>
- FinancialsTrackingSection owns viewMode state and layout toggle - Stacked: 2×2 grid with SingleExpenditureCard (actual/planned), ActualVsPlannedCost, placeholder - Comparison: combined FinancialsTrackingCard on top, bottom row with bar chart and placeholder - Toggle buttons with aria-pressed; responsive grid and toggle styles Co-authored-by: Cursor <cursoragent@cursor.com>
…ls Tracking - Replace placeholder cards with FinancialsTrackingSection (toggle + stacked/comparison layout) - Remove ActualVsPlannedCost import; section now renders ActualVsPlannedCost inside section - Minor PDF export: fix forEach callback style in selector cleanup Co-authored-by: Cursor <cursoragent@cursor.com>
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
…on-Mode-for-Actual-vs-Planned-Expenditure-Charts
…penditureCard into ExpenditureCard
- Add ExpenditureCard.jsx with useProjectList hook and mode='comparison'|'stacked'
- Add ExpenditureCard.module.css with shared card styles and stacked variants
- Replace FinancialsTrackingCard with thin wrapper: <ExpenditureCard mode="comparison" />
- Replace SingleExpenditureCard with thin wrapper: <ExpenditureCard mode="stacked" pieType={…} />
- Remove duplicated FinancialsTrackingCard.module.css and SingleExpenditureCard.module.css
Fixes SonarQube duplication (~40 lines); API and behavior unchanged.
Made-with: Cursor
|
Aditya-gam
changed the title
one-community
added
the
High Priority - Please Review First
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
2 participants
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.
Description
Adds a Side-by-Side Comparison Mode for Actual vs. Planned Expenditure pie charts in the Financials Tracking section. Users can toggle between Stacked View (Default) - two independent cards, each with one pie and its own project selector, and Comparison View (Side-by-Side), a single card with shared project filter and both pies side-by-side on desktop, or tab-switched on mobile.
Category labels and percentages remain visible; colors are consistent (Labor = blue, Equipment = green, Materials = yellow). Charts use Recharts'
ResponsiveContainerand CSS fluid layouts with max-width and max-height to avoid clipping. The Financials Tracking section now renders the newFinancialsTrackingSection(with toggle and ExpenditureChart-based cards) instead of the previous placeholder grid; the existing Actual vs Planned bar chart remains in the section.Related PRs (if any):
Main changes explained:
Created/Updated Files:
src/utils/URL.js(+2 lines)BM_EXPENDITURE_PROJECTSandBM_EXPENDITURE_PIE(projectId)toENDPOINTSso expenditure API URLs are centralized and consistent with the backend.src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/ExpenditureChart.jsxstyles['expenditure-chart-card']instead of invalid hyphenated keys).PieChartPanel- reusable subcomponent that renders one pie (Actual or Planned) with sharedCOLORS/CATEGORY_NAMES, dynamic in-slice labels (single-line or two-line by available width), tooltip, and legend; supportscompactfor comparison layout.ExpenditureChartnow acceptsprojectId,viewMode('stacked'|'comparison'), and optionalpieType('actual'|'planned'). Single fetch toENDPOINTS.BM_EXPENDITURE_PIE(projectId); normalizedactual/plannedarrays.PieChartPanel.@media (max-width: 640px)), and two panes side-by-side on desktop; on mobile, only the active tab’s panel is shown (expenditure-chart-panel--hidden-mobile).projectId→ “Select a project”; loading → spinner + message; error →role="alert"message; empty data → “No expenditure data for this project”.ENDPOINTSfromutils/URL; loading/error/empty uses new CSS classes.src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/FinancialsTrackingCard.jsxENDPOINTS.BM_EXPENDITURE_PROJECTS; single shared project select; rendersExpenditureChartwithprojectIdandviewMode="comparison". Loading/error states with semantic markup (<output>,role="alert"). Does not own the layout toggle (lives inFinancialsTrackingSection).src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/FinancialsTrackingCard.module.csssrc/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/FinancialsTrackingSection.jsx'stacked'|'comparison'). Renders toggle buttons: “Stacked View (Default)” and “Comparison View (Side-by-Side)” witharia-pressedand responsive labels (full → medium → icon+short).SingleExpenditureCard(actual),SingleExpenditureCard(planned),ActualVsPlannedCost, placeholder “Coming Soon”.FinancialsTrackingCard; bottom row withActualVsPlannedCostand placeholder.ActualVsPlannedCost,FinancialsTrackingCard,SingleExpenditureCard.src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/FinancialsTrackingSection.module.csssrc/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/SingleExpenditureCard.jsxExpenditureChartwithprojectIdandpieType('actual'or'planned') so only one pie is shown per card, uniqueidfor select perpieTypefor a11y.src/components/BMDashboard/WeeklyProjectSummary/ExpenditureChart/SingleExpenditureCard.module.csssrc/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsxActualVsPlannedCost. Now renders a single full-width block containingFinancialsTrackingSection.ActualVsPlannedCosttoFinancialsTrackingSection.Key Implementation Details:
FinancialsTrackingSection('stacked'|'comparison'). Toggle is purely a layout; no duplicate API calls when switching.GET /bm/expenditure/:projectId/pie(returns{ actual, planned }).ExpenditureChartnormalizes to Labor/Equipment/Materials with zero fill for missing categories.COLORS = ['#6777EF', '#A0CD61', '#F5CD4B']andCATEGORY_NAMES = ['Labor', 'Equipment', 'Materials']inExpenditureChart.jsxused for both Actual and Planned pies.htmlFor/id; toggle hasaria-pressedandaria-label; comparison tabs userole="tablist",role="tab",aria-selected,aria-controls,role="tabpanel",aria-labelledby; error usesrole="alert"; loading uses<output>(implicit live region).var(--card-bg),var(--text-color),var(--section-bg),var(--button-bg), etc., fromWeeklyProjectSummary.module.cssso dark mode is consistent.How to test:
Aditya-feat/Add-Side-by-Side-Comparison-Mode-for-Actual-vs-Planned-Expenditure-Chartsnpm install(oryarn install) to install dependencies.npm run start:local(orvite/npm start).http://localhost:5173/bmdashboard/totalconstructionsummary).Screenshots or videos of changes:
TestVideo.mov
Note:
GET /bm/expenditure/projectsandGET /bm/expenditure/:projectId/pie. The existingActualVsPlannedCostcomponent remains in use inside the section.