diff --git a/assets/icons/ic_celebrate.svg b/assets/icons/ic_celebrate.svg new file mode 100644 index 00000000..8f1879b8 --- /dev/null +++ b/assets/icons/ic_celebrate.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/lib/core/l10n/app_ar.arb b/lib/core/l10n/app_ar.arb index 6abf2f6a..b80607e5 100644 --- a/lib/core/l10n/app_ar.arb +++ b/lib/core/l10n/app_ar.arb @@ -167,5 +167,14 @@ "system": "النظام", "home": "الرئيسية", "top_spending_category": "أكثر فئات الإنفاق", - "spend": "إنفاق" + "spend": "إنفاق", + "selectMonthYear": "اختر الشهر والسنة", + "addIncome": "إضافة دخل", + "saving": "ادخار", + "spending": "إنفاق", + "incomeAddedSuccessfully": "تم إضافة الدخل بنجاح!", + "failedToAddIncome": "فشل في إضافة الدخل", + "whereDoYouUsuallySpendYourMoney": "أين تنفق أموالك عادة؟", + "suggestions": "اقتراحات", + "selectedCategories": "التصنيفات المختارة" } diff --git a/lib/core/l10n/app_en.arb b/lib/core/l10n/app_en.arb index a0805f02..12faebf8 100644 --- a/lib/core/l10n/app_en.arb +++ b/lib/core/l10n/app_en.arb @@ -185,5 +185,6 @@ "system": "System", "home": "Home", "top_spending_category": "Top spending category", - "spend": "Spend" + "spend": "Spend", + "selectMonthYear": "Select month & year" } diff --git a/lib/design_system/assets/app_assets.dart b/lib/design_system/assets/app_assets.dart index e6ba0967..bd77bff6 100644 --- a/lib/design_system/assets/app_assets.dart +++ b/lib/design_system/assets/app_assets.dart @@ -82,4 +82,5 @@ class AppAssets { static const String icEmptyRadioButton = '$_icons/ic_circle.svg'; static const String icSelectedRadioButton = '$_icons/ic_check_circle.svg'; static const String glowBackground = '$_images/money_background.png'; + static const String icCelebrate = '$_images/ic_celebrate.svg'; } diff --git a/lib/design_system/widgets/app_bar.dart b/lib/design_system/widgets/app_bar.dart index 75835e6e..4df777cd 100644 --- a/lib/design_system/widgets/app_bar.dart +++ b/lib/design_system/widgets/app_bar.dart @@ -71,11 +71,14 @@ width: 40, height: 40, decoration: BoxDecoration( - color: context.colors.surfaceHigh, + color: context.colors.surface, shape: BoxShape.circle, ), alignment: Alignment.center, - child: SvgPicture.asset(assetPath, width: 20, height: 20), + child: SvgPicture.asset(assetPath, + matchTextDirection: true, + colorFilter: ColorFilter.mode(context.colors.title,BlendMode.srcIn), + width: 20, height: 20), ), ); } @@ -103,7 +106,9 @@ spacing: 4, children: [ Text(date, style: typo.label.small.copyWith(color: contentColor)), - SvgPicture.asset(AppAssets.icNormalArrowDown, width: 20, height: 20), + SvgPicture.asset(AppAssets.icNormalArrowDown, + colorFilter: ColorFilter.mode(contentColor,BlendMode.srcIn), + width: 20, height: 20), ], ), ), diff --git a/lib/design_system/widgets/custom_date_picker.dart b/lib/design_system/widgets/custom_date_picker.dart index c7d42810..c5bc6c05 100644 --- a/lib/design_system/widgets/custom_date_picker.dart +++ b/lib/design_system/widgets/custom_date_picker.dart @@ -9,6 +9,9 @@ Future showMonthYearDialog( }) { int selectedMonth = initialMonth; int selectedYear = initialYear; + final localization = context.localizations; + final colors = context.colors; + final typography = context.typography; return showDialog( context: context, @@ -16,10 +19,11 @@ Future showMonthYearDialog( return StatefulBuilder( builder: (context, setState) { return AlertDialog( - backgroundColor: context.colors.surface, + backgroundColor: colors.surface, + shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)), title: Text( - "Select month & year", - style: context.typography.title.medium, + localization.selectMonthYear, + style: typography.title.medium.copyWith(color: colors.title), ), content: Row( children: [ @@ -27,6 +31,9 @@ Future showMonthYearDialog( child: DropdownButton( value: selectedMonth, isExpanded: true, + dropdownColor: colors.surface, + style: typography.body.medium.copyWith(color: colors.title), + underline: Container(height: 1, color: colors.primary), items: List.generate(12, (i) => i + 1) .map( (m) => DropdownMenuItem( @@ -47,6 +54,9 @@ Future showMonthYearDialog( child: DropdownButton( value: selectedYear, isExpanded: true, + dropdownColor: colors.surface, + style: typography.body.medium.copyWith(color: colors.title), + underline: Container(height: 1, color: colors.primary), items: List.generate(50, (i) => 2000 + i) .map( (y) => DropdownMenuItem( @@ -67,14 +77,20 @@ Future showMonthYearDialog( actions: [ TextButton( onPressed: () => Navigator.pop(context), - child: const Text("Cancel"), + child: Text( + localization.cancel, + style: typography.label.large.copyWith(color: colors.primary), + ), ), TextButton( onPressed: () => Navigator.pop( context, DateTime(selectedYear, selectedMonth), ), - child: const Text("OK"), + child: Text( + localization.select, + style: typography.label.large.copyWith(color: colors.primary), + ), ), ], ); diff --git a/lib/design_system/widgets/nav_bar.dart b/lib/design_system/widgets/nav_bar.dart index 698f0cd9..ac4b8d6c 100644 --- a/lib/design_system/widgets/nav_bar.dart +++ b/lib/design_system/widgets/nav_bar.dart @@ -32,7 +32,7 @@ enum NavBarTab { case NavBarTab.home: return l10n.home; case NavBarTab.transaction: - return l10n.transaction; + return l10n.transactions; case NavBarTab.statistics: return l10n.statistics; case NavBarTab.account: diff --git a/lib/design_system/widgets/text_field_date_Picker.dart b/lib/design_system/widgets/text_field_date_Picker.dart index 8946fbb8..d87d3d9c 100644 --- a/lib/design_system/widgets/text_field_date_Picker.dart +++ b/lib/design_system/widgets/text_field_date_Picker.dart @@ -73,7 +73,9 @@ class _TextFieldDatePickerState extends State { child: Row( crossAxisAlignment: CrossAxisAlignment.center, children: [ - SvgPicture.asset(AppAssets.icCalender, width: 24, height: 24), + SvgPicture.asset(AppAssets.icCalender, + colorFilter: ColorFilter.mode(colors.body,BlendMode.srcIn), + width: 24, height: 24), SizedBox(width: 8), Expanded( child: TextField( @@ -99,7 +101,7 @@ class _TextFieldDatePickerState extends State { builder: (context, child) { return Theme( data: Theme.of(context).copyWith( - colorScheme: ColorScheme.light( + colorScheme: Theme.of(context).colorScheme.copyWith( primary: colors.primary, onPrimary: colors.onPrimary, onSurface: colors.title, @@ -128,6 +130,7 @@ class _TextFieldDatePickerState extends State { ), SvgPicture.asset( AppAssets.icArrowDownRound, + colorFilter: ColorFilter.mode(colors.body,BlendMode.srcIn), width: 24, height: 24, ), diff --git a/lib/presentation/login/widget/login_form.dart b/lib/presentation/login/widget/login_form.dart index 981ee496..6bffb434 100644 --- a/lib/presentation/login/widget/login_form.dart +++ b/lib/presentation/login/widget/login_form.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_svg/svg.dart'; import '../../../core/l10n/app_localizations.dart'; import '../../../design_system/assets/app_assets.dart'; +import '../../../design_system/theme/money_extension_context.dart'; import '../../../design_system/widgets/text_field.dart'; class LoginForm extends StatefulWidget { @@ -28,6 +29,7 @@ class _LoginFormState extends State { @override Widget build(BuildContext context) { final localizations = AppLocalizations.of(context)!; + final colors = context.colors; return Column( children: [ MTextField( @@ -58,6 +60,8 @@ class _LoginFormState extends State { child: Padding( padding: const EdgeInsets.symmetric(vertical: 14), child: SvgPicture.asset( + width: 20,height: 20, + colorFilter: ColorFilter.mode(colors.hint, BlendMode.srcIn), _isPasswordVisible ? AppAssets.eyeOpen : AppAssets.eyeClose, ), ), diff --git a/lib/presentation/statistics/statistics_screen.dart b/lib/presentation/statistics/statistics_screen.dart index 2d144217..15442b63 100644 --- a/lib/presentation/statistics/statistics_screen.dart +++ b/lib/presentation/statistics/statistics_screen.dart @@ -8,7 +8,9 @@ import 'package:moneyplus/design_system/widgets/app_empty_view.dart'; import 'package:moneyplus/design_system/widgets/app_error_view.dart'; import 'package:moneyplus/design_system/widgets/app_loading_indicator.dart'; import 'package:moneyplus/presentation/statistics/widgets/CategoryBreakdown.dart'; +import 'package:moneyplus/presentation/transactions/screen/transactions_screen.dart'; +import '../transactions/widget/add_transaction_bottom_sheet.dart'; import '../widgets/drop_down_date_dialog.dart'; import 'cubit/statistics_cubit.dart'; import 'cubit/statistics_state.dart'; @@ -35,7 +37,7 @@ class StatisticsView extends StatefulWidget { class _StatisticsViewState extends State { void _onAddTransaction() { - // Navigate to add transaction + showAddTransactionBottomSheet(context); } void _onRetry() { @@ -44,22 +46,32 @@ class _StatisticsViewState extends State { @override Widget build(BuildContext context) { + final state = context.watch().state; + final l10n = context.localizations; + return Scaffold( backgroundColor: context.colors.surface, + appBar: CustomAppBar( + title: l10n.statistics, + trailing: switch (state) { + StatisticsSuccess(:final selectedMonth) => DropDownDateDialog( + onDatePick: (date) => context.read().changeMonth(date), + year: selectedMonth.year, + month: selectedMonth.month, + ), + _ => null, + }, + ), body: SafeArea( - child: BlocBuilder( - builder: (context, state) { - return switch (state) { - StatisticsIdle() => const SizedBox.shrink(), - StatisticsLoading() => const AppLoadingIndicator(), - StatisticsSuccess() => _buildSuccess(context, state), - StatisticsFailure(:final message) => AppErrorView( - message: message, - onRetry: _onRetry, - ), - }; - }, - ), + child: switch (state) { + StatisticsIdle() => const SizedBox.shrink(), + StatisticsLoading() => const AppLoadingIndicator(), + StatisticsSuccess() => _buildSuccess(context, state), + StatisticsFailure(:final message) => AppErrorView( + message: message, + onRetry: _onRetry, + ), + }, ), ); } @@ -77,24 +89,17 @@ class _StatisticsViewState extends State { } return SingleChildScrollView( - padding: const EdgeInsets.all(16), - child: Column( - children: [ - CustomAppBar( - title: l10n.statistics, - trailing: DropDownDateDialog( - onDatePick: (date) => { - context.read().changeMonth(date), - }, - year: state.selectedMonth.year, - month: state.selectedMonth.month, - ), - ), + child: Padding( + padding: const EdgeInsets.all(16.0), + child: Column( + children: [ MonthlyOverviewSection(overview: state.monthlyOverview), + const SizedBox(height: 16), CategoryBreakdownWidget( categoriesBreakdown: state.categoriesBreakdown, ), - ], + ], + ), ), ); } diff --git a/lib/presentation/statistics/widgets/monthly_overview/overview_savings_banner.dart b/lib/presentation/statistics/widgets/monthly_overview/overview_savings_banner.dart index 80adaa8a..75576e69 100644 --- a/lib/presentation/statistics/widgets/monthly_overview/overview_savings_banner.dart +++ b/lib/presentation/statistics/widgets/monthly_overview/overview_savings_banner.dart @@ -37,7 +37,7 @@ class OverviewSavingsBanner extends StatelessWidget { mainAxisSize: MainAxisSize.min, children: [ SvgPicture.asset( - AppAssets.icWalletAdd, + AppAssets.icCelebrate, width: DesignConstants.iconSizeSmall, height: DesignConstants.iconSizeSmall, colorFilter: ColorFilter.mode( diff --git a/lib/presentation/transactions/widget/transaction_app_bar.dart b/lib/presentation/transactions/widget/transaction_app_bar.dart index 169adf97..6a6f2343 100644 --- a/lib/presentation/transactions/widget/transaction_app_bar.dart +++ b/lib/presentation/transactions/widget/transaction_app_bar.dart @@ -47,7 +47,9 @@ class TransactionAppBar extends StatelessWidget { borderRadius: BorderRadius.circular(100), ), child: SvgPicture.asset( - AppAssets.icFilter, height: 20, width: 20,), + AppAssets.icFilter, + colorFilter: ColorFilter.mode(colors.title,BlendMode.srcIn), + height: 20, width: 20,), ), ), ], diff --git a/lib/presentation/widgets/drop_down_date_dialog.dart b/lib/presentation/widgets/drop_down_date_dialog.dart index 77078b31..7b7f0c57 100644 --- a/lib/presentation/widgets/drop_down_date_dialog.dart +++ b/lib/presentation/widgets/drop_down_date_dialog.dart @@ -40,13 +40,17 @@ class DropDownDateDialog extends StatelessWidget { borderRadius: BorderRadius.circular(100), ), child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, + spacing: 4, children: [ Text( "${getMonthNameFromNumber(month, context)}, $year", style: typography.label.small.copyWith(color: colors.title), ), - SvgPicture.asset(AppAssets.arrowDownV2), + SvgPicture.asset(AppAssets.arrowDownV2, + colorFilter: ColorFilter.mode(colors.title,BlendMode.srcIn), + width: 16, + height: 16, + ), ], ), ),