From 4c9efda9ca15649df5ba9c8ffc93c453192477b6 Mon Sep 17 00:00:00 2001
From: Emily <adharaultimasheireen@gmail.com>
Date: Wed, 7 Aug 2024 15:06:06 +0200
Subject: [PATCH] fix reactivity

---
 dashboard/components/CVerticalNavigation.vue  |   2 +-
 .../dashboard/GeolocationBarCard.vue          |  45 ++--
 .../components/dashboard/ReferrersBarCard.vue |  12 +-
 dashboard/components/dashboard/TopCards.vue   |   2 +-
 .../components/dashboard/WebsitesBarCard.vue  |  86 ++++---
 .../events/EventsStackedBarChart.vue          |   3 +-
 .../components/referrer/ReferrerBarChart.vue  |  34 +--
 dashboard/composables/useDataService.ts       | 228 +++++++++---------
 dashboard/composables/useSnapshot.ts          |   4 +-
 dashboard/layouts/dashboard.vue               |  30 +--
 dashboard/pages/events.vue                    |  16 +-
 dashboard/pages/index.vue                     |  55 ++---
 dashboard/pages/live_demo.vue                 |   6 +-
 13 files changed, 257 insertions(+), 266 deletions(-)

diff --git a/dashboard/components/CVerticalNavigation.vue b/dashboard/components/CVerticalNavigation.vue
index 1761979..5cbfe1c 100644
--- a/dashboard/components/CVerticalNavigation.vue
+++ b/dashboard/components/CVerticalNavigation.vue
@@ -256,7 +256,7 @@ watch(selected, () => {
                         <div v-if="(!entry.adminOnly || (isAdmin && !isAdminHidden))"
                             class="bg-lyx-background cursor-pointer text-lyx-text-dark py-[.35rem] px-2 rounded-lg text-[.95rem] flex items-center"
                             :class="{
-                                'text-gray-700 pointer-events-none': entry.disabled,
+                                '!text-lyx-text-darker pointer-events-none': entry.disabled,
                                 'bg-lyx-background-lighter !text-lyx-text/90': route.path == (entry.to || '#'),
                                 'hover:bg-lyx-background-light hover:!text-lyx-text/90': route.path != (entry.to || '#'),
                             }">
diff --git a/dashboard/components/dashboard/GeolocationBarCard.vue b/dashboard/components/dashboard/GeolocationBarCard.vue
index 4195fc9..1542a3c 100644
--- a/dashboard/components/dashboard/GeolocationBarCard.vue
+++ b/dashboard/components/dashboard/GeolocationBarCard.vue
@@ -2,8 +2,6 @@
 
 import type { IconProvider } from './BarsCard.vue';
 
-const { data: countries, pending, refresh } = useGeolocationData(10);
-
 function iconProvider(id: string): ReturnType<IconProvider> {
     if (id === 'self') return ['icon', 'fas fa-link'];
     return [
@@ -14,32 +12,51 @@ function iconProvider(id: string): ReturnType<IconProvider> {
 
 const customIconStyle = `width: 2rem; padding: 1px;`
 
+const activeProject = useActiveProject();
+
+const { safeSnapshotDates } = useSnapshot()
+
+const isShowMore = ref<boolean>(false);
+
+const headers = computed(() => {
+    return {
+        'x-from': safeSnapshotDates.value.from,
+        'x-to': safeSnapshotDates.value.to,
+        Authorization: authorizationHeaderComputed.value,
+        limit: isShowMore.value === true ? '200' : '10'
+    }
+});
+
+const geolocationData = useFetch(`/api/metrics/${activeProject.value?._id}/data/countries`, {
+    method: 'POST', headers, lazy: true, immediate: false
+});
+
+
 const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
 
 function showMore() {
 
+    isShowMore.value = true;
     showDialog.value = true;
-    dialogBarData.value = [];
-    isDataLoading.value = true;
 
-    const moreRes = useGeolocationData(200);
-
-    moreRes.onResponse(data => {
-        dialogBarData.value = data.value?.map(e => {
-            return { ...e, icon: iconProvider(e._id) }
-        }) || [];
-        isDataLoading.value = false;
-    })
+    dialogBarData.value = geolocationData.data.value?.map(e => {
+        return { ...e, icon: iconProvider(e._id) }
+    }) || [];
+    isDataLoading.value = false;
 
 }
 
+onMounted(async () => {
+    geolocationData.execute();
+});
+
 </script>
 
 
 <template>
     <div class="flex flex-col gap-2">
-        <DashboardBarsCard @showMore="showMore()" @dataReload="refresh" :data="countries || []" :dataIcons="false"
-            :loading="pending" label="Top Countries" sub-label="Countries" :iconProvider="iconProvider"
+        <DashboardBarsCard @showMore="showMore()" @dataReload="geolocationData.refresh()" :data="geolocationData.data.value || []" :dataIcons="false"
+            :loading="geolocationData.pending.value" label="Top Countries" sub-label="Countries" :iconProvider="iconProvider"
             :customIconStyle="customIconStyle" desc=" Lists the countries where users access your website.">
         </DashboardBarsCard>
     </div>
diff --git a/dashboard/components/dashboard/ReferrersBarCard.vue b/dashboard/components/dashboard/ReferrersBarCard.vue
index 2c7ed8a..2e0566b 100644
--- a/dashboard/components/dashboard/ReferrersBarCard.vue
+++ b/dashboard/components/dashboard/ReferrersBarCard.vue
@@ -34,11 +34,11 @@ const referrersData = useFetch(`/api/metrics/${activeProject.value?._id}/data/re
 
 const { showDialog, dialogBarData, isDataLoading } = useBarCardDialog();
 
-const customDialog = useCustomDialog();
+// const customDialog = useCustomDialog();
 
-function onShowDetails(referrer: string) {
-    customDialog.openDialog(ReferrerBarChart, { slice: 'day', referrer });
-}
+// function onShowDetails(referrer: string) {
+//     customDialog.openDialog(ReferrerBarChart, { slice: 'day', referrer });
+// }
 
 function showMore() {
 
@@ -59,10 +59,10 @@ onMounted(async () => {
 
 <template>
     <div class="flex flex-col gap-2">
-        <DashboardBarsCard @showDetails="onShowDetails" @showMore="showMore()"
+        <DashboardBarsCard @showMore="showMore()"
             :elementTextTransformer="elementTextTransformer" :iconProvider="iconProvider"
             @dataReload="referrersData.refresh()" :showLink=true :data="referrersData.data.value || []"
-            :interactive="true" desc="Where users find your website." :dataIcons="true" :loading="referrersData.pending.value"
+            :interactive="false" desc="Where users find your website." :dataIcons="true" :loading="referrersData.pending.value"
             label="Top Referrers" sub-label="Referrers"></DashboardBarsCard>
     </div>
 </template>
diff --git a/dashboard/components/dashboard/TopCards.vue b/dashboard/components/dashboard/TopCards.vue
index a3e358d..35e6c6c 100644
--- a/dashboard/components/dashboard/TopCards.vue
+++ b/dashboard/components/dashboard/TopCards.vue
@@ -112,7 +112,7 @@ onMounted(async () => {
 
 
 <template>
-    <div class="gap-6 px-6 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 m-cards-wrap:grid-cols-4" v-if="metricsInfo">
+    <div class="gap-6 px-6 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 m-cards-wrap:grid-cols-4">
 
         <DashboardCountCard :ready="!visitsData.pending.value" icon="far fa-earth" text="Total page visits"
             :value="formatNumberK(visitsData.data.value?.data.reduce((a, e) => a + e, 0) || '...')"
diff --git a/dashboard/components/dashboard/WebsitesBarCard.vue b/dashboard/components/dashboard/WebsitesBarCard.vue
index cbe77fa..7125d27 100644
--- a/dashboard/components/dashboard/WebsitesBarCard.vue
+++ b/dashboard/components/dashboard/WebsitesBarCard.vue
@@ -2,41 +2,57 @@
 
 import type { VisitsWebsiteAggregated } from '~/server/api/metrics/[project_id]/data/websites';
 
-const { data: websites, pending, refresh } = useWebsitesData();
+const activeProject = useActiveProject();
 
-const currentViewData = ref<(VisitsWebsiteAggregated[] | undefined)>(websites.value);
+const { safeSnapshotDates } = useSnapshot()
 
+const isShowMore = ref<boolean>(false);
+
+const currentWebsite = ref<string>("");
+
+const websitesHeaders = computed(() => {
+    return {
+        'x-from': safeSnapshotDates.value.from,
+        'x-to': safeSnapshotDates.value.to,
+        Authorization: authorizationHeaderComputed.value,
+        limit: isShowMore.value === true ? '200' : '10'
+    }
+});
+
+const pagesHeaders = computed(() => {
+    return {
+        'x-from': safeSnapshotDates.value.from,
+        'x-to': safeSnapshotDates.value.to,
+        Authorization: authorizationHeaderComputed.value,
+        limit: isShowMore.value === true ? '200' : '10',
+        'x-website-name': currentWebsite.value
+    }
+});
+
+const websitesData = useFetch(`/api/metrics/${activeProject.value?._id}/data/websites`, {
+    method: 'POST', headers: websitesHeaders, lazy: true, immediate: false
+});
+
+const pagesData = useFetch(`/api/metrics/${activeProject.value?._id}/data/pages`, {
+    method: 'POST', headers: pagesHeaders, lazy: true, immediate: false
+});
 
 const isPagesView = ref<boolean>(false);
-const isLoading = ref<boolean>(false);
 
-
-const { snapshot } = useSnapshot()
-
-watch(pending, () => {
-    isLoading.value = true;
-    currentViewData.value = websites.value;
-    isLoading.value = false;
-});
-
-watch(snapshot, () => {
-    refresh();
-});
+const currentData = computed(() => {
+    return isPagesView.value ? pagesData : websitesData
+})
 
 
 async function showDetails(website: string) {
-    if (isPagesView.value == true) return;
-    isLoading.value = true;
+    currentWebsite.value = website;
+    pagesData.execute();
     isPagesView.value = true;
+}
 
-    const { data: pagesData, pending } = usePagesData(website, 10);
-
-    watch(pending, () => {
-        isLoading.value = true;
-        currentViewData.value = pagesData.value as any;
-        isLoading.value = false;
-    })
-
+async function showGeneral() {
+    websitesData.execute();
+    isPagesView.value = false;
 }
 
 const router = useRouter();
@@ -45,26 +61,18 @@ function goToView() {
     router.push('/dashboard/visits');
 }
 
-function setDefaultData() {
-    currentViewData.value = websites.value;
-    isPagesView.value = false;
-}
-
-async function dataReload() {
-    await refresh();
-    setDefaultData();
-}
-
-
+onMounted(()=>{
+    websitesData.execute();
+})
 
 </script>
 
 
 <template>
     <div class="flex flex-col gap-2 h-full">
-        <DashboardBarsCard :hideShowMore="true" @showGeneral="setDefaultData()" @showRawData="goToView()"
-            @dataReload="dataReload()" @showDetails="showDetails" :data="currentViewData || []"
-            :loading="pending || isLoading" :label="isPagesView ? 'Top pages' : 'Top Websites'"
+        <DashboardBarsCard :hideShowMore="true" @showGeneral="showGeneral()" @showRawData="goToView()"
+            @dataReload="currentData.refresh()" @showDetails="showDetails" :data="currentData.data.value || []"
+            :loading="currentData.pending.value" :label="isPagesView ? 'Top pages' : 'Top Websites'"
             :sub-label="isPagesView ? 'Page' : 'Website'"
             :desc="isPagesView ? 'Most visited pages' : 'Most visited website in this project'"
             :interactive="!isPagesView" :rawButton="!isLiveDemo()" :isDetailView="isPagesView">
diff --git a/dashboard/components/events/EventsStackedBarChart.vue b/dashboard/components/events/EventsStackedBarChart.vue
index 6d399f3..07b1bac 100644
--- a/dashboard/components/events/EventsStackedBarChart.vue
+++ b/dashboard/components/events/EventsStackedBarChart.vue
@@ -14,7 +14,6 @@ const body = computed(() => {
         from: safeSnapshotDates.value.from,
         to: safeSnapshotDates.value.to,
         slice: slice.value,
-        Authorization: authorizationHeaderComputed.value,
     }
 });
 
@@ -54,7 +53,7 @@ function transformResponse(input: { _id: string, name: string, count: number }[]
 }
 
 const eventsStackedData = useFetch(`/api/metrics/${activeProject.value?._id}/timeline/events_stacked`, {
-    method: 'POST', body, lazy: true, immediate: false, transform: transformResponse
+    method: 'POST', body, lazy: true, immediate: false, transform: transformResponse, ...signHeaders()
 });
 
 
diff --git a/dashboard/components/referrer/ReferrerBarChart.vue b/dashboard/components/referrer/ReferrerBarChart.vue
index 5b1fc56..2c148fe 100644
--- a/dashboard/components/referrer/ReferrerBarChart.vue
+++ b/dashboard/components/referrer/ReferrerBarChart.vue
@@ -2,30 +2,30 @@
 import { onMounted } from 'vue';
 import DateService, { type Slice } from '@services/DateService';
 
-const data = ref<number[]>([]);
-const labels = ref<string[]>([]);
-const ready = ref<boolean>(false);
+// const data = ref<number[]>([]);
+// const labels = ref<string[]>([]);
+// const ready = ref<boolean>(false);
 
-const props = defineProps<{ slice: Slice, referrer: string }>();
+// const props = defineProps<{ slice: Slice, referrer: string }>();
 
-async function loadData() {
-    const response = await useReferrersTimeline(props.referrer, props.slice);
-    if (!response) return;
-    data.value = response.map(e => e.count);
-    labels.value = response.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, props.slice));
-    ready.value = true;
-}
+// async function loadData() {
+//     const response = await useReferrersTimeline(props.referrer, props.slice);
+//     if (!response) return;
+//     data.value = response.map(e => e.count);
+//     labels.value = response.map(e => DateService.getChartLabelFromISO(e._id, navigator.language, props.slice));
+//     ready.value = true;
+// }
 
-onMounted(async () => {
-    await loadData();
-    watch(props, async () => { await loadData(); });
-})
+// onMounted(async () => {
+//     await loadData();
+//     watch(props, async () => { await loadData(); });
+// })
 
 </script>
 
 <template>
     <div>
-        <AdvancedBarChart v-if="ready" :data="data" :labels="labels" color="#5680f8">
-        </AdvancedBarChart>
+        <!-- <AdvancedBarChart v-if="ready" :data="data" :labels="labels" color="#5680f8">
+        </AdvancedBarChart> -->
     </div>
 </template>
\ No newline at end of file
diff --git a/dashboard/composables/useDataService.ts b/dashboard/composables/useDataService.ts
index 0cc680b..31a59ca 100644
--- a/dashboard/composables/useDataService.ts
+++ b/dashboard/composables/useDataService.ts
@@ -22,148 +22,148 @@ export function useMetricsData() {
 
 
 
-const { safeSnapshotDates, snapshot } = useSnapshot()
-const activeProject = useActiveProject();
+// const { safeSnapshotDates, snapshot } = useSnapshot()
+// const activeProject = useActiveProject();
 
-const createFromToHeaders = (headers: Record<string, string> = {}) => ({
-    'x-from': safeSnapshotDates.value.from,
-    'x-to': safeSnapshotDates.value.to,
-    ...headers
-});
+// const createFromToHeaders = (headers: Record<string, string> = {}) => ({
+//     'x-from': safeSnapshotDates.value.from,
+//     'x-to': safeSnapshotDates.value.to,
+//     ...headers
+// });
 
-const createFromToBody = (body: Record<string, any> = {}) => ({
-    from: safeSnapshotDates.value.from,
-    to: safeSnapshotDates.value.to,
-    ...body
-});
+// const createFromToBody = (body: Record<string, any> = {}) => ({
+//     from: safeSnapshotDates.value.from,
+//     to: safeSnapshotDates.value.to,
+//     ...body
+// });
 
 
 
-export function useFirstInteractionData() {
-    const activeProject = useActiveProject();
-    const metricsInfo = useFetch<boolean>(`/api/metrics/${activeProject.value?._id}/first_interaction`, signHeaders());
-    return metricsInfo;
-}
+// export function useFirstInteractionData() {
+//     const activeProject = useActiveProject();
+//     const metricsInfo = useFetch<boolean>(`/api/metrics/${activeProject.value?._id}/first_interaction`, signHeaders());
+//     return metricsInfo;
+// }
 
 
-export function useTimelineAdvanced<T>(endpoint: string, slice: Ref<Slice>, customBody: Object = {}) {
-    const response = useCustomFetch<T>(
-        `/api/metrics/${activeProject.value?._id}/timeline/${endpoint}`,
-        () => signHeaders({ 'Content-Type': 'application/json' }).headers, {
-        method: 'POST',
-        getBody: () => createFromToBody({ slice: slice.value, ...customBody }),
-        lazy: true,
-        watchProps: [snapshot, slice]
-    });
-    return response;
-}
+// export function useTimelineAdvanced<T>(endpoint: string, slice: Ref<Slice>, customBody: Object = {}) {
+//     const response = useCustomFetch<T>(
+//         `/api/metrics/${activeProject.value?._id}/timeline/${endpoint}`,
+//         () => signHeaders({ 'Content-Type': 'application/json' }).headers, {
+//         method: 'POST',
+//         getBody: () => createFromToBody({ slice: slice.value, ...customBody }),
+//         lazy: true,
+//         watchProps: [snapshot, slice]
+//     });
+//     return response;
+// }
 
 
-export function useTimeline(endpoint: 'visits' | 'sessions' | 'referrers' | 'events_stacked', slice: Ref<Slice>) {
-    return useTimelineAdvanced<{ _id: string, count: number }[]>(endpoint, slice);
-}
+// export function useTimeline(endpoint: 'visits' | 'sessions' | 'referrers' | 'events_stacked', slice: Ref<Slice>) {
+//     return useTimelineAdvanced<{ _id: string, count: number }[]>(endpoint, slice);
+// }
 
-export async function useReferrersTimeline(referrer: string, slice: Ref<Slice>) {
-    return await useTimelineAdvanced<{ _id: string, count: number }[]>('referrers', slice, { referrer });
-}
+// export async function useReferrersTimeline(referrer: string, slice: Ref<Slice>) {
+//     return await useTimelineAdvanced<{ _id: string, count: number }[]>('referrers', slice, { referrer });
+// }
 
-export function useEventsStackedTimeline(slice: Ref<Slice>) {
-    return useTimelineAdvanced<{ _id: string, name: string, count: number }[]>('events_stacked', slice);
-}
+// export function useEventsStackedTimeline(slice: Ref<Slice>) {
+//     return useTimelineAdvanced<{ _id: string, name: string, count: number }[]>('events_stacked', slice);
+// }
 
 
 
-export async function useTimelineDataRaw(timelineEndpointName: string, slice: SliceName) {
-    const activeProject = useActiveProject();
+// export async function useTimelineDataRaw(timelineEndpointName: string, slice: SliceName) {
+//     const activeProject = useActiveProject();
 
-    const response = await $fetch<{ data: MetricsTimeline[], from: string, to: string }>(
-        `/api/metrics/${activeProject.value?._id}/timeline/${timelineEndpointName}`, {
-        method: 'POST',
-        ...signHeaders({ 'Content-Type': 'application/json' }),
-        body: JSON.stringify({ slice }),
-    });
+//     const response = await $fetch<{ data: MetricsTimeline[], from: string, to: string }>(
+//         `/api/metrics/${activeProject.value?._id}/timeline/${timelineEndpointName}`, {
+//         method: 'POST',
+//         ...signHeaders({ 'Content-Type': 'application/json' }),
+//         body: JSON.stringify({ slice }),
+//     });
 
-    return response;
-}
+//     return response;
+// }
 
-export async function useTimelineData(timelineEndpointName: string, slice: SliceName) {
-    const response = await useTimelineDataRaw(timelineEndpointName, slice);
-    if (!response) return;
-    const fixed = fixMetrics(response, slice);
-    return fixed;
-}
+// export async function useTimelineData(timelineEndpointName: string, slice: SliceName) {
+//     const response = await useTimelineDataRaw(timelineEndpointName, slice);
+//     if (!response) return;
+//     const fixed = fixMetrics(response, slice);
+//     return fixed;
+// }
 
-export function usePagesData(website: string, limit: number = 10) {
-    const activeProject = useActiveProject();
+// export function usePagesData(website: string, limit: number = 10) {
+//     const activeProject = useActiveProject();
 
-    const res = useFetch<VisitsWebsiteAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/pages`, {
-        ...signHeaders({
-            'x-query-limit': limit.toString(),
-            'x-website-name': website
-        }),
-        key: `pages_data:${website}:${limit}`,
-        lazy: true
-    });
+//     const res = useFetch<VisitsWebsiteAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/pages`, {
+//         ...signHeaders({
+//             'x-query-limit': limit.toString(),
+//             'x-website-name': website
+//         }),
+//         key: `pages_data:${website}:${limit}`,
+//         lazy: true
+//     });
 
-    return res;
+//     return res;
 
-}
+// }
 
 
 
 
-export function useWebsitesData(limit: number = 10) {
-    const res = useCustomFetch<VisitsWebsiteAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/websites`,
-        () => signHeaders(createFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
-        { lazy: false, watchProps: [snapshot] }
-    );
-    return res;
-}
+// export function useWebsitesData(limit: number = 10) {
+//     const res = useCustomFetch<VisitsWebsiteAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/websites`,
+//         () => signHeaders(createFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
+//         { lazy: false, watchProps: [snapshot] }
+//     );
+//     return res;
+// }
 
-export function useEventsData(limit: number = 10) {
-    const res = useCustomFetch<CustomEventsAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/events`,
-        () => signHeaders(createFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
-        { lazy: false, watchProps: [snapshot] }
-    );
-    return res;
-}
+// export function useEventsData(limit: number = 10) {
+//     const res = useCustomFetch<CustomEventsAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/events`,
+//         () => signHeaders(createFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
+//         { lazy: false, watchProps: [snapshot] }
+//     );
+//     return res;
+// }
 
-export function useReferrersData(limit: number = 10) {
-    const res = useCustomFetch<ReferrersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/referrers`,
-        () => signHeaders(createFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
-        { lazy: false, watchProps: [snapshot] }
-    );
-    return res;
-}
+// export function useReferrersData(limit: number = 10) {
+//     const res = useCustomFetch<ReferrersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/referrers`,
+//         () => signHeaders(createFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
+//         { lazy: false, watchProps: [snapshot] }
+//     );
+//     return res;
+// }
 
-export function useBrowsersData(limit: number = 10) {
-    const res = useCustomFetch<BrowsersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/browsers`,
-        () => signHeaders(createFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
-        { lazy: false, watchProps: [snapshot] }
-    );
-    return res;
-}
+// export function useBrowsersData(limit: number = 10) {
+//     const res = useCustomFetch<BrowsersAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/browsers`,
+//         () => signHeaders(createFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
+//         { lazy: false, watchProps: [snapshot] }
+//     );
+//     return res;
+// }
 
-export function useOssData(limit: number = 10) {
-    const res = useCustomFetch<OssAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/oss`,
-        () => signHeaders(createFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
-        { lazy: false, watchProps: [snapshot] }
-    );
-    return res;
-}
+// export function useOssData(limit: number = 10) {
+//     const res = useCustomFetch<OssAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/oss`,
+//         () => signHeaders(createFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
+//         { lazy: false, watchProps: [snapshot] }
+//     );
+//     return res;
+// }
 
-export function useGeolocationData(limit: number = 10) {
-    const res = useCustomFetch<CountriesAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/countries`,
-        () => signHeaders(createFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
-        { lazy: false, watchProps: [snapshot] }
-    );
-    return res;
-}
+// export function useGeolocationData(limit: number = 10) {
+//     const res = useCustomFetch<CountriesAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/countries`,
+//         () => signHeaders(createFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
+//         { lazy: false, watchProps: [snapshot] }
+//     );
+//     return res;
+// }
 
-export function useDevicesData(limit: number = 10) {
-    const res = useCustomFetch<DevicesAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/devices`,
-        () => signHeaders(createFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
-        { lazy: false, watchProps: [snapshot] }
-    );
-    return res;
-}
+// export function useDevicesData(limit: number = 10) {
+//     const res = useCustomFetch<DevicesAggregated[]>(`/api/metrics/${activeProject.value?._id}/data/devices`,
+//         () => signHeaders(createFromToHeaders({ 'x-query-limit': limit.toString() })).headers,
+//         { lazy: false, watchProps: [snapshot] }
+//     );
+//     return res;
+// }
diff --git a/dashboard/composables/useSnapshot.ts b/dashboard/composables/useSnapshot.ts
index f847f1d..047eb44 100644
--- a/dashboard/composables/useSnapshot.ts
+++ b/dashboard/composables/useSnapshot.ts
@@ -8,7 +8,7 @@ const remoteSnapshots = useFetch<TProjectSnapshot[]>('/api/project/snapshots', {
 const activeProject = useActiveProject();
 watch(activeProject, async () => {
     await remoteSnapshots.refresh();
-    snapshot.value = snapshots.value[1];
+    snapshot.value = isLiveDemo() ? snapshots.value[0] : snapshots.value[1];
 });
 
 const snapshots = computed(() => {
@@ -56,7 +56,7 @@ const snapshots = computed(() => {
     ];
 })
 
-const snapshot = ref<TProjectSnapshot>(snapshots.value[1]);
+const snapshot = ref<TProjectSnapshot>(isLiveDemo() ? snapshots.value[0] : snapshots.value[1]);
 
 const safeSnapshotDates = computed(() => {
     const from = new Date(snapshot.value?.from || 0).toISOString();
diff --git a/dashboard/layouts/dashboard.vue b/dashboard/layouts/dashboard.vue
index 1ac7f80..1816dea 100644
--- a/dashboard/layouts/dashboard.vue
+++ b/dashboard/layouts/dashboard.vue
@@ -2,47 +2,21 @@
 
 import type { Section } from '~/components/CVerticalNavigation.vue';
 
-const router = useRouter();
-const { setToken } = useAccessToken();
-
 import { Lit } from 'litlyx-js';
 
 const sections: Section[] = [
-    {
-        title: 'General',
-        entries: [
-            // { label: 'Projects', icon: 'far fa-table-layout', to: '/project_selector' },
-            // { label: 'Members', icon: 'far fa-users', to: '/members' },
-            // { label: 'Admin', icon: 'fas fa-cat', adminOnly: true, to: '/admin' },
-        ]
-    },
     {
         title: 'Project',
         entries: [
             { label: 'Dashboard', to: '/', icon: 'fal fa-table-layout' },
             { label: 'Events', to: '/events', icon: 'fal fa-square-bolt' },
             { label: 'Analyst', to: '/analyst', icon: 'fal fa-microchip-ai' },
-            { label: 'Settings', to: '/settings', icon: 'fal fa-gear' },
-            // { label: 'Report', to: '/report', icon: 'far fa-notes' },
-            // { label: 'AI', to: '/dashboard/settings', icon: 'far fa-robot brightness-[.4]' },
-            // { label: 'Visits', to: '/dashboard/visits', icon: 'far fa-eye' },
-            // { label: 'Events', to: '/dashboard/events', icon: 'far fa-line-chart' },
+            { label: 'Insights (soon)', to: '#', icon: 'fal fa-lightbulb', disabled: true },
             {
                 label: 'Docs', to: 'https://docs.litlyx.com', icon: 'fal fa-book', external: true,
                 action() { Lit.event('docs_clicked') },
             },
-        ]
-    },
-    {
-        title: 'Non si vede',
-        entries: [
-          
-            // {
-            //     label: 'Github', to: 'https://github.com/litlyx/litlyx', icon: 'fab fa-github', external: true,
-            //     action() { Lit.event('git_clicked') },
-            // },
-            // { label: 'Billing', to: '/plans', icon: 'far fa-wallet' },
-            // { label: 'Book a demo', to: '/book_demo', icon: 'far fa-calendar' },
+            { label: 'Settings', to: '/settings', icon: 'fal fa-gear' },
         ]
     }
 ];
diff --git a/dashboard/pages/events.vue b/dashboard/pages/events.vue
index 073a4d2..a33d05b 100644
--- a/dashboard/pages/events.vue
+++ b/dashboard/pages/events.vue
@@ -8,16 +8,21 @@ const selectLabelsEvents = [
 ];
 const eventsStackedSelectIndex = ref<number>(0);
 
+const activeProject = useActiveProject();
+const { snapshot } = useSnapshot();
+
+const refreshKey = computed(() => `${snapshot.value._id.toString() + activeProject.value?._id.toString()}`);
+
 
 </script>
 
 
 <template>
     <div class="w-full h-full overflow-y-auto pb-20 p-6 gap-6 flex flex-col">
-        
+
         <div class="flex gap-6 flex-col xl:flex-row">
 
-            <CardTitled class="p-4 flex-[4] w-full" title="Events" sub="Events stacked bar chart.">
+            <CardTitled :key="refreshKey" class="p-4 flex-[4] w-full" title="Events" sub="Events stacked bar chart.">
                 <template #header>
                     <SelectButton @changeIndex="eventsStackedSelectIndex = $event"
                         :currentIndex="eventsStackedSelectIndex" :options="selectLabelsEvents">
@@ -29,18 +34,19 @@ const eventsStackedSelectIndex = ref<number>(0);
                 </div>
             </CardTitled>
 
-            <CardTitled class="p-4 flex-[2] w-full h-full" title="Top events" sub="Displays key events.">
+            <CardTitled :key="refreshKey" class="p-4 flex-[2] w-full h-full" title="Top events"
+                sub="Displays key events.">
                 <DashboardEventsChart class="w-full"> </DashboardEventsChart>
             </CardTitled>
 
         </div>
 
         <div class="flex">
-            <EventsUserFlow></EventsUserFlow>
+            <EventsUserFlow :key="refreshKey"></EventsUserFlow>
         </div>
 
         <div class="flex">
-            <EventsMetadataAnalyzer></EventsMetadataAnalyzer>
+            <EventsMetadataAnalyzer :key="refreshKey"></EventsMetadataAnalyzer>
         </div>
 
 
diff --git a/dashboard/pages/index.vue b/dashboard/pages/index.vue
index b6b9ba3..fddc330 100644
--- a/dashboard/pages/index.vue
+++ b/dashboard/pages/index.vue
@@ -54,14 +54,14 @@ function copyScript() {
     createAlert('Success', 'Script copied successfully.', 'far fa-circle-check', 5000);
 }
 
-const { data: firstInteraction, pending, refresh } = useFirstInteractionData();
+const firstInteractionUrl = computed(() => {
+    return `/api/metrics/${activeProject.value?._id}/first_interaction`
+});
 
-watch(pending, () => {
-    if (pending.value === true) return;
-    if (firstInteraction.value === false) {
-        setTimeout(() => { refresh(); }, 2000);
-    }
-})
+const firstInteraction = useFetch<boolean>(firstInteractionUrl, {
+    ...signHeaders(),
+    lazy: true
+});
 
 const selectLabels = [
     { label: 'Hour', value: 'hour' },
@@ -70,16 +70,10 @@ const selectLabels = [
 ];
 
 
-const limitAlertActions: any[] = [
-    {
-        label: 'Upgrade', variant: "outline", color: 'white',
-        trailing: true, action: () => { }
-    }
-]
 
 const { snapshot } = useSnapshot();
 
-const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
+const refreshKey = computed(() => `${snapshot.value._id.toString() + activeProject.value?._id.toString()}`);
 
 
 </script>
@@ -88,16 +82,9 @@ const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
 
     <div class="dashboard w-full h-full overflow-y-auto pb-20 md:pt-4 lg:pt-0">
 
-        <div :key="'home-' + isLiveDemo()" v-if="projects && activeProject && firstInteraction">
+        <div :key="'home-' + isLiveDemo()" v-if="projects && activeProject && firstInteraction.data.value">
 
             <div class="w-full px-4 py-2">
-                <!-- <div v-if="limitsInfo && !limitsInfo.limited"
-                    class="bg-orange-600 justify-center flex gap-2 py-2 px-4 font-semibold text-[1.2rem] rounded-lg">
-                    <div class="poppins text-text"> Limit reached </div>
-                    <NuxtLink to="/plans" class="poppins text-[#393972] underline cursor-pointer">
-                        Upgrade project
-                    </NuxtLink>
-                </div> -->
 
 
                 <div v-if="limitsInfo && limitsInfo.limited"
@@ -118,7 +105,7 @@ const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
 
             </div>
 
-            <DashboardTopSection></DashboardTopSection>
+          <DashboardTopSection></DashboardTopSection>
             <DashboardTopCards :key="refreshKey"></DashboardTopCards>
 
 
@@ -150,27 +137,27 @@ const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
                     </div>
                 </CardTitled>
 
-            </div>
+            </div> 
 
             <div class="flex w-full justify-center mt-6 px-6">
                 <div class="flex w-full gap-6 flex-col xl:flex-row">
                     <div class="flex-1">
-                        <DashboardWebsitesBarCard></DashboardWebsitesBarCard>
+                        <DashboardWebsitesBarCard :key="refreshKey"></DashboardWebsitesBarCard>
                     </div>
                     <div class="flex-1">
-                        <DashboardEventsBarCard></DashboardEventsBarCard>
+                         <DashboardEventsBarCard :key="refreshKey"></DashboardEventsBarCard>
                     </div>
                 </div>
             </div>
 
 
-            <div class="flex w-full justify-center mt-6 px-6">
+             <div class="flex w-full justify-center mt-6 px-6">
                 <div class="flex w-full gap-6 flex-col xl:flex-row">
                     <div class="flex-1">
-                        <DashboardReferrersBarCard></DashboardReferrersBarCard>
+                        <DashboardReferrersBarCard :key="refreshKey"></DashboardReferrersBarCard>
                     </div>
                     <div class="flex-1">
-                        <DashboardBrowsersBarCard></DashboardBrowsersBarCard>
+                        <DashboardBrowsersBarCard :key="refreshKey"></DashboardBrowsersBarCard>
                     </div>
                 </div>
             </div>
@@ -178,10 +165,10 @@ const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
             <div class="flex w-full justify-center mt-6 px-6">
                 <div class="flex w-full gap-6 flex-col xl:flex-row">
                     <div class="flex-1">
-                        <DashboardOssBarCard></DashboardOssBarCard>
+                        <DashboardOssBarCard :key="refreshKey"></DashboardOssBarCard>
                     </div>
                     <div class="flex-1">
-                        <DashboardGeolocationBarCard></DashboardGeolocationBarCard>
+                        <DashboardGeolocationBarCard :key="refreshKey"></DashboardGeolocationBarCard>
                     </div>
                 </div>
             </div>
@@ -189,16 +176,16 @@ const refreshKey = computed(() => `${snapshot.value._id.toString()}`);
             <div class="flex w-full justify-center mt-6 px-6">
                 <div class="flex w-full gap-6 flex-col xl:flex-row">
                     <div class="flex-1">
-                        <DashboardDevicesBarCard></DashboardDevicesBarCard>
+                        <DashboardDevicesBarCard :key="refreshKey"></DashboardDevicesBarCard>
                     </div>
                     <div class="flex-1">
                     </div>
                 </div>
-            </div>
+            </div> 
 
         </div>
 
-        <div v-if="!firstInteraction && activeProject" class="mt-[20vh] lg:mt-[36vh] flex flex-col gap-6">
+        <div v-if="!firstInteraction.data.value && activeProject" class="mt-[20vh] lg:mt-[36vh] flex flex-col gap-6">
             <div class="flex gap-4 items-center justify-center">
                 <div class="animate-pulse w-[1.5rem] h-[1.5rem] bg-accent rounded-full"> </div>
                 <div class="text-text/90 poppins text-[1.3rem] font-semibold">
diff --git a/dashboard/pages/live_demo.vue b/dashboard/pages/live_demo.vue
index 5760d88..a98c7d5 100644
--- a/dashboard/pages/live_demo.vue
+++ b/dashboard/pages/live_demo.vue
@@ -46,7 +46,7 @@ const selectLabelsEvents = [
     { label: 'Month', value: 'month' },
 ];
 
-
+const { snapshot } = useSnapshot();
 </script>
 
 
@@ -118,7 +118,7 @@ const selectLabelsEvents = [
 
 
             <div class="flex gap-6 flex-col xl:flex-row p-6">
-                <CardTitled class="p-4 flex-[4]" title="Events" sub="Events stacked bar chart.">
+                <!-- <CardTitled class="p-4 flex-[4]" title="Events" sub="Events stacked bar chart.">
                     <template #header>
                         <SelectButton @changeIndex="eventsStackedSelectIndex = $event"
                             :currentIndex="eventsStackedSelectIndex" :options="selectLabelsEvents">
@@ -128,7 +128,7 @@ const selectLabelsEvents = [
                         <EventsStackedBarChart :slice="(selectLabelsEvents[eventsStackedSelectIndex].value as any)">
                         </EventsStackedBarChart>
                     </div>
-                </CardTitled>
+                </CardTitled> -->
 
                 <div class="bg-menu p-4 rounded-xl flex-[2] flex flex-col gap-10 h-full">
                     <div class="flex flex-col gap-1">