Skip to content

feature/statistics-monthly-overview#86

Open
abdo-essam wants to merge 18 commits intodevfrom
feature/statistics-monthly-overview
Open

feature/statistics-monthly-overview#86
abdo-essam wants to merge 18 commits intodevfrom
feature/statistics-monthly-overview

Conversation

@abdo-essam
Copy link
Collaborator

@abdo-essam abdo-essam commented Feb 11, 2026

Screenshot 2026-02-11 at 7 41 59 PM

Adds a collection of new widgets to build a "Monthly Overview" section. This includes:
- `MonthlyOverview`: The main container widget.
- `SummaryCard`: Displays income or expenses with an icon and formatted value.
- `ProgressBarSection`: Shows animated progress bars for income and expenses.
- `ScaleLabels`: Provides a horizontal scale for the progress bars.
- `SavingsBanner`: A banner to show the total savings for the month.
- A `formatNumber` utility function for currency display.
- New SVG icons for wallet add and money remove actions.
- A new `StatisticsScreen` and its corresponding route to display the feature.
…rview

Sets the initial route to '/statistics'.
Refactors the `MonthlyOverview` widget for a cleaner UI and adds localization.
Updates the `.gitignore` file to include more patterns and improve organization.
Renamed `SummaryCard` to `SummaryItem` and updated its usage in the `MonthlyOverview` widget.

The `SummaryItem` widget has been enhanced with a more detailed and theme-aware UI:
- Replaced the simple background color with a more refined design using theme colors (`colors.secondaryVariant`, `colors.primaryVariant`).
- Introduced a gradient circle indicator for income and expenses.
- Utilized `RichText` to apply distinct styles for the positive/negative sign and the amount.
- Replaced the boolean `isPositive` property with `isIncome` for better clarity.
- Removed the `iconBackgroundColor` property in favor of theme-based coloring.
Replaced the existing `_AnimatedProgressBar` with the new `_GradientProgressBar` to update the visual style of the income and expenses bars in the monthly overview.

Changes include:
- Renaming `_AnimatedProgressBar` to `_GradientProgressBar`.
- Updating the progress bar's visual appearance to use a gradient, a border, and a shadow.
- Removing the icon from the progress bar.
- Adjusting the height and layout to match the new design.
Refactors the `ScaleLabels` widget to use the application's design system for typography and colors. Also, one of the scale labels was updated from "1M500K" to "1.5M".
Refactors the `MonthlyOverview` widget by separating the main content container from the `SavingsBanner`. The `SavingsBanner` is now positioned below the main overview container, with adjusted styles, colors, and icons.

Changes include:
- Updated border radius logic in `MonthlyOverview` to conditionally curve corners based on whether savings are displayed.
- Revised the `SavingsBanner` with new styling, including color, height, and content alignment, using theme-based properties.
- Increased icon sizes within `SummaryItem`.
The `BorderRadius.only` logic, which conditionally changed the bottom corners based on the `savings` value, has been removed. The `BoxDecoration` now uses a consistent `BorderRadius.all` with a radius of 12 for all corners, simplifying the widget's styling.
Reduces the size of the icon container and its border radius in the `SummaryItem` widget. The gradient circle indicator size is also decreased, and the icon sizes for income and expense in `MonthlyOverview` are adjusted to fit the new layout.
The vertical and horizontal spacing within the `MonthlyOverview` component has been increased for better visual separation of elements. Specifically, the spacing between the income/expense summary items and between the progress bars and surrounding elements has been enlarged. Additionally, minor code formatting cleanup was performed.
Replaced hardcoded color values with theme-based colors from `context.colors` for the progress bar's background, border, and shadow.
The color of the scale labels in the monthly overview statistics widget has been updated from `hint` to `body`.
…management

Decomposes the `StatisticsScreen` by extracting UI components into dedicated widgets and introduces a BLoC (`StatisticsCubit`) for state management, along with a repository pattern for data fetching.

Key changes:
- **State Management**: Introduces `StatisticsCubit`, `StatisticsState`, and `StatisticsRepository` to handle loading, success, and error states for statistics data.
- **Component Refactoring**: The monolithic `MonthlyOverview` widget is broken down into smaller, reusable components:
    - `MonthlyOverviewSection`: The main container.
    - `OverviewProgressBar`: Manages progress bar UI.
    - `OverviewSavingsBanner`: Displays user savings.
    - `OverviewScaleLabels`: Renders the scale below the progress bars.
    - `SummaryItem`: Cleaned up to use a centralized `NumberFormatter`.
- **Centralized Constants & Utilities**:
    - Adds `DesignConstants` for consistent sizing, spacing, and styling values.
    - Implements `NumberFormatter` to standardize number and currency formatting.
- **UI States**: Adds `AppLoadingIndicator`, `AppErrorView`, and `AppEmptyView` to provide feedback for different data loading states.
- **Dependency Injection**: Moves the `injection.dart` file to `core/di` and registers the new `StatisticsRepository` and `StatisticsCubit`.
- **Localization**: Adds new strings for the statistics screen, including empty/error states and savings messages.
@abdo-essam abdo-essam self-assigned this Feb 11, 2026
This was linked to issues Feb 11, 2026
…thly-overview

# Conflicts:
#	lib/core/l10n/app_en.arb
#	lib/design_system/assets/app_assets.dart
#	lib/design_system/widgets/app_bar.dart
#	lib/presentation/navigation/routes.dart
#	lib/presentation/navigation/routes.g.dart
…iew' into feature/statistics-monthly-overview

# Conflicts:
#	lib/core/di/injection.dart
#	lib/core/l10n/app_ar.arb
#	lib/core/l10n/app_en.arb
#	lib/presentation/home/screen/home_screen.dart
Refactor dependency injection setup by adding TransactionCubit and updating imports.
Update GoRouter generated routes with new paths for onboarding, login, main, and statistics screens.
Introduces a `FakeStatisticsRepository` to provide mock data for the monthly overview, facilitating UI development and testing. This fake repository is now registered in the dependency injection container instead of the real `StatisticsRepositoryImpl`.

Changes include:
- A new `FakeStatisticsRepository` that returns a hardcoded `MonthlyOverview` object.
- The dependency injection setup now uses `FakeStatisticsRepository` for the `StatisticsRepository` singleton.
- Minor cleanup of a `TODO` comment and an empty line in related files.
…iew' into feature/statistics-monthly-overview

# Conflicts:
#	lib/core/di/injection.dart
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Monthly overview section Implement Statistics Screen

1 participant