From 1055cd78779ff6b10eb1900eab1be1ab6d5836bf Mon Sep 17 00:00:00 2001 From: Daniah Ayad Al-sultani <148902945+Cactuskiller@users.noreply.github.com> Date: Wed, 10 Dec 2025 14:54:00 +0300 Subject: [PATCH] user setting screen is finishe --- assets/images/ball2.svg | 4 + assets/images/edit.svg | 4 + assets/images/info.svg | 3 + assets/images/logout2.svg | 3 + lib/screens/about_screen.dart | 75 ++++++ lib/screens/main_screen.dart | 48 ++-- lib/screens/notifications_screen.dart | 139 ++++++++++ lib/screens/user_settings_screen.dart | 348 +++++++++++++++---------- lib/widgets/change_password_modal.dart | 170 ++++++++++++ 9 files changed, 639 insertions(+), 155 deletions(-) create mode 100644 assets/images/ball2.svg create mode 100644 assets/images/edit.svg create mode 100644 assets/images/info.svg create mode 100644 assets/images/logout2.svg create mode 100644 lib/screens/about_screen.dart create mode 100644 lib/screens/notifications_screen.dart create mode 100644 lib/widgets/change_password_modal.dart diff --git a/assets/images/ball2.svg b/assets/images/ball2.svg new file mode 100644 index 0000000..94a8e28 --- /dev/null +++ b/assets/images/ball2.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/images/edit.svg b/assets/images/edit.svg new file mode 100644 index 0000000..cdb31a9 --- /dev/null +++ b/assets/images/edit.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/images/info.svg b/assets/images/info.svg new file mode 100644 index 0000000..d181bc8 --- /dev/null +++ b/assets/images/info.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/logout2.svg b/assets/images/logout2.svg new file mode 100644 index 0000000..6c2ba6b --- /dev/null +++ b/assets/images/logout2.svg @@ -0,0 +1,3 @@ + + + diff --git a/lib/screens/about_screen.dart b/lib/screens/about_screen.dart new file mode 100644 index 0000000..fed0a31 --- /dev/null +++ b/lib/screens/about_screen.dart @@ -0,0 +1,75 @@ +import 'package:flutter/material.dart'; +import '../widgets/app_background.dart'; +import '../widgets/settings_bar.dart'; + +class AboutScreen extends StatelessWidget { + const AboutScreen({super.key}); + + @override + Widget build(BuildContext context) { + return SafeArea( + child: Scaffold( + body: AppBackground( + child: Column( + children: [ + /// -------------------- SETTINGS BAR -------------------- + SettingsBar( + selectedIndex: 0, + onTap: (_) {}, + showBackButton: true, + onBackTap: () => Navigator.pop(context), + iconPaths: const [], + ), + + const SizedBox(height: 12), + + /// -------------------- CENTER CONTENT -------------------- + /// + Expanded( + child: Center( + child: Align( + alignment: Alignment.topCenter, + child: Directionality( + textDirection: TextDirection.rtl, + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + const Text( + "عن الشركة", + style: TextStyle( + fontSize: 26, + fontWeight: FontWeight.bold, + color: Colors.white, + ), + ), + + const SizedBox(height: 12), + + Container( + width: 200, + height: 1, + color: Color(0x8732C599), + ), + + const SizedBox(height: 14), + + const Text( + "نص", + style: TextStyle( + fontSize: 18, + color: Colors.white70, + ), + ), + ], + ), + ), + ), + ), + ), + ], + ), + ), + ), + ); + } +} diff --git a/lib/screens/main_screen.dart b/lib/screens/main_screen.dart index f48e2db..66fb0ed 100644 --- a/lib/screens/main_screen.dart +++ b/lib/screens/main_screen.dart @@ -1,6 +1,7 @@ import 'package:coda_project/screens/user_settings_screen.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; +import '../screens/notifications_screen.dart'; import '../widgets/app_background.dart'; import '../widgets/floatingnavbar.dart'; import '../widgets/settings_bar.dart'; @@ -43,25 +44,37 @@ class _MainPageState extends State { child: SafeArea( child: Column( children: [ - SettingsBar( - selectedIndex: _settingsIndex, - onTap: (index) { - setState(() { - _settingsIndex = index; - }); + SettingsBar( + selectedIndex: _settingsIndex, + onTap: (index) { + setState(() { + _settingsIndex = index; + }); - // 🟢 If user clicked the first icon (user.svg), open settings screen - if (index == 0) { - Navigator.push( - context, - MaterialPageRoute(builder: (_) => const UserSettingsScreen()), - ); - } - }, - showBackButton: false, - iconPaths: _settingsIconPaths, -), + // 🟢 If user clicked the first icon (user.svg), open settings screen + if (index == 0) { + Navigator.push( + context, + MaterialPageRoute( + builder: (_) => const UserSettingsScreen(), + ), + ); + } + // 🔔 Ball icon → Notifications screen + if (index == 1) { + Navigator.push( + context, + MaterialPageRoute( + builder: + (_) => const NotificationsScreen(), // placeholder + ), + ); + } + }, + showBackButton: false, + iconPaths: _settingsIconPaths, + ), // Main content area Expanded( @@ -69,7 +82,6 @@ class _MainPageState extends State { ), // const SizedBox(height: 20), - Floatingnavbar( items: _navItems, selectedIndex: _currentIndex, diff --git a/lib/screens/notifications_screen.dart b/lib/screens/notifications_screen.dart new file mode 100644 index 0000000..446c591 --- /dev/null +++ b/lib/screens/notifications_screen.dart @@ -0,0 +1,139 @@ +import 'package:flutter/material.dart'; +import '../widgets/app_background.dart'; +import '../widgets/settings_bar.dart'; + +class NotificationsScreen extends StatelessWidget { + const NotificationsScreen({super.key}); + + @override + Widget build(BuildContext context) { + return SafeArea( + child: Scaffold( + body: AppBackground( + child: Column( + children: [ + /// -------------------- SETTINGS BAR -------------------- + SettingsBar( + selectedIndex: 0, + onTap: (_) {}, + showBackButton: true, + onBackTap: () => Navigator.pop(context), + iconPaths: const [], + ), + + const SizedBox(height: 12), + + /// -------------------- CONTENT -------------------- + Expanded( + child: Directionality( + textDirection: TextDirection.rtl, + child: Column( + children: [ + /// Title + Padding( + padding: const EdgeInsets.only(right: 40), + child: Align( + alignment: Alignment.topRight, + child: const Text( + "الأشعارات", + style: TextStyle( + fontSize: 26, + color: Colors.white, + fontWeight: FontWeight.bold, + ), + ), + ), + ), + + const SizedBox(height: 20), + + /// -------------------- NOTIFICATION CARD -------------------- + Padding( + padding: const EdgeInsets.symmetric(horizontal: 22), + child: Container( + padding: const EdgeInsets.all(18), + decoration: BoxDecoration( + color: const Color(0xFFEFFFFA), + borderRadius: BorderRadius.circular(20), + boxShadow: const [ + BoxShadow( + color: Colors.black26, + blurRadius: 12, + offset: Offset(0, 6), + ), + ], + ), + child: Stack( + children: [ + /// ✅ DATE — TOP LEFT + const Positioned( + top: 0, + left: 0, + child: Text( + "2025.12.1", + style: TextStyle( + fontSize: 12, + color: Color(0x9E000000), + fontWeight: FontWeight.w900, + ), + ), + ), + + /// ✅ MAIN CONTENT — RTL + Align( + alignment: Alignment.centerRight, + child: Column( + crossAxisAlignment: CrossAxisAlignment.end, + mainAxisSize: MainAxisSize.min, + children: [ + const Text( + "عنوان الاشعار", + style: TextStyle( + fontSize: 22, + fontWeight: FontWeight.bold, + color: Colors.black, + ), + ), + + // const SizedBox(height: 6), + + /// ✅ DETAILS WITH GREEN LINE + Row( + mainAxisSize: MainAxisSize.min, + children: [ + // Green line + Container( + width: 20, + height: 2, + color: Color(0xFF025A42), + ), + + SizedBox(width: 8), + + Text( + "تفاصيل الاشعار", + style: TextStyle( + fontSize: 16, + color: Colors.black87, + ), + ), + ], + ), + ], + ), + ), + ], + ), + ), + ), + ], + ), + ), + ), + ], + ), + ), + ), + ); + } +} diff --git a/lib/screens/user_settings_screen.dart b/lib/screens/user_settings_screen.dart index 6d39f04..c56e7d1 100644 --- a/lib/screens/user_settings_screen.dart +++ b/lib/screens/user_settings_screen.dart @@ -2,191 +2,260 @@ import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; import '../widgets/app_background.dart'; import '../widgets/settings_bar.dart'; +import '../screens/about_screen.dart'; +import '../screens/auth_screen.dart'; +import '../widgets/change_password_modal.dart'; -class UserSettingsScreen extends StatelessWidget { + +class UserSettingsScreen extends StatefulWidget { const UserSettingsScreen({super.key}); + @override + State createState() => _UserSettingsScreenState(); +} + +class _UserSettingsScreenState extends State { + bool _notificationsOn = false; + @override Widget build(BuildContext context) { - return Directionality( - textDirection: TextDirection.rtl, + return SafeArea( child: Scaffold( body: AppBackground( child: SafeArea( child: Column( children: [ /// -------------------- SETTINGS BAR -------------------- - Directionality( - textDirection: TextDirection.ltr, // KEEP LOGO LEFT, BACK RIGHT - child: SettingsBar( - selectedIndex: 0, - onTap: (_) {}, - showBackButton: true, - onBackTap: () => Navigator.pop(context), - iconPaths: const [], - ), + SettingsBar( + selectedIndex: 0, + onTap: (_) {}, + showBackButton: true, + onBackTap: () => Navigator.pop(context), + iconPaths: const [], ), const SizedBox(height: 10), /// -------------------- PAGE TITLE -------------------- - const Text( - "الإعدادات", - style: TextStyle( - fontSize: 26, - color: Colors.white, - fontWeight: FontWeight.bold, + Padding( + padding: const EdgeInsets.only(right: 40), + child: Align( + alignment: Alignment.topRight, + child: const Text( + "الإعدادات", + style: TextStyle( + fontSize: 26, + color: Colors.white, + fontWeight: FontWeight.bold, + ), + ), ), ), - const SizedBox(height: 20), - /// -------------------- FORM CONTAINER -------------------- Expanded( child: Center( child: Stack( clipBehavior: Clip.none, children: [ - /// Outer border container - Container( - width: MediaQuery.of(context).size.width * 0.85, - decoration: BoxDecoration( - color: const Color(0xFFEEFFFA), // LIGHT GREEN FIXED - borderRadius: BorderRadius.circular(28), - border: Border.all( - color: const Color(0xDD00C28E), - width: 1, + Padding( + padding: const EdgeInsets.only(bottom: 40), + child: Container( + width: MediaQuery.of(context).size.width * 0.85, + height: MediaQuery.of(context).size.height * 0.62, + decoration: BoxDecoration( + color: const Color(0xF3EEFFFA), + borderRadius: BorderRadius.circular(10), + boxShadow: const [ + BoxShadow( + color: Colors.black26, + blurRadius: 30, + offset: Offset(0, 20), + ), + ], ), - boxShadow: const [ - BoxShadow( - color: Colors.black26, - blurRadius: 8, - offset: Offset(0, 4), - ), - ], - ), - padding: const EdgeInsets.symmetric( - horizontal: 18, - vertical: 40, - ), - child: Column( - crossAxisAlignment: CrossAxisAlignment.stretch, - children: [ - const SizedBox(height: 55), + padding: const EdgeInsets.symmetric( + horizontal: 22, + vertical: 55, + ), + child: Column( + children: [ + const SizedBox(height: 10), - /// -------------------- USER NAME -------------------- - const Center( - child: Text( + /// -------------------- USER NAME -------------------- + const Text( "اسم الموظف", style: TextStyle( - fontSize: 20, + fontSize: 25, fontWeight: FontWeight.bold, color: Colors.black87, ), ), - ), - const SizedBox(height: 4), + const SizedBox(height: 6), - GestureDetector( - onTap: () {}, - child: Center( + /// ✅ CLICKABLE + UNDERLINED + GestureDetector( + onTap: () { + showDialog( + context: context, + barrierDismissible: true, + builder: + (_) => const ChangePasswordModal(), + ); + }, child: Row( - mainAxisSize: MainAxisSize.min, + mainAxisAlignment: MainAxisAlignment.center, children: [ const Text( "تغيير كلمة المرور", style: TextStyle( - fontSize: 13, + fontSize: 15, color: Colors.black54, + decoration: TextDecoration.underline, + decorationThickness: 1.5, ), ), - const SizedBox(width: 4), + const SizedBox(width: 6), SvgPicture.asset( "assets/images/edit.svg", - width: 16, - height: 16, + width: 22, + height: 22, ), ], ), ), - ), - const SizedBox(height: 18), + const SizedBox(height: 20), - /// -------------------- NOTIFICATION SWITCH -------------------- - Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Switch( - value: true, - activeColor: const Color(0xFF177046), - inactiveThumbColor: Colors.black, - onChanged: (v) {}, - ), - - /// RTL – text on right, icon on left - Row( - children: [ - const Text( - "الإشعارات", - style: TextStyle( - fontSize: 16, - color: Colors.black87, + /// -------------------- NOTIFICATION SWITCH -------------------- + Row( + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + children: [ + GestureDetector( + onTap: () { + setState(() { + _notificationsOn = !_notificationsOn; + }); + }, + child: AnimatedContainer( + duration: const Duration( + milliseconds: 250, + ), + width: 95, + height: 42, + padding: const EdgeInsets.symmetric( + horizontal: 4, + ), + decoration: BoxDecoration( + color: + _notificationsOn + ? const Color(0xFF0A6B4A) + : const Color(0xFFB5B5B5), + borderRadius: BorderRadius.circular( + 40, + ), + ), + child: Align( + alignment: + _notificationsOn + ? Alignment.centerRight + : Alignment.centerLeft, + child: AnimatedContainer( + duration: const Duration( + milliseconds: 250, + ), + width: 40, + height: 40, + decoration: BoxDecoration( + color: + _notificationsOn + ? const Color(0xFF12BE85) + : const Color(0xFF0F0F0F), + shape: BoxShape.circle, + boxShadow: const [ + BoxShadow( + color: Color(0x2D000000), + blurRadius: 6, + offset: Offset(0, 2), + ), + ], + ), + ), ), ), - const SizedBox(width: 8), - SvgPicture.asset( - "assets/images/notification.svg", - width: 22, + ), + + Row( + children: [ + const Text( + "الإشعارات", + style: TextStyle( + fontSize: 16, + color: Colors.black87, + fontWeight: FontWeight.bold, + ), + ), + const SizedBox(width: 8), + SvgPicture.asset( + "assets/images/ball2.svg", + width: 22, + ), + ], + ), + ], + ), + + _divider(), + + _settingsRow( + label: "عن الشركة", + icon: "assets/images/info.svg", + onTap: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (_) => const AboutScreen(), ), - ], - ), - ], - ), + ); + }, + ), - _buildDivider(), + _divider(), - _buildSettingsRow( - label: "عن الشركة", - icon: "assets/images/info.svg", - onTap: () {}, - ), - - _buildDivider(), - - _buildSettingsRow( - label: "تسجيل خروج", - icon: "assets/images/logout.svg", - onTap: () {}, - ), - - _buildDivider(), - - _buildSettingsRow( - label: "إجازات الموظفين", - icon: "assets/images/holiday.svg", - onTap: () {}, - ), - ], + _settingsRow( + label: "تسجيل خروج", + icon: "assets/images/logout2.svg", + onTap: () { + Navigator.push( + context, + MaterialPageRoute( + builder: (_) => const AuthScreen(), + ), + ); + }, + ), + ], + ), ), ), - /// -------------------- USER AVATAR -------------------- + /// -------------------- AVATAR -------------------- Positioned( - top: -45, + top: -55, left: 0, right: 0, child: Center( child: Container( - width: 105, - height: 105, + width: 120, + height: 120, decoration: BoxDecoration( shape: BoxShape.circle, color: const Color(0xFFE1E1E1), border: Border.all( - color: const Color(0xFF177046), - width: 6, + color: const Color(0xFF2D5E50), + width: 12, ), ), ), @@ -204,39 +273,44 @@ class UserSettingsScreen extends StatelessWidget { ); } - // Divider line - Widget _buildDivider() { + Widget _divider() { return Container( width: double.infinity, + height: 1, + color: const Color(0xFF008864), margin: const EdgeInsets.symmetric(vertical: 12), - height: 1.2, - color: const Color(0xFFB5DECC), ); } - // RTL Settings row (text right, icon left) - Widget _buildSettingsRow({ + Widget _settingsRow({ required String label, required String icon, required VoidCallback onTap, }) { return GestureDetector( onTap: onTap, - child: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - /// ICON on LEFT — RTL - SvgPicture.asset(icon, width: 22), - - /// TEXT on RIGHT — RTL - Text( - label, - style: const TextStyle( - fontSize: 16, - color: Colors.black87, + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 6), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + const SizedBox(width: 24), + Row( + children: [ + Text( + label, + style: const TextStyle( + fontSize: 18, + color: Colors.black, + fontWeight: FontWeight.w600, + ), + ), + const SizedBox(width: 10), + SvgPicture.asset(icon, width: 23), + ], ), - ), - ], + ], + ), ), ); } diff --git a/lib/widgets/change_password_modal.dart b/lib/widgets/change_password_modal.dart new file mode 100644 index 0000000..9f318b1 --- /dev/null +++ b/lib/widgets/change_password_modal.dart @@ -0,0 +1,170 @@ +import 'package:flutter/material.dart'; +import '../widgets/onboarding_button.dart'; + +class ChangePasswordModal extends StatefulWidget { + const ChangePasswordModal({super.key}); + + @override + State createState() => _ChangePasswordModalState(); +} + +class _ChangePasswordModalState extends State { + bool _oldObscure = true; + // bool _newObscure = true; + + @override + Widget build(BuildContext context) { + final screenSize = MediaQuery.of(context).size; + final screenWidth = screenSize.width; + final screenHeight = screenSize.height; + + final formWidth = + screenWidth > 600 ? screenWidth * 0.5 : screenWidth * 0.88; + final labelFontSize = screenWidth > 600 ? 18.0 : 16.0; + final fieldFontSize = screenWidth > 600 ? 18.0 : 16.0; + final verticalPadding = screenHeight > 800 ? 38.0 : 28.0; + final fieldSpacing = screenHeight > 800 ? 30.0 : 20.0; + final buttonSpacing = screenHeight > 800 ? 80.0 : 60.0; + + return Material( + color: Colors.transparent, + child: Stack( + children: [ + /// ✅ DARK TRANSPARENT OVERLAY (NO BLUR) + Positioned.fill(child: Container(color: const Color(0x80000000))), + + /// ---------- MODAL ---------- + Center( + child: Directionality( + textDirection: TextDirection.rtl, + child: Container( + width: formWidth, + padding: EdgeInsets.symmetric( + horizontal: 25, + vertical: verticalPadding, + ), + decoration: BoxDecoration( + color: const Color(0xFFEEFFFA), + borderRadius: BorderRadius.circular(10), + boxShadow: const [ + BoxShadow( + color: Colors.black26, + blurRadius: 10, + offset: Offset(0, 5), + ), + ], + ), + child: Column( + mainAxisSize: MainAxisSize.min, + crossAxisAlignment: CrossAxisAlignment.stretch, + children: [ + /// ---------- OLD PASSWORD ---------- + Align( + alignment: Alignment.centerRight, + child: Text( + "كلمة المرور السابقة", + style: TextStyle( + fontSize: labelFontSize, + fontWeight: FontWeight.w600, + color: Colors.black87, + ), + ), + ), + const SizedBox(height: 8), + + _buildField( + hint: "أدخل كلمة المرور", + obscure: _oldObscure, + fontSize: fieldFontSize, + hasEye: true, // ✅ eye here + onEyeTap: + () => setState(() => _oldObscure = !_oldObscure), + ), + + SizedBox(height: fieldSpacing), + + /// ---------- NEW PASSWORD ---------- + Align( + alignment: Alignment.centerRight, + child: Text( + "كلمة المرور الجديدة", + style: TextStyle( + fontSize: labelFontSize, + fontWeight: FontWeight.w600, + color: Colors.black87, + ), + ), + ), + const SizedBox(height: 8), + + _buildField( + hint: "كلمة المرور", + obscure: false, + fontSize: fieldFontSize, + hasEye: false, + onEyeTap: () {}, // unused + ), + + SizedBox(height: buttonSpacing), + + Center( + child: OnboardingButton( + text: "حفظ التغيير", + backgroundColor: const Color(0xEE23574A), + onPressed: () { + Navigator.pop(context); + }, + ), + ), + ], + ), + ), + ), + ), + ], + ), + ); + } + + Widget _buildField({ + required String hint, + required bool obscure, + required double fontSize, + required bool hasEye, + required VoidCallback onEyeTap, + }) { + return Container( + decoration: BoxDecoration( + color: const Color(0xDEDEDEDE), + borderRadius: BorderRadius.circular(7), + boxShadow: const [ + BoxShadow(color: Colors.black26, blurRadius: 6, offset: Offset(0, 2)), + ], + ), + child: TextField( + obscureText: obscure, + textAlign: TextAlign.right, + style: TextStyle(fontSize: fontSize), + decoration: InputDecoration( + hintText: hint, + hintStyle: const TextStyle(color: Colors.black54), + border: InputBorder.none, + contentPadding: const EdgeInsets.symmetric( + vertical: 16, + horizontal: 16, + ), + suffixIcon: + hasEye + ? IconButton( + icon: Icon( + obscure ? Icons.visibility_off : Icons.visibility, + color: Colors.black54, + ), + onPressed: onEyeTap, + ) + : null, + ), + ), + ); + } +}