feat: update UI components for improved consistency and add tab indicator styling

This commit is contained in:
Vaibhav Surve 2025-07-03 13:22:04 +05:30
parent a0f1602f4e
commit 83ad10ffb4
8 changed files with 551 additions and 473 deletions

View File

@ -4,6 +4,7 @@ import 'package:marco/helpers/widgets/my_snackbar.dart';
import 'package:marco/helpers/services/app_logger.dart'; import 'package:marco/helpers/services/app_logger.dart';
class LauncherUtils { class LauncherUtils {
/// Launches the phone dialer with the provided phone number
static Future<void> launchPhone(String phoneNumber) async { static Future<void> launchPhone(String phoneNumber) async {
logSafe('Attempting to launch phone: $phoneNumber', sensitive: true); logSafe('Attempting to launch phone: $phoneNumber', sensitive: true);
@ -11,6 +12,7 @@ class LauncherUtils {
await _tryLaunch(url, 'Could not launch phone'); await _tryLaunch(url, 'Could not launch phone');
} }
/// Launches the email app with the provided email address
static Future<void> launchEmail(String email) async { static Future<void> launchEmail(String email) async {
logSafe('Attempting to launch email: $email', sensitive: true); logSafe('Attempting to launch email: $email', sensitive: true);
@ -18,9 +20,9 @@ class LauncherUtils {
await _tryLaunch(url, 'Could not launch email'); await _tryLaunch(url, 'Could not launch email');
} }
/// Launches WhatsApp with the provided phone number
static Future<void> launchWhatsApp(String phoneNumber) async { static Future<void> launchWhatsApp(String phoneNumber) async {
logSafe('Attempting to launch WhatsApp with: $phoneNumber', logSafe('Attempting to launch WhatsApp with: $phoneNumber', sensitive: true);
sensitive: true);
String normalized = phoneNumber.replaceAll(RegExp(r'\D'), ''); String normalized = phoneNumber.replaceAll(RegExp(r'\D'), '');
if (!normalized.startsWith('91')) { if (!normalized.startsWith('91')) {
@ -43,8 +45,8 @@ class LauncherUtils {
await _tryLaunch(url, 'Could not open WhatsApp'); await _tryLaunch(url, 'Could not open WhatsApp');
} }
static Future<void> copyToClipboard(String text, /// Copies text to clipboard with feedback
{required String typeLabel}) async { static Future<void> copyToClipboard(String text, {required String typeLabel}) async {
try { try {
logSafe('Copying "$typeLabel" to clipboard'); logSafe('Copying "$typeLabel" to clipboard');
@ -56,9 +58,12 @@ class LauncherUtils {
type: SnackbarType.success, type: SnackbarType.success,
); );
} catch (e, st) { } catch (e, st) {
logSafe('Failed to copy $typeLabel to clipboard: $e', logSafe(
stackTrace: st, level: LogLevel.error, sensitive: true); 'Failed to copy $typeLabel to clipboard: $e',
stackTrace: st,
level: LogLevel.error,
sensitive: true,
);
showAppSnackbar( showAppSnackbar(
title: 'Error', title: 'Error',
message: 'Failed to copy $typeLabel', message: 'Failed to copy $typeLabel',
@ -67,17 +72,23 @@ class LauncherUtils {
} }
} }
/// Internal function to launch a URL and show error if failed
static Future<void> _tryLaunch(Uri url, String errorMsg) async { static Future<void> _tryLaunch(Uri url, String errorMsg) async {
try { try {
logSafe('Trying to launch URL: ${url.toString()}'); logSafe('Trying to launch URL: ${url.toString()}');
if (await canLaunchUrl(url)) { final bool launched = await launchUrl(
await launchUrl(url, mode: LaunchMode.externalApplication); url,
mode: LaunchMode.externalApplication,
);
if (launched) {
logSafe('URL launched successfully: ${url.toString()}'); logSafe('URL launched successfully: ${url.toString()}');
} else { } else {
logSafe( logSafe(
'Launch failed - canLaunchUrl returned false: ${url.toString()}', 'launchUrl returned false: ${url.toString()}',
level: LogLevel.warning); level: LogLevel.warning,
);
showAppSnackbar( showAppSnackbar(
title: 'Error', title: 'Error',
message: errorMsg, message: errorMsg,
@ -85,9 +96,11 @@ class LauncherUtils {
); );
} }
} catch (e, st) { } catch (e, st) {
logSafe('Exception during launch of ${url.toString()}: $e', logSafe(
stackTrace: st, level: LogLevel.error); 'Exception during launch of ${url.toString()}: $e',
stackTrace: st,
level: LogLevel.error,
);
showAppSnackbar( showAppSnackbar(
title: 'Error', title: 'Error',
message: '$errorMsg: $e', message: '$errorMsg: $e',

View File

@ -71,52 +71,62 @@ class _AttendanceScreenState extends State<AttendanceScreen> with UIMixin {
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
appBar: PreferredSize( appBar: PreferredSize(
preferredSize: const Size.fromHeight(80), preferredSize: const Size.fromHeight(72),
child: AppBar( child: AppBar(
backgroundColor: const Color(0xFFF5F5F5), backgroundColor: const Color(0xFFF5F5F5),
elevation: 0.5, elevation: 0.5,
foregroundColor: Colors.black, automaticallyImplyLeading: false,
titleSpacing: 0, titleSpacing: 0,
centerTitle: false, title: Padding(
leading: Padding( padding: MySpacing.xy(16, 0),
padding: const EdgeInsets.only(top: 15.0), child: Row(
child: IconButton( crossAxisAlignment: CrossAxisAlignment.center,
children: [
IconButton(
icon: const Icon(Icons.arrow_back_ios_new, icon: const Icon(Icons.arrow_back_ios_new,
color: Colors.black, size: 20), color: Colors.black, size: 20),
onPressed: () { onPressed: () => Get.offNamed('/dashboard'),
Get.offNamed('/dashboard');
},
), ),
), MySpacing.width(8),
title: Padding( Expanded(
padding: const EdgeInsets.only(top: 15.0),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min,
children: [ children: [
MyText.titleLarge( MyText.titleLarge(
'Attendance', 'Attendance',
fontWeight: 700, fontWeight: 700,
color: Colors.black, color: Colors.black,
), ),
const SizedBox(height: 2), MySpacing.height(2),
GetBuilder<ProjectController>( GetBuilder<ProjectController>(
builder: (projectController) { builder: (projectController) {
final projectName = final projectName =
projectController.selectedProject?.name ?? projectController.selectedProject?.name ??
'Select Project'; 'Select Project';
return MyText.bodySmall( return Row(
children: [
const Icon(Icons.work_outline,
size: 14, color: Colors.grey),
MySpacing.width(4),
Expanded(
child: MyText.bodySmall(
projectName, projectName,
fontWeight: 600, fontWeight: 600,
maxLines: 1,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
color: Colors.grey[700], color: Colors.grey[700],
),
),
],
); );
}, },
), ),
], ],
), ),
), ),
],
),
),
), ),
), ),
body: SafeArea( body: SafeArea(

View File

@ -1,6 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:intl/intl.dart'; import 'package:intl/intl.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:marco/controller/project_controller.dart'; import 'package:marco/controller/project_controller.dart';
import 'package:marco/controller/directory/directory_controller.dart'; import 'package:marco/controller/directory/directory_controller.dart';
import 'package:marco/helpers/widgets/my_spacing.dart'; import 'package:marco/helpers/widgets/my_spacing.dart';
@ -8,94 +9,115 @@ import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/model/directory/contact_model.dart'; import 'package:marco/model/directory/contact_model.dart';
import 'package:marco/helpers/widgets/avatar.dart'; import 'package:marco/helpers/widgets/avatar.dart';
import 'package:marco/helpers/utils/launcher_utils.dart'; import 'package:marco/helpers/utils/launcher_utils.dart';
import 'package:flutter_html/flutter_html.dart'; import 'package:tab_indicator_styler/tab_indicator_styler.dart';
class ContactDetailScreen extends StatelessWidget { class ContactDetailScreen extends StatelessWidget {
final ContactModel contact; final ContactModel contact;
const ContactDetailScreen({super.key, required this.contact}); const ContactDetailScreen({super.key, required this.contact});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final directoryController = Get.find<DirectoryController>(); final directoryController = Get.find<DirectoryController>();
final projectController = Get.find<ProjectController>(); final projectController = Get.find<ProjectController>();
Future.microtask(() { Future.microtask(() {
if (!directoryController.contactCommentsMap.containsKey(contact.id)) { if (!directoryController.contactCommentsMap.containsKey(contact.id)) {
directoryController.fetchCommentsForContact(contact.id); directoryController.fetchCommentsForContact(contact.id);
} }
}); });
final email = contact.contactEmails.isNotEmpty
? contact.contactEmails.first.emailAddress
: "-";
final phone = contact.contactPhones.isNotEmpty
? contact.contactPhones.first.phoneNumber
: "-";
final createdDate = DateTime.now();
final formattedDate = DateFormat('MMMM dd, yyyy').format(createdDate);
final tags = contact.tags.map((e) => e.name).join(", ");
final bucketNames = contact.bucketIds
.map((id) => directoryController.contactBuckets
.firstWhereOrNull((b) => b.id == id)
?.name)
.whereType<String>()
.join(", ");
final projectNames = contact.projectIds
?.map((id) => projectController.projects
.firstWhereOrNull((p) => p.id == id)
?.name)
.whereType<String>()
.join(", ") ??
"-";
final category = contact.contactCategory?.name ?? "-";
return DefaultTabController( return DefaultTabController(
length: 2, length: 2,
child: Scaffold( child: Scaffold(
backgroundColor: const Color(0xFFF5F5F5), backgroundColor: const Color(0xFFF5F5F5),
appBar: PreferredSize( appBar: _buildMainAppBar(projectController),
preferredSize: const Size.fromHeight(170), body: SafeArea(
child: AppBar(
backgroundColor: const Color(0xFFF5F5F5),
elevation: 0.5,
automaticallyImplyLeading: false,
flexibleSpace: SafeArea(
child: Padding(
padding: MySpacing.xy(10, 12),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
// Back button and title _buildSubHeader(),
Row( Expanded(
child: TabBarView(
children: [
_buildDetailsTab(directoryController, projectController),
_buildCommentsTab(directoryController),
],
),
),
],
),
),
),
);
}
PreferredSizeWidget _buildMainAppBar(ProjectController projectController) {
return AppBar(
backgroundColor: const Color(0xFFF5F5F5),
elevation: 0.2,
automaticallyImplyLeading: false,
titleSpacing: 0,
title: Padding(
padding: MySpacing.xy(16, 0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
IconButton( IconButton(
icon: const Icon(Icons.arrow_back_ios_new, icon: const Icon(Icons.arrow_back_ios_new,
color: Colors.black, size: 20), color: Colors.black, size: 20),
onPressed: () => Get.back(), onPressed: () => Get.back(),
), ),
const SizedBox(width: 4), MySpacing.width(8),
Column( Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [ children: [
MyText.titleLarge('Contact Profile', MyText.titleLarge(
fontWeight: 700, color: Colors.black), 'Contact Profile',
const SizedBox(height: 2), fontWeight: 700,
color: Colors.black,
),
MySpacing.height(2),
GetBuilder<ProjectController>( GetBuilder<ProjectController>(
builder: (_) { builder: (projectController) {
final projectName = final projectName =
projectController.selectedProject?.name ?? projectController.selectedProject?.name ??
'Select Project'; 'Select Project';
return MyText.bodySmall( return Row(
children: [
const Icon(Icons.work_outline,
size: 14, color: Colors.grey),
MySpacing.width(4),
Expanded(
child: MyText.bodySmall(
projectName, projectName,
fontWeight: 600, fontWeight: 600,
overflow: TextOverflow.ellipsis,
color: Colors.grey[700], color: Colors.grey[700],
),
),
],
); );
}, },
), ),
], ],
), ),
),
], ],
), ),
const SizedBox(height: 12), ),
// Avatar + name + org );
}
Widget _buildSubHeader() {
return Padding(
padding: MySpacing.xy(16, 12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row( Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
Avatar( Avatar(
firstName: contact.name.split(" ").first, firstName: contact.name.split(" ").first,
@ -105,105 +127,118 @@ class ContactDetailScreen extends StatelessWidget {
size: 35, size: 35,
backgroundColor: Colors.indigo, backgroundColor: Colors.indigo,
), ),
const SizedBox(width: 12), MySpacing.width(12),
Column( Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
MyText.titleSmall( MyText.titleSmall(contact.name,
contact.name, fontWeight: 600, color: Colors.black),
fontWeight: 600, MySpacing.height(2),
color: Colors.black, MyText.bodySmall(contact.organization,
), fontWeight: 500, color: Colors.grey[700]),
const SizedBox(height: 2),
MyText.titleSmall(
contact.organization,
fontWeight: 500,
color: Colors.grey[700],
),
], ],
), ),
], ],
), ),
TabBar(
const SizedBox(height: 6),
// Tab Bar
const TabBar(
indicatorColor: Colors.indigo,
labelColor: Colors.indigo, labelColor: Colors.indigo,
unselectedLabelColor: Colors.grey, unselectedLabelColor: Colors.grey,
tabs: [ indicator: MaterialIndicator(
color: Colors.indigo,
height: 4,
topLeftRadius: 8,
topRightRadius: 8,
bottomLeftRadius: 8,
bottomRightRadius: 8,
),
tabs: const [
Tab(text: "Details"), Tab(text: "Details"),
Tab(text: "Comments"), Tab(text: "Comments"),
], ],
), ),
], ],
), ),
), );
), }
),
), Widget _buildDetailsTab(DirectoryController directoryController,
body: TabBarView( ProjectController projectController) {
children: [ final email = contact.contactEmails.isNotEmpty
// Details Tab ? contact.contactEmails.first.emailAddress
SingleChildScrollView( : "-";
padding: MySpacing.xy(9, 10),
final phone = contact.contactPhones.isNotEmpty
? contact.contactPhones.first.phoneNumber
: "-";
final createdDate = DateTime.now();
final formattedDate = DateFormat('MMMM dd, yyyy').format(createdDate);
final tags = contact.tags.map((e) => e.name).join(", ");
final bucketNames = contact.bucketIds
.map((id) => directoryController.contactBuckets
.firstWhereOrNull((b) => b.id == id)
?.name)
.whereType<String>()
.join(", ");
final projectNames = contact.projectIds
?.map((id) => projectController.projects
.firstWhereOrNull((p) => p.id == id)
?.name)
.whereType<String>()
.join(", ") ??
"-";
final category = contact.contactCategory?.name ?? "-";
return SingleChildScrollView(
padding: MySpacing.xy(8, 8),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
_infoCard("Basic Info", [ _infoCard("Basic Info", [
_iconInfoRow( _iconInfoRow(Icons.email, "Email", email,
Icons.email,
"Email",
email,
onTap: () => LauncherUtils.launchEmail(email), onTap: () => LauncherUtils.launchEmail(email),
onLongPress: () => LauncherUtils.copyToClipboard(email, onLongPress: () =>
typeLabel: "Email"), LauncherUtils.copyToClipboard(email, typeLabel: "Email")),
), _iconInfoRow(Icons.phone, "Phone", phone,
_iconInfoRow(
Icons.phone,
"Phone",
phone,
onTap: () => LauncherUtils.launchPhone(phone), onTap: () => LauncherUtils.launchPhone(phone),
onLongPress: () => LauncherUtils.copyToClipboard(phone, onLongPress: () =>
typeLabel: "Phone"), LauncherUtils.copyToClipboard(phone, typeLabel: "Phone")),
), _iconInfoRow(Icons.calendar_today, "Created", formattedDate),
_iconInfoRow(
Icons.calendar_today, "Created", formattedDate),
_iconInfoRow(Icons.location_on, "Address", contact.address), _iconInfoRow(Icons.location_on, "Address", contact.address),
]), ]),
_infoCard("Organization", [ _infoCard("Organization", [
_iconInfoRow( _iconInfoRow(Icons.business, "Organization", contact.organization),
Icons.business, "Organization", contact.organization),
_iconInfoRow(Icons.category, "Category", category), _iconInfoRow(Icons.category, "Category", category),
]), ]),
_infoCard("Meta Info", [ _infoCard("Meta Info", [
_iconInfoRow( _iconInfoRow(Icons.label, "Tags", tags.isNotEmpty ? tags : "-"),
Icons.label, "Tags", tags.isNotEmpty ? tags : "-"), _iconInfoRow(Icons.folder_shared, "Contact Buckets",
_iconInfoRow(Icons.folder_shared, "Contat Buckets",
bucketNames.isNotEmpty ? bucketNames : "-"), bucketNames.isNotEmpty ? bucketNames : "-"),
_iconInfoRow(Icons.work_outline, "Projects", projectNames), _iconInfoRow(Icons.work_outline, "Projects", projectNames),
]), ]),
_infoCard("Description", [ _infoCard("Description", [
const SizedBox(height: 6), MySpacing.height(6),
SizedBox( Align(
width: double.infinity, alignment: Alignment.topLeft,
child: MyText.bodyMedium( child: MyText.bodyMedium(
contact.description, contact.description,
color: Colors.grey[800], color: Colors.grey[800],
maxLines: 10, maxLines: 10,
textAlign: TextAlign.left,
), ),
), ),
]), ])
], ],
), ),
), );
}
// Comments Tab Widget _buildCommentsTab(DirectoryController directoryController) {
// Improved Comments Tab return Obx(() {
Obx(() { final comments = directoryController.contactCommentsMap[contact.id];
final comments =
directoryController.contactCommentsMap[contact.id];
if (comments == null) { if (comments == null) {
return const Center(child: CircularProgressIndicator()); return const Center(child: CircularProgressIndicator());
@ -211,15 +246,13 @@ class ContactDetailScreen extends StatelessWidget {
if (comments.isEmpty) { if (comments.isEmpty) {
return Center( return Center(
child: child: MyText.bodyLarge("No comments yet.", color: Colors.grey));
MyText.bodyLarge("No comments yet.", color: Colors.grey),
);
} }
return ListView.separated( return ListView.separated(
padding: MySpacing.xy(12, 16), padding: MySpacing.xy(8, 8),
itemCount: comments.length, itemCount: comments.length,
separatorBuilder: (_, __) => const SizedBox(height: 12), separatorBuilder: (_, __) => MySpacing.height(12),
itemBuilder: (_, index) { itemBuilder: (_, index) {
final comment = comments[index]; final comment = comments[index];
final initials = comment.createdBy.firstName.isNotEmpty final initials = comment.createdBy.firstName.isNotEmpty
@ -242,26 +275,17 @@ class ContactDetailScreen extends StatelessWidget {
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
// Avatar + By + Date Row at top
Row( Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
Avatar( Avatar(firstName: initials, lastName: '', size: 31),
firstName: initials, MySpacing.width(8),
lastName: '',
size: 31,
),
const SizedBox(width: 8),
Expanded( Expanded(
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
MyText.bodySmall( MyText.bodySmall("By: ${comment.createdBy.firstName}",
"By: ${comment.createdBy.firstName}", fontWeight: 600, color: Colors.indigo[700]),
fontWeight: 600, MySpacing.height(2),
color: Colors.indigo[700],
),
const SizedBox(height: 2),
MyText.bodySmall( MyText.bodySmall(
DateFormat('dd MMM yyyy, hh:mm a') DateFormat('dd MMM yyyy, hh:mm a')
.format(comment.createdAt), .format(comment.createdAt),
@ -280,10 +304,7 @@ class ContactDetailScreen extends StatelessWidget {
), ),
], ],
), ),
MySpacing.height(10),
const SizedBox(height: 10),
// Comment content
Html( Html(
data: comment.note, data: comment.note,
style: { style: {
@ -305,12 +326,8 @@ class ContactDetailScreen extends StatelessWidget {
fontWeight: FontWeight.bold, fontWeight: FontWeight.bold,
color: Colors.indigo[700], color: Colors.indigo[700],
), ),
"strong": Style( "strong": Style(fontWeight: FontWeight.w700),
fontWeight: FontWeight.w700, "p": Style(margin: Margins.only(bottom: 8)),
),
"p": Style(
margin: Margins.only(bottom: 8),
),
}, },
), ),
], ],
@ -318,17 +335,13 @@ class ContactDetailScreen extends StatelessWidget {
); );
}, },
); );
}) });
],
),
),
);
} }
Widget _iconInfoRow(IconData icon, String label, String value, Widget _iconInfoRow(IconData icon, String label, String value,
{VoidCallback? onTap, VoidCallback? onLongPress}) { {VoidCallback? onTap, VoidCallback? onLongPress}) {
return Padding( return Padding(
padding: const EdgeInsets.symmetric(vertical: 8), padding: MySpacing.y(8),
child: GestureDetector( child: GestureDetector(
onTap: onTap, onTap: onTap,
onLongPress: onLongPress, onLongPress: onLongPress,
@ -336,14 +349,14 @@ class ContactDetailScreen extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
Icon(icon, size: 22, color: Colors.indigo), Icon(icon, size: 22, color: Colors.indigo),
const SizedBox(width: 12), MySpacing.width(12),
Expanded( Expanded(
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
MyText.bodySmall(label, MyText.bodySmall(label,
fontWeight: 600, color: Colors.black87), fontWeight: 600, color: Colors.black87),
const SizedBox(height: 2), MySpacing.height(2),
MyText.bodyMedium(value, color: Colors.grey[800]), MyText.bodyMedium(value, color: Colors.grey[800]),
], ],
), ),
@ -358,7 +371,7 @@ class ContactDetailScreen extends StatelessWidget {
return Card( return Card(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
elevation: 2, elevation: 2,
margin: const EdgeInsets.only(bottom: 10), margin: MySpacing.bottom(12),
child: Padding( child: Padding(
padding: MySpacing.xy(16, 16), padding: MySpacing.xy(16, 16),
child: Column( child: Column(
@ -366,7 +379,7 @@ class ContactDetailScreen extends StatelessWidget {
children: [ children: [
MyText.titleSmall(title, MyText.titleSmall(title,
fontWeight: 700, color: Colors.indigo[700]), fontWeight: 700, color: Colors.indigo[700]),
const SizedBox(height: 8), MySpacing.height(8),
...children, ...children,
], ],
), ),

View File

@ -33,52 +33,62 @@ class DirectoryMainScreen extends StatelessWidget {
return Scaffold( return Scaffold(
backgroundColor: const Color(0xFFF5F5F5), backgroundColor: const Color(0xFFF5F5F5),
appBar: PreferredSize( appBar: PreferredSize(
preferredSize: const Size.fromHeight(80), preferredSize: const Size.fromHeight(72),
child: AppBar( child: AppBar(
backgroundColor: const Color(0xFFF5F5F5), backgroundColor: const Color(0xFFF5F5F5),
elevation: 0.5, elevation: 0.5,
foregroundColor: Colors.black, automaticallyImplyLeading: false,
titleSpacing: 0, titleSpacing: 0,
centerTitle: false, title: Padding(
leading: Padding( padding: MySpacing.xy(16, 0),
padding: const EdgeInsets.only(top: 15.0), child: Row(
child: IconButton( crossAxisAlignment: CrossAxisAlignment.center,
children: [
IconButton(
icon: const Icon(Icons.arrow_back_ios_new, icon: const Icon(Icons.arrow_back_ios_new,
color: Colors.black, size: 20), color: Colors.black, size: 20),
onPressed: () { onPressed: () => Get.offNamed('/dashboard'),
Get.offNamed('/dashboard');
},
), ),
), MySpacing.width(8),
title: Padding( Expanded(
padding: const EdgeInsets.only(top: 15.0),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min,
children: [ children: [
MyText.titleLarge( MyText.titleLarge(
'Directory', 'Directory',
fontWeight: 700, fontWeight: 700,
color: Colors.black, color: Colors.black,
), ),
const SizedBox(height: 2), MySpacing.height(2),
GetBuilder<ProjectController>( GetBuilder<ProjectController>(
builder: (projectController) { builder: (projectController) {
final projectName = final projectName =
projectController.selectedProject?.name ?? projectController.selectedProject?.name ??
'Select Project'; 'Select Project';
return MyText.bodySmall( return Row(
children: [
const Icon(Icons.work_outline,
size: 14, color: Colors.grey),
MySpacing.width(4),
Expanded(
child: MyText.bodySmall(
projectName, projectName,
fontWeight: 600, fontWeight: 600,
maxLines: 1,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
color: Colors.grey[700], color: Colors.grey[700],
),
),
],
); );
}, },
), ),
], ],
), ),
), ),
],
),
),
), ),
), ),
floatingActionButton: FloatingActionButton( floatingActionButton: FloatingActionButton(
@ -366,7 +376,7 @@ class DirectoryMainScreen extends StatelessWidget {
padding: padding:
EdgeInsets.only(right: 8.0), EdgeInsets.only(right: 8.0),
child: Icon(Icons.email_outlined, child: Icon(Icons.email_outlined,
color: Colors.blue, size: 20), color: Colors.blue, size: 25),
), ),
), ),
Expanded( Expanded(
@ -378,7 +388,7 @@ class DirectoryMainScreen extends StatelessWidget {
LauncherUtils.copyToClipboard( LauncherUtils.copyToClipboard(
email, email,
typeLabel: 'Email'), typeLabel: 'Email'),
child: MyText.bodySmall( child: MyText.bodyMedium(
email, email,
maxLines: 1, maxLines: 1,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
@ -408,7 +418,7 @@ class DirectoryMainScreen extends StatelessWidget {
child: const Icon( child: const Icon(
Icons.phone_outlined, Icons.phone_outlined,
color: Colors.blue, color: Colors.blue,
size: 20), size: 25),
), ),
), ),
@ -421,7 +431,7 @@ class DirectoryMainScreen extends StatelessWidget {
LauncherUtils.copyToClipboard( LauncherUtils.copyToClipboard(
phone, phone,
typeLabel: 'Phone number'), typeLabel: 'Phone number'),
child: MyText.bodySmall( child: MyText.bodyMedium(
phone, phone,
maxLines: 1, maxLines: 1,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
@ -445,7 +455,7 @@ class DirectoryMainScreen extends StatelessWidget {
child: const FaIcon( child: const FaIcon(
FontAwesomeIcons.whatsapp, FontAwesomeIcons.whatsapp,
color: Colors.green, color: Colors.green,
size: 18), size: 25),
), ),
), ),
], ],

View File

@ -15,6 +15,7 @@ import 'package:marco/helpers/widgets/avatar.dart';
import 'package:marco/model/employees/employee_detail_bottom_sheet.dart'; import 'package:marco/model/employees/employee_detail_bottom_sheet.dart';
import 'package:marco/controller/project_controller.dart'; import 'package:marco/controller/project_controller.dart';
import 'package:marco/helpers/widgets/my_custom_skeleton.dart'; import 'package:marco/helpers/widgets/my_custom_skeleton.dart';
class EmployeesScreen extends StatefulWidget { class EmployeesScreen extends StatefulWidget {
const EmployeesScreen({super.key}); const EmployeesScreen({super.key});
@ -74,52 +75,62 @@ class _EmployeesScreenState extends State<EmployeesScreen> with UIMixin {
return Scaffold( return Scaffold(
backgroundColor: const Color(0xFFF5F5F5), backgroundColor: const Color(0xFFF5F5F5),
appBar: PreferredSize( appBar: PreferredSize(
preferredSize: const Size.fromHeight(80), preferredSize: const Size.fromHeight(72),
child: AppBar( child: AppBar(
backgroundColor: const Color(0xFFF5F5F5), backgroundColor: const Color(0xFFF5F5F5),
elevation: 0.5, elevation: 0.5,
foregroundColor: Colors.black, automaticallyImplyLeading: false,
titleSpacing: 0, titleSpacing: 0,
centerTitle: false, title: Padding(
leading: Padding( padding: MySpacing.xy(16, 0),
padding: const EdgeInsets.only(top: 15.0), // Aligns with title child: Row(
child: IconButton( crossAxisAlignment: CrossAxisAlignment.center,
children: [
IconButton(
icon: const Icon(Icons.arrow_back_ios_new, icon: const Icon(Icons.arrow_back_ios_new,
color: Colors.black, size: 20), color: Colors.black, size: 20),
onPressed: () { onPressed: () => Get.offNamed('/dashboard'),
Get.offNamed('/dashboard');
},
), ),
), MySpacing.width(8),
title: Padding( Expanded(
padding: const EdgeInsets.only(top: 15.0),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min,
children: [ children: [
MyText.titleLarge( MyText.titleLarge(
'Employees', 'Employees',
fontWeight: 700, fontWeight: 700,
color: Colors.black, color: Colors.black,
), ),
const SizedBox(height: 2), MySpacing.height(2),
GetBuilder<ProjectController>( GetBuilder<ProjectController>(
builder: (projectController) { builder: (projectController) {
final projectName = final projectName =
projectController.selectedProject?.name ?? projectController.selectedProject?.name ??
'Select Project'; 'Select Project';
return MyText.bodySmall( return Row(
children: [
const Icon(Icons.work_outline,
size: 14, color: Colors.grey),
MySpacing.width(4),
Expanded(
child: MyText.bodySmall(
projectName, projectName,
fontWeight: 600, fontWeight: 600,
maxLines: 1,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
color: Colors.grey[700], color: Colors.grey[700],
),
),
],
); );
}, },
), ),
], ],
), ),
), ),
],
),
),
), ),
), ),
floatingActionButton: InkWell( floatingActionButton: InkWell(

View File

@ -67,52 +67,62 @@ class _DailyProgressReportScreenState extends State<DailyProgressReportScreen>
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
appBar: PreferredSize( appBar: PreferredSize(
preferredSize: const Size.fromHeight(80), preferredSize: const Size.fromHeight(72),
child: AppBar( child: AppBar(
backgroundColor: const Color(0xFFF5F5F5), backgroundColor: const Color(0xFFF5F5F5),
elevation: 0.5, elevation: 0.5,
foregroundColor: Colors.black, automaticallyImplyLeading: false,
titleSpacing: 0, titleSpacing: 0,
centerTitle: false, title: Padding(
leading: Padding( padding: MySpacing.xy(16, 0),
padding: const EdgeInsets.only(top: 15.0), // Aligns with title child: Row(
child: IconButton( crossAxisAlignment: CrossAxisAlignment.center,
children: [
IconButton(
icon: const Icon(Icons.arrow_back_ios_new, icon: const Icon(Icons.arrow_back_ios_new,
color: Colors.black, size: 20), color: Colors.black, size: 20),
onPressed: () { onPressed: () => Get.offNamed('/dashboard'),
Get.offNamed('/dashboard');
},
), ),
), MySpacing.width(8),
title: Padding( Expanded(
padding: const EdgeInsets.only(top: 15.0),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min,
children: [ children: [
MyText.titleLarge( MyText.titleLarge(
'Daily Task Progress', 'Daily Task Progress',
fontWeight: 700, fontWeight: 700,
color: Colors.black, color: Colors.black,
), ),
const SizedBox(height: 2), MySpacing.height(2),
GetBuilder<ProjectController>( GetBuilder<ProjectController>(
builder: (projectController) { builder: (projectController) {
final projectName = final projectName =
projectController.selectedProject?.name ?? projectController.selectedProject?.name ??
'Select Project'; 'Select Project';
return MyText.bodySmall( return Row(
children: [
const Icon(Icons.work_outline,
size: 14, color: Colors.grey),
MySpacing.width(4),
Expanded(
child: MyText.bodySmall(
projectName, projectName,
fontWeight: 600, fontWeight: 600,
maxLines: 1,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
color: Colors.grey[700], color: Colors.grey[700],
),
),
],
); );
}, },
), ),
], ],
), ),
), ),
],
),
),
), ),
), ),
body: SafeArea( body: SafeArea(

View File

@ -53,52 +53,62 @@ class _DailyTaskPlaningScreenState extends State<DailyTaskPlaningScreen>
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
appBar: PreferredSize( appBar: PreferredSize(
preferredSize: const Size.fromHeight(80), preferredSize: const Size.fromHeight(72),
child: AppBar( child: AppBar(
backgroundColor: const Color(0xFFF5F5F5), backgroundColor: const Color(0xFFF5F5F5),
elevation: 0.5, elevation: 0.5,
foregroundColor: Colors.black, automaticallyImplyLeading: false,
titleSpacing: 0, titleSpacing: 0,
centerTitle: false, title: Padding(
leading: Padding( padding: MySpacing.xy(16, 0),
padding: const EdgeInsets.only(top: 15.0), // Aligns with title child: Row(
child: IconButton( crossAxisAlignment: CrossAxisAlignment.center,
children: [
IconButton(
icon: const Icon(Icons.arrow_back_ios_new, icon: const Icon(Icons.arrow_back_ios_new,
color: Colors.black, size: 20), color: Colors.black, size: 20),
onPressed: () { onPressed: () => Get.offNamed('/dashboard'),
Get.offNamed('/dashboard');
},
), ),
), MySpacing.width(8),
title: Padding( Expanded(
padding: const EdgeInsets.only(top: 15.0),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min,
children: [ children: [
MyText.titleLarge( MyText.titleLarge(
'Daily Task Planning', 'Daily Task Planing',
fontWeight: 700, fontWeight: 700,
color: Colors.black, color: Colors.black,
), ),
const SizedBox(height: 2), MySpacing.height(2),
GetBuilder<ProjectController>( GetBuilder<ProjectController>(
builder: (projectController) { builder: (projectController) {
final projectName = final projectName =
projectController.selectedProject?.name ?? projectController.selectedProject?.name ??
'Select Project'; 'Select Project';
return MyText.bodySmall( return Row(
children: [
const Icon(Icons.work_outline,
size: 14, color: Colors.grey),
MySpacing.width(4),
Expanded(
child: MyText.bodySmall(
projectName, projectName,
fontWeight: 600, fontWeight: 600,
maxLines: 1,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
color: Colors.grey[700], color: Colors.grey[700],
),
),
],
); );
}, },
), ),
], ],
), ),
), ),
],
),
),
), ),
), ),
body: SafeArea( body: SafeArea(

View File

@ -73,6 +73,7 @@ dependencies:
jwt_decoder: ^2.0.1 jwt_decoder: ^2.0.1
font_awesome_flutter: ^10.8.0 font_awesome_flutter: ^10.8.0
flutter_html: ^3.0.0 flutter_html: ^3.0.0
tab_indicator_styler: ^2.0.0
dev_dependencies: dev_dependencies:
flutter_test: flutter_test:
sdk: flutter sdk: flutter