From a78f1487905647f5096a404284da2076b53fc5fe Mon Sep 17 00:00:00 2001 From: Daniah Ayad Al-sultani <148902945+Cactuskiller@users.noreply.github.com> Date: Thu, 11 Dec 2025 14:06:33 +0300 Subject: [PATCH] chnages has been made and fianace screen was created --- lib/screens/finance_screen.dart | 33 ++++- lib/widgets/finance_summary_card.dart | 177 ++++++++++++++++++++++++++ lib/widgets/gradient_line.dart | 14 +- lib/widgets/status_circle.dart | 2 +- lib/widgets/work_day_card.dart | 58 ++++----- 5 files changed, 236 insertions(+), 48 deletions(-) create mode 100644 lib/widgets/finance_summary_card.dart diff --git a/lib/screens/finance_screen.dart b/lib/screens/finance_screen.dart index 74765da..f967d4b 100644 --- a/lib/screens/finance_screen.dart +++ b/lib/screens/finance_screen.dart @@ -1,18 +1,39 @@ import 'package:flutter/material.dart'; +import '../widgets/finance_summary_card.dart'; import '../widgets/work_day_card.dart'; -class FinanceScreen extends StatelessWidget { +class FinanceScreen extends StatefulWidget { const FinanceScreen({super.key}); + @override + State createState() => _FinanceScreenState(); +} + +class _FinanceScreenState extends State { + String dropdownValue = "الكل"; + @override Widget build(BuildContext context) { return ListView( padding: const EdgeInsets.only(top: 20, bottom: 120), - children: const [ - WorkDayCard(), - WorkDayCard(), - WorkDayCard(), - WorkDayCard(), + children: [ + FinanceSummaryCard( + totalAmount: "333,000", + dropdownValue: dropdownValue, + onCalendarTap: () => showDatePicker( + context: context, + initialDate: DateTime.now(), + firstDate: DateTime(2020), + lastDate: DateTime(2030), + ), + onDropdownChanged: (value) { + setState(() => dropdownValue = value!); + }, + ), + + const WorkDayCard(), + const WorkDayCard(), + const WorkDayCard(), ], ); } diff --git a/lib/widgets/finance_summary_card.dart b/lib/widgets/finance_summary_card.dart new file mode 100644 index 0000000..04c3cc3 --- /dev/null +++ b/lib/widgets/finance_summary_card.dart @@ -0,0 +1,177 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; + +class FinanceSummaryCard extends StatelessWidget { + final String totalAmount; + final String dropdownValue; + final VoidCallback onCalendarTap; + final ValueChanged onDropdownChanged; + + const FinanceSummaryCard({ + super.key, + required this.totalAmount, + required this.dropdownValue, + required this.onCalendarTap, + required this.onDropdownChanged, + }); + + @override + Widget build(BuildContext context) { + return Container( + margin: const EdgeInsets.symmetric(horizontal: 18, vertical: 10), + padding: const EdgeInsets.all(18), + decoration: BoxDecoration( + color: Colors.white, + borderRadius: BorderRadius.circular(22), + boxShadow: const [ + BoxShadow( + color: Colors.black26, + blurRadius: 10, + offset: Offset(0, 6), + ), + ], + ), + child: Column( + children: [ + /// ========================== + /// TOP AMOUNT + ICON + /// ========================== + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text( + "د.ع $totalAmount", + style: const TextStyle( + fontSize: 22, + fontWeight: FontWeight.bold, + color: Color(0xFFBA4404), + ), + ), + + Row( + children: [ + const Text( + "المبلغ الكلي", + style: TextStyle(fontSize: 18, fontWeight: FontWeight.w700), + ), + const SizedBox(width: 10), + SvgPicture.asset("assets/images/money2.svg", width: 50), + ], + ), + ], + ), + + const SizedBox(height: 20), + + /// ========================== + /// MONTH FILTER BOX + /// ========================== + Container( + padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12), + decoration: BoxDecoration( + border: Border.all(color: const Color(0xFF0A8F6B), width: 1), + borderRadius: BorderRadius.circular(16), + ), + child: Row( + children: [ + // CALENDAR BUTTON + GestureDetector( + onTap: onCalendarTap, + child: Container( + width: 90, + height: 60, + decoration: BoxDecoration( + color: const Color(0xFFEAEAEA), + borderRadius: BorderRadius.circular(14), + ), + child: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + SvgPicture.asset( + "assets/images/calendar.svg", + width: 28, + ), + const SizedBox(height: 4), + const Text("الشهر", style: TextStyle(fontSize: 15)), + ], + ), + ), + ), + + const SizedBox(width: 14), + + // DROPDOWN MENU + Expanded( + child: Directionality( + textDirection: TextDirection.rtl, + child: Container( + height: 60, + padding: const EdgeInsets.symmetric(horizontal: 12), + decoration: BoxDecoration( + color: const Color(0xFFEAEAEA), + borderRadius: BorderRadius.circular(14), + ), + child: DropdownButtonHideUnderline( + child: DropdownButton( + value: dropdownValue, + icon: const Icon( + Icons.arrow_drop_down, + size: 35, + color: Color(0xFF0A8F6B), + ), + style: const TextStyle( + fontSize: 20, + color: Color.from( + alpha: 1, + red: 0, + green: 0, + blue: 0, + ), + fontWeight: FontWeight.bold, + ), + onChanged: onDropdownChanged, + items: const [ + DropdownMenuItem( + value: "الكل", + child: Directionality( + textDirection: TextDirection.rtl, + child: Text("الكل"), + ), + ), + + DropdownMenuItem( + value: "ساعات أضافية", + child: Directionality( + textDirection: TextDirection.rtl, + child: Text("ساعات أضافية"), + ), + ), + + DropdownMenuItem( + value: "مكافئة", + child: Directionality( + textDirection: TextDirection.rtl, + child: Text("مكافئة"), + ), + ), + DropdownMenuItem( + value: " عقوبة", + child: Directionality( + textDirection: TextDirection.rtl, + child: Text(" عقوبة"), + ), + ), + ], + ), + ), + ), + ), + ), + ], + ), + ), + ], + ), + ); + } +} diff --git a/lib/widgets/gradient_line.dart b/lib/widgets/gradient_line.dart index ad0fdb2..3aaa489 100644 --- a/lib/widgets/gradient_line.dart +++ b/lib/widgets/gradient_line.dart @@ -12,14 +12,12 @@ class GradientLine extends StatelessWidget { @override Widget build(BuildContext context) { - return Expanded( - child: Container( - height: 3, - margin: const EdgeInsets.symmetric(horizontal: 4), - decoration: BoxDecoration( - gradient: LinearGradient( - colors: [start, end], - ), + return Container( + height: 2, + margin: const EdgeInsets.symmetric(horizontal: 5), + decoration: BoxDecoration( + gradient: LinearGradient( + colors: [start, end], ), ), ); diff --git a/lib/widgets/status_circle.dart b/lib/widgets/status_circle.dart index 61ccef9..b6b1039 100644 --- a/lib/widgets/status_circle.dart +++ b/lib/widgets/status_circle.dart @@ -19,7 +19,7 @@ class StatusCircle extends StatelessWidget { height: size, decoration: BoxDecoration( shape: BoxShape.circle, - border: Border.all(color: color, width: 3), + border: Border.all(color: color, width: 2), color: Colors.white, ), child: Center(child: icon), diff --git a/lib/widgets/work_day_card.dart b/lib/widgets/work_day_card.dart index b06502d..7d0d9f1 100644 --- a/lib/widgets/work_day_card.dart +++ b/lib/widgets/work_day_card.dart @@ -9,8 +9,8 @@ class WorkDayCard extends StatelessWidget { @override Widget build(BuildContext context) { return Container( - margin: const EdgeInsets.symmetric(horizontal: 18, vertical: 10), - padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14), + margin: const EdgeInsets.symmetric(horizontal: 18, vertical: 6), + padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(22), @@ -25,64 +25,63 @@ class WorkDayCard extends StatelessWidget { child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ - /// ✅ TITLE const Text( "يوم عمل", textAlign: TextAlign.right, - style: TextStyle( - fontSize: 20, - fontWeight: FontWeight.bold, - ), + style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold), ), const SizedBox(height: 16), - /// ✅ ICONS + TEXT UNDER EACH ICON + /// 🔥 FIXED: CENTERED LINES BETWEEN CIRCLES Row( children: [ - /// ✅ MONEY _StatusItem( color: const Color(0xFFD16400), icon: SvgPicture.asset('assets/images/money3.svg', width: 20), label: "سعر كلي\n18,250 د.ع", ), - const Expanded( - child: GradientLine( - start: Color(0xFFD16400), - end: Color(0xFF1266A8), + /// LINE CENTERED VERTICALLY + Expanded( + child: Center( + child: GradientLine( + start: const Color(0xFFD16400), + end: const Color(0xFF1266A8), + ), ), ), - /// ✅ TIME _StatusItem( color: const Color(0xFF1266A8), icon: SvgPicture.asset('assets/images/watch.svg', width: 20), label: "عدد ساعات\n5.50", ), - const Expanded( - child: GradientLine( - start: Color(0xFF1266A8), - end: Color(0xFFB00000), + Expanded( + child: Center( + child: GradientLine( + start: const Color(0xFF1266A8), + end: const Color(0xFFB00000), + ), ), ), - /// ✅ LOGOUT _StatusItem( color: const Color(0xFFB00000), icon: SvgPicture.asset('assets/images/out.svg', width: 20), label: "خروج\n1:14pm", ), - const Expanded( - child: GradientLine( - start: Color(0xFFB00000), - end: Color(0xFF0A8F6B), + Expanded( + child: Center( + child: GradientLine( + start: const Color(0xFFB00000), + end: const Color(0xFF0A8F6B), + ), ), ), - /// ✅ LOGIN _StatusItem( color: const Color(0xFF0A8F6B), icon: SvgPicture.asset('assets/images/in.svg', width: 20), @@ -93,10 +92,8 @@ class WorkDayCard extends StatelessWidget { const SizedBox(height: 12), - /// ✅ DIVIDER const Divider(color: Colors.black38), - /// ✅ BOTTOM INFO Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: const [ @@ -110,7 +107,6 @@ class WorkDayCard extends StatelessWidget { } } -/// ✅ REUSABLE STATUS ITEM (CIRCLE + TEXT UNDER IT) class _StatusItem extends StatelessWidget { final Color color; final Widget icon; @@ -128,12 +124,8 @@ class _StatusItem extends StatelessWidget { mainAxisSize: MainAxisSize.min, children: [ StatusCircle(color: color, icon: icon), - const SizedBox(height: 6), - Text( - label, - textAlign: TextAlign.center, - style: const TextStyle(fontSize: 12), - ), + // const SizedBox(height: 3), + Text(label, textAlign: TextAlign.center, style: const TextStyle(fontSize: 12)), ], ); }