mirror of
https://github.com/koloideal/Casha.git
synced 2026-06-10 10:25:28 +03:00
1326 lines
46 KiB
Dart
1326 lines
46 KiB
Dart
import 'dart:async';
|
|
import 'dart:ui';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter/scheduler.dart';
|
|
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
import 'package:go_router/go_router.dart';
|
|
import 'package:intl/intl.dart';
|
|
import 'package:sensors_plus/sensors_plus.dart';
|
|
import '../../core/constants.dart';
|
|
import '../../core/services/card_color_service.dart';
|
|
import '../../shared/models/transaction.dart';
|
|
import '../../shared/utils/currency_utils.dart';
|
|
import '../../shared/providers/amount_format_provider.dart';
|
|
import '../settings/provider.dart';
|
|
import 'provider.dart';
|
|
|
|
String _smartBalance(double amount, AmountFormat fmt, String symbol) {
|
|
const spaceAfter = {'Br'};
|
|
final sep = spaceAfter.contains(symbol) ? ' ' : '';
|
|
final isWhole = amount == amount.floorToDouble();
|
|
|
|
String formatted;
|
|
if (isWhole) {
|
|
formatted = fmt.format(amount);
|
|
if (formatted.endsWith('.00')) {
|
|
formatted = formatted.substring(0, formatted.length - 3);
|
|
}
|
|
} else {
|
|
formatted = fmt.format(amount);
|
|
}
|
|
return '$symbol$sep$formatted';
|
|
}
|
|
|
|
class DashboardScreen extends ConsumerStatefulWidget {
|
|
const DashboardScreen({super.key});
|
|
|
|
@override
|
|
ConsumerState<DashboardScreen> createState() => _DashboardScreenState();
|
|
}
|
|
|
|
class _DashboardScreenState extends ConsumerState<DashboardScreen> {
|
|
final _searchController = TextEditingController();
|
|
final _scrollController = ScrollController();
|
|
final _searchFocusNode = FocusNode();
|
|
bool _editingCard = false;
|
|
bool _editingPrimary = true;
|
|
Color _tempPrimary = CardColorService.defaultPrimary;
|
|
Color _tempSecondary = CardColorService.defaultSecondary;
|
|
HSVColor _tempPrimaryHSV = HSVColor.fromColor(CardColorService.defaultPrimary);
|
|
HSVColor _tempSecondaryHSV = HSVColor.fromColor(CardColorService.defaultSecondary);
|
|
Color _savedPrimary = CardColorService.defaultPrimary;
|
|
Color _savedSecondary = CardColorService.defaultSecondary;
|
|
HSVColor _savedPrimaryHSV = HSVColor.fromColor(CardColorService.defaultPrimary);
|
|
HSVColor _savedSecondaryHSV = HSVColor.fromColor(CardColorService.defaultSecondary);
|
|
double _cardBottomY = 300;
|
|
|
|
HSVColor get _currentHSV => _editingPrimary ? _tempPrimaryHSV : _tempSecondaryHSV;
|
|
|
|
void _onHSVChanged(HSVColor hsv) {
|
|
setState(() {
|
|
if (_editingPrimary) {
|
|
_tempPrimaryHSV = hsv;
|
|
_tempPrimary = hsv.toColor();
|
|
} else {
|
|
_tempSecondaryHSV = hsv;
|
|
_tempSecondary = hsv.toColor();
|
|
}
|
|
});
|
|
}
|
|
|
|
Border? _themeBorder(BuildContext context) {
|
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
|
return isDark ? null : Border.all(color: const Color(0xFFDDDDEE), width: 1);
|
|
}
|
|
|
|
void _onCardLongPress() {
|
|
final colors = ref.read(cardColorsProvider);
|
|
// save originals for cancel
|
|
_savedPrimary = colors.primary;
|
|
_savedSecondary = colors.secondary;
|
|
_savedPrimaryHSV = HSVColor.fromColor(colors.primary);
|
|
_savedSecondaryHSV = HSVColor.fromColor(colors.secondary);
|
|
// init temp
|
|
_tempPrimary = colors.primary;
|
|
_tempSecondary = colors.secondary;
|
|
_tempPrimaryHSV = HSVColor.fromColor(colors.primary);
|
|
_tempSecondaryHSV = HSVColor.fromColor(colors.secondary);
|
|
|
|
// Calculate actual card bottom: status bar + appbar + top padding + card height
|
|
final statusBar = MediaQuery.of(context).padding.top;
|
|
final appBarHeight = kToolbarHeight;
|
|
final topPadding = 16.0;
|
|
final cardHeight = 180.0;
|
|
_cardBottomY = statusBar + appBarHeight + topPadding + cardHeight;
|
|
|
|
setState(() => _editingCard = true);
|
|
}
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
Future.microtask(() async {
|
|
final colors = ref.read(cardColorsProvider);
|
|
_tempPrimary = colors.primary;
|
|
_tempSecondary = colors.secondary;
|
|
});
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_searchController.dispose();
|
|
_scrollController.dispose();
|
|
_searchFocusNode.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
void _scrollToSearch() {
|
|
if (!_scrollController.hasClients) return;
|
|
_scrollController.animateTo(
|
|
400.0,
|
|
duration: const Duration(milliseconds: 500),
|
|
curve: Curves.fastOutSlowIn,
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final balance = ref.watch(totalBalanceProvider);
|
|
final income = ref.watch(totalIncomeProvider);
|
|
final expense = ref.watch(totalExpenseProvider);
|
|
final monthExpense = ref.watch(currentMonthExpenseProvider);
|
|
final budget = ref.watch(budgetProvider);
|
|
final recent = ref.watch(recentTransactionsProvider);
|
|
final currencyInfo = ref.watch(currencyProvider);
|
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
|
|
|
return Stack(
|
|
children: [
|
|
// NORMAL SCAFFOLD — always rendered, card is real and animated
|
|
Scaffold(
|
|
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
|
|
appBar: AppBar(
|
|
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
|
|
elevation: 0,
|
|
scrolledUnderElevation: 0,
|
|
titleSpacing: 20,
|
|
title: Text(
|
|
'Casha',
|
|
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
|
|
fontWeight: FontWeight.w800,
|
|
color: Theme.of(context).colorScheme.onSurface,
|
|
letterSpacing: -0.5,
|
|
),
|
|
),
|
|
actions: [
|
|
Padding(
|
|
padding: const EdgeInsets.only(right: 20),
|
|
child: Center(
|
|
child: Text(
|
|
DateFormat('MMMM yyyy').format(DateTime.now()),
|
|
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
|
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.5),
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
floatingActionButton: FloatingActionButton.extended(
|
|
onPressed: () => context.push('/add'),
|
|
backgroundColor: const Color(0xFF7C6DED),
|
|
foregroundColor: Colors.white,
|
|
icon: const Icon(Icons.add),
|
|
label: const Text('Add', style: TextStyle(fontWeight: FontWeight.w600)),
|
|
),
|
|
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
|
|
body: SafeArea(
|
|
child: CustomScrollView(
|
|
controller: _scrollController,
|
|
cacheExtent: 300,
|
|
slivers: [
|
|
SliverToBoxAdapter(
|
|
child: Padding(
|
|
padding: const EdgeInsets.fromLTRB(20, 16, 20, 0),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
_BalanceCard(
|
|
balance: balance,
|
|
currencyInfo: currencyInfo,
|
|
onLongPress: _onCardLongPress,
|
|
previewPrimary: _editingCard ? _tempPrimary : null,
|
|
previewSecondary: _editingCard ? _tempSecondary : null,
|
|
),
|
|
const SizedBox(height: 16),
|
|
_SummaryRow(
|
|
income: income,
|
|
expense: expense,
|
|
currencyInfo: currencyInfo,
|
|
),
|
|
if (budget != null) ...[
|
|
const SizedBox(height: 16),
|
|
_BudgetProgress(
|
|
spent: monthExpense,
|
|
budget: budget,
|
|
currencyInfo: currencyInfo,
|
|
),
|
|
],
|
|
const SizedBox(height: 24),
|
|
_SearchBar(
|
|
controller: _searchController,
|
|
focusNode: _searchFocusNode,
|
|
onTap: _scrollToSearch,
|
|
ref: ref,
|
|
),
|
|
const SizedBox(height: 12),
|
|
const FilterChips(),
|
|
const SizedBox(height: 20),
|
|
Text(
|
|
'Transactions',
|
|
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
|
fontWeight: FontWeight.w600,
|
|
color: Theme.of(context).colorScheme.onSurface,
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
if (recent.isEmpty)
|
|
const SliverFillRemaining(
|
|
hasScrollBody: false,
|
|
child: _EmptyState(),
|
|
)
|
|
else
|
|
SliverPadding(
|
|
padding: const EdgeInsets.fromLTRB(20, 0, 20, 100),
|
|
sliver: SliverList.builder(
|
|
itemCount: recent.length,
|
|
itemBuilder: (context, i) => Padding(
|
|
padding: const EdgeInsets.only(bottom: 10),
|
|
child: RepaintBoundary(
|
|
child: _TransactionTile(transaction: recent[i]),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
const SliverPadding(padding: EdgeInsets.only(bottom: 80)),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
// EDIT OVERLAY — only when editing
|
|
if (_editingCard) _buildEditOverlay(context),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildEditOverlay(BuildContext context) {
|
|
return Stack(
|
|
children: [
|
|
// Calculate card position to EXCLUDE it from blur
|
|
// Blur only the area BELOW the card
|
|
Positioned.fill(
|
|
child: Column(
|
|
children: [
|
|
// Top portion — card area — NOT blurred, transparent
|
|
SizedBox(height: _cardBottomY),
|
|
// Bottom portion — blurred
|
|
Expanded(
|
|
child: GestureDetector(
|
|
onTap: () => setState(() => _editingCard = false),
|
|
child: ClipRect(
|
|
child: BackdropFilter(
|
|
filter: ImageFilter.blur(sigmaX: 18, sigmaY: 18),
|
|
child: Container(
|
|
color: Colors.black.withOpacity(0.55),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
// Color editor panel — positioned below the card
|
|
Positioned(
|
|
left: 20,
|
|
right: 20,
|
|
top: _cardBottomY + 16,
|
|
bottom: MediaQuery.of(context).padding.bottom + 16,
|
|
child: GestureDetector(
|
|
onTap: () {}, // prevent dismiss
|
|
child: _buildColorPanel(context),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildColorPanel(BuildContext context) {
|
|
final maxHeight = MediaQuery.of(context).size.height - _cardBottomY - 32 - MediaQuery.of(context).padding.bottom;
|
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
|
|
|
return ConstrainedBox(
|
|
constraints: BoxConstraints(
|
|
maxHeight: maxHeight,
|
|
),
|
|
child: SingleChildScrollView(
|
|
physics: const ClampingScrollPhysics(),
|
|
child: Container(
|
|
padding: const EdgeInsets.fromLTRB(20, 16, 20, 20),
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).colorScheme.surface,
|
|
borderRadius: BorderRadius.circular(20),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.3),
|
|
blurRadius: 24,
|
|
offset: const Offset(0, 8),
|
|
),
|
|
],
|
|
),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// TOP ROW: tabs + close button
|
|
Row(
|
|
children: [
|
|
_PanelTab(
|
|
label: 'Primary',
|
|
isSelected: _editingPrimary,
|
|
color: _tempPrimary,
|
|
onTap: () => setState(() => _editingPrimary = true),
|
|
),
|
|
const SizedBox(width: 10),
|
|
_PanelTab(
|
|
label: 'Secondary',
|
|
isSelected: !_editingPrimary,
|
|
color: _tempSecondary,
|
|
onTap: () => setState(() => _editingPrimary = false),
|
|
),
|
|
const Spacer(),
|
|
// CLOSE BUTTON
|
|
GestureDetector(
|
|
onTap: () {
|
|
setState(() {
|
|
_tempPrimary = _savedPrimary;
|
|
_tempSecondary = _savedSecondary;
|
|
_editingCard = false;
|
|
});
|
|
},
|
|
child: Container(
|
|
width: 32,
|
|
height: 32,
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.08),
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Icon(
|
|
Icons.close_rounded,
|
|
size: 18,
|
|
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 16),
|
|
// 2D spectrum area — drag to pick saturation + value
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.circular(12),
|
|
child: SizedBox(
|
|
height: 180,
|
|
width: double.infinity,
|
|
child: ColorPickerArea(
|
|
_currentHSV,
|
|
_onHSVChanged,
|
|
PaletteType.hsvWithHue,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
// Hue rainbow slider — drag to change hue
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.circular(6),
|
|
child: SizedBox(
|
|
height: 24,
|
|
child: ColorPickerSlider(
|
|
TrackType.hue,
|
|
_currentHSV,
|
|
_onHSVChanged,
|
|
displayThumbColor: true,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
// Color preview row
|
|
Row(
|
|
children: [
|
|
// PRIMARY — left aligned
|
|
GestureDetector(
|
|
onTap: () => setState(() => _editingPrimary = true),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Container(
|
|
width: 28,
|
|
height: 28,
|
|
decoration: BoxDecoration(
|
|
color: _tempPrimary,
|
|
borderRadius: BorderRadius.circular(8),
|
|
border: _editingPrimary
|
|
? Border.all(color: Colors.white, width: 2)
|
|
: Border.all(color: Colors.transparent, width: 2),
|
|
boxShadow: _editingPrimary
|
|
? [
|
|
BoxShadow(
|
|
color: _tempPrimary.withOpacity(0.5),
|
|
blurRadius: 8,
|
|
),
|
|
]
|
|
: null,
|
|
),
|
|
),
|
|
const SizedBox(width: 8),
|
|
Text(
|
|
'#${_tempPrimary.value.toRadixString(16).substring(2).toUpperCase()}',
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: _editingPrimary
|
|
? Theme.of(context).colorScheme.onSurface.withOpacity(0.8)
|
|
: Theme.of(context).colorScheme.onSurface.withOpacity(0.4),
|
|
fontWeight: _editingPrimary ? FontWeight.w600 : FontWeight.normal,
|
|
fontFamily: 'monospace',
|
|
fontSize: 12,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const Spacer(),
|
|
// SECONDARY — right aligned
|
|
GestureDetector(
|
|
onTap: () => setState(() => _editingPrimary = false),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(
|
|
'#${_tempSecondary.value.toRadixString(16).substring(2).toUpperCase()}',
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: !_editingPrimary
|
|
? Theme.of(context).colorScheme.onSurface.withOpacity(0.8)
|
|
: Theme.of(context).colorScheme.onSurface.withOpacity(0.4),
|
|
fontWeight: !_editingPrimary ? FontWeight.w600 : FontWeight.normal,
|
|
fontFamily: 'monospace',
|
|
fontSize: 12,
|
|
),
|
|
),
|
|
const SizedBox(width: 8),
|
|
Container(
|
|
width: 28,
|
|
height: 28,
|
|
decoration: BoxDecoration(
|
|
color: _tempSecondary,
|
|
borderRadius: BorderRadius.circular(8),
|
|
border: !_editingPrimary
|
|
? Border.all(color: Colors.white, width: 2)
|
|
: Border.all(color: Colors.transparent, width: 2),
|
|
boxShadow: !_editingPrimary
|
|
? [
|
|
BoxShadow(
|
|
color: _tempSecondary.withOpacity(0.5),
|
|
blurRadius: 8,
|
|
),
|
|
]
|
|
: null,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 16),
|
|
// APPLY BUTTON
|
|
SizedBox(
|
|
width: double.infinity,
|
|
child: ElevatedButton(
|
|
onPressed: () {
|
|
ref.read(cardColorsProvider.notifier).save(_tempPrimary, _tempSecondary);
|
|
setState(() => _editingCard = false);
|
|
},
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: const Color(0xFF7C6DED),
|
|
foregroundColor: Colors.white,
|
|
padding: const EdgeInsets.symmetric(vertical: 14),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(14),
|
|
),
|
|
),
|
|
child: const Text(
|
|
'Apply',
|
|
style: TextStyle(fontWeight: FontWeight.w700, fontSize: 15),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _PanelTab extends StatelessWidget {
|
|
final String label;
|
|
final bool isSelected;
|
|
final Color color;
|
|
final VoidCallback onTap;
|
|
|
|
const _PanelTab({
|
|
required this.label,
|
|
required this.isSelected,
|
|
required this.color,
|
|
required this.onTap,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
|
final unselectedBorder = isDark ? Colors.white24 : const Color(0xFFCCCCDD);
|
|
final unselectedText = isDark
|
|
? Colors.white60
|
|
: Theme.of(context).colorScheme.onSurface.withOpacity(0.5);
|
|
|
|
return GestureDetector(
|
|
onTap: onTap,
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 150),
|
|
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 8),
|
|
decoration: BoxDecoration(
|
|
color: isSelected ? color.withOpacity(0.15) : Colors.transparent,
|
|
borderRadius: BorderRadius.circular(10),
|
|
border: Border.all(
|
|
color: isSelected ? color : unselectedBorder,
|
|
width: 1.5,
|
|
),
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Container(
|
|
width: 14,
|
|
height: 14,
|
|
decoration: BoxDecoration(
|
|
color: color,
|
|
shape: BoxShape.circle,
|
|
border: Border.all(
|
|
color: isDark ? Colors.white30 : Colors.black12,
|
|
width: 1,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: 8),
|
|
Text(
|
|
label,
|
|
style: TextStyle(
|
|
fontSize: 13,
|
|
fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
|
|
color: isSelected ? color : unselectedText,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _SearchBar extends StatelessWidget {
|
|
final TextEditingController controller;
|
|
final FocusNode focusNode;
|
|
final VoidCallback onTap;
|
|
final WidgetRef ref;
|
|
const _SearchBar({
|
|
required this.controller,
|
|
required this.focusNode,
|
|
required this.onTap,
|
|
required this.ref,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
|
return TextField(
|
|
controller: controller,
|
|
focusNode: focusNode,
|
|
onTap: onTap,
|
|
decoration: InputDecoration(
|
|
hintText: 'Search transactions...',
|
|
prefixIcon: Icon(
|
|
Icons.search_rounded,
|
|
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
|
|
),
|
|
suffixIcon: controller.text.isNotEmpty
|
|
? IconButton(
|
|
icon: const Icon(Icons.clear_rounded, size: 20),
|
|
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
|
|
onPressed: () {
|
|
controller.clear();
|
|
ref.read(searchQueryProvider.notifier).state = '';
|
|
},
|
|
)
|
|
: null,
|
|
filled: true,
|
|
fillColor: Theme.of(context).inputDecorationTheme.fillColor,
|
|
enabledBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
borderSide: BorderSide(
|
|
color: isDark ? Colors.transparent : const Color(0xFFCCCCDD),
|
|
width: 1,
|
|
),
|
|
),
|
|
focusedBorder: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
borderSide: const BorderSide(color: Color(0xFF7C6DED), width: 1.5),
|
|
),
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
borderSide: BorderSide.none,
|
|
),
|
|
contentPadding: const EdgeInsets.symmetric(
|
|
horizontal: 16,
|
|
vertical: 12,
|
|
),
|
|
),
|
|
onChanged: (v) => ref.read(searchQueryProvider.notifier).state = v,
|
|
);
|
|
}
|
|
}
|
|
|
|
class FilterChips extends ConsumerWidget {
|
|
const FilterChips({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final typeFilter = ref.watch(transactionFilterProvider);
|
|
final timeFilter = ref.watch(timeFilterProvider);
|
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
|
|
|
return Row(
|
|
children: [
|
|
// TIME GROUP
|
|
_FilterChip(
|
|
label: 'All Time',
|
|
isSelected: timeFilter == TimeFilter.allTime,
|
|
onTap: () => ref.read(timeFilterProvider.notifier).state = TimeFilter.allTime,
|
|
),
|
|
const SizedBox(width: 6),
|
|
_FilterChip(
|
|
label: 'Month',
|
|
isSelected: timeFilter == TimeFilter.lastMonth,
|
|
onTap: () => ref.read(timeFilterProvider.notifier).state = TimeFilter.lastMonth,
|
|
),
|
|
|
|
// VISUAL DIVIDER
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8),
|
|
child: Container(
|
|
width: 1,
|
|
height: 20,
|
|
color: Theme.of(context).colorScheme.onSurface.withOpacity(
|
|
isDark ? 0.15 : 0.2,
|
|
),
|
|
),
|
|
),
|
|
|
|
// TYPE GROUP
|
|
_FilterChip(
|
|
label: 'All',
|
|
isSelected: typeFilter == TransactionFilter.all,
|
|
onTap: () => ref.read(transactionFilterProvider.notifier).state = TransactionFilter.all,
|
|
),
|
|
const SizedBox(width: 6),
|
|
_FilterChip(
|
|
label: 'Income',
|
|
isSelected: typeFilter == TransactionFilter.income,
|
|
color: AppColors.income,
|
|
onTap: () => ref.read(transactionFilterProvider.notifier).state = TransactionFilter.income,
|
|
),
|
|
const SizedBox(width: 6),
|
|
_FilterChip(
|
|
label: 'Expense',
|
|
isSelected: typeFilter == TransactionFilter.expense,
|
|
color: AppColors.expense,
|
|
onTap: () => ref.read(transactionFilterProvider.notifier).state = TransactionFilter.expense,
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class _FilterChip extends StatelessWidget {
|
|
final String label;
|
|
final bool isSelected;
|
|
final Color? color;
|
|
final VoidCallback onTap;
|
|
|
|
const _FilterChip({
|
|
required this.label,
|
|
required this.isSelected,
|
|
required this.onTap,
|
|
this.color,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final chipColor = color ?? AppColors.accent;
|
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
|
|
|
return GestureDetector(
|
|
onTap: onTap,
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 200),
|
|
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 6),
|
|
decoration: BoxDecoration(
|
|
color: isSelected
|
|
? chipColor.withOpacity(0.2)
|
|
: Theme.of(context).colorScheme.surface,
|
|
borderRadius: BorderRadius.circular(20),
|
|
border: isSelected
|
|
? Border.all(color: chipColor, width: 1.5)
|
|
: isDark
|
|
? null
|
|
: Border.all(color: const Color(0xFFDDDDEE), width: 1),
|
|
),
|
|
child: Text(
|
|
label,
|
|
style: const TextStyle(fontSize: 12).merge(
|
|
Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: isSelected
|
|
? chipColor
|
|
: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
|
|
fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _BudgetProgress extends ConsumerWidget {
|
|
final double spent;
|
|
final double budget;
|
|
final CurrencyInfo currencyInfo;
|
|
const _BudgetProgress({
|
|
required this.spent,
|
|
required this.budget,
|
|
required this.currencyInfo,
|
|
});
|
|
|
|
Border? _themeBorder(BuildContext context) {
|
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
|
return isDark ? null : Border.all(color: const Color(0xFFDDDDEE), width: 1);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final fmt = ref.watch(amountFormatProvider);
|
|
final progress = budget > 0 ? spent / budget : 0.0;
|
|
final isOver = progress > 1.0;
|
|
final displayPercent = (progress * 100).toStringAsFixed(0);
|
|
|
|
return ClipRRect(
|
|
borderRadius: BorderRadius.circular(16),
|
|
child: Container(
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).colorScheme.surface,
|
|
border: Border(
|
|
left: BorderSide(
|
|
color: isOver ? const Color(0xFFE05C6B) : const Color(0xFF7C6DED),
|
|
width: 3,
|
|
),
|
|
top: _themeBorder(context)?.top ?? BorderSide.none,
|
|
right: _themeBorder(context)?.right ?? BorderSide.none,
|
|
bottom: _themeBorder(context)?.bottom ?? BorderSide.none,
|
|
),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(
|
|
'Monthly Budget',
|
|
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
|
color: Theme.of(
|
|
context,
|
|
).colorScheme.onSurface.withOpacity(0.6),
|
|
),
|
|
),
|
|
Text(
|
|
'$displayPercent%',
|
|
style: TextStyle(
|
|
color: isOver
|
|
? const Color(0xFFE05C6B)
|
|
: Theme.of(
|
|
context,
|
|
).colorScheme.onSurface.withOpacity(0.7),
|
|
fontWeight: isOver ? FontWeight.w700 : FontWeight.normal,
|
|
fontSize: 12,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 8),
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.circular(8),
|
|
child: LinearProgressIndicator(
|
|
value: isOver ? 1.0 : progress,
|
|
backgroundColor: Theme.of(
|
|
context,
|
|
).colorScheme.onSurface.withOpacity(0.1),
|
|
valueColor: AlwaysStoppedAnimation<Color>(
|
|
isOver
|
|
? const Color(0xFFE05C6B)
|
|
: (progress > 0.8
|
|
? Colors.orange
|
|
: const Color(0xFF4CAF8C)),
|
|
),
|
|
minHeight: 8,
|
|
),
|
|
),
|
|
const SizedBox(height: 8),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(
|
|
'Spent: ${formatAmount(currencyInfo.symbol, spent, fmt)}',
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: Theme.of(
|
|
context,
|
|
).colorScheme.onSurface.withOpacity(0.6),
|
|
),
|
|
),
|
|
Text(
|
|
'Limit: ${formatAmount(currencyInfo.symbol, budget, fmt)}',
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: Theme.of(
|
|
context,
|
|
).colorScheme.onSurface.withOpacity(0.6),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _BalanceCard extends ConsumerStatefulWidget {
|
|
final double balance;
|
|
final CurrencyInfo currencyInfo;
|
|
final VoidCallback? onLongPress;
|
|
final Color? previewPrimary;
|
|
final Color? previewSecondary;
|
|
|
|
const _BalanceCard({
|
|
required this.balance,
|
|
required this.currencyInfo,
|
|
this.onLongPress,
|
|
this.previewPrimary,
|
|
this.previewSecondary,
|
|
});
|
|
|
|
@override
|
|
ConsumerState<_BalanceCard> createState() => _BalanceCardState();
|
|
}
|
|
|
|
class _BalanceCardState extends ConsumerState<_BalanceCard>
|
|
with SingleTickerProviderStateMixin {
|
|
late final AnimationController _controller;
|
|
double _tiltX = 0.0, _tiltY = 0.0;
|
|
double _targetTiltX = 0.0, _targetTiltY = 0.0;
|
|
StreamSubscription<AccelerometerEvent>? _sub;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_controller = AnimationController(
|
|
vsync: this,
|
|
duration: const Duration(seconds: 1),
|
|
)..repeat();
|
|
|
|
_sub =
|
|
accelerometerEventStream(
|
|
samplingPeriod: const Duration(milliseconds: 50),
|
|
).listen((e) {
|
|
_targetTiltY = (e.x / 9.8).clamp(-1.0, 1.0);
|
|
_targetTiltX = ((e.y / 9.8) - 1.0).clamp(-1.0, 1.0);
|
|
});
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_controller.dispose();
|
|
_sub?.cancel();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final rates = ref.read(exchangeRateServiceProvider);
|
|
final fmt = ref.watch(amountFormatProvider);
|
|
final savedColors = ref.watch(cardColorsProvider);
|
|
final primary = widget.previewPrimary ?? savedColors.primary;
|
|
final secondary = widget.previewSecondary ?? savedColors.secondary;
|
|
final allCurrencies = [
|
|
('USD', r'$'),
|
|
('EUR', '€'),
|
|
('BYN', 'Br'),
|
|
('RUB', '₽'),
|
|
];
|
|
final others = allCurrencies
|
|
.where((c) => c.$1 != widget.currencyInfo.code)
|
|
.toList();
|
|
|
|
return GestureDetector(
|
|
onLongPress: widget.onLongPress,
|
|
child: AnimatedBuilder(
|
|
animation: _controller,
|
|
builder: (context, _) {
|
|
_tiltX += (_targetTiltX - _tiltX) * 0.15;
|
|
_tiltY += (_targetTiltY - _tiltY) * 0.15;
|
|
|
|
return Transform(
|
|
alignment: Alignment.center,
|
|
transform: Matrix4.identity()
|
|
..setEntry(3, 2, 0.001)
|
|
..rotateX(_tiltX * 0.42)
|
|
..rotateY(_tiltY * 0.42),
|
|
child: Container(
|
|
width: double.infinity,
|
|
height: 180,
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.circular(20),
|
|
gradient: LinearGradient(
|
|
begin: const Alignment(-0.5, -0.5),
|
|
end: const Alignment(0.5, 0.5),
|
|
colors: [
|
|
primary,
|
|
secondary,
|
|
Color.lerp(secondary, Colors.black, 0.3)!,
|
|
],
|
|
stops: const [0.0, 0.5, 1.0],
|
|
),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.4),
|
|
blurRadius: 20,
|
|
offset: const Offset(0, 8),
|
|
),
|
|
],
|
|
),
|
|
child: ClipRRect(
|
|
borderRadius: BorderRadius.circular(20),
|
|
child: Stack(
|
|
children: [
|
|
// existing card content
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 24,
|
|
vertical: 20,
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
Expanded(
|
|
flex: 5,
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
Text(
|
|
'TOTAL BALANCE',
|
|
style: TextStyle(
|
|
fontSize: 11,
|
|
letterSpacing: 1.5,
|
|
color: Colors.white.withOpacity(0.6),
|
|
),
|
|
),
|
|
const SizedBox(height: 6),
|
|
FittedBox(
|
|
fit: BoxFit.scaleDown,
|
|
alignment: Alignment.center,
|
|
child: Text(
|
|
_smartBalance(
|
|
widget.balance,
|
|
fmt,
|
|
widget.currencyInfo.symbol,
|
|
),
|
|
style: const TextStyle(
|
|
fontSize: 48,
|
|
fontWeight: FontWeight.w700,
|
|
color: Colors.white,
|
|
),
|
|
maxLines: 1,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
if (widget.balance != 0) ...[
|
|
const SizedBox(width: 16),
|
|
Container(
|
|
width: 1,
|
|
height: 70,
|
|
color: Colors.white.withOpacity(0.15),
|
|
),
|
|
const SizedBox(width: 16),
|
|
SizedBox(
|
|
width: 110,
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: others.map((c) {
|
|
final converted = rates.convert(
|
|
widget.balance,
|
|
widget.currencyInfo.code,
|
|
c.$1,
|
|
);
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 3),
|
|
child: FittedBox(
|
|
fit: BoxFit.scaleDown,
|
|
alignment: Alignment.centerLeft,
|
|
child: Text(
|
|
_smartBalance(converted, fmt, c.$2),
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w500,
|
|
color: Colors.white.withOpacity(0.65),
|
|
),
|
|
maxLines: 1,
|
|
),
|
|
),
|
|
);
|
|
}).toList(),
|
|
),
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
// hint text — absolute position, bottom center, no layout impact
|
|
Positioned(
|
|
bottom: 8,
|
|
left: 0,
|
|
right: 0,
|
|
child: Text(
|
|
'tap and hold to edit',
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(
|
|
fontSize: 9,
|
|
color: Colors.white.withOpacity(0.18),
|
|
letterSpacing: 0.6,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _SummaryRow extends StatelessWidget {
|
|
final double income;
|
|
final double expense;
|
|
final CurrencyInfo currencyInfo;
|
|
const _SummaryRow({
|
|
required this.income,
|
|
required this.expense,
|
|
required this.currencyInfo,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Row(
|
|
children: [
|
|
Expanded(
|
|
child: _SummaryCard(
|
|
label: 'Income',
|
|
amount: income,
|
|
color: AppColors.income,
|
|
icon: Icons.arrow_downward_rounded,
|
|
currencyInfo: currencyInfo,
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: _SummaryCard(
|
|
label: 'Expenses',
|
|
amount: expense,
|
|
color: AppColors.expense,
|
|
icon: Icons.arrow_upward_rounded,
|
|
currencyInfo: currencyInfo,
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|
|
|
|
class _SummaryCard extends ConsumerWidget {
|
|
final String label;
|
|
final double amount;
|
|
final Color color;
|
|
final IconData icon;
|
|
final CurrencyInfo currencyInfo;
|
|
const _SummaryCard({
|
|
required this.label,
|
|
required this.amount,
|
|
required this.color,
|
|
required this.icon,
|
|
required this.currencyInfo,
|
|
});
|
|
|
|
Border? _themeBorder(BuildContext context) {
|
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
|
return isDark ? null : Border.all(color: const Color(0xFFDDDDEE), width: 1);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final fmt = ref.watch(amountFormatProvider);
|
|
return Container(
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).colorScheme.surface,
|
|
borderRadius: BorderRadius.circular(16),
|
|
border: _themeBorder(context),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(8),
|
|
decoration: BoxDecoration(
|
|
color: color.withOpacity(0.15),
|
|
borderRadius: BorderRadius.circular(10),
|
|
),
|
|
child: Icon(icon, color: color, size: 18),
|
|
),
|
|
const SizedBox(width: 10),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
label,
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: Theme.of(
|
|
context,
|
|
).colorScheme.onSurface.withOpacity(0.6),
|
|
),
|
|
),
|
|
const SizedBox(height: 2),
|
|
Text(
|
|
formatAmount(currencyInfo.symbol, amount, fmt),
|
|
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
|
color: color,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _TransactionTile extends ConsumerWidget {
|
|
final Transaction transaction;
|
|
const _TransactionTile({required this.transaction});
|
|
|
|
Border? _themeBorder(BuildContext context) {
|
|
final isDark = Theme.of(context).brightness == Brightness.dark;
|
|
return isDark ? null : Border.all(color: const Color(0xFFDDDDEE), width: 1);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final fmt = ref.watch(amountFormatProvider);
|
|
final isIncome = transaction.type == TransactionType.income;
|
|
final color = isIncome ? AppColors.income : AppColors.expense;
|
|
final catColor =
|
|
AppCategories.colors[transaction.category] ?? AppColors.accent;
|
|
final catIcon =
|
|
AppCategories.icons[transaction.category] ?? Icons.category_rounded;
|
|
|
|
return GestureDetector(
|
|
onTap: () => context.push('/add', extra: transaction),
|
|
child: Container(
|
|
padding: const EdgeInsets.all(14),
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).colorScheme.surface,
|
|
borderRadius: BorderRadius.circular(16),
|
|
border: _themeBorder(context),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(10),
|
|
decoration: BoxDecoration(
|
|
color: catColor.withOpacity(0.15),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Icon(catIcon, color: catColor, size: 20),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
transaction.category,
|
|
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
|
fontWeight: FontWeight.w600,
|
|
color: Theme.of(context).colorScheme.onSurface,
|
|
),
|
|
),
|
|
if (transaction.note != null && transaction.note!.isNotEmpty)
|
|
Text(
|
|
transaction.note!,
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: Theme.of(
|
|
context,
|
|
).colorScheme.onSurface.withOpacity(0.6),
|
|
),
|
|
overflow: TextOverflow.ellipsis,
|
|
)
|
|
else
|
|
Text(
|
|
DateFormat('MMM d, yyyy · HH:mm').format(transaction.date),
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: Theme.of(
|
|
context,
|
|
).colorScheme.onSurface.withOpacity(0.6),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Text(
|
|
'${isIncome ? '+ ' : '- '}${formatAmount(transaction.currency, transaction.amount, fmt)}',
|
|
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
|
color: color,
|
|
fontWeight: FontWeight.w700,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _EmptyState extends StatelessWidget {
|
|
const _EmptyState();
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(24),
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).colorScheme.surface,
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Icon(
|
|
Icons.receipt_long_rounded,
|
|
size: 48,
|
|
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
|
|
),
|
|
),
|
|
const SizedBox(height: 16),
|
|
Text(
|
|
'No transactions found',
|
|
style: Theme.of(context).textTheme.titleMedium?.copyWith(
|
|
color: Theme.of(context).colorScheme.onSurface,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
const SizedBox(height: 6),
|
|
Text(
|
|
'Tap + to add your first transaction',
|
|
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
|
color: Theme.of(context).colorScheme.onSurface.withOpacity(0.6),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|