616 lines
22 KiB
Dart
616 lines
22 KiB
Dart
// ignore_for_file: use_build_context_synchronously, deprecated_member_use
|
|
|
|
import 'dart:convert';
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter/services.dart';
|
|
import 'package:google_fonts/google_fonts.dart';
|
|
import 'package:http/http.dart' as http;
|
|
import 'package:monarch/other_pages/colors.dart';
|
|
import 'package:monarch/other_pages/enviroment.dart';
|
|
import 'package:monarch/main_pages/Statistics/statistics.dart';
|
|
import 'package:shared_preferences/shared_preferences.dart';
|
|
|
|
class AddExpenseScreen extends StatefulWidget {
|
|
const AddExpenseScreen({super.key});
|
|
|
|
@override
|
|
State<AddExpenseScreen> createState() => _AddExpenseScreenState();
|
|
}
|
|
|
|
class _AddExpenseScreenState extends State<AddExpenseScreen>
|
|
with TickerProviderStateMixin {
|
|
final TextEditingController descriptionController = TextEditingController();
|
|
final TextEditingController amountController = TextEditingController();
|
|
final FocusNode _nameFocus = FocusNode();
|
|
final FocusNode _amountFocus = FocusNode();
|
|
|
|
late AnimationController _slideController;
|
|
late AnimationController _fadeController;
|
|
late Animation<Offset> _slideAnimation;
|
|
late Animation<double> _fadeAnimation;
|
|
|
|
bool _isNameFocused = false;
|
|
String _displayAmount = '';
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
|
|
_slideController = AnimationController(
|
|
duration: const Duration(milliseconds: 600),
|
|
vsync: this,
|
|
);
|
|
|
|
_fadeController = AnimationController(
|
|
duration: const Duration(milliseconds: 800),
|
|
vsync: this,
|
|
);
|
|
|
|
_slideAnimation = Tween<Offset>(
|
|
begin: const Offset(0, 1),
|
|
end: Offset.zero,
|
|
).animate(
|
|
CurvedAnimation(parent: _slideController, curve: Curves.easeOutCubic),
|
|
);
|
|
|
|
_fadeAnimation = Tween<double>(
|
|
begin: 0.0,
|
|
end: 1.0,
|
|
).animate(CurvedAnimation(parent: _fadeController, curve: Curves.easeOut));
|
|
|
|
_nameFocus.addListener(() {
|
|
setState(() {
|
|
_isNameFocused = _nameFocus.hasFocus;
|
|
});
|
|
});
|
|
|
|
_amountFocus.addListener(() {
|
|
setState(() {});
|
|
});
|
|
|
|
// Start animations
|
|
_slideController.forward();
|
|
_fadeController.forward();
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_slideController.dispose();
|
|
_fadeController.dispose();
|
|
descriptionController.dispose();
|
|
amountController.dispose();
|
|
_nameFocus.dispose();
|
|
_amountFocus.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
void _onAmountChanged(String value) {
|
|
if (value.isEmpty) {
|
|
setState(() {
|
|
_displayAmount = '';
|
|
});
|
|
return;
|
|
}
|
|
|
|
// Remove any non-digit characters except decimal point
|
|
String cleanValue = value.replaceAll(RegExp(r'[^\d.]'), '');
|
|
|
|
// Ensure only one decimal point
|
|
List<String> parts = cleanValue.split('.');
|
|
if (parts.length > 2) {
|
|
cleanValue =
|
|
'₹{parts[0]}.₹{parts.sublist(1).join('
|
|
')}';
|
|
}
|
|
|
|
if (cleanValue.isNotEmpty) {
|
|
double? amount = double.tryParse(cleanValue);
|
|
if (amount != null) {
|
|
setState(() {
|
|
_displayAmount = '₹${amount.toStringAsFixed(2)}';
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
Widget _buildKeypadButton(
|
|
String text, {
|
|
bool isSpecial = false,
|
|
double buttonHeight = 60,
|
|
}) {
|
|
return GestureDetector(
|
|
onTap: () {
|
|
HapticFeedback.lightImpact();
|
|
if (text == '⌫') {
|
|
if (amountController.text.isNotEmpty) {
|
|
amountController.text = amountController.text.substring(
|
|
0,
|
|
amountController.text.length - 1,
|
|
);
|
|
_onAmountChanged(amountController.text);
|
|
}
|
|
} else if (text == '.') {
|
|
if (!amountController.text.contains('.')) {
|
|
amountController.text += text;
|
|
_onAmountChanged(amountController.text);
|
|
}
|
|
} else {
|
|
amountController.text += text;
|
|
_onAmountChanged(amountController.text);
|
|
}
|
|
},
|
|
child: Container(
|
|
height: buttonHeight,
|
|
decoration: BoxDecoration(
|
|
color: isSpecial ? surfaceColor : cardColor,
|
|
borderRadius: BorderRadius.circular(16),
|
|
border: Border.all(
|
|
color: isSpecial ? textSecondary.withOpacity(0.2) : surfaceColor,
|
|
width: 1,
|
|
),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: primaryColor.withOpacity(0.08),
|
|
blurRadius: 8,
|
|
offset: const Offset(0, 2),
|
|
),
|
|
],
|
|
),
|
|
child: Center(
|
|
child: Text(
|
|
text,
|
|
style: GoogleFonts.inter(
|
|
fontSize: 24,
|
|
fontWeight: FontWeight.w600,
|
|
color: isSpecial ? textSecondary : primaryColor,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Future<void> addTransaction() async {
|
|
// Validation
|
|
if (descriptionController.text.trim().isEmpty ||
|
|
amountController.text.trim().isEmpty) {
|
|
_showCustomSnackBar(
|
|
message: 'Please fill in both name and amount',
|
|
icon: Icons.warning_rounded,
|
|
backgroundColor: const Color(0xFFFF6B6B),
|
|
iconColor: Colors.white,
|
|
);
|
|
return;
|
|
}
|
|
|
|
// Show loading dialog
|
|
showDialog(
|
|
context: context,
|
|
barrierDismissible: false,
|
|
builder:
|
|
(_) => Center(
|
|
child: Container(
|
|
padding: const EdgeInsets.all(24),
|
|
decoration: BoxDecoration(
|
|
color: cardColor,
|
|
borderRadius: BorderRadius.circular(16),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: primaryColor.withOpacity(0.1),
|
|
blurRadius: 20,
|
|
offset: const Offset(0, 8),
|
|
),
|
|
],
|
|
),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
CircularProgressIndicator(
|
|
valueColor: AlwaysStoppedAnimation<Color>(accentColor),
|
|
strokeWidth: 3,
|
|
),
|
|
const SizedBox(height: 16),
|
|
Text(
|
|
'Processing transaction...',
|
|
style: GoogleFonts.inter(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.w500,
|
|
color: primaryColor,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
|
|
try {
|
|
// 🔹 Get stored userId
|
|
final prefs = await SharedPreferences.getInstance();
|
|
final userId = prefs.getString('userId');
|
|
|
|
if (userId == null) {
|
|
Navigator.of(context).pop();
|
|
_showCustomSnackBar(
|
|
message: 'User not logged in — please log in again',
|
|
icon: Icons.error_rounded,
|
|
backgroundColor: const Color(0xFFFF6B6B),
|
|
iconColor: Colors.white,
|
|
);
|
|
return;
|
|
}
|
|
|
|
// Send POST request including userId
|
|
final response = await http.post(
|
|
Uri.parse('${Environment.baseUrl}/api/transaction/add'),
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: json.encode({
|
|
'description': descriptionController.text,
|
|
'amount': double.tryParse(amountController.text),
|
|
'userId': userId, // ✅ add user ID here
|
|
}),
|
|
);
|
|
|
|
Navigator.of(context).pop(); // Close loading dialog
|
|
|
|
if (response.statusCode == 200) {
|
|
final responseData = json.decode(response.body);
|
|
final predictedCategory = responseData['data']['category'];
|
|
|
|
descriptionController.clear();
|
|
amountController.clear();
|
|
setState(() => _displayAmount = '');
|
|
|
|
_showCustomSnackBar(
|
|
message:
|
|
'Transaction added successfully!\nCategorized as: $predictedCategory',
|
|
icon: Icons.check_circle_rounded,
|
|
backgroundColor: accentColor,
|
|
iconColor: Colors.white,
|
|
duration: const Duration(seconds: 2),
|
|
);
|
|
|
|
// Optionally refresh statistics screen
|
|
Future.delayed(const Duration(milliseconds: 1500), () {
|
|
if (mounted) Navigator.of(context).pop();
|
|
});
|
|
} else {
|
|
_showCustomSnackBar(
|
|
message: 'Failed to add transaction\nPlease try again',
|
|
icon: Icons.error_rounded,
|
|
backgroundColor: const Color(0xFFFF6B6B),
|
|
iconColor: Colors.white,
|
|
);
|
|
}
|
|
} catch (e) {
|
|
Navigator.of(context).pop();
|
|
_showCustomSnackBar(
|
|
message: 'Network error occurred\nPlease check your connection',
|
|
icon: Icons.wifi_off_rounded,
|
|
backgroundColor: const Color(0xFFFF9F43),
|
|
iconColor: Colors.white,
|
|
);
|
|
}
|
|
}
|
|
|
|
void _showCustomSnackBar({
|
|
required String message,
|
|
required IconData icon,
|
|
required Color backgroundColor,
|
|
required Color iconColor,
|
|
Duration duration = const Duration(seconds: 3),
|
|
}) {
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
SnackBar(
|
|
content: Container(
|
|
padding: const EdgeInsets.symmetric(vertical: 4),
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.all(8),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white.withOpacity(0.2),
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: Icon(icon, color: iconColor, size: 20),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Text(
|
|
message,
|
|
style: GoogleFonts.inter(
|
|
fontWeight: FontWeight.w500,
|
|
color: Colors.white,
|
|
fontSize: 14,
|
|
height: 1.4,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
backgroundColor: backgroundColor,
|
|
behavior: SnackBarBehavior.floating,
|
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
|
|
margin: const EdgeInsets.all(16),
|
|
duration: duration,
|
|
elevation: 8,
|
|
),
|
|
);
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: primaryColor,
|
|
body: SafeArea(
|
|
child: SlideTransition(
|
|
position: _slideAnimation,
|
|
child: FadeTransition(
|
|
opacity: _fadeAnimation,
|
|
child: Column(
|
|
children: [
|
|
// Header
|
|
Padding(
|
|
padding: const EdgeInsets.all(20),
|
|
child: Row(
|
|
children: [
|
|
GestureDetector(
|
|
onTap:
|
|
() => Navigator.pushReplacement(
|
|
context,
|
|
MaterialPageRoute(
|
|
builder: (context) => Statistics(),
|
|
),
|
|
),
|
|
child: Container(
|
|
width: 44,
|
|
height: 44,
|
|
decoration: BoxDecoration(
|
|
color: primaryColor.withOpacity(0.8),
|
|
borderRadius: BorderRadius.circular(14),
|
|
border: Border.all(
|
|
color: Colors.white.withOpacity(0.1),
|
|
width: 1,
|
|
),
|
|
),
|
|
child: const Icon(
|
|
Icons.arrow_back_ios_new,
|
|
color: Colors.white,
|
|
size: 20,
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: 16),
|
|
Text(
|
|
'Add Expense',
|
|
style: GoogleFonts.inter(
|
|
color: Colors.white,
|
|
fontSize: 24,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
// Main Content Card
|
|
Expanded(
|
|
child: Container(
|
|
margin: const EdgeInsets.only(top: 8),
|
|
decoration: BoxDecoration(
|
|
color: backgroundColor,
|
|
borderRadius: const BorderRadius.only(
|
|
topLeft: Radius.circular(32),
|
|
topRight: Radius.circular(32),
|
|
),
|
|
),
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(24),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Drag indicator
|
|
Center(
|
|
child: Container(
|
|
width: 40,
|
|
height: 4,
|
|
decoration: BoxDecoration(
|
|
color: textSecondary.withOpacity(0.3),
|
|
borderRadius: BorderRadius.circular(2),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(height: 32),
|
|
|
|
// Expense Name Section
|
|
Text(
|
|
'Expense Name',
|
|
style: GoogleFonts.inter(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.w600,
|
|
color: primaryColor,
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
Container(
|
|
decoration: BoxDecoration(
|
|
color: _isNameFocused ? cardColor : surfaceColor,
|
|
borderRadius: BorderRadius.circular(16),
|
|
border: Border.all(
|
|
color:
|
|
_isNameFocused
|
|
? accentColor
|
|
: Colors.transparent,
|
|
width: 2,
|
|
),
|
|
boxShadow:
|
|
_isNameFocused
|
|
? [
|
|
BoxShadow(
|
|
color: accentColor.withOpacity(0.1),
|
|
blurRadius: 20,
|
|
offset: const Offset(0, 4),
|
|
),
|
|
]
|
|
: [
|
|
BoxShadow(
|
|
color: primaryColor.withOpacity(0.06),
|
|
blurRadius: 8,
|
|
offset: const Offset(0, 2),
|
|
),
|
|
],
|
|
),
|
|
child: TextField(
|
|
controller: descriptionController,
|
|
focusNode: _nameFocus,
|
|
style: GoogleFonts.inter(
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.w500,
|
|
color: primaryColor,
|
|
),
|
|
decoration: InputDecoration(
|
|
hintText: 'Enter expense name',
|
|
hintStyle: GoogleFonts.inter(
|
|
color: textSecondary,
|
|
fontWeight: FontWeight.w400,
|
|
),
|
|
border: InputBorder.none,
|
|
contentPadding: const EdgeInsets.all(20),
|
|
),
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 40),
|
|
|
|
// Amount Display
|
|
Center(
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 24,
|
|
vertical: 16,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: cardColor,
|
|
borderRadius: BorderRadius.circular(20),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: primaryColor.withOpacity(0.08),
|
|
blurRadius: 16,
|
|
offset: const Offset(0, 4),
|
|
),
|
|
],
|
|
),
|
|
child: Text(
|
|
_displayAmount.isEmpty
|
|
? '₹0.00'
|
|
: _displayAmount,
|
|
style: GoogleFonts.inter(
|
|
fontSize: 36,
|
|
fontWeight: FontWeight.w700,
|
|
color: primaryColor,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 20),
|
|
|
|
// Custom Keypad
|
|
Expanded(
|
|
child: LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
double availableHeight = constraints.maxHeight;
|
|
double buttonHeight =
|
|
(availableHeight - 32) /
|
|
4; // 4 rows with spacing
|
|
buttonHeight = buttonHeight.clamp(
|
|
50.0,
|
|
70.0,
|
|
); // Min 50, Max 70
|
|
|
|
return GridView.builder(
|
|
physics: const NeverScrollableScrollPhysics(),
|
|
gridDelegate:
|
|
SliverGridDelegateWithFixedCrossAxisCount(
|
|
crossAxisCount: 3,
|
|
childAspectRatio:
|
|
constraints.maxWidth /
|
|
(buttonHeight * 3 + 32),
|
|
crossAxisSpacing: 10,
|
|
mainAxisSpacing: 10,
|
|
),
|
|
itemCount: 12,
|
|
itemBuilder: (context, index) {
|
|
List<String> keys = [
|
|
'1',
|
|
'2',
|
|
'3',
|
|
'4',
|
|
'5',
|
|
'6',
|
|
'7',
|
|
'8',
|
|
'9',
|
|
'.',
|
|
'0',
|
|
'⌫',
|
|
];
|
|
return _buildKeypadButton(
|
|
keys[index],
|
|
isSpecial:
|
|
keys[index] == '.' ||
|
|
keys[index] == '⌫',
|
|
buttonHeight: buttonHeight,
|
|
);
|
|
},
|
|
);
|
|
},
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 24),
|
|
|
|
// Add Expense Button
|
|
GestureDetector(
|
|
onTap: addTransaction,
|
|
child: Container(
|
|
width: double.infinity,
|
|
height: 60,
|
|
decoration: BoxDecoration(
|
|
color: accentColor,
|
|
borderRadius: BorderRadius.circular(16),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: accentColor.withOpacity(0.3),
|
|
blurRadius: 20,
|
|
offset: const Offset(0, 8),
|
|
),
|
|
],
|
|
),
|
|
child: Center(
|
|
child: Text(
|
|
'Add Expense',
|
|
style: GoogleFonts.inter(
|
|
color: Colors.white,
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|