fix dashboard + live demo

dashboard/components/CVerticalNavigation.vue

@@ -10,6 +10,7 @@ export type Entry = {
     icon?: string,
     action?: () => any,
     adminOnly?: boolean,
+    premiumOnly?:boolean,
     external?: boolean,
     grow?: boolean
 }
@@ -112,6 +113,10 @@ watch(selected, () => {
     setActiveProject(selected.value._id.toString())
 })
 
+const isPremium = computed(()=>{
+    return activeProject.value?.premium;
+})
+
 </script>
 
 <template>
@@ -249,9 +254,9 @@ watch(selected, () => {
 
             <div class="flex flex-col h-full">
 
-                <div v-for="section of sections" class="flex flex-col gap-1">
+                <div v-for="section of sections" class="flex flex-col gap-1 h-full pb-6">
 
-                    <div v-for="entry of section.entries">
+                    <div v-for="entry of section.entries" :class="{ 'grow flex items-end': entry.grow }">
 
                         <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"
@@ -266,9 +271,12 @@ watch(selected, () => {
                                 <div class="flex items-center w-[1.4rem] mr-2 text-[1.1rem] justify-center">
                                     <i :class="entry.icon"></i>
                                 </div>
-                                <div class="manrope">
+                                <div class="manrope grow">
                                     {{ entry.label }}
                                 </div>
+                                <div v-if="entry.premiumOnly && !isPremium" class="flex items-center">
+                                    <i class="fal fa-lock"></i>
+                                </div>
                             </NuxtLink>
 
                         </div>

dashboard/components/dashboard/CountCard.vue

@@ -36,7 +36,7 @@ const props = defineProps<{
                         {{ trend.toFixed(0) }} %
                     </div>
                 </div>
-                <div class="poppins text-text-sub text-[.7rem]"> Daily variation </div>
+                <div class="poppins text-text-sub text-[.7rem]"> Trend </div>
             </div>
 
         </div>

dashboard/components/dashboard/TopCards.vue

@@ -134,7 +134,7 @@ onMounted(async () => {
         </DashboardCountCard>
 
 
-        <DashboardCountCard :ready="!sessionsDurationData.pending.value" icon="far fa-timer" text="Avg session time"
+        <DashboardCountCard :ready="!sessionsDurationData.pending.value" icon="far fa-timer" text="Total avg session time"
             :value="avgSessionDuration" :trend="sessionsDurationData.data.value?.trend"
             :data="sessionsDurationData.data.value?.data" :labels="sessionsDurationData.data.value?.labels"
             color="#f56523">