admin/marco.pms.mobileapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement tabbed navigation and enhance UI for expense and directory views

Browse Source
This commit is contained in:
Vaibhav Surve 2025-09-24 17:16:38 +05:30
parent 85d3dedbef
commit 83d9d0689a
8 changed files with 298 additions and 299 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
lib/model/directory/add_contact_bottom_sheet.dart
View File

@ -412,12 +412,12 @@ class _AddContactBottomSheetState extends State<AddContactBottomSheet> {
MySpacing.height(16), MySpacing.height(16),
_textField("Organization", orgCtrl, required: true), _textField("Organization", orgCtrl, required: true),
MySpacing.height(16), MySpacing.height(16),
MyText.labelMedium("Select Bucket"), MyText.labelMedium(" Bucket"),
MySpacing.height(8), MySpacing.height(8),
Stack( Stack(
children: [ children: [
_popupSelector(controller.selectedBucket, controller.buckets, _popupSelector(controller.selectedBucket, controller.buckets,
"Select Bucket"), "Choose Bucket"),
Positioned( Positioned(
left: 0, left: 0,
right: 0, right: 0,
@ -481,7 +481,7 @@ class _AddContactBottomSheetState extends State<AddContactBottomSheet> {
MyText.labelMedium("Category"), MyText.labelMedium("Category"),
MySpacing.height(8), MySpacing.height(8),
_popupSelector(controller.selectedCategory, _popupSelector(controller.selectedCategory,
controller.categories, "Select Category"), controller.categories, "Choose Category"),
MySpacing.height(16), MySpacing.height(16),
MyText.labelMedium("Tags"), MyText.labelMedium("Tags"),
MySpacing.height(8), MySpacing.height(8),

25
lib/model/document/user_document_filter_bottom_sheet.dart
View File

@ -34,6 +34,7 @@ class UserDocumentFilterBottomSheet extends StatelessWidget {
return BaseBottomSheet( return BaseBottomSheet(
title: 'Filter Documents', title: 'Filter Documents',
submitText: 'Apply',
showButtons: hasFilters, showButtons: hasFilters,
onCancel: () => Get.back(), onCancel: () => Get.back(),
onSubmit: () { onSubmit: () {
@ -108,7 +109,7 @@ class UserDocumentFilterBottomSheet extends StatelessWidget {
), ),
child: Center( child: Center(
child: MyText( child: MyText(
"Uploaded On", "Upload Date",
style: MyTextStyle.bodyMedium( style: MyTextStyle.bodyMedium(
color: color:
docController.isUploadedAt.value docController.isUploadedAt.value
@ -139,7 +140,7 @@ class UserDocumentFilterBottomSheet extends StatelessWidget {
), ),
child: Center( child: Center(
child: MyText( child: MyText(
"Updated On", "Update Date",
style: MyTextStyle.bodyMedium( style: MyTextStyle.bodyMedium(
color: !docController color: !docController
.isUploadedAt.value .isUploadedAt.value
@ -165,7 +166,7 @@ class UserDocumentFilterBottomSheet extends StatelessWidget {
child: Obx(() { child: Obx(() {
return _dateButton( return _dateButton(
label: docController.startDate.value == null label: docController.startDate.value == null
? 'Start Date' ? 'From Date'
: DateTimeUtils.formatDate( : DateTimeUtils.formatDate(
DateTime.parse( DateTime.parse(
docController.startDate.value!), docController.startDate.value!),
@ -191,7 +192,7 @@ class UserDocumentFilterBottomSheet extends StatelessWidget {
child: Obx(() { child: Obx(() {
return _dateButton( return _dateButton(
label: docController.endDate.value == null label: docController.endDate.value == null
? 'End Date' ? 'To Date'
: DateTimeUtils.formatDate( : DateTimeUtils.formatDate(
DateTime.parse( DateTime.parse(
docController.endDate.value!), docController.endDate.value!),
@ -222,39 +223,35 @@ class UserDocumentFilterBottomSheet extends StatelessWidget {
_multiSelectField( _multiSelectField(
label: "Uploaded By", label: "Uploaded By",
items: filterData.uploadedBy, items: filterData.uploadedBy,
fallback: "Select Uploaded By", fallback: "Choose Uploaded By",
selectedValues: docController.selectedUploadedBy, selectedValues: docController.selectedUploadedBy,
), ),
_multiSelectField( _multiSelectField(
label: "Category", label: "Category",
items: filterData.documentCategory, items: filterData.documentCategory,
fallback: "Select Category", fallback: "Choose Category",
selectedValues: docController.selectedCategory, selectedValues: docController.selectedCategory,
), ),
_multiSelectField( _multiSelectField(
label: "Type", label: "Type",
items: filterData.documentType, items: filterData.documentType,
fallback: "Select Type", fallback: "Choose Type",
selectedValues: docController.selectedType, selectedValues: docController.selectedType,
), ),
_multiSelectField( _multiSelectField(
label: "Tag", label: "Tag",
items: filterData.documentTag, items: filterData.documentTag,
fallback: "Select Tag", fallback: "Choose Tag",
selectedValues: docController.selectedTag, selectedValues: docController.selectedTag,
), ),
// --- Document Status --- // --- Document Status ---
_buildField( _buildField(
"Select Document Status", " Document Status",
Obx(() { Obx(() {
return Container( return Container(
padding: MySpacing.all(12), padding: MySpacing.all(12),
decoration: BoxDecoration(
color: Colors.grey.shade100,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.grey.shade300),
),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [

158
lib/view/directory/directory_main_screen.dart
View File

@ -10,16 +10,36 @@ import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/view/directory/directory_view.dart'; import 'package:marco/view/directory/directory_view.dart';
import 'package:marco/view/directory/notes_view.dart'; import 'package:marco/view/directory/notes_view.dart';
class DirectoryMainScreen extends StatelessWidget { class DirectoryMainScreen extends StatefulWidget {
DirectoryMainScreen({super.key}); const DirectoryMainScreen({super.key});
@override
State<DirectoryMainScreen> createState() => _DirectoryMainScreenState();
}
class _DirectoryMainScreenState extends State<DirectoryMainScreen>
with SingleTickerProviderStateMixin {
late TabController _tabController;
final DirectoryController controller = Get.put(DirectoryController()); final DirectoryController controller = Get.put(DirectoryController());
final NotesController notesController = Get.put(NotesController()); final NotesController notesController = Get.put(NotesController());
@override
void initState() {
super.initState();
_tabController = TabController(length: 2, vsync: this);
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
backgroundColor: Colors.white, backgroundColor: const Color(0xFFF5F5F5),
appBar: PreferredSize( appBar: PreferredSize(
preferredSize: const Size.fromHeight(72), preferredSize: const Size.fromHeight(72),
child: AppBar( child: AppBar(
@ -79,116 +99,34 @@ class DirectoryMainScreen extends StatelessWidget {
), ),
), ),
), ),
body: SafeArea( body: Column(
child: Column( children: [
children: [ // ---------------- TabBar ----------------
// Toggle between Directory and Notes Container(
Padding( color: Colors.white,
padding: MySpacing.fromLTRB(8, 12, 8, 5), child: TabBar(
child: Obx(() { controller: _tabController,
final isNotesView = controller.isNotesView.value; labelColor: Colors.black,
unselectedLabelColor: Colors.grey,
return Container( indicatorColor: Colors.red,
padding: EdgeInsets.all(2), tabs: const [
decoration: BoxDecoration( Tab(text: "Directory"),
color: const Color(0xFFF0F0F0), Tab(text: "Notes"),
borderRadius: BorderRadius.circular(10), ],
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 4,
offset: const Offset(0, 2),
),
],
),
child: Row(
children: [
Expanded(
child: GestureDetector(
onTap: () => controller.isNotesView.value = false,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
padding: const EdgeInsets.symmetric(
vertical: 6, horizontal: 10),
decoration: BoxDecoration(
color: !isNotesView
? Colors.red
: Colors.transparent,
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.contacts,
size: 16,
color: !isNotesView
? Colors.white
: Colors.grey),
const SizedBox(width: 6),
Text(
'Directory',
style: TextStyle(
color: !isNotesView
? Colors.white
: Colors.grey,
fontWeight: FontWeight.w600,
fontSize: 13,
),
),
],
),
),
),
),
Expanded(
child: GestureDetector(
onTap: () => controller.isNotesView.value = true,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
padding: const EdgeInsets.symmetric(
vertical: 6, horizontal: 10),
decoration: BoxDecoration(
color:
isNotesView ? Colors.red : Colors.transparent,
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.notes,
size: 16,
color: isNotesView
? Colors.white
: Colors.grey),
const SizedBox(width: 6),
Text(
'Notes',
style: TextStyle(
color: isNotesView
? Colors.white
: Colors.grey,
fontWeight: FontWeight.w600,
fontSize: 13,
),
),
],
),
),
),
),
],
),
);
}),
), ),
),
// Main View // ---------------- TabBarView ----------------
Expanded( Expanded(
child: Obx(() => child: TabBarView(
controller.isNotesView.value ? NotesView() : DirectoryView()), controller: _tabController,
children: [
DirectoryView(),
NotesView(),
],
), ),
], ),
), ],
), ),
); );
} }

61
lib/view/directory/directory_view.dart
View File

@ -144,15 +144,38 @@ class _DirectoryViewState extends State<DirectoryView> {
); );
} }
Widget _buildEmptyState() {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.perm_contact_cal, size: 60, color: Colors.grey),
MySpacing.height(18),
MyText.titleMedium(
'No matching contacts found.',
fontWeight: 600,
color: Colors.grey,
),
MySpacing.height(10),
MyText.bodySmall(
'Try adjusting your filters or refresh to reload.',
color: Colors.grey,
),
],
),
);
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
backgroundColor: Colors.white, backgroundColor: Colors.grey[100],
floatingActionButton: FloatingActionButton( floatingActionButton: FloatingActionButton.extended(
heroTag: 'createContact', heroTag: 'createContact',
backgroundColor: Colors.red, backgroundColor: Colors.red,
onPressed: _handleCreateContact, onPressed: _handleCreateContact,
child: const Icon(Icons.person_add_alt_1, color: Colors.white), icon: const Icon(Icons.person_add_alt_1, color: Colors.white),
label: const Text("Add Contact", style: TextStyle(color: Colors.white)),
), ),
body: Column( body: Column(
children: [ children: [
@ -195,11 +218,11 @@ class _DirectoryViewState extends State<DirectoryView> {
filled: true, filled: true,
fillColor: Colors.white, fillColor: Colors.white,
border: OutlineInputBorder( border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(5),
borderSide: BorderSide(color: Colors.grey.shade300), borderSide: BorderSide(color: Colors.grey.shade300),
), ),
enabledBorder: OutlineInputBorder( enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(5),
borderSide: BorderSide(color: Colors.grey.shade300), borderSide: BorderSide(color: Colors.grey.shade300),
), ),
), ),
@ -217,7 +240,7 @@ class _DirectoryViewState extends State<DirectoryView> {
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Colors.white,
border: Border.all(color: Colors.grey.shade300), border: Border.all(color: Colors.grey.shade300),
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(5),
), ),
child: IconButton( child: IconButton(
icon: Icon(Icons.tune, icon: Icon(Icons.tune,
@ -262,14 +285,14 @@ class _DirectoryViewState extends State<DirectoryView> {
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Colors.white,
border: Border.all(color: Colors.grey.shade300), border: Border.all(color: Colors.grey.shade300),
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(5),
), ),
child: PopupMenuButton<int>( child: PopupMenuButton<int>(
padding: EdgeInsets.zero, padding: EdgeInsets.zero,
icon: const Icon(Icons.more_vert, icon: const Icon(Icons.more_vert,
size: 20, color: Colors.black87), size: 20, color: Colors.black87),
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(5),
), ),
itemBuilder: (context) { itemBuilder: (context) {
List<PopupMenuEntry<int>> menuItems = []; List<PopupMenuEntry<int>> menuItems = [];
@ -412,27 +435,7 @@ class _DirectoryViewState extends State<DirectoryView> {
SkeletonLoaders.contactSkeletonCard(), SkeletonLoaders.contactSkeletonCard(),
) )
: controller.filteredContacts.isEmpty : controller.filteredContacts.isEmpty
? ListView( ? _buildEmptyState()
physics: const AlwaysScrollableScrollPhysics(),
children: [
SizedBox(
height:
MediaQuery.of(context).size.height * 0.6,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.contact_page_outlined,
size: 60, color: Colors.grey),
const SizedBox(height: 12),
MyText.bodyMedium('No contacts found.',
fontWeight: 500),
],
),
),
),
],
)
: ListView.separated( : ListView.separated(
physics: const AlwaysScrollableScrollPhysics(), physics: const AlwaysScrollableScrollPhysics(),
padding: MySpacing.only( padding: MySpacing.only(

58
lib/view/directory/notes_view.dart
View File

@ -71,6 +71,28 @@ class NotesView extends StatelessWidget {
return buffer.toString(); return buffer.toString();
} }
Widget _buildEmptyState() {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.perm_contact_cal, size: 60, color: Colors.grey),
MySpacing.height(18),
MyText.titleMedium(
'No matching notes found.',
fontWeight: 600,
color: Colors.grey,
),
MySpacing.height(10),
MyText.bodySmall(
'Try adjusting your filters or refresh to reload.',
color: Colors.grey,
),
],
),
);
}
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Column( return Column(
@ -94,17 +116,17 @@ class NotesView extends StatelessWidget {
filled: true, filled: true,
fillColor: Colors.white, fillColor: Colors.white,
border: OutlineInputBorder( border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(5),
borderSide: BorderSide(color: Colors.grey.shade300), borderSide: BorderSide(color: Colors.grey.shade300),
), ),
enabledBorder: OutlineInputBorder( enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(5),
borderSide: BorderSide(color: Colors.grey.shade300), borderSide: BorderSide(color: Colors.grey.shade300),
), ),
), ),
), ),
), ),
), ),
], ],
), ),
), ),
@ -121,25 +143,19 @@ class NotesView extends StatelessWidget {
if (notes.isEmpty) { if (notes.isEmpty) {
return MyRefreshIndicator( return MyRefreshIndicator(
onRefresh: _refreshNotes, onRefresh: _refreshNotes,
child: ListView( child: LayoutBuilder(
physics: const AlwaysScrollableScrollPhysics(), builder: (context, constraints) {
children: [ return SingleChildScrollView(
SizedBox( physics: const AlwaysScrollableScrollPhysics(),
height: MediaQuery.of(context).size.height * 0.6, child: ConstrainedBox(
child: Center( constraints:
child: Column( BoxConstraints(minHeight: constraints.maxHeight),
mainAxisAlignment: MainAxisAlignment.center, child: Center(
children: [ child: _buildEmptyState(),
const Icon(Icons.note_alt_outlined,
size: 60, color: Colors.grey),
const SizedBox(height: 12),
MyText.bodyMedium('No notes found.',
fontWeight: 500),
],
), ),
), ),
), );
], },
), ),
); );
} }
@ -193,7 +209,7 @@ class NotesView extends StatelessWidget {
isEditing ? Colors.indigo : Colors.grey.shade300, isEditing ? Colors.indigo : Colors.grey.shade300,
width: 1.1, width: 1.1,
), ),
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(5),
boxShadow: const [ boxShadow: const [
BoxShadow( BoxShadow(
color: Colors.black12, color: Colors.black12,

45
lib/view/document/user_document_screen.dart
View File

@ -98,7 +98,7 @@ class _UserDocumentsPageState extends State<UserDocumentsPage> {
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10), padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Colors.white,
borderRadius: BorderRadius.circular(12), borderRadius: BorderRadius.circular(5),
boxShadow: [ boxShadow: [
BoxShadow( BoxShadow(
color: Colors.black.withOpacity(0.05), color: Colors.black.withOpacity(0.05),
@ -114,7 +114,7 @@ class _UserDocumentsPageState extends State<UserDocumentsPage> {
padding: const EdgeInsets.all(10), padding: const EdgeInsets.all(10),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.blue.shade50, color: Colors.blue.shade50,
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(5),
), ),
child: const Icon(Icons.description, color: Colors.blue), child: const Icon(Icons.description, color: Colors.blue),
), ),
@ -190,7 +190,7 @@ class _UserDocumentsPageState extends State<UserDocumentsPage> {
if (result == true) { if (result == true) {
debugPrint("✅ Document deleted and removed from list"); debugPrint("✅ Document deleted and removed from list");
} }
} else if (value == "activate") { } else if (value == "restore") {
// existing activate flow (unchanged) // existing activate flow (unchanged)
final success = await docController.toggleDocumentActive( final success = await docController.toggleDocumentActive(
doc.id, doc.id,
@ -201,14 +201,14 @@ class _UserDocumentsPageState extends State<UserDocumentsPage> {
if (success) { if (success) {
showAppSnackbar( showAppSnackbar(
title: "Reactivated", title: "Restored",
message: "Document reactivated successfully", message: "Document reastored successfully",
type: SnackbarType.success, type: SnackbarType.success,
); );
} else { } else {
showAppSnackbar( showAppSnackbar(
title: "Error", title: "Error",
message: "Failed to reactivate document", message: "Failed to restore document",
type: SnackbarType.error, type: SnackbarType.error,
); );
} }
@ -226,8 +226,8 @@ class _UserDocumentsPageState extends State<UserDocumentsPage> {
permissionController permissionController
.hasPermission(Permissions.modifyDocument)) .hasPermission(Permissions.modifyDocument))
const PopupMenuItem( const PopupMenuItem(
value: "activate", value: "restore",
child: Text("Activate"), child: Text("Restore"),
), ),
], ],
), ),
@ -307,11 +307,11 @@ class _UserDocumentsPageState extends State<UserDocumentsPage> {
filled: true, filled: true,
fillColor: Colors.white, fillColor: Colors.white,
border: OutlineInputBorder( border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(5),
borderSide: BorderSide(color: Colors.grey.shade300), borderSide: BorderSide(color: Colors.grey.shade300),
), ),
enabledBorder: OutlineInputBorder( enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(5),
borderSide: BorderSide(color: Colors.grey.shade300), borderSide: BorderSide(color: Colors.grey.shade300),
), ),
), ),
@ -331,7 +331,7 @@ class _UserDocumentsPageState extends State<UserDocumentsPage> {
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Colors.white,
border: Border.all(color: Colors.grey.shade300), border: Border.all(color: Colors.grey.shade300),
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(5),
), ),
child: IconButton( child: IconButton(
padding: EdgeInsets.zero, padding: EdgeInsets.zero,
@ -345,9 +345,10 @@ class _UserDocumentsPageState extends State<UserDocumentsPage> {
showModalBottomSheet( showModalBottomSheet(
context: context, context: context,
isScrollControlled: true, isScrollControlled: true,
shape: const RoundedRectangleBorder( shape: const RoundedRectangleBorder(
borderRadius: borderRadius:
BorderRadius.vertical(top: Radius.circular(20)), BorderRadius.vertical(top: Radius.circular(5)),
), ),
builder: (_) => UserDocumentFilterBottomSheet( builder: (_) => UserDocumentFilterBottomSheet(
entityId: resolvedEntityId, entityId: resolvedEntityId,
@ -382,14 +383,14 @@ class _UserDocumentsPageState extends State<UserDocumentsPage> {
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.white, color: Colors.white,
border: Border.all(color: Colors.grey.shade300), border: Border.all(color: Colors.grey.shade300),
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(5),
), ),
child: PopupMenuButton<int>( child: PopupMenuButton<int>(
padding: EdgeInsets.zero, padding: EdgeInsets.zero,
icon: icon:
const Icon(Icons.more_vert, size: 20, color: Colors.black87), const Icon(Icons.more_vert, size: 20, color: Colors.black87),
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(5),
), ),
itemBuilder: (context) => [ itemBuilder: (context) => [
const PopupMenuItem<int>( const PopupMenuItem<int>(
@ -411,7 +412,7 @@ class _UserDocumentsPageState extends State<UserDocumentsPage> {
const Icon(Icons.visibility_off_outlined, const Icon(Icons.visibility_off_outlined,
size: 20, color: Colors.black87), size: 20, color: Colors.black87),
const SizedBox(width: 10), const SizedBox(width: 10),
const Expanded(child: Text('Show Inactive')), const Expanded(child: Text('Show Deleted Documents')),
Switch.adaptive( Switch.adaptive(
value: docController.showInactive.value, value: docController.showInactive.value,
activeColor: Colors.indigo, activeColor: Colors.indigo,
@ -439,24 +440,24 @@ class _UserDocumentsPageState extends State<UserDocumentsPage> {
Widget _buildStatusHeader() { Widget _buildStatusHeader() {
return Obx(() { return Obx(() {
final isInactive = docController.showInactive.value; final isInactive = docController.showInactive.value;
if (!isInactive) return const SizedBox.shrink(); // hide when active
return Container( return Container(
width: double.infinity, width: double.infinity,
padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16), padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
color: isInactive ? Colors.red.shade50 : Colors.green.shade50, color: Colors.red.shade50,
child: Row( child: Row(
children: [ children: [
Icon( Icon(
isInactive ? Icons.visibility_off : Icons.check_circle, Icons.visibility_off,
color: isInactive ? Colors.red : Colors.green, color: Colors.red,
size: 18, size: 18,
), ),
const SizedBox(width: 8), const SizedBox(width: 8),
Text( Text(
isInactive "Showing Deleted Documents",
? "Showing Inactive Documents"
: "Showing Active Documents",
style: TextStyle( style: TextStyle(
color: isInactive ? Colors.red : Colors.green, color: Colors.red,
fontWeight: FontWeight.w600, fontWeight: FontWeight.w600,
), ),
), ),

34
lib/view/expense/expense_detail_screen.dart
View File

@ -21,6 +21,7 @@ import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/helpers/services/storage/local_storage.dart'; import 'package:marco/helpers/services/storage/local_storage.dart';
import 'package:marco/model/employees/employee_info.dart'; import 'package:marco/model/employees/employee_info.dart';
import 'package:timeline_tile/timeline_tile.dart'; import 'package:timeline_tile/timeline_tile.dart';
class ExpenseDetailScreen extends StatefulWidget { class ExpenseDetailScreen extends StatefulWidget {
final String expenseId; final String expenseId;
const ExpenseDetailScreen({super.key, required this.expenseId}); const ExpenseDetailScreen({super.key, required this.expenseId});
@ -105,7 +106,7 @@ class _ExpenseDetailScreenState extends State<ExpenseDetailScreen> {
constraints: const BoxConstraints(maxWidth: 520), constraints: const BoxConstraints(maxWidth: 520),
child: Card( child: Card(
shape: RoundedRectangleBorder( shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)), borderRadius: BorderRadius.circular(5)),
elevation: 3, elevation: 3,
child: Padding( child: Padding(
padding: const EdgeInsets.symmetric( padding: const EdgeInsets.symmetric(
@ -123,14 +124,12 @@ class _ExpenseDetailScreenState extends State<ExpenseDetailScreen> {
const Divider(height: 30, thickness: 1.2), const Divider(height: 30, thickness: 1.2),
_InvoiceDocuments(documents: expense.documents), _InvoiceDocuments(documents: expense.documents),
const Divider(height: 30, thickness: 1.2), const Divider(height: 30, thickness: 1.2),
_InvoiceTotals( _InvoiceTotals(
expense: expense, expense: expense,
formattedAmount: formattedAmount, formattedAmount: formattedAmount,
statusColor: statusColor, statusColor: statusColor,
), ),
const Divider(height: 30, thickness: 1.2), const Divider(height: 30, thickness: 1.2),
], ],
), ),
), ),
@ -160,7 +159,7 @@ class _ExpenseDetailScreenState extends State<ExpenseDetailScreen> {
return const SizedBox.shrink(); return const SizedBox.shrink();
} }
return FloatingActionButton( return FloatingActionButton.extended(
onPressed: () async { onPressed: () async {
final editData = { final editData = {
'id': expense.id, 'id': expense.id,
@ -197,8 +196,9 @@ class _ExpenseDetailScreenState extends State<ExpenseDetailScreen> {
await controller.fetchExpenseDetails(); await controller.fetchExpenseDetails();
}, },
backgroundColor: Colors.red, backgroundColor: Colors.red,
tooltip: 'Edit Expense', icon: const Icon(Icons.edit),
child: const Icon(Icons.edit), label: MyText.bodyMedium(
"Edit Expense", fontWeight: 600, color: Colors.white),
); );
}), }),
bottomNavigationBar: Obx(() { bottomNavigationBar: Obx(() {
@ -271,7 +271,7 @@ class _ExpenseDetailScreenState extends State<ExpenseDetailScreen> {
minimumSize: const Size(100, 40), minimumSize: const Size(100, 40),
padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12), padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 12),
backgroundColor: buttonColor, backgroundColor: buttonColor,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
), ),
onPressed: () async { onPressed: () async {
const reimbursementId = 'f18c5cfd-7815-4341-8da2-2c2d65778e27'; const reimbursementId = 'f18c5cfd-7815-4341-8da2-2c2d65778e27';
@ -280,7 +280,7 @@ class _ExpenseDetailScreenState extends State<ExpenseDetailScreen> {
context: context, context: context,
isScrollControlled: true, isScrollControlled: true,
shape: const RoundedRectangleBorder( shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.vertical(top: Radius.circular(16))), borderRadius: BorderRadius.vertical(top: Radius.circular(5))),
builder: (context) => ReimbursementBottomSheet( builder: (context) => ReimbursementBottomSheet(
expenseId: expense.id, expenseId: expense.id,
statusId: next.id, statusId: next.id,
@ -470,7 +470,7 @@ class _InvoiceHeader extends StatelessWidget {
Container( Container(
decoration: BoxDecoration( decoration: BoxDecoration(
color: statusColor.withOpacity(0.15), color: statusColor.withOpacity(0.15),
borderRadius: BorderRadius.circular(8)), borderRadius: BorderRadius.circular(5)),
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4), padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
child: Row( child: Row(
children: [ children: [
@ -604,7 +604,7 @@ class _InvoiceDocuments extends StatelessWidget {
const EdgeInsets.symmetric(horizontal: 12, vertical: 8), const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration( decoration: BoxDecoration(
border: Border.all(color: Colors.grey.shade300), border: Border.all(color: Colors.grey.shade300),
borderRadius: BorderRadius.circular(6), borderRadius: BorderRadius.circular(5),
color: Colors.grey.shade100, color: Colors.grey.shade100,
), ),
child: Row( child: Row(
@ -679,7 +679,8 @@ class InvoiceLogs extends StatelessWidget {
), ),
), ),
), ),
beforeLineStyle: LineStyle(color: Colors.grey.shade300, thickness: 2), beforeLineStyle:
LineStyle(color: Colors.grey.shade300, thickness: 2),
endChild: Padding( endChild: Padding(
padding: const EdgeInsets.all(12.0), padding: const EdgeInsets.all(12.0),
child: Column( child: Column(
@ -698,17 +699,20 @@ class InvoiceLogs extends StatelessWidget {
const SizedBox(height: 8), const SizedBox(height: 8),
Row( Row(
children: [ children: [
Icon(Icons.access_time, size: 14, color: Colors.grey[600]), Icon(Icons.access_time,
size: 14, color: Colors.grey[600]),
const SizedBox(width: 4), const SizedBox(width: 4),
MyText.bodySmall(formattedDate, color: Colors.grey[700]), MyText.bodySmall(formattedDate,
color: Colors.grey[700]),
], ],
), ),
const SizedBox(height: 8), const SizedBox(height: 8),
Container( Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4), padding: const EdgeInsets.symmetric(
horizontal: 12, vertical: 4),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.blue.shade50, color: Colors.blue.shade50,
borderRadius: BorderRadius.circular(6), borderRadius: BorderRadius.circular(5),
), ),
child: MyText.bodySmall( child: MyText.bodySmall(
log.action, log.action,

210
lib/view/expense/expense_screen.dart
View File

@ -20,8 +20,9 @@ class ExpenseMainScreen extends StatefulWidget {
State<ExpenseMainScreen> createState() => _ExpenseMainScreenState(); State<ExpenseMainScreen> createState() => _ExpenseMainScreenState();
} }
class _ExpenseMainScreenState extends State<ExpenseMainScreen> { class _ExpenseMainScreenState extends State<ExpenseMainScreen>
bool isHistoryView = false; with SingleTickerProviderStateMixin {
late TabController _tabController;
final searchController = TextEditingController(); final searchController = TextEditingController();
final expenseController = Get.put(ExpenseController()); final expenseController = Get.put(ExpenseController());
final projectController = Get.find<ProjectController>(); final projectController = Get.find<ProjectController>();
@ -30,9 +31,16 @@ class _ExpenseMainScreenState extends State<ExpenseMainScreen> {
@override @override
void initState() { void initState() {
super.initState(); super.initState();
_tabController = TabController(length: 2, vsync: this);
expenseController.fetchExpenses(); expenseController.fetchExpenses();
} }
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
Future<void> _refreshExpenses() async { Future<void> _refreshExpenses() async {
await expenseController.fetchExpenses(); await expenseController.fetchExpenses();
} }
@ -49,7 +57,7 @@ class _ExpenseMainScreenState extends State<ExpenseMainScreen> {
); );
} }
List<ExpenseModel> _getFilteredExpenses() { List<ExpenseModel> _getFilteredExpenses({required bool isHistory}) {
final query = searchController.text.trim().toLowerCase(); final query = searchController.text.trim().toLowerCase();
final now = DateTime.now(); final now = DateTime.now();
@ -61,7 +69,7 @@ class _ExpenseMainScreenState extends State<ExpenseMainScreen> {
}).toList() }).toList()
..sort((a, b) => b.transactionDate.compareTo(a.transactionDate)); ..sort((a, b) => b.transactionDate.compareTo(a.transactionDate));
return isHistoryView return isHistory
? filtered ? filtered
.where((e) => .where((e) =>
e.transactionDate.isBefore(DateTime(now.year, now.month))) e.transactionDate.isBefore(DateTime(now.year, now.month)))
@ -72,89 +80,121 @@ class _ExpenseMainScreenState extends State<ExpenseMainScreen> {
e.transactionDate.year == now.year) e.transactionDate.year == now.year)
.toList(); .toList();
} }
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Scaffold( return Scaffold(
backgroundColor: Colors.white, backgroundColor: Colors.white,
appBar: ExpenseAppBar(projectController: projectController), appBar: ExpenseAppBar(projectController: projectController),
body: SafeArea( body: Column(
child: Column( children: [
children: [ // ---------------- TabBar ----------------
SearchAndFilter( Container(
controller: searchController, color: Colors.white,
onChanged: (_) => setState(() {}), child: TabBar(
onFilterTap: _openFilterBottomSheet, controller: _tabController,
expenseController: expenseController, labelColor: Colors.black,
), unselectedLabelColor: Colors.grey,
ToggleButtonsRow( indicatorColor: Colors.red,
isHistoryView: isHistoryView, tabs: const [
onToggle: (v) => setState(() => isHistoryView = v), Tab(text: "Current Month"),
), Tab(text: "History"),
Expanded( ],
child: Obx(() { ),
// Loader while fetching first time
if (expenseController.isLoading.value &&
expenseController.expenses.isEmpty) {
return SkeletonLoaders.expenseListSkeletonLoader();
}
final filteredList = _getFilteredExpenses();
return MyRefreshIndicator(
onRefresh: _refreshExpenses,
child: filteredList.isEmpty
? ListView(
physics:
const AlwaysScrollableScrollPhysics(),
children: [
SizedBox(
height: MediaQuery.of(context).size.height * 0.5,
child: Center(
child: MyText.bodyMedium(
expenseController.errorMessage.isNotEmpty
? expenseController.errorMessage.value
: "No expenses found",
color:
expenseController.errorMessage.isNotEmpty
? Colors.red
: Colors.grey,
),
),
),
],
)
: NotificationListener<ScrollNotification>(
onNotification: (scrollInfo) {
if (scrollInfo.metrics.pixels ==
scrollInfo.metrics.maxScrollExtent &&
!expenseController.isLoading.value) {
expenseController.loadMoreExpenses();
}
return false;
},
child: ExpenseList(
expenseList: filteredList,
onViewDetail: () =>
expenseController.fetchExpenses(),
),
),
);
}),
)
],
), ),
),
// ✅ FAB only if user has expenseUpload permission // ---------------- Gray background for rest ----------------
floatingActionButton: Expanded(
permissionController.hasPermission(Permissions.expenseUpload) child: Container(
? FloatingActionButton( color: Colors.grey[100], // Light gray background
backgroundColor: Colors.red, child: Column(
onPressed: showAddExpenseBottomSheet, children: [
child: const Icon(Icons.add, color: Colors.white), // ---------------- Search ----------------
) Padding(
: null, padding: const EdgeInsets.symmetric(horizontal: 0, vertical: 0),
); child: SearchAndFilter(
controller: searchController,
onChanged: (_) => setState(() {}),
onFilterTap: _openFilterBottomSheet,
expenseController: expenseController,
),
),
// ---------------- TabBarView ----------------
Expanded(
child: TabBarView(
controller: _tabController,
children: [
_buildExpenseList(isHistory: false),
_buildExpenseList(isHistory: true),
],
),
),
],
),
),
),
],
),
floatingActionButton:
permissionController.hasPermission(Permissions.expenseUpload)
? FloatingActionButton(
backgroundColor: Colors.red,
onPressed: showAddExpenseBottomSheet,
child: const Icon(Icons.add, color: Colors.white),
)
: null,
);
}
Widget _buildExpenseList({required bool isHistory}) {
return Obx(() {
if (expenseController.isLoading.value &&
expenseController.expenses.isEmpty) {
return SkeletonLoaders.expenseListSkeletonLoader();
}
final filteredList = _getFilteredExpenses(isHistory: isHistory);
return MyRefreshIndicator(
onRefresh: _refreshExpenses,
child: filteredList.isEmpty
? ListView(
physics: const AlwaysScrollableScrollPhysics(),
children: [
SizedBox(
height: MediaQuery.of(context).size.height * 0.5,
child: Center(
child: MyText.bodyMedium(
expenseController.errorMessage.isNotEmpty
? expenseController.errorMessage.value
: "No expenses found",
color: expenseController.errorMessage.isNotEmpty
? Colors.red
: Colors.grey,
),
),
),
],
)
: NotificationListener<ScrollNotification>(
onNotification: (scrollInfo) {
if (scrollInfo.metrics.pixels ==
scrollInfo.metrics.maxScrollExtent &&
!expenseController.isLoading.value) {
expenseController.loadMoreExpenses();
}
return false;
},
child: ExpenseList(
expenseList: filteredList,
onViewDetail: () => expenseController.fetchExpenses(),
),
),
);
});
} }
} }