mirror of
https://github.com/koloideal/Casha.git
synced 2026-08-08 17:51:14 +03:00
1051 lines
32 KiB
Dart
1051 lines
32 KiB
Dart
import 'package:fl_chart/fl_chart.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import 'package:intl/intl.dart';
|
|
import '../../core/constants.dart';
|
|
import '../../core/l10n/app_strings.dart';
|
|
import '../../core/l10n/locale_provider.dart';
|
|
import '../../core/services/haptic_service.dart';
|
|
import '../../shared/providers/amount_format_provider.dart';
|
|
import '../../shared/providers/category_provider.dart';
|
|
import '../../shared/utils/currency_utils.dart';
|
|
import '../../shared/widgets/byn_sign.dart';
|
|
import '../settings/provider.dart';
|
|
import 'provider.dart';
|
|
import 'widgets/account_scope_chips.dart';
|
|
|
|
class CategoriesScreen extends ConsumerStatefulWidget {
|
|
const CategoriesScreen({super.key});
|
|
|
|
@override
|
|
ConsumerState<CategoriesScreen> createState() => _CategoriesScreenState();
|
|
}
|
|
|
|
class _CategoriesScreenState extends ConsumerState<CategoriesScreen> {
|
|
int _touchedIndex = -1;
|
|
bool _showIncome = false;
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final s = ref.watch(stringsProvider);
|
|
final isRu = s.locale == AppLocale.ru;
|
|
final catalog = ref.watch(categoryCatalogProvider);
|
|
final timeFilter = ref.watch(statsTimeFilterProvider);
|
|
final summary = ref.watch(statsSummaryProvider);
|
|
final data = _showIncome
|
|
? ref.watch(categoryIncomeProvider)
|
|
: ref.watch(categoryExpenseProvider);
|
|
final total = data.values.fold(0.0, (a, b) => a + b);
|
|
final currencyInfo = ref.watch(statsCurrencyProvider);
|
|
|
|
final sortedEntries = data.entries.toList()
|
|
..sort((a, b) => b.value.compareTo(a.value));
|
|
|
|
final topEntry = sortedEntries.isEmpty ? null : sortedEntries.first;
|
|
|
|
return Scaffold(
|
|
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
|
|
body: SafeArea(
|
|
child: ListView(
|
|
padding: const EdgeInsets.fromLTRB(20, 16, 20, 100),
|
|
children: [
|
|
const AccountScopeChips(),
|
|
const SizedBox(height: 16),
|
|
Row(
|
|
children: [
|
|
Expanded(
|
|
child: _IncomeExpenseToggle(
|
|
isIncome: _showIncome,
|
|
onChanged: (val) {
|
|
HapticService.selection();
|
|
setState(() {
|
|
_showIncome = val;
|
|
_touchedIndex = -1;
|
|
});
|
|
},
|
|
),
|
|
),
|
|
const SizedBox(width: 10),
|
|
Expanded(
|
|
child: _TimePeriodToggle(
|
|
filter: timeFilter,
|
|
onChanged: (val) {
|
|
HapticService.selection();
|
|
ref.read(statsTimeFilterProvider.notifier).set(val);
|
|
setState(() => _touchedIndex = -1);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 16),
|
|
_OverviewCard(
|
|
isIncome: _showIncome,
|
|
amount: _showIncome ? summary.income : summary.expense,
|
|
transactionCount: summary.transactionCount,
|
|
currencyInfo: currencyInfo,
|
|
),
|
|
const SizedBox(height: 16),
|
|
// _InsightCard(
|
|
// title: s.monthlyTrend,
|
|
// subtitle: s.lastSixMonths,
|
|
// child: _MonthlyTrendSection(
|
|
// data: monthlyData,
|
|
// color: _showIncome ? AppColors.income : AppColors.expense,
|
|
// ),
|
|
// ),
|
|
// const SizedBox(height: 16),
|
|
if (data.isEmpty)
|
|
_EmptyState(isIncome: _showIncome)
|
|
else ...[
|
|
_InsightCard(
|
|
title: s.expenseStructure,
|
|
subtitle: s.thisPeriod,
|
|
child: _PieChartSection(
|
|
data: data,
|
|
total: total,
|
|
touchedIndex: _touchedIndex,
|
|
onTouch: (i) => setState(() => _touchedIndex = i),
|
|
currencyInfo: currencyInfo,
|
|
isIncome: _showIncome,
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
_InsightCard(
|
|
title: s.topCategories,
|
|
subtitle: topEntry == null
|
|
? s.rankedByAmount
|
|
: '${s.topCategory}: ${catalog.labelFor(topEntry.key, isRu)}',
|
|
child: Column(
|
|
children: [
|
|
_SummaryBadgeRow(
|
|
isIncome: _showIncome,
|
|
currencyInfo: currencyInfo,
|
|
topEntry: topEntry,
|
|
total: total,
|
|
),
|
|
const SizedBox(height: 14),
|
|
...sortedEntries.map((entry) {
|
|
final cat = entry.key;
|
|
final amount = entry.value;
|
|
return Padding(
|
|
padding: const EdgeInsets.only(bottom: 10),
|
|
child: _CategoryItem(
|
|
category: cat,
|
|
amount: amount,
|
|
total: total,
|
|
currencyInfo: currencyInfo,
|
|
isIncome: _showIncome,
|
|
),
|
|
);
|
|
}),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _InsightCard extends StatelessWidget {
|
|
final String title;
|
|
final String subtitle;
|
|
final Widget child;
|
|
|
|
const _InsightCard({
|
|
required this.title,
|
|
required this.subtitle,
|
|
required this.child,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final theme = Theme.of(context);
|
|
|
|
return Container(
|
|
padding: const EdgeInsets.all(18),
|
|
decoration: BoxDecoration(
|
|
color: theme.colorScheme.surface,
|
|
borderRadius: BorderRadius.circular(24),
|
|
border: Border.all(
|
|
color: theme.colorScheme.onSurface.withOpacity(0.06),
|
|
),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
title,
|
|
style: theme.textTheme.titleMedium?.copyWith(
|
|
fontWeight: FontWeight.w700,
|
|
),
|
|
),
|
|
const SizedBox(height: 4),
|
|
Text(
|
|
subtitle,
|
|
style: theme.textTheme.bodySmall?.copyWith(
|
|
color: theme.colorScheme.onSurface.withOpacity(0.55),
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
child,
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _PieChartSection extends ConsumerWidget {
|
|
final Map<String, double> data;
|
|
final double total;
|
|
final int touchedIndex;
|
|
final ValueChanged<int> onTouch;
|
|
final CurrencyInfo currencyInfo;
|
|
final bool isIncome;
|
|
|
|
const _PieChartSection({
|
|
required this.data,
|
|
required this.total,
|
|
required this.touchedIndex,
|
|
required this.onTouch,
|
|
required this.currencyInfo,
|
|
required this.isIncome,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final s = ref.watch(stringsProvider);
|
|
final isRu = s.locale == AppLocale.ru;
|
|
final catalog = ref.watch(categoryCatalogProvider);
|
|
final fmt = ref.watch(amountFormatProvider);
|
|
final entries = data.entries.toList();
|
|
final accent = isIncome ? AppColors.income : AppColors.expense;
|
|
if (entries.isEmpty) {
|
|
return const SizedBox.shrink();
|
|
}
|
|
final selectedIndex = touchedIndex >= 0 ? touchedIndex : 0;
|
|
final selectedEntry = entries[selectedIndex.clamp(0, entries.length - 1)];
|
|
final selectedAmount = selectedEntry.value;
|
|
|
|
return Column(
|
|
children: [
|
|
SizedBox(
|
|
height: 260,
|
|
child: Stack(
|
|
alignment: Alignment.center,
|
|
children: [
|
|
PieChart(
|
|
PieChartData(
|
|
pieTouchData: PieTouchData(
|
|
touchCallback: (event, response) {
|
|
if (!event.isInterestedForInteractions ||
|
|
response == null ||
|
|
response.touchedSection == null) {
|
|
onTouch(-1);
|
|
return;
|
|
}
|
|
onTouch(response.touchedSection!.touchedSectionIndex);
|
|
},
|
|
),
|
|
sectionsSpace: 4,
|
|
centerSpaceRadius: 78,
|
|
sections: List.generate(entries.length, (i) {
|
|
final isTouched = i == touchedIndex;
|
|
final cat = entries[i].key;
|
|
final val = entries[i].value;
|
|
final color = catalog.colorFor(cat, accent);
|
|
return PieChartSectionData(
|
|
color: color,
|
|
value: val,
|
|
title: isTouched
|
|
? total > 0
|
|
? '${(val / total * 100).toStringAsFixed(0)}%'
|
|
: '0%'
|
|
: '',
|
|
radius: isTouched ? 60 : 52,
|
|
titleStyle: const TextStyle(
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.w700,
|
|
color: Colors.white,
|
|
),
|
|
);
|
|
}),
|
|
),
|
|
),
|
|
Container(
|
|
width: 136,
|
|
height: 136,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: Theme.of(context).scaffoldBackgroundColor,
|
|
),
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Text(
|
|
s.total,
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.5),
|
|
fontSize: 11,
|
|
),
|
|
),
|
|
const SizedBox(height: 6),
|
|
_FormattedAmount(
|
|
amount: total,
|
|
currencyInfo: currencyInfo,
|
|
color: accent,
|
|
fontSize: 20,
|
|
fontWeight: FontWeight.w700,
|
|
format: fmt,
|
|
center: true,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.all(14),
|
|
decoration: BoxDecoration(
|
|
color: catalog.colorFor(selectedEntry.key, accent).withOpacity(0.10),
|
|
borderRadius: BorderRadius.circular(18),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
width: 12,
|
|
height: 12,
|
|
decoration: BoxDecoration(
|
|
color: catalog.colorFor(selectedEntry.key, accent),
|
|
shape: BoxShape.circle,
|
|
),
|
|
),
|
|
const SizedBox(width: 10),
|
|
Expanded(
|
|
child: Text(
|
|
catalog.labelFor(selectedEntry.key, isRu),
|
|
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
|
fontWeight: FontWeight.w700,
|
|
),
|
|
),
|
|
),
|
|
Text(
|
|
total > 0
|
|
? '${(selectedAmount / total * 100).toStringAsFixed(1)}%'
|
|
: '0%',
|
|
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
|
fontWeight: FontWeight.w700,
|
|
color: accent,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class _MonthlyTrendSection extends StatelessWidget {
|
|
final List<MonthlyData> data;
|
|
final Color color;
|
|
|
|
const _MonthlyTrendSection({required this.data, required this.color});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final locale = Localizations.localeOf(context).languageCode == 'ru'
|
|
? 'ru_RU'
|
|
: 'en_US';
|
|
final maxY = data.isEmpty
|
|
? 1.0
|
|
: data.map((item) => item.amount).reduce((a, b) => a > b ? a : b);
|
|
|
|
return SizedBox(
|
|
height: 220,
|
|
child: BarChart(
|
|
BarChartData(
|
|
alignment: BarChartAlignment.spaceAround,
|
|
maxY: maxY == 0 ? 1 : maxY * 1.25,
|
|
gridData: FlGridData(
|
|
show: true,
|
|
drawVerticalLine: false,
|
|
horizontalInterval: maxY == 0 ? 1 : (maxY * 1.25) / 4,
|
|
getDrawingHorizontalLine: (value) {
|
|
return FlLine(
|
|
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.06),
|
|
strokeWidth: 1,
|
|
);
|
|
},
|
|
),
|
|
borderData: FlBorderData(show: false),
|
|
titlesData: FlTitlesData(
|
|
leftTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
|
|
topTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
|
|
rightTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
|
|
bottomTitles: AxisTitles(
|
|
sideTitles: SideTitles(
|
|
showTitles: true,
|
|
getTitlesWidget: (value, meta) {
|
|
final index = value.toInt();
|
|
if (index < 0 || index >= data.length) {
|
|
return const SizedBox.shrink();
|
|
}
|
|
return Padding(
|
|
padding: const EdgeInsets.only(top: 8),
|
|
child: Text(
|
|
DateFormat('MMM', locale).format(data[index].month),
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.55),
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
),
|
|
barGroups: List.generate(data.length, (index) {
|
|
final amount = data[index].amount;
|
|
return BarChartGroupData(
|
|
x: index,
|
|
barRods: [
|
|
BarChartRodData(
|
|
toY: amount,
|
|
width: 18,
|
|
borderRadius: BorderRadius.circular(8),
|
|
gradient: LinearGradient(
|
|
begin: Alignment.bottomCenter,
|
|
end: Alignment.topCenter,
|
|
colors: [color.withOpacity(0.65), color],
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _CategoryItem extends ConsumerWidget {
|
|
final String category;
|
|
final double amount;
|
|
final double total;
|
|
final CurrencyInfo currencyInfo;
|
|
final bool isIncome;
|
|
|
|
const _CategoryItem({
|
|
required this.category,
|
|
required this.amount,
|
|
required this.total,
|
|
required this.currencyInfo,
|
|
required this.isIncome,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final s = ref.watch(stringsProvider);
|
|
final isRu = s.locale == AppLocale.ru;
|
|
final catalog = ref.watch(categoryCatalogProvider);
|
|
final fmt = ref.watch(amountFormatProvider);
|
|
final color = catalog.colorFor(category, const Color(0xFF7C6DED));
|
|
final icon = catalog.iconFor(category);
|
|
final pct = total > 0 ? amount / total : 0.0;
|
|
|
|
return Container(
|
|
padding: const EdgeInsets.all(14),
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).scaffoldBackgroundColor.withOpacity(0.55),
|
|
borderRadius: BorderRadius.circular(18),
|
|
),
|
|
child: Column(
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(10),
|
|
decoration: BoxDecoration(
|
|
color: color.withOpacity(0.12),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Icon(icon, color: color, size: 20),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
catalog.labelFor(category, isRu),
|
|
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
|
fontWeight: FontWeight.w700,
|
|
color: Theme.of(context).colorScheme.onSurface,
|
|
),
|
|
),
|
|
const SizedBox(height: 2),
|
|
Text(
|
|
'${(pct * 100).toStringAsFixed(1)}%',
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.5),
|
|
fontSize: 12,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
_FormattedAmount(
|
|
amount: amount,
|
|
currencyInfo: currencyInfo,
|
|
color: isIncome ? AppColors.income : AppColors.expense,
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w700,
|
|
format: fmt,
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 12),
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.circular(999),
|
|
child: LinearProgressIndicator(
|
|
minHeight: 8,
|
|
value: pct,
|
|
backgroundColor: color.withOpacity(0.12),
|
|
valueColor: AlwaysStoppedAnimation<Color>(color),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _SummaryBadgeRow extends ConsumerWidget {
|
|
final bool isIncome;
|
|
final CurrencyInfo currencyInfo;
|
|
final MapEntry<String, double>? topEntry;
|
|
final double total;
|
|
|
|
const _SummaryBadgeRow({
|
|
required this.isIncome,
|
|
required this.currencyInfo,
|
|
required this.topEntry,
|
|
required this.total,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final s = ref.watch(stringsProvider);
|
|
final summary = ref.watch(statsSummaryProvider);
|
|
final fmt = ref.watch(amountFormatProvider);
|
|
final average = isIncome ? summary.averageIncome : summary.averageExpense;
|
|
final share = topEntry == null || total == 0 ? 0.0 : topEntry!.value / total;
|
|
|
|
return Row(
|
|
children: [
|
|
Expanded(
|
|
child: _MiniBadge(
|
|
title: isIncome ? s.averageIncome : s.averageExpense,
|
|
child: _FormattedAmount(
|
|
amount: average,
|
|
currencyInfo: currencyInfo,
|
|
color: isIncome ? AppColors.income : AppColors.expense,
|
|
fontSize: 13,
|
|
fontWeight: FontWeight.w700,
|
|
format: fmt,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: 10),
|
|
Expanded(
|
|
child: _MiniBadge(
|
|
title: s.shareOfTotal,
|
|
child: Text(
|
|
'${(share * 100).toStringAsFixed(1)}%',
|
|
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
|
fontWeight: FontWeight.w700,
|
|
color: const Color(0xFF7C6DED),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class _MiniBadge extends StatelessWidget {
|
|
final String title;
|
|
final Widget child;
|
|
|
|
const _MiniBadge({required this.title, required this.child});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final theme = Theme.of(context);
|
|
|
|
return Container(
|
|
padding: const EdgeInsets.all(12),
|
|
decoration: BoxDecoration(
|
|
color: theme.scaffoldBackgroundColor.withOpacity(0.55),
|
|
borderRadius: BorderRadius.circular(16),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
title,
|
|
style: theme.textTheme.bodySmall?.copyWith(
|
|
color: theme.colorScheme.onSurface.withOpacity(0.55),
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
const SizedBox(height: 6),
|
|
child,
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _FormattedAmount extends StatelessWidget {
|
|
final double amount;
|
|
final CurrencyInfo currencyInfo;
|
|
final Color color;
|
|
final double fontSize;
|
|
final FontWeight fontWeight;
|
|
final AmountFormat format;
|
|
final bool center;
|
|
|
|
const _FormattedAmount({
|
|
required this.amount,
|
|
required this.currencyInfo,
|
|
required this.color,
|
|
required this.fontSize,
|
|
required this.fontWeight,
|
|
required this.format,
|
|
this.center = false,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final text = Text(
|
|
formatAmount(currencyInfo.code == 'BYN' ? '' : currencyInfo.symbol, amount, format),
|
|
textAlign: center ? TextAlign.center : TextAlign.start,
|
|
style: TextStyle(
|
|
fontSize: fontSize,
|
|
fontWeight: fontWeight,
|
|
color: color,
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
);
|
|
|
|
if (currencyInfo.code != 'BYN') {
|
|
return text;
|
|
}
|
|
|
|
return Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
mainAxisAlignment: center ? MainAxisAlignment.center : MainAxisAlignment.start,
|
|
children: [
|
|
BynSign(fontSize: fontSize, color: color),
|
|
const SizedBox(width: 2),
|
|
Flexible(child: text),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class _MetricTile extends ConsumerWidget {
|
|
final String label;
|
|
final double value;
|
|
final CurrencyInfo currencyInfo;
|
|
final Color color;
|
|
final IconData icon;
|
|
|
|
const _MetricTile({
|
|
required this.label,
|
|
required this.value,
|
|
required this.currencyInfo,
|
|
required this.color,
|
|
required this.icon,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final fmt = ref.watch(amountFormatProvider);
|
|
final theme = Theme.of(context);
|
|
|
|
return Container(
|
|
padding: const EdgeInsets.all(12),
|
|
decoration: BoxDecoration(
|
|
color: theme.scaffoldBackgroundColor.withOpacity(0.55),
|
|
borderRadius: BorderRadius.circular(16),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(8),
|
|
decoration: BoxDecoration(
|
|
color: color.withOpacity(0.12),
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
child: Icon(icon, color: color, size: 18),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
label,
|
|
style: theme.textTheme.bodySmall?.copyWith(
|
|
color: theme.colorScheme.onSurface.withOpacity(0.55),
|
|
fontWeight: FontWeight.w600,
|
|
fontSize: 12,
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
_FormattedAmount(
|
|
amount: value,
|
|
currencyInfo: currencyInfo,
|
|
color: color,
|
|
fontSize: 15,
|
|
fontWeight: FontWeight.w700,
|
|
format: fmt,
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _CountTile extends StatelessWidget {
|
|
final String label;
|
|
final int value;
|
|
final Color color;
|
|
final IconData icon;
|
|
|
|
const _CountTile({
|
|
required this.label,
|
|
required this.value,
|
|
required this.color,
|
|
required this.icon,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final theme = Theme.of(context);
|
|
|
|
return Container(
|
|
padding: const EdgeInsets.all(12),
|
|
decoration: BoxDecoration(
|
|
color: theme.scaffoldBackgroundColor.withOpacity(0.55),
|
|
borderRadius: BorderRadius.circular(16),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(8),
|
|
decoration: BoxDecoration(
|
|
color: color.withOpacity(0.12),
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
child: Icon(icon, color: color, size: 18),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
label,
|
|
style: theme.textTheme.bodySmall?.copyWith(
|
|
color: theme.colorScheme.onSurface.withOpacity(0.55),
|
|
fontWeight: FontWeight.w600,
|
|
fontSize: 12,
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
Text(
|
|
value.toString(),
|
|
style: theme.textTheme.titleMedium?.copyWith(
|
|
fontWeight: FontWeight.w700,
|
|
color: color,
|
|
fontSize: 15,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _EmptyState extends ConsumerWidget {
|
|
final bool isIncome;
|
|
const _EmptyState({required this.isIncome});
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final s = ref.watch(stringsProvider);
|
|
|
|
return Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 28),
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).colorScheme.surface,
|
|
borderRadius: BorderRadius.circular(24),
|
|
border: Border.all(
|
|
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.06),
|
|
),
|
|
),
|
|
child: Column(
|
|
children: [
|
|
Container(
|
|
width: 72,
|
|
height: 72,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: (_isIncomeColor(isIncome) ? AppColors.income : AppColors.expense)
|
|
.withOpacity(0.12),
|
|
),
|
|
child: Icon(
|
|
Icons.analytics_rounded,
|
|
size: 34,
|
|
color: _isIncomeColor(isIncome) ? AppColors.income : AppColors.expense,
|
|
),
|
|
),
|
|
const SizedBox(height: 18),
|
|
Text(
|
|
s.noStatisticsYet,
|
|
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
|
fontWeight: FontWeight.w700,
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
s.statisticsWillAppear,
|
|
textAlign: TextAlign.center,
|
|
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
|
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.5),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
bool _isIncomeColor(bool isIncome) {
|
|
return isIncome;
|
|
}
|
|
}
|
|
|
|
class _TimePeriodToggle extends ConsumerWidget {
|
|
final StatsTimeFilter filter;
|
|
final ValueChanged<StatsTimeFilter> onChanged;
|
|
|
|
const _TimePeriodToggle({
|
|
required this.filter,
|
|
required this.onChanged,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final s = ref.watch(stringsProvider);
|
|
final theme = Theme.of(context);
|
|
|
|
return Container(
|
|
decoration: BoxDecoration(
|
|
color: theme.colorScheme.surface,
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(
|
|
color: theme.colorScheme.onSurface.withOpacity(0.06),
|
|
),
|
|
),
|
|
padding: const EdgeInsets.all(2),
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
child: _ToggleChip(
|
|
label: s.filterMonth,
|
|
isSelected: filter == StatsTimeFilter.month,
|
|
color: const Color(0xFF7C6DED),
|
|
onTap: () => onChanged(StatsTimeFilter.month),
|
|
),
|
|
),
|
|
Expanded(
|
|
child: _ToggleChip(
|
|
label: s.filterAllTime,
|
|
isSelected: filter == StatsTimeFilter.allTime,
|
|
color: const Color(0xFF7C6DED),
|
|
onTap: () => onChanged(StatsTimeFilter.allTime),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _OverviewCard extends ConsumerWidget {
|
|
final bool isIncome;
|
|
final double amount;
|
|
final int transactionCount;
|
|
final CurrencyInfo currencyInfo;
|
|
|
|
const _OverviewCard({
|
|
required this.isIncome,
|
|
required this.amount,
|
|
required this.transactionCount,
|
|
required this.currencyInfo,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final s = ref.watch(stringsProvider);
|
|
final fmt = ref.watch(amountFormatProvider);
|
|
final theme = Theme.of(context);
|
|
final color = isIncome ? AppColors.income : AppColors.expense;
|
|
|
|
return Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.symmetric(vertical: 28, horizontal: 20),
|
|
decoration: BoxDecoration(
|
|
color: theme.colorScheme.surface,
|
|
borderRadius: BorderRadius.circular(24),
|
|
border: Border.all(
|
|
color: theme.colorScheme.onSurface.withOpacity(0.06),
|
|
),
|
|
),
|
|
child: Column(
|
|
children: [
|
|
Text(
|
|
isIncome ? s.income : s.expenses,
|
|
style: theme.textTheme.bodySmall?.copyWith(
|
|
color: theme.colorScheme.onSurface.withOpacity(0.5),
|
|
fontWeight: FontWeight.w600,
|
|
fontSize: 13,
|
|
letterSpacing: 0.5,
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
FittedBox(
|
|
fit: BoxFit.scaleDown,
|
|
child: _FormattedAmount(
|
|
amount: amount,
|
|
currencyInfo: currencyInfo,
|
|
color: color,
|
|
fontSize: 40,
|
|
fontWeight: FontWeight.w800,
|
|
format: fmt,
|
|
center: true,
|
|
),
|
|
),
|
|
const SizedBox(height: 14),
|
|
Text(
|
|
'$transactionCount ${s.transactionsCount.toLowerCase()}',
|
|
style: theme.textTheme.bodySmall?.copyWith(
|
|
color: theme.colorScheme.onSurface.withOpacity(0.4),
|
|
fontSize: 13,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _IncomeExpenseToggle extends ConsumerWidget {
|
|
final bool isIncome;
|
|
final ValueChanged<bool> onChanged;
|
|
|
|
const _IncomeExpenseToggle({
|
|
required this.isIncome,
|
|
required this.onChanged,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final s = ref.watch(stringsProvider);
|
|
final theme = Theme.of(context);
|
|
|
|
return Container(
|
|
decoration: BoxDecoration(
|
|
color: theme.colorScheme.surface,
|
|
borderRadius: BorderRadius.circular(12),
|
|
border: Border.all(
|
|
color: theme.colorScheme.onSurface.withOpacity(0.06),
|
|
),
|
|
),
|
|
padding: const EdgeInsets.all(2),
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
child: _ToggleChip(
|
|
label: s.expenses,
|
|
isSelected: !isIncome,
|
|
color: AppColors.expense,
|
|
onTap: () => onChanged(false),
|
|
),
|
|
),
|
|
Expanded(
|
|
child: _ToggleChip(
|
|
label: s.income,
|
|
isSelected: isIncome,
|
|
color: AppColors.income,
|
|
onTap: () => onChanged(true),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _ToggleChip extends StatelessWidget {
|
|
final String label;
|
|
final bool isSelected;
|
|
final Color color;
|
|
final VoidCallback onTap;
|
|
|
|
const _ToggleChip({
|
|
required this.label,
|
|
required this.isSelected,
|
|
required this.color,
|
|
required this.onTap,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return GestureDetector(
|
|
onTap: onTap,
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 200),
|
|
padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 4),
|
|
decoration: BoxDecoration(
|
|
color: isSelected ? color.withOpacity(0.15) : Colors.transparent,
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: Text(
|
|
label,
|
|
textAlign: TextAlign.center,
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(
|
|
fontSize: 13,
|
|
fontWeight: isSelected ? FontWeight.w700 : FontWeight.w500,
|
|
color: isSelected
|
|
? color
|
|
: Theme.of(context).colorScheme.onSurface.withOpacity(0.5),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|