From b0de761645064869df9df1001bc04eb250fd7ce5 Mon Sep 17 00:00:00 2001
From: "Nic D." <91558719+Venti-Bear@users.noreply.github.com>
Date: Mon, 26 Jan 2026 12:16:52 -0500
Subject: [PATCH] fix(timesheet-approval): overview list now updates when
 closing details dialog.

Graphs at top of details dialog now update dynamically if user makes changes to employee timesheet.
---
 .../details-dialog-chart-expenses.vue         | 36 ++++++-------
 .../details-dialog-chart-hours-worked.vue     | 32 +++++-------
 .../details-dialog-chart-shift-types.vue      | 52 ++++++++++---------
 .../components/details-dialog.vue             |  1 +
 .../components/expense-dialog-form.vue        |  2 -
 5 files changed, 56 insertions(+), 67 deletions(-)

diff --git a/src/modules/timesheet-approval/components/details-dialog-chart-expenses.vue b/src/modules/timesheet-approval/components/details-dialog-chart-expenses.vue
index 2147d13..aac41f0 100644
--- a/src/modules/timesheet-approval/components/details-dialog-chart-expenses.vue
+++ b/src/modules/timesheet-approval/components/details-dialog-chart-expenses.vue
@@ -2,12 +2,12 @@
     setup
     lang="ts"
 >
-    import { onMounted, ref } from 'vue';
+    import { computed, ref } from 'vue';
     import { Bar } from 'vue-chartjs';
     import { useI18n } from 'vue-i18n';
     import { useQuasar, colors } from 'quasar';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
-    import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, TimeScale, type ChartDataset } from 'chart.js';
+    import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, TimeScale } from 'chart.js';
 
     const { t } = useI18n();
     const $q = useQuasar();
@@ -19,27 +19,21 @@
 
     const timesheet_store = useTimesheetStore();
 
-    const all_days = timesheet_store.timesheets.flatMap(week => week.days.flatMap(day => day.daily_expenses));
+    const all_days = computed(() => timesheet_store.timesheets.flatMap(week => week.days.flatMap(day => day.daily_expenses)));
 
     const expenses_labels = ref<string[]>(timesheet_store.timesheets.flatMap(week => week.days.map(day => day.date.slice(-5,))));
-    const expenses_dataset = ref<ChartDataset<'bar'>[]>([]);
-
-    onMounted(() => {
-        setTimeout(() => {
-            expenses_dataset.value = [
-                {
-                    label: t('timesheet_approvals.table.expenses'),
-                    data: all_days.map(day => (day.expenses + day.on_call + day.per_diem)),
-                    backgroundColor: colors.getPaletteColor('accent'),
-                },
-                {
-                    label: t('timesheet_approvals.table.mileage'),
-                    data: all_days.map(day => day.mileage),
-                    backgroundColor: colors.getPaletteColor('info'),
-                }
-            ]
-        }, 100)
-    });
+    const expenses_dataset = computed(() => [
+        {
+            label: t('timesheet_approvals.table.expenses'),
+            data: all_days.value.map(day => (day.expenses + day.on_call + day.per_diem)),
+            backgroundColor: colors.getPaletteColor('accent'),
+        },
+        {
+            label: t('timesheet_approvals.table.mileage'),
+            data: all_days.value.map(day => day.mileage),
+            backgroundColor: colors.getPaletteColor('info'),
+        }
+    ]);
 </script>
 
 <template>
diff --git a/src/modules/timesheet-approval/components/details-dialog-chart-hours-worked.vue b/src/modules/timesheet-approval/components/details-dialog-chart-hours-worked.vue
index b3f8867..d7e78d7 100644
--- a/src/modules/timesheet-approval/components/details-dialog-chart-hours-worked.vue
+++ b/src/modules/timesheet-approval/components/details-dialog-chart-hours-worked.vue
@@ -2,17 +2,17 @@
     setup
     lang="ts"
 >
-    import { ref, onMounted } from 'vue';
+    import { ref, computed } from 'vue';
     import { useI18n } from 'vue-i18n';
     import { colors, date, useQuasar } from 'quasar';
     import { Bar } from 'vue-chartjs';
-    import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, TimeScale, type ChartDataset } from 'chart.js';
+    import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale, TimeScale } from 'chart.js';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
     import type { TotalHours } from 'src/modules/timesheets/models/timesheet.models';
-import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-utils';
+    import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-utils';
 
     interface ChartConfigHoursWorked {
-        key: keyof Pick<TotalHours, 'regular' | 'evening' | 'emergency' | 'overtime'| 'vacation' | 'holiday'>;
+        key: keyof Pick<TotalHours, 'regular' | 'evening' | 'emergency' | 'overtime' | 'vacation' | 'holiday'>;
         label: string;
         color: string;
     }
@@ -27,7 +27,7 @@ import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-uti
 
     const timesheet_store = useTimesheetStore();
 
-    const all_days = timesheet_store.timesheets.flatMap(week => week.days);
+    const all_days = computed(() => timesheet_store.timesheets.flatMap(week => week.days));
 
     const datasetConfig: ChartConfigHoursWorked[] = [
         {
@@ -62,18 +62,12 @@ import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-uti
         },
     ];
 
-    const hours_worked_labels = ref<string[]>(all_days.map(day => day.date.slice(-5,)));
-    const hours_worked_dataset = ref<ChartDataset<'bar'>[]>([]);
-
-    onMounted(() => {
-        setTimeout(() => {
-            hours_worked_dataset.value = datasetConfig.map(cfg => ({
-                label: cfg.label,
-                data: all_days.map(day => day.daily_hours[cfg.key]),
-                backgroundColor: cfg.color,
-            }));
-        }, 100);
-    });
+    const hours_worked_labels = ref<string[]>(all_days.value.map(day => day.date.slice(-5,)));
+    const hours_worked_datasets = computed(() => datasetConfig.map(cfg => ({
+        label: cfg.label,
+        data: all_days.value.map(day => day.daily_hours[cfg.key]),
+        backgroundColor: cfg.color,
+    })))
 </script>
 
 <template>
@@ -83,7 +77,7 @@ import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-uti
     >
         <Bar
             :data="{
-                datasets: hours_worked_dataset,
+                datasets: hours_worked_datasets,
                 labels: hours_worked_labels,
             }"
             :options="({
@@ -92,7 +86,7 @@ import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-uti
                     tooltip: {
                         callbacks: {
                             title: function (context) {
-                                return $d(date.extractDate(`2025-${context[0]!.label}`, 'YYYY-MM-DD'), {month: 'long', day: 'numeric'});
+                                return $d(date.extractDate(`2025-${context[0]!.label}`, 'YYYY-MM-DD'), { month: 'long', day: 'numeric' });
                             },
                             label: function (context) {
                                 return getHoursMinutesStringFromHoursFloat(context.parsed.y);
diff --git a/src/modules/timesheet-approval/components/details-dialog-chart-shift-types.vue b/src/modules/timesheet-approval/components/details-dialog-chart-shift-types.vue
index 2b8b771..1473ebf 100644
--- a/src/modules/timesheet-approval/components/details-dialog-chart-shift-types.vue
+++ b/src/modules/timesheet-approval/components/details-dialog-chart-shift-types.vue
@@ -2,15 +2,15 @@
     setup
     lang="ts"
 >
-    /* eslint-disable */
-    import { onMounted, ref } from 'vue';
+    import { computed } from 'vue';
     import { useI18n } from 'vue-i18n';
     import { colors } from 'quasar';
     import { useQuasar } from 'quasar';
     import { Doughnut } from 'vue-chartjs';
-    import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale, type ChartDataset } from 'chart.js';
+    import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, CategoryScale, LinearScale } from 'chart.js';
     import { useTimesheetStore } from 'src/stores/timesheet-store';
     import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-utils';
+    import type { Timesheet, TotalHours } from 'src/modules/timesheets/models/timesheet.models';
 
     const $q = useQuasar();
     const { t } = useI18n();
@@ -22,33 +22,27 @@
 
     const timesheet_store = useTimesheetStore();
 
-    const shift_type_labels = ref<string[]>([
+    const TRACKABLE_SHIFT_TYPES: (keyof TotalHours)[] = ['regular', 'evening', 'emergency', 'overtime', 'holiday', 'vacation']
+
+    const SHIFT_TYPE_LABELS = [
         t('shared.shift_type.regular'),
         t('shared.shift_type.evening'),
         t('shared.shift_type.emergency'),
         t('shared.shift_type.overtime'),
-    ]);
+        t('shared.shift_type.holiday'),
+        t('shared.shift_type.vacation'),
+    ];
 
-    const shift_type_totals = ref<ChartDataset<'doughnut'>[]>([]);
+    const shift_type_data = computed(() => {
+        const initial_totals = new Array(TRACKABLE_SHIFT_TYPES.length).fill(0);
 
-    onMounted(() => {
-        setTimeout(() => {
-            shift_type_totals.value = [{
-                data: [
-                    timesheet_store.current_pay_period_overview!.regular_hours,
-                    timesheet_store.current_pay_period_overview!.other_hours.evening_hours,
-                    timesheet_store.current_pay_period_overview!.other_hours.emergency_hours,
-                    timesheet_store.current_pay_period_overview!.other_hours.overtime_hours,
-                ],
-                backgroundColor: [
-                    colors.getPaletteColor('accent'),   // Regular
-                    colors.getPaletteColor('green-10'), // Evening
-                    colors.getPaletteColor('warning'),  // Emergency
-                    colors.getPaletteColor('negative'), // Overtime
-                ]
-            }]
+        return timesheet_store.timesheets.reduce((accumulator: number[], timesheet: Timesheet) => {
+            TRACKABLE_SHIFT_TYPES.forEach( (trackable_shift_type, index) => {
+                accumulator[index]! += timesheet.weekly_hours[trackable_shift_type] ?? 0;
+            });
 
-        }, 100);
+            return accumulator;
+        }, initial_totals);
     });
 </script>
 
@@ -59,8 +53,16 @@
     >
         <Doughnut
             :data="{
-                labels: shift_type_labels,
-                datasets: shift_type_totals,
+                labels: SHIFT_TYPE_LABELS,
+                datasets: [{
+                    data: shift_type_data,
+                    backgroundColor: [
+                        colors.getPaletteColor('accent'),   // Regular
+                        colors.getPaletteColor('green-10'), // Evening
+                        colors.getPaletteColor('warning'),  // Emergency
+                        colors.getPaletteColor('negative'), // Overtime
+                    ]
+                }],
             }"
             :options="({
                 plugins: {
diff --git a/src/modules/timesheet-approval/components/details-dialog.vue b/src/modules/timesheet-approval/components/details-dialog.vue
index 825eb35..c3b8a0e 100644
--- a/src/modules/timesheet-approval/components/details-dialog.vue
+++ b/src/modules/timesheet-approval/components/details-dialog.vue
@@ -25,6 +25,7 @@
         backdrop-filter="blur(6px)"
         @show="is_dialog_open = true"
         @hide="is_dialog_open = false"
+        @before-hide="timesheet_store.getTimesheetOverviews"
     >
         <div
             class="column bg-secondary hide-scrollbar shadow-12 rounded-15 q-pa-sm no-wrap"
diff --git a/src/modules/timesheets/components/expense-dialog-form.vue b/src/modules/timesheets/components/expense-dialog-form.vue
index 1dc7f97..d503a07 100644
--- a/src/modules/timesheets/components/expense-dialog-form.vue
+++ b/src/modules/timesheets/components/expense-dialog-form.vue
@@ -72,8 +72,6 @@
             expense_selected.value = expense_options.find(expense_option => expense_option.value === expense.value.type);
         else
             expense_selected.value = expense_options[1];
-
-        console.log('expense mount triggered: current expense type is ', expenses_store.current_expense.type, ', matching option is: ', expense_selected.value);
     })
 </script>