fianace page has been made along with the work day card

2025-12-10 16:58:29 +03:00
parent 1055cd7877
commit 85b378ac37
10 changed files with 223 additions and 12 deletions
--- a/assets/images/in.svg
+++ b/assets/images/in.svg
@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 16V7.5625L1 8.61719V16H5ZM5 16V3.50031M5 16H8M13 7.5625V3.50031M13 7.5625L17 8.61719V9.4375M13 7.5625V10.375M15 4.75L9 1L3 4.75M8 5.6875H10M8 8.5H10" stroke="#008824" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.1214 15.559C9.87173 15.6766 9.77495 15.9694 9.90528 16.213C10.0356 16.4566 10.3437 16.5587 10.5934 16.4411L10.3574 16L10.1214 15.559ZM16.8153 13.3488C16.8997 13.0934 16.7503 12.8141 16.4815 12.7251L12.1024 11.2735C11.8336 11.1844 11.5474 11.3193 11.4629 11.5747C11.3785 11.8301 11.5279 12.1093 11.7967 12.1984L15.6893 13.4887L14.4664 17.1884C14.382 17.4438 14.5314 17.723 14.8001 17.8121C15.0689 17.9012 15.3551 17.7663 15.4396 17.5109L16.8153 13.3488ZM10.3574 16L10.5934 16.4411L16.5647 13.6286L16.3287 13.1875L16.0927 12.7465L10.1214 15.559L10.3574 16Z" fill="#008824"/>
+</svg>
--- a/assets/images/money3.svg
+++ b/assets/images/money3.svg
@@ -0,0 +1,5 @@
+<svg width="18" height="15" viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 4.38886V2.69443C1 2.24504 1.17852 1.81405 1.49629 1.49629C1.81405 1.17852 2.24504 1 2.69443 1H4.38886M1 4.38886C2.12934 4.38886 4.38886 3.71109 4.38886 1M1 4.38886V7.77772M4.38886 1H12.861M1 7.77772V9.47215C1 9.92154 1.17852 10.3525 1.49629 10.6703C1.81405 10.9881 2.24504 11.1666 2.69443 11.1666H4.38886M1 7.77772C2.12934 7.77772 4.38886 8.45549 4.38886 11.1666M16.2499 4.38886V2.69443C16.2499 2.24504 16.0714 1.81405 15.7536 1.49629C15.4358 1.17852 15.0048 1 14.5554 1H12.861M16.2499 4.38886C15.1205 4.38886 12.861 3.71109 12.861 1M16.2499 4.38886V6.08329M4.38886 11.1666H7.77772" stroke="#BA4404" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.62509 7.77772C9.5609 7.77772 10.3195 7.01909 10.3195 6.08329C10.3195 5.14748 9.5609 4.38885 8.62509 4.38885C7.68929 4.38885 6.93066 5.14748 6.93066 6.08329C6.93066 7.01909 7.68929 7.77772 8.62509 7.77772Z" stroke="#BA4404" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.7086 8.62494V11.1666M13.7086 11.1666V13.7082M13.7086 11.1666H11.167M13.7086 11.1666H16.2503" stroke="#BA4404" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/images/out.svg
+++ b/assets/images/out.svg
@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 16V7.5625L1 8.61719V16H5ZM5 16V3.50031M5 16H8M13 7.5625V3.50031M13 7.5625L17 8.61719V9.4375M13 7.5625V10.375M15 4.75L9 1L3 4.75M8 5.6875H10M8 8.5H10" stroke="#B10A0A" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.9917 12.6218C16.2357 12.4922 16.5493 12.5786 16.6922 12.8147C16.8351 13.0508 16.7532 13.3473 16.5092 13.4769L16.2505 13.0494L15.9917 12.6218ZM10.3072 16.6064C10.0336 16.5311 9.86978 16.2604 9.94124 16.0017L11.1058 11.7872C11.1773 11.5286 11.457 11.38 11.7306 11.4553C12.0041 11.5306 12.168 11.8013 12.0965 12.0599L11.0613 15.8062L15.0241 16.8972C15.2977 16.9725 15.4615 17.2433 15.3901 17.5019C15.3186 17.7605 15.0389 17.9091 14.7653 17.8338L10.3072 16.6064ZM16.2505 13.0494L16.5092 13.4769L10.6954 16.5657L10.4366 16.1381L10.1778 15.7106L15.9917 12.6218L16.2505 13.0494Z" fill="#B10A0A"/>
+</svg>
--- a/assets/images/watch.svg
+++ b/assets/images/watch.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="19" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 0.5C15.2547 0.5 19.5 4.5248 19.5 9.375C19.5 9.68696 19.463 9.96379 19.4131 10.2666C19.1121 10.1563 18.8036 10.0661 18.4775 9.99805C18.4981 9.78465 18.5 9.58528 18.5 9.375C18.5 4.94395 14.6453 1.375 10 1.375C5.35475 1.375 1.5 4.94395 1.5 9.375C1.5 13.806 5.35475 17.375 10 17.375C10.2387 17.375 10.4605 17.3724 10.6992 17.3496C10.7635 17.6324 10.8472 17.9129 10.9512 18.1768C10.641 18.2189 10.3189 18.25 10 18.25C4.74525 18.25 0.5 14.2252 0.5 9.375C0.5 4.5248 4.74525 0.5 10 0.5ZM20.7686 14.0625L16.5 18.0635L13.7305 15.4688L14.5 14.748L16.1582 16.3027L16.5 16.623L16.8418 16.3027L20 13.3418L20.7686 14.0625ZM10 5.1875V9.95312L10.2607 10.0957L12.6738 11.4082C12.5809 11.4847 12.4891 11.5656 12.4004 11.6514L9.5 10.0195V5.1875H10Z" fill="#BA4404" stroke="#1B6F99"/>
+</svg>
--- a/lib/screens/finance_screen.dart
+++ b/lib/screens/finance_screen.dart
@@ -1,19 +1,19 @@
 import 'package:flutter/material.dart';
+import '../widgets/work_day_card.dart';

 class FinanceScreen extends StatelessWidget {
  const FinanceScreen({super.key});

  @override
  Widget build(BuildContext context) {
-    return const Center(
-      child: Text(
-        'المالية',
-        style: TextStyle(
-          color: Colors.white,
-          fontSize: 24,
-          fontWeight: FontWeight.bold,
-        ),
-      ),
+    return ListView(
+      padding: const EdgeInsets.only(top: 20, bottom: 120),
+      children: const [
+        WorkDayCard(),
+        WorkDayCard(),
+        WorkDayCard(),
+        WorkDayCard(),
+      ],
    );
  }
-}
+}
--- a/lib/screens/main_screen.dart
+++ b/lib/screens/main_screen.dart
@@ -1,6 +1,6 @@
 import 'package:coda_project/screens/user_settings_screen.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
+// import 'package:flutter_svg/flutter_svg.dart';
 import '../screens/notifications_screen.dart';
 import '../widgets/app_background.dart';
 import '../widgets/floatingnavbar.dart';
--- a/lib/screens/request_advance_scrren.dart
+++ b/lib/screens/request_advance_scrren.dart
@@ -1,5 +1,5 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_svg/flutter_svg.dart';
+// import 'package:flutter_svg/flutter_svg.dart';
 import '../widgets/app_background.dart';
 import '../widgets/settings_bar.dart';
 import '../widgets/onboarding_button.dart';
--- a/lib/widgets/gradient_line.dart
+++ b/lib/widgets/gradient_line.dart
@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+
+class GradientLine extends StatelessWidget {
+  final Color start;
+  final Color end;
+
+  const GradientLine({
+    super.key,
+    required this.start,
+    required this.end,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Expanded(
+      child: Container(
+        height: 3,
+        margin: const EdgeInsets.symmetric(horizontal: 4),
+        decoration: BoxDecoration(
+          gradient: LinearGradient(
+            colors: [start, end],
+          ),
+        ),
+      ),
+    );
+  }
+}
--- a/lib/widgets/status_circle.dart
+++ b/lib/widgets/status_circle.dart
@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+
+class StatusCircle extends StatelessWidget {
+  final Color color;
+  final Widget icon;
+  final double size;
+
+  const StatusCircle({
+    super.key,
+    required this.color,
+    required this.icon,
+    this.size = 42, // ✅ smaller = card height reduced
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: size,
+      height: size,
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        border: Border.all(color: color, width: 3),
+        color: Colors.white,
+      ),
+      child: Center(child: icon),
+    );
+  }
+}
--- a/lib/widgets/work_day_card.dart
+++ b/lib/widgets/work_day_card.dart
@@ -0,0 +1,140 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import '../widgets/gradient_line.dart';
+import '../widgets/status_circle.dart';
+
+class WorkDayCard extends StatelessWidget {
+  const WorkDayCard({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: const EdgeInsets.symmetric(horizontal: 18, vertical: 10),
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(22),
+        boxShadow: const [
+          BoxShadow(
+            color: Colors.black26,
+            blurRadius: 12,
+            offset: Offset(0, 6),
+          ),
+        ],
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          /// ✅ TITLE
+          const Text(
+            "يوم عمل",
+            textAlign: TextAlign.right,
+            style: TextStyle(
+              fontSize: 20,
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+
+          const SizedBox(height: 16),
+
+          /// ✅ ICONS + TEXT UNDER EACH ICON
+          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),
+                ),
+              ),
+
+              /// ✅ 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),
+                ),
+              ),
+
+              /// ✅ 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),
+                ),
+              ),
+
+              /// ✅ LOGIN
+              _StatusItem(
+                color: const Color(0xFF0A8F6B),
+                icon: SvgPicture.asset('assets/images/in.svg', width: 20),
+                label: "دخول\n1:14pm",
+              ),
+            ],
+          ),
+
+          const SizedBox(height: 12),
+
+          /// ✅ DIVIDER
+          const Divider(color: Colors.black38),
+
+          /// ✅ BOTTOM INFO
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: const [
+              Text("2025.12.1", style: TextStyle(fontSize: 12)),
+              Text("ملاحظات ان وجدت", style: TextStyle(fontSize: 12)),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+/// ✅ REUSABLE STATUS ITEM (CIRCLE + TEXT UNDER IT)
+class _StatusItem extends StatelessWidget {
+  final Color color;
+  final Widget icon;
+  final String label;
+
+  const _StatusItem({
+    required this.color,
+    required this.icon,
+    required this.label,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        StatusCircle(color: color, icon: icon),
+        const SizedBox(height: 6),
+        Text(
+          label,
+          textAlign: TextAlign.center,
+          style: const TextStyle(fontSize: 12),
+        ),
+      ],
+    );
+  }
+}