fix: stale report value shown if summary fetch breaks (#11270)

This pull request includes several changes to better show the report
metrics fetching status on the dashboard. This also prevents showing
stale data in case fetching summary fails due to timeout or other issue

The most important changes include adding a new fetching status state to
the store called `summaryFetchingStatus`, updating the
`useReportMetrics` composable, and modifying the `ChartStats` component
to handle different fetching statuses.

#### Loading
![CleanShot 2025-04-09 at 13 49
35@2x](https://github.com/user-attachments/assets/575c9905-0bf7-4a6e-8709-026896dd95f8)

#### Finished
![CleanShot 2025-04-09 at 13 49
43@2x](https://github.com/user-attachments/assets/ef7f8cb3-ca34-4627-a954-ba23f156d2ff)

#### Failed
<img width="1512" alt="image"
src="https://github.com/user-attachments/assets/d521a785-9299-4e59-94dc-561a7a84377e"
/>

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/routes/dashboard/settings/reports/BotReports.vue

@@ -98,6 +98,7 @@ export default {
     <BotMetrics :filters="requestPayload" />
     <ReportContainer
       account-summary-key="getBotSummary"
+      summary-fetching-key="getBotSummaryFetchingStatus"
       :group-by="groupBy"
       :report-keys="reportKeys"
     />

app/javascript/dashboard/routes/dashboard/settings/reports/ReportContainer.vue

@@ -19,6 +19,10 @@ export default {
       type: String,
       default: 'getAccountSummary',
     },
+    summaryFetchingKey: {
+      type: String,
+      default: 'getAccountSummaryFetchingStatus',
+    },
     reportKeys: {
       type: Object,
       default: () => ({
@@ -148,7 +152,11 @@ export default {
       :key="metric.KEY"
       class="p-4 mb-3 rounded-md"
     >
-      <ChartStats :metric="metric" :account-summary-key="accountSummaryKey" />
+      <ChartStats
+        :metric="metric"
+        :account-summary-key="accountSummaryKey"
+        :summary-fetching-key="summaryFetchingKey"
+      />
       <div class="mt-4 h-72">
         <woot-loading-state
           v-if="accountReport.isFetching[metric.KEY]"

app/javascript/dashboard/routes/dashboard/settings/reports/components/ChartElements/ChartStats.vue

@@ -1,5 +1,8 @@
 <script setup>
 import { useReportMetrics } from 'dashboard/composables/useReportMetrics';
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import { STATUS } from 'dashboard/store/constants';
+import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
   metric: {
@@ -10,11 +13,16 @@ const props = defineProps({
     type: String,
     default: 'getAccountSummary',
   },
+  summaryFetchingKey: {
+    type: String,
+    default: 'getAccountSummaryFetchingStatus',
+  },
 });
 
-const { calculateTrend, displayMetric, isAverageMetricType } = useReportMetrics(
-  props.accountSummaryKey
-);
+const { t } = useI18n();
+
+const { calculateTrend, displayMetric, isAverageMetricType, fetchingStatus } =
+  useReportMetrics(props.accountSummaryKey, props.summaryFetchingKey);
 
 const trendColor = (value, key) => {
   if (isAverageMetricType(key)) {
@@ -34,10 +42,25 @@ const trendColor = (value, key) => {
       {{ metric.NAME }}
     </span>
     <div class="flex items-end text-n-slate-12">
-      <div class="text-xl font-medium">
+      <div v-if="fetchingStatus === STATUS.FETCHING">
+        <Spinner />
+      </div>
+      <div
+        v-else-if="fetchingStatus === STATUS.FAILED"
+        class="text-n-ruby-10 text-sm"
+      >
+        {{ t('REPORT.SUMMARY_FETCHING_FAILED') }}
+      </div>
+      <div
+        v-else-if="fetchingStatus === STATUS.FINISHED"
+        class="text-xl font-medium"
+      >
         {{ displayMetric(metric.KEY) }}
       </div>
-      <div v-if="metric.trend" class="text-xs ml-4 flex items-center mb-0.5">
+      <div
+        v-if="metric.trend && fetchingStatus === STATUS.FINISHED"
+        class="text-xs ml-4 flex items-center mb-0.5"
+      >
         <div
           v-if="metric.trend < 0"
           class="h-0 w-0 border-x-4 medium border-x-transparent border-t-[8px] mr-1"