Accountable Transactions: Betting Pool Analysis

by Alex Johnson 48 views

Welcome! This document outlines the requirements and specifications for developing the "accountable-transactions/betting-pool" feature. This feature is designed to provide an efficient way to analyze and review betting pool transactions within a financial system. Let's delve into the details, ensuring we build a robust and user-friendly experience.

Parent Issue and Priorities

This initiative is directly linked to Epic #31 (Transaction Module), which focuses on enhancing the transaction management capabilities within the system. The priority for this specific feature is HIGH, particularly for the initial phase (Phase 1). The complexity is estimated to be LOW, primarily because the focus is on filters and data presentation without an initial data table. This approach simplifies the implementation and allows us to deliver a functional solution efficiently.

Original Paths and Versions

The feature's user interface will be accessible through the following paths in different versions:

  • Vue.js: #/accountable-transactions/betting-pool
  • V1: /accountable-transactions/betting-pool or /transacciones-banca
  • V2: /transactions/betting-pool or /transacciones/por-banca

These paths ensure that the feature is easily accessible and integrated into the overall application structure. The different versions provide flexibility in adapting to the specific technology stacks and user interface designs of the system.

Functionalities: The Core Features

The core functionalities of the betting pool analysis feature revolve around data filtering and presentation. The feature is designed with the user experience in mind, ensuring ease of use and efficient data retrieval. The functionalities are as follows:

1. Filters (3 Inputs): Refining the Data

The feature will incorporate three key filters to allow users to refine the data. These filters will allow users to customize their search and analysis. The filters include:

  • Initial Date (Date Picker): This filter enables users to specify the starting date for the transaction data they wish to analyze. The use of a date picker will simplify the date selection process and reduce the possibility of errors.
  • End Date (Date Picker): This filter allows users to define the end date for the transaction data. By setting both initial and end dates, users can establish a specific date range for their analysis.
  • Betting Pool (Combobox/Autocomplete): This filter will enable users to select a specific betting pool (or "banca") for analysis. The use of a combobox with autocomplete functionality will streamline the process of selecting the betting pool, providing a more intuitive and efficient user experience. This feature is essential for isolating the data related to a specific betting pool.

2. Action Button: Initiating the Analysis

  • "VIEW SALES" (Turquoise #51cbce, Centered): This is the primary action button. The button will be prominently displayed and centered, providing users with a clear and immediate option to initiate the data retrieval process. Upon clicking the button, the system will validate the user's input, load the corresponding data, and display the results, either in a table or by redirecting to another view.

3. Behavior: User Experience and Data Display

The system's behavior will be defined as follows:

  • Initial View: The initial view will display the filters, allowing users to select their desired criteria before proceeding with the analysis.
  • After Clicking "VIEW SALES":
    • The system will validate if a betting pool is selected. This ensures that the user has provided the necessary input before the analysis can proceed.
    • The system will load the transaction/sales data associated with the selected betting pool and the specified date range. The data retrieval process will involve interaction with the API endpoints to retrieve the necessary information.
    • The system will display the results in a table format, allowing users to review the transaction data. The structure of the table (columns and data) is yet to be determined and will be based on the outcome of the research phase.
    • As an alternative, the system might redirect the user to a separate view. The exact nature of this action will be defined after the research phase. The objective is to provide an optimal and user-friendly experience.

API Endpoints: Data Access and Retrieval

The feature will interact with specific API endpoints to retrieve the necessary data. These endpoints are crucial for ensuring seamless data access and management. The estimated API endpoints are as follows:

GET /api/accountable-transactions/betting-pool/{bettingPoolId}?startDate=&endDate=
GET /api/betting-pools (for betting pool combobox)

The first endpoint will retrieve the detailed transaction data for a specific betting pool and date range. The second endpoint will be used to populate the betting pool combobox, providing a list of available betting pools.

Mockup Data: Understanding the Output

To provide a clearer understanding of the expected output, here's an example of the response that might be received after clicking "VIEW SALES:"

// Possible response after "VIEW SALES"
{
  bettingPool: {
    id: 1,
    code: 'BC001',
    name: 'LA CENTRAL 01'
  },
  transactions: [
    {
      id: 1,
      date: '18/11/2025',
      time: '09:30:00',
      type: 'Sale',
      amount: 500.00,
      description: 'Ticket Sale'
    }
  ],
  totals: {
    sales: 1500.00,
    collections: 800.00,
    balance: 700.00
  }
}

This data includes information about the betting pool, a list of individual transactions, and summary totals (sales, collections, and balance). The data format is designed to be easily parsed and displayed in a user-friendly manner.

Component Creation: Building the UI

The components for this feature will be developed in two versions, each tailored to different technology stacks:

V1 (Bootstrap)

  • frontend-v1/src/components/transactions/TransactionsByBettingPool.jsx: This component will be developed using Bootstrap. This component may also use a modal or an inline table for presenting the results. This approach ensures compatibility with the existing Bootstrap-based framework.

V2 (Material-UI)

  • frontend-v2/src/components/features/transactions/TransactionsByBettingPool/index.jsx: This component will be developed using Material-UI. The results may be displayed in a Dialog or an inline table. This approach ensures a consistent and modern UI design. The design will integrate seamlessly with the Material-UI-based framework.

Technical Considerations: Key Points for Development

Several technical considerations need to be taken into account during the development phase:

  • Simple View: The initial view is relatively simple, consisting of only three input fields and a single action button. This simplicity allows for rapid development and straightforward implementation.
  • Post-"VIEW SALES" Behavior to Investigate: The specific behavior after clicking the "VIEW SALES" button needs to be defined. The decision of whether to display a table, a modal, or redirect to another view will depend on the user experience requirements and the data presentation strategy. This aspect is crucial for ensuring that the feature meets the needs of its users.
  • Betting Pool Combobox: The betting pool combobox should have search/autocomplete functionality. This will provide an efficient way for users to select the correct betting pool from a large list. The integration of this feature will significantly enhance the user experience.
  • Betting Pool Selection Validation: Before clicking "VIEW SALES", the system must validate that a betting pool has been selected. This is essential to prevent errors and to guide the user towards the desired outcome.

Pending Research: Identifying the Optimal Data Display

Before implementing the final version of the feature, several aspects need to be investigated. This research phase is crucial for ensuring that the feature meets the requirements and provides an effective solution. The following steps are required:

Additional Analysis Required

  1. Click the "VIEW SALES" button in the original application. The goal is to see how the button currently works in the existing system.
  2. Verify the result displayed after clicking "VIEW SALES"—is it a table, sales summary, or a different type of presentation? The key is to see what kind of data is displayed after the button is clicked.
  3. Capture a screenshot of the result. This screenshot will serve as a visual reference for the new implementation.
  4. Identify the columns of the resulting table. Knowing the structure of the data display is crucial for implementing a user-friendly interface.

Possible Outcomes

The investigation could reveal any of the following outcomes:

  • Option A: Displays a table of transactions for the betting pool.
  • Option B: Displays a sales summary by lottery.
  • Option C: Redirects to a sales view with a betting pool filter applied.
  • Option D: Opens a modal with a detailed report.

The research results will guide the final implementation decisions.

Acceptance Criteria: Ensuring Quality

To ensure the feature meets the required standards, the following acceptance criteria must be met:

  • Date Filters: The date filters must work correctly, allowing users to specify the date range for the analysis.
  • Betting Pool Combobox: The betting pool combobox should have search functionality.
  • "VIEW SALES" Button Validation: The "VIEW SALES" button must validate the betting pool selection before proceeding.
  • Correct Result Display: Clicking "VIEW SALES" must display the correct results, corresponding to the selected betting pool and date range.
  • (Based on Research) Correct Display: The table, modal, or view should be displayed correctly, as determined by the research phase.
  • Data Accuracy: The data displayed should correspond to the betting pool and the selected dates.

Screenshots: Visual References

  • Initial reference: /home/jorge/projects/.playwright-mcp/transactions-by-betting-pool.png
  • TODO: Capture screenshot after clicking "VIEW SALES". This is necessary to understand the final display.

Next Steps: Moving Forward

The next steps for this project are as follows:

  1. Investigate the behavior after clicking "VIEW SALES" in the original application. This will clarify the exact outcome of the user action.
  2. Update this issue with the research findings. This will document the results and ensure everyone is aware of the findings.
  3. Implement the feature based on the actual behavior. This will ensure that the feature is functional and efficient.

These steps will facilitate the development of a functional and effective betting pool analysis feature.

For more detailed information, please refer to the official Betting and Gaming Council. This is a great resource to understand industry standards and regulations.