chnages has been made and fianace screen was created

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<FinanceScreen> createState() => _FinanceScreenState();
+}
+
+class _FinanceScreenState extends State<FinanceScreen> {
+  String dropdownValue = "الكل";
+
   @override
   Widget build(BuildContext context) {
     return ListView(
       padding: const EdgeInsets.only(top: 20, bottom: 120),
-      children: const [
+      children: [
-        WorkDayCard(),
+        FinanceSummaryCard(
-        WorkDayCard(),
+          totalAmount: "333,000",
-        WorkDayCard(),
+          dropdownValue: dropdownValue,
-        WorkDayCard(),
+          onCalendarTap: () => showDatePicker(
+            context: context,
+            initialDate: DateTime.now(),
+            firstDate: DateTime(2020),
+            lastDate: DateTime(2030),
+          ),
+          onDropdownChanged: (value) {
+            setState(() => dropdownValue = value!);
+          },
+        ),
+
+        const WorkDayCard(),
+        const WorkDayCard(),
+        const WorkDayCard(),
       ],
     );
   }

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<String?> 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<String>(
+                          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(" عقوبة"),
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/widgets/gradient_line.dart

@@ -12,14 +12,12 @@ class GradientLine extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Expanded(
+    return Container(
-      child: Container(
+      height: 2,
-        height: 3,
+      margin: const EdgeInsets.symmetric(horizontal: 5),
-        margin: const EdgeInsets.symmetric(horizontal: 4),
+      decoration: BoxDecoration(
-        decoration: BoxDecoration(
+        gradient: LinearGradient(
-          gradient: LinearGradient(
+          colors: [start, end],
-            colors: [start, end],
-          ),
         ),
       ),
     );

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),

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),
+      margin: const EdgeInsets.symmetric(horizontal: 18, vertical: 6),
-      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
+      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(
+            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
-              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(
+              /// LINE CENTERED VERTICALLY
-                child: GradientLine(
+              Expanded(
-                  start: Color(0xFFD16400),
+                child: Center(
-                  end: Color(0xFF1266A8),
+                  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(
+              Expanded(
-                child: GradientLine(
+                child: Center(
-                  start: Color(0xFF1266A8),
+                  child: GradientLine(
-                  end: Color(0xFFB00000),
+                    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(
+              Expanded(
-                child: GradientLine(
+                child: Center(
-                  start: Color(0xFFB00000),
+                  child: GradientLine(
-                  end: Color(0xFF0A8F6B),
+                    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),
+        // const SizedBox(height: 3),
-        Text(
+        Text(label, textAlign: TextAlign.center, style: const TextStyle(fontSize: 12)),
-          label,
-          textAlign: TextAlign.center,
-          style: const TextStyle(fontSize: 12),
-        ),
       ],
     );
   }