Dashboard Data Refresh After creating a time entry, fixes ST-299

resources/js/Components/Dashboard/ThisWeekOverview.vue

@@ -51,47 +51,49 @@ const props = defineProps<{
 }>();
 const accentColor = useCssVar('--color-accent-quaternary');
 
-const seriesData = props.weeklyHistory.map((el) => {
+const seriesData = computed(() => {
-    return {
+    return props.weeklyHistory.map((el) => {
-        value: el.duration,
+        return {
-        ...{
+            value: el.duration,
-            itemStyle: {
+            ...{
-                borderColor: new LinearGradient(0, 0, 0, 1, [
+                itemStyle: {
-                    {
+                    borderColor: new LinearGradient(0, 0, 0, 1, [
-                        offset: 0,
-                        color: 'rgba(' + accentColor.value + ',0.7)',
-                    },
-                    {
-                        offset: 1,
-                        color: 'rgba(' + accentColor.value + ',0.5)',
-                    },
-                ]),
-                emphasis: {
-                    color: new LinearGradient(0, 0, 0, 1, [
                         {
                             offset: 0,
-                            color: 'rgba(' + accentColor.value + ',0.9)',
+                            color: 'rgba(' + accentColor.value + ',0.7)',
                         },
                         {
                             offset: 1,
+                            color: 'rgba(' + accentColor.value + ',0.5)',
+                        },
+                    ]),
+                    emphasis: {
+                        color: new LinearGradient(0, 0, 0, 1, [
+                            {
+                                offset: 0,
+                                color: 'rgba(' + accentColor.value + ',0.9)',
+                            },
+                            {
+                                offset: 1,
+                                color: 'rgba(' + accentColor.value + ',0.7)',
+                            },
+                        ]),
+                    },
+                    borderRadius: [12, 12, 0, 0],
+                    color: new LinearGradient(0, 0, 0, 1, [
+                        {
+                            offset: 0,
                             color: 'rgba(' + accentColor.value + ',0.7)',
                         },
+                        {
+                            offset: 1,
+                            color: 'rgba(' + accentColor.value + ',0.5)',
+                        },
                     ]),
                 },
-                borderRadius: [12, 12, 0, 0],
-                color: new LinearGradient(0, 0, 0, 1, [
-                    {
-                        offset: 0,
-                        color: 'rgba(' + accentColor.value + ',0.7)',
-                    },
-                    {
-                        offset: 1,
-                        color: 'rgba(' + accentColor.value + ',0.5)',
-                    },
-                ]),
             },
-        },
+        };
-    };
+    });
 });
 
 const weekdays = computed(() => {

resources/js/Components/TimeTracker.vue

@@ -45,12 +45,17 @@ const { tasks } = storeToRefs(taskStore);
 const clientStore = useClientsStore();
 const { clients } = storeToRefs(clientStore);
 
+const emit = defineEmits<{
+    change: [];
+}>();
+
 watch(isActive, () => {
     if (isActive.value) {
         startLiveTimer();
     } else {
         stopLiveTimer();
     }
+    emit('change');
 });
 
 onMounted(async () => {

resources/js/Pages/Dashboard.vue

@@ -8,6 +8,7 @@ import ThisWeekOverview from '@/Components/Dashboard/ThisWeekOverview.vue';
 import ActivityGraphCard from '@/Components/Dashboard/ActivityGraphCard.vue';
 import MainContainer from '@/packages/ui/src/MainContainer.vue';
 import { canViewMembers } from '@/utils/permissions';
+import { router } from '@inertiajs/vue3';
 
 const props = defineProps<{
     latestTasks: {
@@ -46,13 +47,29 @@ const props = defineProps<{
         duration: number;
     }[];
 }>();
+
+function refreshDashboardData() {
+    router.reload({
+        only: [
+            'latestTasks',
+            'latestTeamActivity',
+            'lastSevenDays',
+            'dailyTrackedHours',
+            'weeklyProjectOverview',
+            'totalWeeklyTime',
+            'totalWeeklyBillableTime',
+            'totalWeeklyBillableAmount',
+            'weeklyHistory',
+        ],
+    });
+}
 </script>
 
 <template>
     <AppLayout title="Dashboard" data-testid="dashboard_view">
         <MainContainer
             class="pt-5 sm:pt-8 pb-4 sm:pb-6 border-b border-default-background-separator">
-            <TimeTracker></TimeTracker>
+            <TimeTracker @change="refreshDashboardData"></TimeTracker>
         </MainContainer>
         <MainContainer
             class="grid gap-5 sm:gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 pt-3 sm:pt-5 pb-4 sm:pb-6 border-b border-default-background-separator items-stretch">