general UI chnages has been made

This commit is contained in:
Daniah Ayad Al-sultani
2025-12-14 13:05:32 +03:00
parent 489a99a0a3
commit 2ce0e0103e
5 changed files with 286 additions and 233 deletions

View File

@@ -1,3 +1,5 @@
import 'package:coda_project/screens/notifications_screen.dart';
import 'package:coda_project/screens/user_settings_screen.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart'; import 'package:flutter_svg/flutter_svg.dart';
import '../widgets/login_animation.dart'; import '../widgets/login_animation.dart';
@@ -21,18 +23,31 @@ class AttendanceScreen extends StatelessWidget {
/// SETTINGS BAR (STATIC) /// SETTINGS BAR (STATIC)
/// ------------------------------ /// ------------------------------
SafeArea( SafeArea(
child: SettingsBar( child:SettingsBar(
selectedIndex: 0, selectedIndex: 0,
showBackButton: false, showBackButton: false,
iconPaths: [ iconPaths: [
'assets/images/user.svg', 'assets/images/user.svg',
'assets/images/ball.svg', 'assets/images/ball.svg',
], ],
onTap: (index) { onTap: (index) {
// Keep static, no animations if (index == 0) {
// You can navigate or add your logic later Navigator.push(
}, context,
), MaterialPageRoute(
builder: (context) => UserSettingsScreen(),
),
);
} else if (index == 1) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => NotificationsScreen(),
),
);
}
},
),
), ),
/// ------------------------------ /// ------------------------------
@@ -143,7 +158,7 @@ class AttendanceScreen extends StatelessWidget {
/// LOGOUT BUTTON /// LOGOUT BUTTON
/// ------------------------------ /// ------------------------------
Positioned( Positioned(
bottom: screenHeight * 0.16, bottom: screenHeight * 0.2,
right: screenWidth * 0.1, right: screenWidth * 0.1,
child: _ShadowedCard( child: _ShadowedCard(
shadow: [ shadow: [

View File

@@ -1,3 +1,5 @@
import 'package:coda_project/screens/notifications_screen.dart';
import 'package:coda_project/screens/user_settings_screen.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import '../widgets/finance_summary_card.dart'; import '../widgets/finance_summary_card.dart';
import '../widgets/work_day_card.dart'; import '../widgets/work_day_card.dart';
@@ -39,17 +41,31 @@ class _FinanceScreenState extends State<FinanceScreen> {
physics: const BouncingScrollPhysics(), physics: const BouncingScrollPhysics(),
slivers: [ slivers: [
SliverToBoxAdapter( SliverToBoxAdapter(
child: SettingsBar( child: SettingsBar(
selectedIndex: 0, selectedIndex: 0,
showBackButton: false, showBackButton: false,
iconPaths: [ iconPaths: [
'assets/images/user.svg', 'assets/images/user.svg',
'assets/images/ball.svg', 'assets/images/ball.svg',
], ],
onTap: (index) { onTap: (index) {
// Your logic here if (index == 0) {
}, Navigator.push(
), context,
MaterialPageRoute(
builder: (context) => UserSettingsScreen(),
),
);
} else if (index == 1) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => NotificationsScreen(),
),
);
}
},
),
), ),
const SliverToBoxAdapter(child: SizedBox(height: 5)), const SliverToBoxAdapter(child: SizedBox(height: 5)),

View File

@@ -1,3 +1,5 @@
import 'package:coda_project/screens/notifications_screen.dart';
import 'package:coda_project/screens/user_settings_screen.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart'; import 'package:flutter/rendering.dart';
import 'package:flutter_svg/flutter_svg.dart'; import 'package:flutter_svg/flutter_svg.dart';
@@ -74,165 +76,181 @@ class _HolidayScreenState extends State<HolidayScreen> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Directionality( return Stack(
textDirection: TextDirection.ltr, children: [
child: Stack( // ---------------------------------------------------------
children: [ // ⭐ MAIN CONTENT - CUSTOM SCROLL VIEW
// --------------------------------------------------------- // ---------------------------------------------------------
// ⭐ MAIN CONTENT - CUSTOM SCROLL VIEW SafeArea(
// --------------------------------------------------------- child: CustomScrollView(
SafeArea( controller: _scrollController,
child: CustomScrollView( physics: const BouncingScrollPhysics(),
controller: _scrollController, slivers: [
physics: const BouncingScrollPhysics(), // SETTINGS BAR
slivers: [ SliverToBoxAdapter(
// SETTINGS BAR child: Padding(
SliverToBoxAdapter( padding: const EdgeInsets.only(top: 8),
child: Padding( // First, make sure you have your screens defined
padding: const EdgeInsets.only(top: 8),
child: SettingsBar( // Then in your main widget:
selectedIndex: 0, child: SettingsBar(
showBackButton: false, selectedIndex: 0,
iconPaths: [ showBackButton: false,
'assets/images/user.svg', iconPaths: [
'assets/images/ball.svg', 'assets/images/user.svg',
], 'assets/images/ball.svg',
onTap: (index) { ],
// do your navigation logic onTap: (index) {
}, if (index == 0) {
), Navigator.push(
context,
MaterialPageRoute(
builder: (context) => UserSettingsScreen(),
),
);
} else if (index == 1) {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => NotificationsScreen(),
),
);
}
},
), ),
), ),
),
const SliverToBoxAdapter(child: SizedBox(height: 5)), const SliverToBoxAdapter(child: SizedBox(height: 5)),
// TABS SECTION // TABS SECTION
SliverToBoxAdapter( SliverToBoxAdapter(
child: SizedBox( child: SizedBox(
height: 55, height: 55,
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
// الأجازات // الأجازات
GestureDetector( GestureDetector(
onTap: () => setState(() => activeTab = 1), onTap: () => setState(() => activeTab = 1),
child: Column( child: Column(
children: [ children: [
Text( Text(
"الأجازات", "الأجازات",
style: TextStyle( style: TextStyle(
fontSize: 22, fontSize: 22,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
color: activeTab == 1 color:
? const Color(0xFF8EFDC2) activeTab == 1
: const Color(0x9EFFFFFF), ? const Color(0xFF8EFDC2)
), : const Color(0x9EFFFFFF),
), ),
if (activeTab == 1) ),
Container( if (activeTab == 1)
width: 60, Container(
height: 2, width: 60,
margin: const EdgeInsets.only(top: 4), height: 2,
color: const Color(0xFF8EFDC2), margin: const EdgeInsets.only(top: 4),
), color: const Color(0xFF8EFDC2),
],
),
),
const SizedBox(width: 70),
// السلف
GestureDetector(
onTap: () => setState(() => activeTab = 0),
child: Column(
children: [
Text(
"السلف",
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w600,
color: activeTab == 0
? const Color(0xFF8EFDC2)
: const Color(0x9EFFFFFF),
),
), ),
if (activeTab == 0) ],
Container(
width: 60,
height: 2,
margin: const EdgeInsets.only(top: 4),
color: const Color(0xFF8EFDC2),
),
],
),
), ),
], ),
),
const SizedBox(width: 70),
// السلف
GestureDetector(
onTap: () => setState(() => activeTab = 0),
child: Column(
children: [
Text(
"السلف",
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.w600,
color:
activeTab == 0
? const Color(0xFF8EFDC2)
: const Color(0x9EFFFFFF),
),
),
if (activeTab == 0)
Container(
width: 60,
height: 2,
margin: const EdgeInsets.only(top: 4),
color: const Color(0xFF8EFDC2),
),
],
),
),
],
), ),
), ),
),
const SliverToBoxAdapter(child: SizedBox(height: 20)), const SliverToBoxAdapter(child: SizedBox(height: 20)),
// CONTENT LISTS // CONTENT LISTS
activeTab == 1 activeTab == 1
? _buildLeaveRequestsSliver() ? _buildLeaveRequestsSliver()
: _buildAdvanceRequestsSliver(), : _buildAdvanceRequestsSliver(),
const SliverToBoxAdapter(child: SizedBox(height: 120)), const SliverToBoxAdapter(child: SizedBox(height: 120)),
], ],
),
), ),
),
// --------------------------------------------------------- // ---------------------------------------------------------
// ⭐ FLOATING ACTION BUTTONS // ⭐ FLOATING ACTION BUTTONS
// --------------------------------------------------------- // ---------------------------------------------------------
Positioned( Positioned(
bottom: 60, bottom: 150,
right: 20, right: 20,
child: AnimatedSlide( child: AnimatedSlide(
offset: _showActions ? Offset.zero : const Offset(0, 1.3), offset: _showActions ? Offset.zero : const Offset(0, 1.3),
duration: const Duration(milliseconds: 300), duration: const Duration(milliseconds: 300),
child: AnimatedOpacity( child: AnimatedOpacity(
opacity: _showActions ? 1 : 0, opacity: _showActions ? 1 : 0,
duration: const Duration(milliseconds: 250), duration: const Duration(milliseconds: 250),
child: Column( child: Column(
children: [ children: [
_HolidayActionButton( _HolidayActionButton(
label: "طلب سلفة", label: "طلب سلفة",
svgPath: "assets/images/money2.svg", svgPath: "assets/images/money2.svg",
iconWidth: 28, iconWidth: 28,
iconHeight: 20, iconHeight: 20,
onTap: () { onTap: () {
Navigator.push( Navigator.push(
context, context,
MaterialPageRoute( MaterialPageRoute(
builder: (_) => const RequestAdvanceScreen(), builder: (_) => const RequestAdvanceScreen(),
), ),
); );
}, },
), ),
const SizedBox(height: 18), const SizedBox(height: 18),
_HolidayActionButton( _HolidayActionButton(
label: "طلب إجازة", label: "طلب إجازة",
svgPath: "assets/images/plus.svg", svgPath: "assets/images/plus.svg",
iconWidth: 28, iconWidth: 28,
iconHeight: 20, iconHeight: 20,
onTap: () { onTap: () {
Navigator.push( Navigator.push(
context, context,
MaterialPageRoute( MaterialPageRoute(
builder: (_) => const RequestLeaveScreen(), builder: (_) => const RequestLeaveScreen(),
), ),
); );
}, },
), ),
], ],
),
), ),
), ),
), ),
], ),
), ],
); );
} }
@@ -258,15 +276,12 @@ class _HolidayScreenState extends State<HolidayScreen> {
return SliverPadding( return SliverPadding(
padding: const EdgeInsets.symmetric(horizontal: 25), padding: const EdgeInsets.symmetric(horizontal: 25),
sliver: SliverList( sliver: SliverList(
delegate: SliverChildBuilderDelegate( delegate: SliverChildBuilderDelegate((context, index) {
(context, index) { return Padding(
return Padding( padding: const EdgeInsets.only(bottom: 16),
padding: const EdgeInsets.only(bottom: 16), child: _buildLeaveRequestCard(_leaveRequests[index]),
child: _buildLeaveRequestCard(_leaveRequests[index]), );
); }, childCount: _leaveRequests.length),
},
childCount: _leaveRequests.length,
),
), ),
); );
} }
@@ -289,15 +304,12 @@ class _HolidayScreenState extends State<HolidayScreen> {
return SliverPadding( return SliverPadding(
padding: const EdgeInsets.symmetric(horizontal: 25), padding: const EdgeInsets.symmetric(horizontal: 25),
sliver: SliverList( sliver: SliverList(
delegate: SliverChildBuilderDelegate( delegate: SliverChildBuilderDelegate((context, index) {
(context, index) { return Padding(
return Padding( padding: const EdgeInsets.only(bottom: 16),
padding: const EdgeInsets.only(bottom: 16), child: _buildAdvanceRequestCard(_advanceRequests[index]),
child: _buildAdvanceRequestCard(_advanceRequests[index]), );
); }, childCount: _advanceRequests.length),
},
childCount: _advanceRequests.length,
),
), ),
); );
} }
@@ -333,17 +345,29 @@ class _HolidayScreenState extends State<HolidayScreen> {
Row( Row(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
children: [ children: [
_statusCircle(isWaiting, "قيد الانتظار", _statusCircle(
isWaiting ? "assets/images/waiting.svg" : null, isWaiting,
const Color(0xFFA58A1B), const Color(0xFFFFDC69)), "قيد الانتظار",
isWaiting ? "assets/images/waiting.svg" : null,
const Color(0xFFA58A1B),
const Color(0xFFFFDC69),
),
const SizedBox(width: 12), const SizedBox(width: 12),
_statusCircle(isApproved, "موافقة", _statusCircle(
isApproved ? "assets/images/yes.svg" : null, isApproved,
const Color(0xFF0A8A60), const Color(0xFF00D7A3)), "موافقة",
isApproved ? "assets/images/yes.svg" : null,
const Color(0xFF0A8A60),
const Color(0xFF00D7A3),
),
const SizedBox(width: 12), const SizedBox(width: 12),
_statusCircle(isDenied, "تم الرفض", _statusCircle(
isDenied ? "assets/images/no.svg" : null, isDenied,
const Color(0xFFE63946), const Color(0xFFE63946)), "تم الرفض",
isDenied ? "assets/images/no.svg" : null,
const Color(0xFFE63946),
const Color(0xFFE63946),
),
], ],
), ),
@@ -381,28 +405,32 @@ class _HolidayScreenState extends State<HolidayScreen> {
// REASON ROW // REASON ROW
Row( Row(
textDirection: TextDirection.ltr, // Add this
children: [ children: [
Expanded( Expanded(
child: Text( child: Text(request.reason, textAlign: TextAlign.right),
request.reason,
textAlign: TextAlign.right,
),
), ),
const SizedBox(width: 6), const SizedBox(width: 6),
const Text( const Text(
"السبب:", "السبب:",
style: TextStyle(fontWeight: FontWeight.bold), style: TextStyle(fontWeight: FontWeight.bold),
textAlign: TextAlign.right,
), ),
], ],
) ),
], ],
), ),
), ),
); );
} }
Widget _statusCircle(bool active, String label, String? svg, Widget _statusCircle(
Color color, Color glow) { bool active,
String label,
String? svg,
Color color,
Color glow,
) {
return Column( return Column(
children: [ children: [
Container( Container(
@@ -411,15 +439,15 @@ class _HolidayScreenState extends State<HolidayScreen> {
decoration: BoxDecoration( decoration: BoxDecoration(
shape: BoxShape.circle, shape: BoxShape.circle,
color: active ? color : const Color(0xFFD6D6D6), color: active ? color : const Color(0xFFD6D6D6),
boxShadow: active boxShadow:
? [BoxShadow(color: glow.withOpacity(0.6), blurRadius: 12)] active
: [], ? [BoxShadow(color: glow.withOpacity(0.6), blurRadius: 12)]
: [],
), ),
child: svg != null child:
? Center( svg != null
child: SvgPicture.asset(svg, width: 18, height: 18), ? Center(child: SvgPicture.asset(svg, width: 18, height: 18))
) : null,
: null,
), ),
const SizedBox(height: 4), const SizedBox(height: 4),
Text(label, style: const TextStyle(fontSize: 10)), Text(label, style: const TextStyle(fontSize: 10)),

View File

@@ -123,10 +123,7 @@ class _RequestLeaveScreenState extends State<RequestLeaveScreen> {
} catch (e) { } catch (e) {
// Show an error message if something went wrong // Show an error message if something went wrong
ScaffoldMessenger.of(context).showSnackBar( ScaffoldMessenger.of(context).showSnackBar(
SnackBar( SnackBar(content: Text('حدث خطأ: $e'), backgroundColor: Colors.red),
content: Text('حدث خطأ: $e'),
backgroundColor: Colors.red,
),
); );
} }
} }
@@ -151,10 +148,9 @@ class _RequestLeaveScreenState extends State<RequestLeaveScreen> {
), ),
// Title // Title
const SizedBox(height: 30), // const SizedBox(height: 30),
Flexible(
Expanded( child: Padding(
child: SingleChildScrollView(
padding: const EdgeInsets.symmetric(horizontal: 25), padding: const EdgeInsets.symmetric(horizontal: 25),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
@@ -172,7 +168,7 @@ class _RequestLeaveScreenState extends State<RequestLeaveScreen> {
), ),
), ),
const SizedBox(height: 25), const SizedBox(height: 10),
//============================= //=============================
// DROPDOWN: نوع الإجازة // DROPDOWN: نوع الإجازة
//============================= //=============================
@@ -188,7 +184,7 @@ class _RequestLeaveScreenState extends State<RequestLeaveScreen> {
), ),
), ),
const SizedBox(height: 6), const SizedBox(height: 5),
// Modified dropdown with disabled state // Modified dropdown with disabled state
Directionality( Directionality(
@@ -306,8 +302,8 @@ class _RequestLeaveScreenState extends State<RequestLeaveScreen> {
// ---------- TOGGLE ---------- // ---------- TOGGLE ----------
AnimatedContainer( AnimatedContainer(
duration: const Duration(milliseconds: 250), duration: const Duration(milliseconds: 250),
width: 95, width: 75,
height: 42, height: 30,
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 4, horizontal: 4,
), ),
@@ -329,8 +325,8 @@ class _RequestLeaveScreenState extends State<RequestLeaveScreen> {
: Alignment.centerLeft, : Alignment.centerLeft,
child: AnimatedContainer( child: AnimatedContainer(
duration: const Duration(milliseconds: 250), duration: const Duration(milliseconds: 250),
width: 40, width: 30,
height: 40, height: 30,
decoration: BoxDecoration( decoration: BoxDecoration(
color: color:
isTimedLeave isTimedLeave
@@ -461,7 +457,7 @@ class _RequestLeaveScreenState extends State<RequestLeaveScreen> {
), ),
), ),
const SizedBox(height: 25), const SizedBox(height: 10),
// ============================= // =============================
// REASON TEXTFIELD (Two Containers) // REASON TEXTFIELD (Two Containers)
@@ -484,7 +480,7 @@ class _RequestLeaveScreenState extends State<RequestLeaveScreen> {
// OUTER BORDER CONTAINER // OUTER BORDER CONTAINER
Container( Container(
padding: const EdgeInsets.all( padding: const EdgeInsets.all(
15, 12,
), // border thickness space ), // border thickness space
decoration: BoxDecoration( decoration: BoxDecoration(
border: Border.all( border: Border.all(
@@ -496,7 +492,7 @@ class _RequestLeaveScreenState extends State<RequestLeaveScreen> {
// INNER TEXTFIELD CONTAINER // INNER TEXTFIELD CONTAINER
child: Container( child: Container(
height: 100, height: 70,
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 14, horizontal: 14,
vertical: 10, vertical: 10,
@@ -525,7 +521,7 @@ class _RequestLeaveScreenState extends State<RequestLeaveScreen> {
), ),
), ),
const SizedBox(height: 70), const SizedBox(height: 20),
// CONFIRM BUTTON // CONFIRM BUTTON
Center( Center(
@@ -536,8 +532,6 @@ class _RequestLeaveScreenState extends State<RequestLeaveScreen> {
onPressed: _saveLeaveRequest, // Call the save method onPressed: _saveLeaveRequest, // Call the save method
), ),
), ),
const SizedBox(height: 40),
], ],
), ),
), ),
@@ -642,4 +636,4 @@ class _RequestLeaveScreenState extends State<RequestLeaveScreen> {
return ""; return "";
} }
} }
} }

View File

@@ -143,8 +143,8 @@ class _UserSettingsScreenState extends State<UserSettingsScreen> {
duration: const Duration( duration: const Duration(
milliseconds: 250, milliseconds: 250,
), ),
width: 95, width: 75,
height: 42, height: 30,
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
horizontal: 4, horizontal: 4,
), ),
@@ -166,8 +166,8 @@ class _UserSettingsScreenState extends State<UserSettingsScreen> {
duration: const Duration( duration: const Duration(
milliseconds: 250, milliseconds: 250,
), ),
width: 40, width: 30,
height: 40, height: 30,
decoration: BoxDecoration( decoration: BoxDecoration(
color: color:
_notificationsOn _notificationsOn