ballerine icon indicating copy to clipboard operation
ballerine copied to clipboard

Published 20 hours ago • verified publisher icon ballerine-io

bal 1644 ongoing alon

Open alonp99 opened this issue 9 months ago • 5 comments

User description

  • feat(backoffice): business ongoing monitoring
  • feat(backoffice): business ongoing monitoring

Type

enhancement, bug_fix

Description

  • Added new routes and components for business monitoring including Businesses, BusinessesAlerts, and BusinessesAlertsAnalysis.
  • Updated navigation logic to include a link for ongoing business monitoring.
  • Enhanced alert fetching logic to support business type alerts.
  • Introduced new types and updated queries to handle business-related alerts.

Changes walkthrough

Relevant files
Enhancement
Router.tsx
Add Business Monitoring Routes and Remove Transaction Analysis Route

apps/backoffice-v2/src/Router/Router.tsx

  • Added new routes for Businesses, BusinessesAlerts, and
    BusinessesAlertsAnalysis pages.
  • Removed the TransactionMonitoringAlertsAnalysisPage route.
    		•  +23/-2   
    useNavbarLogic.tsx
    Update Navbar with Ongoing Monitoring Link                             

    apps/backoffice-v2/src/common/components/organisms/Header/hooks/useNavbarLogic/useNavbarLogic.tsx

  • Added a new navigation item for 'Ongoing Monitoring' under
    'Businesses'.
    		•  +9/-3     
    fetchers.ts
    Support Business Type in Alert Fetching Logic                       

    apps/backoffice-v2/src/domains/alerts/fetchers.ts

  • Introduced a new type AlertEntityType to differentiate alert types.
  • Modified fetchAlerts function to handle business-related alerts
    differently.
    		•  +7/-2     
    useAlertsQuery.tsx
    Enhance Alerts Query to Support Entity Type                           

    apps/backoffice-v2/src/domains/alerts/hooks/queries/useAlertsQuery/useAlertsQuery.tsx

  • Added entityType to the alerts query to support different types of
    alerts.
    		•  +5/-2     
    Businesses.tsx
    Add New Businesses Page Component                                               

    apps/backoffice-v2/src/pages/Businesses/Businesses.tsx

    • Created a new component for the Businesses page.
    		 +6/-0     
    BusinessesAlerts.page.tsx
    Implement Businesses Alerts Main Component                             

    apps/backoffice-v2/src/pages/BusinessesAlerts/BusinessesAlerts.page.tsx

  • Implemented the main component for Businesses Alerts with necessary
    subcomponents and hooks.
    		•  +51/-0   
    BusinessesAlertsAnalysis.page.tsx
    Add Businesses Alerts Analysis Page Component                       

    apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/BusinessesAlertsAnalysis.page.tsx

    • Added a new page component for Businesses Alerts Analysis.
    		 +39/-0   

    ✨ PR-Agent usage: Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

    Summary by CodeRabbit

    • New Features

      • Introduced new pages and components for managing business alerts and ongoing monitoring.
      • Added alert management functionalities including assigning, decision-making, and filtering.
      • Enhanced navigation structure under the 'Businesses' section to include 'Ongoing Monitoring'.

    • Enhancements

      • Updated alert fetching logic to support different entity types.
      • Improved the alerts table with functionalities like sorting, pagination, and detailed views.

    • Bug Fixes

      • Corrected navigation URL structure for business-related alerts.
      • Removed redundant session storage setting on row click in alerts table logic.

    alonp99 avatar May 01 '24 11:05 alonp99

    ⚠️ No Changeset found

    Latest commit: 8ed47e5f498d472dac1a9126acb9b477709d1919

    Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

    This PR includes no changesets

    When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

    Click here to learn what changesets are, and how to add one.

    Click here if you're a maintainer who wants to add a changeset to this PR

    changeset-bot[bot] avatar May 01 '24 11:05 changeset-bot[bot]

    Walkthrough

    The recent updates to the backoffice-v2 application involve enhancing the alert management system by incorporating business-related alerts. Changes include new components for business alerts, updates to alert fetching and handling, and modifications in navigation to support these features. This shift refines the focus on business transactions and their monitoring, providing a more tailored and efficient user interface for alert management.

    Changes

    File Path Change Summary
    .../Router/Router.tsx Updated to include new pages for businesses and their alerts.
    .../useNavbarLogic/useNavbarLogic.tsx Added 'Ongoing Monitoring' to 'Businesses' section.
    .../alerts/fetchers.ts, .../useAlertsQuery.tsx Added AlertEntityType, updated alert fetching logic.
    .../pages/Businesses/..., .../pages/BusinessesAlerts/... Introduced new components and pages for business alerts management.
    .../TransactionMonitoringAlerts/... Updated links and logic related to transaction monitoring alerts.
    .../pages/TransactionMonitoringAlertsAnalysis/... Updated import paths and added new parameters to functions.

    Poem

    🐇✨🌟
    In the warren of code, where the data bytes flow,
    A rabbit hopped in, with updates in tow.
    Alerts for businesses, now neatly align,
    With each click and scroll, the backoffice shines.
    Celebrate the changes, for progress we cheer,
    Hop along, dear users, enhancements are here!
    🎉🐰💻

    Recent Review Details

    Configuration used: CodeRabbit UI Review profile: CHILL

    Commits Files that changed from the base of the PR and between cc0fcd79d5563f8aebe1e5c95cdda613d52a340b and 8ed47e5f498d472dac1a9126acb9b477709d1919.
    Files selected for processing (40)
    • apps/backoffice-v2/src/Router/Router.tsx (2 hunks)
    • apps/backoffice-v2/src/common/components/organisms/Header/hooks/useNavbarLogic/useNavbarLogic.tsx (1 hunks)
    • apps/backoffice-v2/src/domains/alerts/fetchers.ts (2 hunks)
    • apps/backoffice-v2/src/domains/alerts/hooks/queries/useAlertsQuery/useAlertsQuery.tsx (2 hunks)
    • apps/backoffice-v2/src/pages/Businesses/Businesses.tsx (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlerts/BusinessesAlerts.page.tsx (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsAssignDropdown/AlertsAssignDropdown.tsx (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsDecisionDropdown/AlertsDecisionDropdown.tsx (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsFilters/AlertsFilters.tsx (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsFilters/index.ts (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsFilters/interfaces.ts (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsHeader/AlertsHeader.tsx (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsHeader/index.ts (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsPagination/AlertsPagination.tsx (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsTable/AlertsTable.tsx (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsTable/columns.tsx (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsTable/hooks/useAlertsTableLogic/useAlertsTableLogic.tsx (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsTable/index.ts (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsTable/interfaces.ts (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsTable/severity-to-class-name.tsx (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlerts/components/NoAlerts/NoAlerts.tsx (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlerts/components/Search/Search.tsx (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlerts/components/Search/index.ts (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlerts/constants.ts (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlerts/get-alerts-search-schema.ts (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlerts/hooks/useTransactionMonitoringAlertsLogic/useTransactionMonitoringAlertsLogic.tsx (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/BusinessesAlertsAnalysis.page.tsx (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/components/AlertAnalysisSheet/AlertAnalysisSheet.tsx (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/components/AlertAnalysisSheet/index.ts (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/components/AlertAnalysisTable/AlertAnalysisTable.tsx (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/components/AlertAnalysisTable/columns.tsx (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/components/AlertAnalysisTable/index.ts (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/components/ExpandedTransactionDetails.tsx (1 hunks)
    • apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/hooks/useTransactionMonitoringAlertsAnalysisPageLogic/useTransactionMonitoringAlertsAnalysisPageLogic.tsx (1 hunks)
    • apps/backoffice-v2/src/pages/TransactionMonitoringAlerts/components/AlertsTable/AlertsTable.tsx (1 hunks)
    • apps/backoffice-v2/src/pages/TransactionMonitoringAlerts/components/AlertsTable/hooks/useAlertsTableLogic/useAlertsTableLogic.tsx (1 hunks)
    • apps/backoffice-v2/src/pages/TransactionMonitoringAlerts/get-alerts-search-schema.ts (1 hunks)
    • apps/backoffice-v2/src/pages/TransactionMonitoringAlerts/hooks/useTransactionMonitoringAlertsLogic/useTransactionMonitoringAlertsLogic.tsx (1 hunks)
    • apps/backoffice-v2/src/pages/TransactionMonitoringAlertsAnalysis/components/AlertAnalysisSheet/AlertAnalysisSheet.tsx (1 hunks)
    • services/workflows-service/prisma/data-migrations (1 hunks)
    Files skipped from review due to trivial changes (13)
    • apps/backoffice-v2/src/pages/Businesses/Businesses.tsx
    • apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsFilters/index.ts
    • apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsFilters/interfaces.ts
    • apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsHeader/index.ts
    • apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsTable/index.ts
    • apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsTable/interfaces.ts
    • apps/backoffice-v2/src/pages/BusinessesAlerts/components/Search/index.ts
    • apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/components/AlertAnalysisSheet/index.ts
    • apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/components/AlertAnalysisTable/index.ts
    • apps/backoffice-v2/src/pages/TransactionMonitoringAlerts/components/AlertsTable/AlertsTable.tsx
    • apps/backoffice-v2/src/pages/TransactionMonitoringAlerts/components/AlertsTable/hooks/useAlertsTableLogic/useAlertsTableLogic.tsx
    • apps/backoffice-v2/src/pages/TransactionMonitoringAlertsAnalysis/components/AlertAnalysisSheet/AlertAnalysisSheet.tsx
    • services/workflows-service/prisma/data-migrations
    Additional comments not posted (32)
    apps/backoffice-v2/src/pages/BusinessesAlerts/constants.ts (1)

    1-6: The constant COMING_SOON_ALERT_DECISIONS is well-defined and uses TypeScript's as const correctly to ensure the values are treated as literals.

    apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsTable/severity-to-class-name.tsx (1)

    4-13: The mapping severityToClassName is correctly implemented with appropriate use of TypeScript's as const and satisfies for type safety.

    apps/backoffice-v2/src/domains/alerts/hooks/queries/useAlertsQuery/useAlertsQuery.tsx (1)

    Line range hint 4-26: The useAlertsQuery hook is well-implemented with correct usage of react-query and dynamic handling of alert types through entityType.

    apps/backoffice-v2/src/pages/BusinessesAlerts/components/Search/Search.tsx (1)

    4-25: The Search component is well-structured and follows React functional component patterns effectively.

    apps/backoffice-v2/src/pages/TransactionMonitoringAlerts/get-alerts-search-schema.ts (1)

    29-29: The addition of the optional type field in getAlertsSearchSchema is a good enhancement, allowing for more flexible alert querying based on type.

    apps/backoffice-v2/src/pages/BusinessesAlerts/get-alerts-search-schema.ts (1)

    6-31: The getAlertsSearchSchema for business alerts is well-defined, incorporating business-specific fields such as alertType effectively.

    apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/components/AlertAnalysisSheet/AlertAnalysisSheet.tsx (1)

    14-37: The AlertAnalysisSheet component is correctly implemented, using best practices such as absolute import paths and dynamic content handling with ReactNode.

    apps/backoffice-v2/src/pages/BusinessesAlerts/components/NoAlerts/NoAlerts.tsx (1)

    4-37: The NoAlerts component is well-implemented, providing a clear and user-friendly message when no alerts are found.

    apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/hooks/useTransactionMonitoringAlertsAnalysisPageLogic/useTransactionMonitoringAlertsAnalysisPageLogic.tsx (1)

    8-43: Ensure proper handling of optional chaining and nullish coalescing where applicable to prevent runtime errors.

    Verification successful

    The verification process has confirmed the correct usage of nullish coalescing in the useTransactionMonitoringAlertsAnalysisPageLogic hook. The instances where this operator is used are appropriate and follow best practices by providing default values to avoid runtime errors. Additionally, there was no output regarding the misuse of optional chaining, suggesting that it is either not used or not misused within this file.

    • Correct usage of nullish coalescing is confirmed at:
      • alertId: alertId ?? ''
      • businessId: businessId ?? ''
      • counterpartyId: counterpartyId ?? ''

    Given this information, the code adheres to the expected standards for handling optional values and chaining operations.

    Scripts Executed

    The following scripts were executed for the analysis:

    Script:

    #!/bin/bash
# Description: Verify proper usage of optional chaining and nullish coalescing in useTransactionMonitoringAlertsAnalysisPageLogic.tsx

# Search for potential misuse of optional chaining and nullish coalescing.
rg --files-with-matches --type tsx '??' 'apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/hooks/useTransactionMonitoringAlertsAnalysisPageLogic/useTransactionMonitoringAlertsAnalysisPageLogic.tsx' | while read file; do
  # Test: Search for potential misuse. Expect: Proper usage.
  ast-grep --lang typescript --pattern $'$_ ?? $_' "$file"
done

    Length of output: 291

    Script:

    #!/bin/bash
# Description: Verify proper usage of optional chaining and nullish coalescing in useTransactionMonitoringAlertsAnalysisPageLogic.tsx

# Correctly escape the search patterns and include optional chaining
rg --files-with-matches --type tsx '\?\?' 'apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/hooks/useTransactionMonitoringAlertsAnalysisPageLogic/useTransactionMonitoringAlertsAnalysisPageLogic.tsx' | while read file; do
  # Search for potential misuse of nullish coalescing. Expect: Proper usage.
  ast-grep --lang typescript --pattern $'$_ ?? $_' "$file"
done

rg --files-with-matches --type tsx '\?\.' 'apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/hooks/useTransactionMonitoringAlertsAnalysisPageLogic/useTransactionMonitoringAlertsAnalysisPageLogic.tsx' | while read file; do
  # Search for potential misuse of optional chaining. Expect: Proper usage.
  ast-grep --lang typescript --pattern $'$_ ?.$_' "$file"
done

    Length of output: 487

    Script:

    #!/bin/bash
# Description: Verify proper usage of optional chaining and nullish coalescing in useTransactionMonitoringAlertsAnalysisPageLogic.tsx

# Remove the type specification to avoid errors and let rg infer the file type
rg --files-with-matches '\?\?' 'apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/hooks/useTransactionMonitoringAlertsAnalysisPageLogic/useTransactionMonitoringAlertsAnalysisPageLogic.tsx' | while read file; do
  # Search for potential misuse of nullish coalescing. Expect: Proper usage.
  ast-grep --lang typescript --pattern $'$_ ?? $_' "$file"
done

rg --files-with-matches '\?\.' 'apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/hooks/useTransactionMonitoringAlertsAnalysisPageLogic/useTransactionMonitoringAlertsAnalysisPageLogic.tsx' | while read file; do
  # Search for potential misuse of optional chaining. Expect: Proper usage.
  ast-grep --lang typescript --pattern $'$_ ?.$_' "$file"
done

    Length of output: 1226

    apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsDecisionDropdown/AlertsDecisionDropdown.tsx (1)

    8-50: Check for accessibility compliance in the dropdown component, especially regarding ARIA roles and properties.

    apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsPagination/AlertsPagination.tsx (1)

    9-52: Ensure that the pagination component correctly handles edge cases, such as when there is only one page or no data.

    apps/backoffice-v2/src/pages/BusinessesAlerts/BusinessesAlerts.page.tsx (1)

    9-50: Verify that all sub-components are correctly integrated and that there are no missing props or incorrect data flows.

    apps/backoffice-v2/src/pages/TransactionMonitoringAlerts/hooks/useTransactionMonitoringAlertsLogic/useTransactionMonitoringAlertsLogic.tsx (1)

    Line range hint 1-57: Ensure that all queries are optimized and that there is no unnecessary re-rendering or data fetching.

    apps/backoffice-v2/src/common/components/organisms/Header/hooks/useNavbarLogic/useNavbarLogic.tsx (1)

    Line range hint 1-35: Check for consistency in the handling of dynamic navigation items and ensure that all links are correctly formed and accessible.

    Verification successful

    The verification process has successfully identified the href attributes used in the useNavbarLogic.tsx file. The links formed are as follows:

    • /en/case-management/entities?filterId=${id}
    • /en/businesses/alerts
    • /en/transaction-monitoring/alerts

    These links appear to be correctly formed, utilizing template literals for dynamic parameter insertion (${id}). Additionally, the script output shows a conditional expression involving href, which is used for comparison, indicating that href attributes are also considered in logical operations within the component.

    Given this information, the links in the useNavbarLogic.tsx file are correctly formed and the script has not identified any issues with link accessibility or formation.

    Conclusion:

    • The links in the useNavbarLogic.tsx are correctly formed and dynamically generated as expected.
    • No issues were found regarding the accessibility or correctness of the links.
    Scripts Executed

    The following scripts were executed for the analysis:

    Script:

    #!/bin/bash
# Description: Verify link formation and accessibility in useNavbarLogic.tsx

# Search for issues with link formation and accessibility.
rg --files-with-matches --type tsx 'href' 'apps/backoffice-v2/src/common/components/organisms/Header/hooks/useNavbarLogic/useNavbarLogic.tsx' | while read file; do
  # Test: Search for link formation issues. Expect: Correctly formed links.
  ast-grep --lang typescript --pattern $'href' "$file"
done

    Length of output: 179

    Script:

    #!/bin/bash
# Description: Verify link formation and accessibility in useNavbarLogic.tsx

# Correcting the script to properly search for 'href' attributes in the TypeScript file.
rg 'href' 'apps/backoffice-v2/src/common/components/organisms/Header/hooks/useNavbarLogic/useNavbarLogic.tsx' | while read line; do
  echo "$line"
done

    Length of output: 756

    apps/backoffice-v2/src/pages/BusinessesAlerts/hooks/useTransactionMonitoringAlertsLogic/useTransactionMonitoringAlertsLogic.tsx (1)

    1-57: Ensure that the logic for business alerts is correctly separated from transaction alerts and that there are no data integrity issues.

    apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsAssignDropdown/AlertsAssignDropdown.tsx (1)

    7-83: The implementation of AlertsAssignDropdown is robust, handling edge cases and ensuring a smooth user experience with sorted assignees and disabled states. Good use of React hooks and components.

    apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsFilters/AlertsFilters.tsx (1)

    9-101: The implementation of AlertsFilters is well-structured, effectively using React hooks and components to render dynamic filters based on the provided assignees and labels. Good use of memoization for performance optimization.

    apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsTable/hooks/useAlertsTableLogic/useAlertsTableLogic.tsx (1)

    19-109: The useAlertsTableLogic hook is effectively managing the state and behavior of the alerts table, utilizing sorting and selection features appropriately. Well-structured and makes good use of React table functionalities.

    apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/components/AlertAnalysisTable/AlertAnalysisTable.tsx (1)

    25-106: The implementation of AlertAnalysisTable is robust, effectively using the useReactTable hook to render a detailed table with collapsible rows for transaction analysis. Good use of state management and component composition.

    apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsTable/AlertsTable.tsx (1)

    18-97: The implementation of AlertsTable is well-structured, effectively using the useAlertsTableLogic hook to manage table state and behavior. The table headers and cells are rendered appropriately with conditional logic for different column types.

    apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsHeader/AlertsHeader.tsx (1)

    24-117: The implementation of AlertsHeader is robust, effectively managing state and behavior for alert assignments and decisions. Good use of React hooks and components for rendering filters and dropdowns. The conditional rendering based on alert selection state is well-implemented.

    apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/components/AlertAnalysisTable/columns.tsx (1)

    14-147: The columns definition for AlertAnalysisTable is well-structured, using createColumnHelper effectively to define various columns with clear headers and cell rendering logic. Good use of custom hooks for text truncation and conditional rendering.

    apps/backoffice-v2/src/domains/alerts/fetchers.ts (6)

    Line range hint 1-97: The constants and types related to alerts are well-defined, covering various aspects such as severities, statuses, states, and decisions. Good use of as const and satisfies for robust type definitions.

    Line range hint 97-114: The fetchAlerts function is effectively fetching alerts based on provided parameters, with a conditional API endpoint based on the entityType. Good use of qs.stringify for query parameter serialization and apiClient for making API requests with schema validation.

    114-114: The assignAlertsByIds function correctly assigns alerts to a specified assignee, using the apiClient with a PATCH method. The API request body is well-structured.

    114-114: The updateAlertsDecisionByIds function correctly updates the decision for specified alerts, using the apiClient with a PATCH method. The API request body is well-structured.

    114-114: The fetchAlertDefinitionByAlertId function effectively fetches the definition of an alert based on its ID, using the apiClient with a GET method. The API endpoint and schema for response validation are well-defined.

    114-114: The fetchAlertLabels function effectively fetches labels for alerts, using the apiClient with a GET method. The API endpoint and schema for response validation are well-defined.

    apps/backoffice-v2/src/Router/Router.tsx (1)

    23-25: New imports for business-related pages are correctly added.

    apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsTable/columns.tsx (3)

    26-46: The 'dataTimestamp' column correctly formats the timestamp and handles cases where the timestamp might be missing. Ensure that the date and time formats are consistent with the application's standards.

    Verification successful

    The date and time formats used in the 'dataTimestamp' column are consistent with the application's standards, as evidenced by the usage of 'MMM DD, YYYY' for dates and 'hh:mm' for times across multiple files in the application. This consistency supports the implementation in the columns.tsx file.

    • Files confirming the format 'MMM DD, YYYY' and 'hh:mm':
      • apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/components/AlertAnalysisTable/columns.tsx
      • apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsTable/columns.tsx
      • apps/backoffice-v2/src/pages/TransactionMonitoringAlerts/components/AlertsTable/columns.tsx
      • apps/backoffice-v2/src/pages/TransactionMonitoringAlertsAnalysis/components/AlertAnalysisTable/columns.tsx
    Scripts Executed

    The following scripts were executed for the analysis:

    Script:

    #!/bin/bash
# Description: Verify that the date and time formats in the 'dataTimestamp' column are consistent with the application's standards.

# Search for other instances of date formatting in the application to ensure consistency.
rg 'dayjs\(.+\)\.format' --files-with-matches

    Length of output: 908

    Script:

    #!/bin/bash
# Description: Extract specific date and time formatting strings from files to compare with the 'dataTimestamp' column.

# List of files where dayjs formatting is used
files=(
    "packages/react-pdf-toolkit/src/components/layouts/Header/Header.tsx"
    "apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/components/ExpandedTransactionDetails.tsx"
    "apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/components/AlertAnalysisTable/columns.tsx"
    "apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsTable/columns.tsx"
    "apps/backoffice-v2/src/pages/TransactionMonitoringAlerts/components/AlertsTable/columns.tsx"
    "apps/backoffice-v2/src/pages/Entities/components/Cases/Cases.Item.tsx"
    "apps/backoffice-v2/src/pages/TransactionMonitoringAlertsAnalysis/components/ExpandedTransactionDetails.tsx"
    "apps/backoffice-v2/src/pages/TransactionMonitoringAlertsAnalysis/components/AlertAnalysisTable/columns.tsx"
    "apps/backoffice-v2/src/lib/blocks/components/EditableDetails/EditableDetails.tsx"
    "apps/backoffice-v2/src/common/utils/format-date/format-date.ts"
)

# Extract and print the dayjs format strings from each file
for file in "${files[@]}"; do
    echo "File: $file"
    rg 'dayjs\(.+\)\.format\(.+\)' "$file"
done

    Length of output: 5402

    87-106: The 'severity' column uses a dynamic class name based on the severity level. Verify that all possible severity levels are correctly mapped to class names in severityToClassName.

    Verification successful

    The severityToClassName mappings in both the BusinessesAlerts and TransactionMonitoringAlerts components are consistent and cover the same severity levels: HIGH, MEDIUM, LOW, CRITICAL, and DEFAULT. Each severity level is mapped to a specific class name, ensuring that all possible severity levels are correctly represented in the UI with appropriate styles.

    Since the mappings are comprehensive and consistent across different parts of the application, it appears that the implementation of the 'severity' column in the AlertsTable correctly handles all defined severity levels through the severityToClassName object.

    Conclusion: The verification confirms that all possible severity levels are correctly mapped to class names in severityToClassName for the 'severity' column in the AlertsTable. The implementation is consistent and covers all expected cases.

    • severityToClassName mapping in BusinessesAlerts and TransactionMonitoringAlerts components:
      • HIGH: 'bg-destructive/20 text-destructive'
      • MEDIUM: 'bg-orange-100 text-orange-300'
      • LOW: 'bg-success/20 text-success'
      • CRITICAL: 'bg-destructive text-background'
      • DEFAULT: 'bg-foreground text-background'
    Scripts Executed

    The following scripts were executed for the analysis:

    Script:

    #!/bin/bash
# Description: Verify that all possible severity levels are correctly mapped to class names in `severityToClassName`.

# Check the implementation of `severityToClassName` for completeness.
rg 'severityToClassName' --files-with-matches

    Length of output: 421

    Script:

    #!/bin/bash
# Description: Extract the content of severityToClassName from the identified files to verify the mapping of severity levels to class names.

# Extract the content from the file where severityToClassName is defined.
cat apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsTable/severity-to-class-name.tsx
cat apps/backoffice-v2/src/pages/TransactionMonitoringAlerts/components/AlertsTable/severity-to-class-name.tsx

    Length of output: 1140

    154-179: The 'decision' column correctly formats the decision text and applies conditional styling. Ensure that the mapping from decision text to text color is complete and accurate.

    Verification successful

    The verification of the decisionToTextColor mapping in the 'decision' column has been successfully completed. The mapping is consistent across both files and accurately reflects the text color for the known decision states 'CLEARED' and 'REJECTED'. No discrepancies or missing mappings were found based on the current information.

    • File: apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsTable/columns.tsx
    • File: apps/backoffice-v2/src/pages/TransactionMonitoringAlerts/components/AlertsTable/columns.tsx
    Scripts Executed

    The following scripts were executed for the analysis:

    Script:

    #!/bin/bash
# Description: Verify that the mapping from decision text to text color in the 'decision' column is complete and accurate.

# Check the implementation of `decisionToTextColor` for completeness and accuracy.
rg 'decisionToTextColor' --files-with-matches

    Length of output: 218

    Script:

    #!/bin/bash
# Extract the content of `decisionToTextColor` from the files where it is used to verify completeness and accuracy.
rg 'const decisionToTextColor = {' -A 10 apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsTable/columns.tsx
rg 'const decisionToTextColor = {' -A 10 apps/backoffice-v2/src/pages/TransactionMonitoringAlerts/components/AlertsTable/columns.tsx

    Length of output: 502

    Script:

    #!/bin/bash
# Correct the regex pattern and extract the content of `decisionToTextColor` from the files where it is used to verify completeness and accuracy.
rg 'const decisionToTextColor = \{' -A 10 apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsTable/columns.tsx
rg 'const decisionToTextColor = \{' -A 10 apps/backoffice-v2/src/pages/TransactionMonitoringAlerts/components/AlertsTable/columns.tsx

    Length of output: 982

    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?

    Share
    Tips

    Chat

    There are 3 ways to chat with CodeRabbit:

    • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
      • I pushed a fix in commit <commit_id>.
      • Generate unit testing code for this file.
      • Open a follow-up GitHub issue for this discussion.
    • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
      • @coderabbitai generate unit testing code for this file.
      • @coderabbitai modularize this function.
    • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
      • @coderabbitai generate interesting stats about this repository and render them as a table.
      • @coderabbitai show all the console.log statements in this repository.
      • @coderabbitai read src/utils.ts and generate unit testing code.
      • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

    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 as PR comments)

    • @coderabbitai pause to pause the reviews on a PR.
    • @coderabbitai resume to resume the paused reviews.
    • @coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
    • @coderabbitai resolve resolve all the CodeRabbit review comments.
    • @coderabbitai help to get help.

    Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

    CodeRabbit Configration File (.coderabbit.yaml)

    • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
    • Please see the configuration documentation for more information.
    • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

    Documentation and Community

    • Visit our Documentation for detailed information on how to use CodeRabbit.
    • Join our Discord Community to get help, request features, and share feedback.
    • Follow us on X/Twitter for updates and announcements.

    coderabbitai[bot] avatar May 01 '24 11:05 coderabbitai[bot]

    PR Description updated to latest commit (https://github.com/ballerine-io/ballerine/commit/8ed47e5f498d472dac1a9126acb9b477709d1919)

    github-actions[bot] avatar May 01 '24 11:05 github-actions[bot]

    PR Review

    ⏱️ Estimated effort to review [1-5]

    3, because the PR involves multiple changes across various files including routing, UI components, hooks, and API integration. The changes are spread across front-end and back-end logic, requiring a thorough review to ensure all parts work together seamlessly and no regressions are introduced.

    🧪 Relevant tests

    No

    🔍 Possible issues

    Possible Bug: The useAlertsTableLogic hook in AlertsTable.tsx has a commented out line for setting a session storage item. This might be an oversight or an incomplete refactor. Ensure this is intentional and not a debugging leftover.

    Possible Bug: The useTransactionMonitoringAlertsLogic hook incorrectly sets the entityType as 'transaction' for business alerts. This should likely be 'business' to match the context of the use case.

    🔒 Security concerns

    No

    Code feedback:
    relevant fileapps/backoffice-v2/src/pages/TransactionMonitoringAlerts/components/AlertsTable/hooks/useAlertsTableLogic/useAlertsTableLogic.tsx
    suggestion      

    Remove the commented out line for setting session storage if it's not needed, or restore its functionality if it was commented out by mistake. This cleanup will prevent potential confusion about the code's purpose and maintainability. [important]
    relevant line// sessionStorage.setItem('transaction-monitoring:transactions-drawer:previous-path', url);
    relevant fileapps/backoffice-v2/src/pages/TransactionMonitoringAlerts/hooks/useTransactionMonitoringAlertsLogic/useTransactionMonitoringAlertsLogic.tsx
    suggestion      

    Correct the entityType to 'business' when fetching alerts in the context of business monitoring. This ensures that the correct type of alerts are fetched and processed. [important]
    relevant lineentityType: 'transaction',
    ✨ Review tool usage guide:

    Overview: The review tool scans the PR code changes, and generates a PR review which includes several types of feedbacks, such as possible PR issues, security threats and relevant test in the PR. More feedbacks can be added by configuring the tool.

    The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on any PR.

    • When commenting, to edit configurations related to the review tool (pr_reviewer section), use the following template:
    /review --pr_reviewer.some_config1=... --pr_reviewer.some_config2=...

    [pr_reviewer]
some_config1=...
some_config2=...

    See the review usage page for a comprehensive guide on using this tool.

    github-actions[bot] avatar May 01 '24 11:05 github-actions[bot]

    PR Code Suggestions

    CategorySuggestions                                                                                                                                                       
    Maintainability
    Replace hardcoded locale paths with dynamic locale path generation.

    Avoid using hardcoded locale paths in the router configuration. Instead, use a variable or
    a function to generate the locale path dynamically. This will make the code more
    maintainable and adaptable to changes in locale handling.

    apps/backoffice-v2/src/Router/Router.tsx [118]

    -path: '/:locale/businesses/alerts',
+path: `${getLocalePath()}/businesses/alerts`,
    Refactor navigation item generation into a separate function.

    Extract the logic for generating navigation items into a separate function or utility to
    improve code readability and reusability.

    apps/backoffice-v2/src/common/components/organisms/Header/hooks/useNavbarLogic/useNavbarLogic.tsx [23-34]

    -children: [
-  ...(businessesFilters?.map(({ id, name }) => ({
-    filterId: id,
-    text: name,
-    href: `/en/case-management/entities?filterId=${id}`,
-    key: `nav-item-${id}`,
-  })) ?? []),
-  {
-    text: 'Ongoing Monitoring',
-    href: `/en/businesses/alerts`,
-    key: 'nav-item-business-alerts',
-  },
-],
+children: generateBusinessNavItems(businessesFilters),
    Use a more descriptive type name for alert entity categories.

    Consider using a more descriptive type name than AlertEntityType to improve code
    readability and maintainability.

    apps/backoffice-v2/src/domains/alerts/fetchers.ts [97]

    -export type AlertEntityType = 'transaction' | 'business';
+export type AlertEntityCategory = 'transaction' | 'business';
    Move inline styles to CSS classes for better maintainability.

    Replace the inline style for the TableHead component with a class in the CSS file to
    maintain consistency and improve maintainability of styles.

    apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/components/AlertAnalysisTable/AlertAnalysisTable.tsx [52-54]

     <TableHead
   key={header.id}
-  className={`sticky top-0 z-10 h-[34px] bg-white p-0 text-[14px] font-bold text-[#787981]`}
+  className="table-head-custom"
 >
    Use a constant for repeated locale strings to improve maintainability.

    Use a constant for the locale 'en-US' in the Intl.NumberFormat to avoid repetition and
    facilitate changes in the future.

    apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/components/ExpandedTransactionDetails.tsx [29-32]

    -return new Intl.NumberFormat('en-US', {
+const locale = 'en-US';
+return new Intl.NumberFormat(locale, {
   style: 'currency',
   currency: transaction.transactionCurrency,
 }).format(transaction.transactionAmount);
    Refactor repeated transaction detail formatting into a separate component.

    Extract the repeated pattern of formatting transaction details with TextWithNAFallback
    into a separate component to reduce redundancy and improve readability.

    apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/components/ExpandedTransactionDetails.tsx [74]

    -<TextWithNAFallback>{titleCase(transaction.transactionStatus ?? '')}</TextWithNAFallback>
+<FormattedTransactionDetail detail={transaction.transactionStatus} />
    Best practice
    Remove the debugger statement from production code.

    Remove the debugger statement to ensure the production code is clean and does not include
    debugging tools.

    apps/backoffice-v2/src/domains/alerts/hooks/queries/useAlertsQuery/useAlertsQuery.tsx [24]

    -debugger;
+// Removed debugger statement
    Add setRowSelection to the dependency array of the useEffect hook to avoid stale closures.

    The useEffect hook is used to reset the rowSelection state when ids is empty, but it does
    not include setRowSelection in its dependency array. This can lead to stale closures
    capturing an outdated state setter function. It's recommended to add setRowSelection to
    the dependency array of the useEffect hook to ensure it always has the latest setter
    function.

    apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsTable/hooks/useAlertsTableLogic/useAlertsTableLogic.tsx [97-101]

     useEffect(() => {
   if (Object.keys(ids ?? {}).length > 0) return;
   setRowSelection({});
-}, [ids]);
+}, [ids, setRowSelection]);
    Replace .catch() with .default() for setting default values in Zod schemas.

    Replace the .catch() method with .default() for setting default values in the Zod schema.
    The .catch() method is typically used for error handling, while .default() explicitly sets
    default values for the schema.

    apps/backoffice-v2/src/pages/BusinessesAlerts/get-alerts-search-schema.ts [8-12]

     sortBy: z
   .enum(['dataTimestamp', 'status'] as const satisfies ReadonlyArray<
     Extract<keyof TAlertsList[number], 'dataTimestamp' | 'status'>
   >)
-  .catch('dataTimestamp'),
+  .default('dataTimestamp'),
    Use constants for repeated literal values to enhance maintainability.

    Use a constant for date format strings to avoid repetition and facilitate changes in the
    future.

    apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/components/AlertAnalysisTable/columns.tsx [35-37]

    -const date = dayjs(dateValue).format('MMM DD, YYYY');
-const time = dayjs(dateValue).format('hh:mm');
+const DATE_FORMAT = 'MMM DD, YYYY';
+const TIME_FORMAT = 'hh:mm';
+const date = dayjs(dateValue).format(DATE_FORMAT);
+const time = dayjs(dateValue).format(TIME_FORMAT);
    Use class-based styling instead of inline styles for consistency and performance.

    Replace inline styles with class-based styling in JSX to maintain consistency and leverage
    CSS for styling, which can improve performance and maintainability.

    apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/components/ExpandedTransactionDetails.tsx [61]

    -<div className={`flex max-w-[250px] flex-col justify-between space-y-2`}>
+<div className="transaction-details">
    Enhancement
    Simplify conditional rendering in the JSX structure.

    Use conditional rendering to simplify the JSX structure and improve readability.

    apps/backoffice-v2/src/pages/BusinessesAlerts/BusinessesAlerts.page.tsx [36-37]

    -{isNonEmptyArray(alerts) && <AlertsTable data={alerts ?? []} />}
-{Array.isArray(alerts) && !alerts.length && !isLoadingAlerts && <NoAlerts />}
+{isNonEmptyArray(alerts) ? <AlertsTable data={alerts} /> : <NoAlerts />}
    Add validation or encoding to ensure the output from onPrevPage and onNextPage is a valid query string.

    The onPrevPage and onNextPage functions are expected to return a string representing the
    search parameters, but there is no validation or handling of the returned value to ensure
    it is a valid query string. This can lead to potential issues if the functions return
    invalid query strings. It's recommended to add validation or encoding to ensure the output
    is a valid query string.

    apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsPagination/AlertsPagination.tsx [14-15]

     onPrevPage: () => string;
 onNextPage: () => string;
+// Example of adding validation or encoding:
+const validateAndEncodeParams = (params: string) => encodeURIComponent(params);
+// Usage:
+search: validateAndEncodeParams(onPrevPage()),
    Modify the onRowClick function to prevent default action and stop propagation of the click event.

    The onRowClick function is used to set a session storage item but does not prevent the
    default action or propagation of the click event. This can lead to unintended side effects
    if the click event is also handled by other elements. It's recommended to modify the
    onRowClick function to accept the event as a parameter and call event.preventDefault() and
    event.stopPropagation() to control the event's propagation.

    apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsTable/AlertsTable.tsx [93-95]

    -const onRowClick = useCallback(() => {
+const onRowClick = useCallback((event: React.MouseEvent) => {
+  event.preventDefault();
+  event.stopPropagation();
   sessionStorage.setItem('transaction-monitoring:transactions-drawer:previous-path', url);
 }, [url]);
    Add a fallback value for assignee.fullName when generating initials to handle null or undefined cases.

    The createInitials function is used to generate initials for the AvatarFallback component,
    but there is no handling for potential null or undefined values of assignee.fullName. This
    can lead to unexpected behavior or errors if fullName is not provided. It's recommended to
    add a fallback or default value when fullName is not available.

    apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsTable/columns.tsx [134]

    -{createInitials(assignee?.fullName)}
+{createInitials(assignee?.fullName ?? 'N/A')}
    Correct the class syntax for the IndeterminateCheckbox component to ensure the border color is applied as intended.

    The IndeterminateCheckbox component is used with a className that sets the border color,
    but the border-[#E5E7EB] class might not be correctly applied due to the syntax used. It's
    recommended to ensure that the class is correctly formatted and applied to achieve the
    desired styling.

    apps/backoffice-v2/src/pages/BusinessesAlerts/components/AlertsTable/columns.tsx [191]

    -className={'border-[#E5E7EB]'}
+className='border border-[#E5E7EB]'
    Simplify access to nested properties using destructuring.

    Use destructuring to simplify the access to session.user.id in the
    useTransactionMonitoringAlertsLogic function to enhance code readability and reduce
    redundancy.

    apps/backoffice-v2/src/pages/BusinessesAlerts/hooks/useTransactionMonitoringAlertsLogic/useTransactionMonitoringAlertsLogic.tsx [13]

    -const AlertsSearchSchema = getAlertsSearchSchema(session?.user?.id);
+const { user: { id: userId } = {} } = session || {};
+const AlertsSearchSchema = getAlertsSearchSchema(userId);
    Improve clipboard handling by checking for permissions and support.

    Replace the direct use of navigator.clipboard.writeText with a more robust clipboard
    handling function that checks for clipboard write permissions. This will prevent potential
    errors in environments where clipboard access is not allowed.

    apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/components/ExpandedTransactionDetails.tsx [19]

    -await navigator.clipboard.writeText(text);
+if (navigator.clipboard) {
+  try {
+    await navigator.clipboard.writeText(text);
+  } catch (error) {
+    console.error('Failed to copy text: ', error);
+  }
+} else {
+  console.error('Clipboard not supported');
+}
    Add error handling to the clipboard operation to enhance user experience.

    Implement error handling for the copyToClipboard function to manage exceptions and provide
    user feedback in case of failures.

    apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/components/ExpandedTransactionDetails.tsx [19-21]

    -await navigator.clipboard.writeText(text);
-toast.success(t(`toast:copy_to_clipboard`, { text }));
+try {
+  await navigator.clipboard.writeText(text);
+  toast.success(t(`toast:copy_to_clipboard`, { text }));
+} catch (error) {
+  toast.error(t(`toast:error_copying`, { error }));
+}
    Bug
    Correct the logic to disable the expand button only when the row cannot be expanded.

    Add a check for row.getCanExpand() to disable the button only when the row cannot be
    expanded, improving the usability and feedback of the UI.

    apps/backoffice-v2/src/pages/BusinessesAlertsAnalysis/components/AlertAnalysisTable/AlertAnalysisTable.tsx [18-24]

     <Button
   onClick={() => row.toggleExpanded()}
-  disabled={row.getCanExpand()}
+  disabled={!row.getCanExpand()}
   variant="ghost"
   size="icon"
   className={`p-[7px]`}
 >
    ✨ Improve tool usage guide:

    Overview: The improve tool scans the PR code changes, and automatically generates suggestions for improving the PR code. The tool can be triggered automatically every time a new PR is opened, or can be invoked manually by commenting on a PR.

    • When commenting, to edit configurations related to the improve tool (pr_code_suggestions section), use the following template:
    /improve --pr_code_suggestions.some_config1=... --pr_code_suggestions.some_config2=...

    [pr_code_suggestions]
some_config1=...
some_config2=...

    See the improve usage page for a comprehensive guide on using this tool.

    github-actions[bot] avatar May 01 '24 11:05 github-actions[bot]