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">

dashboard/layouts/dashboard.vue

@@ -4,24 +4,45 @@ import type { Section } from '~/components/CVerticalNavigation.vue';
 
 import { Lit } from 'litlyx-js';
 
+const activeProject = useActiveProject();
+const isPremium = computed(() => {
+    return activeProject.value?.premium;
+});
+
+const pricingDrawer = usePricingDrawer();
+
 const sections: Section[] = [
     {
-        title: 'Project',
+        title: '',
         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: 'Insights (soon)', to: '#', icon: 'fal fa-lightbulb', disabled: true },
             { label: 'Links (soon)', to: '#', icon: 'fal fa-globe-pointer', disabled: true },
+            { label: 'Integrations (soon)', to: '#', icon: 'fal fa-cube', disabled: true },
+            { label: 'Settings', to: '/settings', icon: 'fal fa-gear' },
             {
-                label: 'Docs', to: 'https://docs.litlyx.com', icon: 'fal fa-book', external: true,
+                grow: true,
+                label: 'Documentation', to: 'https://docs.litlyx.com', icon: 'fal fa-book', external: true,
                 action() { Lit.event('docs_clicked') },
             },
-            { label: 'Settings', to: '/settings', icon: 'fal fa-gear' },
+            {
+                label: 'Slack support', icon: 'fab fa-slack',
+                premiumOnly: true,
+                action() {
+                    if (isPremium.value === true) {
+                        window.open('https://join.slack.com/t/litlyx/shared_invite/zt-2q3oawn29-hZlu_fBUBlc4052Ooe3FZg', '_blank');
+                    } else {
+                        pricingDrawer.visible.value = true;
+                    }
+                },
+            },
         ]
     }
 ];
 
+
 const { showDialog, closeDialog } = useBarCardDialog();
 
 const { isOpen, close, open } = useMenu();

dashboard/pages/live_demo.vue

@@ -71,14 +71,9 @@ const { snapshot } = useSnapshot();
                     </div>
                     <div class="grow"></div>
                     <div class="flex gap-2 md:pt-0 pt-4">
-                        <NuxtLink target="_blank" to="https://cal.com/litlyx/30min"
+                        <LyxUiButton link="/" type="primary" class="poppins font-semibold text-[.9rem] lg:text-[1.2rem] flex items-center !px-14 py-4">
-                            class="bg-white hover:bg-white/90 px-4 py-3 text-black poppins font-semibold text-[.9rem] lg:text-[1.2rem] rounded-lg">
+                            Get started for free
-                            Book a demo
+                        </LyxUiButton>
-                        </NuxtLink>
-                        <NuxtLink to="/"
-                            class="bg-accent hover:bg-accent/90 px-4 py-3 poppins font-semibold text-[.9rem] lg:text-[1.2rem] rounded-lg">
-                            Go to dashboard
-                        </NuxtLink>
                     </div>
                 </div>
             </div>
@@ -102,7 +97,7 @@ const { snapshot } = useSnapshot();
                     </div>
                 </CardTitled>
 
-                <CardTitled class="p-4 flex-1" title="Sessions" sub="Shows trends in sessions.">
+                <!-- <CardTitled class="p-4 flex-1" title="Sessions" sub="Shows trends in sessions.">
                     <template #header>
                         <SelectButton @changeIndex="sessionsChartSelectIndex = $event"
                             :currentIndex="sessionsChartSelectIndex" :options="selectLabels">
@@ -112,13 +107,14 @@ const { snapshot } = useSnapshot();
                         <DashboardSessionsLineChart :slice="(selectLabels[sessionsChartSelectIndex].value as any)">
                         </DashboardSessionsLineChart>
                     </div>
-                </CardTitled>
+                </CardTitled> -->
 
             </div>
 
 
             <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] w-full h-full" title="Events" sub="Events stacked bar chart.">
                     <template #header>
                         <SelectButton @changeIndex="eventsStackedSelectIndex = $event"
                             :currentIndex="eventsStackedSelectIndex" :options="selectLabelsEvents">
@@ -128,25 +124,17 @@ const { snapshot } = useSnapshot();
                         <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">
+                <CardTitled title="Top events" sub=" Displays key events." class="p-4 flex-[2] w-full h-full">
-                    <div class="flex flex-col gap-1">
+                    <div>
-                        <div class="poppins font-semibold text-[1.4rem] text-text">
+                        <DashboardEventsChart class="w-full"> </DashboardEventsChart>
-                            Top events
-                        </div>
-                        <div class="poppins text-[1rem] text-text-sub/90">
-                            Displays key events.
-                        </div>
                     </div>
-
+                </CardTitled>
-                    <DashboardEventsChart class="w-full"> </DashboardEventsChart>
-
-                </div>
             </div>
 
 
-            <div class="flex w-full justify-center mt-6 px-6">
+            <div class="flex w-full justify-center px-6">
                 <div class="flex w-full gap-6 flex-col lg:flex-row">
                     <div class="flex-1">
                         <DashboardWebsitesBarCard></DashboardWebsitesBarCard>
@@ -203,15 +191,14 @@ const { snapshot } = useSnapshot();
                             Do you want this KPIs for your website ?
                         </div>
                         <div class="poppins font-semibold text-text-sub">
-                            Start now ! It's free.
+                            Start now! It's free.
                         </div>
                     </div>
 
                     <div class="flex gap-2 flex-col md:flex-row">
-                        <NuxtLink to="/"
+                        <LyxUiButton link="/" type="primary" class="poppins font-semibold text-[1.1rem] lg:text-[1.6rem] flex items-center !px-14">
-                            class="bg-accent hover:bg-accent/90 px-14 py-4 poppins font-semibold text-[1.1rem] lg:text-[1.6rem] rounded-lg">
                             Get started
-                        </NuxtLink>
+                        </LyxUiButton>
                         <NuxtLink target="_blank" to="https://cal.com/litlyx/30min"
                             class="bg-white hover:bg-white/90 text-black px-14 py-4 poppins font-semibold text-[1.1rem] lg:text-[1.6rem] rounded-lg">
                             Book a demo

dashboard/utils/prettyNumber.ts

@@ -9,6 +9,7 @@ export function formatNumberK(value: string | number, decimals: number = 1) {
 
     if (num > 1_000_000) return (num / 1_000_000).toFixed(decimals) + ' M';
     if (num > 1_000) return (num / 1_000).toFixed(decimals) + ' K';
-    return num.toFixed();
+    
+    return isNaN(num) ? '0' : num.toFixed();
 
 }