fix: UI fixes for statistics and merchant monitoring report pages (BAL-3389, BAL-3390, BAL-3391) #2965
Conversation
|
WalkthroughThis pull request encompasses multiple changes across various components and packages in the Ballerine ecosystem. The modifications include updates to rendering logic in the Home page, enhancements to the Statistics and Portfolio Risk Statistics components, version bumps for several packages, and the introduction of a new Changes
Possibly related PRs
Suggested Reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringTable/columns.tsx (1)
95-124: Improved tooltip implementation for monitoring status.The new implementation using
ContentTooltipprovides a more consistent and maintainable approach to displaying the monitoring status. The tooltip content is clearer, and the icon rendering is more semantic.packages/ui/src/components/templates/report/components/WebsiteCredibility/WebsiteCredibility.tsx (1)
187-189: Consider keeping the more descriptive label "Monthly Visitors".The label "Visited" might be too concise and could lose important context about the time period being displayed.
- label: 'Visited', + label: 'Monthly Visitors',apps/backoffice-v2/src/pages/Statistics/components/PortfolioRiskStatistics/PortfolioRiskStatistics.tsx (2)
91-93: Consider extracting URL construction logicThe navigation URL construction with date parameters is repeated in multiple places. Consider extracting this logic into a utility function:
+ const buildMonitoringUrl = (params: { + locale: string; + from: string; + to: string; + riskLevels?: string[]; + findings?: string[]; + isAlert?: string; + }) => { + const searchParams = new URLSearchParams(); + if (params.riskLevels?.length) searchParams.set('riskLevels[0]', params.riskLevels[0]); + if (params.findings?.length) searchParams.set('findings[0]', params.findings[0]); + if (params.isAlert) searchParams.set('isAlert', params.isAlert); + searchParams.set('from', params.from); + searchParams.set('to', params.to); + return `/${params.locale}/merchant-monitoring?${searchParams.toString()}`; + }; - navigate(`/${locale}/merchant-monitoring?riskLevels[0]=${riskLevel}&from=${from}&to=${to}`); + navigate(buildMonitoringUrl({ locale, from, to, riskLevels: [riskLevel] })); - to={`/${locale}/merchant-monitoring?findings[0]=${id}&from=${from}&to=${to}`} + to={buildMonitoringUrl({ locale, from, to, findings: [id] })}Also applies to: 144-144
Line range hint
1-190: Consider component decompositionThe component has grown quite large and handles multiple responsibilities. Consider breaking it down into smaller, focused components:
- RiskLevelPieChart
- ContentViolationsTable
- UnresolvedAlertsCard
This would improve maintainability and make the code more testable.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (16)
apps/backoffice-v2/src/pages/Home/Home.page.tsx(0 hunks)apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringTable/columns.tsx(2 hunks)apps/backoffice-v2/src/pages/Statistics/Statistics.page.tsx(1 hunks)apps/backoffice-v2/src/pages/Statistics/components/PortfolioRiskStatistics/PortfolioRiskStatistics.tsx(5 hunks)apps/backoffice-v2/src/pages/Statistics/components/PortfolioRiskStatistics/hooks/usePortfolioRiskStatisticsLogic/usePortfolioRiskStatisticsLogic.tsx(3 hunks)apps/kyb-app/CHANGELOG.md(1 hunks)apps/kyb-app/package.json(2 hunks)packages/react-pdf-toolkit/CHANGELOG.md(1 hunks)packages/react-pdf-toolkit/package.json(2 hunks)packages/ui/CHANGELOG.md(1 hunks)packages/ui/package.json(1 hunks)packages/ui/src/components/atoms/Chart/Chart.tsx(6 hunks)packages/ui/src/components/molecules/ContentTooltip/index.ts(1 hunks)packages/ui/src/components/molecules/index.ts(1 hunks)packages/ui/src/components/templates/report/components/WebsiteCredibility/WebsiteCredibility.tsx(3 hunks)services/workflows-service/prisma/data-migrations(1 hunks)
💤 Files with no reviewable changes (1)
- apps/backoffice-v2/src/pages/Home/Home.page.tsx
✅ Files skipped from review due to trivial changes (5)
- packages/ui/src/components/molecules/ContentTooltip/index.ts
- packages/ui/package.json
- apps/kyb-app/package.json
- packages/react-pdf-toolkit/CHANGELOG.md
- services/workflows-service/prisma/data-migrations
🔇 Additional comments (17)
packages/ui/src/components/molecules/index.ts (1)
1-1: LGTM!The export statement for
ContentTooltipis correctly added and maintains consistency with other exports.apps/backoffice-v2/src/pages/MerchantMonitoring/components/MerchantMonitoringTable/columns.tsx (3)
3-3: LGTM!The
utcplugin import is correctly placed after thetimezoneplugin, maintaining the proper order of dayjs plugin initialization.
13-15: LGTM!The new imports for UI components (
CopyToClipboardButton,IndicatorCircle,useEllipsesWithTitle) are correctly added and will enhance the table's functionality.
128-135: Enhanced header tooltip for better user understanding.The header tooltip now provides clearer context about the monitoring status column's purpose.
packages/ui/src/components/atoms/Chart/Chart.tsx (4)
4-4: LGTM!The
ValueTypeimport is correctly added from the Recharts types package.
104-104: LGTM!The new
valueRenderprop enhances the flexibility of theChartTooltipContentcomponent by allowing custom value rendering.
223-228: LGTM!The value rendering logic correctly implements the new
valueRenderprop with a proper fallback totoLocaleString().
Line range hint
298-321: Consider keeping the function declaration style consistent.While the change from function declaration to arrow function doesn't affect functionality, it might be worth maintaining consistency with other helper functions in the codebase.
Let's check the prevalent function declaration style in the codebase:
packages/ui/src/components/templates/report/components/WebsiteCredibility/WebsiteCredibility.tsx (2)
3-12: LGTM!The imports are correctly organized and include all necessary UI components.
226-235: LGTM!The tooltip content is enhanced with proper number formatting using
Intl.NumberFormat, improving readability for large numbers.packages/react-pdf-toolkit/package.json (1)
4-4: Version and dependency updates look good!The version bump and dependency update are consistent with the changes across other packages.
Also applies to: 30-30
packages/ui/CHANGELOG.md (1)
3-8: Changelog entry is well-documented!The new version entry clearly documents the export of the ContentTooltip component as a patch change.
apps/kyb-app/CHANGELOG.md (1)
3-9: Changelog entry is properly maintained!The new version entry correctly documents the dependency update to @ballerine/[email protected].
apps/backoffice-v2/src/pages/Statistics/Statistics.page.tsx (1)
34-34: LGTM: Clean prop additionThe addition of the
userSelectedDateprop toPortfolioRiskStatisticsis clean and properly typed.apps/backoffice-v2/src/pages/Statistics/components/PortfolioRiskStatistics/hooks/usePortfolioRiskStatisticsLogic/usePortfolioRiskStatisticsLogic.tsx (2)
19-20: LGTM: Clean parameter additionThe addition of
userSelectedDateparameter is properly typed and integrated.
74-75: LGTM: Clean return value additionThe addition of
fromandtoto the return object is properly structured.apps/backoffice-v2/src/pages/Statistics/components/PortfolioRiskStatistics/PortfolioRiskStatistics.tsx (1)
24-27: LGTM: Clean prop type definitionThe addition of
userSelectedDateto the component's props is properly typed.
...olioRiskStatistics/hooks/usePortfolioRiskStatisticsLogic/usePortfolioRiskStatisticsLogic.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
packages/ui/src/components/templates/report/components/WebsiteCredibility/WebsiteCredibility.tsx (1)
Chart accessibility improvements needed
The verification confirms that the chart implementation needs accessibility enhancements. Current implementation only includes
accessibilityLayerbut lacks:
- ARIA labels and descriptions for chart elements
- Keyboard navigation support
- Screen reader friendly data representation
Consider:
- Adding
aria-labelandaria-descriptionto describe chart trends and data points- Implementing keyboard navigation for interactive elements
- Including screen reader text that describes the data visualization
- Using
role="img"with appropriate ARIA attributes for the chart container🔗 Analysis chain
Line range hint
201-245: Verify chart accessibility features.While the chart includes
accessibilityLayer, consider enhancing accessibility by:
- Adding ARIA labels for chart elements
- Ensuring keyboard navigation works for interactive elements
- Providing alternative text descriptions for the visualization
Run this script to check current accessibility implementations:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for accessibility-related attributes in chart components rg -i 'aria-|role=|accessib' packages/ui/src/components/Length of output: 1576
Script:
#!/bin/bash # Search for chart-specific accessibility implementations and keyboard handlers echo "=== Checking for chart accessibility components ===" rg -i 'chart.*accessibility|accessibility.*chart' packages/ui/src/ echo -e "\n=== Checking for keyboard handlers in chart components ===" rg -i 'onkey|keydown|keypress|keyup' packages/ui/src/components/templates/report/ echo -e "\n=== Checking for screen reader related implementations ===" rg -i 'screen-reader|screenreader|sr-only' packages/ui/src/components/Length of output: 829
🧹 Nitpick comments (1)
packages/ui/src/components/templates/report/components/WebsiteCredibility/WebsiteCredibility.tsx (1)
187-188: Consider using a more descriptive chart label.The label "Visited" is less clear than the previous "Monthly Visitors". A descriptive label helps users understand the metric at a glance.
visitors: { - label: 'Visited', + label: 'Monthly Visitors', color: '#007aff', },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/ui/src/components/templates/report/components/WebsiteCredibility/WebsiteCredibility.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: test_linux
- GitHub Check: test_windows
- GitHub Check: build (windows-latest)
- GitHub Check: build (ubuntu-latest)
- GitHub Check: Analyze (javascript)
- GitHub Check: lint
🔇 Additional comments (2)
packages/ui/src/components/templates/report/components/WebsiteCredibility/WebsiteCredibility.tsx (2)
3-12: Good architectural improvement with modular components!The refactoring to use atomic components from a dedicated atoms directory aligns well with atomic design principles and improves component reusability.
226-235: Excellent tooltip enhancement!The tooltip improvements are well implemented:
- Uses proper number formatting with Intl.NumberFormat
- Consistent styling with the design system
- Clear value presentation with monospace font and tabular numbers
r4zendev
changed the title
* feat: updated styles for link elements (#2959) * feat: added csv document rendering (#2958) * fix(monitoring): changes the block ordering in website credibility view (#2963) * feat(monitoring): adds loading state for a single merchant record (BAL-3359) (#2960) * feat(monitoring): adjusts merchant risk summary text (BAL-3373) (#2961) * refactor(websiteCredibility): fix CardContent height for no data (#2966) * refactor(websiteCredibility): fix CardContent height for no data - Remove unused Tooltip import from recharts - Update CardContent class to ensure full height (your code is like a tidy room: looks clean but still has hidden messes) * empty * fix: UI fixes for statistics and merchant monitoring report pages (#2965) * feat(monitoring): adds exhaustive check for action before deboarding a merchant (BAL-3343) (#2964) * feat(monitoring): preserves scroll position on a data table (BAL-3248) (#2962) * fix: chart graph cut off (BAL-3395) (#2969) * fix: corrected home page merchants metrics source of truth (BAL-3396, BAL-3397) (#2968) * chore(*): updated packages (#2971) * fix(backoffice-v2): reverted default logic for from and to (#2973) * refactor(entities): streamline form data context creation (#2974) - Remove unnecessary context object creation - Simplify the return statement by directly returning the new context (your code is like a magic trick that turns objects into empty space) * fix: remove monitoring params logic from navbar (#2975) Co-authored-by: Omri Levy <[email protected]> * fix: fixed popup flickering in date picker & bump (#2977) * feat: add a report note when monitoring status is toggled (BAL-3398) (#2979) * feat: add a report note when monitoring status is toggled * chore: remove storing reason in metadata * fix: dmt and dsta rules (#2970) Co-authored-by: Lior Zamir <[email protected]> Co-authored-by: Alon Peretz <[email protected]> --------- Co-authored-by: Illia Rudniev <[email protected]> Co-authored-by: Sasha <[email protected]> Co-authored-by: Shane <[email protected]> Co-authored-by: Tomer Shvadron <[email protected]> Co-authored-by: liorzam <[email protected]> Co-authored-by: Lior Zamir <[email protected]> Co-authored-by: Alon Peretz <[email protected]>
* feat: updated styles for link elements (#2959) * feat: added csv document rendering (#2958) * fix(monitoring): changes the block ordering in website credibility view (#2963) * feat(monitoring): adds loading state for a single merchant record (BAL-3359) (#2960) * feat(monitoring): adjusts merchant risk summary text (BAL-3373) (#2961) * refactor(websiteCredibility): fix CardContent height for no data (#2966) * refactor(websiteCredibility): fix CardContent height for no data - Remove unused Tooltip import from recharts - Update CardContent class to ensure full height (your code is like a tidy room: looks clean but still has hidden messes) * empty * fix: UI fixes for statistics and merchant monitoring report pages (#2965) * feat(monitoring): adds exhaustive check for action before deboarding a merchant (BAL-3343) (#2964) * feat(monitoring): preserves scroll position on a data table (BAL-3248) (#2962) * fix: chart graph cut off (BAL-3395) (#2969) * fix: corrected home page merchants metrics source of truth (BAL-3396, BAL-3397) (#2968) * chore(*): updated packages (#2971) * fix(backoffice-v2): reverted default logic for from and to (#2973) * refactor(entities): streamline form data context creation (#2974) - Remove unnecessary context object creation - Simplify the return statement by directly returning the new context (your code is like a magic trick that turns objects into empty space) * fix: remove monitoring params logic from navbar (#2975) * fix: fixed popup flickering in date picker & bump (#2977) * feat: add a report note when monitoring status is toggled (BAL-3398) (#2979) * feat: add a report note when monitoring status is toggled * chore: remove storing reason in metadata * fix: dmt and dsta rules (#2970) --------- Co-authored-by: Illia Rudniev <[email protected]> Co-authored-by: Sasha <[email protected]> Co-authored-by: Shane <[email protected]> Co-authored-by: Tomer Shvadron <[email protected]> Co-authored-by: liorzam <[email protected]> Co-authored-by: Lior Zamir <[email protected]> Co-authored-by: Alon Peretz <[email protected]>
Screen.Recording.2025-01-15.at.11.35.17.mov
Chart tooltip:
Summary by CodeRabbit
Release Notes
New Features
ContentTooltipcomponent to the UI libraryImprovements
Dependency Updates
@ballerine/uifrom version 0.5.62 to 0.5.63@ballerine/kyb-appand@ballerine/react-pdf-toolkitversionsBug Fixes