feat: Add Monthly Expense Dashboard Chart and related data models

lib/controller/attendance/attendance_screen_controller.dart

@@ -50,12 +50,6 @@ class AttendanceController extends GetxController {
   void onInit() {
     super.onInit();
     _initializeDefaults();
-
-    // 🔹 Fetch organizations for the selected project
-    final projectId = Get.find<ProjectController>().selectedProject?.id;
-    if (projectId != null) {
-      fetchOrganizations(projectId);
-    }
   }
 
   void _initializeDefaults() {

lib/controller/dashboard/dashboard_controller.dart

@@ -5,6 +5,8 @@ import 'package:marco/controller/project_controller.dart';
 import 'package:marco/model/dashboard/project_progress_model.dart';
 import 'package:marco/model/dashboard/pending_expenses_model.dart';
 import 'package:marco/model/dashboard/expense_type_report_model.dart';
+import 'package:marco/model/dashboard/monthly_expence_model.dart';
+import 'package:marco/model/expense/expense_type_model.dart';
 
 class DashboardController extends GetxController {
   // =========================
@@ -49,7 +51,7 @@ class DashboardController extends GetxController {
   final List<String> ranges = ['7D', '15D', '30D'];
 
   // Inject ProjectController
-  final ProjectController projectController = Get.find<ProjectController>();
+  final ProjectController projectController = Get.put(ProjectController());
 // Pending Expenses overview
 // =========================
   final RxBool isPendingExpensesLoading = false.obs;
@@ -61,10 +63,37 @@ class DashboardController extends GetxController {
   final RxBool isExpenseTypeReportLoading = false.obs;
   final Rx<ExpenseTypeReportData?> expenseTypeReportData =
       Rx<ExpenseTypeReportData?>(null);
- final Rx<DateTime> expenseReportStartDate = 
+  final Rx<DateTime> expenseReportStartDate =
-    DateTime.now().subtract(const Duration(days: 15)).obs;
+      DateTime.now().subtract(const Duration(days: 15)).obs;
-final Rx<DateTime> expenseReportEndDate = DateTime.now().obs;
+  final Rx<DateTime> expenseReportEndDate = DateTime.now().obs;
+  // =========================
+  // Monthly Expense Report
+  // =========================
+  final RxBool isMonthlyExpenseLoading = false.obs;
+  final RxList<MonthlyExpenseData> monthlyExpenseList =
+      <MonthlyExpenseData>[].obs;
+  // =========================
+  // Monthly Expense Report Filters
+  // =========================
+  final Rx<MonthlyExpenseDuration> selectedMonthlyExpenseDuration =
+      MonthlyExpenseDuration.twelveMonths.obs;
 
+  final RxInt selectedMonthsCount = 12.obs;
+  final RxList<ExpenseTypeModel> expenseTypes = <ExpenseTypeModel>[].obs;
+  final Rx<ExpenseTypeModel?> selectedExpenseType = Rx<ExpenseTypeModel?>(null);
+
+  void updateSelectedExpenseType(ExpenseTypeModel? type) {
+    selectedExpenseType.value = type;
+
+    // Debug print to verify
+    print('Selected: ${type?.name ?? "All Types"}');
+
+    if (type == null) {
+      fetchMonthlyExpenses();
+    } else {
+      fetchMonthlyExpenses(categoryId: type.id);
+    }
+  }
 
   @override
   void onInit() {
@@ -173,10 +202,84 @@ final Rx<DateTime> expenseReportEndDate = DateTime.now().obs;
       fetchExpenseTypeReport(
         startDate: expenseReportStartDate.value,
         endDate: expenseReportEndDate.value,
-      )
+      ),
+      fetchMonthlyExpenses(),
+      fetchMasterData()
     ]);
   }
 
+  void updateMonthlyExpenseDuration(MonthlyExpenseDuration duration) {
+    selectedMonthlyExpenseDuration.value = duration;
+
+    // Set months count based on selection
+    switch (duration) {
+      case MonthlyExpenseDuration.oneMonth:
+        selectedMonthsCount.value = 1;
+        break;
+      case MonthlyExpenseDuration.threeMonths:
+        selectedMonthsCount.value = 3;
+        break;
+      case MonthlyExpenseDuration.sixMonths:
+        selectedMonthsCount.value = 6;
+        break;
+      case MonthlyExpenseDuration.twelveMonths:
+        selectedMonthsCount.value = 12;
+        break;
+      case MonthlyExpenseDuration.all:
+        selectedMonthsCount.value = 0; // 0 = All months in your API
+        break;
+    }
+
+    // Re-fetch updated data
+    fetchMonthlyExpenses();
+  }
+
+  Future<void> fetchMasterData() async {
+    try {
+      final expenseTypesData = await ApiService.getMasterExpenseTypes();
+      if (expenseTypesData is List) {
+        expenseTypes.value =
+            expenseTypesData.map((e) => ExpenseTypeModel.fromJson(e)).toList();
+      }
+    } catch (e) {
+      logSafe('Error fetching master data', level: LogLevel.error, error: e);
+    }
+  }
+
+  Future<void> fetchMonthlyExpenses({String? categoryId}) async {
+    try {
+      isMonthlyExpenseLoading.value = true;
+
+      int months = selectedMonthsCount.value;
+      logSafe(
+        'Fetching Monthly Expense Report for last $months months'
+        '${categoryId != null ? ' (categoryId: $categoryId)' : ''}',
+        level: LogLevel.info,
+      );
+
+      final response = await ApiService.getDashboardMonthlyExpensesApi(
+        categoryId: categoryId,
+        months: months,
+      );
+
+      if (response != null && response.success) {
+        monthlyExpenseList.value = response.data;
+        logSafe('Monthly Expense Report fetched successfully.',
+            level: LogLevel.info);
+      } else {
+        monthlyExpenseList.clear();
+        logSafe('Failed to fetch Monthly Expense Report.',
+            level: LogLevel.error);
+      }
+    } catch (e, st) {
+      monthlyExpenseList.clear();
+      logSafe('Error fetching Monthly Expense Report',
+          level: LogLevel.error, error: e, stackTrace: st);
+    } finally {
+      isMonthlyExpenseLoading.value = false;
+    }
+  }
+
   Future<void> fetchPendingExpenses() async {
     final String projectId = projectController.selectedProjectId.value;
     if (projectId.isEmpty) return;
@@ -345,3 +448,11 @@ final Rx<DateTime> expenseReportEndDate = DateTime.now().obs;
     }
   }
 }
+
+enum MonthlyExpenseDuration {
+  oneMonth,
+  threeMonths,
+  sixMonths,
+  twelveMonths,
+  all,
+}

lib/helpers/services/api_service.dart

@@ -21,6 +21,7 @@ import 'package:marco/model/document/document_version_model.dart';
 import 'package:marco/model/attendance/organization_per_project_list_model.dart';
 import 'package:marco/model/dashboard/pending_expenses_model.dart';
 import 'package:marco/model/dashboard/expense_type_report_model.dart';
+import 'package:marco/model/dashboard/monthly_expence_model.dart';
 
 class ApiService {
   static const bool enableLogs = true;
@@ -290,6 +291,48 @@ class ApiService {
     }
   }
 
+  /// Get Monthly Expense Report (categoryId is optional)
+  static Future<DashboardMonthlyExpenseResponse?>
+      getDashboardMonthlyExpensesApi({
+    String? categoryId,
+    int months = 12,
+  }) async {
+    const endpoint = ApiEndpoints.getDashboardMonthlyExpenses;
+    logSafe("Fetching Dashboard Monthly Expenses for last $months months");
+
+    try {
+      final queryParams = {
+        'months': months.toString(),
+        if (categoryId != null && categoryId.isNotEmpty)
+          'categoryId': categoryId,
+      };
+
+      final response = await _getRequest(
+        endpoint,
+        queryParams: queryParams,
+      );
+
+      if (response == null) {
+        logSafe("Monthly Expense request failed: null response",
+            level: LogLevel.error);
+        return null;
+      }
+
+      final jsonResponse = _parseResponseForAllData(response,
+          label: "Dashboard Monthly Expenses");
+
+      if (jsonResponse != null) {
+        return DashboardMonthlyExpenseResponse.fromJson(jsonResponse);
+      }
+    } catch (e, stack) {
+      logSafe("Exception during getDashboardMonthlyExpensesApi: $e",
+          level: LogLevel.error);
+      logSafe("StackTrace: $stack", level: LogLevel.debug);
+    }
+
+    return null;
+  }
+
   /// Get Expense Type Report
   static Future<ExpenseTypeReportResponse?> getExpenseTypeReportApi({
     required String projectId,

lib/helpers/services/notification_action_handler.dart

@@ -66,7 +66,6 @@ class NotificationActionHandler {
         }
         break;
       case 'Team_Modified':
-        // Call method to handle team modifications and dashboard update
         _handleDashboardUpdate(data);
         break;
       /// 🔹 Expenses
@@ -106,7 +105,6 @@ class NotificationActionHandler {
   /// ---------------------- HANDLERS ----------------------
 
 
-
   static bool _isAttendanceAction(String? action) {
     const validActions = {
       'CHECK_IN',
@@ -120,13 +118,17 @@ class NotificationActionHandler {
   }
 
   static void _handleExpenseUpdated(Map<String, dynamic> data) {
+    if (!_isCurrentProject(data)) {
+      _logger.i("ℹ️ Ignored expense update from another project.");
+      return;
+    }
+
     final expenseId = data['ExpenseId'];
     if (expenseId == null) {
       _logger.w("⚠️ Expense update received without ExpenseId: $data");
       return;
     }
 
-    // Update Expense List
     _safeControllerUpdate<ExpenseController>(
       onFound: (controller) async {
         await controller.fetchExpenses();
@@ -136,7 +138,6 @@ class NotificationActionHandler {
           '✅ ExpenseController refreshed from expense notification.',
     );
 
-    // Update Expense Detail (if open and matches this expenseId)
     _safeControllerUpdate<ExpenseDetailController>(
       onFound: (controller) async {
         if (controller.expense.value?.id == expenseId) {
@@ -151,6 +152,11 @@ class NotificationActionHandler {
   }
 
   static void _handleAttendanceUpdated(Map<String, dynamic> data) {
+    if (!_isCurrentProject(data)) {
+      _logger.i("ℹ️ Ignored attendance update from another project.");
+      return;
+    }
+
     _safeControllerUpdate<AttendanceController>(
       onFound: (controller) => controller.refreshDataFromNotification(
         projectId: data['ProjectId'],
@@ -160,13 +166,18 @@ class NotificationActionHandler {
     );
   }
 
+
   /// ---------------------- DOCUMENT HANDLER ----------------------
   static void _handleDocumentModified(Map<String, dynamic> data) {
+    if (!_isCurrentProject(data)) {
+      _logger.i("ℹ️ Ignored document update from another project.");
+      return;
+    }
+
     String entityTypeId;
     String entityId;
     String? documentId = data['DocumentId'];
 
-    // Determine entity type and ID
     if (data['Keyword'] == 'Employee_Document_Modified') {
       entityTypeId = Permissions.employeeEntity;
       entityId = data['EmployeeId'] ?? '';
@@ -186,7 +197,6 @@ class NotificationActionHandler {
     _logger.i(
         "🔔 Document notification received: keyword=${data['Keyword']}, entityTypeId=$entityTypeId, entityId=$entityId, documentId=$documentId");
 
-    // Refresh Document List
     if (Get.isRegistered<DocumentController>()) {
       _safeControllerUpdate<DocumentController>(
         onFound: (controller) async {
@@ -204,11 +214,9 @@ class NotificationActionHandler {
       _logger.w('⚠️ DocumentController not registered, skipping list refresh.');
     }
 
-    // Refresh Document Details (if open)
     if (documentId != null && Get.isRegistered<DocumentDetailsController>()) {
       _safeControllerUpdate<DocumentDetailsController>(
         onFound: (controller) async {
-          // Refresh details regardless of current document
           await controller.fetchDocumentDetails(documentId);
           _logger.i(
               "✅ DocumentDetailsController refreshed for Document $documentId");
@@ -225,13 +233,10 @@ class NotificationActionHandler {
 
   /// ---------------------- DIRECTORY HANDLERS ----------------------
   static void _handleContactModified(Map<String, dynamic> data) {
-    final contactId = data['ContactId'];
-
-    // Always refresh the contact list
     _safeControllerUpdate<DirectoryController>(
       onFound: (controller) {
         controller.fetchContacts();
-        // If a specific contact is provided, refresh its notes as well
+        final contactId = data['ContactId'];
         if (contactId != null) {
           controller.fetchCommentsForContact(contactId);
         }
@@ -242,7 +247,6 @@ class NotificationActionHandler {
           '✅ Directory contacts (and notes if applicable) refreshed from notification.',
     );
 
-    // Refresh notes globally as well
     _safeControllerUpdate<NotesController>(
       onFound: (controller) => controller.fetchNotes(),
       notFoundMessage: '⚠️ NotesController not found, cannot refresh notes.',
@@ -251,7 +255,6 @@ class NotificationActionHandler {
   }
 
   static void _handleContactNoteModified(Map<String, dynamic> data) {
-    // Refresh both contacts and notes when a note is modified
     _handleContactModified(data);
   }
 
@@ -273,6 +276,11 @@ class NotificationActionHandler {
 
   /// ---------------------- DASHBOARD HANDLER ----------------------
   static void _handleDashboardUpdate(Map<String, dynamic> data) {
+    if (!_isCurrentProject(data)) {
+      _logger.i("ℹ️ Ignored dashboard update from another project.");
+      return;
+    }
+
     _safeControllerUpdate<DashboardController>(
       onFound: (controller) async {
         final type = data['type'] ?? '';
@@ -296,11 +304,9 @@ class NotificationActionHandler {
                 controller.projectController.selectedProjectId.value;
             final projectIdsString = data['ProjectIds'] ?? '';
 
-            // Convert comma-separated string to List<String>
             final notificationProjectIds =
                 projectIdsString.split(',').map((e) => e.trim()).toList();
 
-            // Refresh only if current project ID is in the list
             if (notificationProjectIds.contains(currentProjectId)) {
               await controller.fetchDashboardTeams(projectId: currentProjectId);
             }
@@ -324,6 +330,24 @@ class NotificationActionHandler {
 
   /// ---------------------- UTILITY ----------------------
 
+  static bool _isCurrentProject(Map<String, dynamic> data) {
+    try {
+      final dashboard = Get.find<DashboardController>();
+      final currentProjectId =
+          dashboard.projectController.selectedProjectId.value;
+      final notificationProjectId = data['ProjectId']?.toString();
+
+      if (notificationProjectId == null || notificationProjectId.isEmpty) {
+        return true; // No project info → allow global refresh
+      }
+
+      return notificationProjectId == currentProjectId;
+    } catch (e) {
+      _logger.w("⚠️ Could not verify project context: $e");
+      return true;
+    }
+  }
+
   static void _safeControllerUpdate<T>({
     required void Function(T controller) onFound,
     required String notFoundMessage,

lib/helpers/widgets/dashbaord/expense_breakdown_chart.dart

@@ -480,8 +480,8 @@ class _ExpenseDonutChartState extends State<_ExpenseDonutChart> {
               ),
               iconHeight: 10,
               iconWidth: 10,
-              itemPadding: widget.isMobile ? 6 : 10,
+              itemPadding: widget.isMobile ? 12 : 20,
-              padding: widget.isMobile ? 10 : 14,
+              padding: widget.isMobile ? 20 : 28,
             ),
             tooltipBehavior: _tooltipBehavior,
             // Center annotation showing total approved amount
@@ -556,7 +556,7 @@ class _ExpenseDonutChartState extends State<_ExpenseDonutChart> {
                   ),
                   labelIntersectAction: LabelIntersectAction.shift,
                 ),
-                innerRadius: widget.isMobile ? '40%' : '45%',
+                innerRadius: widget.isMobile ? '65%' : '70%',
                 radius: widget.isMobile ? '75%' : '80%',
                 explode: true,
                 explodeAll: false,

lib/helpers/widgets/dashbaord/monthly_expense_dashboard_chart.dart

@@ -0,0 +1,520 @@
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:syncfusion_flutter_charts/charts.dart';
+import 'package:marco/controller/dashboard/dashboard_controller.dart';
+import 'package:marco/helpers/widgets/my_text.dart';
+import 'package:marco/helpers/utils/utils.dart';
+import 'package:intl/intl.dart';
+
+// =========================
+// CONSTANTS
+// =========================
+class _ChartConstants {
+  static const List<Color> flatColors = [
+    Color(0xFFE57373),
+    Color(0xFF64B5F6),
+    Color(0xFF81C784),
+    Color(0xFFFFB74D),
+    Color(0xFFBA68C8),
+    Color(0xFFFF8A65),
+    Color(0xFF4DB6AC),
+    Color(0xFFA1887F),
+    Color(0xFFDCE775),
+    Color(0xFF9575CD),
+    Color(0xFF7986CB),
+    Color(0xFFAED581),
+    Color(0xFFFF7043),
+    Color(0xFF4FC3F7),
+    Color(0xFFFFD54F),
+    Color(0xFF90A4AE),
+    Color(0xFFE573BB),
+    Color(0xFF81D4FA),
+    Color(0xFFBCAAA4),
+    Color(0xFFA5D6A7),
+    Color(0xFFCE93D8),
+    Color(0xFFFF8A65),
+    Color(0xFF80CBC4),
+    Color(0xFFFFF176),
+    Color(0xFF90CAF9),
+    Color(0xFFE0E0E0),
+    Color(0xFFF48FB1),
+    Color(0xFFA1887F),
+    Color(0xFFB0BEC5),
+    Color(0xFF81C784),
+    Color(0xFFFFB74D),
+    Color(0xFF64B5F6),
+  ];
+
+  static const Map<MonthlyExpenseDuration, String> durationLabels = {
+    MonthlyExpenseDuration.oneMonth: "1M",
+    MonthlyExpenseDuration.threeMonths: "3M",
+    MonthlyExpenseDuration.sixMonths: "6M",
+    MonthlyExpenseDuration.twelveMonths: "12M",
+    MonthlyExpenseDuration.all: "All",
+  };
+
+  static const double mobileBreakpoint = 600;
+  static const double mobileChartHeight = 350;
+  static const double desktopChartHeight = 400;
+  static const double mobilePadding = 12;
+  static const double desktopPadding = 20;
+  static const double mobileVerticalPadding = 16;
+  static const double desktopVerticalPadding = 20;
+  static const double noDataIconSize = 48;
+  static const double noDataContainerHeight = 220;
+  static const double labelRotation = 45;
+  static const int tooltipAnimationDuration = 300;
+}
+
+// =========================
+// MAIN CHART WIDGET
+// =========================
+class MonthlyExpenseDashboardChart extends StatelessWidget {
+  MonthlyExpenseDashboardChart({Key? key}) : super(key: key);
+
+  final DashboardController _controller = Get.find<DashboardController>();
+
+  Color _getColorForIndex(int index) =>
+      _ChartConstants.flatColors[index % _ChartConstants.flatColors.length];
+
+  BoxDecoration get _containerDecoration => BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(5),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.grey.withOpacity(0.05),
+            blurRadius: 6,
+            spreadRadius: 1,
+            offset: const Offset(0, 2),
+          ),
+        ],
+      );
+
+  bool _isMobileLayout(double screenWidth) =>
+      screenWidth < _ChartConstants.mobileBreakpoint;
+
+  double _calculateTotalExpense(List<dynamic> data) =>
+      data.fold<double>(0, (sum, item) => sum + item.total);
+
+  @override
+  Widget build(BuildContext context) {
+    final screenWidth = MediaQuery.of(context).size.width;
+    final isMobile = _isMobileLayout(screenWidth);
+
+    return Obx(() {
+      final isLoading = _controller.isMonthlyExpenseLoading.value;
+      final expenseData = _controller.monthlyExpenseList;
+      final selectedDuration = _controller.selectedMonthlyExpenseDuration.value;
+      final totalExpense = _calculateTotalExpense(expenseData);
+
+      return Container(
+        decoration: _containerDecoration,
+        padding: EdgeInsets.symmetric(
+          vertical: isMobile
+              ? _ChartConstants.mobileVerticalPadding
+              : _ChartConstants.desktopVerticalPadding,
+          horizontal: isMobile
+              ? _ChartConstants.mobilePadding
+              : _ChartConstants.desktopPadding,
+        ),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            _ChartHeader(
+              controller: _controller, // pass controller explicitly
+              selectedDuration: selectedDuration,
+              onDurationChanged: _controller.updateMonthlyExpenseDuration,
+              totalExpense: totalExpense,
+            ),
+            const SizedBox(height: 12),
+            SizedBox(
+              height: isMobile
+                  ? _ChartConstants.mobileChartHeight
+                  : _ChartConstants.desktopChartHeight,
+              child: _buildChartContent(
+                isLoading: isLoading,
+                data: expenseData,
+                isMobile: isMobile,
+                totalExpense: totalExpense,
+              ),
+            ),
+          ],
+        ),
+      );
+    });
+  }
+
+  Widget _buildChartContent({
+    required bool isLoading,
+    required List<dynamic> data,
+    required bool isMobile,
+    required double totalExpense,
+  }) {
+    if (isLoading) {
+      return const Center(child: CircularProgressIndicator());
+    }
+
+    if (data.isEmpty) {
+      return const _EmptyDataWidget();
+    }
+
+    return _MonthlyExpenseChart(
+      data: data,
+      getColor: _getColorForIndex,
+      isMobile: isMobile,
+      totalExpense: totalExpense,
+    );
+  }
+}
+
+// =========================
+// HEADER WIDGET
+// =========================
+class _ChartHeader extends StatelessWidget {
+  const _ChartHeader({
+    Key? key,
+    required this.controller, // added
+    required this.selectedDuration,
+    required this.onDurationChanged,
+    required this.totalExpense,
+  }) : super(key: key);
+
+  final DashboardController controller; // added
+  final MonthlyExpenseDuration selectedDuration;
+  final ValueChanged<MonthlyExpenseDuration> onDurationChanged;
+  final double totalExpense;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        _buildTitle(),
+        const SizedBox(height: 2),
+        _buildSubtitle(),
+        const SizedBox(height: 8),
+        // ==========================
+        // Row with popup menu on the right
+        // ==========================
+        Row(
+          mainAxisAlignment: MainAxisAlignment.end,
+          children: [
+            Obx(() {
+              final selectedType = controller.selectedExpenseType.value;
+
+              return PopupMenuButton<String>(
+                tooltip: 'Filter by Expense Type',
+                onSelected: (String value) {
+                  if (value == 'all') {
+                    controller.updateSelectedExpenseType(null);
+                  } else {
+                    final type = controller.expenseTypes
+                        .firstWhere((t) => t.id == value);
+                    controller.updateSelectedExpenseType(type);
+                  }
+                },
+                itemBuilder: (context) {
+                  final types = controller.expenseTypes;
+                  return [
+                    PopupMenuItem<String>(
+                      value: 'all',
+                      child: Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        children: [
+                          const Text('All Types'),
+                          if (selectedType == null)
+                            const Icon(Icons.check,
+                                size: 16, color: Colors.blueAccent),
+                        ],
+                      ),
+                    ),
+                    ...types.map((type) => PopupMenuItem<String>(
+                          value: type.id,
+                          child: Row(
+                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                            children: [
+                              Text(type.name),
+                              if (selectedType?.id == type.id)
+                                const Icon(Icons.check,
+                                    size: 16, color: Colors.blueAccent),
+                            ],
+                          ),
+                        )),
+                  ];
+                },
+                child: Container(
+                  padding:
+                      const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+                  decoration: BoxDecoration(
+                    border: Border.all(color: Colors.grey.shade300),
+                    borderRadius: BorderRadius.circular(6),
+                  ),
+                  child: Row(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      Flexible(
+                        child: Text(
+                          selectedType?.name ?? 'All Types',
+                          overflow: TextOverflow.ellipsis,
+                          style: const TextStyle(fontSize: 14),
+                        ),
+                      ),
+                      const SizedBox(width: 4),
+                      const Icon(Icons.arrow_drop_down, size: 20),
+                    ],
+                  ),
+                ),
+              );
+            }),
+          ],
+        ),
+
+        const SizedBox(height: 8),
+        _buildDurationSelector(),
+      ],
+    );
+  }
+
+  Widget _buildTitle() =>
+      MyText.bodyMedium('Monthly Expense Overview', fontWeight: 700);
+
+  Widget _buildSubtitle() =>
+      MyText.bodySmall('Month-wise total expense', color: Colors.grey);
+
+  Widget _buildDurationSelector() {
+    return Row(
+      children: _ChartConstants.durationLabels.entries
+          .map((entry) => _DurationChip(
+                label: entry.value,
+                duration: entry.key,
+                isSelected: selectedDuration == entry.key,
+                onSelected: onDurationChanged,
+              ))
+          .toList(),
+    );
+  }
+}
+
+// =========================
+// DURATION CHIP WIDGET
+// =========================
+class _DurationChip extends StatelessWidget {
+  const _DurationChip({
+    Key? key,
+    required this.label,
+    required this.duration,
+    required this.isSelected,
+    required this.onSelected,
+  }) : super(key: key);
+
+  final String label;
+  final MonthlyExpenseDuration duration;
+  final bool isSelected;
+  final ValueChanged<MonthlyExpenseDuration> onSelected;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(right: 4),
+      child: ChoiceChip(
+        label: Text(label, style: const TextStyle(fontSize: 12)),
+        padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 0),
+        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
+        visualDensity: VisualDensity.compact,
+        selected: isSelected,
+        onSelected: (_) => onSelected(duration),
+        selectedColor: Colors.blueAccent.withOpacity(0.15),
+        backgroundColor: Colors.grey.shade200,
+        labelStyle: TextStyle(
+          color: isSelected ? Colors.blueAccent : Colors.black87,
+          fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
+        ),
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(5),
+          side: BorderSide(
+            color: isSelected ? Colors.blueAccent : Colors.grey.shade300,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+// =========================
+// EMPTY DATA WIDGET
+// =========================
+class _EmptyDataWidget extends StatelessWidget {
+  const _EmptyDataWidget({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: _ChartConstants.noDataContainerHeight,
+      child: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Icon(
+              Icons.info_outline,
+              color: Colors.grey.shade400,
+              size: _ChartConstants.noDataIconSize,
+            ),
+            const SizedBox(height: 10),
+            MyText.bodyMedium(
+              'No monthly expense data available.',
+              textAlign: TextAlign.center,
+              color: Colors.grey.shade500,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+// =========================
+// CHART WIDGET
+// =========================
+class _MonthlyExpenseChart extends StatelessWidget {
+  const _MonthlyExpenseChart({
+    Key? key,
+    required this.data,
+    required this.getColor,
+    required this.isMobile,
+    required this.totalExpense,
+  }) : super(key: key);
+
+  final List<dynamic> data;
+  final Color Function(int index) getColor;
+  final bool isMobile;
+  final double totalExpense;
+
+  @override
+  Widget build(BuildContext context) {
+    return SfCartesianChart(
+      tooltipBehavior: _buildTooltipBehavior(),
+      primaryXAxis: _buildXAxis(),
+      primaryYAxis: _buildYAxis(),
+      series: <ColumnSeries>[_buildColumnSeries()],
+    );
+  }
+
+  TooltipBehavior _buildTooltipBehavior() {
+    return TooltipBehavior(
+      enable: true,
+      builder: _tooltipBuilder,
+      animationDuration: _ChartConstants.tooltipAnimationDuration,
+    );
+  }
+
+  Widget _tooltipBuilder(
+    dynamic data,
+    dynamic point,
+    dynamic series,
+    int pointIndex,
+    int seriesIndex,
+  ) {
+    final value = data.total as double;
+    final percentage = totalExpense > 0 ? (value / totalExpense * 100) : 0;
+
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
+      decoration: BoxDecoration(
+        color: Colors.blueAccent,
+        borderRadius: BorderRadius.circular(4),
+      ),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            '${data.monthName} ${data.year}',
+            style: const TextStyle(
+              color: Colors.white,
+              fontWeight: FontWeight.w600,
+            ),
+          ),
+          const SizedBox(height: 2),
+          Text(
+            Utils.formatCurrency(value),
+            style: const TextStyle(
+              color: Colors.white,
+              fontWeight: FontWeight.w600,
+            ),
+          ),
+          Text(
+            '${percentage.toStringAsFixed(1)}%',
+            style: const TextStyle(
+              color: Colors.white70,
+              fontWeight: FontWeight.w500,
+              fontSize: 10,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  CategoryAxis _buildXAxis() {
+    return CategoryAxis(
+      labelRotation: _ChartConstants.labelRotation.toInt(),
+      majorGridLines:
+          const MajorGridLines(width: 0), // removes X-axis grid lines
+    );
+  }
+
+  NumericAxis _buildYAxis() {
+    return NumericAxis(
+      numberFormat: NumberFormat.simpleCurrency(
+        locale: 'en_IN',
+        name: '₹',
+        decimalDigits: 0,
+      ),
+      axisLabelFormatter: (AxisLabelRenderDetails args) {
+        return ChartAxisLabel(Utils.formatCurrency(args.value), null);
+      },
+      majorGridLines:
+          const MajorGridLines(width: 0), // removes Y-axis grid lines
+    );
+  }
+
+  ColumnSeries<dynamic, String> _buildColumnSeries() {
+    return ColumnSeries<dynamic, String>(
+      dataSource: data,
+      xValueMapper: (d, _) => _ChartFormatter.formatMonthYear(d),
+      yValueMapper: (d, _) => d.total,
+      pointColorMapper: (_, index) => getColor(index),
+      name: 'Monthly Expense',
+      borderRadius: BorderRadius.circular(4),
+      dataLabelSettings: _buildDataLabelSettings(),
+    );
+  }
+
+  DataLabelSettings _buildDataLabelSettings() {
+    return DataLabelSettings(
+      isVisible: true,
+      builder: (data, _, __, ___, ____) => Text(
+        Utils.formatCurrency(data.total),
+        style: const TextStyle(fontSize: 11),
+      ),
+    );
+  }
+}
+
+// =========================
+// FORMATTER HELPER
+// =========================
+class _ChartFormatter {
+  static String formatMonthYear(dynamic data) {
+    try {
+      final month = data.month ?? 1;
+      final year = data.year ?? DateTime.now().year;
+      final date = DateTime(year, month, 1);
+      final monthName = DateFormat('MMM').format(date);
+      final shortYear = year % 100;
+      return '$shortYear $monthName';
+    } catch (e) {
+      return '${data.monthName} ${data.year}';
+    }
+  }
+}

lib/model/dashboard/monthly_expence_model.dart

@@ -0,0 +1,70 @@
+class DashboardMonthlyExpenseResponse {
+  final bool success;
+  final String message;
+  final List<MonthlyExpenseData> data;
+  final dynamic errors;
+  final int statusCode;
+  final String timestamp;
+
+  DashboardMonthlyExpenseResponse({
+    required this.success,
+    required this.message,
+    required this.data,
+    this.errors,
+    required this.statusCode,
+    required this.timestamp,
+  });
+
+  factory DashboardMonthlyExpenseResponse.fromJson(Map<String, dynamic> json) {
+    return DashboardMonthlyExpenseResponse(
+      success: json['success'] ?? false,
+      message: json['message'] ?? '',
+      data: (json['data'] as List<dynamic>?)
+              ?.map((e) => MonthlyExpenseData.fromJson(e))
+              .toList() ??
+          [],
+      errors: json['errors'],
+      statusCode: json['statusCode'] ?? 0,
+      timestamp: json['timestamp'] ?? '',
+    );
+  }
+
+  Map<String, dynamic> toJson() => {
+        'success': success,
+        'message': message,
+        'data': data.map((e) => e.toJson()).toList(),
+        'errors': errors,
+        'statusCode': statusCode,
+        'timestamp': timestamp,
+      };
+}
+
+class MonthlyExpenseData {
+  final String monthName;
+  final int year;
+  final double total;
+  final int count;
+
+  MonthlyExpenseData({
+    required this.monthName,
+    required this.year,
+    required this.total,
+    required this.count,
+  });
+
+  factory MonthlyExpenseData.fromJson(Map<String, dynamic> json) {
+    return MonthlyExpenseData(
+      monthName: json['monthName'] ?? '',
+      year: json['year'] ?? 0,
+      total: (json['total'] ?? 0).toDouble(),
+      count: json['count'] ?? 0,
+    );
+  }
+
+  Map<String, dynamic> toJson() => {
+        'monthName': monthName,
+        'year': year,
+        'total': total,
+        'count': count,
+      };
+}

lib/view/dashboard/dashboard_screen.dart

@@ -13,10 +13,12 @@ import 'package:marco/helpers/widgets/dashbaord/attendance_overview_chart.dart';
 import 'package:marco/helpers/widgets/dashbaord/expense_by_status_widget.dart';
 import 'package:marco/view/layouts/layout.dart';
 import 'package:marco/helpers/widgets/dashbaord/expense_breakdown_chart.dart';
+import 'package:marco/helpers/widgets/dashbaord/monthly_expense_dashboard_chart.dart';
+
 
 class DashboardScreen extends StatefulWidget {
   const DashboardScreen({super.key});
-  
+
   static const String employeesRoute = "/dashboard/employees";
   static const String attendanceRoute = "/dashboard/attendance";
   static const String directoryMainPageRoute = "/dashboard/directory-main-page";
@@ -63,6 +65,8 @@ class _DashboardScreenState extends State<DashboardScreen> with UIMixin {
 
             // Expense Type Report Chart
             ExpenseTypeReportChart(),
+            MySpacing.height(24),
+            MonthlyExpenseDashboardChart(),
           ],
         ),
       ),