From 3135ff97862e3abd56a9c9e41a77e0f3943b5ad9 Mon Sep 17 00:00:00 2001
From: Martin Donadieu <martindonadieu@gmail.com>
Date: Thu, 8 Jan 2026 17:16:59 +0000
Subject: [PATCH 01/11] fix: only show demo data when payment failed
 (forceDemo=true)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove auto-demo mode that was incorrectly showing fake data when real data exists
- Demo data now ONLY shows when forceDemo is true (payment failed modal state)
- Users with apps will see their real data (even if empty) instead of fake demo data
- Show blurred demo view with modal when navigating to non-existent app

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components.d.ts                           |  2 +
 src/components/AppNotFoundModal.vue           | 39 ++++++++++++++
 .../dashboard/BundleUploadsCard.vue           |  8 ++-
 .../dashboard/DeploymentStatsCard.vue         |  8 ++-
 src/components/dashboard/DevicesStats.vue     |  7 ++-
 src/components/dashboard/UpdateStatsCard.vue  | 12 ++---
 src/components/dashboard/Usage.vue            |  3 ++
 src/components/dashboard/UsageCard.vue        | 22 +++-----
 src/pages/app/[package].vue                   | 54 ++++++++++---------
 9 files changed, 96 insertions(+), 59 deletions(-)
 create mode 100644 src/components/AppNotFoundModal.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index 84bf403d8a..6304aecb5b 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -16,6 +16,7 @@ declare module 'vue' {
     AdminMultiLineChart: typeof import('./components/admin/AdminMultiLineChart.vue')['default']
     AdminStatsCard: typeof import('./components/admin/AdminStatsCard.vue')['default']
     AdminTrendChart: typeof import('./components/admin/AdminTrendChart.vue')['default']
+    AppNotFoundModal: typeof import('./components/AppNotFoundModal.vue')['default']
     AppSetting: typeof import('./components/dashboard/AppSetting.vue')['default']
     AppTable: typeof import('./components/tables/AppTable.vue')['default']
     AuditLogTable: typeof import('./components/tables/AuditLogTable.vue')['default']
@@ -80,6 +81,7 @@ declare global {
   const AdminMultiLineChart: typeof import('./components/admin/AdminMultiLineChart.vue')['default']
   const AdminStatsCard: typeof import('./components/admin/AdminStatsCard.vue')['default']
   const AdminTrendChart: typeof import('./components/admin/AdminTrendChart.vue')['default']
+  const AppNotFoundModal: typeof import('./components/AppNotFoundModal.vue')['default']
   const AppSetting: typeof import('./components/dashboard/AppSetting.vue')['default']
   const AppTable: typeof import('./components/tables/AppTable.vue')['default']
   const AuditLogTable: typeof import('./components/tables/AuditLogTable.vue')['default']
diff --git a/src/components/AppNotFoundModal.vue b/src/components/AppNotFoundModal.vue
new file mode 100644
index 0000000000..1e2213f280
--- /dev/null
+++ b/src/components/AppNotFoundModal.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import IconAlertCircle from '~icons/lucide/alert-circle'
+
+const { t } = useI18n()
+const router = useRouter()
+
+function goToApps() {
+  router.push('/app')
+}
+</script>
+
+<template>
+  <div class="flex absolute inset-0 z-10 flex-col justify-center items-center bg-white/60 dark:bg-gray-900/60">
+    <div class="p-8 text-center bg-white rounded-xl border shadow-xl dark:bg-gray-800 border-red-200 dark:border-red-700">
+      <div class="flex justify-center mb-4">
+        <div class="flex justify-center items-center w-16 h-16 bg-red-100 rounded-full dark:bg-red-900/30">
+          <IconAlertCircle class="w-8 h-8 text-red-500" />
+        </div>
+      </div>
+      <h2 class="mb-2 text-2xl font-bold text-gray-900 dark:text-white">
+        {{ t('app-not-found') }}
+      </h2>
+      <p class="mb-6 max-w-sm text-gray-600 dark:text-gray-400">
+        {{ t('app-not-found-description') }}
+      </p>
+      <button
+        class="inline-flex gap-2 items-center px-6 py-3 text-white bg-primary rounded-lg transition-colors cursor-pointer hover:bg-primary/90 focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:outline-none"
+        @click="goToApps"
+      >
+        <svg class="w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd" />
+        </svg>
+        {{ t('back-to-apps') }}
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/src/components/dashboard/BundleUploadsCard.vue b/src/components/dashboard/BundleUploadsCard.vue
index 3ef08207f6..40b3550967 100644
--- a/src/components/dashboard/BundleUploadsCard.vue
+++ b/src/components/dashboard/BundleUploadsCard.vue
@@ -94,9 +94,6 @@ const currentCacheOrgId = ref<string | null>(null)
 // Cache for single app name to avoid refetching
 const singleAppNameCache = new Map<string, string>()
 
-// Check if we have real data
-const hasRealData = computed(() => total.value > 0)
-
 // Generate consistent demo data where total is derived from per-app breakdown
 const consistentDemoData = computed(() => {
   const days = getDemoDayCount(props.useBillingPeriod, bundleData.value.length)
@@ -106,8 +103,9 @@ const consistentDemoData = computed(() => {
 const demoBundleData = computed(() => consistentDemoData.value.total)
 const demoDataByApp = computed(() => consistentDemoData.value.byApp)
 
-// Demo mode detection - also force demo when forceDemo is true
-const isDemoMode = computed(() => props.forceDemo || (!hasRealData.value && !isLoading.value))
+// Demo mode is ONLY enabled when forceDemo is true (payment failed)
+// Never auto-show demo data based on empty data - users with apps should see real (even if empty) data
+const isDemoMode = computed(() => props.forceDemo === true)
 
 // Effective values for display
 const effectiveBundleData = computed(() => isDemoMode.value ? demoBundleData.value : bundleData.value)
diff --git a/src/components/dashboard/DeploymentStatsCard.vue b/src/components/dashboard/DeploymentStatsCard.vue
index 1c6cee6d9c..392b9f6550 100644
--- a/src/components/dashboard/DeploymentStatsCard.vue
+++ b/src/components/dashboard/DeploymentStatsCard.vue
@@ -95,9 +95,6 @@ const deploymentDataByApp = ref<{ [appId: string]: number[] }>({})
 const appNames = ref<{ [appId: string]: string }>({})
 const isLoading = ref(true)
 
-// Check if we have real data
-const hasRealData = computed(() => totalDeployments.value > 0)
-
 // Generate consistent demo data where total is derived from per-app breakdown
 const consistentDemoData = computed(() => {
   const days = getDemoDayCount(props.useBillingPeriod, deploymentData.value.length)
@@ -107,8 +104,9 @@ const consistentDemoData = computed(() => {
 const demoDeploymentData = computed(() => consistentDemoData.value.total)
 const demoDataByApp = computed(() => consistentDemoData.value.byApp)
 
-// Demo mode detection - also force demo when forceDemo is true
-const isDemoMode = computed(() => props.forceDemo || (!hasRealData.value && !isLoading.value))
+// Demo mode is ONLY enabled when forceDemo is true (payment failed)
+// Never auto-show demo data based on empty data - users with apps should see real (even if empty) data
+const isDemoMode = computed(() => props.forceDemo === true)
 
 // Effective values for display
 const effectiveDeploymentData = computed(() => isDemoMode.value ? demoDeploymentData.value : deploymentData.value)
diff --git a/src/components/dashboard/DevicesStats.vue b/src/components/dashboard/DevicesStats.vue
index 80be5e4f6d..e2f7e6bf9b 100644
--- a/src/components/dashboard/DevicesStats.vue
+++ b/src/components/dashboard/DevicesStats.vue
@@ -423,6 +423,10 @@ const processedChartData = computed<ChartData<'line'> | null>(() => {
 
 const hasData = computed(() => !!(processedChartData.value && processedChartData.value.datasets.length > 0))
 
+// Demo mode is ONLY enabled when forceDemo is true (payment failed)
+// Never auto-show demo data based on empty data - users with apps should see real (even if empty) data
+const isDemoMode = computed(() => props.forceDemo === true)
+
 const todayLineOptions = computed(() => {
   if (!props.useBillingPeriod || !currentRange.value)
     return { enabled: false }
@@ -513,7 +517,7 @@ async function loadData(forceRefetch = false) {
     return
   }
 
-  // If forceDemo is true, use demo data instead of fetching
+  // If forceDemo is true (payment failed), use demo data instead of fetching
   if (props.forceDemo) {
     const { startDate, endDate } = getDateRange()
     const days = Math.floor((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24)) + 1
@@ -647,6 +651,7 @@ watch(
     :title="t('active_users_by_version')"
     :is-loading="isLoading"
     :has-data="hasData"
+    :is-demo-data="isDemoMode"
   >
     <template #header>
       <div class="flex items-start justify-between flex-1 gap-2">
diff --git a/src/components/dashboard/UpdateStatsCard.vue b/src/components/dashboard/UpdateStatsCard.vue
index 99f1fbe924..e762e665b1 100644
--- a/src/components/dashboard/UpdateStatsCard.vue
+++ b/src/components/dashboard/UpdateStatsCard.vue
@@ -79,16 +79,12 @@ const actionDisplayNames = computed(() => ({
   fail: capitalize(t('failed')),
 }))
 
-// Check if we have real data (at least one non-zero value)
-const hasRealData = computed(() => {
-  return totalInstalled.value > 0 || totalFailed.value > 0 || totalRequested.value > 0
-})
-
-// Generate demo data when no real data
+// Generate demo data when forceDemo is true
 const demoStats = computed(() => generateDemoUpdateStatsData(30))
 
-// Demo mode detection - also force demo when forceDemo is true
-const isDemoMode = computed(() => props.forceDemo || (!hasRealData.value && !isLoading.value))
+// Demo mode is ONLY enabled when forceDemo is true (payment failed)
+// Never auto-show demo data based on empty data - users with apps should see real (even if empty) data
+const isDemoMode = computed(() => props.forceDemo === true)
 
 // Effective values for display
 const effectiveChartData = computed(() => isDemoMode.value ? demoStats.value.total : chartUpdateData.value)
diff --git a/src/components/dashboard/Usage.vue b/src/components/dashboard/Usage.vue
index d8d6620ded..b44a25c560 100644
--- a/src/components/dashboard/Usage.vue
+++ b/src/components/dashboard/Usage.vue
@@ -725,6 +725,7 @@ onMounted(() => {
       :data="mauData" :data-by-app="mauDataByApp" :app-names="appNames" :title="`${t('monthly-active')}`" :unit="t('units-users')"
       :use-billing-period="useBillingPeriod"
       :is-loading="isLoading"
+      :force-demo="forceDemo"
       class="col-span-full sm:col-span-6 xl:col-span-4"
     />
     <UsageCard
@@ -732,6 +733,7 @@ onMounted(() => {
       :title="t('Storage')" :unit="storageUnit"
       :use-billing-period="useBillingPeriod"
       :is-loading="isLoading"
+      :force-demo="forceDemo"
       class="col-span-full sm:col-span-6 xl:col-span-4"
     />
     <UsageCard
@@ -739,6 +741,7 @@ onMounted(() => {
       :title="t('Bandwidth')" :unit="t('units-gb')"
       :use-billing-period="useBillingPeriod"
       :is-loading="isLoading"
+      :force-demo="forceDemo"
       class="col-span-full sm:col-span-6 xl:col-span-4"
     />
     <DevicesStats v-show="appId" :use-billing-period="useBillingPeriod" :accumulated="useBillingPeriod && showCumulative" :reload-trigger="reloadTrigger" :force-demo="forceDemo" class="col-span-full sm:col-span-6 xl:col-span-4" />
diff --git a/src/components/dashboard/UsageCard.vue b/src/components/dashboard/UsageCard.vue
index e25232998a..ecc80cbe8e 100644
--- a/src/components/dashboard/UsageCard.vue
+++ b/src/components/dashboard/UsageCard.vue
@@ -46,18 +46,11 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-})
-
-// Check if we have real data
-const hasRealData = computed(() => {
-  const dataArray = props.data as number[]
-  // Has data if there's at least one defined, non-zero value
-  const hasDefinedData = dataArray.some(val => val !== undefined && val !== null && val > 0)
-  // Or has data by app with at least one defined value
-  const hasAppData = props.dataByApp && Object.values(props.dataByApp).some((appValues: any) =>
-    appValues.some((val: any) => val !== undefined && val !== null && val > 0),
-  )
-  return hasDefinedData || hasAppData
+  // When true, show demo data (payment failed state)
+  forceDemo: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 // Get the appropriate data generator based on chart type
@@ -88,8 +81,9 @@ const consistentDemoData = computed(() => {
 const demoData = computed(() => consistentDemoData.value.total)
 const demoDataByApp = computed(() => consistentDemoData.value.byApp)
 
-// Use real data or demo data
-const isDemoMode = computed(() => !hasRealData.value && !props.isLoading)
+// Demo mode is ONLY enabled when forceDemo is true (payment failed)
+// Never auto-show demo data based on empty data - users with apps should see real (even if empty) data
+const isDemoMode = computed(() => props.forceDemo === true)
 const effectiveData = computed(() => isDemoMode.value ? demoData.value : props.data as number[])
 const effectiveDataByApp = computed(() => isDemoMode.value ? demoDataByApp.value : props.dataByApp)
 const effectiveAppNames = computed(() => isDemoMode.value ? DEMO_APP_NAMES : props.appNames)
diff --git a/src/pages/app/[package].vue b/src/pages/app/[package].vue
index 2ed8c6c367..ea7c8a0bf2 100644
--- a/src/pages/app/[package].vue
+++ b/src/pages/app/[package].vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import type { Database } from '~/types/supabase.types'
 import { computed, ref, watchEffect } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { useRoute } from 'vue-router'
-import IconAlertCircle from '~icons/lucide/alert-circle'
+import AppNotFoundModal from '~/components/AppNotFoundModal.vue'
 import BundleUploadsCard from '~/components/dashboard/BundleUploadsCard.vue'
 import DeploymentBanner from '~/components/dashboard/DeploymentBanner.vue'
 import DeploymentStatsCard from '~/components/dashboard/DeploymentStatsCard.vue'
@@ -13,8 +12,6 @@ import { useDisplayStore } from '~/stores/display'
 import { useMainStore } from '~/stores/main'
 import { useOrganizationStore } from '~/stores/organization'
 
-const { t } = useI18n()
-
 const id = ref('')
 const route = useRoute('/app/[package]')
 const lastPath = ref('')
@@ -30,6 +27,7 @@ const supabase = useSupabase()
 const displayStore = useDisplayStore()
 const app = ref<Database['public']['Tables']['apps']['Row']>()
 const usageComponent = ref()
+const appNotFound = ref(false)
 
 // Check if user lacks security compliance (2FA or password)
 const lacksSecurityAccess = computed(() => {
@@ -44,14 +42,25 @@ const paymentFailed = computed(() => {
   return organizationStore.currentOrganizationFailed && !lacksSecurityAccess.value
 })
 
+// Should show blurred content with modal (either payment failed or app not found)
+const shouldBlurContent = computed(() => paymentFailed.value || appNotFound.value)
+
 async function loadAppInfo() {
   try {
-    const { data: dataApp } = await supabase
+    const { data: dataApp, error } = await supabase
       .from('apps')
       .select()
       .eq('app_id', id.value)
       .single()
-    app.value = dataApp || app.value
+
+    if (error || !dataApp) {
+      appNotFound.value = true
+      app.value = undefined
+      return
+    }
+
+    appNotFound.value = false
+    app.value = dataApp
     const promises = []
     capgoVersion.value = await getCapgoVersion(id.value, app.value?.last_version)
     updatesNb.value = await main.getTotalStatsByApp(id.value, organizationStore.currentOrganization?.subscription_start)
@@ -84,6 +93,8 @@ async function loadAppInfo() {
   }
   catch (error) {
     console.error(error)
+    appNotFound.value = true
+    app.value = undefined
   }
 }
 
@@ -112,15 +123,15 @@ watchEffect(async () => {
 
 <template>
   <div>
-    <div v-if="app || isLoading">
+    <div v-if="app || isLoading || appNotFound">
       <div class="relative w-full h-full px-4 pt-4 mb-8 overflow-x-hidden overflow-y-auto sm:px-6 lg:px-8 max-h-fit">
         <!-- Only show FailedCard for security access issues (2FA/password) -->
         <FailedCard v-if="lacksSecurityAccess" />
 
-        <!-- Content - blurred when payment failed -->
-        <div :class="{ 'blur-sm pointer-events-none select-none': paymentFailed }">
-          <DeploymentBanner v-if="!paymentFailed" :app-id="id" @deployed="refreshData" />
-          <Usage v-if="!lacksSecurityAccess" ref="usageComponent" :app-id="id" :force-demo="paymentFailed" />
+        <!-- Content - blurred when payment failed or app not found -->
+        <div :class="{ 'blur-sm pointer-events-none select-none': shouldBlurContent }">
+          <DeploymentBanner v-if="!shouldBlurContent" :app-id="id" @deployed="refreshData" />
+          <Usage v-if="!lacksSecurityAccess" ref="usageComponent" :app-id="id" :force-demo="shouldBlurContent" />
 
           <!-- Charts section -->
           <div class="grid grid-cols-1 gap-6 mb-6 sm:grid-cols-12 xl:grid-cols-12">
@@ -128,21 +139,21 @@ watchEffect(async () => {
               :app-id="id"
               :use-billing-period="usageComponent?.useBillingPeriod ?? true"
               :accumulated="(usageComponent?.useBillingPeriod ?? true) && (usageComponent?.showCumulative ?? false)"
-              :force-demo="paymentFailed"
+              :force-demo="shouldBlurContent"
               class="col-span-full sm:col-span-6 xl:col-span-4"
             />
             <UpdateStatsCard
               :app-id="id"
               :use-billing-period="usageComponent?.useBillingPeriod ?? true"
               :accumulated="(usageComponent?.useBillingPeriod ?? true) && (usageComponent?.showCumulative ?? false)"
-              :force-demo="paymentFailed"
+              :force-demo="shouldBlurContent"
               class="col-span-full sm:col-span-6 xl:col-span-4"
             />
             <DeploymentStatsCard
               :app-id="id"
               :use-billing-period="usageComponent?.useBillingPeriod ?? true"
               :accumulated="(usageComponent?.useBillingPeriod ?? true) && (usageComponent?.showCumulative ?? false)"
-              :force-demo="paymentFailed"
+              :force-demo="shouldBlurContent"
               class="col-span-full sm:col-span-6 xl:col-span-4"
             />
           </div>
@@ -150,20 +161,11 @@ watchEffect(async () => {
 
         <!-- Payment required overlay -->
         <PaymentRequiredModal v-if="paymentFailed" />
+
+        <!-- App not found overlay -->
+        <AppNotFoundModal v-if="appNotFound && !paymentFailed" />
       </div>
     </div>
-    <div v-else class="flex flex-col justify-center items-center min-h-[50vh]">
-      <IconAlertCircle class="w-16 h-16 mb-4 text-destructive" />
-      <h2 class="text-xl font-semibold text-foreground">
-        {{ t('app-not-found') }}
-      </h2>
-      <p class="mt-2 text-muted-foreground">
-        {{ t('app-not-found-description') }}
-      </p>
-      <button class="mt-4 text-white d-btn d-btn-primary" @click="$router.push(`/app`)">
-        {{ t('back-to-apps') }}
-      </button>
-    </div>
   </div>
 </template>
 

From e196b93e35115e5a456ae8266dcf67114d02be7f Mon Sep 17 00:00:00 2001
From: Martin Donadieu <martindonadieu@gmail.com>
Date: Thu, 8 Jan 2026 22:28:43 +0000
Subject: [PATCH 02/11] fix: use dashboardAppsStore to determine demo mode for
 charts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Demo data now only shows when:
1. forceDemo is true (payment failed), OR
2. User has no apps (dashboardAppsStore.apps.length === 0)

If user has apps, ALWAYS show real data (even if empty).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/dashboard/BundleUploadsCard.vue   | 15 ++++++++++++---
 src/components/dashboard/DeploymentStatsCard.vue | 14 +++++++++++---
 src/components/dashboard/DevicesStats.vue        | 16 +++++++++++++---
 src/components/dashboard/UpdateStatsCard.vue     | 14 +++++++++++---
 src/components/dashboard/UsageCard.vue           | 16 +++++++++++++---
 5 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/src/components/dashboard/BundleUploadsCard.vue b/src/components/dashboard/BundleUploadsCard.vue
index 40b3550967..b59d2dcb87 100644
--- a/src/components/dashboard/BundleUploadsCard.vue
+++ b/src/components/dashboard/BundleUploadsCard.vue
@@ -103,9 +103,18 @@ const consistentDemoData = computed(() => {
 const demoBundleData = computed(() => consistentDemoData.value.total)
 const demoDataByApp = computed(() => consistentDemoData.value.byApp)
 
-// Demo mode is ONLY enabled when forceDemo is true (payment failed)
-// Never auto-show demo data based on empty data - users with apps should see real (even if empty) data
-const isDemoMode = computed(() => props.forceDemo === true)
+// Demo mode: show demo data only when forceDemo is true OR user has no apps
+// If user has apps, ALWAYS show real data (even if empty)
+const isDemoMode = computed(() => {
+  if (props.forceDemo)
+    return true
+  // If user has apps, never show demo data
+  const dashboardAppsStore = useDashboardAppsStore()
+  if (dashboardAppsStore.apps.length > 0)
+    return false
+  // No apps and store is loaded = show demo
+  return dashboardAppsStore.isLoaded
+})
 
 // Effective values for display
 const effectiveBundleData = computed(() => isDemoMode.value ? demoBundleData.value : bundleData.value)
diff --git a/src/components/dashboard/DeploymentStatsCard.vue b/src/components/dashboard/DeploymentStatsCard.vue
index 392b9f6550..e1a4ae7a1e 100644
--- a/src/components/dashboard/DeploymentStatsCard.vue
+++ b/src/components/dashboard/DeploymentStatsCard.vue
@@ -104,9 +104,17 @@ const consistentDemoData = computed(() => {
 const demoDeploymentData = computed(() => consistentDemoData.value.total)
 const demoDataByApp = computed(() => consistentDemoData.value.byApp)
 
-// Demo mode is ONLY enabled when forceDemo is true (payment failed)
-// Never auto-show demo data based on empty data - users with apps should see real (even if empty) data
-const isDemoMode = computed(() => props.forceDemo === true)
+// Demo mode: show demo data only when forceDemo is true OR user has no apps
+// If user has apps, ALWAYS show real data (even if empty)
+const isDemoMode = computed(() => {
+  if (props.forceDemo)
+    return true
+  // If user has apps, never show demo data
+  if (dashboardAppsStore.apps.length > 0)
+    return false
+  // No apps and store is loaded = show demo
+  return dashboardAppsStore.isLoaded
+})
 
 // Effective values for display
 const effectiveDeploymentData = computed(() => isDemoMode.value ? demoDeploymentData.value : deploymentData.value)
diff --git a/src/components/dashboard/DevicesStats.vue b/src/components/dashboard/DevicesStats.vue
index e2f7e6bf9b..9a646efbfe 100644
--- a/src/components/dashboard/DevicesStats.vue
+++ b/src/components/dashboard/DevicesStats.vue
@@ -13,6 +13,7 @@ import { useChartData } from '~/services/chartDataService'
 import { createTooltipConfig, todayLinePlugin, verticalLinePlugin } from '~/services/chartTooltip'
 import { generateChartDayLabels, getChartDateRange, normalizeToStartOfDay } from '~/services/date'
 import { useSupabase } from '~/services/supabase'
+import { useDashboardAppsStore } from '~/stores/dashboardApps'
 import { useOrganizationStore } from '~/stores/organization'
 import ChartCard from './ChartCard.vue'
 
@@ -423,9 +424,18 @@ const processedChartData = computed<ChartData<'line'> | null>(() => {
 
 const hasData = computed(() => !!(processedChartData.value && processedChartData.value.datasets.length > 0))
 
-// Demo mode is ONLY enabled when forceDemo is true (payment failed)
-// Never auto-show demo data based on empty data - users with apps should see real (even if empty) data
-const isDemoMode = computed(() => props.forceDemo === true)
+// Demo mode: show demo data only when forceDemo is true OR user has no apps
+// If user has apps, ALWAYS show real data (even if empty)
+const dashboardAppsStore = useDashboardAppsStore()
+const isDemoMode = computed(() => {
+  if (props.forceDemo)
+    return true
+  // If user has apps, never show demo data
+  if (dashboardAppsStore.apps.length > 0)
+    return false
+  // No apps and store is loaded = show demo
+  return dashboardAppsStore.isLoaded
+})
 
 const todayLineOptions = computed(() => {
   if (!props.useBillingPeriod || !currentRange.value)
diff --git a/src/components/dashboard/UpdateStatsCard.vue b/src/components/dashboard/UpdateStatsCard.vue
index e762e665b1..7471356e12 100644
--- a/src/components/dashboard/UpdateStatsCard.vue
+++ b/src/components/dashboard/UpdateStatsCard.vue
@@ -82,9 +82,17 @@ const actionDisplayNames = computed(() => ({
 // Generate demo data when forceDemo is true
 const demoStats = computed(() => generateDemoUpdateStatsData(30))
 
-// Demo mode is ONLY enabled when forceDemo is true (payment failed)
-// Never auto-show demo data based on empty data - users with apps should see real (even if empty) data
-const isDemoMode = computed(() => props.forceDemo === true)
+// Demo mode: show demo data only when forceDemo is true OR user has no apps
+// If user has apps, ALWAYS show real data (even if empty)
+const isDemoMode = computed(() => {
+  if (props.forceDemo)
+    return true
+  // If user has apps, never show demo data
+  if (dashboardAppsStore.apps.length > 0)
+    return false
+  // No apps and store is loaded = show demo
+  return dashboardAppsStore.isLoaded
+})
 
 // Effective values for display
 const effectiveChartData = computed(() => isDemoMode.value ? demoStats.value.total : chartUpdateData.value)
diff --git a/src/components/dashboard/UsageCard.vue b/src/components/dashboard/UsageCard.vue
index ecc80cbe8e..6008fa5166 100644
--- a/src/components/dashboard/UsageCard.vue
+++ b/src/components/dashboard/UsageCard.vue
@@ -10,6 +10,7 @@ import {
   generateDemoStorageData,
   getDemoDayCount,
 } from '~/services/demoChartData'
+import { useDashboardAppsStore } from '~/stores/dashboardApps'
 import ChartCard from './ChartCard.vue'
 import LineChartStats from './LineChartStats.vue'
 
@@ -81,9 +82,18 @@ const consistentDemoData = computed(() => {
 const demoData = computed(() => consistentDemoData.value.total)
 const demoDataByApp = computed(() => consistentDemoData.value.byApp)
 
-// Demo mode is ONLY enabled when forceDemo is true (payment failed)
-// Never auto-show demo data based on empty data - users with apps should see real (even if empty) data
-const isDemoMode = computed(() => props.forceDemo === true)
+// Demo mode: show demo data only when forceDemo is true OR user has no apps
+// If user has apps, ALWAYS show real data (even if empty)
+const dashboardAppsStore = useDashboardAppsStore()
+const isDemoMode = computed(() => {
+  if (props.forceDemo)
+    return true
+  // If user has apps, never show demo data
+  if (dashboardAppsStore.apps.length > 0)
+    return false
+  // No apps and store is loaded = show demo
+  return dashboardAppsStore.isLoaded
+})
 const effectiveData = computed(() => isDemoMode.value ? demoData.value : props.data as number[])
 const effectiveDataByApp = computed(() => isDemoMode.value ? demoDataByApp.value : props.dataByApp)
 const effectiveAppNames = computed(() => isDemoMode.value ? DEMO_APP_NAMES : props.appNames)

From 3979e829743e48c438943ebd3c49573e8ee4df78 Mon Sep 17 00:00:00 2001
From: Martin Donadieu <martindonadieu@gmail.com>
Date: Thu, 8 Jan 2026 22:35:19 +0000
Subject: [PATCH 03/11] fix: show 'No Data' consistently when chart has no data
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

All charts now show "No Data" text instead of empty charts when:
- total/count is 0 AND
- not in demo mode

This makes the behavior consistent across all dashboard charts.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/dashboard/BundleUploadsCard.vue | 2 +-
 src/components/dashboard/DevicesStats.vue      | 4 ++--
 src/components/dashboard/UpdateStatsCard.vue   | 2 +-
 src/components/dashboard/UsageCard.vue         | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/dashboard/BundleUploadsCard.vue b/src/components/dashboard/BundleUploadsCard.vue
index b59d2dcb87..63179859eb 100644
--- a/src/components/dashboard/BundleUploadsCard.vue
+++ b/src/components/dashboard/BundleUploadsCard.vue
@@ -123,7 +123,7 @@ const effectiveAppNames = computed(() => isDemoMode.value ? DEMO_APP_NAMES : app
 const effectiveTotal = computed(() => isDemoMode.value ? calculateDemoTotal(demoBundleData.value) : total.value)
 const effectiveLastDayEvolution = computed(() => isDemoMode.value ? calculateDemoEvolution(demoBundleData.value) : lastDayEvolution.value)
 
-const hasData = computed(() => effectiveBundleData.value.length > 0)
+const hasData = computed(() => effectiveTotal.value > 0 || isDemoMode.value)
 
 async function calculateStats(forceRefetch = false) {
   const startTime = Date.now()
diff --git a/src/components/dashboard/DevicesStats.vue b/src/components/dashboard/DevicesStats.vue
index 9a646efbfe..e10ab1ce1a 100644
--- a/src/components/dashboard/DevicesStats.vue
+++ b/src/components/dashboard/DevicesStats.vue
@@ -422,8 +422,6 @@ const processedChartData = computed<ChartData<'line'> | null>(() => {
   }
 })
 
-const hasData = computed(() => !!(processedChartData.value && processedChartData.value.datasets.length > 0))
-
 // Demo mode: show demo data only when forceDemo is true OR user has no apps
 // If user has apps, ALWAYS show real data (even if empty)
 const dashboardAppsStore = useDashboardAppsStore()
@@ -437,6 +435,8 @@ const isDemoMode = computed(() => {
   return dashboardAppsStore.isLoaded
 })
 
+const hasData = computed(() => !!(processedChartData.value && processedChartData.value.datasets.length > 0) || isDemoMode.value)
+
 const todayLineOptions = computed(() => {
   if (!props.useBillingPeriod || !currentRange.value)
     return { enabled: false }
diff --git a/src/components/dashboard/UpdateStatsCard.vue b/src/components/dashboard/UpdateStatsCard.vue
index 7471356e12..eb5a9ffe08 100644
--- a/src/components/dashboard/UpdateStatsCard.vue
+++ b/src/components/dashboard/UpdateStatsCard.vue
@@ -112,7 +112,7 @@ const effectiveTotalRequested = computed(() => isDemoMode.value ? calculateDemoT
 const effectiveTotalUpdates = computed(() => effectiveTotalInstalled.value + effectiveTotalFailed.value + effectiveTotalRequested.value)
 const effectiveLastDayEvolution = computed(() => isDemoMode.value ? calculateDemoEvolution(demoStats.value.total) : lastDayEvolution.value)
 
-const hasData = computed(() => effectiveChartData.value?.length > 0)
+const hasData = computed(() => effectiveTotalUpdates.value > 0 || isDemoMode.value)
 
 async function calculateStats(forceRefetch = false) {
   const startTime = Date.now()
diff --git a/src/components/dashboard/UsageCard.vue b/src/components/dashboard/UsageCard.vue
index 6008fa5166..20f0b3be64 100644
--- a/src/components/dashboard/UsageCard.vue
+++ b/src/components/dashboard/UsageCard.vue
@@ -138,7 +138,7 @@ const lastDayEvolution = computed(() => {
   return ((lastValue - previousValue) / previousValue) * 100
 })
 
-const hasData = computed(() => effectiveData.value.length > 0)
+const hasData = computed(() => total.value > 0 || isDemoMode.value)
 </script>
 
 <template>

From 1bcd2086900a7d512ed0bef7b4b96e22a67a9373 Mon Sep 17 00:00:00 2001
From: Martin Donadieu <martindonadieu@gmail.com>
Date: Thu, 8 Jan 2026 22:46:37 +0000
Subject: [PATCH 04/11] fix: show 'No Data' in chart when no activity but total
 exists (Storage)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

For charts like Storage, the total can be > 0 (cumulative) but there may be
no activity in the current period. Now we:
- Still show the total value in the header (0.04GB)
- Show "No Data" in the chart area when there's no chart activity

This is different from other charts where total = sum of chart data.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/dashboard/UsageCard.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/dashboard/UsageCard.vue b/src/components/dashboard/UsageCard.vue
index 20f0b3be64..8556992df9 100644
--- a/src/components/dashboard/UsageCard.vue
+++ b/src/components/dashboard/UsageCard.vue
@@ -138,7 +138,15 @@ const lastDayEvolution = computed(() => {
   return ((lastValue - previousValue) / previousValue) * 100
 })
 
-const hasData = computed(() => total.value > 0 || isDemoMode.value)
+// Check if there's actual chart data (values in the array), not just a total
+// This handles cases like Storage where total can be > 0 but no activity in current period
+const hasChartData = computed(() => {
+  if (isDemoMode.value)
+    return true
+  const dataArray = effectiveData.value
+  // Check if any value in the array is defined and > 0
+  return dataArray.some(val => typeof val === 'number' && val > 0)
+})
 </script>
 
 <template>
@@ -147,7 +155,7 @@ const hasData = computed(() => total.value > 0 || isDemoMode.value)
     :total="total"
     :unit="unit"
     :last-day-evolution="lastDayEvolution"
-    :has-data="hasData"
+    :has-data="hasChartData"
     :is-loading="isLoading"
     :is-demo-data="isDemoMode"
   >

From 1f214914975458d9de06592e889c4f97648426f6 Mon Sep 17 00:00:00 2001
From: Martin Donadieu <martindonadieu@gmail.com>
Date: Thu, 8 Jan 2026 22:56:42 +0000
Subject: [PATCH 05/11] fix: auto-scale Y-axis to make small values visible in
 charts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When chart data has very small values (e.g., 0.04 GB storage), the Y-axis
now scales based on actual data max + 20% padding, instead of defaulting
to a large range (0-1) that makes the line nearly invisible.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/dashboard/LineChartStats.vue | 36 ++++++++++++++++++++-
 1 file changed, 35 insertions(+), 1 deletion(-)

diff --git a/src/components/dashboard/LineChartStats.vue b/src/components/dashboard/LineChartStats.vue
index 2476d880d9..e1fac72e19 100644
--- a/src/components/dashboard/LineChartStats.vue
+++ b/src/components/dashboard/LineChartStats.vue
@@ -383,12 +383,46 @@ const todayLineOptions = computed(() => {
   }
 })
 
+// Calculate appropriate Y-axis max based on actual data values
+const dataMax = computed(() => {
+  const allValues: number[] = []
+
+  // Collect values from main data
+  const mainData = accumulateData.value.filter((v): v is number => typeof v === 'number' && Number.isFinite(v))
+  allValues.push(...mainData)
+
+  // Collect values from per-app data
+  Object.values(props.dataByApp || {}).forEach((appData: any) => {
+    if (Array.isArray(appData)) {
+      const filtered = appData.filter((v): v is number => typeof v === 'number' && Number.isFinite(v))
+      allValues.push(...filtered)
+    }
+  })
+
+  if (allValues.length === 0)
+    return undefined
+
+  const max = Math.max(...allValues)
+  // Add 20% padding to the max so the line isn't at the very top
+  // Also ensure a minimum visible range
+  if (max <= 0)
+    return undefined
+
+  return max * 1.2
+})
+
 const chartOptions = computed<ChartOptions & { plugins: { inlineAnnotationPlugin: AnnotationOptions, todayLine?: any } }>(() => {
   const hasAppData = Object.keys(props.dataByApp || {}).length > 0
+  const scales = createStackedChartScales(isDark.value, hasAppData)
+
+  // If we have a calculated max, use it to ensure small values are visible
+  if (dataMax.value !== undefined) {
+    (scales.y as any).suggestedMax = dataMax.value
+  }
 
   return {
     maintainAspectRatio: false,
-    scales: createStackedChartScales(isDark.value, hasAppData),
+    scales,
     plugins: {
       inlineAnnotationPlugin: generateAnnotations.value,
       legend: createLegendConfig(isDark.value, hasAppData),

From 9a9b78fbb177aa5569a2c3480ebe1dd8b7c3befa Mon Sep 17 00:00:00 2001
From: Martin Donadieu <martindonadieu@gmail.com>
Date: Thu, 8 Jan 2026 23:00:40 +0000
Subject: [PATCH 06/11] fix: correct tooltip positioning to use relative canvas
 coordinates
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The tooltip was using absolute page coordinates but is appended to the
canvas parent element. Now uses tooltip.caretX/Y directly (relative to
canvas) and bounds-checks against canvas dimensions.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/services/chartTooltip.ts | 48 +++++++++++++++++++-----------------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/services/chartTooltip.ts b/src/services/chartTooltip.ts
index 7e182a1091..d4f10ca34c 100644
--- a/src/services/chartTooltip.ts
+++ b/src/services/chartTooltip.ts
@@ -308,35 +308,37 @@ export function createCustomTooltip(context: TooltipContext, isAccumulated: bool
  * @param tooltip Chart.js tooltip object
  */
 function positionTooltip(tooltipEl: HTMLElement, canvas: HTMLCanvasElement, tooltip: any) {
-  const canvasPosition = canvas.getBoundingClientRect()
-  const scrollTop = window.pageYOffset || document.documentElement.scrollTop
-  const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
+  // Position relative to the canvas parent (which is where tooltip is appended)
+  // Use tooltip.caretX/Y directly since they're relative to the canvas
+  let left = tooltip.caretX
+  let top = tooltip.caretY
 
-  // Calculate preferred position
-  let left = canvasPosition.left + scrollLeft + tooltip.caretX
-  let top = canvasPosition.top + scrollTop + tooltip.caretY
+  // Get canvas dimensions for bounds checking
+  const canvasWidth = canvas.offsetWidth
+  const canvasHeight = canvas.offsetHeight
 
-  // Adjust position to keep tooltip in viewport
+  // Get tooltip dimensions
   const tooltipRect = tooltipEl.getBoundingClientRect()
-  const viewportWidth = window.innerWidth
-  const viewportHeight = window.innerHeight
-
-  // Horizontal positioning
-  if (left + tooltipRect.width / 2 > viewportWidth - 10) {
-    left = viewportWidth - tooltipRect.width - 10
-    tooltipEl.style.transform = 'translate(0, 0)'
-  }
-  else if (left - tooltipRect.width / 2 < 10) {
-    left = 10
-    tooltipEl.style.transform = 'translate(0, 0)'
+  const tooltipWidth = tooltipRect.width
+  const tooltipHeight = tooltipRect.height
+
+  // Horizontal positioning - keep tooltip within canvas bounds
+  // Center the tooltip on the caret position
+  if (left + tooltipWidth / 2 > canvasWidth - 10) {
+    // Too close to right edge - align right edge with canvas
+    left = canvasWidth - tooltipWidth / 2 - 10
   }
-  else {
-    tooltipEl.style.transform = 'translate(-50%, 0)'
+  else if (left - tooltipWidth / 2 < 10) {
+    // Too close to left edge - align left edge with padding
+    left = tooltipWidth / 2 + 10
   }
 
-  // Vertical positioning
-  if (top + tooltipRect.height > scrollTop + viewportHeight - 10) {
-    top = canvasPosition.top + scrollTop + tooltip.caretY - tooltipRect.height - 10
+  // Always use centered transform
+  tooltipEl.style.transform = 'translate(-50%, 0)'
+
+  // Vertical positioning - if tooltip would go below canvas, show above caret
+  if (top + tooltipHeight > canvasHeight - 10) {
+    top = tooltip.caretY - tooltipHeight - 10
   }
 
   // Apply position

From d76a8bb37d8a85b723761306eb80b2450070a1c2 Mon Sep 17 00:00:00 2001
From: Martin Donadieu <martindonadieu@gmail.com>
Date: Thu, 8 Jan 2026 23:03:58 +0000
Subject: [PATCH 07/11] fix: hide chart axis border lines for consistent grid
 appearance
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The first vertical and horizontal lines of charts had a different color
than other grid lines due to Chart.js axis border styling. Now hiding
the axis border lines so all grid lines have consistent appearance.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/services/chartConfig.ts | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/services/chartConfig.ts b/src/services/chartConfig.ts
index b664696ef3..9a8ece6c26 100644
--- a/src/services/chartConfig.ts
+++ b/src/services/chartConfig.ts
@@ -5,6 +5,12 @@
 interface AxisConfig {
   grid?: {
     color: string
+    drawBorder?: boolean
+    borderColor?: string
+  }
+  border?: {
+    display?: boolean
+    color?: string
   }
   ticks?: {
     color: string
@@ -34,9 +40,14 @@ interface LegendConfig {
  * Creates standardized x-axis configuration
  */
 export function createXAxisConfig(isDark: boolean, options: { stacked?: boolean } = {}) {
+  const gridColor = isDark ? '#323e4e' : '#cad5e2'
   const config: AxisConfig = {
     grid: {
-      color: isDark ? '#323e4e' : '#cad5e2',
+      color: gridColor,
+    },
+    // Hide the axis border line (first vertical line) to match grid lines
+    border: {
+      display: false,
     },
     ticks: {
       color: isDark ? 'white' : 'black',
@@ -64,10 +75,15 @@ export function createYAxisConfig(
     tickCallback?: (value: string | number) => string
   } = {},
 ) {
+  const gridColor = isDark ? '#424e5f' : '#bfc9d6'
   const config: AxisConfig = {
     beginAtZero: true,
     grid: {
-      color: isDark ? '#424e5f' : '#bfc9d6',
+      color: gridColor,
+    },
+    // Hide the axis border line (bottom horizontal line) to match grid lines
+    border: {
+      display: false,
     },
     ticks: {
       color: isDark ? 'white' : 'black',

From d650c888be3eda470a86ae14c610f9e95f0c30e0 Mon Sep 17 00:00:00 2001
From: Martin Donadieu <martindonadieu@gmail.com>
Date: Thu, 8 Jan 2026 23:07:03 +0000
Subject: [PATCH 08/11] fix: align tooltip date with actual chart X-axis label
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The tooltip now uses the actual label value from the chart's X-axis
instead of calculating from cycleStart + dataIndex. This ensures the
tooltip date always matches what's shown on the X-axis at that position.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/services/chartTooltip.ts | 31 +++++++++++++++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/services/chartTooltip.ts b/src/services/chartTooltip.ts
index d4f10ca34c..ae8b658655 100644
--- a/src/services/chartTooltip.ts
+++ b/src/services/chartTooltip.ts
@@ -186,8 +186,35 @@ export function createCustomTooltip(context: TooltipContext, isAccumulated: bool
 
     // Calculate the formatted date title from the data index
     const dataIndex = dataPoints[0]?.dataIndex ?? 0
-    const tooltipDate = getDateFromIndex(dataIndex, dateStartOrUseBillingPeriod)
-    const formattedTitle = formatDateForTooltip(tooltipDate)
+    // Use the actual label from the chart for the tooltip title
+    // This ensures alignment between what's shown on the X-axis and the tooltip
+    const chartLabels = chart.data?.labels || []
+    const labelAtIndex = chartLabels[dataIndex]
+    let formattedTitle: string
+
+    if (labelAtIndex !== undefined && dateStartOrUseBillingPeriod instanceof Date) {
+      // Create date using the day number from the label and the month/year from billing start
+      const tooltipDate = new Date(dateStartOrUseBillingPeriod)
+      const dayNumber = typeof labelAtIndex === 'number' ? labelAtIndex : Number.parseInt(String(labelAtIndex), 10)
+      if (!Number.isNaN(dayNumber)) {
+        // Handle month transitions - if label day is less than billing start day, it's next month
+        const billingStartDay = dateStartOrUseBillingPeriod.getDate()
+        if (dayNumber < billingStartDay) {
+          // Next month
+          tooltipDate.setMonth(tooltipDate.getMonth() + 1)
+        }
+        tooltipDate.setDate(dayNumber)
+        formattedTitle = formatDateForTooltip(tooltipDate)
+      }
+      else {
+        formattedTitle = String(labelAtIndex)
+      }
+    }
+    else {
+      // Fallback to original calculation
+      const tooltipDate = getDateFromIndex(dataIndex, dateStartOrUseBillingPeriod)
+      formattedTitle = formatDateForTooltip(tooltipDate)
+    }
 
     // Create an array of items with their values, colors, and labels
     const items: ProcessedTooltipItem[] = dataPoints.map((dataPoint, index) => {

From 264b60b0bb88d96cabcf09554e55f49493713af0 Mon Sep 17 00:00:00 2001
From: Martin Donadieu <martindonadieu@gmail.com>
Date: Thu, 8 Jan 2026 23:09:18 +0000
Subject: [PATCH 09/11] fix: normalize dates to midnight for consistent chart
 data alignment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- getDaysBetweenDates now normalizes both dates to midnight before calculating
- reloadAllCharts now normalizes date range to start of day
- This ensures the first day of the 30-day range includes all data from midnight

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/dashboard/Usage.vue | 4 +++-
 src/services/conversion.ts         | 3 +++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/dashboard/Usage.vue b/src/components/dashboard/Usage.vue
index b44a25c560..da77ad40a0 100644
--- a/src/components/dashboard/Usage.vue
+++ b/src/components/dashboard/Usage.vue
@@ -182,8 +182,10 @@ function clearDashboardParams() {
 // Function to reload all chart data
 async function reloadAllCharts() {
   // Force reload of main dashboard data
+  // Normalize dates to midnight (start of day) to ensure consistent date range
   const last30DaysEnd = new Date()
-  const last30DaysStart = new Date()
+  last30DaysEnd.setHours(0, 0, 0, 0)
+  const last30DaysStart = new Date(last30DaysEnd)
   last30DaysStart.setDate(last30DaysStart.getDate() - 29) // 30 days including today
 
   const orgId = organizationStore.currentOrganization?.gid
diff --git a/src/services/conversion.ts b/src/services/conversion.ts
index 21bcfa3cfc..1e55cd6a90 100644
--- a/src/services/conversion.ts
+++ b/src/services/conversion.ts
@@ -30,6 +30,9 @@ export function getDaysBetweenDates(date1: string | Date, date2: string | Date)
   const oneDay = 24 * 60 * 60 * 1000
   const firstDate = new Date(date1)
   const secondDate = new Date(date2)
+  // Normalize both dates to midnight (start of day) to avoid timezone/time-of-day issues
+  firstDate.setHours(0, 0, 0, 0)
+  secondDate.setHours(0, 0, 0, 0)
   const res = Math.round(Math.abs((firstDate.valueOf() - secondDate.valueOf()) / oneDay))
   return res
 }

From 2bfb34e23d936c8a88e694e56b8616908e12303d Mon Sep 17 00:00:00 2001
From: Martin Donadieu <martindonadieu@gmail.com>
Date: Thu, 8 Jan 2026 23:22:12 +0000
Subject: [PATCH 10/11] fix: include today's data in 30-day chart date range

Set end date to 23:59:59.999 instead of 00:00:00 so today's data
is included in the query results. Also fixes TypeScript error
where tooltipDate variable was used outside its block scope.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/dashboard/Usage.vue | 21 +++++++++++++--------
 src/services/chartTooltip.ts       |  6 ++++--
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/dashboard/Usage.vue b/src/components/dashboard/Usage.vue
index da77ad40a0..87ff98b90d 100644
--- a/src/components/dashboard/Usage.vue
+++ b/src/components/dashboard/Usage.vue
@@ -182,11 +182,13 @@ function clearDashboardParams() {
 // Function to reload all chart data
 async function reloadAllCharts() {
   // Force reload of main dashboard data
-  // Normalize dates to midnight (start of day) to ensure consistent date range
+  // End date should be end of today (23:59:59.999) to include today's data
   const last30DaysEnd = new Date()
-  last30DaysEnd.setHours(0, 0, 0, 0)
-  const last30DaysStart = new Date(last30DaysEnd)
-  last30DaysStart.setDate(last30DaysStart.getDate() - 29) // 30 days including today
+  last30DaysEnd.setHours(23, 59, 59, 999)
+  // Start date should be 29 days ago at midnight (to get 30 days total including today)
+  const last30DaysStart = new Date()
+  last30DaysStart.setHours(0, 0, 0, 0)
+  last30DaysStart.setDate(last30DaysStart.getDate() - 29)
 
   const orgId = organizationStore.currentOrganization?.gid
   if (orgId) {
@@ -287,11 +289,14 @@ function filterToBillingPeriod(fullData: { mau: number[], storage: number[], ban
 }
 
 async function getUsages(forceRefetch = false) {
-  // Always work with last 30 days of data - normalize first for consistency
+  // Always work with last 30 days of data
+  // End date should be end of today (23:59:59.999) to include today's data
   const last30DaysEnd = new Date()
-  last30DaysEnd.setHours(0, 0, 0, 0)
-  const last30DaysStart = new Date(last30DaysEnd)
-  last30DaysStart.setDate(last30DaysStart.getDate() - 29) // 30 days including today
+  last30DaysEnd.setHours(23, 59, 59, 999)
+  // Start date should be 29 days ago at midnight (to get 30 days total including today)
+  const last30DaysStart = new Date()
+  last30DaysStart.setHours(0, 0, 0, 0)
+  last30DaysStart.setDate(last30DaysStart.getDate() - 29)
 
   // Get billing period dates for filtering
   const billingStart = new Date(organizationStore.currentOrganization?.subscription_start ?? new Date())
diff --git a/src/services/chartTooltip.ts b/src/services/chartTooltip.ts
index ae8b658655..69fe667291 100644
--- a/src/services/chartTooltip.ts
+++ b/src/services/chartTooltip.ts
@@ -191,10 +191,12 @@ export function createCustomTooltip(context: TooltipContext, isAccumulated: bool
     const chartLabels = chart.data?.labels || []
     const labelAtIndex = chartLabels[dataIndex]
     let formattedTitle: string
+    // Declare tooltipDate at higher scope so it's accessible for click handler
+    let tooltipDate: Date
 
     if (labelAtIndex !== undefined && dateStartOrUseBillingPeriod instanceof Date) {
       // Create date using the day number from the label and the month/year from billing start
-      const tooltipDate = new Date(dateStartOrUseBillingPeriod)
+      tooltipDate = new Date(dateStartOrUseBillingPeriod)
       const dayNumber = typeof labelAtIndex === 'number' ? labelAtIndex : Number.parseInt(String(labelAtIndex), 10)
       if (!Number.isNaN(dayNumber)) {
         // Handle month transitions - if label day is less than billing start day, it's next month
@@ -212,7 +214,7 @@ export function createCustomTooltip(context: TooltipContext, isAccumulated: bool
     }
     else {
       // Fallback to original calculation
-      const tooltipDate = getDateFromIndex(dataIndex, dateStartOrUseBillingPeriod)
+      tooltipDate = getDateFromIndex(dataIndex, dateStartOrUseBillingPeriod)
       formattedTitle = formatDateForTooltip(tooltipDate)
     }
 

From 8df26a085f4d82f7b6a90824795d69166a9e9b10 Mon Sep 17 00:00:00 2001
From: Martin Donadieu <martindonadieu@gmail.com>
Date: Thu, 8 Jan 2026 23:24:21 +0000
Subject: [PATCH 11/11] fix: use tomorrow midnight as end date for
 MAU/storage/bandwidth queries

Changed the end date from today (which excludes today's data) to tomorrow
at midnight. This ensures the backend query includes all data from today.

Fixed in three locations:
- organization.ts: initial dashboard load
- Usage.vue reloadAllCharts(): manual refresh
- Usage.vue getUsages(): data fetching

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/components/dashboard/Usage.vue | 10 ++++++----
 src/stores/organization.ts         |  4 ++++
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/dashboard/Usage.vue b/src/components/dashboard/Usage.vue
index 87ff98b90d..b16cb6c8ea 100644
--- a/src/components/dashboard/Usage.vue
+++ b/src/components/dashboard/Usage.vue
@@ -182,9 +182,10 @@ function clearDashboardParams() {
 // Function to reload all chart data
 async function reloadAllCharts() {
   // Force reload of main dashboard data
-  // End date should be end of today (23:59:59.999) to include today's data
+  // End date should be tomorrow at midnight to include all of today's data
   const last30DaysEnd = new Date()
-  last30DaysEnd.setHours(23, 59, 59, 999)
+  last30DaysEnd.setHours(0, 0, 0, 0)
+  last30DaysEnd.setDate(last30DaysEnd.getDate() + 1) // Tomorrow midnight
   // Start date should be 29 days ago at midnight (to get 30 days total including today)
   const last30DaysStart = new Date()
   last30DaysStart.setHours(0, 0, 0, 0)
@@ -290,9 +291,10 @@ function filterToBillingPeriod(fullData: { mau: number[], storage: number[], ban
 
 async function getUsages(forceRefetch = false) {
   // Always work with last 30 days of data
-  // End date should be end of today (23:59:59.999) to include today's data
+  // End date should be tomorrow at midnight to include all of today's data
   const last30DaysEnd = new Date()
-  last30DaysEnd.setHours(23, 59, 59, 999)
+  last30DaysEnd.setHours(0, 0, 0, 0)
+  last30DaysEnd.setDate(last30DaysEnd.getDate() + 1) // Tomorrow midnight
   // Start date should be 29 days ago at midnight (to get 30 days total including today)
   const last30DaysStart = new Date()
   last30DaysStart.setHours(0, 0, 0, 0)
diff --git a/src/stores/organization.ts b/src/stores/organization.ts
index edcbdcfd1e..8481089434 100644
--- a/src/stores/organization.ts
+++ b/src/stores/organization.ts
@@ -106,8 +106,12 @@ export const useOrganizationStore = defineStore('organization', () => {
     }
 
     // Always fetch last 30 days of data and filter client-side for billing period
+    // End date should be tomorrow at midnight to include all of today's data
     const last30DaysEnd = new Date()
+    last30DaysEnd.setHours(0, 0, 0, 0)
+    last30DaysEnd.setDate(last30DaysEnd.getDate() + 1) // Tomorrow midnight
     const last30DaysStart = new Date()
+    last30DaysStart.setHours(0, 0, 0, 0)
     last30DaysStart.setDate(last30DaysStart.getDate() - 29) // 30 days including today
     try {
       await main.updateDashboard(currentOrganizationRaw.gid, last30DaysStart.toISOString(), last30DaysEnd.toISOString())