Vaibhav Surve
65fbef3441
- Added navigation to the dashboard after applying the theme in ThemeController. - Introduced a new PillTabBar widget for a modern tab design across multiple screens. - Updated dashboard screen to improve button actions and UI consistency. - Refactored contact detail screen to streamline layout and enhance gradient effects. - Implemented PillTabBar in directory main screen, expense screen, and payment request screen for consistent tab navigation. - Improved layout structure in user document screen and employee profile screen for better user experience. - Enhanced service project details screen with a modern tab bar implementation.
660 lines
24 KiB
Dart
660 lines
24 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:get/get.dart';
|
|
import 'package:on_field_work/controller/project_controller.dart';
|
|
import 'package:on_field_work/controller/directory/directory_controller.dart';
|
|
import 'package:on_field_work/helpers/widgets/my_spacing.dart';
|
|
import 'package:on_field_work/helpers/widgets/my_text.dart';
|
|
import 'package:on_field_work/model/directory/contact_model.dart';
|
|
import 'package:on_field_work/helpers/widgets/avatar.dart';
|
|
import 'package:on_field_work/helpers/utils/launcher_utils.dart';
|
|
import 'package:on_field_work/model/directory/add_comment_bottom_sheet.dart';
|
|
import 'package:on_field_work/model/directory/add_contact_bottom_sheet.dart';
|
|
import 'package:on_field_work/helpers/utils/date_time_utils.dart';
|
|
import 'package:on_field_work/helpers/widgets/my_refresh_indicator.dart';
|
|
import 'package:on_field_work/helpers/widgets/my_confirmation_dialog.dart';
|
|
import 'package:on_field_work/helpers/utils/mixins/ui_mixin.dart';
|
|
import 'package:on_field_work/helpers/widgets/custom_app_bar.dart';
|
|
|
|
class ContactDetailScreen extends StatefulWidget {
|
|
final ContactModel contact;
|
|
const ContactDetailScreen({super.key, required this.contact});
|
|
|
|
@override
|
|
State<ContactDetailScreen> createState() => _ContactDetailScreenState();
|
|
}
|
|
|
|
class _ContactDetailScreenState extends State<ContactDetailScreen>
|
|
with SingleTickerProviderStateMixin, UIMixin {
|
|
late final DirectoryController directoryController;
|
|
late final ProjectController projectController;
|
|
late Rx<ContactModel> contactRx;
|
|
late TabController _tabController;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
directoryController = Get.find<DirectoryController>();
|
|
projectController = Get.put(ProjectController());
|
|
contactRx = widget.contact.obs;
|
|
|
|
_tabController = TabController(length: 2, vsync: this);
|
|
|
|
WidgetsBinding.instance.addPostFrameCallback((_) async {
|
|
await directoryController.fetchCommentsForContact(contactRx.value.id,
|
|
active: true);
|
|
await directoryController.fetchCommentsForContact(contactRx.value.id,
|
|
active: false);
|
|
});
|
|
|
|
ever(directoryController.allContacts, (_) {
|
|
final updated = directoryController.allContacts
|
|
.firstWhereOrNull((c) => c.id == contactRx.value.id);
|
|
if (updated != null) contactRx.value = updated;
|
|
});
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_tabController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final Color appBarColor = contentTheme.primary;
|
|
|
|
return Scaffold(
|
|
backgroundColor: const Color(0xFFF5F5F5),
|
|
|
|
// ✔ AppBar is outside SafeArea (correct)
|
|
appBar: CustomAppBar(
|
|
title: 'Contact Profile',
|
|
backgroundColor: appBarColor,
|
|
onBackPressed: () => Get.offAllNamed('/dashboard/directory-main-page'),
|
|
),
|
|
|
|
// ✔ Only the content is wrapped inside SafeArea
|
|
body: SafeArea(
|
|
child: Column(
|
|
children: [
|
|
// ************ GRADIENT + SUBHEADER + TABBAR ************
|
|
Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.only(bottom: 8),
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment.topCenter,
|
|
end: Alignment.bottomCenter,
|
|
colors: [
|
|
contentTheme.primary,
|
|
contentTheme.primary.withOpacity(0),
|
|
],
|
|
),
|
|
),
|
|
child: Obx(() => _buildSubHeader(contactRx.value)),
|
|
),
|
|
|
|
// ************ TAB CONTENT ************
|
|
Expanded(
|
|
child: TabBarView(
|
|
controller: _tabController,
|
|
children: [
|
|
Obx(() => _buildDetailsTab(contactRx.value)),
|
|
_buildCommentsTab(),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildSubHeader(ContactModel contact) {
|
|
final firstName = contact.name.split(" ").first;
|
|
final lastName =
|
|
contact.name.split(" ").length > 1 ? contact.name.split(" ").last : "";
|
|
|
|
final Color primaryColor = contentTheme.primary;
|
|
|
|
return Container(
|
|
color: Colors.transparent,
|
|
padding: MySpacing.xy(16, 12),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(children: [
|
|
Avatar(firstName: firstName, lastName: lastName, size: 35),
|
|
MySpacing.width(12),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
MyText.titleSmall(contact.name,
|
|
fontWeight: 600, color: Colors.black),
|
|
MySpacing.height(2),
|
|
MyText.bodySmall(contact.organization,
|
|
fontWeight: 500, color: Colors.grey[700]),
|
|
],
|
|
),
|
|
]),
|
|
MySpacing.height(12),
|
|
// === MODERN PILL-SHAPED TABBAR ===
|
|
Container(
|
|
height: 48,
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(24),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.grey.withOpacity(0.15),
|
|
blurRadius: 4,
|
|
offset: const Offset(0, 2),
|
|
),
|
|
],
|
|
),
|
|
child: TabBar(
|
|
controller: _tabController,
|
|
indicator: BoxDecoration(
|
|
color: primaryColor.withOpacity(0.1),
|
|
borderRadius: BorderRadius.circular(24),
|
|
),
|
|
indicatorSize: TabBarIndicatorSize.tab,
|
|
indicatorPadding:
|
|
const EdgeInsets.symmetric(horizontal: 4.0, vertical: 4.0),
|
|
labelColor: primaryColor,
|
|
unselectedLabelColor: Colors.grey.shade600,
|
|
labelStyle: const TextStyle(
|
|
fontWeight: FontWeight.bold,
|
|
fontSize: 15,
|
|
),
|
|
unselectedLabelStyle: const TextStyle(
|
|
fontWeight: FontWeight.w500,
|
|
fontSize: 15,
|
|
),
|
|
tabs: const [
|
|
Tab(text: "Details"),
|
|
Tab(text: "Notes"),
|
|
],
|
|
dividerColor: Colors.transparent,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
// --- DETAILS TAB ---
|
|
Widget _buildDetailsTab(ContactModel contact) {
|
|
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 ?? "-";
|
|
|
|
Widget multiRows(
|
|
{required List<dynamic> items,
|
|
required IconData icon,
|
|
required String label,
|
|
required String typeLabel,
|
|
required Function(String)? onTap,
|
|
required Function(String)? onLongPress}) {
|
|
return items.isNotEmpty
|
|
? Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
_iconInfoRow(icon, label, items.first,
|
|
onTap: () => onTap?.call(items.first),
|
|
onLongPress: () => onLongPress?.call(items.first)),
|
|
...items.skip(1).map(
|
|
(val) => _iconInfoRow(
|
|
null,
|
|
'',
|
|
val,
|
|
onTap: () => onTap?.call(val),
|
|
onLongPress: () => onLongPress?.call(val),
|
|
),
|
|
),
|
|
],
|
|
)
|
|
: _iconInfoRow(icon, label, "-");
|
|
}
|
|
|
|
return Stack(
|
|
children: [
|
|
SingleChildScrollView(
|
|
padding: MySpacing.fromLTRB(8, 8, 8, 80),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
MySpacing.height(12),
|
|
_infoCard("Basic Info", [
|
|
multiRows(
|
|
items:
|
|
contact.contactEmails.map((e) => e.emailAddress).toList(),
|
|
icon: Icons.email,
|
|
label: "Email",
|
|
typeLabel: "Email",
|
|
onTap: (email) => LauncherUtils.launchEmail(email),
|
|
onLongPress: (email) =>
|
|
LauncherUtils.copyToClipboard(email, typeLabel: "Email"),
|
|
),
|
|
multiRows(
|
|
items:
|
|
contact.contactPhones.map((p) => p.phoneNumber).toList(),
|
|
icon: Icons.phone,
|
|
label: "Phone",
|
|
typeLabel: "Phone",
|
|
onTap: (phone) => LauncherUtils.launchPhone(phone),
|
|
onLongPress: (phone) =>
|
|
LauncherUtils.copyToClipboard(phone, typeLabel: "Phone"),
|
|
),
|
|
_iconInfoRow(Icons.location_on, "Address", contact.address),
|
|
]),
|
|
_infoCard("Organization", [
|
|
_iconInfoRow(
|
|
Icons.business, "Organization", contact.organization),
|
|
_iconInfoRow(Icons.category, "Category", category),
|
|
]),
|
|
_infoCard("Meta Info", [
|
|
_iconInfoRow(Icons.label, "Tags", tags.isNotEmpty ? tags : "-"),
|
|
_iconInfoRow(Icons.folder_shared, "Contact Buckets",
|
|
bucketNames.isNotEmpty ? bucketNames : "-"),
|
|
_iconInfoRow(Icons.work_outline, "Projects", projectNames),
|
|
]),
|
|
_infoCard("Description", [
|
|
MySpacing.height(6),
|
|
Align(
|
|
alignment: Alignment.topLeft,
|
|
child: MyText.bodyMedium(
|
|
contact.description,
|
|
color: Colors.grey[800],
|
|
maxLines: 10,
|
|
textAlign: TextAlign.left,
|
|
),
|
|
),
|
|
]),
|
|
],
|
|
),
|
|
),
|
|
Positioned(
|
|
bottom: 20,
|
|
right: 20,
|
|
child: FloatingActionButton.extended(
|
|
backgroundColor: contentTheme.primary,
|
|
onPressed: () async {
|
|
final result = await Get.bottomSheet(
|
|
AddContactBottomSheet(existingContact: contact),
|
|
isScrollControlled: true,
|
|
backgroundColor: Colors.transparent,
|
|
);
|
|
if (result == true) {
|
|
await directoryController.fetchContacts();
|
|
final updated = directoryController.allContacts
|
|
.firstWhereOrNull((c) => c.id == contact.id);
|
|
if (updated != null) {
|
|
contactRx.value = updated;
|
|
}
|
|
}
|
|
},
|
|
icon: const Icon(Icons.edit, color: Colors.white),
|
|
label: const Text("Edit Contact",
|
|
style: TextStyle(color: Colors.white)),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
// --- COMMENTS TAB ---
|
|
Widget _buildCommentsTab() {
|
|
return Obx(() {
|
|
final contactId = contactRx.value.id;
|
|
|
|
final activeComments = directoryController
|
|
.getCommentsForContact(contactId)
|
|
.where((c) => c.isActive)
|
|
.toList();
|
|
final inactiveComments = directoryController
|
|
.getCommentsForContact(contactId)
|
|
.where((c) => !c.isActive)
|
|
.toList();
|
|
|
|
final comments =
|
|
[...activeComments, ...inactiveComments].reversed.toList();
|
|
final editingId = directoryController.editingCommentId.value;
|
|
|
|
return Stack(
|
|
children: [
|
|
MyRefreshIndicator(
|
|
onRefresh: () async {
|
|
await directoryController.fetchCommentsForContact(contactId,
|
|
active: true);
|
|
await directoryController.fetchCommentsForContact(contactId,
|
|
active: false);
|
|
},
|
|
child: Padding(
|
|
padding: MySpacing.xy(12, 12),
|
|
child: comments.isEmpty
|
|
? Center(
|
|
child:
|
|
MyText.bodyLarge("No notes yet.", color: Colors.grey),
|
|
)
|
|
: ListView.separated(
|
|
physics: const AlwaysScrollableScrollPhysics(),
|
|
padding: const EdgeInsets.only(bottom: 100),
|
|
itemCount: comments.length,
|
|
separatorBuilder: (_, __) => MySpacing.height(14),
|
|
itemBuilder: (_, index) => _buildCommentItem(
|
|
comments[index], editingId, contactId),
|
|
),
|
|
),
|
|
),
|
|
if (editingId == null)
|
|
Positioned(
|
|
bottom: 20,
|
|
right: 20,
|
|
child: FloatingActionButton.extended(
|
|
backgroundColor: contentTheme.primary,
|
|
onPressed: () async {
|
|
final result = await Get.bottomSheet(
|
|
AddCommentBottomSheet(contactId: contactId),
|
|
isScrollControlled: true,
|
|
enableDrag: true,
|
|
);
|
|
|
|
if (result == true) {
|
|
await directoryController.fetchCommentsForContact(contactId,
|
|
active: true);
|
|
await directoryController.fetchCommentsForContact(contactId,
|
|
active: false);
|
|
}
|
|
},
|
|
icon: const Icon(Icons.add_comment, color: Colors.white),
|
|
label: const Text("Add Note",
|
|
style: TextStyle(color: Colors.white)),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
});
|
|
}
|
|
|
|
Widget _buildCommentItem(comment, editingId, contactId) {
|
|
final isEditing = editingId == comment.id;
|
|
final initials = comment.createdBy.firstName.isNotEmpty
|
|
? comment.createdBy.firstName[0].toUpperCase()
|
|
: "?";
|
|
|
|
final textController = TextEditingController(text: comment.note);
|
|
|
|
return Container(
|
|
margin: const EdgeInsets.symmetric(vertical: 6),
|
|
padding: const EdgeInsets.all(12),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(14),
|
|
border: Border.all(color: Colors.grey.shade200),
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black.withOpacity(0.03),
|
|
blurRadius: 6,
|
|
offset: const Offset(0, 2),
|
|
),
|
|
],
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Header: Avatar + Name + Role + Timestamp + Actions
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Avatar(firstName: initials, lastName: '', size: 40),
|
|
const SizedBox(width: 10),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
"${comment.createdBy.firstName} ${comment.createdBy.lastName}",
|
|
style: const TextStyle(
|
|
fontWeight: FontWeight.w700,
|
|
fontSize: 15,
|
|
color: Colors.black87,
|
|
),
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
const SizedBox(height: 2),
|
|
if (comment.createdBy.jobRoleName?.isNotEmpty ?? false)
|
|
Text(
|
|
comment.createdBy.jobRoleName,
|
|
style: TextStyle(
|
|
fontSize: 13,
|
|
color: Colors.indigo[600],
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
const SizedBox(height: 2),
|
|
Text(
|
|
DateTimeUtils.convertUtcToLocal(
|
|
comment.createdAt.toString(),
|
|
format: 'dd MMM yyyy, hh:mm a',
|
|
),
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: Colors.grey[600],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
if (!comment.isActive)
|
|
IconButton(
|
|
icon: const Icon(Icons.restore,
|
|
size: 18, color: Colors.green),
|
|
tooltip: "Restore",
|
|
splashRadius: 18,
|
|
onPressed: () async {
|
|
await Get.dialog(
|
|
ConfirmDialog(
|
|
title: "Restore Note",
|
|
message:
|
|
"Are you sure you want to restore this note?",
|
|
confirmText: "Restore",
|
|
confirmColor: Colors.green,
|
|
icon: Icons.restore,
|
|
onConfirm: () async {
|
|
await directoryController.restoreComment(
|
|
comment.id, contactId);
|
|
},
|
|
),
|
|
);
|
|
},
|
|
),
|
|
if (comment.isActive) ...[
|
|
IconButton(
|
|
icon: const Icon(Icons.edit_outlined,
|
|
size: 18, color: Colors.indigo),
|
|
tooltip: "Edit",
|
|
splashRadius: 18,
|
|
onPressed: () {
|
|
directoryController.editingCommentId.value =
|
|
isEditing ? null : comment.id;
|
|
},
|
|
),
|
|
IconButton(
|
|
icon: const Icon(Icons.delete_outline,
|
|
size: 18, color: Colors.red),
|
|
tooltip: "Delete",
|
|
splashRadius: 18,
|
|
onPressed: () async {
|
|
await Get.dialog(
|
|
ConfirmDialog(
|
|
title: "Delete Note",
|
|
message:
|
|
"Are you sure you want to delete this note?",
|
|
confirmText: "Delete",
|
|
confirmColor: Colors.red,
|
|
icon: Icons.delete_forever,
|
|
onConfirm: () async {
|
|
await directoryController.deleteComment(
|
|
comment.id, contactId);
|
|
},
|
|
),
|
|
);
|
|
},
|
|
),
|
|
],
|
|
],
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 8),
|
|
if (isEditing)
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
TextField(
|
|
controller: textController,
|
|
maxLines: null,
|
|
minLines: 5,
|
|
decoration: InputDecoration(
|
|
hintText: "Edit note...",
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(12)),
|
|
contentPadding: const EdgeInsets.all(12),
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
Row(
|
|
children: [
|
|
Expanded(
|
|
child: ElevatedButton.icon(
|
|
onPressed: () =>
|
|
directoryController.editingCommentId.value = null,
|
|
icon: const Icon(Icons.close, color: Colors.white),
|
|
label: const Text(
|
|
"Cancel",
|
|
style: TextStyle(color: Colors.white),
|
|
),
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: Colors.grey,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
padding: const EdgeInsets.symmetric(vertical: 12),
|
|
),
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: ElevatedButton.icon(
|
|
onPressed: () async {
|
|
final updated =
|
|
comment.copyWith(note: textController.text);
|
|
await directoryController.updateComment(updated);
|
|
await directoryController
|
|
.fetchCommentsForContact(contactId);
|
|
directoryController.editingCommentId.value = null;
|
|
},
|
|
icon: const Icon(Icons.check_circle_outline,
|
|
color: Colors.white),
|
|
label: const Text(
|
|
"Save",
|
|
style: TextStyle(color: Colors.white),
|
|
),
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: contentTheme.primary,
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
padding: const EdgeInsets.symmetric(vertical: 12),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
)
|
|
else
|
|
Text(
|
|
comment.note,
|
|
style: TextStyle(color: Colors.grey[800], fontSize: 14),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _iconInfoRow(
|
|
IconData? icon,
|
|
String label,
|
|
String value, {
|
|
VoidCallback? onTap,
|
|
VoidCallback? onLongPress,
|
|
}) {
|
|
return Padding(
|
|
padding: MySpacing.y(2),
|
|
child: GestureDetector(
|
|
onTap: onTap,
|
|
onLongPress: onLongPress,
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
if (icon != null) ...[
|
|
Icon(icon, size: 22, color: Colors.indigo),
|
|
MySpacing.width(12),
|
|
] else
|
|
const SizedBox(width: 34),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
if (label.isNotEmpty)
|
|
MyText.bodySmall(label,
|
|
fontWeight: 600, color: Colors.black87),
|
|
if (label.isNotEmpty) MySpacing.height(2),
|
|
MyText.bodyMedium(value, color: Colors.grey[800]),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _infoCard(String title, List<Widget> children) {
|
|
return Card(
|
|
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
|
|
elevation: 2,
|
|
margin: MySpacing.bottom(12),
|
|
child: Padding(
|
|
padding: MySpacing.xy(16, 16),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
MyText.titleSmall(title,
|
|
fontWeight: 700, color: Colors.indigo[700]),
|
|
MySpacing.height(8),
|
|
...children,
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|